administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-02-11 13:45:25 +03:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Make video controls more consistent

Browse Source
This commit is contained in:
Nicolas Mowen 2024-05-21 03:10:47 +05:30
parent 7fdd0979c5
commit fd9c18658d
1 changed files with 10 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
web/src/components/player/HlsVideoPlayer.tsx
View File

@ -16,6 +16,7 @@ import { AxiosResponse } from "axios";
import { toast } from "sonner"; import { toast } from "sonner";
import { useOverlayState } from "@/hooks/use-overlay-state"; import { useOverlayState } from "@/hooks/use-overlay-state";
import { usePersistence } from "@/hooks/use-persistence"; import { usePersistence } from "@/hooks/use-persistence";
import { cn } from "@/lib/utils";
// Android native hls does not seek correctly // Android native hls does not seek correctly
const USE_NATIVE_HLS = !isAndroid; const USE_NATIVE_HLS = !isAndroid;
@ -70,6 +71,10 @@ export default function HlsVideoPlayer({
height: videoRef.current.videoHeight, height: videoRef.current.videoHeight,
}); });
} }
setTallCamera(
videoRef.current.videoWidth / videoRef.current.videoHeight < 1.5,
);
} }
}, [videoRef, setFullResolution]); }, [videoRef, setFullResolution]);
@ -109,6 +114,7 @@ export default function HlsVideoPlayer({
// controls // controls
const [tallCamera, setTallCamera] = useState(false);
const [isPlaying, setIsPlaying] = useState(true); const [isPlaying, setIsPlaying] = useState(true);
const [muted, setMuted] = useOverlayState("playerMuted", true); const [muted, setMuted] = useOverlayState("playerMuted", true);
const [volume, setVolume] = useOverlayState("playerVolume", 1.0); const [volume, setVolume] = useOverlayState("playerVolume", 1.0);
@ -153,7 +159,10 @@ export default function HlsVideoPlayer({
return ( return (
<TransformWrapper minScale={1.0}> <TransformWrapper minScale={1.0}>
<VideoControls <VideoControls
className="absolute bottom-5 left-1/2 z-50 -translate-x-1/2" className={cn(
"absolute left-1/2 z-50 -translate-x-1/2",
tallCamera ? "bottom-12" : "bottom-5",
)}
video={videoRef.current} video={videoRef.current}
isPlaying={isPlaying} isPlaying={isPlaying}
show={visible && (controls || controlsOpen)} show={visible && (controls || controlsOpen)}