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.player().play()
  59     this.updateSync(true)
  60   }
  61
  62   private updateClass () {
  63     const hlsjs = this.getHLSJS()
  64     if (!hlsjs) return
  65
  66     // Not loaded yet
  67     if (this.player().currentTime() === 0) return
  68
  69     const isSync = Math.abs(this.player().currentTime() - hlsjs.liveSyncPosition) < 10
  70     this.updateSync(isSync)
  71   }
  72
  73   private updateSync (isSync: boolean) {
  74     if (isSync) {
  75       this.addClass('synced-with-live-edge')
  76       this.removeAttribute('title')
  77       this.disable()
  78     } else {
  79       this.removeClass('synced-with-live-edge')
  80       this.setAttribute('title', this.localize('Go back to the live'))
  81       this.enable()
  82     }
  83   }
  84
  85   private getHLSJS () {
  86     const p2pMediaLoader = this.player()?.p2pMediaLoader
  87     if (!p2pMediaLoader) return undefined
  88
  89     return p2pMediaLoader().getHLSJS()
  90   }
  91 }
  92
  93 videojs.registerComponent('PeerTubeLiveDisplay', PeerTubeLiveDisplay)