From b2281c1ea81b647cdea928ef2203cea6fc6776c5 Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Tue, 5 Dec 2023 02:38:27 +0800
Subject: [PATCH] feat: implement hover-to-preview video on video card

---
 src/background/messageListeners/video.ts      |  9 +++
 src/components/VideoCard/VideoCard.vue        | 33 +++++++++++
 .../views/Home/components/ForYou.vue          |  4 ++
 src/models/apiModels/video/videoPreview.ts    | 56 +++++++++++++++++++
 4 files changed, 102 insertions(+)
 create mode 100644 src/models/apiModels/video/videoPreview.ts

diff --git a/src/background/messageListeners/video.ts b/src/background/messageListeners/video.ts
index f4f8b8ed..2d73043b 100644
--- a/src/background/messageListeners/video.ts
+++ b/src/background/messageListeners/video.ts
@@ -99,6 +99,15 @@ function handleMessage(message: any) {
       .then(data => data)
       .catch(error => console.error(error))
   }
+  // https://socialsisteryi.github.io/bilibili-API-collect/docs/video/videostream_url.html#%E8%8E%B7%E5%8F%96%E8%A7%86%E9%A2%91%E6%B5%81%E5%9C%B0%E5%9D%80-web%E7%AB%AF
+  else if (message.contentScriptQuery === 'getVideoPreview') {
+    const url = `https://api.bilibili.com/x/player/wbi/playurl?qn=${message.qn ?? 32}&fnver=${message.fnver ?? 0}&fnval=${message.fnval ?? 1}
+      &bvid=${message.bvid}&cid=${message.cid}&voice_balance=1&gaia_source=pre-load&web_location=1315873&from_client=BROWSER`
+    return fetch(url)
+      .then(response => response.json())
+      .then(data => data)
+      .catch(error => console.error(error))
+  }
 }
 
 function handleConnect() {
diff --git a/src/components/VideoCard/VideoCard.vue b/src/components/VideoCard/VideoCard.vue
index c75c5eb6..ca4c0399 100644
--- a/src/components/VideoCard/VideoCard.vue
+++ b/src/components/VideoCard/VideoCard.vue
@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import { getCSRF, removeHttpFromUrl } from '~/utils/main'
 import { calcCurrentTime, calcTimeSince, numFormatter } from '~/utils/dataFormatter'
+import type { VideoPreviewResult } from '~/models/apiModels/video/videoPreview'
 
 interface Props {
   id: number
@@ -20,12 +21,14 @@ interface Props {
   capsuleText?: string
   bvid?: string
   aid?: number
+  cid?: number
   epid?: number
   isFollowed?: boolean
   horizontal?: boolean
   tag?: string
   rank?: number
   topRightContent?: boolean
+  showPreview?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(),
@@ -45,10 +48,27 @@ const videoUrl = computed(() => {
 
 const isDislike = ref<boolean>(false)
 const isInWatchLater = ref<boolean>(false)
+const isHover = ref<boolean>(false)
 // const dislikeReasonId = ref<number | null>(null)
 const showPopCtrl = ref<boolean>(false)
 const contentVisibility = ref<'auto' | 'visible'>('auto')
 const mouseLeaveTimeOut = ref()
+const previewVideoUrl = ref<string>('')
+
+watch(() => isHover.value, (newValue) => {
+  if (props.showPreview) {
+    if (newValue && !previewVideoUrl.value) {
+      browser.runtime.sendMessage({
+        contentScriptQuery: 'getVideoPreview',
+        bvid: props.bvid,
+        cid: props.cid,
+      }).then((res: VideoPreviewResult) => {
+        if (res.code === 0)
+          previewVideoUrl.value = res.data.durl[0].url
+      })
+    }
+  }
+})
 
 function gotoChannel(mid: number) {
   window.open(`//space.bilibili.com/${mid}`)
@@ -80,10 +100,12 @@ function toggleWatchLater() {
 }
 
 function handleMouseEnter() {
+  isHover.value = true
   contentVisibility.value = 'visible'
 }
 
 function handelMouseLeave() {
+  isHover.value = false
   clearTimeout(mouseLeaveTimeOut.value)
   mouseLeaveTimeOut.value = setTimeout(() => {
     contentVisibility.value = 'auto'
@@ -169,6 +191,17 @@ function handelMouseLeave() {
           duration-300 ease-in-out
           group-hover:z-2
         >
+          <Transition v-if="showPreview" name="fade">
+            <video
+              v-if="previewVideoUrl && isHover"
+              autoplay muted
+              pos="absolute top-0 left-0" w-full aspect-video rounded="$bew-radius"
+            >
+              <source :src="previewVideoUrl" type="video/mp4">
+
+            </video>
+          </Transition>
+          <!-- <video  /> -->
           <!-- style="--un-shadow: 0 0 0 4px var(--bew-theme-color)" -->
           <!-- group-hover:transform="translate--4px" -->
           <!-- Ranking Number -->
diff --git a/src/contentScripts/views/Home/components/ForYou.vue b/src/contentScripts/views/Home/components/ForYou.vue
index 2b3e5916..cb4367b0 100644
--- a/src/contentScripts/views/Home/components/ForYou.vue
+++ b/src/contentScripts/views/Home/components/ForYou.vue
@@ -172,6 +172,8 @@ function jumpToLoginPage() {
           :danmaku="video.stat.danmaku"
           :published-timestamp="video.pubdate"
           :bvid="video.bvid"
+          :cid="video.cid"
+          show-preview
         />
       </template>
       <template v-else>
@@ -189,6 +191,8 @@ function jumpToLoginPage() {
           :bvid="video.bvid"
           :view-str="video.cover_left_text_1"
           :danmaku-str="video.cover_left_text_2"
+          :cid="video.player_args ? video.player_args.cid : 0"
+          show-preview
         />
       </template>
 
diff --git a/src/models/apiModels/video/videoPreview.ts b/src/models/apiModels/video/videoPreview.ts
new file mode 100644
index 00000000..cae0577f
--- /dev/null
+++ b/src/models/apiModels/video/videoPreview.ts
@@ -0,0 +1,56 @@
+export interface VideoPreviewResult {
+  code: number
+  message: string
+  ttl: number
+  data: Data
+}
+
+export interface Data {
+  from: string
+  result: string
+  message: string
+  quality: number
+  format: string
+  timelength: number
+  accept_format: string
+  accept_description: string[]
+  accept_quality: number[]
+  video_codecid: number
+  seek_param: string
+  seek_type: string
+  durl: Durl[]
+  support_formats: SupportFormat[]
+  high_format: null
+  volume: Volume
+  last_play_time: number
+  last_play_cid: number
+}
+
+export interface Durl {
+  order: number
+  length: number
+  size: number
+  ahead: string
+  vhead: string
+  url: string
+  backup_url: null
+}
+
+export interface SupportFormat {
+  quality: number
+  format: string
+  new_description: string
+  display_desc: string
+  superscript: string
+  codecs: null
+}
+
+export interface Volume {
+  measured_i: number
+  measured_lra: number
+  measured_tp: number
+  measured_threshold: number
+  target_offset: number
+  target_i: number
+  target_tp: number
+}