refactor: 重构作品播放页性能、媒体同步与内存管理

Co-authored-by: Cursor <cursoragent@cursor.com>

app/aweme/[awemeId]/components/VideoPlayer.tsx

@@ -1,4 +1,4 @@
-import { forwardRef } from "react";
+import { forwardRef, memo } from "react";
 import type { ObjectFit } from "../types.ts";
 
 interface VideoPlayerProps {
@@ -9,33 +9,33 @@ interface VideoPlayerProps {
   onTogglePlay: () => void;
 }
 
-export const VideoPlayer = forwardRef<HTMLVideoElement, VideoPlayerProps>(
-  ({ videoUrl, rotation, objectFit, loop, onTogglePlay }, ref) => {
-    return (
-      <video
-        ref={ref}
-        src={videoUrl}
-        className={[
-          // 旋转 0/180：充满容器盒子；
-          // 旋转 90/270：用中心定位 + 100vh/100vw，保证铺满全屏
-          rotation % 180 === 0
-            ? "absolute inset-0 h-full w-full bg-black/70 cursor-pointer"
-            : "absolute top-1/2 left-1/2 h-[100vw] w-[100vh] bg-black/70 cursor-pointer",
-        ].join(" ")}
-        style={{
-          transform:
+export const VideoPlayer = memo(
+  forwardRef<HTMLVideoElement, VideoPlayerProps>(
+    ({ videoUrl, rotation, objectFit, loop, onTogglePlay }, ref) => {
+      return (
+        <video
+          ref={ref}
+          src={videoUrl}
+          className={
             rotation % 180 === 0
-              ? `rotate(${rotation}deg)`
-              : `translate(-50%, -50%) rotate(${rotation}deg)`,
-          transformOrigin: "center center",
-          objectFit,
-        }}
-        playsInline
-        loop={loop}
-        onClick={onTogglePlay}
-      />
-    );
-  },
+              ? "absolute inset-0 h-full w-full bg-black/70 cursor-pointer"
+              : "absolute top-1/2 left-1/2 h-[100vw] w-[100vh] bg-black/70 cursor-pointer"
+          }
+          style={{
+            transform:
+              rotation % 180 === 0
+                ? `rotate(${rotation}deg)`
+                : `translate(-50%, -50%) rotate(${rotation}deg)`,
+            transformOrigin: "center center",
+            objectFit,
+          }}
+          playsInline
+          loop={loop}
+          onClick={onTogglePlay}
+        />
+      );
+    },
+  ),
 );
 
 VideoPlayer.displayName = "VideoPlayer";