@nusaplayer/danmaku

Danmaku plugin for NusaPlayer.

Install

npm i @nusaplayer/core @nusaplayer/danmaku

<script src="https://cdn.jsdelivr.net/npm/@nusaplayer/core@latest/dist/index.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@nusaplayer/danmaku@latest/dist/index.min.js"></script>

<div id="player"></div>

<script>
  NusaPlayer.make('#player', {
    source: {
      src: 'https://vjs.zencdn.net/v/oceans.mp4'
    }
  })
    .use([new NusaDanmaku({ source: [] })])
    .create()
</script>

Usage

export type Options = {
  source: string | Function | Comment[]
  /**
   * @default: 144
   * */
  speed?: number
  opacity?: number
  fontSize?: number
  /**
   * @default: 'dom'
   */
  engine: 'canvas' | 'dom'
  /**
   * @default true
   */
  enable?: boolean
  /**
   * Show the send input. Desktop only.
   * @default false
   */
  displaySender?: boolean
  /**
   * Called when sending from the input. Return false to block.
   */
  onEmit?: (comment: Comment) => boolean | void
}

export interface Comment {
  text?: string
  /**
   * @default rtl
   */
  mode?: 'ltr' | 'rtl' | 'top' | 'bottom'
  /**
   * Specified in seconds. Not required in live mode.
   * @default media?.currentTime
   */
  time?: number
  style?: Partial<CSSStyleDeclaration> | CanvasRenderingContext2D
  /**
   * A custom render to draw comment.
   * When it exist, `text` and `style` will be ignored.
   */
  render?(): HTMLElement | HTMLCanvasElement
}

Load comments

const danmaku = new NusaDanmaku({
  source: [
    { text: 'hello', mode: 'rtl', time: 1 },
    { text: 'world', mode: 'rtl', time: 2 }
  ]
  // or: source: () => fetch('xxxxx')
})

Live comments

const ws = new WebSocket('wss://xxxxxx')

ws.onmessage = async function (msg) {
  danmaku.emit(msg)
}

ws.send({ text: 'hello' })