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

Optimization progress bar style

Browse Source
This commit is contained in:
Harvey committed 2021-11-30 09:39:42 +08:00
1 parent 220fb06dcd
commit 9510eaf0b8
8 files changed
+49 -66
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/artplayer/src/control/progress.js
+13 -31
View File
@@ -1,20 +1,9 @@
import {
append,
clamp,
secondToTime,
setStyle,
setStyles,
getStyle,
query,
addClass,
removeClass,
includeFromEvent,
} from '../utils';
import { query, clamp, append, setStyle, setStyles, secondToTime, includeFromEvent } from '../utils';
export function getPosFromEvent(art, event) {
const {
template: { $progress },
player,
template: { $progress },
} = art;
const { left } = $progress.getBoundingClientRect();
@@ -41,7 +30,7 @@ export default function progress(option) {
<div class="art-progress-played"></div>
<div class="art-progress-highlight"></div>
<div class="art-progress-indicator"></div>
<div class="art-progress-tip art-tip"></div>
<div class="art-progress-tip"></div>
</div>
`,
mounted: ($control) => {
@@ -53,24 +42,23 @@ export default function progress(option) {
const $tip = query('.art-progress-tip', $control);
setStyle($played, 'backgroundColor', theme);
let indicatorSize = 14;
if (icons.indicator) {
indicatorSize = 16;
append($indicator, icons.indicator);
setStyles($indicator, {
top: '-6px',
left: '-8px',
width: '16px',
height: '16px',
});
} else {
setStyles($indicator, {
top: '-5px',
left: '-7px',
width: '14px',
height: '14px',
backgroundColor: theme,
});
}
setStyles($indicator, {
left: `-${indicatorSize / 2}px`,
width: `${indicatorSize}px`,
height: `${indicatorSize}px`,
});
function showHighlight(event) {
const { width } = getPosFromEvent(art, event);
const { text } = event.target.dataset;
@@ -105,11 +93,7 @@ export default function progress(option) {
if (type === 'played') {
setStyle($played, 'width', `${percentage * 100}%`);
setStyle(
$indicator,
'left',
`calc(${percentage * 100}% - ${getStyle($indicator, 'width') / 2}px)`,
);
setStyle($indicator, 'left', `calc(${percentage * 100}% - ${indicatorSize / 2}px)`);
}
}
@@ -163,7 +147,6 @@ export default function progress(option) {
proxy(document, 'mousemove', (event) => {
if (isDroging) {
const { second, percentage } = getPosFromEvent(art, event);
addClass($indicator, 'art-show-indicator');
setBar('played', percentage);
player.seek = second;
}
@@ -172,7 +155,6 @@ export default function progress(option) {
proxy(document, 'mouseup', () => {
if (isDroging) {
isDroging = false;
removeClass($indicator, 'art-show-indicator');
}
});
},
packages/artplayer/src/style/bottom.scss
+18 -15
View File
@@ -17,6 +17,7 @@
.art-progress {
position: relative;
pointer-events: auto;
.art-control-progress {
position: relative;
display: flex;
@@ -26,10 +27,13 @@
cursor: pointer;
.art-control-progress-inner {
display: flex;
align-items: center;
position: relative;
height: 50%;
width: 100%;
background: rgba(255, 255, 255, 0.2);
.art-progress-loaded {
position: absolute;
z-index: 10;
@@ -76,12 +80,14 @@
}
.art-progress-indicator {
display: none;
visibility: hidden;
align-items: center;
justify-content: center;
position: absolute;
z-index: 40;
border-radius: 50%;
transform: scale(0.1, 0.1);
transition: all 0.1s ease-in-out;
.art-icon {
width: 100%;
@@ -89,10 +95,6 @@
pointer-events: none;
user-select: none;
}
&.art-show-indicator {
display: flex;
}
}
.art-progress-tip {
@@ -113,16 +115,6 @@
white-space: nowrap;
}
}
&:hover {
.art-control-progress-inner {
height: 100%;
.art-progress-indicator,
.art-progress-tip {
display: flex;
}
}
}
}
.art-control-thumbnails {
@@ -273,6 +265,17 @@
}
}
}
&:hover {
.art-progress .art-control-progress .art-control-progress-inner {
height: 100%;
.art-progress-indicator {
transform: scale(1, 1);
visibility: visible;
transition: all 0.1s ease-in-out;
}
}
}
}
&.art-control-show,