chore(large-preview): prefer highest quality

magicdawn · Jan 2, 2025 · ccd4429 · ccd4429
1 parent adb4587
commit ccd4429
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 15 deletions.
diff --git a/src/components/VideoCard/index.tsx b/src/components/VideoCard/index.tsx
@@ -576,19 +576,24 @@ const VideoCardInner = memo(function VideoCardInner({
   const videoCurrentTimeRef = useRef<number | undefined>(undefined)
   const extraContent = (
     <>
-      {(showLargePreview || isHoveringOnLargePreview) && videoPreviewDataBox.state?.playUrl && (
+      {(showLargePreview || isHoveringOnLargePreview) && videoPreviewDataBox.state?.playUrls && (
         <LargePreview ref={largePreviewRef} aspectRatio={itemDimension.aspectRatio}>
           <RecoverableVideo
-            src={videoPreviewDataBox.state?.playUrl}
             currentTimeRef={videoCurrentTimeRef}
             autoPlay
             controls
+            loop
+            poster={cover}
             css={css`
               width: 100%;
               height: 100%;
               object-fit: contain;
             `}
-          />
+          >
+            {videoPreviewDataBox.state.playUrls.map((url, i) => (
+              <source key={i} src={url} />
+            ))}
+          </RecoverableVideo>
         </LargePreview>
       )}
     </>

diff --git a/src/components/VideoCard/services/index.ts b/src/components/VideoCard/services/index.ts
@@ -125,12 +125,12 @@ export function isImagePreviewDataValid(data?: ImagePreviewData) {
 
 // #region VideoPreview
 export type VideoPreviewData = {
-  playUrl?: string
+  playUrls?: string[]
   dimension?: VideoDetailData['dimension']
 }
 
 export const isVideoPreviewDataValid = (data?: VideoPreviewData): boolean => {
-  return !!data?.playUrl
+  return !!data?.playUrls?.length
 }
 
 const videoPreviewCache = new QuickLRU<string, VideoPreviewData>({
@@ -143,21 +143,21 @@ export const fetchVideoPreviewData = reusePendingPromise(async (bvid: string, ci
   const cached = videoPreviewCache.get(cacheKey)
   if (cached) return cached
 
-  let playUrl: string | undefined
+  let playUrls: string[] = []
   let dimension: VideoDetailData['dimension'] | undefined
   if (typeof cid === 'undefined') {
     const detail = await getVideoDetail(bvid)
     cid = detail.cid
     dimension = detail.dimension
   }
 
-  playUrl = await getVideoPlayUrl(bvid, cid)
-  debug('playUrl: bvid=%s cid=%s %s', bvid, cid, playUrl)
-  if (playUrl) {
-    videoPreviewCache.set(cacheKey, { playUrl, dimension })
+  playUrls = await getVideoPlayUrl(bvid, cid)
+  debug('playUrl: bvid=%s cid=%s %s', bvid, cid, playUrls)
+  if (playUrls) {
+    videoPreviewCache.set(cacheKey, { playUrls, dimension })
   }
 
-  return { playUrl, dimension }
+  return { playUrls, dimension }
 })
 
 // #endregion
diff --git a/src/modules/bilibili/video/play-url.ts b/src/modules/bilibili/video/play-url.ts
@@ -3,6 +3,7 @@
  */
 
 import { request } from '$request'
+import { orderBy } from 'es-toolkit'
 import type { VideoPlayUrlJson } from './play-url-types'
 
 /**
@@ -61,8 +62,10 @@ export async function getVideoPlayUrl(videoId: string | number, cid: number) {
   const res = await request.get('/x/player/wbi/playurl', { params })
   const json = res.data as VideoPlayUrlJson
 
-  const pickedVideos = json.data?.dash?.video.filter((v) => v.id === EResolution._480p) || []
-  const hevcUrl = pickedVideos.find((x) => x.codecid === ECodecId.HEVC)?.baseUrl
-  const avcUrl = pickedVideos.find((x) => x.codecid === ECodecId.AVC)?.baseUrl
-  return hevcUrl || avcUrl
+  const video = orderBy(json.data?.dash?.video || [], ['id', 'codecid'], ['desc', 'desc'])
+  const urls = video
+    .map((x) => [x.baseUrl])
+    .flat()
+    .filter(Boolean)
+  return urls
 }