pre,next icon and auto next

[shiyiya]

step 1

add pre or next icon

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
}

export type { PlayerEvent, Player }


const plugins = [
  ui({
    icons: {
      // 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)

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

export default OPlayer

setup 2

listen event

const onEvent = ({ type, payload }: PlayerEvent) => {
    console.log({ type, payload });
    
    const time = payload?.target?.currentTime
    if (type == 'timeupdate') {
      if (!(time < 1)) {
        update(id, lastEpisode, time * 1000)
      }
    } else if (type == 'ended') {
      update(id, lastEpisode + 1, 0)
    } else if (type == 'next') {
      update(id, lastEpisode + 1, 0)// do anything
    }
  }

preview

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

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