feat: add a setting to configure delay for video preview in video card

src/components/VideoCard/VideoCard.vue

@@ -101,12 +101,18 @@ function toggleWatchLater() {
 }
 
 function handleMouseEnter() {
-  mouseEnterTimeOut.value = setTimeout(() => {
-    mouseLeaveTimeOut.value = undefined
+  if (settings.value.hoverVideoCardDelayed) {
+    mouseEnterTimeOut.value = setTimeout(() => {
+      isHover.value = true
+      clearTimeout(mouseLeaveTimeOut.value)
+      contentVisibility.value = 'visible'
+    }, 1200)
+  }
+  else {
     isHover.value = true
     clearTimeout(mouseLeaveTimeOut.value)
     contentVisibility.value = 'visible'
-  }, 1200)
+  }
 }
 
 function handelMouseLeave() {
@@ -185,8 +191,6 @@ function handelMouseLeave() {
       rounded="$bew-radius" duration-300 ease-in-out
       hover:bg="$bew-fill-2" hover:ring="8 $bew-fill-2"
       :style="{ contentVisibility }"
-      @mouseenter="handleMouseEnter"
-      @mouseleave="handelMouseLeave"
     >
       <div :style="{ display: horizontal ? 'flex' : 'block', gap: horizontal ? '1.5rem' : '0' }">
         <!-- Cover -->
@@ -198,6 +202,8 @@ function handelMouseLeave() {
           cursor-pointer
           duration-300 ease-in-out
           group-hover:z-2
+          @mouseenter="handleMouseEnter"
+          @mouseleave="handelMouseLeave"
         >
           <!-- Video preview -->
           <Transition v-if="showPreview" name="fade">
@@ -209,7 +215,6 @@ function handelMouseLeave() {
               pos="absolute top-0 left-0" w-full aspect-video rounded="$bew-radius" bg-black
             >
               <source :src="previewVideoUrl" type="video/mp4">
-
             </video>
           </Transition>
           <!-- <video  /> -->
@@ -246,7 +251,7 @@ function handelMouseLeave() {
             rounded="$bew-radius"
             text="!white xs"
             bg="black opacity-60"
-            group-hover:opacity-0
+            class="group-hover/cover:opacity-0"
             duration-300
           >
             {{ duration ? calcCurrentTime(duration) : durationStr }}