]>
Commit | Line | Data |
---|---|---|
0e7c4b03 C |
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 | ||
d9143964 C |
65 | // Not loaded yet |
66 | if (this.player().currentTime() === 0) return | |
67 | ||
0e7c4b03 C |
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) |