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; onPlayerLoaded?: () => void;
onTimeUpdate?: (time: number) => void; onTimeUpdate?: (time: number) => void;
onPlaying?: () => void; onPlaying?: () => void;
setLiveResolution?: React.Dispatch<React.SetStateAction<VideoResolutionType>>; setFullResolution?: React.Dispatch<React.SetStateAction<VideoResolutionType>>;
}; };
export default function HlsVideoPlayer({ export default function HlsVideoPlayer({
videoRef, videoRef,
@ -39,7 +39,7 @@ export default function HlsVideoPlayer({
onPlayerLoaded, onPlayerLoaded,
onTimeUpdate, onTimeUpdate,
onPlaying, onPlaying,
setLiveResolution, setFullResolution,
}: HlsVideoPlayerProps) { }: HlsVideoPlayerProps) {
// playback // playback
@ -50,14 +50,14 @@ export default function HlsVideoPlayer({
const handleLoadedMetadata = useCallback(() => { const handleLoadedMetadata = useCallback(() => {
setLoadedMetadata(true); setLoadedMetadata(true);
if (videoRef.current) { if (videoRef.current) {
if (setLiveResolution) { if (setFullResolution) {
setLiveResolution({ setFullResolution({
width: videoRef.current.videoWidth, width: videoRef.current.videoWidth,
height: videoRef.current.videoHeight, height: videoRef.current.videoHeight,
}); });
} }
} }
}, [videoRef, setLiveResolution]); }, [videoRef, setFullResolution]);
useEffect(() => { useEffect(() => {
if (!videoRef.current) { if (!videoRef.current) {

View File

@ -27,7 +27,7 @@ type LivePlayerProps = {
iOSCompatFullScreen?: boolean; iOSCompatFullScreen?: boolean;
pip?: boolean; pip?: boolean;
onClick?: () => void; onClick?: () => void;
setLiveResolution: React.Dispatch<React.SetStateAction<VideoResolutionType>>; setFullResolution: React.Dispatch<React.SetStateAction<VideoResolutionType>>;
}; };
export default function LivePlayer({ export default function LivePlayer({
@ -42,7 +42,7 @@ export default function LivePlayer({
iOSCompatFullScreen = false, iOSCompatFullScreen = false,
pip, pip,
onClick, onClick,
setLiveResolution, setFullResolution,
}: LivePlayerProps) { }: LivePlayerProps) {
const [cameraHovered, setCameraHovered] = useState(false); const [cameraHovered, setCameraHovered] = useState(false);
@ -125,7 +125,7 @@ export default function LivePlayer({
audioEnabled={playAudio} audioEnabled={playAudio}
onPlaying={() => setLiveReady(true)} onPlaying={() => setLiveReady(true)}
pip={pip} pip={pip}
setLiveResolution={setLiveResolution} setFullResolution={setFullResolution}
/> />
); );
} else { } else {

View File

@ -16,7 +16,7 @@ type MSEPlayerProps = {
audioEnabled?: boolean; audioEnabled?: boolean;
pip?: boolean; pip?: boolean;
onPlaying?: () => void; onPlaying?: () => void;
setLiveResolution?: React.Dispatch<SetStateAction<VideoResolutionType>>; setFullResolution?: React.Dispatch<SetStateAction<VideoResolutionType>>;
}; };
function MSEPlayer({ function MSEPlayer({
@ -26,7 +26,7 @@ function MSEPlayer({
audioEnabled = false, audioEnabled = false,
pip = false, pip = false,
onPlaying, onPlaying,
setLiveResolution, setFullResolution,
}: MSEPlayerProps) { }: MSEPlayerProps) {
let connectTS: number = 0; let connectTS: number = 0;
@ -61,13 +61,13 @@ function MSEPlayer({
}, [camera]); }, [camera]);
const handleLoadedMetadata = useCallback(() => { const handleLoadedMetadata = useCallback(() => {
if (videoRef.current && setLiveResolution) { if (videoRef.current && setFullResolution) {
setLiveResolution({ setFullResolution({
width: videoRef.current.videoWidth, width: videoRef.current.videoWidth,
height: videoRef.current.videoHeight, height: videoRef.current.videoHeight,
}); });
} }
}, [setLiveResolution]); }, [setFullResolution]);
const play = () => { const play = () => {
const currentVideo = videoRef.current; const currentVideo = videoRef.current;

View File

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

View File

@ -190,7 +190,7 @@ export function RecordingView({
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
}, [currentTime, scrubbing]); }, [currentTime, scrubbing]);
const [liveResolution, setLiveResolution] = useState<VideoResolutionType>({ const [fullResolution, setFullResolution] = useState<VideoResolutionType>({
width: 0, width: 0,
height: 0, height: 0,
}); });
@ -198,7 +198,7 @@ export function RecordingView({
const onSelectCamera = useCallback( const onSelectCamera = useCallback(
(newCam: string) => { (newCam: string) => {
setMainCamera(newCam); setMainCamera(newCam);
setLiveResolution({ setFullResolution({
width: 0, width: 0,
height: 0, height: 0,
}); });
@ -221,13 +221,13 @@ export function RecordingView({
return undefined; return undefined;
} }
if (liveResolution.width && liveResolution.height) { if (fullResolution.width && fullResolution.height) {
return liveResolution.width / liveResolution.height; return fullResolution.width / fullResolution.height;
} else { } else {
return camera.detect.width / camera.detect.height; return camera.detect.width / camera.detect.height;
} }
}, },
[config, liveResolution], [config, fullResolution],
); );
const mainCameraAspect = useMemo(() => { const mainCameraAspect = useMemo(() => {
@ -411,7 +411,7 @@ export function RecordingView({
mainControllerRef.current = controller; mainControllerRef.current = controller;
}} }}
isScrubbing={scrubbing || exportMode == "timeline"} isScrubbing={scrubbing || exportMode == "timeline"}
setLiveResolution={setLiveResolution} setFullResolution={setFullResolution}
/> />
</div> </div>
{isDesktop && ( {isDesktop && (

View File

@ -150,15 +150,15 @@ export default function LiveCameraView({ camera }: LiveCameraViewProps) {
const [fullscreen, setFullscreen] = useState(false); const [fullscreen, setFullscreen] = useState(false);
const [pip, setPip] = useState(false); const [pip, setPip] = useState(false);
const [liveResolution, setLiveResolution] = useState<VideoResolutionType>({ const [fullResolution, setFullResolution] = useState<VideoResolutionType>({
width: 0, width: 0,
height: 0, height: 0,
}); });
const growClassName = useMemo(() => { const growClassName = useMemo(() => {
let aspect; let aspect;
if (liveResolution.width && liveResolution.height) { if (fullResolution.width && fullResolution.height) {
aspect = liveResolution.width / liveResolution.height; aspect = fullResolution.width / fullResolution.height;
} else { } else {
aspect = camera.detect.width / camera.detect.height; aspect = camera.detect.width / camera.detect.height;
} }
@ -184,7 +184,7 @@ export default function LiveCameraView({ camera }: LiveCameraViewProps) {
} else { } else {
return "absolute top-2 bottom-2 left-[50%] -translate-x-[50%]"; return "absolute top-2 bottom-2 left-[50%] -translate-x-[50%]";
} }
}, [camera, fullscreen, isPortrait, liveResolution]); }, [camera, fullscreen, isPortrait, fullResolution]);
const preferredLiveMode = useMemo(() => { const preferredLiveMode = useMemo(() => {
if (isSafari || mic) { if (isSafari || mic) {
@ -199,12 +199,12 @@ export default function LiveCameraView({ camera }: LiveCameraViewProps) {
}, [windowWidth, windowHeight]); }, [windowWidth, windowHeight]);
const cameraAspectRatio = useMemo(() => { const cameraAspectRatio = useMemo(() => {
if (liveResolution.width && liveResolution.height) { if (fullResolution.width && fullResolution.height) {
return liveResolution.width / liveResolution.height; return fullResolution.width / fullResolution.height;
} else { } else {
return camera.detect.width / camera.detect.height; return camera.detect.width / camera.detect.height;
} }
}, [camera, liveResolution]); }, [camera, fullResolution]);
const aspectRatio = useMemo<number>(() => { const aspectRatio = useMemo<number>(() => {
if (isMobile || fullscreen) { if (isMobile || fullscreen) {
@ -362,7 +362,7 @@ export default function LiveCameraView({ camera }: LiveCameraViewProps) {
iOSCompatFullScreen={isIOS} iOSCompatFullScreen={isIOS}
preferredLiveMode={preferredLiveMode} preferredLiveMode={preferredLiveMode}
pip={pip} pip={pip}
setLiveResolution={setLiveResolution} setFullResolution={setFullResolution}
/> />
</div> </div>
{camera.onvif.host != "" && ( {camera.onvif.host != "" && (