feat: updated thumbnail bug fixed

app/src/modules/scene/scene.tsx

@@ -14,6 +14,7 @@ import { getAllProjects } from "../../services/dashboard/getAllProjects";
 import { getUserData } from "../../functions/getUserData";
 import { useLoadingProgress, useSocketStore } from "../../store/builder/store";
 import { Color, SRGBColorSpace } from "three";
+import { compressImage } from "../../utils/compressImage";
 
 export default function Scene({ layout }: { readonly layout: "Main Layout" | "Comparison Layout"; }) {
     const map = useMemo(() => [
@@ -31,23 +32,24 @@ export default function Scene({ layout }: { readonly layout: "Main Layout" | "Co
     const { loadingProgress } = useLoadingProgress();
 
     useEffect(() => {
-        if (!projectId && loadingProgress > 1) return;
+        if (!projectId || loadingProgress !== 0) return;
         getAllProjects(userId, organization).then((projects) => {
             if (!projects || !projects.Projects) return;
             let project = projects.Projects.find((val: any) => val.projectUuid === projectId || val._id === projectId);
             const canvas = document.getElementById("sceneCanvas")?.getElementsByTagName("canvas")[0];
             if (!canvas) return;
-            const screenshotDataUrl = (canvas as HTMLCanvasElement)?.toDataURL("image/png");
-            const updateProjects = {
-                projectId: project?._id,
-                organization,
-                userId,
-                projectName: project?.projectName,
-                thumbnail: screenshotDataUrl,
-            };
-            if (projectSocket) {
-                projectSocket.emit("v1:project:update", updateProjects);
-            }
+            compressImage((canvas as HTMLCanvasElement)?.toDataURL("image/png")).then((screenshotDataUrl) => {
+                const updateProjects = {
+                    projectId: project?._id,
+                    organization,
+                    userId,
+                    projectName: project?.projectName,
+                    thumbnail: screenshotDataUrl,
+                };
+                if (projectSocket) {
+                    projectSocket.emit("v1:project:update", updateProjects);
+                }
+            });
         }).catch((err) => {
             console.error(err);
         });
@@ -64,7 +66,7 @@ export default function Scene({ layout }: { readonly layout: "Main Layout" | "Co
                 onContextMenu={(e) => { e.preventDefault(); }}
                 performance={{ min: 0.9, max: 1.0 }}
                 onCreated={(e) => { e.scene.background = layout === "Main Layout" ? null : new Color(0x19191d); }}
-                gl={{ outputColorSpace: SRGBColorSpace, powerPreference: "high-performance", antialias: true }}
+                gl={{ outputColorSpace: SRGBColorSpace, powerPreference: "high-performance", antialias: true, preserveDrawingBuffer: true }}
             >
                 <Setup />
                 <Collaboration />

app/src/utils/compressImage.ts

@@ -0,0 +1,39 @@
+export async function compressImage(
+  dataUrl: string,
+  maxWidth = 400,
+  maxHeight = 400
+): Promise<string> {
+  return new Promise((resolve) => {
+    const img = new Image();
+    img.src = dataUrl;
+
+    img.onload = () => {
+      const { width, height } = img;
+
+      // Calculate aspect ratio preserving resize
+      let newWidth = width;
+      let newHeight = height;
+
+      if (width > height) {
+        if (width > maxWidth) {
+          newWidth = maxWidth;
+          newHeight = (height * maxWidth) / width;
+        }
+      } else {
+        if (height > maxHeight) {
+          newHeight = maxHeight;
+          newWidth = (width * maxHeight) / height;
+        }
+      }
+
+      const offCanvas = document.createElement("canvas");
+      const ctx = offCanvas.getContext("2d");
+
+      offCanvas.width = newWidth;
+      offCanvas.height = newHeight;
+
+      ctx?.drawImage(img, 0, 0, newWidth, newHeight);
+      resolve(offCanvas.toDataURL("image/png"));
+    };
+  });
+}