feat: Add support for video chapters in artplayer-plugin-chapter

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

@@ -1,7 +1,87 @@
 import style from 'bundle-text:./style.less';
 
-export default function artplayerPluginChapter(option) {
+export default function artplayerPluginChapter({ chapters = [] }) {
     return (art) => {
+        const { setStyle, append, clamp, query } = 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>
+        `;
+
+        let $chapters = [];
+        const $progress = art.query('.art-control-progress-inner');
+        const $control = append($progress, '<div class="art-chapters"></div>');
+
+        function setBar(type, percentage) {
+            const currentTime = art.duration * percentage;
+
+            const index = $chapters.findIndex(({ $chapter }) => {
+                const start = parseFloat($chapter.dataset.start);
+                const end = parseFloat($chapter.dataset.end);
+                return art.currentTime >= start && art.currentTime <= end;
+            });
+
+            if (index === -1) return;
+
+            for (let i = 0; i < $chapters.length; i++) {
+                const { $chapter, $loaded, $played, $hover } = $chapters[i];
+
+                const $target = {
+                    hover: $hover,
+                    loaded: $loaded,
+                    played: $played,
+                }[type];
+
+                const duration = parseFloat($chapter.dataset.duration);
+                const start = parseFloat($chapter.dataset.start);
+                const end = parseFloat($chapter.dataset.end);
+
+                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}%`);
+                }
+            }
+        }
+
+        art.on('setBar', (type, percentage) => {
+            setBar(type, percentage);
+        });
+
+        art.on('video:loadedmetadata', () => {
+            $control.innerHTML = '';
+            $chapters = chapters.map((chapter) => {
+                const $chapter = append($control, html);
+                const start = clamp(chapter.start, 0, art.duration);
+                const end = clamp(chapter.end, 0, art.duration);
+                const duration = end - start;
+                const percentage = duration / art.duration;
+                $chapter.dataset.start = start;
+                $chapter.dataset.end = end;
+                $chapter.dataset.duration = duration;
+                $chapter.dataset.text = chapter.text;
+                $chapter.dataset.percentage = percentage;
+                $chapter.style.width = `${percentage * 100}%`;
+                return {
+                    $chapter,
+                    $hover: query('.art-progress-hover', $chapter),
+                    $loaded: query('.art-progress-loaded', $chapter),
+                    $played: query('.art-progress-played', $chapter),
+                };
+            });
+        });
+
         return {
             name: 'artplayerPluginChapter',
         };

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

@@ -1,3 +1,37 @@
-.artplayer-plugin-chapter {
-    //
+.art-progress {
+    .art-control-progress-inner {
+        height: 100% !important;
+        background-color: transparent !important;
+
+        & > .art-progress-hover,
+        & > .art-progress-loaded,
+        & > .art-progress-played {
+            display: none !important;
+        }
+    }
+
+    .art-chapters {
+        position: absolute;
+        z-index: 0;
+        inset: 0;
+        display: flex;
+        align-items: center;
+        gap: 4px;
+        height: 100%;
+        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);
+
+            &:hover {
+                height: 100%;
+            }
+        }
+    }
 }