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

feat: Optimize setBar event and add artplayerPluginChapter plugin

Browse Source
This commit is contained in:
Harvey Zack committed 2024-06-02 22:09:58 +08:00
1 parent 570c1611d3
commit 0e58ce8cd9
4 files changed
+39 -28
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/artplayer-plugin-chapter/src/index.js
+34 -28
View File
@@ -3,7 +3,7 @@ import style from 'bundle-text:./style.less';
export default function artplayerPluginChapter({ chapters = [] }) {
return (art) => {
const { $player } = art.template;
const { setStyle, append, clamp, query, isMobile, addClass } = art.constructor.utils;
const { setStyle, append, clamp, query, isMobile, addClass, removeClass } = art.constructor.utils;
const html = `
<div class="art-chapter">
@@ -17,36 +17,15 @@ export default function artplayerPluginChapter({ chapters = [] }) {
let $chapters = [];
addClass($player, 'artplayer-plugin-chapter');
const $progress = art.query('.art-control-progress');
const $inner = art.query('.art-control-progress-inner');
const $control = append($inner, '<div class="art-chapters"></div>');
const $title = append($inner, '<div class="art-chapter-title"></div>');
function showText(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');
}
}
art.on('setBar', (type, percentage) => {
const currentTime = art.duration * percentage;
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);
@@ -79,22 +58,43 @@ export default function artplayerPluginChapter({ chapters = [] }) {
}
if (currentTime >= start && currentTime <= end) {
const _percentage = (currentTime - start) / duration;
setStyle($target, 'width', `${_percentage * 100}%`);
const percentage = (currentTime - start) / duration;
setStyle($target, 'width', `${percentage * 100}%`);
}
}
});
art.proxy($progress, 'mousemove', (event) => {
showText(event);
if (!$chapters.length) return;
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');
}
});
art.proxy($progress, 'mouseleave', () => {
if (!$chapters.length) return;
setStyle($title, 'display', 'none');
});
art.on('video:loadedmetadata', () => {
$control.innerHTML = '';
$control.innerText = '';
$chapters = chapters.map((chapter) => {
const $chapter = append($control, html);
const start = clamp(chapter.start, 0, art.duration);
@@ -114,6 +114,12 @@ export default function artplayerPluginChapter({ chapters = [] }) {
$played: query('.art-progress-played', $chapter),
};
});
if ($chapters.length) {
addClass($player, 'artplayer-plugin-chapter');
} else {
removeClass($player, 'artplayer-plugin-chapter');
}
});
return {