1 import videojs from 'video.js'
2 import { PeerTubeLinkButtonOptions } from '../../types'
4 const ClickableComponent = videojs.getComponent('ClickableComponent')
6 class PeerTubeLiveDisplay extends ClickableComponent {
9 private contentEl_: any
11 constructor (player: videojs.Player, options?: PeerTubeLinkButtonOptions) {
12 super(player, options as any)
14 this.interval = this.setInterval(() => this.updateClass(), 1000)
22 this.clearInterval(this.interval)
23 this.interval = undefined
26 this.contentEl_ = null
32 const el = super.createEl('div', {
33 className: 'vjs-live-control vjs-control'
36 this.contentEl_ = videojs.dom.createEl('div', {
37 className: 'vjs-live-display'
42 this.contentEl_.appendChild(videojs.dom.createEl('span', {
43 className: 'vjs-control-text',
44 textContent: `${this.localize('Stream Type')}\u00a0`
47 this.contentEl_.appendChild(document.createTextNode(this.localize('LIVE')))
49 el.appendChild(this.contentEl_)
54 const hlsjs = this.getHLSJS()
57 this.player().currentTime(hlsjs.liveSyncPosition)
62 private updateClass () {
63 const hlsjs = this.getHLSJS()
67 if (this.player().currentTime() === 0) return
69 const isSync = Math.abs(this.player().currentTime() - hlsjs.liveSyncPosition) < 10
70 this.updateSync(isSync)
73 private updateSync (isSync: boolean) {
75 this.addClass('synced-with-live-edge')
76 this.removeAttribute('title')
79 this.removeClass('synced-with-live-edge')
80 this.setAttribute('title', this.localize('Go back to the live'))
86 const p2pMediaLoader = this.player()?.p2pMediaLoader
87 if (!p2pMediaLoader) return undefined
89 return p2pMediaLoader().getHLSJS()
93 videojs.registerComponent('PeerTubeLiveDisplay', PeerTubeLiveDisplay)