Fix linter and fix lint issues (#10141)

web/src/components/camera/AutoUpdatingCameraImage.tsx

@@ -3,7 +3,7 @@ import CameraImage from "./CameraImage";
 
 type AutoUpdatingCameraImageProps = {
   camera: string;
-  searchParams?: {};
+  searchParams?: URLSearchParams;
   showFps?: boolean;
   className?: string;
   reloadInterval?: number;
@@ -13,7 +13,7 @@ const MIN_LOAD_TIMEOUT_MS = 200;
 
 export default function AutoUpdatingCameraImage({
   camera,
-  searchParams = "",
+  searchParams = undefined,
   showFps = true,
   className,
   reloadInterval = MIN_LOAD_TIMEOUT_MS,
@@ -35,6 +35,8 @@ export default function AutoUpdatingCameraImage({
         setTimeoutId(undefined);
       }
     };
+    // we know that these deps are correct
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [reloadInterval]);
 
   const handleLoad = useCallback(() => {
@@ -53,9 +55,11 @@ export default function AutoUpdatingCameraImage({
         () => {
           setKey(Date.now());
         },
-        loadTime > reloadInterval ? 1 : reloadInterval
-      )
+        loadTime > reloadInterval ? 1 : reloadInterval,
+      ),
     );
+    // we know that these deps are correct
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [key, setFps]);
 
   return (

web/src/components/camera/CameraImage.tsx

@@ -7,7 +7,7 @@ type CameraImageProps = {
   className?: string;
   camera: string;
   onload?: () => void;
-  searchParams?: {};
+  searchParams?: string;
 };
 
 export default function CameraImage({

web/src/components/camera/DebugCameraImage.tsx

@@ -24,25 +24,25 @@ export default function DebugCameraImage({
   const [showSettings, setShowSettings] = useState(false);
   const [options, setOptions] = usePersistence<Options>(
     `${cameraConfig?.name}-feed`,
-    emptyObject
+    emptyObject,
   );
   const handleSetOption = useCallback(
     (id: string, value: boolean) => {
       const newOptions = { ...options, [id]: value };
       setOptions(newOptions);
     },
-    [options]
+    [options, setOptions],
   );
   const searchParams = useMemo(
     () =>
       new URLSearchParams(
         Object.keys(options || {}).reduce((memo, key) => {
-          //@ts-ignore we know this is correct
+          //@ts-expect-error we know this is correct
           memo.push([key, options[key] === true ? "1" : "0"]);
           return memo;
-        }, [])
+        }, []),
       ),
-    [options]
+    [options],
   );
   const handleToggleSettings = useCallback(() => {
     setShowSettings(!showSettings);

web/src/components/camera/ResizingCameraImage.tsx

@@ -8,7 +8,7 @@ type CameraImageProps = {
   className?: string;
   camera: string;
   onload?: (event: Event) => void;
-  searchParams?: {};
+  searchParams?: string;
   stretch?: boolean; // stretch to fit width
   fitAspect?: number; // shrink to fit height
 };
@@ -58,10 +58,17 @@ export default function CameraImage({
     }
 
     return 100;
-  }, [availableWidth, aspectRatio, height, stretch]);
+  }, [
+    availableWidth,
+    aspectRatio,
+    containerHeight,
+    fitAspect,
+    height,
+    stretch,
+  ]);
   const scaledWidth = useMemo(
     () => Math.ceil(scaledHeight * aspectRatio - scrollBarWidth),
-    [scaledHeight, aspectRatio, scrollBarWidth]
+    [scaledHeight, aspectRatio, scrollBarWidth],
   );
 
   const img = useMemo(() => new Image(), []);
@@ -74,7 +81,7 @@ export default function CameraImage({
       }
       onload && onload(event);
     },
-    [img, scaledHeight, scaledWidth, setHasLoaded, onload, canvasRef]
+    [img, scaledHeight, scaledWidth, setHasLoaded, onload, canvasRef],
   );
 
   useEffect(() => {