- sesstions start by default

- added restart session button

src/hooks/useGetOverviewSnapshot.ts

@@ -15,7 +15,6 @@ async function fetchSnapshot(cameraSide: string): Promise<Blob> {
   return response.blob();
 }
 
-/** Draw an ImageBitmap to canvas with aspect-fill (like object-fit: cover) */
 function drawBitmapToCanvas(canvas: HTMLCanvasElement, bitmap: ImageBitmap) {
   const ctx = canvas.getContext("2d");
   if (!ctx) return;
@@ -42,18 +41,14 @@ function drawBitmapToCanvas(canvas: HTMLCanvasElement, bitmap: ImageBitmap) {
   let drawWidth = width;
   let drawHeight = height;
 
-  // aspect-fit calculation (no cropping)
   if (srcAspect > dstAspect) {
-    // image is wider → fit to canvas width
     drawWidth = width;
     drawHeight = width / srcAspect;
   } else {
-    // image is taller → fit to canvas height
     drawHeight = height;
     drawWidth = height * srcAspect;
   }
 
-  // center image (adds black borders if aspect ratios differ)
   const dx = (width - drawWidth) / 50;
   const dy = (height - drawHeight) / 2;
 
@@ -66,7 +61,6 @@ export function useGetOverviewSnapshot(side: string) {
   const canvasRef = useRef<HTMLCanvasElement | null>(null);
   const latestBitmapRef = useRef<ImageBitmap | null>(null);
 
-  // Redraw helper; always draws the current bitmap if available
   const draw = useCallback(() => {
     const canvas = canvasRef.current;
     const bmp = latestBitmapRef.current;
@@ -82,16 +76,15 @@ export function useGetOverviewSnapshot(side: string) {
   } = useQuery({
     queryKey: ["overviewSnapshot", side],
     queryFn: () => fetchSnapshot(side),
-    // Poll ~4 fps when visible; pause when tab hidden
+
     refetchInterval: () => (document.visibilityState === "visible" ? 250 : false),
     refetchOnWindowFocus: false,
-    // Avoid keeping lots of blobs around in cache
-    gcTime: 0, // v5 name (cacheTime in v4)
+
+    gcTime: 0,
     staleTime: 0,
-    retry: false, // or a small number if you prefer retries
+    retry: false,
   });
 
-  // Convert Blob -> ImageBitmap and draw
   useEffect(() => {
     let cancelled = false;
     if (!snapshotBlob) return;
@@ -104,13 +97,11 @@ export function useGetOverviewSnapshot(side: string) {
           return;
         }
 
-        // Dispose previous bitmap to free memory
         if (latestBitmapRef.current) {
           latestBitmapRef.current.close();
         }
         latestBitmapRef.current = bitmap;
 
-        // Draw now (and again on next resize)
         draw();
       } catch {
         // noop — fetch handler surfaces the main error path
@@ -122,12 +113,11 @@ export function useGetOverviewSnapshot(side: string) {
     };
   }, [snapshotBlob, draw]);
 
-  // Redraw on resize & DPR changes
   useEffect(() => {
     const onResize = () => draw();
     const onDPR = () => draw();
     window.addEventListener("resize", onResize);
-    // Listen for DPR changes (some browsers support this)
+
     const mql = window.matchMedia(`(resolution: ${window.devicePixelRatio}dppx)`);
     mql.addEventListener?.("change", onDPR);
     return () => {
@@ -137,14 +127,13 @@ export function useGetOverviewSnapshot(side: string) {
   }, [draw]);
 
   useEffect(() => {
-    const el = canvasRef.current?.parentElement; // the box
+    const el = canvasRef.current?.parentElement;
     if (!el) return;
-    const ro = new ResizeObserver(() => draw()); // your draw() calls aspect-fit logic
+    const ro = new ResizeObserver(() => draw());
     ro.observe(el);
     return () => ro.disconnect();
   }, [draw]);
 
-  // Cleanup on unmount
   useEffect(() => {
     return () => {
       if (latestBitmapRef.current) {
@@ -154,7 +143,6 @@ export function useGetOverviewSnapshot(side: string) {
     };
   }, []);
 
-  // Optional: normalize error type
   const typedError = error instanceof Error ? error : undefined;
 
   return { canvasRef, isError, error: typedError, isPending };