From f37026519f0c8d038cf69c7edeb410aa6de3810a Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Wed, 6 Dec 2023 01:25:32 +0800
Subject: [PATCH] feat: enable video ctrl bar on VideoCard

---
 src/components/Settings/components/General.vue | 3 +++
 src/components/VideoCard/VideoCard.vue         | 4 +++-
 src/logic/storage.ts                           | 1 +
 src/models/settings.ts                         | 1 +
 4 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/components/Settings/components/General.vue b/src/components/Settings/components/General.vue
index 952a6273..caf7a147 100644
--- a/src/components/Settings/components/General.vue
+++ b/src/components/Settings/components/General.vue
@@ -84,6 +84,9 @@ watch(() => settings.value.language, (newValue, oldValue) => {
       <!-- <SettingsItem title="Open link in current tab">
         <Radio v-model="settings.openLinkInCurrentTab" />
       </SettingsItem> -->
+      <SettingsItem title="Display the video control bar on the video card">
+        <Radio v-model="settings.enableVideoCtrlBarOnVideoCard" />
+      </SettingsItem>
     </SettingsItemGroup>
 
     <SettingsItemGroup :title="$t('settings.group_topbar')">
diff --git a/src/components/VideoCard/VideoCard.vue b/src/components/VideoCard/VideoCard.vue
index 8342a1b1..548e570b 100644
--- a/src/components/VideoCard/VideoCard.vue
+++ b/src/components/VideoCard/VideoCard.vue
@@ -2,6 +2,7 @@
 import { getCSRF, removeHttpFromUrl } from '~/utils/main'
 import { calcCurrentTime, calcTimeSince, numFormatter } from '~/utils/dataFormatter'
 import type { VideoPreviewResult } from '~/models/apiModels/video/videoPreview'
+import { settings } from '~/logic'
 
 interface Props {
   id: number
@@ -196,7 +197,8 @@ function handelMouseLeave() {
           <Transition v-if="showPreview" name="fade">
             <video
               v-if="previewVideoUrl && isHover"
-              autoplay muted controls
+              autoplay muted
+              :controls="settings.enableVideoCtrlBarOnVideoCard"
               pos="absolute top-0 left-0" w-full aspect-video rounded="$bew-radius" bg-black
             >
               <source :src="previewVideoUrl" type="video/mp4">
diff --git a/src/logic/storage.ts b/src/logic/storage.ts
index d8f402b8..af96d4ae 100644
--- a/src/logic/storage.ts
+++ b/src/logic/storage.ts
@@ -10,6 +10,7 @@ export const settings = useStorageLocal('settings', ref<Settings>({
   startupPage: AppPage.Home,
   enableHorizontalScrolling: false,
   openLinkInCurrentTab: false,
+  enableVideoCtrlBarOnVideoCard: false,
   isShowTopbar: true,
   autoHideTopbar: false,
   dockPosition: 'right',
diff --git a/src/models/settings.ts b/src/models/settings.ts
index b83aa65e..9cd90055 100644
--- a/src/models/settings.ts
+++ b/src/models/settings.ts
@@ -5,6 +5,7 @@ export interface Settings {
   startupPage: AppPage
   enableHorizontalScrolling: boolean
   openLinkInCurrentTab: boolean
+  enableVideoCtrlBarOnVideoCard: boolean
   isShowTopbar: boolean
   autoHideTopbar: boolean
   dockPosition: 'left' | 'right' | 'bottom'