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}
        languages={en:{ Next: '>>>' }}
        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

[Hiram-Wong]

how to config next i18n

[Hiram-Wong]

要在ui插件之前调，写plugin在apply里

apply? 怎么应用

player = OPlayer.make(`#${options.container}`, { ...defaultOpt });
player.locales.update({
  en: { next: 'Next' },
  'zh-CN': { next: '下一集' }
});
player.use(plugins).create();

[shiyiya]

https://github.com/upvorg/upvorg.github.io/blob/b62c49afced93079f1604e936c88b210ec79872f/packages/shared/components/player/OPlayer.tsx#L99

[Hiram-Wong]

https://github.com/upvorg/upvorg.github.io/blob/b62c49afced93079f1604e936c88b210ec79872f/packages/shared/components/player/OPlayer.tsx#L99

当options.next为 ture 时正常显示，然后触发player.destroy(); 后 设置options.next为false，再次初始化任然会显示 next 的 icon，摧毁不彻底吗

[shiyiya]

发全点代码

[Hiram-Wong]

最终可行代码如下

<template>
  <div id="demo-player"></div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue';
import OPlayer from '@oplayer/core';
import OUI from '@oplayer/ui';
import OHls from '@oplayer/hls';

let player;

const create = (options) => {
  const defaultUi = {
    speeds: ['2.0', '1.5', '1.25', '1.0', '0.75', '0.5'],
    keyboard: { global: true },
    pictureInPicture: true,
    fullscreen: true,
    icons: {},
  }
  if (options.next) {
    defaultUi.icons.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>`;
  } else {
    defaultUi.icons.next = null
  }

  const defaultOpt = {
    source: {
      src: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8',
      format: 'auto',
    },
    autoplay: true,
    isLive: false,
  }

  const plugins = [
    OUI({ ...defaultUi }),
    OHls({ forceHLS: true }),
  ];

  player = OPlayer.make('#demo-player', { ...defaultOpt }).use(plugins).create();
}

const destroy = () => {
  player.destroy();
}

onMounted(() => {
  create({next:true});
  setTimeout(() => {
    console.log('destroy');
    destroy();
    create({next:false});
  }, 5000);
})
</script>