mirror of
https://github.com/blakeblackshear/frigate.git
synced 2026-02-08 20:25:26 +03:00
Fix layout for tall video
This commit is contained in:
parent
8d7ba46e4e
commit
ac85c3dc80
@ -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
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user