From e43b5a3fa887e82e32ac43a9736cf2c784fb7717 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Thu, 10 Dec 2020 09:37:53 +0100 Subject: Improve live player responsive --- .../+videos/+video-watch/video-watch.component.ts | 2 ++ client/src/sass/player/_player-variables.scss | 3 +- client/src/sass/player/peertube-skin.scss | 41 ++++++++++++++++++---- 3 files changed, 39 insertions(+), 7 deletions(-) (limited to 'client') 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 { return } + console.log('Updating live views.') + this.video.views = newViews } 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; $dock-padding: 20px; -$first-control-bar-element-margin-left: 1em; +$first-control-bar-element-margin-left: 10px; +$first-control-bar-element-margin-left-small-width: 5px; $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 { margin-left: .5em; .vjs-current-time-display { - line-height: calc(#{$control-bar-height} + 1px); + line-height: calc(#{$control-bar-height} - 1px); &::after { content: "/"; @@ -269,8 +269,9 @@ body { font-size: $font-size; display: inline-block; padding: 0; + .vjs-duration-display { - line-height: calc(#{$control-bar-height} + 1px); + line-height: calc(#{$control-bar-height} - 1px); } } @@ -279,6 +280,12 @@ body { } } + .vjs-live-control { + line-height: $control-bar-height; + min-width: 4em; + width: inherit; + } + .vjs-peertube { width: 100%; line-height: $control-bar-height; @@ -491,7 +498,7 @@ body { @include disable-outline; width: 37px; - margin-right: 11px; + margin-right: $first-control-bar-element-margin-left; .vjs-icon-placeholder { display: inline-block; @@ -576,9 +583,19 @@ body { display: none !important; } } + + &.vjs-live { + .vjs-duration { + display: none !important; + } + + .vjs-peertube { + display: none !important; + } + } } - @media screen and (max-width: 300px) { + @media screen and (max-width: 350px) { .vjs-dock-text { font-size: 13px; } @@ -606,8 +623,20 @@ body { width: 33px; } - .vjs-play-control { - margin-left: $first-control-bar-element-margin-left; + .vjs-control-bar { + > button:first-child { + margin-left: $first-control-bar-element-margin-left-small-width; + } + } + + .vjs-fullscreen-control { + margin-right: $first-control-bar-element-margin-left-small-width; + } + + &.vjs-live { + .vjs-current-time { + display: none !important; + } } } -- cgit v1.2.3