aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2020-12-10 09:37:53 +0100
committerChocobozzz <me@florianbigard.com>2020-12-10 09:37:53 +0100
commite43b5a3fa887e82e32ac43a9736cf2c784fb7717 (patch)
tree7d6893faafaa98f4f14f40df0b4fd4658a041c77
parenta800dbf345e856ab790e7b3ab9a97e8c5dfa0a32 (diff)
downloadPeerTube-e43b5a3fa887e82e32ac43a9736cf2c784fb7717.tar.gz
PeerTube-e43b5a3fa887e82e32ac43a9736cf2c784fb7717.tar.zst
PeerTube-e43b5a3fa887e82e32ac43a9736cf2c784fb7717.zip
Improve live player responsive
-rw-r--r--client/src/app/+videos/+video-watch/video-watch.component.ts2
-rw-r--r--client/src/sass/player/_player-variables.scss3
-rw-r--r--client/src/sass/player/peertube-skin.scss41
3 files changed, 39 insertions, 7 deletions
diff --git a/client/src/app/+videos/+video-watch/video-watch.component.ts b/client/src/app/+videos/+video-watch/video-watch.component.ts
index 7eb56eb48..543cfe3f7 100644
--- a/client/src/app/+videos/+video-watch/video-watch.component.ts
+++ b/client/src/app/+videos/+video-watch/video-watch.component.ts
@@ -907,6 +907,8 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
907 return 907 return
908 } 908 }
909 909
910 console.log('Updating live views.')
911
910 this.video.views = newViews 912 this.video.views = newViews
911 } 913 }
912 914
diff --git a/client/src/sass/player/_player-variables.scss b/client/src/sass/player/_player-variables.scss
index 34ea9e139..cfe052195 100644
--- a/client/src/sass/player/_player-variables.scss
+++ b/client/src/sass/player/_player-variables.scss
@@ -12,6 +12,7 @@ $progress-margin: 10px;
12 12
13$dock-padding: 20px; 13$dock-padding: 20px;
14 14
15$first-control-bar-element-margin-left: 1em; 15$first-control-bar-element-margin-left: 10px;
16$first-control-bar-element-margin-left-small-width: 5px;
16 17
17$assets-path: '../../assets/' !default; 18$assets-path: '../../assets/' !default;
diff --git a/client/src/sass/player/peertube-skin.scss b/client/src/sass/player/peertube-skin.scss
index d8ce97c04..a6eccf7a2 100644
--- a/client/src/sass/player/peertube-skin.scss
+++ b/client/src/sass/player/peertube-skin.scss
@@ -256,7 +256,7 @@ body {
256 margin-left: .5em; 256 margin-left: .5em;
257 257
258 .vjs-current-time-display { 258 .vjs-current-time-display {
259 line-height: calc(#{$control-bar-height} + 1px); 259 line-height: calc(#{$control-bar-height} - 1px);
260 260
261 &::after { 261 &::after {
262 content: "/"; 262 content: "/";
@@ -269,8 +269,9 @@ body {
269 font-size: $font-size; 269 font-size: $font-size;
270 display: inline-block; 270 display: inline-block;
271 padding: 0; 271 padding: 0;
272
272 .vjs-duration-display { 273 .vjs-duration-display {
273 line-height: calc(#{$control-bar-height} + 1px); 274 line-height: calc(#{$control-bar-height} - 1px);
274 } 275 }
275 } 276 }
276 277
@@ -279,6 +280,12 @@ body {
279 } 280 }
280 } 281 }
281 282
283 .vjs-live-control {
284 line-height: $control-bar-height;
285 min-width: 4em;
286 width: inherit;
287 }
288
282 .vjs-peertube { 289 .vjs-peertube {
283 width: 100%; 290 width: 100%;
284 line-height: $control-bar-height; 291 line-height: $control-bar-height;
@@ -491,7 +498,7 @@ body {
491 @include disable-outline; 498 @include disable-outline;
492 499
493 width: 37px; 500 width: 37px;
494 margin-right: 11px; 501 margin-right: $first-control-bar-element-margin-left;
495 502
496 .vjs-icon-placeholder { 503 .vjs-icon-placeholder {
497 display: inline-block; 504 display: inline-block;
@@ -576,9 +583,19 @@ body {
576 display: none !important; 583 display: none !important;
577 } 584 }
578 } 585 }
586
587 &.vjs-live {
588 .vjs-duration {
589 display: none !important;
590 }
591
592 .vjs-peertube {
593 display: none !important;
594 }
595 }
579 } 596 }
580 597
581 @media screen and (max-width: 300px) { 598 @media screen and (max-width: 350px) {
582 .vjs-dock-text { 599 .vjs-dock-text {
583 font-size: 13px; 600 font-size: 13px;
584 } 601 }
@@ -606,8 +623,20 @@ body {
606 width: 33px; 623 width: 33px;
607 } 624 }
608 625
609 .vjs-play-control { 626 .vjs-control-bar {
610 margin-left: $first-control-bar-element-margin-left; 627 > button:first-child {
628 margin-left: $first-control-bar-element-margin-left-small-width;
629 }
630 }
631
632 .vjs-fullscreen-control {
633 margin-right: $first-control-bar-element-margin-left-small-width;
634 }
635
636 &.vjs-live {
637 .vjs-current-time {
638 display: none !important;
639 }
611 } 640 }
612 } 641 }
613 642