Fix UI Crash (#78)

* Attempted fix for UI crash

* Bump version

Author: scottbarnesg

backend/pyproject.toml

@@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name = "smart-sec-cam"
-version = "0.4.2"
+version = "0.4.3"
 authors = [
     { name = "Scott Barnes", email = "sgbarnes@protonmail.com" }
 ]

frontend/smart-sec-cam/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "smart-sec-cam",
-  "version": "0.4.2",
+  "version": "0.4.3",
   "private": true,
   "dependencies": {
     "@emotion/react": "^11.14.0",

frontend/smart-sec-cam/package.json

@@ -1,29 +1,52 @@
-import React from "react";
+import React, { useCallback } from "react";
 
 import { useCookies } from 'react-cookie';
 import io from "socket.io-client";
 
 import "./ImageViewer.css";
+import { base64ToBlob } from "../utils/base64ToBlob";
 
 const SERVER_URL = "https://localhost:8443"
 let socket = io(SERVER_URL)
 
 export default function ImageViewer({ room, isPreview }) {
-  const [srcBlob, setSrcBlob] = React.useState(null);
-  const [cookies, setCookie] = useCookies(["token"]);
+  const [srcUrl, setSrcUrl] = React.useState(null);
+  const [cookies] = useCookies(["token"]);
 
-  React.useEffect(() => {
-    socket.on('image', (payload) => {
-      if (payload.room === room) {
-        setSrcBlob(payload.data);
+  // Stable handler so we can deregister it reliably
+  const imageHandler = useCallback((payload) => {
+    if (payload.room !== room) return;
+    if (!payload.data) return;
+    try {
+      const blob = base64ToBlob(payload.data);
+      const newUrl = URL.createObjectURL(blob);
+      // Revoke the previous URL to free memory
+      if (srcUrl) {
+        URL.revokeObjectURL(srcUrl);
       }
-    });
+      setSrcUrl(newUrl);
+    } catch (e) {
+      // Silently ignore malformed data
+    }
+  }, [room, srcUrl]);
+
+  React.useEffect(() => {
+    // Register listener and join the room
+    socket.on('image', imageHandler);
     socket.emit('join', { room, token: cookies.token });
-  }, [room]);
+
+    // Cleanup on unmount or when room changes
+    return () => {
+      if (srcUrl) {
+        URL.revokeObjectURL(srcUrl);
+      }
+      socket.off('image', imageHandler);
+    };
+  }, [room, cookies.token, imageHandler]);
 
   return (
     <div className={`imageviewer ${isPreview ? 'preview' : 'main'}`}>
-      {srcBlob && <img src={`data:image/jpeg;base64,${srcBlob}`} alt={room} />}
+      {srcUrl && <img src={srcUrl} alt={room} />}
     </div>
   );
 }

frontend/smart-sec-cam/src/components/ImageViewer.js

@@ -0,0 +1,9 @@
+export function base64ToBlob(b64, mime = 'image/jpeg') {
+  const binary = atob(b64);
+  const len = binary.length;
+  const bytes = new Uint8Array(len);
+  for (let i = 0; i < len; i++) {
+    bytes[i] = binary.charCodeAt(i);
+  }
+  return new Blob([bytes], { type: mime });
+}