OPlayer UI

npm i @oplayer/core @oplayer/ui

<script src="https://cdn.jsdelivr.net/npm/@oplayer/core@latest/dist/index.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@oplayer/ui@latest/dist/index.core.js"></script>
 
<!-- or just one -->
<!-- <script src="https://cdn.jsdelivr.net/npm/@oplayer/core@latest/dist/index.ui.js"></script> -->

const player = Player.make('#player', {
  source: {
    title: '君の名は',
    src: 'https://oplayer.vercel.app/君の名は.mp4',
    poster: 'https://oplayer.vercel.app/poster.png'
  }
})
  .use([OUI()])
  .create()

OUI({
  /* Default value, Optional */
  fullscreen: true,
  coverButton: true,
  miniProgressBar: true,
  autoFocus: true,
  forceLandscapeOnFullscreen: true,
  screenshot: false,
  pictureInPicture: false,
  showControls: 'always', // 'played'
  keyboard: { focused: true, global: false },
  settings: ['loop'],
  theme: { primaryColor: '#6668ab' },
  speeds: ['2.0', '1.75', '1.25', '1.0', '0.75', '0.5'],
  slideToSeek: 'none', // 'always' | 'long-touch'
  controlBar: false, // | { back:  'always' | 'fullscreen' } // appbar
  topSetting: false, //show setting icon on appbar
  /* Default value, Optional */
 
  /* Custom options */
  subtitle: {
    color: 'hotpink',
    fontSize: 20,
    fontFamily: '',
    background: true,
    source: [
      {
        name: 'Japanese',
        default: true,
        src: 'https://oplayer.vercel.app/君の名は-jp.srt'
      },
      {
        name: 'CH & JP',
        src: 'https://oplayer.vercel.app/君の名は.srt'
      }
    ]
  }
})

// single
thumbnails = {
  number: 100,
  src: 'https://oplayer.vercel.app/thumbnails.jpg'
}
// multipe & grid
thumbnails = {
  src: ['1.jpg', '2,jpg'],
  x: 10,
  y: 10,
  number: 192
}

{
  icons: {
    play: '',
    pause: '',
    volume: ['', ''], //on off
    fullscreen: ['', ''], //on off
    pip: '',
    setting: '',
    screenshot: '',
    playbackRate: '',
    loop: '',
    progressIndicator: '',
    loadingIndicator: '',
    previous: '',// enable previous,next button
    next: ''
  }
}

{
  menu: [
    {
      name: 'Quality(清晰度)',
      key: 'Quality', // for select
      position: 'bottom', // or top
      children: [
        {
          name: 'FHD',
          default: true,
          value: 'https://oplayer.vercel.app/君の名は.mp4'
        },
        {
          name: 'HD',
          value: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8'
        },
        {
          name: 'SD',
          value: 'https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps.mpd'
        }
      ],
      onChange({ value }) {
        player.changeQuality({ src: value })
      }
    }
  ]
}
 
//or
player.context.menu.register([])

{
  settings: [
    'loop', // Build-in
    'speed', // Build-in
    {
      // Custom
      key: 'KEY',
      type: 'selector', // or 'switcher'
      name: 'name',
      icon: 'icon',
      children: [
        { name: 'a', value: 'a', default: true },
        { name: 'b', value: 'b', default: false }
      ],
      onChange: ({ value }) => {
        // do something
      }
    }
  ]
}
//or
player.context.menu.register([])

{
  highlight: {
    color: '#fff', //default
    source: [
      { time: 12, text: '谁でもいいはずなのに' },
      { time: 34, text: '夏の想い出がまわる' },
      { time: 58, text: 'こんなとこにあるはずもないのに' },
      { time: 88, text: '－－终わり－－' }
    ]
  }
}

// - Update subtitle
player.context.ui.subtitle.changeSource([])
 
// - Update highlight
player.context.ui.changHighlightSource([])
 
// - Update thumbnails
player.context.ui.changThumbnails('src')
 
// - Register menu
player.context.ui.menu.register({})
player.context.ui.menu.unregister('key')
player.context.ui.menu.select('key', 'index')
 
// - Register setting
player.context.ui.setting.register({})
player.context.ui.setting.unregister('key')
player.context.ui.setting.updateLabel('key', 'text')
player.context.ui.setting.select('key', 'index')
 
// - Display error,notice
player.emit('error', { message: 'msg', code: 'number' })
player.context.ui.notice('hello')

type UIEventName = 'controllervisibilitychange' | 'backward'