aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/assets/player/bezels
diff options
context:
space:
mode:
authorRigel Kent <sendmemail@rigelk.eu>2019-12-18 20:20:04 +0100
committerRigel Kent <sendmemail@rigelk.eu>2019-12-18 20:20:11 +0100
commit62ab565d1c772764c77dec0df75ce64b19c57119 (patch)
tree0b30fd73f78ad38ed54736212f9cc5e16bb074fb /client/src/assets/player/bezels
parent2a5518a667ef219e560214cdecd03a45d96aa6b1 (diff)
downloadPeerTube-62ab565d1c772764c77dec0df75ce64b19c57119.tar.gz
PeerTube-62ab565d1c772764c77dec0df75ce64b19c57119.tar.zst
PeerTube-62ab565d1c772764c77dec0df75ce64b19c57119.zip
Add play/pause bezels to the video player
Diffstat (limited to 'client/src/assets/player/bezels')
-rw-r--r--client/src/assets/player/bezels/bezels-plugin.ts93
1 files changed, 93 insertions, 0 deletions
diff --git a/client/src/assets/player/bezels/bezels-plugin.ts b/client/src/assets/player/bezels/bezels-plugin.ts
new file mode 100644
index 000000000..4317d60f9
--- /dev/null
+++ b/client/src/assets/player/bezels/bezels-plugin.ts
@@ -0,0 +1,93 @@
1// @ts-ignore
2import * as videojs from 'video.js'
3import { VideoJSComponentInterface } from '../peertube-videojs-typings'
4
5function getPauseBezel () {
6 return `
7 <div class="vjs-bezels-pause">
8 <div class="vjs-bezel" role="status" aria-label="Pause">
9 <div class="vjs-bezel-icon">
10 <svg height="100%" version="1.1" viewBox="0 0 36 36" width="100%">
11 <use class="vjs-svg-shadow" xlink:href="#vjs-id-1"></use>
12 <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>
13 </svg>
14 </div>
15 </div>
16 </div>
17 `
18}
19
20function getPlayBezel () {
21 return `
22 <div class="vjs-bezels-play">
23 <div class="vjs-bezel" role="status" aria-label="Play">
24 <div class="vjs-bezel-icon">
25 <svg height="100%" version="1.1" viewBox="0 0 36 36" width="100%">
26 <use class="vjs-svg-shadow" xlink:href="#vjs-id-2"></use>
27 <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>
28 </svg>
29 </div>
30 </div>
31 </div>
32 `
33}
34
35// @ts-ignore-start
36const Component = videojs.getComponent('Component')
37class PauseBezel extends Component {
38 options_: any
39 container: HTMLBodyElement
40
41 constructor (player: videojs.Player, options: any) {
42 super(player, options)
43 this.options_ = options
44
45 player.on('pause', (_: any) => {
46 if (player.seeking()) return
47 this.container.innerHTML = getPauseBezel()
48 this.showBezel()
49 })
50
51 player.on('play', (_: any) => {
52 if (player.seeking()) return
53 this.container.innerHTML = getPlayBezel()
54 this.showBezel()
55 })
56 }
57
58 createEl () {
59 const container = super.createEl('div', {
60 className: 'vjs-bezels-content'
61 })
62 this.container = container
63 container.style.display = 'none'
64
65 return container
66 }
67
68 showBezel () {
69 this.container.style.display = 'inherit'
70 setTimeout(() => {
71 this.container.style.display = 'none'
72 }, 500) // matching the animation duration
73 }
74}
75// @ts-ignore-end
76
77videojs.registerComponent('PauseBezel', PauseBezel)
78
79const Plugin: VideoJSComponentInterface = videojs.getPlugin('plugin')
80class BezelsPlugin extends Plugin {
81 constructor (player: videojs.Player, options: any = {}) {
82 super(player, options)
83
84 this.player.ready(() => {
85 player.addClass('vjs-bezels')
86 })
87
88 player.addChild('PauseBezel', options)
89 }
90}
91
92videojs.registerPlugin('bezels', BezelsPlugin)
93export { BezelsPlugin }