42 lines
1.1 KiB
TypeScript
42 lines
1.1 KiB
TypeScript
import { forwardRef, memo } from "react";
|
|
import type { ObjectFit } from "../types.ts";
|
|
|
|
interface VideoPlayerProps {
|
|
videoUrl: string;
|
|
rotation: number;
|
|
objectFit: ObjectFit;
|
|
loop: boolean;
|
|
onTogglePlay: () => void;
|
|
}
|
|
|
|
export const VideoPlayer = memo(
|
|
forwardRef<HTMLVideoElement, VideoPlayerProps>(
|
|
({ videoUrl, rotation, objectFit, loop, onTogglePlay }, ref) => {
|
|
return (
|
|
<video
|
|
ref={ref}
|
|
src={videoUrl}
|
|
className={
|
|
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"
|
|
}
|
|
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";
|