mirror of https://github.com/Chocobozzz/PeerTube
Improve live player responsive
parent
a800dbf345
commit
e43b5a3fa8
|
@ -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
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue