refactor: simplify thumbnail display logic and improve hover effects

- Removed unnecessary hover event handling for thumbnails.
- Updated thumbnail visibility logic to always show when loading.
- Enhanced CSS for progress tip and thumbnails with scaling and opacity transitions.
- Added hover class to manage thumbnail visibility on progress hover.

packages/artplayer/src/player/thumbnailsMix.js

@@ -2,7 +2,6 @@ import { def, isMobile, loadImg, setStyle } from '../utils'
 
 export default function thumbnailsMix(art) {
   const {
-    events,
     option,
     template: { $progress, $video },
   } = art
@@ -11,7 +10,6 @@ export default function thumbnailsMix(art) {
   let image = null
   let loading = false
   let isLoad = false
-  let isHover = false
 
   function reset() {
     clearTimeout(timer)
@@ -48,16 +46,6 @@ 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
@@ -73,27 +61,14 @@ export default function thumbnailsMix(art) {
         isLoad = true
       }
 
-      if (!isLoad || !isHover)
+      if (!isLoad)
         return
 
       const width = $progress.clientWidth * percentage
-      setStyle($thumbnails, 'display', 'flex')
 
       if (width > 0 && width < $progress.clientWidth) {
         showThumbnails(width)
       }
-      else {
-        if (!isMobile) {
-          setStyle($thumbnails, 'display', 'none')
-        }
-      }
-
-      if (isMobileDragging) {
-        clearTimeout(timer)
-        timer = setTimeout(() => {
-          setStyle($thumbnails, 'display', 'none')
-        }, 500)
-      }
     }
   })
 

packages/artplayer/src/style/progress.less

@@ -81,6 +81,9 @@
                 }
 
                 .art-progress-tip {
+                    transform-origin: bottom center;
+                    transform: scale(0.5);
+                    opacity: 0;
                     position: absolute;
                     z-index: 50;
                     top: -25px;
@@ -91,6 +94,7 @@
                     border-radius: var(--art-border-radius);
                     white-space: nowrap;
                     background-color: var(--art-tip-background);
+                    transition: transform var(--art-transition-duration) ease, opacity var(--art-transition-duration) ease;
                 }
             }
 
@@ -102,13 +106,16 @@
         }
 
         .art-control-thumbnails {
-            display: none;
+            transform-origin: bottom center;
+            transform: scale(0.5);
+            opacity: 0;
             position: absolute;
             bottom: calc(var(--art-bottom-gap) + 10px);
             left: 0;
             border-radius: var(--art-border-radius);
             pointer-events: none;
             background-color: var(--art-widget-background);
+            transition: transform var(--art-transition-duration) ease, opacity var(--art-transition-duration) ease;
             box-shadow:
                 0 1px 3px 0 rgb(0 0 0 / 0.2),
                 0 1px 2px -1px rgb(0 0 0 / 0.2);
@@ -121,3 +128,12 @@
         }
     }
 }
+
+.art-progress-hover {
+    .art-bottom .art-progress {
+        .art-control-progress .art-control-progress-inner .art-progress-tip, .art-control-thumbnails {
+            transform: scale(1);
+            opacity: 1;
+        }
+    }
+}