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

Merge branch 'develop' into css-variables

Browse Source 
# Conflicts:
#	demo/dist/demo.css
#	demo/index.html
#	dist/plyr.css
#	gulpfile.js
#	package.json
#	yarn.lock
This commit is contained in:
Sam Potts
2019-03-16 12:14:20 +11:00
parent bdd513635f c202551e6d
commit 35f7ee9c59
56 changed files with 24998 additions and 14943 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -42,13 +42,13 @@
&::-webkit-progress-bar {
background: transparent;
transition: width 0.2s ease;
}
&::-webkit-progress-value {
background: currentColor;
border-radius: 100px;
min-width: $plyr-range-track-height;
transition: width 0.2s ease;
}
// Mozilla

5
src/sass/lib/mixins.scss
View File

@ -69,11 +69,6 @@
width: 100%;
}
.plyr__video-embed {
// Revert overflow change
overflow: visible;
}
// Vimeo requires some different styling
&.plyr--vimeo .plyr__video-wrapper {
height: 0;

118
src/sass/plugins/previewThumbnails.scss Normal file
View File

@ -0,0 +1,118 @@
// --------------------------------------------------------------
// Preview Thumbnails
// --------------------------------------------------------------
$plyr-preview-padding: $plyr-tooltip-padding !default;
$plyr-preview-bg: $plyr-tooltip-bg !default;
$plyr-preview-radius: $plyr-tooltip-radius !default;
$plyr-preview-shadow: $plyr-tooltip-shadow !default;
$plyr-preview-arrow-size: $plyr-tooltip-arrow-size !default;
$plyr-preview-image-bg: $plyr-color-heather !default;
$plyr-preview-time-font-size: $plyr-font-size-time !default;
$plyr-preview-time-padding: 3px 6px !default;
$plyr-preview-time-bg: rgba(0, 0, 0, 0.55);
$plyr-preview-time-color: #fff;
$plyr-preview-time-bottom-offset: 6px;
.plyr__preview-thumb {
background-color: $plyr-preview-bg;
border-radius: 3px;
bottom: 100%;
box-shadow: $plyr-preview-shadow;
margin-bottom: $plyr-preview-padding * 2;
opacity: 0;
padding: $plyr-preview-radius;
pointer-events: none;
position: absolute;
transform: translate(0, 10px) scale(0.8);
transform-origin: 50% 100%;
transition: transform 0.2s 0.1s ease, opacity 0.2s 0.1s ease;
z-index: 2;
&--is-shown {
opacity: 1;
transform: translate(0, 0) scale(1);
}
// The background triangle
&::before {
border-left: $plyr-preview-arrow-size solid transparent;
border-right: $plyr-preview-arrow-size solid transparent;
border-top: $plyr-preview-arrow-size solid $plyr-preview-bg;
bottom: -$plyr-preview-arrow-size;
content: '';
height: 0;
left: 50%;
position: absolute;
transform: translateX(-50%);
width: 0;
z-index: 2;
}
&__image-container {
background: $plyr-preview-image-bg;
border-radius: ($plyr-preview-radius - 1px);
overflow: hidden;
position: relative;
z-index: 0;
img {
height: 100%; // Non sprite images are 100%. Sprites will have their size applied by JavaScript
left: 0;
max-height: none;
max-width: none;
position: absolute;
top: 0;
width: 100%;
}
}
// Seek time text
&__time-container {
bottom: $plyr-preview-time-bottom-offset;
left: 0;
position: absolute;
right: 0;
white-space: nowrap;
z-index: 3;
span {
background-color: $plyr-preview-time-bg;
border-radius: ($plyr-preview-radius - 1px);
color: $plyr-preview-time-color;
font-size: $plyr-preview-time-font-size;
padding: $plyr-preview-time-padding;
}
}
}
.plyr__preview-scrubbing {
bottom: 0;
filter: blur(1px);
height: 100%;
left: 0;
margin: auto; // Required when video is different dimensions to container (e.g. fullscreen)
opacity: 0;
overflow: hidden;
position: absolute;
right: 0;
top: 0;
transition: opacity 0.3s ease;
width: 100%;
z-index: 1;
&--is-shown {
opacity: 1;
}
img {
height: 100%;
left: 0;
max-height: none;
max-width: none;
object-fit: contain;
position: absolute;
top: 0;
width: 100%;
}
}

1
src/sass/plyr.scss
View File

@ -45,6 +45,7 @@ $css-vars-use-native: true;
@import 'states/fullscreen';
@import 'plugins/ads';
@import 'plugins/previewThumbnails';
@import 'utils/animation';
@import 'utils/hidden';

4
src/sass/settings/sliders.scss
View File

@ -6,13 +6,13 @@
$plyr-range-thumb-active-shadow-width: 3px !default;
// Thumb
$plyr-range-thumb-height: 14px !default;
$plyr-range-thumb-height: 13px !default;
$plyr-range-thumb-bg: #fff !default;
$plyr-range-thumb-border: 2px solid transparent !default;
$plyr-range-thumb-shadow: 0 1px 1px rgba(#000, 0.15), 0 0 0 1px rgba($plyr-color-gunmetal, 0.2) !default;
// Track
$plyr-range-track-height: 4px !default;
$plyr-range-track-height: 5px !default;
$plyr-range-max-height: ($plyr-range-thumb-active-shadow-width * 2) + $plyr-range-thumb-height !default;
// Fill