fix: Remove unused code for progress hover in artplayer

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

@@ -16,7 +16,7 @@ export default function artplayerPluginChapter({ chapters = [] }) {
         const $progress = art.query('.art-control-progress-inner');
         const $control = append($progress, '<div class="art-chapters"></div>');
 
-        function setBar(type, percentage) {
+        art.on('setBar', (type, percentage) => {
             const currentTime = art.duration * percentage;
 
             const index = $chapters.findIndex(({ $chapter }) => {
@@ -36,6 +36,8 @@ export default function artplayerPluginChapter({ chapters = [] }) {
                     played: $played,
                 }[type];
 
+                if (!$target) return;
+
                 const duration = parseFloat($chapter.dataset.duration);
                 const start = parseFloat($chapter.dataset.start);
                 const end = parseFloat($chapter.dataset.end);
@@ -53,10 +55,6 @@ export default function artplayerPluginChapter({ chapters = [] }) {
                     setStyle($target, 'width', `${_percentage * 100}%`);
                 }
             }
-        }
-
-        art.on('setBar', (type, percentage) => {
-            setBar(type, percentage);
         });
 
         art.on('video:loadedmetadata', () => {

packages/artplayer/src/control/progress.js

@@ -87,18 +87,16 @@ export default function progress(options) {
                         setStyle($loaded, 'width', `${percentage * 100}%`);
                     }
 
+                    if (type === 'hover') {
+                        setStyle($hover, 'width', `${percentage * 100}%`);
+                    }
+
                     if (type === 'played') {
                         setStyle($played, 'width', `${percentage * 100}%`);
                         setStyle($indicator, 'left', `${percentage * 100}%`);
                     }
                 }
 
-                function setHover(event) {
-                    const { width } = getPosFromEvent(art, event);
-                    setStyle($hover, 'width', `${width}px`);
-                    setStyle($hover, 'display', 'flex');
-                }
-
                 art.on('video:loadedmetadata', () => {
                     for (let index = 0; index < option.highlight.length; index++) {
                         const item = option.highlight[index];
@@ -140,7 +138,8 @@ export default function progress(options) {
                     });
 
                     proxy($control, 'mousemove', (event) => {
-                        setHover(event);
+                        const { percentage } = getPosFromEvent(art, event);
+                        art.emit('setBar', 'hover', percentage);
                         setStyle($tip, 'display', 'flex');
                         if (includeFromEvent(event, $highlight)) {
                             showHighlight(event);
@@ -151,7 +150,7 @@ export default function progress(options) {
 
                     proxy($control, 'mouseleave', () => {
                         setStyle($tip, 'display', 'none');
-                        setStyle($hover, 'display', 'none');
+                        art.emit('setBar', 'hover', 0);
                     });
 
                     proxy($control, 'mousedown', (event) => {

packages/artplayer/src/style/progress.less

@@ -21,7 +21,6 @@
                 background-color: var(--art-progress-color);
 
                 .art-progress-hover {
-                    display: none;
                     .art-full(0);
                     width: 0%;
                     background-color: var(--art-hover-color);