Fix layout for tall video

This commit is contained in:
Nicolas Mowen 2024-03-08 10:53:41 -07:00
parent 8d7ba46e4e
commit ac85c3dc80

View File

@ -29,19 +29,6 @@ export default function PreviewVideoPlayer({
}: PreviewVideoPlayerProps) { }: PreviewVideoPlayerProps) {
const { data: config } = useSWR<FrigateConfig>("config"); const { data: config } = useSWR<FrigateConfig>("config");
// playback behavior
const tallVideo = useMemo(() => {
if (!config) {
return false;
}
return (
config.cameras[camera].detect.width /
config.cameras[camera].detect.height <
1
);
}, [camera, config]);
// controlling playback // controlling playback
const previewRef = useRef<HTMLVideoElement | null>(null); const previewRef = useRef<HTMLVideoElement | null>(null);
@ -123,12 +110,12 @@ export default function PreviewVideoPlayer({
return ( return (
<div <div
className={`relative ${className ?? ""} ${onClick ? "cursor-pointer" : ""}`} className={`relative w-full ${className ?? ""} ${onClick ? "cursor-pointer" : ""}`}
onClick={onClick} onClick={onClick}
> >
<video <video
ref={previewRef} ref={previewRef}
className={`size-full rounded-2xl ${tallVideo ? "aspect-tall" : ""} bg-black`} className={`size-full rounded-2xl bg-black`}
preload="auto" preload="auto"
autoPlay autoPlay
playsInline playsInline