From dd84cd98b2123c567ba6abdb22c22355fc45645f Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Wed, 6 Dec 2023 01:15:58 +0800
Subject: [PATCH] feat: enable video preview feature

---
 src/components/VideoCard/VideoCard.vue                 | 3 ++-
 src/contentScripts/views/Home/components/Following.vue | 4 ++--
 src/contentScripts/views/Home/components/Ranking.vue   | 2 ++
 src/contentScripts/views/Home/components/Trending.vue  | 2 ++
 4 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/components/VideoCard/VideoCard.vue b/src/components/VideoCard/VideoCard.vue
index 8b7e95bd..8342a1b1 100644
--- a/src/components/VideoCard/VideoCard.vue
+++ b/src/components/VideoCard/VideoCard.vue
@@ -21,6 +21,7 @@ interface Props {
   capsuleText?: string
   bvid?: string
   aid?: number
+  /** If you want to show preview video, you should set the cid value */
   cid?: number
   epid?: number
   isFollowed?: boolean
@@ -195,7 +196,7 @@ function handelMouseLeave() {
           <Transition v-if="showPreview" name="fade">
             <video
               v-if="previewVideoUrl && isHover"
-              autoplay muted
+              autoplay muted controls
               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/contentScripts/views/Home/components/Following.vue b/src/contentScripts/views/Home/components/Following.vue
index 13e827e6..2e72eeb9 100644
--- a/src/contentScripts/views/Home/components/Following.vue
+++ b/src/contentScripts/views/Home/components/Following.vue
@@ -98,8 +98,8 @@ function jumpToLoginPage() {
         :id="Number(video.modules.module_dynamic.major.archive?.aid)"
         :key="video.modules.module_dynamic.major.archive?.aid"
         :duration-str="video.modules.module_dynamic.major.archive?.duration_text"
-        :title="video.modules.module_dynamic.major.archive?.title"
-        :cover="video.modules.module_dynamic.major.archive?.cover"
+        :title="`${video.modules.module_dynamic.major.archive?.title}`"
+        :cover="`${video.modules.module_dynamic.major.archive?.cover}`"
         :author="video.modules.module_author.name"
         :author-face="video.modules.module_author.face"
         :mid="video.modules.module_author.mid"
diff --git a/src/contentScripts/views/Home/components/Ranking.vue b/src/contentScripts/views/Home/components/Ranking.vue
index 25767d96..794badd6 100644
--- a/src/contentScripts/views/Home/components/Ranking.vue
+++ b/src/contentScripts/views/Home/components/Ranking.vue
@@ -145,6 +145,8 @@ function getRankingPgc() {
           :published-timestamp="video.pubdate"
           :bvid="video.bvid"
           :rank="index + 1"
+          :cid="video.cid"
+          show-preview
           horizontal
           w-full
         />
diff --git a/src/contentScripts/views/Home/components/Trending.vue b/src/contentScripts/views/Home/components/Trending.vue
index ffa9daf1..53af54b6 100644
--- a/src/contentScripts/views/Home/components/Trending.vue
+++ b/src/contentScripts/views/Home/components/Trending.vue
@@ -77,6 +77,8 @@ async function getTrendingVideos() {
         :published-timestamp="video.pubdate"
         :bvid="video.bvid"
         :tag="video.rcmd_reason.content"
+        :cid="video.cid"
+        show-preview
         horizontal
         w-full
       />