优化图文页

app/aweme/[awemeId]/hooks/useBackgroundCanvas.ts

@@ -23,6 +23,13 @@ export function useBackgroundCanvas({
     const ctx = canvas.getContext("2d");
     if (!ctx) return;
 
+    if (!isVideo) {
+      canvas.width = 1;
+      canvas.height = 1;
+      ctx.clearRect(0, 0, 1, 1);
+      return;
+    }
+
     const updateCanvasSize = () => {
       canvas.width = Math.floor(window.innerWidth / 10);
       canvas.height = Math.floor(window.innerHeight / 10);
@@ -39,40 +46,29 @@ export function useBackgroundCanvas({
     const drawMediaToCanvas = () => {
       if (!ctx) return;
 
-      let sourceElement: HTMLVideoElement | HTMLImageElement | null = null;
+      const sourceElement = videoRef.current;
 
-      if (isVideo) {
-        sourceElement = videoRef.current;
-      } else {
-        const scroller = scrollerRef.current;
-        if (scroller) {
-          // 虚拟滚动：查找所有图片容器，找到当前显示的那个
-          const containers = scroller.querySelectorAll<HTMLElement>('div[style*="translateX"]');
-          for (const container of containers) {
-            const img = container.querySelector("img, video");
-            if (img && container.style.transform.includes(`${idx * 100}%`)) {
-              sourceElement = img as HTMLImageElement | HTMLVideoElement;
-              break;
-            }
-          }
-        }
-      }
-
-      if (!sourceElement || (sourceElement instanceof HTMLVideoElement && sourceElement.readyState < 2)) return;
+      if (
+        !sourceElement ||
+        (sourceElement instanceof HTMLVideoElement &&
+          sourceElement.readyState < 2)
+      )
+        return;
 
       const canvasWidth = canvas.width;
       const canvasHeight = canvas.height;
-      const sourceWidth =
-        sourceElement instanceof HTMLVideoElement ? sourceElement.videoWidth : sourceElement.naturalWidth;
-      const sourceHeight =
-        sourceElement instanceof HTMLVideoElement ? sourceElement.videoHeight : sourceElement.naturalHeight;
+      const sourceWidth = sourceElement.videoWidth;
+      const sourceHeight = sourceElement.videoHeight;
 
       if (!sourceWidth || !sourceHeight) return;
 
       const canvasRatio = canvasWidth / canvasHeight;
       const sourceRatio = sourceWidth / sourceHeight;
 
-      let drawWidth: number, drawHeight: number, offsetX: number, offsetY: number;
+      let drawWidth: number,
+        drawHeight: number,
+        offsetX: number,
+        offsetY: number;
 
       if (canvasRatio > sourceRatio) {
         drawWidth = canvasWidth;