42 lines
1.2 KiB
TypeScript
42 lines
1.2 KiB
TypeScript
import { forwardRef } from "react";
|
|
import type { ObjectFit } from "../types.ts";
|
|
|
|
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";
|