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

feat: tweaks to markers logic and design

Browse Source
This commit is contained in:
Sam Potts
2022-04-18 20:15:23 +10:00
parent 565b68a5e2
commit 1d4869beee
11 changed files with 127 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
src/sass/components/markers.scss
View File

@ -1,57 +0,0 @@
// --------------------------------------------------------------
// Markers
// --------------------------------------------------------------
.plyr__marker__points {
width: $plyr-range-track-height;
height: $plyr-range-track-height;
border-radius: $plyr-range-track-height;
background-color: #fff;
position: absolute;
top: 50%;
margin-top: calc((#{$plyr-range-track-height} / 2) * -1);
margin-left: calc((#{$plyr-range-track-height} / 2) * -1);
z-index: 3;
}
.plyr__marker__tip {
background: $plyr-markers-background;
border-radius: $plyr-markers-radius;
bottom: 100%;
box-shadow: $plyr-markers-shadow;
color: $plyr-markers-color;
font-size: $plyr-font-size-small;
font-weight: $plyr-font-weight-regular;
left: 50%;
line-height: 1.3;
margin-bottom: calc(#{$plyr-markers-padding} * 2);
opacity: 0;
padding: $plyr-markers-padding calc(#{$plyr-markers-padding} * 1.5);
pointer-events: none;
position: absolute;
transform: translate(-50%, 10px) scale(0.8);
transform-origin: 50% 100%;
transition: transform 0.2s 0.1s ease, opacity 0.2s 0.1s ease;
white-space: nowrap;
z-index: 2;
// The background triangle
&::before {
border-left: $plyr-markers-arrow-size solid transparent;
border-right: $plyr-markers-arrow-size solid transparent;
border-top: $plyr-markers-arrow-size solid $plyr-markers-background;
bottom: calc(#{$plyr-markers-arrow-size} * -1);
content: '';
height: 0;
left: 50%;
position: absolute;
transform: translateX(-50%);
width: 0;
z-index: 2;
}
}
.plyr__marker__tip--visible {
opacity: 1;
transform: translate(-50%, 0) scale(1);
z-index: 3;
}

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

@ -24,8 +24,10 @@ $plyr-progress-offset: $plyr-range-thumb-height;
// Seek tooltip to show time
.plyr__tooltip {
font-size: $plyr-font-size-time;
left: 0;
max-width: 120px;
overflow-wrap: break-word;
white-space: normal;
}
}
@ -92,3 +94,15 @@ $plyr-progress-offset: $plyr-range-thumb-height;
.plyr--audio.plyr--loading .plyr__progress__buffer {
background-color: $plyr-audio-progress-buffered-background;
}
// Markers
.plyr__progress__marker {
background-color: $plyr-progress-marker-background;
border-radius: 1px;
height: $plyr-range-track-height;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
width: $plyr-progress-marker-width;
z-index: 3;
}

15
src/sass/plugins/preview-thumbnails/index.scss
View File

@ -6,12 +6,12 @@
.plyr__preview-thumb {
background-color: $plyr-preview-background;
border-radius: 3px;
border-radius: $plyr-preview-radius;
bottom: 100%;
box-shadow: $plyr-preview-shadow;
margin-bottom: calc(#{$plyr-preview-padding} * 2);
opacity: 0;
padding: $plyr-preview-radius;
padding: 3px;
pointer-events: none;
position: absolute;
transform: translate(0, 10px) scale(0.8);
@ -59,19 +59,20 @@
// Seek time text
&__time-container {
bottom: $plyr-preview-time-bottom-offset;
background: $plyr-preview-time-container-background;
border-bottom-left-radius: calc(#{$plyr-preview-radius} - 1px);
border-bottom-right-radius: calc(#{$plyr-preview-radius} - 1px);
bottom: 0;
left: 0;
line-height: 1.1;
padding: $plyr-preview-time-container-padding;
position: absolute;
right: 0;
white-space: nowrap;
z-index: 3;
span {
background-color: $plyr-preview-time-background;
border-radius: calc(#{$plyr-preview-radius} - 1px);
color: $plyr-preview-time-color;
font-size: $plyr-preview-time-font-size;
padding: $plyr-preview-time-padding;
}
}
}

12
src/sass/plugins/preview-thumbnails/settings.scss
View File

@ -4,12 +4,14 @@
$plyr-preview-padding: $plyr-tooltip-padding !default;
$plyr-preview-background: $plyr-tooltip-background !default;
$plyr-preview-radius: $plyr-tooltip-radius !default;
$plyr-preview-radius: 6px !default;
$plyr-preview-shadow: $plyr-tooltip-shadow !default;
$plyr-preview-arrow-size: $plyr-tooltip-arrow-size !default;
$plyr-preview-image-background: $plyr-color-gray-200 !default;
$plyr-preview-time-font-size: $plyr-font-size-time !default;
$plyr-preview-time-padding: 3px 6px !default;
$plyr-preview-time-background: rgba(0, 0, 0, 0.55);
$plyr-preview-time-container-background: var(
--plyr-video-controls-background,
linear-gradient(rgba(#000, 0), rgba(#000, 0.75))
) !default;
$plyr-preview-time-container-padding: 20px 6px 6px !default;
$plyr-preview-time-color: #fff;
$plyr-preview-time-bottom-offset: 6px;
$plyr-preview-time-font-size: $plyr-font-size-time !default;

2
src/sass/plyr.scss
View File

@ -20,7 +20,6 @@ $css-vars-use-native: true;
@import 'settings/progress';
@import 'settings/sliders';
@import 'settings/tooltips';
@import 'settings/markers';
@import 'lib/animation';
@import 'lib/functions';
@import 'lib/mixins';
@ -36,7 +35,6 @@ $css-vars-use-native: true;
@import 'components/tooltips';
@import 'components/progress';
@import 'components/volume';
@import 'components/markers';
@import 'types/audio';
@import 'types/video';
@import 'states/fullscreen';

11
src/sass/settings/markers.scss
View File

@ -1,11 +0,0 @@
// ==========================================================================
// Markers
// ==========================================================================
$plyr-markers-background: var(--plyr-markers-background, rgba(#fff, 0.9)) !default;
$plyr-markers-color: var(--plyr-markers-color, $plyr-color-gray-700) !default;
$plyr-markers-padding: calc(#{$plyr-control-spacing} / 2);
$plyr-markers-padding: var(--plyr-markers-padding, $plyr-markers-padding) !default;
$plyr-markers-arrow-size: var(--plyr-markers-arrow-size, 4px) !default;
$plyr-markers-radius: var(--plyr-markers-radius, 3px) !default;
$plyr-markers-shadow: var(--plyr-markers-shadow, 0 1px 2px rgba(0, 0, 0, 0.15)) !default;

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

@ -6,6 +6,10 @@
$plyr-progress-loading-size: var(--plyr-progress-loading-size, 25px) !default;
$plyr-progress-loading-background: var(--plyr-progress-loading-background, rgba($plyr-color-gray-900, 0.6)) !default;
// Markers
$plyr-progress-marker-background: var(--plyr-progress-marker-background, #fff) !default;
$plyr-progress-marker-width: var(--plyr-progress-marker-width, 3px) !default;
// Buffered
$plyr-video-progress-buffered-background: var(--plyr-video-progress-buffered-background, rgba(#fff, 0.25)) !default;
$plyr-audio-progress-buffered-background: var(