aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2018-03-01 19:02:51 +0100
committerChocobozzz <me@florianbigard.com>2018-03-01 19:02:51 +0100
commit3ec8dc096276ac3c7e5d8dca5f100017516f62ec (patch)
treeefeab8056224d54f44dc498a110fba54d831d4f0
parentc7bfd4532ea5783be525525c8260159497cb0f64 (diff)
downloadPeerTube-3ec8dc096276ac3c7e5d8dca5f100017516f62ec.tar.gz
PeerTube-3ec8dc096276ac3c7e5d8dca5f100017516f62ec.tar.zst
PeerTube-3ec8dc096276ac3c7e5d8dca5f100017516f62ec.zip
Cleaner videojs control bar implementation
-rw-r--r--client/src/app/videos/+video-watch/video-watch.component.ts24
-rw-r--r--client/src/assets/player/peertube-videojs-plugin.ts19
-rw-r--r--client/src/sass/include/_mixins.scss9
-rw-r--r--client/src/sass/video-js-custom.scss39
-rw-r--r--client/src/standalone/videos/embed.scss11
-rw-r--r--client/src/standalone/videos/embed.ts23
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 {
346 peertube: { 346 peertube: {
347 videoFiles: this.video.files, 347 videoFiles: this.video.files,
348 playerElement: this.playerElement, 348 playerElement: this.playerElement,
349 peerTubeLink: false,
350 videoViewUrl: this.videoService.getVideoViewUrl(this.video.uuid), 349 videoViewUrl: this.videoService.getVideoViewUrl(this.video.uuid),
351 videoDuration: this.video.duration 350 videoDuration: this.video.duration
352 }, 351 },
353 hotkeys: { 352 hotkeys: {
354 enableVolumeScroll: false 353 enableVolumeScroll: false
355 } 354 }
355 },
356 controlBar: {
357 children: [
358 'playToggle',
359 'currentTimeDisplay',
360 'timeDivider',
361 'durationDisplay',
362 'liveDisplay',
363
364 'flexibleWidthSpacer',
365 'progressControl',
366
367 'webTorrentButton',
368
369 'playbackRateMenuButton',
370
371 'muteToggle',
372 'volumeControl',
373
374 'resolutionMenuButton',
375
376 'fullscreenToggle'
377 ]
356 } 378 }
357 } 379 }
358 380
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 {
22type PeertubePluginOptions = { 22type PeertubePluginOptions = {
23 videoFiles: VideoFile[] 23 videoFiles: VideoFile[]
24 playerElement: HTMLVideoElement 24 playerElement: HTMLVideoElement
25 peerTubeLink: boolean
26 videoViewUrl: string 25 videoViewUrl: string
27 videoDuration: number 26 videoDuration: number
28} 27}
@@ -120,7 +119,7 @@ class ResolutionMenuButton extends MenuButton {
120MenuButton.registerComponent('ResolutionMenuButton', ResolutionMenuButton) 119MenuButton.registerComponent('ResolutionMenuButton', ResolutionMenuButton)
121 120
122const Button: VideoJSComponentInterface = videojsUntyped.getComponent('Button') 121const Button: VideoJSComponentInterface = videojsUntyped.getComponent('Button')
123class PeertubeLinkButton extends Button { 122class PeerTubeLinkButton extends Button {
124 123
125 createEl () { 124 createEl () {
126 const link = document.createElement('a') 125 const link = document.createElement('a')
@@ -141,7 +140,7 @@ class PeertubeLinkButton extends Button {
141 this.parentNode.removeChild(this) 140 this.parentNode.removeChild(this)
142 } 141 }
143} 142}
144Button.registerComponent('PeerTubeLinkButton', PeertubeLinkButton) 143Button.registerComponent('PeerTubeLinkButton', PeerTubeLinkButton)
145 144
146class WebTorrentButton extends Button { 145class WebTorrentButton extends Button {
147 createEl () { 146 createEl () {
@@ -392,20 +391,6 @@ class PeerTubePlugin extends Plugin {
392 } 391 }
393 392
394 private initializePlayer (options: PeertubePluginOptions) { 393 private initializePlayer (options: PeertubePluginOptions) {
395 const controlBar = this.player.controlBar
396
397 const menuButton = new ResolutionMenuButton(this.player, options)
398 const fullscreenElement = controlBar.fullscreenToggle.el()
399 controlBar.resolutionSwitcher = controlBar.el().insertBefore(menuButton.el(), fullscreenElement)
400
401 if (options.peerTubeLink === true) {
402 const peerTubeLinkButton = new PeertubeLinkButton(this.player)
403 controlBar.peerTubeLink = controlBar.el().insertBefore(peerTubeLinkButton.el(), fullscreenElement)
404 }
405
406 const webTorrentButton = new WebTorrentButton(this.player)
407 controlBar.webTorrent = controlBar.el().insertBefore(webTorrentButton.el(), controlBar.progressControl.el())
408
409 if (this.autoplay === true) { 394 if (this.autoplay === true) {
410 this.updateVideoFile(undefined, () => this.player.play()) 395 this.updateVideoFile(undefined, () => this.player.play())
411 } else { 396 } 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 @@
7 } 7 }
8} 8}
9 9
10@mixin disable-outline {
11 outline: none;
12
13 &::-moz-focus-inner {
14 border: 0;
15 padding: 0
16 }
17}
18
10@mixin peertube-input-text($width) { 19@mixin peertube-input-text($width) {
11 display: inline-block; 20 display: inline-block;
12 height: $button-height; 21 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 @@
1@charset "utf-8";// Thanks: https://github.com/zanechua/videojs-sublime-inspired-skin 1@import '_variables';
2@import '_mixins';
3
2$primary-foreground-color: #fff; 4$primary-foreground-color: #fff;
3$primary-background-color: #000; 5$primary-background-color: #000;
4$font-size: 13px; 6$font-size: 13px;
@@ -139,7 +141,8 @@ $control-bar-height: 34px;
139 } 141 }
140 142
141 .vjs-play-control { 143 .vjs-play-control {
142 outline: 0; 144 @include disable-outline;
145
143 font-size: $font-size; 146 font-size: $font-size;
144 padding: 0 17px; 147 padding: 0 17px;
145 margin-right: 5px; 148 margin-right: 5px;
@@ -220,16 +223,24 @@ $control-bar-height: 34px;
220 223
221 .vjs-playback-rate { 224 .vjs-playback-rate {
222 font-size: 10px; 225 font-size: 10px;
223 margin-right: 50px; 226 width: 37px !important;
224 227
225 .vjs-playback-rate-value { 228 .vjs-playback-rate-value {
226 font-size: 13px; 229 font-size: 13px;
227 line-height: $control-bar-height; 230 line-height: $control-bar-height;
228 } 231 }
232
233 .vjs-menu .vjs-menu-content {
234 width: 37px !important;
235 }
229 } 236 }
230 237
231 .vjs-mute-control { 238 .vjs-mute-control {
232 outline: 0; 239 @include disable-outline;
240
241 line-height: $control-bar-height;
242 padding: 0;
243 width: 30px;
233 244
234 .vjs-icon-placeholder { 245 .vjs-icon-placeholder {
235 display: inline-block; 246 display: inline-block;
@@ -250,12 +261,9 @@ $control-bar-height: 34px;
250 } 261 }
251 } 262 }
252 263
253 .vjs-volume-menu-button, 264 .vjs-volume-control {
254 .vjs-volume-panel { 265 width: 30px;
255 width: 6em; 266 margin: 0;
256 position: absolute;
257 right: 0;
258 margin-right: 65px;
259 } 267 }
260 268
261 .vjs-volume-bar { 269 .vjs-volume-bar {
@@ -313,8 +321,9 @@ $control-bar-height: 34px;
313 } 321 }
314 322
315 .vjs-fullscreen-control { 323 .vjs-fullscreen-control {
324 @include disable-outline;
325
316 width: 37px; 326 width: 37px;
317 outline: 0;
318 327
319 .vjs-icon-placeholder { 328 .vjs-icon-placeholder {
320 display: inline-block; 329 display: inline-block;
@@ -339,7 +348,7 @@ $control-bar-height: 34px;
339 line-height: $control-bar-height; 348 line-height: $control-bar-height;
340 position: absolute; 349 position: absolute;
341 top: 0; 350 top: 0;
342 left: 4px; 351 left: 0;
343 width: 100%; 352 width: 100%;
344 height: 100%; 353 height: 100%;
345 text-align: center; 354 text-align: center;
@@ -348,16 +357,16 @@ $control-bar-height: 34px;
348 } 357 }
349 358
350 .vjs-resolution-button { 359 .vjs-resolution-button {
351 outline: 0 !important; 360 @include disable-outline;
352 } 361 }
353 362
354 .vjs-menu { 363 .vjs-menu {
355 top: 20px; 364 top: 20px;
365 left: 0;
356 366
357 .vjs-menu-content { 367 .vjs-menu-content {
358 width: 50px; 368 width: 50px;
359 left: 50%; /* Center the menu, in it's parent */ 369 bottom: 20px;
360 margin-left: -21px;
361 } 370 }
362 371
363 li { 372 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 {
26 } 26 }
27 27
28 .vjs-peertube-link { 28 .vjs-peertube-link {
29 @include disable-outline;
30
29 color: #fff; 31 color: #fff;
30 text-decoration: none; 32 text-decoration: none;
31 font-size: $font-size; 33 font-size: $font-size;
32 line-height: $control-bar-height; 34 line-height: $control-bar-height;
33 transition: all .4s; 35 transition: all .4s;
34 font-weight: $font-semibold; 36 font-weight: $font-semibold;
35 margin-right: 3px; 37 padding-right: 5px;
36 padding: 0 5px;
37 } 38 }
38 39
39 .vjs-peertube-link:hover { 40 .vjs-peertube-link:hover {
40 text-shadow: 0 0 1em #fff; 41 text-shadow: 0 0 1em #fff;
41 } 42 }
42 43
43 // Fix volume panel because we added a new component (PeerTube link)
44 .vjs-volume-panel {
45 margin-right: 137px !important;
46 }
47
48 @media screen and (max-width: 350px) { 44 @media screen and (max-width: 350px) {
49 .vjs-play-control { 45 .vjs-play-control {
50 padding: 0 5px !important; 46 padding: 0 5px !important;
@@ -57,7 +53,6 @@ html, body {
57 53
58 .vjs-volume-panel { 54 .vjs-volume-panel {
59 width: 26px !important; 55 width: 26px !important;
60 margin-right: 140px !important;
61 } 56 }
62 57
63 .vjs-peertube-link { 58 .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)
31 peertube: { 31 peertube: {
32 videoFiles: videoInfo.files, 32 videoFiles: videoInfo.files,
33 playerElement: videoElement, 33 playerElement: videoElement,
34 peerTubeLink: true,
35 videoViewUrl: getVideoUrl(videoId) + '/views', 34 videoViewUrl: getVideoUrl(videoId) + '/views',
36 videoDuration: videoInfo.duration 35 videoDuration: videoInfo.duration
37 }, 36 },
38 hotkeys: { 37 hotkeys: {
39 enableVolumeScroll: false 38 enableVolumeScroll: false
40 } 39 }
40 },
41 controlBar: {
42 children: [
43 'playToggle',
44 'currentTimeDisplay',
45 'timeDivider',
46 'durationDisplay',
47 'liveDisplay',
48
49 'flexibleWidthSpacer',
50 'progressControl',
51
52 'webTorrentButton',
53
54 'muteToggle',
55 'volumeControl',
56
57 'resolutionMenuButton',
58 'peerTubeLinkButton',
59
60 'fullscreenToggle'
61 ]
41 } 62 }
42 } 63 }
43 videojs('video-container', videojsOptions, function () { 64 videojs('video-container', videojsOptions, function () {