feat: enable video ctrl bar on VideoCard

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')">

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

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',

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'