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: Update chapter title display in artplayer-plugin-chapter

Browse Source
This commit is contained in:
Harvey Zack committed 2024-06-02 19:12:27 +08:00
1 parent 0804d1790b
commit 2326628b86
9 files changed
+70 -58
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

docs/uncompiled/artplayer-plugin-chapter/index.js
+21 -18
View File
@@ -161,7 +161,21 @@ function artplayerPluginChapter({ chapters = [] }) {
let $chapters = [];
const $progress = art.query(".art-control-progress-inner");
const $control = append($progress, '<div class="art-chapters"></div>');
const $text = append($progress, '<div class="art-chapter-text"></div>');
const $title = append($progress, '<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 eventLeft = isMobile ? event.touches[0].clientX : event.clientX;
const width = clamp(eventLeft - left, 0, $progress.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 setStyle($title, "left", `${width - titleWidth / 2}px`);
} else setStyle($title, "display", "none");
}
art.on("setBar", (type, percentage)=>{
const currentTime = art.duration * percentage;
const index = $chapters.findIndex(({ $chapter })=>{
@@ -189,22 +203,11 @@ function artplayerPluginChapter({ chapters = [] }) {
}
}
});
art.proxy($control, "mousemove", (event)=>{
const $target = event.target.closest(".art-chapter");
if ($target) {
setStyle($text, "display", "flex");
$text.innerText = $target.dataset.text || "";
const { left } = $control.getBoundingClientRect();
const eventLeft = isMobile ? event.touches[0].clientX : event.clientX;
const width = clamp(eventLeft - left, 0, $control.clientWidth);
const textWidth = $text.clientWidth;
if (width <= textWidth / 2) setStyle($text, "left", 0);
else if (width > $control.clientWidth - textWidth / 2) setStyle($text, "left", `${$control.clientWidth - textWidth}px`);
else setStyle($text, "left", `${width - textWidth / 2}px`);
} else setStyle($text, "display", "none");
art.proxy($progress, "mousemove", (event)=>{
showText(event);
});
art.proxy($control, "mouseleave", ()=>{
setStyle($text, "display", "none");
art.proxy($progress, "mouseleave", ()=>{
setStyle($title, "display", "none");
});
art.on("video:loadedmetadata", ()=>{
$control.innerHTML = "";
@@ -217,7 +220,7 @@ function artplayerPluginChapter({ chapters = [] }) {
$chapter.dataset.start = start;
$chapter.dataset.end = end;
$chapter.dataset.duration = duration;
$chapter.dataset.text = chapter.text;
$chapter.dataset.title = chapter.title.trim();
$chapter.dataset.percentage = percentage;
$chapter.style.width = `${percentage * 100}%`;
return {
@@ -247,7 +250,7 @@ if (typeof document !== "undefined") {
if (typeof window !== "undefined") window["artplayerPluginChapter"] = artplayerPluginChapter;
},{"bundle-text:./style.less":"8SOjD","@parcel/transformer-js/src/esmodule-helpers.js":"5dUr6"}],"8SOjD":[function(require,module,exports) {
module.exports = ".art-progress .art-control-progress-inner {\n background-color: #0000 !important;\n height: 100% !important;\n}\n\n.art-progress .art-control-progress-inner > .art-progress-hover, .art-progress .art-control-progress-inner > .art-progress-loaded, .art-progress .art-control-progress-inner > .art-progress-played {\n display: none !important;\n}\n\n.art-progress .art-chapters {\n z-index: 0;\n align-items: center;\n gap: 4px;\n height: 100%;\n display: flex;\n position: absolute;\n inset: 0;\n transform: scaleY(1.25);\n}\n\n.art-progress .art-chapters .art-chapter {\n cursor: pointer;\n transition: height var(--art-transition-duration) ease;\n background-color: var(--art-progress-color);\n border-radius: 10px;\n height: 50%;\n position: relative;\n overflow: hidden;\n}\n\n.art-progress .art-chapters .art-chapter:hover {\n height: 100%;\n}\n\n.art-progress .art-chapter-text {\n z-index: 50;\n border-radius: var(--art-border-radius);\n white-space: nowrap;\n background-color: var(--art-tip-background);\n padding: 3px 5px;\n font-size: 16px;\n line-height: 1;\n display: none;\n position: absolute;\n top: -50px;\n left: 0;\n}\n";
module.exports = ".art-progress .art-control-progress-inner {\n background-color: #0000 !important;\n height: 100% !important;\n}\n\n.art-progress .art-control-progress-inner > .art-progress-hover, .art-progress .art-control-progress-inner > .art-progress-loaded, .art-progress .art-control-progress-inner > .art-progress-played {\n display: none !important;\n}\n\n.art-progress .art-chapters {\n z-index: 0;\n align-items: center;\n gap: 4px;\n height: 100%;\n display: flex;\n position: absolute;\n inset: 0;\n transform: scaleY(1.25);\n}\n\n.art-progress .art-chapters .art-chapter {\n cursor: pointer;\n transition: height var(--art-transition-duration) ease;\n background-color: var(--art-progress-color);\n border-radius: 10px;\n height: 50%;\n position: relative;\n overflow: hidden;\n}\n\n.art-progress .art-chapters .art-chapter:hover {\n height: 100%;\n}\n\n.art-progress .art-chapter-title {\n z-index: 70;\n border-radius: var(--art-border-radius);\n white-space: nowrap;\n background-color: var(--art-tip-background);\n padding: 3px 5px;\n font-size: 16px;\n line-height: 1;\n display: none;\n position: absolute;\n top: -50px;\n left: 0;\n}\n";
},{}],"5dUr6":[function(require,module,exports) {
exports.interopDefault = function(a) {