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

feat: Improve chapter display in artplayer-plugin-chapter

Browse Source
This commit is contained in:
Harvey Zack committed 2024-06-02 19:26:33 +08:00
1 parent 2326628b86
commit 41cdde4b79
4 files changed
+42 -31
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/artplayer-plugin-chapter/src/index.js
+13 -11
View File
@@ -6,30 +6,33 @@ export default function artplayerPluginChapter({ chapters = [] }) {
const html = `
<div class="art-chapter">
<div class="art-progress-hover"></div>
<div class="art-progress-loaded"></div>
<div class="art-progress-played"></div>
<div class="art-chapter-inner">
<div class="art-progress-hover"></div>
<div class="art-progress-loaded"></div>
<div class="art-progress-played"></div>
</div>
</div>
`;
let $chapters = [];
const $progress = art.query('.art-control-progress-inner');
const $control = append($progress, '<div class="art-chapters"></div>');
const $title = append($progress, '<div class="art-chapter-title"></div>');
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 } = $progress.getBoundingClientRect();
const { left } = $inner.getBoundingClientRect();
const eventLeft = isMobile ? event.touches[0].clientX : event.clientX;
const width = clamp(eventLeft - left, 0, $progress.clientWidth);
const width = clamp(eventLeft - left, 0, $inner.clientWidth);
const titleWidth = $title.clientWidth;
if (width <= titleWidth / 2) {
setStyle($title, 'left', 0);
} else if (width > $progress.clientWidth - titleWidth / 2) {
setStyle($title, 'left', `${$progress.clientWidth - titleWidth}px`);
} else if (width > $inner.clientWidth - titleWidth / 2) {
setStyle($title, 'left', `${$inner.clientWidth - titleWidth}px`);
} else {
setStyle($title, 'left', `${width - titleWidth / 2}px`);
}
@@ -99,7 +102,6 @@ export default function artplayerPluginChapter({ chapters = [] }) {
$chapter.dataset.end = end;
$chapter.dataset.duration = duration;
$chapter.dataset.title = chapter.title.trim();
$chapter.dataset.percentage = percentage;
$chapter.style.width = `${percentage * 100}%`;
return {
packages/artplayer-plugin-chapter/src/style.less
+15 -8
View File
@@ -21,15 +21,22 @@
transform: scaleY(1.25);
.art-chapter {
position: relative;
cursor: pointer;
height: 50%;
border-radius: 10px;
overflow: hidden;
transition: height var(--art-transition-duration) ease;
background-color: var(--art-progress-color);
display: flex;
align-items: center;
height: 100%;
&:hover {
.art-chapter-inner {
position: relative;
cursor: pointer;
width: 100%;
height: 50%;
border-radius: 10px;
overflow: hidden;
transition: height var(--art-transition-duration) ease;
background-color: var(--art-progress-color);
}
&:hover .art-chapter-inner {
height: 100%;
}
}