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

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

@@ -2,7 +2,8 @@ import style from 'bundle-text:./style.less';
 
 export default 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">
@@ -15,6 +16,8 @@ export default function artplayerPluginChapter({ chapters = [] }) {
         `;
 
         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>');

packages/artplayer-plugin-chapter/src/style.less

@@ -1,4 +1,4 @@
-.art-progress {
+.artplayer-plugin-chapter {
     .art-control-progress-inner {
         height: 100% !important;
         background-color: transparent !important;
@@ -10,6 +10,10 @@
         }
     }
 
+    .art-control-thumbnails {
+        bottom: calc(var(--art-bottom-gap) + 64px) !important;
+    }
+
     .art-chapters {
         position: absolute;
         z-index: 0;
@@ -50,7 +54,7 @@
         left: 0;
         padding: 3px 5px;
         line-height: 1;
-        font-size: 16px;
+        font-size: 14px;
         border-radius: var(--art-border-radius);
         white-space: nowrap;
         background-color: var(--art-tip-background);