aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2018-06-08 10:37:13 +0200
committerChocobozzz <me@florianbigard.com>2018-06-08 10:37:13 +0200
commit2ce2fd7f450ec7e5c00af7ee445226df7d19a880 (patch)
tree0302fbce2a891acb6396ecc99cf043aa21cbf60b /client/src
parentff193d5e3fbe648f689be2e235dcf88daa1bba48 (diff)
downloadPeerTube-2ce2fd7f450ec7e5c00af7ee445226df7d19a880.tar.gz
PeerTube-2ce2fd7f450ec7e5c00af7ee445226df7d19a880.tar.zst
PeerTube-2ce2fd7f450ec7e5c00af7ee445226df7d19a880.zip
Improve player progress bar
Diffstat (limited to 'client/src')
-rw-r--r--client/src/assets/player/peertube-videojs-plugin.ts4
-rw-r--r--client/src/sass/video-js-custom.scss84
2 files changed, 56 insertions, 32 deletions
diff --git a/client/src/assets/player/peertube-videojs-plugin.ts b/client/src/assets/player/peertube-videojs-plugin.ts
index e68d79e40..f303301d5 100644
--- a/client/src/assets/player/peertube-videojs-plugin.ts
+++ b/client/src/assets/player/peertube-videojs-plugin.ts
@@ -7,7 +7,7 @@ import { PeertubePluginOptions, VideoJSComponentInterface, videojsUntyped } from
7import { 7import {
8 getAverageBandwidth, 8 getAverageBandwidth,
9 getStoredMute, 9 getStoredMute,
10 getStoredVolume, 10 getStoredVolume, isMobile,
11 saveAverageBandwidth, 11 saveAverageBandwidth,
12 saveMuteInStore, 12 saveMuteInStore,
13 saveVolumeInStore, 13 saveVolumeInStore,
@@ -366,6 +366,8 @@ class PeerTubePlugin extends Plugin {
366 } 366 }
367 367
368 private initializePlayer () { 368 private initializePlayer () {
369 if (isMobile()) this.player.addClass('vjs-is-mobile')
370
369 this.initSmoothProgressBar() 371 this.initSmoothProgressBar()
370 372
371 this.alterInactivity() 373 this.alterInactivity()
diff --git a/client/src/sass/video-js-custom.scss b/client/src/sass/video-js-custom.scss
index 8de0784f9..aeff282eb 100644
--- a/client/src/sass/video-js-custom.scss
+++ b/client/src/sass/video-js-custom.scss
@@ -23,6 +23,8 @@ $setting-transition-easing: ease-out;
23 23
24$context-menu-width: 350px; 24$context-menu-width: 350px;
25 25
26$progress-margin: 10px;
27
26.video-js.vjs-peertube-skin { 28.video-js.vjs-peertube-skin {
27 font-size: $font-size; 29 font-size: $font-size;
28 color: $primary-foreground-color; 30 color: $primary-foreground-color;
@@ -164,56 +166,61 @@ $context-menu-width: 350px;
164 opacity: $primary-foreground-opacity; 166 opacity: $primary-foreground-opacity;
165 } 167 }
166 168
167 .vjs-slider { 169 .vjs-progress-control {
168 background-color: rgba(255, 255, 255, .2); 170 position: absolute;
169 border-radius: 2px; 171 z-index: 100; // On top of the progress bar
170 height: 5px; 172 bottom: 29px;
173 width: calc(100% - (2 * #{$progress-margin}));
174 margin-left: $progress-margin;
175 height: 14px;
171 176
172 .vjs-slider-bar { 177 .vjs-slider {
173 background: $primary-foreground-color; 178 margin: 0;
174 } 179 border-radius: 0;
175 } 180 background-color: rgba(255, 255, 255, .2);
181 height: 3px;
182 transition: none;
176 183
177 .vjs-play-progress { 184 .vjs-play-progress {
178 padding-right: 4px; 185 background: $primary-foreground-color;
179 186
180 &::before { 187 // Not display the circle if the progress is not hovered
181 top: -0.3em; 188 &::before {
189 opacity: 0;
190 transition: opacity 0.1s ease;
191 font-size: 14px;
182 192
183 &:hover { 193 top: -0.3em;
184 top: -0.372em; 194 }
185 }
186 }
187 195
188 .vjs-time-tooltip { 196 .vjs-time-tooltip {
189 display: none; 197 display: none;
190 } 198 }
191 } 199 }
192 200
193 .vjs-load-progress { 201 .vjs-load-progress {
194 &, & div { 202 &, & div {
195 background: rgba(255, 255, 255, .2); 203 background: rgba(255, 255, 255, .2);
204 }
205 }
196 } 206 }
197 } 207 }
198 208
199 .vjs-progress-control { 209 .vjs-progress-control:hover .vjs-slider,
200 bottom: 34px; 210 .vjs-slider.vjs-sliding {
201 width: 100%;
202 position: absolute;
203 height: 5px; 211 height: 5px;
204 212
205 .vjs-progress-holder { 213 .vjs-play-progress::before {
206 margin: 0; 214 opacity: 1;
207 border-radius: 0;
208 } 215 }
209 } 216 }
210 217
218
211 .vjs-play-control { 219 .vjs-play-control {
212 @include disable-outline; 220 @include disable-outline;
213 221
214 cursor: pointer; 222 cursor: pointer;
215 font-size: $font-size; 223 font-size: $font-size;
216 padding: 0 17px;
217 margin-right: 5px; 224 margin-right: 5px;
218 } 225 }
219 226
@@ -404,6 +411,7 @@ $context-menu-width: 350px;
404 @include disable-outline; 411 @include disable-outline;
405 412
406 width: 37px; 413 width: 37px;
414 margin-right: 11px;
407 415
408 .vjs-icon-placeholder { 416 .vjs-icon-placeholder {
409 display: inline-block; 417 display: inline-block;
@@ -818,4 +826,18 @@ $context-menu-width: 350px;
818 background-color: rgba(255, 255, 255, 0.2); 826 background-color: rgba(255, 255, 255, 0.2);
819 } 827 }
820 } 828 }
829}
830
831/* Special mobile style */
832
833.video-js.vjs-peertube-skin.vjs-is-mobile {
834 .vjs-control-bar {
835 .vjs-progress-control .vjs-slider .vjs-play-progress {
836 // Always display the circle on mobile
837 &::before {
838 margin-top: -1px;
839 opacity: 1;
840 }
841 }
842 }
821} \ No newline at end of file 843} \ No newline at end of file