Live View Done

2025-11-18 17:15:03 +05:30 · 2025-11-18 17:15:03 +05:30 · 1d71f8f369
parent f0e6b704cd
commit 1d71f8f369
6 changed files with 149 additions and 39 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -15,6 +15,7 @@
        "chalk": "^5.6.2",
        "electron-store": "^11.0.2",
        "get-windows": "^9.2.3",
+        "https": "^1.0.0",
        "lucide-react": "^0.552.0",
        "luxon": "^3.7.2",
        "os-utils": "^0.0.14",
@ -7040,6 +7041,12 @@
        "node": ">=10.19.0"
      }
    },
+    "node_modules/https": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/https/-/https-1.0.0.tgz",
+      "integrity": "sha512-4EC57ddXrkaF0x83Oj8sM6SLQHAWXw90Skqu2M4AEWENZ3F02dFJE/GARA8igO79tcgYqGrD7ae4f5L3um2lgg==",
+      "license": "ISC"
+    },
    "node_modules/https-proxy-agent": {
      "version": "7.0.6",
      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-7.0.6.tgz",
--- a/package.json
+++ b/package.json
@ -7,7 +7,7 @@
  "scripts": {
    "dev": "npm-run-all --parallel dev:react dev:electron",
    "dev:react": "vite",
-    "dev:electron": "npm run build && cross-env NODE_ENV=development electron .",
+    "dev:electron": "npm run build && cross-env NODE_ENV=development electron --inspect=5858 .",
    "prod:electron": "npm run build && cross-env NODE_ENV=production electron .",
    "build": "tsc && vite build",
    "preview": "vite preview",
@ -26,6 +26,7 @@
    "chalk": "^5.6.2",
    "electron-store": "^11.0.2",
    "get-windows": "^9.2.3",
+    "https": "^1.0.0",
    "lucide-react": "^0.552.0",
    "luxon": "^3.7.2",
    "os-utils": "^0.0.14",
--- a/src/electron/api/axiosClient.ts
+++ b/src/electron/api/axiosClient.ts
@ -3,11 +3,17 @@ import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios';
 import { getToken } from '../utils/tokenHelper.js';
 import chalk from "chalk";
 import { sendTokenExpired } from '../ipc/ipcHandler.js';
+import https from 'https';

 const TOKEN_KEY = 'ACCESS_TOKEN';

+const httpsAgent = new https.Agent({
+    rejectUnauthorized: false
+});
+
 const api: AxiosInstance = axios.create({
-    baseURL: 'https://dreadingly-unfighting-pandora.ngrok-free.dev/api/v1/va', // 🔁 your backend
+    baseURL: 'https://quality-friendly-goldfish.ngrok-free.app/api/v1/va', // 🔁 your backend
+    httpsAgent
    // timeout: 10000,
 });

--- a/src/electron/main.ts
+++ b/src/electron/main.ts
@ -53,7 +53,7 @@ app.on("ready", async () => {
    show: true,
    skipTaskbar: true,
    webPreferences: {
-      devTools: false,
+      devTools: true,
    }
  });

@ -77,7 +77,7 @@ app.on("ready", async () => {
    frame: process.platform === "darwin" ? false : true,
    show: false, // speed improvement
    webPreferences: {
-      devTools: false,
+      devTools: true,
      preload: getPreloadPath(),
      contextIsolation: true,
      nodeIntegration: false,
@ -101,7 +101,7 @@ app.on("ready", async () => {
  // ------------------------------------
  if (isDev()) {
    win.loadURL("http://localhost:5123");
-    // win.webContents.openDevTools(); // Optional (slows startup)
+    win.webContents.openDevTools(); // Optional (slows startup)
  } else {
    win.loadFile(getUIPath());
  }
@ -128,21 +128,21 @@ app.on("ready", async () => {
 });


-app.on('browser-window-focus', () => {
-  globalShortcut.register('CommandOrControl+R', () => {
-    // Do nothing; disables reload
-  });
-  globalShortcut.register('F5', () => {
-    // Do nothing; disables reload
-  });
-  globalShortcut.register('CommandOrControl+Shift+I', () => {
-    // Do nothing; disables DevTools
-  });
-});
+// app.on('browser-window-focus', () => {
+//   globalShortcut.register('CommandOrControl+R', () => {
+//     // Do nothing; disables reload
+//   });
+//   globalShortcut.register('F5', () => {
+//     // Do nothing; disables reload
+//   });
+//   globalShortcut.register('CommandOrControl+Shift+I', () => {
+//     // Do nothing; disables DevTools
+//   });
+// });

-app.on('browser-window-blur', () => {
-  globalShortcut.unregisterAll();
-});
+// app.on('browser-window-blur', () => {
+//   globalShortcut.unregisterAll();
+// });


 // ---------------------------
--- a/src/electron/utils/utilityFunctions.ts
+++ b/src/electron/utils/utilityFunctions.ts
@ -2,12 +2,18 @@ import { app, BrowserWindow, desktopCapturer } from "electron";
 import * as fs from "fs";
 import path from "path";
 import axios from 'axios';
+import https from 'https';
 import sharp from 'sharp';
 import { saveToken } from "./tokenHelper.js";
 import { activeWindow } from "get-windows";
 import { exec } from "child_process";
 import { getUIPath } from "../pathResolver.js";

+const httpsAgent = new https.Agent({
+    rejectUnauthorized: false
+});
+
+
 // Blur using an offscreen canvas
 async function blurAndCompressBase64Image(base64: string): Promise<Buffer> {
    const buffer = Buffer.from(base64.replace(/^data:image\/\w+;base64,/, ''), 'base64');
@ -64,9 +70,9 @@ export const handleLogin = async (credentials: { email: string, password: string
        try {
            console.log("➡️ Calling API...");
            const response = await axios.post(
-                'https://dreadingly-unfighting-pandora.ngrok-free.dev/api/v1/va/login',
+                'https://quality-friendly-goldfish.ngrok-free.app/api/v1/va/login',
                { userDetails: { ...credentials } },
-                { headers: { "ngrok-skip-browser-warning": 69420 } }
+                { headers: { "ngrok-skip-browser-warning": 69420 }, httpsAgent }
            );

            console.log("API CAlled", response)
--- a/src/ui/layout/DashboardLayout.tsx
+++ b/src/ui/layout/DashboardLayout.tsx
@ -371,6 +371,9 @@ const DashboardLayout = () => {
      const res = await window.electron.startProjectTracking(payload);
      console.log(" Synced start tracking:", res);
      setActiveProjectLogId(res?.logId)
+
+      handleConnect();
+
    } catch (error) {
      console.error(" Failed to sync project start:", error);
    }
@ -445,6 +448,7 @@ const DashboardLayout = () => {
      console.log("📡 Sending stop tracking payload:", payload);
      const res = await window.electron.stopProjectTracking(payload);
      console.log(" Synced stop tracking:", res);
+      handleDisconnect();
    } catch (error) {
      console.error("❌ Failed to sync project stop:", error);
    }
@ -536,6 +540,92 @@ const DashboardLayout = () => {
  };


+
+
+  const handleConnect = async () => {
+
+    const token = await window.electron.getToken("ACCESS_TOKEN");
+
+    if (socketRef.current) {
+      console.warn("Already connected");
+      return;
+    }
+    if (!selectedProject?.projectId) return
+
+    console.log(selectedProject?.projectId, "SelectedProject ID")
+    socketRef.current = io("https://quality-friendly-goldfish.ngrok-free.app", {
+      transports: ["websocket"],
+      secure: true,
+      rejectUnauthorized: false,
+      reconnection: true,
+      withCredentials: true,
+      forceNew: true,
+      extraHeaders: {
+        "Access-Control-Allow-Origin": "*"
+      },
+      auth: {
+        token: token,
+        projectId: selectedProject?.projectId,
+        userType: "va"
+      },
+    });
+
+    socketRef.current.on("connect", () => {
+      console.log("🟢 Connected:", socketRef.current?.id);
+      setIsConnected(true);
+
+      // Start sending every 5 seconds
+      intervalRef.current = setInterval(async () => {
+        const apps = await window.electron.getRunningApps()
+        socketRef.current?.emit("getVisibleApps", { token: await token, apps });
+
+        // const base64String = await window.electron.captureAppScreenShot("Screen 1");
+        // if (base64String) {
+        //   socketRef.current?.emit("sendImage", {token: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjY5MGIzMjhkMDkxMDFmNzRjZjUyNGMwNyIsImVtYWlsIjoiYmhhZ3dhbi5yQGhpY2dsb2JhbHNvbHV0aW9ucy5jb20iLCJuYW1lIjoiUm9oaXQiLCJpYXQiOjE3NjI4NTgxOTMsImV4cCI6MTc2Mjk0NDU5M30.UlHy3RU9W5LOid7smG7WzyNT7dnqhQT4qqzRrN1axmU", image: base64String, title: "Screen 1"});
+        // }
+      }, 5000);
+    });
+
+    socketRef.current.on("appToCapture", async ({ appTitle }) => {
+      console.log("📸 Capture requested for:", appTitle);
+
+      const base64String = await window.electron.captureAppScreenShot(appTitle);
+      if (base64String && socketRef.current) {
+        socketRef.current.emit("sendImage", {
+          token: token,
+          image: base64String,
+          title: appTitle
+        });
+      }
+    });
+
+    socketRef.current.on("disconnect", () => {
+      console.log("🔴 Disconnected");
+      setIsConnected(false);
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+        intervalRef.current = null;
+      }
+    });
+  };
+
+  const handleDisconnect = () => {
+    if (intervalRef.current) {
+      clearInterval(intervalRef.current);
+      intervalRef.current = null;
+    }
+
+    if (socketRef.current) {
+      socketRef.current.disconnect();
+      socketRef.current = null;
+      setIsConnected(false);
+      console.log("🔌 Disconnected manually");
+    }
+  };
+
+
+
+
  const trackingState: TrackingState = {
    selectedProject,
    projectTrackingMap,
@ -567,21 +657,21 @@ const DashboardLayout = () => {
        <header className="w-full  flex justify-between items-center h-12 px-6 bg-base-100 border-b border-base-300 sticky top-0 z-30">
          {/* Left Section */}
          {/* {!isConnected ? (
-          <button
-            onClick={handleConnect}
-            className="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded"
-          >
-            Connect
-          </button>
-        ) : (
-          <button
-            onClick={handleDisconnect}
-            className="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded"
-          >
-            Disconnect
-          </button>
-        )} */}
-        <div className="flex items-center space-x-3">
+            <button
+              onClick={handleConnect}
+              className="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded"
+            >
+              Connect
+            </button>
+          ) : (
+            <button
+              onClick={handleDisconnect}
+              className="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded"
+            >
+              Disconnect
+            </button>
+          )} */}
+          <div className="flex items-center space-x-3">
            {selectedProject ? (
              isTracking ? (
                <button
@ -656,7 +746,7 @@ const DashboardLayout = () => {
      <div className={`flex ${!isTracking ? "max-h-screen min-h-screen" : " h-[calc(100vh-3rem)]"} bg-base-200 overflow-hidden`}>
        {/* Sidebar */}
        <aside className="w-20 bg-base-100 border-r border-base-300 flex flex-col items-center py-4 space-y-4">
-          {menuItems.map((item , index) => (
+          {menuItems.map((item, index) => (
            <div className="tooltip z-100 tooltip-right" key={item.label} data-tip={item.label}>
              <NavLink
                key={item.label}