Optimize setBar event and add lazy loading for thumbnails in artplayer-plugin-chapter

docs/mobile.html

@@ -37,8 +37,8 @@
     <script src="./assets/js/vconsole.min.js"></script>
     <script>var vConsole = new VConsole();</script>
     <!-- <script src="https://cdn.jsdelivr.net/npm/artplayer@5.1.1/dist/artplayer.js"></script> -->
-    <!-- <script src="./uncompiled/artplayer/index.js"></script> -->
-    <script src="./compiled/artplayer.js"></script>
+    <script src="./uncompiled/artplayer/index.js"></script>
+    <!-- <script src="./compiled/artplayer.js"></script> -->
     <script src="./assets/js/mobile.js"></script>
 </body>
 

docs/uncompiled/artplayer-plugin-chapter/index.js

@@ -151,7 +151,7 @@ var _styleLessDefault = parcelHelpers.interopDefault(_styleLess);
 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">
                     <div class="art-chapter-inner">
@@ -162,26 +162,12 @@ 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>');
         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)=>{
+            if (!$chapters.length) return;
             const currentTime = art.duration * percentage;
             const index = $chapters.findIndex(({ $chapter })=>{
                 const start = parseFloat($chapter.dataset.start);
@@ -203,19 +189,37 @@ function artplayerPluginChapter({ chapters = [] }) {
                 if (currentTime < start) setStyle($target, "width", 0);
                 if (currentTime > end) setStyle($target, "width", "100%");
                 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);
-        });
-        art.proxy($progress, "mouseleave", ()=>{
-            setStyle($title, "display", "none");
-        });
+        function showTitle(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 = 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");
+        }
+        if (!isMobile) {
+            art.proxy($progress, "mousemove", (event)=>{
+                if (!$chapters.length) return;
+                showTitle(event);
+            });
+            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);
@@ -234,6 +238,8 @@ function artplayerPluginChapter({ chapters = [] }) {
                     $played: query(".art-progress-played", $chapter)
                 };
             });
+            if ($chapters.length) addClass($player, "artplayer-plugin-chapter");
+            else removeClass($player, "artplayer-plugin-chapter");
         });
         return {
             name: "artplayerPluginChapter"

docs/uncompiled/artplayer-plugin-chapter/index.js.map

@@ -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 { $player } = art.template;\n        const { setStyle, append, clamp, query, isMobile, addClass } = 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\n        addClass($player, 'artplayer-plugin-chapter');\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($titlLine truncated
+{"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 { $player } = art.template;\n        const { setStyle, append, clamp, query, isMobile, addClass, removeClass } = 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\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        art.on('setBar', (type, percentage) => {\n            if (!$chapteLine truncated

docs/uncompiled/artplayer/index.js

@@ -242,7 +242,7 @@ class Artplayer extends (0, _emitterDefault.default) {
         return "development";
     }
     static get build() {
-        return "2024-06-02 19:04:14";
+        return "2024-06-02 22:18:01";
     }
     static get config() {
         return 0, _configDefault.default;

packages/artplayer-plugin-chapter/src/index.js

@@ -64,9 +64,7 @@ export default function artplayerPluginChapter({ chapters = [] }) {
             }
         });
 
-        art.proxy($progress, 'mousemove', (event) => {
-            if (!$chapters.length) return;
-
+        function showTitle(event) {
             const $target = event.target.closest('.art-chapter');
             if ($target) {
                 setStyle($title, 'display', 'flex');
@@ -85,12 +83,19 @@ export default function artplayerPluginChapter({ chapters = [] }) {
             } else {
                 setStyle($title, 'display', 'none');
             }
-        });
+        }
 
-        art.proxy($progress, 'mouseleave', () => {
-            if (!$chapters.length) return;
-            setStyle($title, 'display', 'none');
-        });
+        if (!isMobile) {
+            art.proxy($progress, 'mousemove', (event) => {
+                if (!$chapters.length) return;
+                showTitle(event);
+            });
+
+            art.proxy($progress, 'mouseleave', () => {
+                if (!$chapters.length) return;
+                setStyle($title, 'display', 'none');
+            });
+        }
 
         art.on('video:loadedmetadata', () => {
             $control.innerText = '';