From 62ab565d1c772764c77dec0df75ce64b19c57119 Mon Sep 17 00:00:00 2001 From: Rigel Kent Date: Wed, 18 Dec 2019 20:20:04 +0100 Subject: Add play/pause bezels to the video player --- .../videos/+video-watch/video-watch.component.ts | 1 + client/src/assets/player/bezels/bezels-plugin.ts | 93 ++++++++++++++++++++++ .../src/assets/player/peertube-player-manager.ts | 1 + client/src/sass/player/bezels.scss | 42 ++++++++++ client/src/sass/player/index.scss | 3 +- client/src/sass/player/upnext.scss | 3 +- 6 files changed, 141 insertions(+), 2 deletions(-) create mode 100644 client/src/assets/player/bezels/bezels-plugin.ts create mode 100644 client/src/sass/player/bezels.scss diff --git a/client/src/app/videos/+video-watch/video-watch.component.ts b/client/src/app/videos/+video-watch/video-watch.component.ts index 835e9e34a..9eae45fed 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.ts +++ b/client/src/app/videos/+video-watch/video-watch.component.ts @@ -469,6 +469,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy { this.zone.runOutsideAngular(async () => { this.player = await PeertubePlayerManager.initialize(playerMode, playerOptions, player => this.player = player) this.player.focus() + this.player.bezels() this.player.on('customError', ({ err }: { err: any }) => this.handleError(err)) 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 @@ +// @ts-ignore +import * as videojs from 'video.js' +import { VideoJSComponentInterface } from '../peertube-videojs-typings' + +function getPauseBezel () { + return ` +
+
+
+ + + + +
+
+
+ ` +} + +function getPlayBezel () { + return ` +
+
+
+ + + + +
+
+
+ ` +} + +// @ts-ignore-start +const Component = videojs.getComponent('Component') +class PauseBezel extends Component { + options_: any + container: HTMLBodyElement + + constructor (player: videojs.Player, options: any) { + super(player, options) + this.options_ = options + + player.on('pause', (_: any) => { + if (player.seeking()) return + this.container.innerHTML = getPauseBezel() + this.showBezel() + }) + + player.on('play', (_: any) => { + if (player.seeking()) return + this.container.innerHTML = getPlayBezel() + this.showBezel() + }) + } + + createEl () { + const container = super.createEl('div', { + className: 'vjs-bezels-content' + }) + this.container = container + container.style.display = 'none' + + return container + } + + showBezel () { + this.container.style.display = 'inherit' + setTimeout(() => { + this.container.style.display = 'none' + }, 500) // matching the animation duration + } +} +// @ts-ignore-end + +videojs.registerComponent('PauseBezel', PauseBezel) + +const Plugin: VideoJSComponentInterface = videojs.getPlugin('plugin') +class BezelsPlugin extends Plugin { + constructor (player: videojs.Player, options: any = {}) { + super(player, options) + + this.player.ready(() => { + player.addClass('vjs-bezels') + }) + + player.addChild('PauseBezel', options) + } +} + +videojs.registerPlugin('bezels', BezelsPlugin) +export { BezelsPlugin } diff --git a/client/src/assets/player/peertube-player-manager.ts b/client/src/assets/player/peertube-player-manager.ts index b1551185a..ac3609c04 100644 --- a/client/src/assets/player/peertube-player-manager.ts +++ b/client/src/assets/player/peertube-player-manager.ts @@ -6,6 +6,7 @@ import 'videojs-dock' import 'videojs-contextmenu-ui' import 'videojs-contrib-quality-levels' import './upnext/upnext-plugin' +import './bezels/bezels-plugin' import './peertube-plugin' import './videojs-components/peertube-link-button' import './videojs-components/resolution-menu-button' diff --git a/client/src/sass/player/bezels.scss b/client/src/sass/player/bezels.scss new file mode 100644 index 000000000..f1b1dcb4a --- /dev/null +++ b/client/src/sass/player/bezels.scss @@ -0,0 +1,42 @@ +@keyframes bezels-fadeout { + from { + opacity: 1; + } + to { + opacity: 0; + transform: scale(2); + } +} + +.vjs-bezel { + position: absolute; + left: 50%; + top: 50%; + width: 52px; + height: 52px; + z-index: 19; + margin-left: -26px; + margin-top: -26px; + background: rgba(0,0,0,.5); + border-radius: 26px; + animation: bezels-fadeout .5s linear 1 normal forwards; + pointer-events: none; +} + +.vjs-bezel-icon { + width: 36px; + height: 36px; + margin: 8px; + + svg .vjs-svg-fill { + fill: #fff; + } +} + +.video-js { + + .vjs-bezel-content { + + } + +} \ No newline at end of file diff --git a/client/src/sass/player/index.scss b/client/src/sass/player/index.scss index 886a76536..58ce3ac96 100644 --- a/client/src/sass/player/index.scss +++ b/client/src/sass/player/index.scss @@ -3,4 +3,5 @@ @import './context-menu'; @import './settings-menu'; @import './spinner'; -@import './upnext'; \ No newline at end of file +@import './upnext'; +@import './bezels.scss'; \ No newline at end of file diff --git a/client/src/sass/player/upnext.scss b/client/src/sass/player/upnext.scss index ecce22aa8..f1f2e0fe2 100644 --- a/client/src/sass/player/upnext.scss +++ b/client/src/sass/player/upnext.scss @@ -95,8 +95,9 @@ $browser-context: 16; width: 98px; height: 98px; margin: -49px 0 0 -49px; - transition: stroke-dasharray 0.1s cubic-bezier(0.4,0,1,1); cursor: pointer; + + @include transition(stroke-dasharray 0.1s cubic-bezier(0.4,0,1,1)); } } -- cgit v1.2.3