Improve live player responsive

pull/3448/head
Chocobozzz 2020-12-10 09:37:53 +01:00
parent a800dbf345
commit e43b5a3fa8
No known key found for this signature in database
GPG Key ID: 583A612D890159BE
3 changed files with 39 additions and 7 deletions

View File

@ -907,6 +907,8 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
return return
} }
console.log('Updating live views.')
this.video.views = newViews this.video.views = newViews
} }

View File

@ -12,6 +12,7 @@ $progress-margin: 10px;
$dock-padding: 20px; $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; $assets-path: '../../assets/' !default;

View File

@ -256,7 +256,7 @@ body {
margin-left: .5em; margin-left: .5em;
.vjs-current-time-display { .vjs-current-time-display {
line-height: calc(#{$control-bar-height} + 1px); line-height: calc(#{$control-bar-height} - 1px);
&::after { &::after {
content: "/"; content: "/";
@ -269,8 +269,9 @@ body {
font-size: $font-size; font-size: $font-size;
display: inline-block; display: inline-block;
padding: 0; padding: 0;
.vjs-duration-display { .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 { .vjs-peertube {
width: 100%; width: 100%;
line-height: $control-bar-height; line-height: $control-bar-height;
@ -491,7 +498,7 @@ body {
@include disable-outline; @include disable-outline;
width: 37px; width: 37px;
margin-right: 11px; margin-right: $first-control-bar-element-margin-left;
.vjs-icon-placeholder { .vjs-icon-placeholder {
display: inline-block; display: inline-block;
@ -576,9 +583,19 @@ body {
display: none !important; display: none !important;
} }
} }
&.vjs-live {
.vjs-duration {
display: none !important;
} }
@media screen and (max-width: 300px) { .vjs-peertube {
display: none !important;
}
}
}
@media screen and (max-width: 350px) {
.vjs-dock-text { .vjs-dock-text {
font-size: 13px; font-size: 13px;
} }
@ -606,8 +623,20 @@ body {
width: 33px; width: 33px;
} }
.vjs-play-control { .vjs-control-bar {
margin-left: $first-control-bar-element-margin-left; > 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;
}
} }
} }