1
0
mirror of https://github.com/blakeblackshear/frigate.git synced 2025-03-04 00:17:22 +01:00
blakeblackshear.frigate/web/src/components/camera/AutoUpdatingCameraImage.tsx
Josh Hawkins 9f181014a1
UI tweaks ()
* Prevent "undefined" from being displayed in searchParams string

* Show message for no motion data

* Use theme colors for no preview found divs
2024-06-07 05:57:15 -06:00

79 lines
1.9 KiB
TypeScript

import { useCallback, useEffect, useState } from "react";
import CameraImage from "./CameraImage";
type AutoUpdatingCameraImageProps = {
camera: string;
searchParams?: URLSearchParams;
showFps?: boolean;
className?: string;
cameraClasses?: string;
reloadInterval?: number;
};
const MIN_LOAD_TIMEOUT_MS = 200;
export default function AutoUpdatingCameraImage({
camera,
searchParams = undefined,
showFps = true,
className,
cameraClasses,
reloadInterval = MIN_LOAD_TIMEOUT_MS,
}: AutoUpdatingCameraImageProps) {
const [key, setKey] = useState(Date.now());
const [fps, setFps] = useState<string>("0");
const [timeoutId, setTimeoutId] = useState<NodeJS.Timeout>();
useEffect(() => {
if (reloadInterval == -1) {
return;
}
setKey(Date.now());
return () => {
if (timeoutId) {
clearTimeout(timeoutId);
setTimeoutId(undefined);
}
};
// we know that these deps are correct
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [reloadInterval]);
const handleLoad = useCallback(() => {
if (reloadInterval == -1) {
return;
}
const loadTime = Date.now() - key;
if (showFps) {
setFps((1000 / Math.max(loadTime, reloadInterval)).toFixed(1));
}
setTimeoutId(
setTimeout(
() => {
setKey(Date.now());
},
loadTime > reloadInterval ? 1 : reloadInterval,
),
);
// we know that these deps are correct
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [key, setFps]);
return (
<div className={className}>
<CameraImage
camera={camera}
onload={handleLoad}
searchParams={`cache=${key}${searchParams ? `&${searchParams}` : ""}`}
className={cameraClasses}
/>
{showFps ? <span className="text-xs">Displaying at {fps}fps</span> : null}
</div>
);
}