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

Optimize setBar event and add lazy loading for thumbnails in artplayer-plugin-chapter

Browse Source
This commit is contained in:
Harvey Zack committed 2024-06-02 23:55:20 +08:00
1 parent d99fa9447a
commit e8d7ae91f0
3 files changed
+63 -58
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 -33
View File
@@ -15,6 +15,7 @@ export default function artplayerPluginChapter({ chapters = [] }) {
</div>
`;
let titleTimer = null;
let $chapters = [];
const $progress = art.query('.art-control-progress');
@@ -22,18 +23,21 @@ export default function artplayerPluginChapter({ chapters = [] }) {
const $control = append($inner, '<div class="art-chapters"></div>');
const $title = append($inner, '<div class="art-chapter-title"></div>');
art.on('setBar', (type, percentage) => {
function showTitle({ $chapter, width }) {
$title.innerText = $chapter.dataset.title || '';
const titleWidth = $title.clientWidth;
if (width <= titleWidth / 2) {
setStyle($title, 'left', 0);
} else if (width > $inner.clientWidth - titleWidth / 2) {
setStyle($title, 'left', `${$inner.clientWidth - titleWidth}px`);
} else {
setStyle($title, 'left', `${width - titleWidth / 2}px`);
}
}
art.on('setBar', (type, percentage, event) => {
if (!$chapters.length) return;
const currentTime = art.duration * percentage;
const index = $chapters.findIndex(({ $chapter }) => {
const start = parseFloat($chapter.dataset.start);
const end = parseFloat($chapter.dataset.end);
return art.currentTime >= start && art.currentTime <= end;
});
if (index === -1) return;
for (let i = 0; i < $chapters.length; i++) {
const { $chapter, $loaded, $played, $hover } = $chapters[i];
@@ -45,6 +49,8 @@ export default function artplayerPluginChapter({ chapters = [] }) {
if (!$target) return;
const width = $control.clientWidth * percentage;
const currentTime = art.duration * percentage;
const duration = parseFloat($chapter.dataset.duration);
const start = parseFloat($chapter.dataset.start);
const end = parseFloat($chapter.dataset.end);
@@ -60,35 +66,29 @@ export default function artplayerPluginChapter({ chapters = [] }) {
if (currentTime >= start && currentTime <= end) {
const percentage = (currentTime - start) / duration;
setStyle($target, 'width', `${percentage * 100}%`);
if (isMobile) {
if (type === 'played' && event) {
showTitle({ $chapter, width });
setStyle($title, 'display', 'flex');
clearTimeout(titleTimer);
titleTimer = setTimeout(() => {
setStyle($title, 'display', 'none');
}, 1000);
}
} else {
if (type === 'hover') {
showTitle({ $chapter, width });
}
}
}
}
});
function showTitle(event) {
const $target = event.target.closest('.art-chapter');
if ($target) {
setStyle($title, 'display', 'flex');
$title.innerText = $target.dataset.title || '';
const { left } = $inner.getBoundingClientRect();
const eventLeft = isMobile ? event.touches[0].clientX : event.clientX;
const width = clamp(eventLeft - left, 0, $inner.clientWidth);
const titleWidth = $title.clientWidth;
if (width <= titleWidth / 2) {
setStyle($title, 'left', 0);
} else if (width > $inner.clientWidth - titleWidth / 2) {
setStyle($title, 'left', `${$inner.clientWidth - titleWidth}px`);
} else {
setStyle($title, 'left', `${width - titleWidth / 2}px`);
}
} else {
setStyle($title, 'display', 'none');
}
}
if (!isMobile) {
art.proxy($progress, 'mousemove', (event) => {
art.proxy($progress, 'mousemove', () => {
if (!$chapters.length) return;
showTitle(event);
setStyle($title, 'display', 'flex');
});
art.proxy($progress, 'mouseleave', () => {