From e9ebeabc48b44c30e899c6cc26ef937db7fd3df3 Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Thu, 11 Jan 2024 01:39:29 +0800
Subject: [PATCH] feat: add a setting to configure delay for video preview in
 video card

---
 .../Settings/components/General.vue           |  3 +++
 src/components/VideoCard/VideoCard.vue        | 19 ++++++++++++-------
 src/logic/storage.ts                          |  2 ++
 3 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/src/components/Settings/components/General.vue b/src/components/Settings/components/General.vue
index 4d70417b..6d8dea99 100644
--- a/src/components/Settings/components/General.vue
+++ b/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')">
diff --git a/src/components/VideoCard/VideoCard.vue b/src/components/VideoCard/VideoCard.vue
index 20f0beeb..941c0822 100644
--- a/src/components/VideoCard/VideoCard.vue
+++ b/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 }}
diff --git a/src/logic/storage.ts b/src/logic/storage.ts
index 6f319d4e..1a95a83c 100644
--- a/src/logic/storage.ts
+++ b/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,