aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/sass
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2018-03-30 17:40:00 +0200
committerChocobozzz <me@florianbigard.com>2018-04-03 14:02:10 +0200
commitc6352f2c64f3c1ad54f8500f493587cdce3d33c9 (patch)
tree642a5b29b4d68ed8915e5e800232eab069303f79 /client/src/sass
parent6b9af1293621a81564296ead6f12f5e70eafbca2 (diff)
downloadPeerTube-c6352f2c64f3c1ad54f8500f493587cdce3d33c9.tar.gz
PeerTube-c6352f2c64f3c1ad54f8500f493587cdce3d33c9.tar.zst
PeerTube-c6352f2c64f3c1ad54f8500f493587cdce3d33c9.zip
Improve player
Add a settings dialog based on the work of Yanko Shterev (@yshterev): https://github.com/yshterev/videojs-settings-menu. Thanks!
Diffstat (limited to 'client/src/sass')
-rw-r--r--client/src/sass/include/_mixins.scss24
-rw-r--r--client/src/sass/video-js-custom.scss257
2 files changed, 255 insertions, 26 deletions
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index e1b1bb32c..f905f9ae5 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -279,3 +279,27 @@
279 width: $size; 279 width: $size;
280 height: $size; 280 height: $size;
281} 281}
282
283@mixin chevron ($size, $border-width) {
284 border-style: solid;
285 border-width: $border-width $border-width 0 0;
286 content: '';
287 display: inline-block;
288 transform: rotate(-45deg);
289 height: $size;
290 width: $size;
291}
292
293@mixin chevron-right ($size, $border-width) {
294 @include chevron($size, $border-width);
295
296 left: 0;
297 transform: rotate(45deg);
298}
299
300@mixin chevron-left ($size, $border-width) {
301 @include chevron($size, $border-width);
302
303 left: 0.25em;
304 transform: rotate(-135deg);
305}
diff --git a/client/src/sass/video-js-custom.scss b/client/src/sass/video-js-custom.scss
index 2fa3527a8..2c589553c 100644
--- a/client/src/sass/video-js-custom.scss
+++ b/client/src/sass/video-js-custom.scss
@@ -1,7 +1,7 @@
1@import '_variables'; 1@import '_variables';
2@import '_mixins'; 2@import '_mixins';
3 3
4$primary-foreground-color: #eee; 4$primary-foreground-color: #fff;
5$primary-foreground-opacity: 0.9; 5$primary-foreground-opacity: 0.9;
6$primary-foreground-opacity-hover: 1; 6$primary-foreground-opacity-hover: 1;
7$primary-background-color: #000; 7$primary-background-color: #000;
@@ -11,9 +11,12 @@ $control-bar-height: 34px;
11 11
12$slider-bg-color: lighten($primary-background-color, 33%); 12$slider-bg-color: lighten($primary-background-color, 33%);
13 13
14$setting-transition-duration: 0.15s;
15$setting-transition-easing: ease-out;
16
14.video-js.vjs-peertube-skin { 17.video-js.vjs-peertube-skin {
15 font-size: $font-size; 18 font-size: $font-size;
16 color: #fff; 19 color: $primary-foreground-color;
17 20
18 .vjs-dock-text { 21 .vjs-dock-text {
19 padding-right: 10px; 22 padding-right: 10px;
@@ -22,16 +25,16 @@ $slider-bg-color: lighten($primary-background-color, 33%);
22 .vjs-dock-description { 25 .vjs-dock-description {
23 font-size: 11px; 26 font-size: 11px;
24 27
25 &:before, &:after { 28 &::before, &::after {
26 display: inline-block; 29 display: inline-block;
27 content: '\1F308'; 30 content: '\1F308';
28 } 31 }
29 32
30 &:before { 33 &::before {
31 margin-right: 4px; 34 margin-right: 4px;
32 } 35 }
33 36
34 &:after { 37 &::after {
35 margin-left: 4px; 38 margin-left: 4px;
36 transform: scale(-1, 1); 39 transform: scale(-1, 1);
37 } 40 }
@@ -41,7 +44,7 @@ $slider-bg-color: lighten($primary-background-color, 33%);
41 line-height: $control-bar-height; 44 line-height: $control-bar-height;
42 } 45 }
43 46
44 .vjs-volume-level:before { 47 .vjs-volume-level::before {
45 content: ''; /* Remove Circle From Progress Bar */ 48 content: ''; /* Remove Circle From Progress Bar */
46 } 49 }
47 50
@@ -95,7 +98,7 @@ $slider-bg-color: lighten($primary-background-color, 33%);
95 98
96 .vjs-control-bar, 99 .vjs-control-bar,
97 .vjs-big-play-button, 100 .vjs-big-play-button,
98 .vjs-menu-button .vjs-menu-content { 101 .vjs-settings-dialog {
99 background-color: rgba($primary-background-color, 0.5); 102 background-color: rgba($primary-background-color, 0.5);
100 } 103 }
101 104
@@ -110,8 +113,13 @@ $slider-bg-color: lighten($primary-background-color, 33%);
110 } 113 }
111 114
112 .vjs-play-progress { 115 .vjs-play-progress {
113 &::before:hover { 116
114 top: -0.372em; 117 &::before {
118 top: -0.3em;
119
120 &:hover {
121 top: -0.372em;
122 }
115 } 123 }
116 124
117 .vjs-time-tooltip { 125 .vjs-time-tooltip {
@@ -141,8 +149,11 @@ $slider-bg-color: lighten($primary-background-color, 33%);
141 .vjs-mute-control, 149 .vjs-mute-control,
142 .vjs-volume-control, 150 .vjs-volume-control,
143 .vjs-resolution-control, 151 .vjs-resolution-control,
144 .vjs-fullscreen-control 152 .vjs-fullscreen-control,
153 .vjs-peertube-link,
154 .vjs-settings
145 { 155 {
156 color: $primary-foreground-color !important;
146 opacity: $primary-foreground-opacity; 157 opacity: $primary-foreground-opacity;
147 transition: opacity .1s; 158 transition: opacity .1s;
148 159
@@ -155,6 +166,7 @@ $slider-bg-color: lighten($primary-background-color, 33%);
155 .vjs-duration, 166 .vjs-duration,
156 .vjs-peertube { 167 .vjs-peertube {
157 color: $primary-foreground-color; 168 color: $primary-foreground-color;
169 opacity: $primary-foreground-opacity;
158 } 170 }
159 171
160 .vjs-progress-control { 172 .vjs-progress-control {
@@ -172,6 +184,7 @@ $slider-bg-color: lighten($primary-background-color, 33%);
172 .vjs-play-control { 184 .vjs-play-control {
173 @include disable-outline; 185 @include disable-outline;
174 186
187 cursor: pointer;
175 font-size: $font-size; 188 font-size: $font-size;
176 padding: 0 17px; 189 padding: 0 17px;
177 margin-right: 5px; 190 margin-right: 5px;
@@ -291,7 +304,7 @@ $slider-bg-color: lighten($primary-background-color, 33%);
291 304
292 .vjs-volume-control { 305 .vjs-volume-control {
293 width: 30px; 306 width: 30px;
294 margin: 0; 307 margin: 0 5px 0 0;
295 } 308 }
296 309
297 .vjs-volume-bar { 310 .vjs-volume-bar {
@@ -348,6 +361,16 @@ $slider-bg-color: lighten($primary-background-color, 33%);
348 } 361 }
349 } 362 }
350 363
364 .vjs-peertube-link {
365 @include disable-outline;
366 @include disable-default-a-behaviour;
367
368 text-decoration: none;
369 line-height: $control-bar-height;
370 font-weight: $font-semibold;
371 padding: 0 5px;
372 }
373
351 .vjs-fullscreen-control { 374 .vjs-fullscreen-control {
352 @include disable-outline; 375 @include disable-outline;
353 376
@@ -371,19 +394,6 @@ $slider-bg-color: lighten($primary-background-color, 33%);
371 font-weight: $font-semibold; 394 font-weight: $font-semibold;
372 width: 50px; 395 width: 50px;
373 396
374 // Thanks: https://github.com/kmoskwiak/videojs-resolution-switcher/pull/92/files
375 .vjs-resolution-button-label {
376 line-height: $control-bar-height;
377 position: absolute;
378 top: 0;
379 left: 0;
380 width: 100%;
381 height: 100%;
382 text-align: center;
383 box-sizing: inherit;
384 text-align: center;
385 }
386
387 .vjs-resolution-button { 397 .vjs-resolution-button {
388 @include disable-outline; 398 @include disable-outline;
389 } 399 }
@@ -451,6 +461,35 @@ $slider-bg-color: lighten($primary-background-color, 33%);
451 } 461 }
452} 462}
453 463
464// Play/pause animations
465.vjs-has-started .vjs-play-control {
466 &.vjs-playing {
467 animation: remove-pause-button 0.25s ease;
468 }
469
470 &.vjs-paused {
471 animation: add-play-button 0.25s ease;
472 }
473
474 @keyframes remove-pause-button {
475 0% {
476 transform: rotate(90deg);
477 }
478 100% {
479 transform: rotate(0deg);
480 }
481 }
482
483 @keyframes add-play-button {
484 0% {
485 transform: rotate(-90deg);
486 }
487 100% {
488 transform: rotate(0deg);
489 }
490 }
491}
492
454// Thanks: https://projects.lukehaas.me/css-loaders/ 493// Thanks: https://projects.lukehaas.me/css-loaders/
455.vjs-loading-spinner { 494.vjs-loading-spinner {
456 left: 50%; 495 left: 50%;
@@ -463,11 +502,11 @@ $slider-bg-color: lighten($primary-background-color, 33%);
463 overflow: hidden; 502 overflow: hidden;
464 visibility: hidden; 503 visibility: hidden;
465 504
466 &:before { 505 &::before {
467 animation: none !important; 506 animation: none !important;
468 } 507 }
469 508
470 &:after { 509 &::after {
471 border-radius: 50%; 510 border-radius: 50%;
472 width: 6em; 511 width: 6em;
473 height: 6em; 512 height: 6em;
@@ -520,3 +559,169 @@ $slider-bg-color: lighten($primary-background-color, 33%);
520 display: block; 559 display: block;
521 } 560 }
522} 561}
562
563
564/* Sass for videojs-settings-menu */
565
566.video-js {
567
568 .vjs-settings {
569 @include disable-outline;
570
571 cursor: pointer;
572 width: 37px;
573
574 .vjs-icon-placeholder {
575 display: inline-block;
576 width: 17px;
577 height: 17px;
578 vertical-align: middle;
579 background: url('../assets/player/images/settings.svg') no-repeat;
580 background-size: contain;
581
582 &::before {
583 content: '';
584 }
585 }
586 }
587
588 .vjs-settings-sub-menu-title {
589 width: 4em;
590 text-transform: initial;
591 }
592
593 .vjs-settings-dialog {
594 position: absolute;
595 right: .5em;
596 bottom: 3.5em;
597 color: $primary-foreground-color;
598 opacity: $primary-foreground-opacity;
599 margin: 0 auto;
600 font-size: $font-size !important;
601
602 width: auto;
603 overflow: hidden;
604
605 transition: width $setting-transition-duration $setting-transition-easing, height $setting-transition-duration $setting-transition-easing;
606
607 .vjs-settings-sub-menu-value,
608 .vjs-settings-sub-menu-title {
609 display: table-cell;
610 padding: 0 5px;
611 }
612
613 .vjs-settings-sub-menu-title {
614 text-align: left;
615 font-weight: $font-semibold;
616 }
617
618 .vjs-settings-sub-menu-value {
619 width: 100%;
620 text-align: right;
621 }
622
623 .vjs-settings-panel {
624 position: absolute;
625 bottom: 0;
626 right: 0;
627 overflow-y: auto;
628 overflow-x: hidden;
629 border-radius: 1px;
630 }
631
632 .vjs-settings-panel-child {
633 display: flex;
634
635 align-items: flex-end;
636 white-space: nowrap;
637
638 &:focus,
639 &:active {
640 outline: none;
641 }
642
643 > .vjs-menu {
644 flex: 1;
645 min-width: 200px;
646 }
647
648 > .vjs-menu,
649 > .vjs-settings-sub-menu {
650 transition: all $setting-transition-duration $setting-transition-easing;
651
652 .vjs-menu-item {
653
654 &:first-child {
655 margin-top: 5px;
656 }
657
658 &:last-child {
659 margin-bottom: 5px;
660 }
661 }
662
663 li {
664 font-size: 1em;
665 text-transform: initial;
666
667 &:hover {
668 cursor: pointer;
669 }
670 }
671 }
672
673 > .vjs-menu {
674 .vjs-menu-item {
675 padding: 8px 16px;
676 }
677
678 .vjs-settings-sub-menu-value::after {
679 @include chevron-right(9px, 2px);
680
681 margin-left: 5px;
682 }
683 }
684
685 > .vjs-settings-sub-menu {
686 width: 80px;
687
688 .vjs-menu-item {
689 outline: 0;
690 font-weight: $font-semibold;
691
692 padding: 5px 8px;
693 text-align: right;
694
695 &.vjs-back-button {
696 background-color: inherit;
697 padding: 8px 8px 13px 8px;
698 margin-bottom: 5px;
699 border-bottom: 1px solid grey;
700
701 &::before {
702 @include chevron-left(9px, 2px);
703
704 margin-right: 5px;
705 }
706 }
707
708 &.vjs-selected {
709 background-color: inherit;
710 color: inherit;
711 position: relative;
712
713 &::before {
714 @include icon(15px);
715
716 position: absolute;
717 left: 8px;
718 content: ' ';
719 margin-top: 1px;
720 background-image: url('../assets/player/images/tick.svg');
721 }
722 }
723 }
724 }
725 }
726 }
727} \ No newline at end of file