camera zoom handling across components; unify zoom level type and improve state management

src/pages/FrontCamera.tsx

@@ -2,18 +2,9 @@ import { useState } from "react";
 import CameraSettings from "../components/CameraSettings/CameraSettings";
 import OverviewVideoContainer from "../components/FrontCameraSettings/OverviewVideoContainer";
 import { Toaster } from "sonner";
-import type { ZoomLevel } from "../types/types";
 
 const FrontCamera = () => {
-  const [zoomLevel, setZoomLevel] = useState<ZoomLevel>({
-    left: 0,
-    top: 0,
-    x: 0,
-    y: 0,
-    px: 0,
-    py: 0,
-    level: 1,
-  });
+  const [zoomLevel, setZoomLevel] = useState<number>(1);
   return (
     <div className="mx-auto flex flex-col lg:flex-row gap-2 px-1 sm:px-2 lg:px-0 w-full min-h-screen">
       <OverviewVideoContainer