From 3ec8dc096276ac3c7e5d8dca5f100017516f62ec Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Thu, 1 Mar 2018 19:02:51 +0100 Subject: [PATCH] Cleaner videojs control bar implementation --- .../+video-watch/video-watch.component.ts | 24 +++++++++++- .../assets/player/peertube-videojs-plugin.ts | 19 +-------- client/src/sass/include/_mixins.scss | 9 +++++ client/src/sass/video-js-custom.scss | 39 ++++++++++++------- client/src/standalone/videos/embed.scss | 11 ++---- client/src/standalone/videos/embed.ts | 23 ++++++++++- 6 files changed, 83 insertions(+), 42 deletions(-) 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 b1dd3d10b..2924f1622 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.ts +++ b/client/src/app/videos/+video-watch/video-watch.component.ts @@ -346,13 +346,35 @@ export class VideoWatchComponent implements OnInit, OnDestroy { peertube: { videoFiles: this.video.files, playerElement: this.playerElement, - peerTubeLink: false, videoViewUrl: this.videoService.getVideoViewUrl(this.video.uuid), videoDuration: this.video.duration }, hotkeys: { enableVolumeScroll: false } + }, + controlBar: { + children: [ + 'playToggle', + 'currentTimeDisplay', + 'timeDivider', + 'durationDisplay', + 'liveDisplay', + + 'flexibleWidthSpacer', + 'progressControl', + + 'webTorrentButton', + + 'playbackRateMenuButton', + + 'muteToggle', + 'volumeControl', + + 'resolutionMenuButton', + + 'fullscreenToggle' + ] } } diff --git a/client/src/assets/player/peertube-videojs-plugin.ts b/client/src/assets/player/peertube-videojs-plugin.ts index 3b366ec9b..86cb858e2 100644 --- a/client/src/assets/player/peertube-videojs-plugin.ts +++ b/client/src/assets/player/peertube-videojs-plugin.ts @@ -22,7 +22,6 @@ interface VideoJSComponentInterface { type PeertubePluginOptions = { videoFiles: VideoFile[] playerElement: HTMLVideoElement - peerTubeLink: boolean videoViewUrl: string videoDuration: number } @@ -120,7 +119,7 @@ class ResolutionMenuButton extends MenuButton { MenuButton.registerComponent('ResolutionMenuButton', ResolutionMenuButton) const Button: VideoJSComponentInterface = videojsUntyped.getComponent('Button') -class PeertubeLinkButton extends Button { +class PeerTubeLinkButton extends Button { createEl () { const link = document.createElement('a') @@ -141,7 +140,7 @@ class PeertubeLinkButton extends Button { this.parentNode.removeChild(this) } } -Button.registerComponent('PeerTubeLinkButton', PeertubeLinkButton) +Button.registerComponent('PeerTubeLinkButton', PeerTubeLinkButton) class WebTorrentButton extends Button { createEl () { @@ -392,20 +391,6 @@ class PeerTubePlugin extends Plugin { } private initializePlayer (options: PeertubePluginOptions) { - const controlBar = this.player.controlBar - - const menuButton = new ResolutionMenuButton(this.player, options) - const fullscreenElement = controlBar.fullscreenToggle.el() - controlBar.resolutionSwitcher = controlBar.el().insertBefore(menuButton.el(), fullscreenElement) - - if (options.peerTubeLink === true) { - const peerTubeLinkButton = new PeertubeLinkButton(this.player) - controlBar.peerTubeLink = controlBar.el().insertBefore(peerTubeLinkButton.el(), fullscreenElement) - } - - const webTorrentButton = new WebTorrentButton(this.player) - controlBar.webTorrent = controlBar.el().insertBefore(webTorrentButton.el(), controlBar.progressControl.el()) - if (this.autoplay === true) { this.updateVideoFile(undefined, () => this.player.play()) } else { diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss index eb3b1d283..e1b1bb32c 100644 --- a/client/src/sass/include/_mixins.scss +++ b/client/src/sass/include/_mixins.scss @@ -7,6 +7,15 @@ } } +@mixin disable-outline { + outline: none; + + &::-moz-focus-inner { + border: 0; + padding: 0 + } +} + @mixin peertube-input-text($width) { display: inline-block; height: $button-height; diff --git a/client/src/sass/video-js-custom.scss b/client/src/sass/video-js-custom.scss index 3dfad5ff6..88af9cbc5 100644 --- a/client/src/sass/video-js-custom.scss +++ b/client/src/sass/video-js-custom.scss @@ -1,4 +1,6 @@ -@charset "utf-8";// Thanks: https://github.com/zanechua/videojs-sublime-inspired-skin +@import '_variables'; +@import '_mixins'; + $primary-foreground-color: #fff; $primary-background-color: #000; $font-size: 13px; @@ -139,7 +141,8 @@ $control-bar-height: 34px; } .vjs-play-control { - outline: 0; + @include disable-outline; + font-size: $font-size; padding: 0 17px; margin-right: 5px; @@ -220,16 +223,24 @@ $control-bar-height: 34px; .vjs-playback-rate { font-size: 10px; - margin-right: 50px; + width: 37px !important; .vjs-playback-rate-value { font-size: 13px; line-height: $control-bar-height; } + + .vjs-menu .vjs-menu-content { + width: 37px !important; + } } .vjs-mute-control { - outline: 0; + @include disable-outline; + + line-height: $control-bar-height; + padding: 0; + width: 30px; .vjs-icon-placeholder { display: inline-block; @@ -250,12 +261,9 @@ $control-bar-height: 34px; } } - .vjs-volume-menu-button, - .vjs-volume-panel { - width: 6em; - position: absolute; - right: 0; - margin-right: 65px; + .vjs-volume-control { + width: 30px; + margin: 0; } .vjs-volume-bar { @@ -313,8 +321,9 @@ $control-bar-height: 34px; } .vjs-fullscreen-control { + @include disable-outline; + width: 37px; - outline: 0; .vjs-icon-placeholder { display: inline-block; @@ -339,7 +348,7 @@ $control-bar-height: 34px; line-height: $control-bar-height; position: absolute; top: 0; - left: 4px; + left: 0; width: 100%; height: 100%; text-align: center; @@ -348,16 +357,16 @@ $control-bar-height: 34px; } .vjs-resolution-button { - outline: 0 !important; + @include disable-outline; } .vjs-menu { top: 20px; + left: 0; .vjs-menu-content { width: 50px; - left: 50%; /* Center the menu, in it's parent */ - margin-left: -21px; + bottom: 20px; } li { diff --git a/client/src/standalone/videos/embed.scss b/client/src/standalone/videos/embed.scss index fbc0e33a0..9fa868c9b 100644 --- a/client/src/standalone/videos/embed.scss +++ b/client/src/standalone/videos/embed.scss @@ -26,25 +26,21 @@ html, body { } .vjs-peertube-link { + @include disable-outline; + color: #fff; text-decoration: none; font-size: $font-size; line-height: $control-bar-height; transition: all .4s; font-weight: $font-semibold; - margin-right: 3px; - padding: 0 5px; + padding-right: 5px; } .vjs-peertube-link:hover { text-shadow: 0 0 1em #fff; } - // Fix volume panel because we added a new component (PeerTube link) - .vjs-volume-panel { - margin-right: 137px !important; - } - @media screen and (max-width: 350px) { .vjs-play-control { padding: 0 5px !important; @@ -57,7 +53,6 @@ html, body { .vjs-volume-panel { width: 26px !important; - margin-right: 140px !important; } .vjs-peertube-link { diff --git a/client/src/standalone/videos/embed.ts b/client/src/standalone/videos/embed.ts index bb6baf7f0..739ed5f45 100644 --- a/client/src/standalone/videos/embed.ts +++ b/client/src/standalone/videos/embed.ts @@ -31,13 +31,34 @@ loadVideoInfo(videoId) peertube: { videoFiles: videoInfo.files, playerElement: videoElement, - peerTubeLink: true, videoViewUrl: getVideoUrl(videoId) + '/views', videoDuration: videoInfo.duration }, hotkeys: { enableVolumeScroll: false } + }, + controlBar: { + children: [ + 'playToggle', + 'currentTimeDisplay', + 'timeDivider', + 'durationDisplay', + 'liveDisplay', + + 'flexibleWidthSpacer', + 'progressControl', + + 'webTorrentButton', + + 'muteToggle', + 'volumeControl', + + 'resolutionMenuButton', + 'peerTubeLinkButton', + + 'fullscreenToggle' + ] } } videojs('video-container', videojsOptions, function () {