shiyiya/oplayer

Plugin examples

shiyiya opened this issue · 3 comments

shiyiya commented

skip-op-ed-plugin

import { $ } from '@oplayer/core'

/**
 *
 * @param options [op end time, ed start time]
 * @returns PlayerPlugin
 */
const skipOPEPlugin = (options = []) => ({
  name: 'skip-op-ed-plugin',
  key: 'skip',
  apply: (player) => {
    const pos = $.css(`
      display: none;
      position: absolute;
      bottom: 25%;
      right: -2px;
      z-index: 1;`)

    const area = $.css(`
      color: #fff;
      background: rgba(28 ,28 ,28 , 0.9);
      padding: 6px 20px;
      border-radius: 4px;
      font-size: 14px;
      cursor: pointer;`)

    const $dom = $.create(`div.${pos}`, {}, `<div class=${area}>Skip</div>`)

    const [o = -1, e = Infinity] = options
    let duration = [o, e]

    $dom.onclick = function () {
      if (player.currentTime < duration[0]) {
        player.seek(duration[0])
      }
      if (player.currentTime > duration[1]) {
        // 🤖 play next ep
      }
    }

    player.on(['timeupdate', 'seeked'], () => {
      if (player.currentTime < duration[0] || player.currentTime > duration[1]) {
        $dom.style.display = 'block'
      } else {
        $dom.style.display = 'none'
      }
    })

    player.on('videosourcechange', () => {
      duration = [-1, Infinity]
    })

    $.render($dom, player.$root)

    return  () => { duration = [-1, Infinity] }
  }
})

// use
player.use([skipOPEPlugin])

// update op ed time
player.plugins.op([newOPTime, newEDTime])

full example: https://github.com/Enime-Project/enime.moe/blob/master/lib/player/plugin/skip-op-ed.ts
@NADESHIKON

shiyiya commented

Airplay

player
  .make(document.body)
  .use([
    ui({
      menu: [
        {
          name: 'airplay',
          icon: `<svg style='scale:0.9' viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M662.186667 981.333333H361.813333c-17.194667 0-32.853333-9.386667-40.661333-23.552a50.176 50.176 0 0 1 0-47.104l150.186667-260.565333c7.808-14.08 23.466667-23.509333 40.661333-23.509333 17.194667 0 32.853333 9.386667 40.661333 23.552l150.186667 260.565333c7.850667 14.08 7.850667 32.938667 0 47.061333-7.808 14.122667-23.466667 23.552-40.661333 23.552z m-219.008-94.165333h137.642666L512 767.872l-68.821333 119.296z"></path><path d="M821.76 841.642667h-100.138667c-26.581333 0-46.933333-20.437333-46.933333-47.104 0-26.666667 20.352-47.104 46.933333-47.104h100.138667c37.546667 0 67.285333-29.824 67.285333-67.498667V204.373333c-1.578667-37.674667-31.317333-67.498667-67.285333-67.498666H203.818667c-37.546667 0-67.285333 29.866667-67.285334 67.498666v477.184c0 37.674667 29.738667 67.498667 67.285334 67.498667h100.096c26.624 0 46.933333 20.394667 46.933333 47.104 0 26.666667-20.309333 47.104-46.933333 47.104H203.818667A163.541333 163.541333 0 0 1 42.666667 679.893333V204.373333A161.194667 161.194667 0 0 1 203.818667 42.666667H821.76C909.354667 42.666667 981.333333 114.858667 981.333333 204.373333v477.141334c0 87.893333-71.978667 160.128-159.573333 160.128z"></path></svg>`,
          onClick: () => {
            if (window.WebKitPlaybackTargetAvailabilityEvent) {
              player.$video.webkitShowPlaybackTargetPicker()
            } else {
              player.plugins.ui.notice('Airplay not available')
            }
          }
        }
      ]
    })
  ])
  .create()