DarkTheme/brammp_transfer.sh-web
1
0
Fork 0
Code Issues Pull Requests Releases 4 Wiki Activity

switch to video.js

Browse Source
This commit is contained in:
Andrea Spacca
2019-01-19 21:48:11 +01:00
parent bba03aaab9
commit c0fabecf6a
9 changed files with 265 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/styles/includes/preview.less
View File

@@ -106,11 +106,6 @@ padding: 0px;
padding-bottom: 30px;
}
video, audio {
margin: 0 auto;
width: 100%;
}
.wrap {
width: 40%;
height: 40%;

89
src/styles/includes/video-js.scss → src/styles/includes/video-js.less
View File

@@ -12,29 +12,42 @@
https://codepen.io/heff/pen/EarCt/left/?editors=010
*/
// The following are SCSS variables to automate some of the values.
// But don't feel limited by them. Change/replace whatever you want.
// But don't feel limited by them. Change/replace whatever you want.
// The color of icons, text, and the big play button border.
// Try changing to #0f0
$primary-foreground-color: #fff; // #fff default
@primary-foreground-color: #fff; // #fff default
// The default color of control backgrounds is mostly black but with a little
// bit of blue so it can still be seen on all-black video frames, which are common.
// Try changing to #900
$primary-background-color: @blue; // #2B333F default
@primary-background-color: @blue; // #2B333F default
@red-primary-background-color: red(@primary-background-color);
@green-primary-background-color: green(@primary-background-color);
@blue-primary-background-color: blue(@primary-background-color);
// Try changing to true
$center-big-play-button: true; // true default
@center-big-play-button: true; // true default
/* We're using SCSS vars here because the values are used in multiple places.
Now that font size is set, the following em values will be a multiple of the
new font size. If the font-size is 3em (30px), then setting any of
the following values to 3em would equal 30px. 3 * font-size. */
@big-play-width: 3em;
/* 1.5em = 45px default */
@big-play-height: 1.5em;
.video-js {
/* The base font size controls the size of everything, not just text.
All dimensions use em-based sizes so that the scale along with the font size.
Try increasing it to 15px and see what happens. */
font-size: 10px;
width: 100%;
/* The main font color changes the ICON COLORS as well as the text */
color: $primary-foreground-color;
color: @primary-foreground-color;
}
/* The "Big Play Button" is the play button that shows before the video plays.
@@ -42,40 +55,33 @@ $center-big-play-button: true; // true default
of the button is the center, but there is trend towards moving it to a corner
where it gets out of the way of valuable content in the poster image.*/
.vjs-default-skin .vjs-big-play-button {
/* The font size is what makes the big play button...big.
/* The font size is what makes the big play button...big.
All width/height values use ems, which are a multiple of the font size.
If the .video-js font-size is 10px, then 3em equals 30px.*/
font-size: 3em;
/* We're using SCSS vars here because the values are used in multiple places.
Now that font size is set, the following em values will be a multiple of the
new font size. If the font-size is 3em (30px), then setting any of
the following values to 3em would equal 30px. 3 * font-size. */
$big-play-width: 3em;
/* 1.5em = 45px default */
$big-play-height: 1.5em;
line-height: $big-play-height;
height: $big-play-height;
width: $big-play-width;
line-height: @big-play-height;
height: @big-play-height;
width: @big-play-width;
/* 0.06666em = 2px default */
border: 0.06666em solid $primary-foreground-color;
border: 0.06666em solid @primary-foreground-color;
/* 0.3em = 9px default */
border-radius: 0.3em;
@if $center-big-play-button {
}
.vjs-default-skin .vjs-big-play-button when (@center-big-play-button = true) {
/* Align center */
left: 50%;
top: 50%;
margin-left: -($big-play-width / 2);
margin-top: -($big-play-height / 2);
} @else {
margin-left: -(@big-play-width / 2);
margin-top: -(@big-play-height / 2);
}
.vjs-default-skin .vjs-big-play-button when not (@center-big-play-button = true) {
/* Align top left. 0.5em = 15px default */
left: 0.5em;
top: 0.5em;
}
}
/* The default color of control backgrounds is mostly black but with a little
bit of blue so it can still be seen on all-black video frames, which are common. */
@@ -83,19 +89,22 @@ $center-big-play-button: true; // true default
.video-js .vjs-big-play-button,
.video-js .vjs-menu-button .vjs-menu-content {
/* IE8 - has no alpha support */
background-color: $primary-background-color;
background-color: @primary-background-color;
/* Opacity: 1.0 = 100%, 0.0 = 0% */
background-color: rgba($primary-background-color, 0.7);
background-color: rgba(@red-primary-background-color, @green-primary-background-color, @blue-primary-background-color, 0.7);
}
// Make a slightly lighter version of the main background
// for the slider background.
$slider-bg-color: lighten($primary-background-color, 33%);
@slider-bg-color: lighten(rgb(@red-primary-background-color, @green-primary-background-color, @blue-primary-background-color), 33%);
@red-slider-bg-color: red(@slider-bg-color);
@green-slider-bg-color: green(@slider-bg-color);
@blue-slider-bg-color: blue(@slider-bg-color);
/* Slider - used for Volume bar and Progress bar */
.video-js .vjs-slider {
background-color: $slider-bg-color;
background-color: rgba($slider-bg-color, 0.5);
background-color: @slider-bg-color;
background-color: rgba(@red-slider-bg-color, @green-slider-bg-color, @blue-slider-bg-color, 0.5);
}
/* The slider bar color is used for the progress bar and the volume bar
@@ -103,24 +112,36 @@ $slider-bg-color: lighten($primary-background-color, 33%);
.video-js .vjs-volume-level,
.video-js .vjs-play-progress,
.video-js .vjs-slider-bar {
background: $primary-foreground-color;
background: @primary-foreground-color;
}
/* The main progress bar also has a bar that shows how much has been loaded. */
.video-js .vjs-load-progress {
/* For IE8 we'll lighten the color */
background: lighten($slider-bg-color, 25%);
background: lighten(rgb(@red-slider-bg-color, @green-slider-bg-color, @blue-slider-bg-color), 25%);
/* Otherwise we'll rely on stacked opacities */
background: rgba($slider-bg-color, 0.5);
background: rgba(@red-slider-bg-color, @green-slider-bg-color, @blue-slider-bg-color, 0.5);
}
/* The load progress bar also has internal divs that represent
smaller disconnected loaded time ranges */
.video-js .vjs-load-progress div {
/* For IE8 we'll lighten the color */
background: lighten($slider-bg-color, 50%);
background: lighten(rgb(@red-slider-bg-color, @green-slider-bg-color, @blue-slider-bg-color), 50%);
/* Otherwise we'll rely on stacked opacities */
background: rgba($slider-bg-color, 0.75);
background: rgba(@red-slider-bg-color, @green-slider-bg-color, @blue-slider-bg-color, 0.75);
}
:not(.vjs-has-started) .vjs-control-bar {
display: flex;
}
.vjs-audio .vjs-big-play-button {
display: none;
}
.vjs-audio.audio-player-dimensions {
height: 30px;
}