mirror of
https://github.com/blakeblackshear/frigate.git
synced 2026-02-11 13:45:25 +03:00
rename
This commit is contained in:
parent
20f6b7e7c1
commit
abb9ed9edc
@ -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) {
|
||||||
|
|||||||
@ -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 {
|
||||||
|
|||||||
@ -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;
|
||||||
|
|||||||
@ -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}`}
|
||||||
|
|||||||
@ -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 && (
|
||||||
|
|||||||
@ -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 != "" && (
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user