diff options
author | Chocobozzz <me@florianbigard.com> | 2022-03-14 14:28:20 +0100 |
---|---|---|
committer | Chocobozzz <me@florianbigard.com> | 2022-03-14 14:36:35 +0100 |
commit | 57d6503286b114fee61b5e4725825e2490dcac29 (patch) | |
tree | 2d3d23f697b2986d7e41bb443754394296b66ec3 /client/src/assets/player/bezels | |
parent | 9597920ee3d4ac99803e7107983ddf98a9dfb3c4 (diff) | |
download | PeerTube-57d6503286b114fee61b5e4725825e2490dcac29.tar.gz PeerTube-57d6503286b114fee61b5e4725825e2490dcac29.tar.zst PeerTube-57d6503286b114fee61b5e4725825e2490dcac29.zip |
Reorganize player files
Diffstat (limited to 'client/src/assets/player/bezels')
-rw-r--r-- | client/src/assets/player/bezels/bezels-plugin.ts | 21 | ||||
-rw-r--r-- | client/src/assets/player/bezels/pause-bezel.ts | 76 |
2 files changed, 0 insertions, 97 deletions
diff --git a/client/src/assets/player/bezels/bezels-plugin.ts b/client/src/assets/player/bezels/bezels-plugin.ts deleted file mode 100644 index ca88bc1f9..000000000 --- a/client/src/assets/player/bezels/bezels-plugin.ts +++ /dev/null | |||
@@ -1,21 +0,0 @@ | |||
1 | import videojs from 'video.js' | ||
2 | import './pause-bezel' | ||
3 | |||
4 | const Plugin = videojs.getPlugin('plugin') | ||
5 | |||
6 | class BezelsPlugin extends Plugin { | ||
7 | |||
8 | constructor (player: videojs.Player, options?: videojs.ComponentOptions) { | ||
9 | super(player) | ||
10 | |||
11 | this.player.ready(() => { | ||
12 | player.addClass('vjs-bezels') | ||
13 | }) | ||
14 | |||
15 | player.addChild('PauseBezel', options) | ||
16 | } | ||
17 | } | ||
18 | |||
19 | videojs.registerPlugin('bezels', BezelsPlugin) | ||
20 | |||
21 | export { BezelsPlugin } | ||
diff --git a/client/src/assets/player/bezels/pause-bezel.ts b/client/src/assets/player/bezels/pause-bezel.ts deleted file mode 100644 index 315964311..000000000 --- a/client/src/assets/player/bezels/pause-bezel.ts +++ /dev/null | |||
@@ -1,76 +0,0 @@ | |||
1 | import videojs from 'video.js' | ||
2 | import { isMobile } from '../utils' | ||
3 | |||
4 | function getPauseBezel () { | ||
5 | return ` | ||
6 | <div class="vjs-bezels-pause"> | ||
7 | <div class="vjs-bezel" role="status" aria-label="Pause"> | ||
8 | <div class="vjs-bezel-icon"> | ||
9 | <svg height="100%" version="1.1" viewBox="0 0 36 36" width="100%"> | ||
10 | <use class="vjs-svg-shadow" xlink:href="#vjs-id-1"></use> | ||
11 | <path class="vjs-svg-fill" d="M 12,26 16,26 16,10 12,10 z M 21,26 25,26 25,10 21,10 z" id="vjs-id-1"></path> | ||
12 | </svg> | ||
13 | </div> | ||
14 | </div> | ||
15 | </div> | ||
16 | ` | ||
17 | } | ||
18 | |||
19 | function getPlayBezel () { | ||
20 | return ` | ||
21 | <div class="vjs-bezels-play"> | ||
22 | <div class="vjs-bezel" role="status" aria-label="Play"> | ||
23 | <div class="vjs-bezel-icon"> | ||
24 | <svg height="100%" version="1.1" viewBox="0 0 36 36" width="100%"> | ||
25 | <use class="vjs-svg-shadow" xlink:href="#vjs-id-2"></use> | ||
26 | <path class="vjs-svg-fill" d="M 12,26 18.5,22 18.5,14 12,10 z M 18.5,22 25,18 25,18 18.5,14 z" id="ytp-id-2"></path> | ||
27 | </svg> | ||
28 | </div> | ||
29 | </div> | ||
30 | </div> | ||
31 | ` | ||
32 | } | ||
33 | |||
34 | const Component = videojs.getComponent('Component') | ||
35 | class PauseBezel extends Component { | ||
36 | container: HTMLDivElement | ||
37 | |||
38 | constructor (player: videojs.Player, options?: videojs.ComponentOptions) { | ||
39 | super(player, options) | ||
40 | |||
41 | // Hide bezels on mobile since we already have our mobile overlay | ||
42 | if (isMobile()) return | ||
43 | |||
44 | player.on('pause', (_: any) => { | ||
45 | if (player.seeking() || player.ended()) return | ||
46 | this.container.innerHTML = getPauseBezel() | ||
47 | this.showBezel() | ||
48 | }) | ||
49 | |||
50 | player.on('play', (_: any) => { | ||
51 | if (player.seeking()) return | ||
52 | this.container.innerHTML = getPlayBezel() | ||
53 | this.showBezel() | ||
54 | }) | ||
55 | } | ||
56 | |||
57 | createEl () { | ||
58 | this.container = super.createEl('div', { | ||
59 | className: 'vjs-bezels-content' | ||
60 | }) as HTMLDivElement | ||
61 | |||
62 | this.container.style.display = 'none' | ||
63 | |||
64 | return this.container | ||
65 | } | ||
66 | |||
67 | showBezel () { | ||
68 | this.container.style.display = 'inherit' | ||
69 | |||
70 | setTimeout(() => { | ||
71 | this.container.style.display = 'none' | ||
72 | }, 500) // matching the animation duration | ||
73 | } | ||
74 | } | ||
75 | |||
76 | videojs.registerComponent('PauseBezel', PauseBezel) | ||