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

feat: add markers (#2386)

Browse Source 
Co-authored-by: fengshuo <fengshuo@bilibili.com>
This commit is contained in:
ForeverSc
2022-02-12 17:35:52 +08:00
committed by GitHub
parent 01c5428fc4
commit 4632614ced
6 changed files with 161 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -0,0 +1,57 @@
// --------------------------------------------------------------
// 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;
}

2
src/sass/plyr.scss
View File

@ -20,6 +20,7 @@ $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';
@ -35,6 +36,7 @@ $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 Normal file
View File

@ -0,0 +1,11 @@
// ==========================================================================
// 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;