diff options
author | Chocobozzz <me@florianbigard.com> | 2022-01-11 11:26:35 +0100 |
---|---|---|
committer | Chocobozzz <me@florianbigard.com> | 2022-01-11 11:26:35 +0100 |
commit | f1a0555a88db9ade2b073a2e4dc73c4a6176c8a0 (patch) | |
tree | e1f73376527152fb9ac92447a826bccc9e8f0dd5 /client/src/sass | |
parent | ba9eef5f628764aed6183135e669b17741d24d7a (diff) | |
download | PeerTube-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.scss | 3 | ||||
-rw-r--r-- | client/src/sass/player/control-bar.scss | 4 | ||||
-rw-r--r-- | client/src/sass/player/mobile.scss | 71 | ||||
-rw-r--r-- | client/src/sass/player/settings-menu.scss | 1 |
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; |