mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-10 04:36:15 -08:00
feat: Improve chapter display in artplayer-plugin-chapter
This commit is contained in:
Harvey Zack committed
1 parent
2326628b86
commit
41cdde4b79
4 files changed
+42
-31
No files matched your search
@@ -153,26 +153,29 @@ function artplayerPluginChapter({ chapters = [] }) {
|
||||
const { setStyle, append, clamp, query, isMobile } = art.constructor.utils;
|
||||
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`);
|
||||
} else setStyle($title, "display", "none");
|
||||
}
|
||||
@@ -221,7 +224,6 @@ 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 {
|
||||
$chapter,
|
||||
@@ -250,7 +252,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-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";
|
||||
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 align-items: center;\n height: 100%;\n display: flex;\n}\n\n.art-progress .art-chapters .art-chapter .art-chapter-inner {\n cursor: pointer;\n transition: height var(--art-transition-duration) ease;\n background-color: var(--art-progress-color);\n border-radius: 10px;\n width: 100%;\n height: 50%;\n position: relative;\n overflow: hidden;\n}\n\n.art-progress .art-chapters .art-chapter:hover .art-chapter-inner {\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) {
|
||||
|
||||
@@ -1 +1 @@
|
||||
{"mappings":"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","sources":["packages/artplayer-plugin-chapter/src/index.js","node_modules/@parcel/runtime-js/lib/bundles/runtime-e8c48f234731c5ef.js","node_modules/@parcel/transformer-js/src/esmodule-helpers.js"],"sourcesContent":["import style from 'bundle-text:./style.less';\n\nexport default function artplayerPluginChapter({ chapters = [] }) {\n return (art) => {\n const { setStyle, append, clamp, query, isMobile } = art.constructor.utils;\n\n const html = `\n <div class=\"art-chapter\">\n <div class=\"art-progress-hover\"></div>\n <div class=\"art-progress-loaded\"></div>\n <div class=\"art-progress-played\"></div>\n </div>\n `;\n\n let $chapters = [];\n const $progress = art.query('.art-control-progress-inner');\n const $control = append($progress, '<div class=\"art-chapters\"></div>');\n const $title = append($progress, '<div class=\"art-chapter-title\"></div>');\n\n function showText(event) {\n const $target = event.target.closest('.art-chapter');\n if ($target) {\n setStyle($title, 'display', 'flex');\n $title.innerText = $target.dataset.title || '';\n const { left } = $progress.getBoundingClientRect();\n const eventLeft = isMobile ? event.touches[0].clientX : event.clientX;\n const width = clamp(eventLeft - left, 0, $progress.clientWidth);\nLine truncated
|
||||
{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;6CAEwB;AAFxB;;AAEe,SAAS,uBAAuB,EAAE,WAAW,EAAE,EAAE;IAC5D,OAAO,CAAC;QACJ,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,IAAI,WAAW,CAAC,KAAK;QAE1E,MAAM,OAAO,CAAC;;;;;;;;QAQd,CAAC;QAED,IAAI,YAAY,EAAE;QAClB,MAAM,YAAY,IAAI,KAAK,CAAC;QAC5B,MAAM,SAAS,IAAI,KAAK,CAAC;QACzB,MAAM,WAAW,OAAO,QAAQ;QAChC,MAAM,SAAS,OAAO,QAAQ;QAE9B,SAAS,SAAS,KAAK;YACnB,MAAM,UAAU,MAAM,MAAM,CAAC,OAAO,CAAC;YACrC,IAAI,SAAS;gBACT,SAAS,QAAQ,WAAW;gBAC5B,OAAO,SAAS,GAAG,QAAQ,OAAO,CAAC,KAAK,IAAI;gBAC5C,MAAM,EAAE,IAAI,EAAE,GAAG,OAAO,qBAAqB;gBAC7C,MAAM,YAAY,WAAW,MAAM,OAAO,CAAC,EAAE,CAAC,OAAO,GAAG,MAAM,OAAO;gBACrE,MAAM,QAAQ,MAAM,YAAY,MAAM,GAAG,OAAO,WAAW;gBAC3D,MAAM,aAAa,OAAO,WAAW;gBACrC,IAAI,SAAS,aAAa,GACtB,SAAS,QAAQ,QAAQ;qBACtB,IAAI,QAAQ,OAAO,WAAW,GAAG,aAAa,GACjD,SAAS,QAAQ,QAAQ,CAAC,EAAE,OAAO,WAAW,GAAG,WAAW,EAAE,CAAC;qBAE/D,SAAS,QAAQ,QAAQ,CAAC,EAAE,QAAQ,aAAa,EAAE,EAAE,CAAC;YAE9D,OACI,SAAS,QAAQ,WAAW;QAEpC;QAEA,IAAI,EAAE,CAAC,UAAU,CAAC,MAAM;YACpB,MAAM,cAAc,IAAI,QAAQ,GAAG;YAEnC,MAAM,QAAQ,UAAU,SAAS,CAAC,CAAC,EAAE,QAAQ,EAAE;gBAC3C,MAAM,QAAQ,WAAW,SAAS,OAAO,CAAC,KAAK;gBAC/C,MAAM,MAAM,WAAW,SAAS,OAAO,CAAC,GAAG;gBAC3C,OAAO,IAAI,WAAW,IAAI,SAAS,IAAI,WAAW,IAAI;YAC1D;YAEA,IAAI,UAAU,IAAI;YAElB,IAAK,IAAI,IAAI,GAAG,IAAI,UAAU,MAAM,EAAE,IAAK;gBACvC,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,SAAS,CAAC,EAAE;gBAE3D,MAAM,UAAU;oBACZ,OAAO;oBACP,QAAQ;oBACR,QAAQ;gBACZ,CAAC,CAAC,KAAK;gBAEP,IAAI,CAAC,SAAS;gBAEd,MAAM,WAAW,WAAW,SAAS,OAAO,CAAC,QAAQ;gBACrD,MAAM,QAAQ,WAAW,SAAS,OAAO,CAAC,KAAK;gBAC/C,MAAM,MAAM,WAAW,SAAS,OAAO,CAAC,GAAG;gBAE3C,IAAI,cAAc,OACd,SAAS,SAAS,SAAS;gBAG/B,IAAI,cAAc,KACd,SAAS,SAAS,SAAS;gBAG/B,IAAI,eAAe,SAAS,eAAe,KAAK;oBAC5C,MAAM,cAAc,AAAC,CAAA,cAAc,KAAI,IAAK;oBAC5C,SAAS,SAAS,SAAS,CAAC,EAAE,cAAc,IAAI,CAAC,CAAC;gBACtD;YACJ;QACJ;QAEA,IAAI,KAAK,CAAC,WAAW,aAAa,CAAC;YAC/B,SAAS;QACb;QAEA,IAAI,KAAK,CAAC,WAAW,cAAc;YAC/B,SAAS,QAAQ,WAAW;QAChC;QAEA,IAAI,EAAE,CAAC,wBAAwB;YAC3B,SAAS,SAAS,GAAG;YACrB,YAAY,SAAS,GAAG,CAAC,CAAC;gBACtB,MAAM,WAAW,OAAO,UAAU;gBAClC,MAAM,QAAQ,MAAM,QAAQ,KAAK,EAAE,GAAG,IAAI,QAAQ;gBAClD,MAAM,MAAM,MAAM,QAAQ,GAAG,EAAE,GAAG,IAAI,QAAQ;gBAC9C,MAAM,WAAW,MAAM;gBACvB,MAAM,aAAa,WAAW,IAAI,QAAQ;gBAC1C,SAAS,OAAO,CAAC,KAAK,GAAG;gBACzB,SAAS,OAAO,CAAC,GAAG,GAAG;gBACvB,SAAS,OAAO,CAAC,QAAQ,GAAG;gBAC5B,SAAS,OAAO,CAAC,KAAK,GAAG,QAAQ,KAAK,CAAC,IAAI;gBAC3C,SAAS,KAAK,CAAC,KAAK,GAAG,CAAC,EAAE,aAAa,IAAI,CAAC,CAAC;gBAE7C,OAAO;oBACH;oBACA,QAAQ,MAAM,uBAAuB;oBACrC,SAAS,MAAM,wBAAwB;oBACvC,SAAS,MAAM,wBAAwB;gBAC3C;YACJ;QACJ;QAEA,OAAO;YACH,MAAM;QACV;IACJ;AACJ;AAEA,IAAI,OAAO,aAAa,aAAa;IACjC,MAAM,KAAK;IACX,MAAM,SAAS,SAAS,cAAc,CAAC;IACvC,IAAI,QACA,OAAO,WAAW,GAAG,CAAA,GAAA,yBAAK,AAAD;SACtB;QACH,MAAM,SAAS,SAAS,aAAa,CAAC;QACtC,OAAO,EAAE,GAAG;QACZ,OAAO,WAAW,GAAG,CAAA,GAAA,yBAAK,AAAD;QACzB,SAAS,IAAI,CAAC,WAAW,CAAC;IAC9B;AACJ;AAEA,IAAI,OAAO,WAAW,aAClB,MAAM,CAAC,yBAAyB,GAAG;;;ACvIvC,OAAO,OAAO,GAAG;;;ACAjB,QAAQ,cAAc,GAAG,SAAU,CAAC;IAClC,OAAO,KAAK,EAAE,UAAU,GAAG,IAAI;QAAC,SAAS;IAAC;AAC5C;AAEA,QAAQ,iBAAiB,GAAG,SAAU,CAAC;IACrC,OAAO,cAAc,CAAC,GAAG,cAAc;QAAC,OAAO;IAAI;AACrD;AAEA,QAAQ,SAAS,GAAG,SAAU,MAAM,EAAE,IAAI;IACxC,OAAO,IAAI,CAAC,QAAQ,OAAO,CAAC,SAAU,GAAG;QACvC,IACE,QAAQ,aACR,QAAQ,gBACR,OAAO,SAAS,CAAC,cAAc,CAAC,IAAI,CAAC,MAAM,MAE3C;QAGF,OAAO,cAAc,CAAC,MAAM,KAAK;YAC/B,YAAY;YACZ,KAAK;gBACH,OAAO,MAAM,CAAC,IAAI;YACpB;QACF;IACF;IAEA,OAAO;AACT;AAEA,QAAQ,MAAM,GAAG,SAAU,IAAI,EAAE,QAAQ,EAAE,GAAG;IAC5C,OAAO,cAAc,CAAC,MAAM,UAAU;QACpC,YAAY;QACZ,KAAK;IACP;AACF","sources":["packages/artplayer-plugin-chapter/src/index.js","node_modules/@parcel/runtime-js/lib/bundles/runtime-e8c48f234731c5ef.js","node_modules/@parcel/transformer-js/src/esmodule-helpers.js"],"sourcesContent":["import style from 'bundle-text:./style.less';\n\nexport default function artplayerPluginChapter({ chapters = [] }) {\n return (art) => {\n const { setStyle, append, clamp, query, isMobile } = art.constructor.utils;\n\n const html = `\n <div class=\"art-chapter\">\n <div class=\"art-chapter-inner\">\n <div class=\"art-progress-hover\"></div>\n <div class=\"art-progress-loaded\"></div>\n <div class=\"art-progress-played\"></div>\n </div>\n </div>\n `;\n\n let $chapters = [];\n const $progress = art.query('.art-control-progress');\n const $inner = art.query('.art-control-progress-inner');\n const $control = append($inner, '<div class=\"art-chapters\"></div>');\n const $title = append($inner, '<div class=\"art-chapter-title\"></div>');\n\n function showText(event) {\n const $target = event.target.closest('.art-chapter');\n if ($target) {\n setStyle($title, 'display', 'flex');\n $title.innerText = $target.dataset.title || '';\n const { left } = $inner.getBoundingClientRect();\n const eLine truncated
|
||||
@@ -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 {
|
||||
|
||||
@@ -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%;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in new issue
Block a user