aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/sass
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2022-01-11 11:26:35 +0100
committerChocobozzz <me@florianbigard.com>2022-01-11 11:26:35 +0100
commitf1a0555a88db9ade2b073a2e4dc73c4a6176c8a0 (patch)
treee1f73376527152fb9ac92447a826bccc9e8f0dd5 /client/src/sass
parentba9eef5f628764aed6183135e669b17741d24d7a (diff)
downloadPeerTube-f1a0555a88db9ade2b073a2e4dc73c4a6176c8a0.tar.gz
PeerTube-f1a0555a88db9ade2b073a2e4dc73c4a6176c8a0.tar.zst
PeerTube-f1a0555a88db9ade2b073a2e4dc73c4a6176c8a0.zip
Add player controls on mobile
Diffstat (limited to 'client/src/sass')
-rw-r--r--client/src/sass/player/_player-variables.scss3
-rw-r--r--client/src/sass/player/control-bar.scss4
-rw-r--r--client/src/sass/player/mobile.scss71
-rw-r--r--client/src/sass/player/settings-menu.scss1
4 files changed, 78 insertions, 1 deletions
diff --git a/client/src/sass/player/_player-variables.scss b/client/src/sass/player/_player-variables.scss
index 2625576d4..dec3fe911 100644
--- a/client/src/sass/player/_player-variables.scss
+++ b/client/src/sass/player/_player-variables.scss
@@ -8,11 +8,14 @@ $font-size: 13px;
8$control-bar-height: 38px; 8$control-bar-height: 38px;
9$control-bar-icon-size: 26px; 9$control-bar-icon-size: 26px;
10$control-bar-volume-slider-height: 14px; 10$control-bar-volume-slider-height: 14px;
11$control-bar-slider-top: -10px;
11$control-bar-font-size: 14px; 12$control-bar-font-size: 14px;
12$control-bar-play-font-size: 34px; 13$control-bar-play-font-size: 34px;
13$control-bar-next-previous-play-font-size: 14px; 14$control-bar-next-previous-play-font-size: 14px;
14$control-bar-button-width: 38px; 15$control-bar-button-width: 38px;
15 16
17$control-bar-total-height: $control-bar-height - $control-bar-slider-top;
18
16$slider-bg-color: lighten($primary-background-color, 33%); 19$slider-bg-color: lighten($primary-background-color, 33%);
17 20
18$progress-margin: 10px; 21$progress-margin: 10px;
diff --git a/client/src/sass/player/control-bar.scss b/client/src/sass/player/control-bar.scss
index b3a96510a..c4e1283f8 100644
--- a/client/src/sass/player/control-bar.scss
+++ b/client/src/sass/player/control-bar.scss
@@ -4,6 +4,8 @@
4@use './_player-variables' as *; 4@use './_player-variables' as *;
5 5
6.video-js.vjs-peertube-skin .vjs-control-bar { 6.video-js.vjs-peertube-skin .vjs-control-bar {
7 z-index: 100;
8
7 height: $control-bar-height; 9 height: $control-bar-height;
8 background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.6)); 10 background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.6));
9 box-shadow: 0 -15px 40px 10px rgba(0, 0, 0, 0.2); 11 box-shadow: 0 -15px 40px 10px rgba(0, 0, 0, 0.2);
@@ -49,7 +51,7 @@
49 @include margin-left($progress-margin); 51 @include margin-left($progress-margin);
50 52
51 position: absolute; 53 position: absolute;
52 top: -10px; 54 top: $control-bar-slider-top;
53 z-index: 100; // On top of the progress bar 55 z-index: 100; // On top of the progress bar
54 width: calc(100% - (2 * #{$progress-margin})); 56 width: calc(100% - (2 * #{$progress-margin}));
55 height: 14px; 57 height: 14px;
diff --git a/client/src/sass/player/mobile.scss b/client/src/sass/player/mobile.scss
index 86c090200..d72dc41df 100644
--- a/client/src/sass/player/mobile.scss
+++ b/client/src/sass/player/mobile.scss
@@ -1,5 +1,7 @@
1@use 'sass:math';
1@use '_variables' as *; 2@use '_variables' as *;
2@use '_mixins' as *; 3@use '_mixins' as *;
4@use './_player-variables' as *;
3 5
4/* Special mobile style */ 6/* Special mobile style */
5 7
@@ -14,3 +16,72 @@
14 } 16 }
15 } 17 }
16} 18}
19
20.vjs-mobile-buttons-overlay {
21 display: none;
22
23 position: absolute;
24 background-color: rgba(0, 0, 0, 0.4);
25 width: 100%;
26 height: 100%;
27 top: 0;
28
29 .vjs-user-active,
30 .vjs-paused {
31 display: block;
32 }
33
34 .main-button {
35 font-family: VideoJS;
36 font-weight: normal;
37 font-style: normal;
38 font-size: 5em;
39 width: fit-content;
40 margin: auto;
41 position: relative;
42 top: calc(50% - 10px);
43 transform: translateY(-50%);
44 }
45}
46
47.vjs-paused {
48 .main-button {
49 &:before {
50 content: '\f101';
51 }
52 }
53}
54
55.vjs-playing {
56 .main-button {
57 &:before {
58 content: '\f103';
59 }
60 }
61}
62
63.vjs-ended {
64 .main-button {
65 &:before {
66 content: '\f116';
67 }
68 }
69}
70
71.vjs-has-started {
72
73 &.vjs-user-active,
74 &.vjs-paused {
75 .vjs-mobile-buttons-overlay {
76 display: block;
77 }
78 }
79
80 &.vjs-seeking,
81 &.vjs-scrubbing,
82 &.vjs-waiting {
83 .vjs-mobile-buttons-overlay {
84 display: none;
85 }
86 }
87}
diff --git a/client/src/sass/player/settings-menu.scss b/client/src/sass/player/settings-menu.scss
index 5a476259e..8aa2c2ac3 100644
--- a/client/src/sass/player/settings-menu.scss
+++ b/client/src/sass/player/settings-menu.scss
@@ -22,6 +22,7 @@ $setting-transition-easing: ease-out;
22 opacity: $primary-foreground-opacity; 22 opacity: $primary-foreground-opacity;
23 margin: 0 auto; 23 margin: 0 auto;
24 font-size: $font-size !important; 24 font-size: $font-size !important;
25 z-index: 100;
25 26
26 width: auto; 27 width: auto;
27 overflow: hidden; 28 overflow: hidden;