feat: Optimize setBar event and add artplayerPluginChapter plugin

CHANGELOG_CN.md

@@ -6,6 +6,9 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+-   优化 `setBar` 事件
+-   新增 `artplayerPluginChapter` 插件
+
 ## [5.1.4] - 2024-6-1
 
 -   重构 `artplayerPluginDanmuku` 插件

docs/assets/example/chapter.js

@@ -8,6 +8,7 @@ var art = new Artplayer({
 	fullscreen: true,
 	fullscreenWeb: true,
 	miniProgressBar: true,
+	autoOrientation: true,
 	thumbnails: {
         url: '/assets/sample/thumbnails.png',
         number: 60,

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

@@ -3,7 +3,7 @@ import style from 'bundle-text:./style.less';
 export default 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">
@@ -17,36 +17,15 @@ 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>');
         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) => {
-            const currentTime = art.duration * percentage;
+            if (!$chapters.length) return;
 
+            const currentTime = art.duration * percentage;
             const index = $chapters.findIndex(({ $chapter }) => {
                 const start = parseFloat($chapter.dataset.start);
                 const end = parseFloat($chapter.dataset.end);
@@ -79,22 +58,43 @@ export default function artplayerPluginChapter({ chapters = [] }) {
                 }
 
                 if (currentTime >= start && currentTime <= end) {
-                    const _percentage = (currentTime - start) / duration;
+                    const percentage = (currentTime - start) / duration;
-                    setStyle($target, 'width', `${_percentage * 100}%`);
+                    setStyle($target, 'width', `${percentage * 100}%`);
                 }
             }
         });
 
         art.proxy($progress, 'mousemove', (event) => {
-            showText(event);
+            if (!$chapters.length) return;
+
+            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.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);
@@ -114,6 +114,12 @@ export default function artplayerPluginChapter({ chapters = [] }) {
                     $played: query('.art-progress-played', $chapter),
                 };
             });
+
+            if ($chapters.length) {
+                addClass($player, 'artplayer-plugin-chapter');
+            } else {
+                removeClass($player, 'artplayer-plugin-chapter');
+            }
         });
 
         return {

packages/artplayer/types/events.d.ts

@@ -64,4 +64,5 @@ export type Events = {
     subtitleOffset: [offset: number];
     restart: [url: string];
     muted: [state: boolean];
+    setBar: [type: 'loaded' | 'played' | 'hover', event: Event];
 };