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

feat: Optimize progress bar and add highlight feature

Browse Source
This commit is contained in:
Harvey Zack committed 2024-06-08 17:38:41 +08:00
1 parent e2a40e67a0
commit 744913b0bf
3 files changed
+53 -50
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/artplayer/src/control/progress.js
+24 -22
View File
@@ -84,7 +84,19 @@ export default function progress(options) {
}
}
function updateHighlight() {
$highlight.innerText = '';
for (let index = 0; index < option.highlight.length; index++) {
const item = option.highlight[index];
const left = (clamp(item.time, 0, art.duration) / art.duration) * 100;
const html = `<span data-text="${item.text}" data-time="${item.time}" style="left: ${left}%"></span>`;
append($highlight, html);
}
}
function setBar(type, percentage, event) {
const isMobileDroging = type === 'played' && event && isMobile;
if (type === 'loaded') {
setStyle($loaded, 'width', `${percentage * 100}%`);
}
@@ -96,32 +108,22 @@ export default function progress(options) {
if (type === 'played') {
setStyle($played, 'width', `${percentage * 100}%`);
setStyle($indicator, 'left', `${percentage * 100}%`);
}
if (isMobile && event) {
setStyle($tip, 'display', 'flex');
const width = $control.clientWidth * percentage;
const time = secondToTime(percentage * art.duration);
showTime(event, { width, time });
clearTimeout(tipTimer);
tipTimer = setTimeout(() => {
setStyle($tip, 'display', 'none');
}, 500);
}
if (isMobileDroging) {
setStyle($tip, 'display', 'flex');
const width = $control.clientWidth * percentage;
const time = secondToTime(percentage * art.duration);
showTime(event, { width, time });
clearTimeout(tipTimer);
tipTimer = setTimeout(() => {
setStyle($tip, 'display', 'none');
}, 500);
}
}
art.on('video:loadedmetadata', () => {
for (let index = 0; index < option.highlight.length; index++) {
const item = option.highlight[index];
const left = (clamp(item.time, 0, art.duration) / art.duration) * 100;
const html = `<span data-text="${item.text}" data-time="${item.time}" style="left: ${left}%"></span>`;
append($highlight, html);
}
});
art.on('setBar', (type, percentage, event) => {
setBar(type, percentage, event);
});
art.on('setBar', setBar);
art.on('video:loadedmetadata', updateHighlight);
art.on('video:progress', () => {
art.emit('setBar', 'loaded', art.loaded);