feat: enable video preview feature

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

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"

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

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