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