feat: Optimize progress bar and add highlight feature

zhw2590582 · Jun 8, 2024 · 744913b · 744913b
1 parent e2a40e6
commit 744913b
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 48 deletions.
diff --git a/docs/uncompiled/artplayer/index.js b/docs/uncompiled/artplayer/index.js
diff --git a/docs/uncompiled/artplayer/index.js.map b/docs/uncompiled/artplayer/index.js.map
diff --git a/packages/artplayer/src/control/progress.js b/packages/artplayer/src/control/progress.js
@@ -84,7 +84,19 @@ export default function progress(options) {
                     }
                 }
 
+                function updateHighlight() {
+                    $highlight.innerText = '';
+                    for (let index = 0; index < option.highlight.length; index++) {
+                        const item = option.highlight[index];
+                        const left = (clamp(item.time, 0, art.duration) / art.duration) * 100;
+                        const html = `<span data-text="${item.text}" data-time="${item.time}" style="left: ${left}%"></span>`;
+                        append($highlight, html);
+                    }
+                }
+
                 function setBar(type, percentage, event) {
+                    const isMobileDroging = type === 'played' && event && isMobile;
+
                     if (type === 'loaded') {
                         setStyle($loaded, 'width', `${percentage * 100}%`);
                     }
@@ -96,32 +108,22 @@ export default function progress(options) {
                     if (type === 'played') {
                         setStyle($played, 'width', `${percentage * 100}%`);
                         setStyle($indicator, 'left', `${percentage * 100}%`);
-
-                        if (isMobile && event) {
-                            setStyle($tip, 'display', 'flex');
-                            const width = $control.clientWidth * percentage;
-                            const time = secondToTime(percentage * art.duration);
-                            showTime(event, { width, time });
-                            clearTimeout(tipTimer);
-                            tipTimer = setTimeout(() => {
-                                setStyle($tip, 'display', 'none');
-                            }, 500);
-                        }
                     }
-                }
 
-                art.on('video:loadedmetadata', () => {
-                    for (let index = 0; index < option.highlight.length; index++) {
-                        const item = option.highlight[index];
-                        const left = (clamp(item.time, 0, art.duration) / art.duration) * 100;
-                        const html = `<span data-text="${item.text}" data-time="${item.time}" style="left: ${left}%"></span>`;
-                        append($highlight, html);
+                    if (isMobileDroging) {
+                        setStyle($tip, 'display', 'flex');
+                        const width = $control.clientWidth * percentage;
+                        const time = secondToTime(percentage * art.duration);
+                        showTime(event, { width, time });
+                        clearTimeout(tipTimer);
+                        tipTimer = setTimeout(() => {
+                            setStyle($tip, 'display', 'none');
+                        }, 500);
                     }
-                });
+                }
 
-                art.on('setBar', (type, percentage, event) => {
-                    setBar(type, percentage, event);
-                });
+                art.on('setBar', setBar);
+                art.on('video:loadedmetadata', updateHighlight);
 
                 art.on('video:progress', () => {
                     art.emit('setBar', 'loaded', art.loaded);