Refactor thumbnailsMix to add hover event handling

packages/artplayer/src/player/thumbnailsMix.js

@@ -2,6 +2,7 @@ import { def, setStyle, isMobile, loadImg } from '../utils';
 
 export default function thumbnailsMix(art) {
     const {
+        events,
         option,
         template: { $progress, $video },
     } = art;
@@ -10,6 +11,7 @@ export default function thumbnailsMix(art) {
     let image = null;
     let loading = false;
     let isLoad = false;
+    let isHover = false;
 
     function reset() {
         clearTimeout(timer);
@@ -43,6 +45,16 @@ export default function thumbnailsMix(art) {
         }
     }
 
+    events.hover(
+        $progress,
+        () => {
+            isHover = true;
+        },
+        () => {
+            isHover = false;
+        },
+    );
+
     art.on('setBar', async (type, percentage, event) => {
         const $thumbnails = art.controls?.thumbnails;
         const { url, scale } = option.thumbnails;
@@ -57,7 +69,7 @@ export default function thumbnailsMix(art) {
                 isLoad = true;
             }
 
-            if (!isLoad) return;
+            if (!isLoad || !isHover) return;
 
             const width = $progress.clientWidth * percentage;
             setStyle($thumbnails, 'display', 'flex');