diff --git a/web/src/components/player/HlsVideoPlayer.tsx b/web/src/components/player/HlsVideoPlayer.tsx index 11207d233..5f96a017d 100644 --- a/web/src/components/player/HlsVideoPlayer.tsx +++ b/web/src/components/player/HlsVideoPlayer.tsx @@ -28,7 +28,7 @@ type HlsVideoPlayerProps = { onPlayerLoaded?: () => void; onTimeUpdate?: (time: number) => void; onPlaying?: () => void; - setLiveResolution?: React.Dispatch>; + setFullResolution?: React.Dispatch>; }; export default function HlsVideoPlayer({ videoRef, @@ -39,7 +39,7 @@ export default function HlsVideoPlayer({ onPlayerLoaded, onTimeUpdate, onPlaying, - setLiveResolution, + setFullResolution, }: HlsVideoPlayerProps) { // playback @@ -50,14 +50,14 @@ export default function HlsVideoPlayer({ const handleLoadedMetadata = useCallback(() => { setLoadedMetadata(true); if (videoRef.current) { - if (setLiveResolution) { - setLiveResolution({ + if (setFullResolution) { + setFullResolution({ width: videoRef.current.videoWidth, height: videoRef.current.videoHeight, }); } } - }, [videoRef, setLiveResolution]); + }, [videoRef, setFullResolution]); useEffect(() => { if (!videoRef.current) { diff --git a/web/src/components/player/LivePlayer.tsx b/web/src/components/player/LivePlayer.tsx index 541ef0d6a..221ce10f0 100644 --- a/web/src/components/player/LivePlayer.tsx +++ b/web/src/components/player/LivePlayer.tsx @@ -27,7 +27,7 @@ type LivePlayerProps = { iOSCompatFullScreen?: boolean; pip?: boolean; onClick?: () => void; - setLiveResolution: React.Dispatch>; + setFullResolution: React.Dispatch>; }; export default function LivePlayer({ @@ -42,7 +42,7 @@ export default function LivePlayer({ iOSCompatFullScreen = false, pip, onClick, - setLiveResolution, + setFullResolution, }: LivePlayerProps) { const [cameraHovered, setCameraHovered] = useState(false); @@ -125,7 +125,7 @@ export default function LivePlayer({ audioEnabled={playAudio} onPlaying={() => setLiveReady(true)} pip={pip} - setLiveResolution={setLiveResolution} + setFullResolution={setFullResolution} /> ); } else { diff --git a/web/src/components/player/MsePlayer.tsx b/web/src/components/player/MsePlayer.tsx index 29403f3f3..222f2ebcd 100644 --- a/web/src/components/player/MsePlayer.tsx +++ b/web/src/components/player/MsePlayer.tsx @@ -16,7 +16,7 @@ type MSEPlayerProps = { audioEnabled?: boolean; pip?: boolean; onPlaying?: () => void; - setLiveResolution?: React.Dispatch>; + setFullResolution?: React.Dispatch>; }; function MSEPlayer({ @@ -26,7 +26,7 @@ function MSEPlayer({ audioEnabled = false, pip = false, onPlaying, - setLiveResolution, + setFullResolution, }: MSEPlayerProps) { let connectTS: number = 0; @@ -61,13 +61,13 @@ function MSEPlayer({ }, [camera]); const handleLoadedMetadata = useCallback(() => { - if (videoRef.current && setLiveResolution) { - setLiveResolution({ + if (videoRef.current && setFullResolution) { + setFullResolution({ width: videoRef.current.videoWidth, height: videoRef.current.videoHeight, }); } - }, [setLiveResolution]); + }, [setFullResolution]); const play = () => { const currentVideo = videoRef.current; diff --git a/web/src/components/player/dynamic/DynamicVideoPlayer.tsx b/web/src/components/player/dynamic/DynamicVideoPlayer.tsx index a8e6d5434..3f144e04b 100644 --- a/web/src/components/player/dynamic/DynamicVideoPlayer.tsx +++ b/web/src/components/player/dynamic/DynamicVideoPlayer.tsx @@ -25,7 +25,7 @@ type DynamicVideoPlayerProps = { onControllerReady: (controller: DynamicVideoController) => void; onTimestampUpdate?: (timestamp: number) => void; onClipEnded?: () => void; - setLiveResolution: React.Dispatch>; + setFullResolution: React.Dispatch>; }; export default function DynamicVideoPlayer({ className, @@ -38,7 +38,7 @@ export default function DynamicVideoPlayer({ onControllerReady, onTimestampUpdate, onClipEnded, - setLiveResolution, + setFullResolution, }: DynamicVideoPlayerProps) { const apiHost = useApiHost(); const { data: config } = useSWR("config"); @@ -185,7 +185,7 @@ export default function DynamicVideoPlayer({ setIsLoading(false); setNoRecording(false); }} - setLiveResolution={setLiveResolution} + setFullResolution={setFullResolution} /> ({ + const [fullResolution, setFullResolution] = useState({ width: 0, height: 0, }); @@ -198,7 +198,7 @@ export function RecordingView({ const onSelectCamera = useCallback( (newCam: string) => { setMainCamera(newCam); - setLiveResolution({ + setFullResolution({ width: 0, height: 0, }); @@ -221,13 +221,13 @@ export function RecordingView({ return undefined; } - if (liveResolution.width && liveResolution.height) { - return liveResolution.width / liveResolution.height; + if (fullResolution.width && fullResolution.height) { + return fullResolution.width / fullResolution.height; } else { return camera.detect.width / camera.detect.height; } }, - [config, liveResolution], + [config, fullResolution], ); const mainCameraAspect = useMemo(() => { @@ -411,7 +411,7 @@ export function RecordingView({ mainControllerRef.current = controller; }} isScrubbing={scrubbing || exportMode == "timeline"} - setLiveResolution={setLiveResolution} + setFullResolution={setFullResolution} /> {isDesktop && ( diff --git a/web/src/views/live/LiveCameraView.tsx b/web/src/views/live/LiveCameraView.tsx index 1c0c34084..705920299 100644 --- a/web/src/views/live/LiveCameraView.tsx +++ b/web/src/views/live/LiveCameraView.tsx @@ -150,15 +150,15 @@ export default function LiveCameraView({ camera }: LiveCameraViewProps) { const [fullscreen, setFullscreen] = useState(false); const [pip, setPip] = useState(false); - const [liveResolution, setLiveResolution] = useState({ + const [fullResolution, setFullResolution] = useState({ width: 0, height: 0, }); const growClassName = useMemo(() => { let aspect; - if (liveResolution.width && liveResolution.height) { - aspect = liveResolution.width / liveResolution.height; + if (fullResolution.width && fullResolution.height) { + aspect = fullResolution.width / fullResolution.height; } else { aspect = camera.detect.width / camera.detect.height; } @@ -184,7 +184,7 @@ export default function LiveCameraView({ camera }: LiveCameraViewProps) { } else { return "absolute top-2 bottom-2 left-[50%] -translate-x-[50%]"; } - }, [camera, fullscreen, isPortrait, liveResolution]); + }, [camera, fullscreen, isPortrait, fullResolution]); const preferredLiveMode = useMemo(() => { if (isSafari || mic) { @@ -199,12 +199,12 @@ export default function LiveCameraView({ camera }: LiveCameraViewProps) { }, [windowWidth, windowHeight]); const cameraAspectRatio = useMemo(() => { - if (liveResolution.width && liveResolution.height) { - return liveResolution.width / liveResolution.height; + if (fullResolution.width && fullResolution.height) { + return fullResolution.width / fullResolution.height; } else { return camera.detect.width / camera.detect.height; } - }, [camera, liveResolution]); + }, [camera, fullResolution]); const aspectRatio = useMemo(() => { if (isMobile || fullscreen) { @@ -362,7 +362,7 @@ export default function LiveCameraView({ camera }: LiveCameraViewProps) { iOSCompatFullScreen={isIOS} preferredLiveMode={preferredLiveMode} pip={pip} - setLiveResolution={setLiveResolution} + setFullResolution={setFullResolution} /> {camera.onvif.host != "" && (