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";
|