x15904151985/ArtPlayer
1
0 Fork 0
mirror of https://github.com/zhw2590582/ArtPlayer.git synced 2026-10-23 05:41:20 -08:00
Code Issues Packages Projects Releases Wiki Activity

改进区间循环UI

Browse Source
This commit is contained in:
Harvey committed 2020-05-18 16:25:24 +08:00
1 parent fcbf9cc3cc
commit de5ac7513e
4 files changed
+18 -23
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/artplayer/src/control/loop.js
+3 -3
View File
@@ -6,12 +6,12 @@ export default function loop(option) {
mounted: ($control) => {
const { player } = art;
const $left = append($control, '<span class="art-loop-left"></span>');
const $right = append($control, '<span class="art-loop-right"></span>');
const $left = append($control, `<span class="art-loop-point"></span>`);
const $right = append($control, `<span class="art-loop-point"></span>`);
art.on('loopAdd', (value) => {
setStyle($control, 'display', 'block');
setStyle($left, 'left', `calc(${(value[0] / player.duration) * 100}% - 6px)`);
setStyle($left, 'left', `calc(${(value[0] / player.duration) * 100}% - ${$left.clientWidth}px)`);
setStyle($right, 'left', `${(value[1] / player.duration) * 100}%`);
});
packages/artplayer/src/style/bottom.scss
+10 -15
View File
@@ -133,25 +133,20 @@
display: none;
position: absolute;
width: 100%;
bottom: 10px;
height: 100%;
left: 0;
top: 0;
right: 0;
bottom: 0;
pointer-events: none;
.art-loop-left {
.art-loop-point {
position: absolute;
left: 0;
width: 0;
height: 0;
border-bottom: 6px solid #fff;
border-left: 6px solid transparent;
}
.art-loop-right {
position: absolute;
left: 0;
width: 0;
height: 0;
border-bottom: 6px solid #fff;
border-right: 6px solid transparent;
top: -2px;
width: 2px;
height: 8px;
background: rgba(255, 255, 255, 0.75);
}
}
}