pre,next icon and auto next

[shiyiya]

import type { Player, PlayerEvent, PlayerOptions } from '@oplayer/core'
import ReactPlayer from '@oplayer/react'
import ui from '@oplayer/ui'
import React, { useImperativeHandle, useRef } from 'react'

interface OPlayerProps extends PlayerOptions {
  playerIsPlaying?: boolean
  duration?: number
  autoplay?: boolean
  onEvent?: (event: PlayerEvent) => void
}

const plugins = [
  ui({
    icons: {
      // 1️⃣ IMPORTANT
      next: `<svg style="transform: scale(0.7);" viewBox="0 0 1024 1024"><path d="M743.36 427.52L173.76 119.04A96 96 0 0 0 32 203.52v616.96a96 96 0 0 0 141.76 84.48l569.6-308.48a96 96 0 0 0 0-168.96zM960 96a32 32 0 0 0-32 32v768a32 32 0 0 0 64 0V128a32 32 0 0 0-32-32z"></path></svg>`
    }
  })
]

const OPlayer = React.forwardRef(
  ({ playerIsPlaying, duration, onEvent, autoplay, ...rest }: OPlayerProps, ref) => {
    const _ref = useRef<Player | null>(null)

    useImperativeHandle(ref, () => _ref.current)

    // 2️⃣ IMPORTANT
    const onEvent = ({ type, payload }: PlayerEvent) => {
      if (type == 'ended') {
        // do anything
      } else if (type == 'next') {
        // do anything
      }
    }

    return (
      <ReactPlayer
        ref={_ref}
        {...rest}
        plugins={plugins}
        onEvent={onEvent}
        autoplay={autoplay}
        duration={duration}
        playing={playerIsPlaying}
      />
    )
  }
)

export default OPlayer

preview

https://jsfiddle.net/7zu6ape2/latest

https://github.com/upvorg/web2/blob/07d3a104f35ba41c89d955da335ed880aa221c3d/packages/index/src/pages/player/index.tsx#L216

https://github.com/upvorg/upvorg.github.io/blob/07d3a104f35ba41c89d955da335ed880aa221c3d/packages/shared/components/player/OPlayer.tsx

[shiyiya]

WITH PLAYLIST PLUGIN

pnpm i @oplayer/plugins

player.on(['previous', 'next'], ({ type }) => {
  player.context.playlist[type]()
})

[code-lish]

I did the first step and how to do the second step