x15904151985/ArtPlayer
1
0 Fork 0
mirror of https://github.com/zhw2590582/ArtPlayer.git synced 2026-10-14 00:06: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

docs/uncompiled/artplayer-plugin-chapter/index.js
+27 -25
View File
@@ -148,7 +148,7 @@ parcelHelpers.defineInteropFlag(exports);
parcelHelpers.export(exports, "default", ()=>artplayerPluginChapter);
var _styleLess = require("bundle-text:./style.less");
var _styleLessDefault = parcelHelpers.interopDefault(_styleLess);
function artplayerPluginChapter({ chapters = [] }) {
function artplayerPluginChapter(option = {}) {
return (art)=>{
const { $player } = art.template;
const { setStyle, append, clamp, query, isMobile, addClass, removeClass } = art.constructor.utils;
@@ -174,6 +174,29 @@ function artplayerPluginChapter({ chapters = [] }) {
else if (width > $inner.clientWidth - titleWidth / 2) setStyle($title, "left", `${$inner.clientWidth - titleWidth}px`);
else setStyle($title, "left", `${width - titleWidth / 2}px`);
}
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;
for(let i = 0; i < $chapters.length; i++){
@@ -223,31 +246,10 @@ function artplayerPluginChapter({ chapters = [] }) {
setStyle($title, "display", "none");
});
}
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"
name: "artplayerPluginChapter",
update: (chapters)=>update(chapters)
};
};
}