This commit is contained in:
Josh Hawkins 2024-04-29 21:47:49 -05:00
parent 20f6b7e7c1
commit abb9ed9edc
6 changed files with 30 additions and 30 deletions

View File

@ -28,7 +28,7 @@ type HlsVideoPlayerProps = {
onPlayerLoaded?: () => void;
onTimeUpdate?: (time: number) => void;
onPlaying?: () => void;
setLiveResolution?: React.Dispatch<React.SetStateAction<VideoResolutionType>>;
setFullResolution?: React.Dispatch<React.SetStateAction<VideoResolutionType>>;
};
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) {

View File

@ -27,7 +27,7 @@ type LivePlayerProps = {
iOSCompatFullScreen?: boolean;
pip?: boolean;
onClick?: () => void;
setLiveResolution: React.Dispatch<React.SetStateAction<VideoResolutionType>>;
setFullResolution: React.Dispatch<React.SetStateAction<VideoResolutionType>>;
};
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 {

View File

@ -16,7 +16,7 @@ type MSEPlayerProps = {
audioEnabled?: boolean;
pip?: boolean;
onPlaying?: () => void;
setLiveResolution?: React.Dispatch<SetStateAction<VideoResolutionType>>;
setFullResolution?: React.Dispatch<SetStateAction<VideoResolutionType>>;
};
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;

View File

@ -25,7 +25,7 @@ type DynamicVideoPlayerProps = {
onControllerReady: (controller: DynamicVideoController) => void;
onTimestampUpdate?: (timestamp: number) => void;
onClipEnded?: () => void;
setLiveResolution: React.Dispatch<React.SetStateAction<VideoResolutionType>>;
setFullResolution: React.Dispatch<React.SetStateAction<VideoResolutionType>>;
};
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<FrigateConfig>("config");
@ -185,7 +185,7 @@ export default function DynamicVideoPlayer({
setIsLoading(false);
setNoRecording(false);
}}
setLiveResolution={setLiveResolution}
setFullResolution={setFullResolution}
/>
<PreviewPlayer
className={`${isScrubbing || isLoading ? "visible" : "hidden"} ${className}`}

View File

@ -190,7 +190,7 @@ export function RecordingView({
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [currentTime, scrubbing]);
const [liveResolution, setLiveResolution] = useState<VideoResolutionType>({
const [fullResolution, setFullResolution] = useState<VideoResolutionType>({
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}
/>
</div>
{isDesktop && (

View File

@ -150,15 +150,15 @@ export default function LiveCameraView({ camera }: LiveCameraViewProps) {
const [fullscreen, setFullscreen] = useState(false);
const [pip, setPip] = useState(false);
const [liveResolution, setLiveResolution] = useState<VideoResolutionType>({
const [fullResolution, setFullResolution] = useState<VideoResolutionType>({
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<number>(() => {
if (isMobile || fullscreen) {
@ -362,7 +362,7 @@ export default function LiveCameraView({ camera }: LiveCameraViewProps) {
iOSCompatFullScreen={isIOS}
preferredLiveMode={preferredLiveMode}
pip={pip}
setLiveResolution={setLiveResolution}
setFullResolution={setFullResolution}
/>
</div>
{camera.onvif.host != "" && (