client/src/assets/player/shared/control-bar/peertube-live-display.ts

   1 import videojs from 'video.js'
   2 import { PeerTubeLinkButtonOptions } from '../../types'
   3
   4 const ClickableComponent = videojs.getComponent('ClickableComponent')
   5
   6 class PeerTubeLiveDisplay extends ClickableComponent {
   7   private interval: any
   8
   9   private contentEl_: any
  10
  11   constructor (player: videojs.Player, options?: PeerTubeLinkButtonOptions) {
  12     super(player, options as any)
  13
  14     this.interval = this.setInterval(() => this.updateClass(), 1000)
  15
  16     this.show()
  17     this.updateSync(true)
  18   }
  19
  20   dispose () {
  21     if (this.interval) {
  22       this.clearInterval(this.interval)
  23       this.interval = undefined
  24     }
  25
  26     this.contentEl_ = null
  27
  28     super.dispose()
  29   }
  30
  31   createEl () {
  32     const el = super.createEl('div', {
  33       className: 'vjs-live-control vjs-control'
  34     })
  35
  36     this.contentEl_ = videojs.dom.createEl('div', {
  37       className: 'vjs-live-display'
  38     }, {
  39       'aria-live': 'off'
  40     })
  41
  42     this.contentEl_.appendChild(videojs.dom.createEl('span', {
  43       className: 'vjs-control-text',
  44       textContent: `${this.localize('Stream Type')}\u00a0`
  45     }))
  46
  47     this.contentEl_.appendChild(document.createTextNode(this.localize('LIVE')))
  48
  49     el.appendChild(this.contentEl_)
  50     return el
  51   }
  52
  53   handleClick () {
  54     const hlsjs = this.getHLSJS()
  55     if (!hlsjs) return
  56
  57     this.player().currentTime(hlsjs.liveSyncPosition)
  58     this.updateSync(true)
  59   }
  60
  61   private updateClass () {
  62     const hlsjs = this.getHLSJS()
  63     if (!hlsjs) return
  64
  65     // Not loaded yet
  66     if (this.player().currentTime() === 0) return
  67
  68     const isSync = Math.abs(this.player().currentTime() - hlsjs.liveSyncPosition) < 10
  69     this.updateSync(isSync)
  70   }
  71
  72   private updateSync (isSync: boolean) {
  73     if (isSync) {
  74       this.addClass('synced-with-live-edge')
  75       this.removeAttribute('title')
  76       this.disable()
  77     } else {
  78       this.removeClass('synced-with-live-edge')
  79       this.setAttribute('title', this.localize('Go back to the live'))
  80       this.enable()
  81     }
  82   }
  83
  84   private getHLSJS () {
  85     const p2pMediaLoader = this.player()?.p2pMediaLoader
  86     if (!p2pMediaLoader) return undefined
  87
  88     return p2pMediaLoader().getHLSJS()
  89   }
  90 }
  91
  92 videojs.registerComponent('PeerTubeLiveDisplay', PeerTubeLiveDisplay)