aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2018-03-29 16:01:50 +0200
committerChocobozzz <me@florianbigard.com>2018-04-03 12:06:28 +0200
commite993ecb3b761bba8fba2b8329270ae904bd3a0d7 (patch)
tree6950ae0d3facef3f552ef49361fbc05a9590fe0e
parent779f000083145d8f1cc9b28205db53a5ead4bea5 (diff)
downloadPeerTube-e993ecb3b761bba8fba2b8329270ae904bd3a0d7.tar.gz
PeerTube-e993ecb3b761bba8fba2b8329270ae904bd3a0d7.tar.zst
PeerTube-e993ecb3b761bba8fba2b8329270ae904bd3a0d7.zip
Improve player progress bar
-rw-r--r--client/src/assets/player/peertube-videojs-plugin.ts24
-rw-r--r--client/src/sass/video-js-custom.scss27
2 files changed, 38 insertions, 13 deletions
diff --git a/client/src/assets/player/peertube-videojs-plugin.ts b/client/src/assets/player/peertube-videojs-plugin.ts
index 52846503d..4843e3d8a 100644
--- a/client/src/assets/player/peertube-videojs-plugin.ts
+++ b/client/src/assets/player/peertube-videojs-plugin.ts
@@ -408,6 +408,8 @@ class PeerTubePlugin extends Plugin {
408 } 408 }
409 409
410 private initializePlayer () { 410 private initializePlayer () {
411 this.initSmoothProgressBar()
412
411 if (this.autoplay === true) { 413 if (this.autoplay === true) {
412 this.updateVideoFile(undefined, () => this.player.play()) 414 this.updateVideoFile(undefined, () => this.player.play())
413 } else { 415 } else {
@@ -491,5 +493,27 @@ class PeerTubePlugin extends Plugin {
491 private disableErrorDisplay () { 493 private disableErrorDisplay () {
492 this.player.removeClass('vjs-error-display-enabled') 494 this.player.removeClass('vjs-error-display-enabled')
493 } 495 }
496
497 // Thanks: https://github.com/videojs/video.js/issues/4460#issuecomment-312861657
498 private initSmoothProgressBar () {
499 const SeekBar = videojsUntyped.getComponent('SeekBar')
500 SeekBar.prototype.getPercent = function getPercent () {
501 // Allows for smooth scrubbing, when player can't keep up.
502 // const time = (this.player_.scrubbing()) ?
503 // this.player_.getCache().currentTime :
504 // this.player_.currentTime()
505 const time = this.player_.currentTime()
506 const percent = time / this.player_.duration()
507 return percent >= 1 ? 1 : percent
508 }
509 SeekBar.prototype.handleMouseMove = function handleMouseMove (event) {
510 let newTime = this.calculateDistance(event) * this.player_.duration()
511 if (newTime === this.player_.duration()) {
512 newTime = newTime - 0.1
513 }
514 this.player_.currentTime(newTime)
515 this.update()
516 }
517 }
494} 518}
495videojsUntyped.registerPlugin('peertube', PeerTubePlugin) 519videojsUntyped.registerPlugin('peertube', PeerTubePlugin)
diff --git a/client/src/sass/video-js-custom.scss b/client/src/sass/video-js-custom.scss
index 44478226b..4ef1693b5 100644
--- a/client/src/sass/video-js-custom.scss
+++ b/client/src/sass/video-js-custom.scss
@@ -2,10 +2,15 @@
2@import '_mixins'; 2@import '_mixins';
3 3
4$primary-foreground-color: #fff; 4$primary-foreground-color: #fff;
5$primary-foreground-opacity: 0.9;
6$primary-foreground-opacity-hover: 1;
5$primary-background-color: #000; 7$primary-background-color: #000;
8
6$font-size: 13px; 9$font-size: 13px;
7$control-bar-height: 34px; 10$control-bar-height: 34px;
8 11
12$slider-bg-color: lighten($primary-background-color, 33%);
13
9.video-js.vjs-peertube-skin { 14.video-js.vjs-peertube-skin {
10 font-size: $font-size; 15 font-size: $font-size;
11 color: $primary-foreground-color; 16 color: $primary-foreground-color;
@@ -36,8 +41,6 @@ $control-bar-height: 34px;
36 line-height: $control-bar-height; 41 line-height: $control-bar-height;
37 } 42 }
38 43
39 .vjs-mouse-display:before,
40 .vjs-play-progress:before,
41 .vjs-volume-level:before { 44 .vjs-volume-level:before {
42 content: ''; /* Remove Circle From Progress Bar */ 45 content: ''; /* Remove Circle From Progress Bar */
43 } 46 }
@@ -96,28 +99,26 @@ $control-bar-height: 34px;
96 background-color: rgba($primary-background-color, 0.5); 99 background-color: rgba($primary-background-color, 0.5);
97 } 100 }
98 101
99 $slider-bg-color: lighten($primary-background-color, 33%);
100
101 .vjs-slider { 102 .vjs-slider {
102 background-color: rgba(255, 255, 255, .3); 103 background-color: rgba(255, 255, 255, .3);
103 border-radius: 2px; 104 border-radius: 2px;
104 height: 5px; 105 height: 5px;
106
107 .vjs-slider-bar {
108 background: $primary-foreground-color;
109 }
105 } 110 }
106 111
107 /* The slider bar color is used for the progress bar and the volume bar 112 .vjs-play-progress .vjs-time-tooltip {
108 (the first two can be removed after a fix that's coming) */ 113 display: none;
109 .vjs-volume-level,
110 .vjs-play-progress,
111 .vjs-slider-bar {
112 background: $primary-foreground-color;
113 } 114 }
114 115
115 .vjs-load-progress { 116 .vjs-load-progress {
116 background: rgba($slider-bg-color, 0.5); 117 background: rgba($slider-bg-color, 0.5);
117 }
118 118
119 .vjs-load-progress div { 119 div {
120 background: rgba($slider-bg-color, 0.75); 120 background: rgba($slider-bg-color, 0.75);
121 }
121 } 122 }
122 123
123 .vjs-poster { 124 .vjs-poster {