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

src/components/Settings/components/General.vue

@@ -90,6 +90,9 @@ function resetDockContent() {
       <SettingsItem :title="$t('settings.enable_video_ctrl_bar_on_video_card')">
         <Radio v-model="settings.enableVideoCtrlBarOnVideoCard" />
       </SettingsItem>
+      <SettingsItem title="Delayed video preview on hover over the video card">
+        <Radio v-model="settings.hoverVideoCardDelayed" />
+      </SettingsItem>
     </SettingsItemGroup>
 
     <SettingsItemGroup :title="$t('settings.group_topbar')">

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 }}

src/logic/storage.ts

@@ -11,6 +11,7 @@ export interface Settings {
   enableHorizontalScrolling: boolean
   openLinkInCurrentTab: boolean
   enableVideoCtrlBarOnVideoCard: boolean
+  hoverVideoCardDelayed: boolean
   autoHideTopBar: boolean
   dockPosition: 'left' | 'right' | 'bottom'
   autoHideDock: boolean
@@ -50,6 +51,7 @@ export const settings = useStorageLocal('settings', ref<Settings>({
   enableHorizontalScrolling: false,
   openLinkInCurrentTab: false,
   enableVideoCtrlBarOnVideoCard: false,
+  hoverVideoCardDelayed: false,
   autoHideTopBar: false,
   dockPosition: 'right',
   autoHideDock: false,