interesting
/
PeerTube
mirror of https://github.com/Chocobozzz/PeerTube.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Improve live player responsive

This commit is contained in:
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/src/app/+videos/+video-watch/video-watch.component.ts
View File

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

3
client/src/sass/player/_player-variables.scss
View File

@ -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;

41
client/src/sass/player/peertube-skin.scss
View File

@ -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;
}
}
}