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

Optimize setBar event and update chapter display in artplayer-plugin-chapter

Browse Source
This commit is contained in:
Harvey Zack committed 2024-06-03 00:35:47 +08:00
1 parent 94e34320e0
commit 2e72e0cec2
4 files changed
+69 -61
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/artplayer-plugin-chapter/src/index.js
+33 -30
View File
@@ -1,6 +1,6 @@
import style from 'bundle-text:./style.less';
export default function artplayerPluginChapter({ chapters = [] }) {
export default function artplayerPluginChapter(option = {}) {
return (art) => {
const { $player } = art.template;
const { setStyle, append, clamp, query, isMobile, addClass, removeClass } = art.constructor.utils;
@@ -35,6 +35,36 @@ export default function artplayerPluginChapter({ chapters = [] }) {
}
}
function update(chapters = []) {
$control.innerText = '';
$chapters = chapters.map((chapter) => {
const $chapter = append($control, html);
const start = clamp(chapter.start, 0, art.duration);
const end = clamp(chapter.end, 0, art.duration);
const duration = end - start;
const percentage = duration / art.duration;
$chapter.dataset.start = start;
$chapter.dataset.end = end;
$chapter.dataset.duration = duration;
$chapter.dataset.title = chapter.title.trim();
$chapter.style.width = `${percentage * 100}%`;
return {
$chapter,
$hover: query('.art-progress-hover', $chapter),
$loaded: query('.art-progress-loaded', $chapter),
$played: query('.art-progress-played', $chapter),
};
});
if ($chapters.length) {
addClass($player, 'artplayer-plugin-chapter');
} else {
removeClass($player, 'artplayer-plugin-chapter');
}
}
art.on('setBar', (type, percentage, event) => {
if (!$chapters.length) return;
@@ -97,38 +127,11 @@ export default function artplayerPluginChapter({ chapters = [] }) {
});
}
art.on('video:loadedmetadata', () => {
$control.innerText = '';
$chapters = chapters.map((chapter) => {
const $chapter = append($control, html);
const start = clamp(chapter.start, 0, art.duration);
const end = clamp(chapter.end, 0, art.duration);
const duration = end - start;
const percentage = duration / art.duration;
$chapter.dataset.start = start;
$chapter.dataset.end = end;
$chapter.dataset.duration = duration;
$chapter.dataset.title = chapter.title.trim();
$chapter.style.width = `${percentage * 100}%`;
return {
$chapter,
$hover: query('.art-progress-hover', $chapter),
$loaded: query('.art-progress-loaded', $chapter),
$played: query('.art-progress-played', $chapter),
};
});
if ($chapters.length) {
addClass($player, 'artplayer-plugin-chapter');
} else {
removeClass($player, 'artplayer-plugin-chapter');
}
});
art.once('video:loadedmetadata', () => update(option.chapters));
return {
name: 'artplayerPluginChapter',
update: (chapters) => update(chapters),
};
};
}