forks/peertube
1
0
Fork 0
Code Releases Activity

Improve player progress bar

Browse source
This commit is contained in:
Chocobozzz 2018-06-08 10:37:13 +02:00
parent ff193d5e3f
commit 2ce2fd7f45
No known key found for this signature in database
GPG key ID: 583A612D890159BE
2 changed files with 62 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
client/src/assets/player/peertube-videojs-plugin.ts
View file

@ -7,7 +7,7 @@ import { PeertubePluginOptions, VideoJSComponentInterface, videojsUntyped } from
import {
getAverageBandwidth,
getStoredMute,
getStoredVolume,
getStoredVolume, isMobile,
saveAverageBandwidth,
saveMuteInStore,
saveVolumeInStore,
@ -366,6 +366,8 @@ class PeerTubePlugin extends Plugin {
}
private initializePlayer () {
if (isMobile()) this.player.addClass('vjs-is-mobile')
this.initSmoothProgressBar()
this.alterInactivity()

96
client/src/sass/video-js-custom.scss
View file

@ -23,6 +23,8 @@ $setting-transition-easing: ease-out;
$context-menu-width: 350px;
$progress-margin: 10px;
.video-js.vjs-peertube-skin {
font-size: $font-size;
color: $primary-foreground-color;
@ -164,56 +166,61 @@ $context-menu-width: 350px;
opacity: $primary-foreground-opacity;
}
.vjs-slider {
background-color: rgba(255, 255, 255, .2);
border-radius: 2px;
height: 5px;
.vjs-slider-bar {
background: $primary-foreground-color;
}
}
.vjs-play-progress {
padding-right: 4px;
&::before {
top: -0.3em;
&:hover {
top: -0.372em;
}
}
.vjs-time-tooltip {
display: none;
}
}
.vjs-load-progress {
&, & div {
background: rgba(255, 255, 255, .2);
}
}
.vjs-progress-control {
bottom: 34px;
width: 100%;
position: absolute;
height: 5px;
z-index: 100; // On top of the progress bar
bottom: 29px;
width: calc(100% - (2 * #{$progress-margin}));
margin-left: $progress-margin;
height: 14px;
.vjs-progress-holder {
.vjs-slider {
margin: 0;
border-radius: 0;
background-color: rgba(255, 255, 255, .2);
height: 3px;
transition: none;
.vjs-play-progress {
background: $primary-foreground-color;
// Not display the circle if the progress is not hovered
&::before {
opacity: 0;
transition: opacity 0.1s ease;
font-size: 14px;
top: -0.3em;
}
.vjs-time-tooltip {
display: none;
}
}
.vjs-load-progress {
&, & div {
background: rgba(255, 255, 255, .2);
}
}
}
}
.vjs-progress-control:hover .vjs-slider,
.vjs-slider.vjs-sliding {
height: 5px;
.vjs-play-progress::before {
opacity: 1;
}
}
.vjs-play-control {
@include disable-outline;
cursor: pointer;
font-size: $font-size;
padding: 0 17px;
margin-right: 5px;
}
@ -404,6 +411,7 @@ $context-menu-width: 350px;
@include disable-outline;
width: 37px;
margin-right: 11px;
.vjs-icon-placeholder {
display: inline-block;
@ -819,3 +827,17 @@ $context-menu-width: 350px;
}
}
}
/* Special mobile style */
.video-js.vjs-peertube-skin.vjs-is-mobile {
.vjs-control-bar {
.vjs-progress-control .vjs-slider .vjs-play-progress {
// Always display the circle on mobile
&::before {
margin-top: -1px;
opacity: 1;
}
}
}
}