ProximaEntertainment/plyr
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'develop' into css-variables

Browse Source 
# Conflicts:
#	.eslintrc
#	demo/dist/demo.css
#	demo/dist/demo.js
#	demo/dist/demo.min.js
#	demo/dist/demo.min.js.map
#	dist/plyr.css
#	dist/plyr.js
#	dist/plyr.min.js
#	dist/plyr.min.js.map
#	dist/plyr.min.mjs
#	dist/plyr.min.mjs.map
#	dist/plyr.mjs
#	dist/plyr.polyfilled.js
#	dist/plyr.polyfilled.min.js
#	dist/plyr.polyfilled.min.js.map
#	dist/plyr.polyfilled.min.mjs
#	dist/plyr.polyfilled.min.mjs.map
#	dist/plyr.polyfilled.mjs
#	gulpfile.js
#	package.json
This commit is contained in:
Sam Potts
2019-06-01 19:55:14 +10:00
parent 996075decc 0249772f01
commit 12c6282d14
52 changed files with 15300 additions and 8732 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
src/sass/components/controls.scss
View File

@ -12,44 +12,49 @@
align-items: center;
display: flex;
justify-content: flex-end;
min-width: 0; // Fix for Edge issue where content would overflow
text-align: center;
.plyr__progress__container {
flex: 1;
}
// Spacing
> .plyr__control,
.plyr__progress,
.plyr__time,
.plyr__menu,
.plyr__volume {
margin-left: ($plyr-control-spacing / 2);
}
.plyr__controls__item {
margin-left: ($plyr-control-spacing / 4);
.plyr__menu + .plyr__control,
> .plyr__control + .plyr__menu,
> .plyr__control + .plyr__control,
.plyr__progress + .plyr__control {
margin-left: floor($plyr-control-spacing / 4);
}
&:first-child {
margin-left: 0;
margin-right: auto;
}
> .plyr__control:first-child,
> .plyr__control:first-child + [data-plyr='pause'] {
margin-left: 0;
margin-right: auto;
&.plyr__progress__container {
padding-left: ($plyr-control-spacing / 4);
}
&.plyr__time {
padding: 0 ($plyr-control-spacing / 2);
}
&.plyr__progress__container:first-child,
&.plyr__time:first-child,
&.plyr__time + .plyr__time {
padding-left: 0;
}
&.plyr__volume {
padding-right: ($plyr-control-spacing / 2);
}
&.plyr__volume:first-child {
padding-right: 0;
}
}
// Hide empty controls
&:empty {
display: none;
}
@media (min-width: $plyr-bp-sm) {
> .plyr__control,
.plyr__menu,
.plyr__progress,
.plyr__time,
.plyr__volume {
margin-left: $plyr-control-spacing;
}
}
}
// Audio controls
@ -62,10 +67,7 @@
// Video controls
.plyr--video .plyr__controls {
background: linear-gradient(
rgba($plyr-video-controls-bg, 0),
rgba($plyr-video-controls-bg, 0.7)
);
background: linear-gradient(rgba($plyr-video-controls-bg, 0), rgba($plyr-video-controls-bg, 0.7));
border-bottom-left-radius: inherit;
border-bottom-right-radius: inherit;
bottom: 0;

36
src/sass/components/embed.scss
View File

@ -1,36 +0,0 @@
// --------------------------------------------------------------
// Embedded players
// YouTube, Vimeo, etc
// --------------------------------------------------------------
// Default to 16:9 ratio but this is set by JavaScript based on config
$embed-padding: ((100 / 16) * 9);
.plyr__video-embed {
height: 0;
padding-bottom: to-percentage($embed-padding);
position: relative;
iframe {
border: 0;
height: 100%;
left: 0;
position: absolute;
top: 0;
user-select: none;
width: 100%;
}
}
// If the full custom UI is supported
.plyr--full-ui .plyr__video-embed {
$height: 240;
$offset: to-percentage(($height - $embed-padding) / ($height / 50));
// Only used for Vimeo
> .plyr__video-embed__container {
padding-bottom: to-percentage($height);
position: relative;
transform: translateY(-$offset);
}
}

15
src/sass/components/progress.scss
View File

@ -2,18 +2,19 @@
// Playback progress
// --------------------------------------------------------------
// Offset the range thumb in order to be able to calculate the relative progress (#954)
$plyr-progress-offset: $plyr-range-thumb-height;
.plyr__progress {
flex: 1;
left: $plyr-range-thumb-height / 2;
margin-right: $plyr-range-thumb-height;
left: $plyr-progress-offset / 2;
margin-right: $plyr-progress-offset;
position: relative;
input[type='range'],
&__buffer {
margin-left: -($plyr-range-thumb-height / 2);
margin-right: -($plyr-range-thumb-height / 2);
// Offset the range thumb in order to be able to calculate the relative progress (#954)
width: calc(100% + #{$plyr-range-thumb-height});
margin-left: -($plyr-progress-offset / 2);
margin-right: -($plyr-progress-offset / 2);
width: calc(100% + #{$plyr-progress-offset});
}
input[type='range'] {

33
src/sass/components/video.scss
View File

@ -20,3 +20,36 @@
// Require z-index to force border-radius
z-index: 0;
}
// Default to 16:9 ratio but this is set by JavaScript based on config
$embed-padding: ((100 / 16) * 9);
.plyr__video-embed,
.plyr__video-wrapper--fixed-ratio {
height: 0;
padding-bottom: to-percentage($embed-padding);
}
.plyr__video-embed iframe,
.plyr__video-wrapper--fixed-ratio video {
border: 0;
height: 100%;
left: 0;
position: absolute;
top: 0;
user-select: none;
width: 100%;
}
// If the full custom UI is supported
.plyr--full-ui .plyr__video-embed {
$height: 240;
$offset: to-percentage(($height - $embed-padding) / ($height / 50));
// Only used for Vimeo
> .plyr__video-embed__container {
padding-bottom: to-percentage($height);
position: relative;
transform: translateY(-$offset);
}
}

1
src/sass/plyr.scss
View File

@ -32,7 +32,6 @@ $css-vars-use-native: true;
@import 'components/captions';
@import 'components/control';
@import 'components/controls';
@import 'components/embed';
@import 'components/menus';
@import 'components/sliders';
@import 'components/poster';