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

feat: Add lazy loading for thumbnails in artplayer-plugin-chapter

Browse Source
This commit is contained in:
Harvey Zack committed 2024-06-02 20:06:47 +08:00
1 parent 17ab163e91
commit 570c1611d3
5 files changed
+21 -6
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

docs/uncompiled/artplayer-plugin-chapter/index.js
+4 -2
View File
@@ -150,7 +150,8 @@ var _styleLess = require("bundle-text:./style.less");
var _styleLessDefault = parcelHelpers.interopDefault(_styleLess);
function artplayerPluginChapter({ chapters = [] }) {
return (art)=>{
const { setStyle, append, clamp, query, isMobile } = art.constructor.utils;
const { $player } = art.template;
const { setStyle, append, clamp, query, isMobile, addClass } = art.constructor.utils;
const html = `
<div class="art-chapter">
<div class="art-chapter-inner">
@@ -161,6 +162,7 @@ function artplayerPluginChapter({ chapters = [] }) {
</div>
`;
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>');
@@ -252,7 +254,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 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";
module.exports = ".artplayer-plugin-chapter .art-control-progress-inner {\n background-color: #0000 !important;\n height: 100% !important;\n}\n\n.artplayer-plugin-chapter .art-control-progress-inner > .art-progress-hover, .artplayer-plugin-chapter .art-control-progress-inner > .art-progress-loaded, .artplayer-plugin-chapter .art-control-progress-inner > .art-progress-played {\n display: none !important;\n}\n\n.artplayer-plugin-chapter .art-control-thumbnails {\n bottom: calc(var(--art-bottom-gap) + 64px) !important;\n}\n\n.artplayer-plugin-chapter .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.artplayer-plugin-chapter .art-chapters .art-chapter {\n align-items: center;\n height: 100%;\n display: flex;\n}\n\n.artplayer-plugin-chapter .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.artplayer-plugin-chapter .art-chapters .art-chapter:hover .art-chapter-inner {\n height: 100%;\n}\n\n.artplayer-plugin-chapter .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: 14px;\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) {