]>
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) | |
7624270a | 58 | this.player().play() |
0e7c4b03 C |
59 | this.updateSync(true) |
60 | } | |
61 | ||
62 | private updateClass () { | |
63 | const hlsjs = this.getHLSJS() | |
64 | if (!hlsjs) return | |
65 | ||
d9143964 C |
66 | // Not loaded yet |
67 | if (this.player().currentTime() === 0) return | |
68 | ||
0e7c4b03 C |
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) |