重构client，拆分组件

2025-10-22 20:14:11 +08:00
parent 5868407216
commit fe9bc8fd6c
23 changed files with 1601 additions and 1137 deletions
@@ -0,0 +1,41 @@
+import { forwardRef } from "react";
+import type { ObjectFit } from "../types";
+
+interface VideoPlayerProps {
+  videoUrl: string;
+  rotation: number;
+  objectFit: ObjectFit;
+  loop: boolean;
+  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:
+            rotation % 180 === 0
+              ? `rotate(${rotation}deg)`
+              : `translate(-50%, -50%) rotate(${rotation}deg)`,
+          transformOrigin: "center center",
+          objectFit,
+        }}
+        playsInline
+        loop={loop}
+        onClick={onTogglePlay}
+      />
+    );
+  }
+);
+
+VideoPlayer.displayName = "VideoPlayer";