aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/sass/player
diff options
context:
space:
mode:
Diffstat (limited to 'client/src/sass/player')
-rw-r--r--client/src/sass/player/_player-variables.scss13
-rw-r--r--client/src/sass/player/context-menu.scss33
-rw-r--r--client/src/sass/player/mobile.scss16
-rw-r--r--client/src/sass/player/peertube-skin.scss561
-rw-r--r--client/src/sass/player/player.scss5
-rw-r--r--client/src/sass/player/settings-menu.scss180
-rw-r--r--client/src/sass/player/spinner.scss54
7 files changed, 862 insertions, 0 deletions
diff --git a/client/src/sass/player/_player-variables.scss b/client/src/sass/player/_player-variables.scss
new file mode 100644
index 000000000..110129790
--- /dev/null
+++ b/client/src/sass/player/_player-variables.scss
@@ -0,0 +1,13 @@
1$primary-foreground-color: #fff;
2$primary-foreground-opacity: 0.9;
3$primary-foreground-opacity-hover: 1;
4$primary-background-color: #000;
5
6$font-size: 13px;
7$control-bar-height: 34px;
8
9$slider-bg-color: lighten($primary-background-color, 33%);
10
11$progress-margin: 10px;
12
13$assets-path: '../../assets/' !default; \ No newline at end of file
diff --git a/client/src/sass/player/context-menu.scss b/client/src/sass/player/context-menu.scss
new file mode 100644
index 000000000..71d6d1b1d
--- /dev/null
+++ b/client/src/sass/player/context-menu.scss
@@ -0,0 +1,33 @@
1@import '_variables';
2@import '_mixins';
3@import './_player-variables';
4
5$context-menu-width: 350px;
6
7/* Sass for videojs-contextmenu-ui */
8
9.video-js .vjs-contextmenu-ui-menu {
10 position: absolute;
11 background-color: rgba(0, 0, 0, 0.5);
12 padding: 5px 0;
13 width: $context-menu-width;
14
15 .vjs-menu-content {
16 opacity: $primary-foreground-opacity;
17 color: $primary-foreground-color;
18 font-size: $font-size !important;
19 font-weight: $font-semibold;
20 }
21
22 .vjs-menu-item {
23 cursor: pointer;
24 font-size: 1em;
25 padding: 8px 16px;
26 text-align: left;
27 text-transform: none;
28
29 &:hover {
30 background-color: rgba(255, 255, 255, 0.2);
31 }
32 }
33} \ No newline at end of file
diff --git a/client/src/sass/player/mobile.scss b/client/src/sass/player/mobile.scss
new file mode 100644
index 000000000..c2fa855ab
--- /dev/null
+++ b/client/src/sass/player/mobile.scss
@@ -0,0 +1,16 @@
1@import '_variables';
2@import '_mixins';
3
4/* Special mobile style */
5
6.video-js.vjs-peertube-skin.vjs-is-mobile {
7 .vjs-control-bar {
8 .vjs-progress-control .vjs-slider .vjs-play-progress {
9 // Always display the circle on mobile
10 &::before {
11 margin-top: -1px;
12 opacity: 1;
13 }
14 }
15 }
16} \ No newline at end of file
diff --git a/client/src/sass/player/peertube-skin.scss b/client/src/sass/player/peertube-skin.scss
new file mode 100644
index 000000000..de6501962
--- /dev/null
+++ b/client/src/sass/player/peertube-skin.scss
@@ -0,0 +1,561 @@
1@import '_variables';
2@import '_mixins';
3@import './_player-variables';
4
5@mixin big-play-button-triangle-size($triangle-size) {
6 width: $triangle-size;
7 height: $triangle-size;
8 top: calc(50% - #{$triangle-size / 2});
9 left: calc(53% - #{($triangle-size / 2)});
10}
11
12.video-js.vjs-peertube-skin {
13 font-size: $font-size;
14 color: $primary-foreground-color;
15
16 .vjs-dock-text {
17 padding-right: 10px;
18 }
19
20 .vjs-dock-description {
21 font-size: 11px;
22
23 &::before, &::after {
24 display: inline-block;
25 content: '\1F308';
26 }
27
28 &::before {
29 margin-right: 4px;
30 }
31
32 &::after {
33 margin-left: 4px;
34 transform: scale(-1, 1);
35 }
36 }
37
38 .vjs-button > .vjs-icon-placeholder::before {
39 line-height: $control-bar-height;
40 }
41
42 .vjs-volume-level::before {
43 content: ''; /* Remove Circle From Progress Bar */
44 }
45
46 .vjs-audio-button {
47 display: none;
48 }
49
50 .vjs-big-play-button {
51 outline: 0;
52 font-size: 6em;
53
54 $big-play-width: 1.2em;
55 $big-play-height: 1.2em;
56
57 border: 6px solid #fff;
58 border-radius: 100%;
59
60 left: 50%;
61 top: 50%;
62 width: $big-play-width;
63 height: $big-play-height;
64 line-height: $big-play-height;
65 margin-left: -($big-play-width / 2);
66 margin-top: -($big-play-height / 2);
67 transition: 0.4s opacity;
68
69 &::-moz-focus-inner {
70 border: 0;
71 padding: 0
72 }
73
74 .vjs-icon-placeholder::before {
75 @include big-play-button-triangle-size(45px);
76
77 content: '';
78 background-image: url('#{$assets-path}/player/images/big-play-button.svg');
79 }
80
81 &:hover {
82 opacity: 0.8;
83 }
84 }
85
86 // Small effect when we click on the play button
87 &.vjs-has-big-play-button-clicked {
88
89 .vjs-big-play-button, .vjs-poster {
90 display: block;
91 visibility: hidden;
92
93 &.vjs-big-play-button, &.vjs-big-play-button::before {
94 opacity: 0;
95 transition: visibility 0.2s, opacity 0.2s;
96 }
97
98 &.vjs-poster, &.vjs-poster::before {
99 opacity: 0;
100 transition: visibility 0.3s, opacity 0.3s;
101 transition-delay: 0.05s;
102 }
103 }
104 }
105
106 // Hide the big play button on autoplay
107 &.vjs-has-autoplay {
108 .vjs-big-play-button {
109 display: none !important;
110 }
111 }
112
113 .vjs-control-bar,
114 .vjs-big-play-button,
115 .vjs-settings-dialog {
116 background-color: rgba($primary-background-color, 0.5);
117 }
118
119 .vjs-poster {
120 outline: none; /* Remove Blue Outline on Click*/
121 outline: 0;
122 }
123
124 .vjs-control-bar {
125 height: $control-bar-height;
126 background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.6));
127 box-shadow: 0 -15px 40px 10px rgba(0, 0, 0, 0.2);
128 text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
129
130 .vjs-progress-control,
131 .vjs-play-control,
132 .vjs-playback-rate,
133 .vjs-mute-control,
134 .vjs-volume-control,
135 .vjs-resolution-control,
136 .vjs-fullscreen-control,
137 .vjs-peertube-link,
138 .vjs-settings
139 {
140 color: $primary-foreground-color !important;
141 opacity: $primary-foreground-opacity;
142 transition: opacity .1s;
143
144 &:hover {
145 opacity: $primary-foreground-opacity-hover;
146 }
147 }
148
149 .vjs-current-time,
150 .vjs-duration,
151 .vjs-peertube {
152 color: $primary-foreground-color;
153 opacity: $primary-foreground-opacity;
154 }
155
156 .vjs-progress-control {
157 position: absolute;
158 z-index: 100; // On top of the progress bar
159 bottom: 29px;
160 width: calc(100% - (2 * #{$progress-margin}));
161 margin-left: $progress-margin;
162 height: 14px;
163
164 .vjs-slider {
165 margin: 0;
166 border-radius: 0;
167 background-color: rgba(255, 255, 255, .2);
168 height: 3px;
169 transition: none;
170
171 .vjs-play-progress {
172 background: $primary-foreground-color;
173
174 // Not display the circle if the progress is not hovered
175 &::before {
176 opacity: 0;
177 transition: opacity 0.1s ease;
178 font-size: 14px;
179
180 top: -0.3em;
181 }
182
183 .vjs-time-tooltip {
184 display: none;
185 }
186 }
187
188 .vjs-load-progress {
189 &, & div {
190 background: rgba(255, 255, 255, .2);
191 }
192 }
193 }
194 }
195
196 .vjs-progress-control:hover .vjs-slider,
197 .vjs-slider.vjs-sliding {
198 height: 5px;
199
200 .vjs-play-progress::before {
201 opacity: 1;
202 }
203 }
204
205
206 .vjs-play-control {
207 @include disable-outline;
208
209 cursor: pointer;
210 font-size: $font-size;
211 margin-right: 5px;
212 }
213
214 .vjs-time-control {
215 line-height: inherit;
216
217 &.vjs-current-time {
218 font-size: $font-size;
219 display: inline-block;
220 padding: 0;
221
222 .vjs-current-time-display {
223 line-height: calc(#{$control-bar-height} + 1px);
224
225 &::after {
226 content: "/";
227 margin: 0 1px 0 2px;
228 }
229 }
230 }
231
232 &.vjs-duration {
233 font-size: $font-size;
234 display: inline-block;
235 padding: 0;
236 .vjs-duration-display {
237 line-height: calc(#{$control-bar-height} + 1px);
238 }
239 }
240
241 &.vjs-remaining-time {
242 display: none;
243 }
244 }
245
246 .vjs-peertube {
247 width: 100%;
248 line-height: $control-bar-height;
249 text-align: right;
250
251 .vjs-peertube-displayed {
252 display: block;
253 }
254
255 .vjs-peertube-hidden {
256 display: none;
257 }
258
259 .download-speed-number, .upload-speed-number, .peers-number {
260 font-weight: $font-semibold;
261 }
262
263 .download-speed-text, .upload-speed-text, .peers-text {
264 margin-right: 15px;
265 }
266
267 .icon {
268 display: inline-block;
269 width: 15px;
270 height: 15px;
271 background-size: contain;
272 vertical-align: middle;
273 background-repeat: no-repeat;
274 margin-right: 6px;
275 position: relative;
276 top: -1px;
277
278 &.icon-download {
279 background-image: url('#{$assets-path}/player/images/arrow-down.svg');
280 }
281
282 &.icon-upload {
283 background-image: url('#{$assets-path}/player/images/arrow-up.svg');
284 }
285 }
286 }
287
288 .vjs-playback-rate {
289 font-size: 10px;
290 width: 37px !important;
291
292 .vjs-playback-rate-value {
293 font-size: 13px;
294 line-height: $control-bar-height;
295 }
296
297 .vjs-menu .vjs-menu-content {
298 width: 37px !important;
299 }
300 }
301
302 .vjs-mute-control {
303 @include disable-outline;
304
305 line-height: $control-bar-height;
306 padding: 0;
307 width: 30px;
308
309 .vjs-icon-placeholder {
310 display: inline-block;
311 width: 22px;
312 height: 22px;
313 vertical-align: middle;
314 background: url('#{$assets-path}/player/images/volume.svg') no-repeat;
315 background-size: contain;
316
317 &::before {
318 content: '';
319 }
320 }
321
322 &.vjs-vol-0 .vjs-icon-placeholder {
323 background: url('#{$assets-path}/player/images/volume-mute.svg') no-repeat;
324 background-size: contain;
325 }
326 }
327
328 .vjs-volume-control {
329 width: 30px;
330 margin: 0 5px 0 0;
331 }
332
333 .vjs-volume-bar {
334 background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAcCAQAAACw95UnAAAAMElEQVRIx2NgoBL4n4YKGUYNHkEG4zJg1OCRYDCpBowaPJwMppbLRg0eNXjUYBLEAXWNUA6QNm1lAAAAAElFTkSuQmCC) no-repeat;
335 background-size: 22px 14px;
336 height: 100%;
337 width: 100%;
338 max-width: 22px;
339 max-height: 14px;
340 margin: 7px 4px;
341 border-radius: 0;
342 top: 3px;
343
344 .vjs-volume-level {
345 background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAcAQAAAAAyhWABAAAAAnRSTlMAAHaTzTgAAAAZSURBVHgBYwAB/g9EUv+JokCqiaT+U4MCAPKPS7WUUOc1AAAAAElFTkSuQmCC) no-repeat;
346 background-size: 22px 14px;
347 max-width: 22px;
348 max-height: 14px;
349 height: 100%;
350 }
351 }
352
353 .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active,
354 .vjs-volume-panel.vjs-volume-panel-horizontal:active,
355 .vjs-volume-panel.vjs-volume-panel-horizontal:focus,
356 .vjs-volume-panel.vjs-volume-panel-horizontal:hover {
357 width: 6em;
358 transition-property: none;
359 }
360
361 .vjs-volume-panel .vjs-mute-control:hover ~ .vjs-volume-control.vjs-volume-horizontal {
362 width: 3em;
363 height: auto;
364 }
365
366 .vjs-volume-panel .vjs-mute-control:hover ~ .vjs-volume-control {
367 transition-property: none;
368 }
369
370 .vjs-volume-panel {
371 .vjs-mute-control {
372 width: 2em;
373 z-index: 1;
374 padding: 0;
375 }
376
377 .vjs-volume-control {
378 display: inline-block;
379 position: relative;
380 left: 5px;
381 opacity: 1;
382 width: 3em;
383 height: auto;
384 }
385 }
386
387 .vjs-peertube-link {
388 @include disable-outline;
389 @include disable-default-a-behaviour;
390
391 text-decoration: none;
392 line-height: $control-bar-height;
393 font-weight: $font-semibold;
394 padding: 0 5px;
395 }
396
397 .vjs-fullscreen-control {
398 @include disable-outline;
399
400 width: 37px;
401 margin-right: 11px;
402
403 .vjs-icon-placeholder {
404 display: inline-block;
405 width: 22px;
406 height: 22px;
407 vertical-align: middle;
408 background: url('#{$assets-path}/player/images/fullscreen.svg') no-repeat;
409 background-size: contain;
410
411 &::before {
412 content: '';
413 }
414 }
415 }
416
417 .vjs-menu-button-popup {
418 font-weight: $font-semibold;
419 width: 50px;
420
421 .vjs-resolution-button {
422 @include disable-outline;
423 }
424
425 .vjs-menu {
426 top: 20px;
427 left: 0;
428
429 .vjs-menu-content {
430 width: 50px;
431 bottom: 20px;
432 }
433
434 li {
435 text-transform: none;
436 font-size: 13px;
437 }
438 }
439 }
440 }
441
442 @media screen and (max-width: 750px) {
443 .vjs-dock-text {
444 font-size: 16px;
445 }
446
447 .vjs-dock-description {
448 font-size: 9px;
449 }
450
451 .vjs-big-play-button {
452 font-size: 5em;
453 border-width: 5px;
454
455 .vjs-icon-placeholder::before {
456 @include big-play-button-triangle-size(32px);
457 }
458 }
459 }
460
461 @media screen and (max-width: 570px) {
462 .vjs-dock-text {
463 font-size: 14px;
464 }
465
466 .vjs-big-play-button {
467 font-size: 4.5em;
468 border-width: 4.5px;
469
470 .vjs-icon-placeholder::before {
471 @include big-play-button-triangle-size(27px);
472 }
473 }
474
475 .vjs-playback-rate {
476 display: none;
477 }
478
479 .vjs-peertube {
480 padding: 0 !important;
481
482 .vjs-peertube-displayed {
483 display: none !important;
484 }
485 }
486 }
487
488 @media screen and (max-width: 300px) {
489 .vjs-dock-text {
490 font-size: 13px;
491 }
492
493 .vjs-big-play-button {
494 font-size: 3em;
495 border-width: 3px;
496
497 .vjs-icon-placeholder::before {
498 @include big-play-button-triangle-size(20px);
499 }
500 }
501
502 .vjs-volume-control {
503 display: none !important;
504 }
505
506 .vjs-peertube-link {
507 padding: 0 !important;
508 }
509
510 .vjs-settings {
511 width: 33px;
512 }
513 }
514}
515
516// Play/pause animations
517.vjs-has-started .vjs-play-control {
518 &.vjs-playing {
519 animation: remove-pause-button 0.25s ease;
520 }
521
522 &.vjs-paused {
523 animation: add-play-button 0.25s ease;
524 }
525
526 @keyframes remove-pause-button {
527 0% {
528 transform: rotate(90deg);
529 }
530 100% {
531 transform: rotate(0deg);
532 }
533 }
534
535 @keyframes add-play-button {
536 0% {
537 transform: rotate(-90deg);
538 }
539 100% {
540 transform: rotate(0deg);
541 }
542 }
543}
544
545// Error display disabled
546.vjs-error:not(.vjs-error-display-enabled) {
547 .vjs-error-display {
548 display: none;
549 }
550
551 .vjs-loading-spinner {
552 display: block;
553 }
554}
555
556// Error display enabled
557.vjs-error.vjs-error-display-enabled {
558 .vjs-error-display {
559 display: block;
560 }
561} \ No newline at end of file
diff --git a/client/src/sass/player/player.scss b/client/src/sass/player/player.scss
new file mode 100644
index 000000000..e4a315d1f
--- /dev/null
+++ b/client/src/sass/player/player.scss
@@ -0,0 +1,5 @@
1@import './peertube-skin';
2@import './mobile';
3@import './context-menu';
4@import './settings-menu';
5@import './spinner'; \ No newline at end of file
diff --git a/client/src/sass/player/settings-menu.scss b/client/src/sass/player/settings-menu.scss
new file mode 100644
index 000000000..6c213c5d1
--- /dev/null
+++ b/client/src/sass/player/settings-menu.scss
@@ -0,0 +1,180 @@
1@import '_variables';
2@import '_mixins';
3@import './_player-variables';
4
5$setting-transition-duration: 0.15s;
6$setting-transition-easing: ease-out;
7
8/* Sass for videojs-settings-menu */
9
10.video-js {
11
12 .vjs-settings {
13 @include disable-outline;
14
15 cursor: pointer;
16 width: 37px;
17
18 .vjs-icon-placeholder {
19 display: inline-block;
20 width: 17px;
21 height: 17px;
22 vertical-align: middle;
23 background: url('#{$assets-path}/player/images/settings.svg') no-repeat;
24 background-size: contain;
25
26 &::before {
27 content: '';
28 }
29 }
30 }
31
32 .vjs-settings-sub-menu-title {
33 width: 4em;
34 text-transform: initial;
35 }
36
37 .vjs-settings-dialog {
38 position: absolute;
39 right: .5em;
40 bottom: 3.5em;
41 color: $primary-foreground-color;
42 opacity: $primary-foreground-opacity;
43 margin: 0 auto;
44 font-size: $font-size !important;
45
46 width: auto;
47 overflow: hidden;
48
49 transition: width $setting-transition-duration $setting-transition-easing, height $setting-transition-duration $setting-transition-easing;
50
51 .vjs-settings-sub-menu-value,
52 .vjs-settings-sub-menu-title {
53 display: table-cell;
54 padding: 0 5px;
55 }
56
57 .vjs-settings-sub-menu-title {
58 text-align: left;
59 font-weight: $font-semibold;
60 }
61
62 .vjs-settings-sub-menu-value {
63 width: 100%;
64 text-align: right;
65
66 small {
67 font-size: 0.85em;
68 opacity: 0.8;
69 }
70 }
71
72 .vjs-settings-panel {
73 position: absolute;
74 bottom: 0;
75 right: 0;
76 overflow-y: auto;
77 overflow-x: hidden;
78 border-radius: 1px;
79 }
80
81 .vjs-settings-panel-child {
82 display: flex;
83
84 align-items: flex-end;
85 white-space: nowrap;
86
87 &:focus,
88 &:active {
89 outline: none;
90 }
91
92 > .vjs-menu {
93 flex: 1;
94 min-width: 200px;
95 }
96
97 > .vjs-menu,
98 > .vjs-settings-sub-menu {
99 transition: all $setting-transition-duration $setting-transition-easing;
100
101 .vjs-menu-item {
102
103 &:hover {
104 background-color: rgba(255, 255, 255, 0.2);
105 }
106
107 &:first-child {
108 margin-top: 5px;
109 }
110
111 &:last-child {
112 margin-bottom: 5px;
113 }
114 }
115
116 li {
117 font-size: 1em;
118 text-transform: initial;
119
120 &:hover {
121 cursor: pointer;
122 }
123 }
124 }
125
126 > .vjs-menu {
127 .vjs-menu-item {
128 padding: 8px 16px;
129 }
130
131 .vjs-settings-sub-menu-value::after {
132 @include chevron-right(9px, 2px);
133
134 margin-left: 5px;
135 }
136 }
137
138 > .vjs-settings-sub-menu {
139 width: 80px;
140
141 .vjs-menu-item {
142 outline: 0;
143 font-weight: $font-semibold;
144
145 padding: 5px 8px;
146 text-align: right;
147
148 &.vjs-back-button {
149 background-color: inherit;
150 padding: 8px 8px 13px 8px;
151 margin-bottom: 5px;
152 border-bottom: 1px solid grey;
153
154 &::before {
155 @include chevron-left(9px, 2px);
156
157 margin-right: 5px;
158 }
159 }
160
161 &.vjs-selected {
162 background-color: inherit;
163 color: inherit;
164 position: relative;
165
166 &::before {
167 @include icon(15px);
168
169 position: absolute;
170 left: 8px;
171 content: ' ';
172 margin-top: 1px;
173 background-image: url('#{$assets-path}/player/images/tick.svg');
174 }
175 }
176 }
177 }
178 }
179 }
180} \ No newline at end of file
diff --git a/client/src/sass/player/spinner.scss b/client/src/sass/player/spinner.scss
new file mode 100644
index 000000000..a6af8da33
--- /dev/null
+++ b/client/src/sass/player/spinner.scss
@@ -0,0 +1,54 @@
1@import '_variables';
2@import '_mixins';
3
4// Thanks: https://projects.lukehaas.me/css-loaders/
5.vjs-loading-spinner {
6 left: 50%;
7 font-size: 10px;
8 text-indent: -9999em;
9 border: 0.7em solid rgba(255, 255, 255, 0.2);
10 border-left-color: #ffffff;
11 transform: translateZ(0);
12 animation: 0.3s ease-out 1.1s forwards vjs-spinner-show, spinner 1.4s infinite linear !important;
13 overflow: hidden;
14 visibility: hidden;
15
16 &::before {
17 animation: none !important;
18 }
19
20 &::after {
21 border-radius: 50%;
22 width: 6em;
23 height: 6em;
24 animation: none !important;
25 }
26
27 @keyframes spinner {
28 0% {
29 transform: rotate(0deg);
30 }
31 100% {
32 transform: rotate(360deg);
33 }
34 }
35
36 @keyframes vjs-spinner-show {
37 0% {
38 display: none;
39 opacity: 0;
40 }
41
42 1% {
43 display: block;
44 visibility: visible;
45 opacity: 0;
46 }
47
48 100% {
49 display: block;
50 visibility: visible;
51 opacity: 1;
52 }
53 }
54} \ No newline at end of file