From 8bdcc66929ba44f2ee2960ea40055331577033b5 Mon Sep 17 00:00:00 2001
From: YeonV <trusted.yeon@gmail.com>
Date: Mon, 20 Jan 2025 02:12:18 +0100
Subject: [PATCH] add type field to ws event; add beta flag

---
 .../PixelGraph/PixelGraphCanvas.tsx           | 38 ++++++++++++-------
 src/pages/Settings/BetaFeatures.tsx           |  7 ++++
 src/store/ui/storeFeatures.tsx                |  7 +++-
 src/utils/Websocket.ts                        |  7 +++-
 4 files changed, 42 insertions(+), 17 deletions(-)

diff --git a/src/components/PixelGraph/PixelGraphCanvas.tsx b/src/components/PixelGraph/PixelGraphCanvas.tsx
index 6f13d8c3..8b67eeab 100644
--- a/src/components/PixelGraph/PixelGraphCanvas.tsx
+++ b/src/components/PixelGraph/PixelGraphCanvas.tsx
@@ -2,7 +2,7 @@ import { useEffect, useRef } from 'react'
 import useStore from '../../store/useStore'
 import { useShallow } from 'zustand/shallow'
 import hexColor from '../../pages/Devices/EditVirtuals/EditMatrix/Actions/hexColor'
-// import ws from '../../utils/Websocket'
+import ws from '../../utils/Websocket'
 
 const PixelGraphCanvas = ({
   virtId,
@@ -35,6 +35,7 @@ const PixelGraphCanvas = ({
       config: state.config
     }))
   )
+  const features = useStore((state) => state.features)
   const smoothing = useStore(
     (state) => state.uiPersist.pixelGraphSettings?.smoothing
   )
@@ -88,18 +89,18 @@ const PixelGraphCanvas = ({
         }
         ctx.putImageData(imageData, 0, 0)
 
-        // if (ws && typeof ws !== 'string') {
-        //   const request = {
-        //     event_filter: {
-        //       vis_id: virtId,
-        //       is_device: !!virtuals[virtId]?.is_device
-        //     },
-        //     event_type: 'visualisation_update',
-        //     // id: i,
-        //     type: 'subscribe_event'
-        //   }
-        //   ws.send(JSON.stringify(++request.id && request))
-        // }
+        if (features.websocket_debug) {
+          if (ws && typeof ws !== 'string') {
+            const request = {
+              type: 'event',
+              event_type: 'visualisation_updated',
+              id: e.detail.rid,
+              vis_id: virtId,
+              timestamp: e.detail.timestamp
+            }
+            ws.send(JSON.stringify(request))
+          }
+        }
       }
     }
 
@@ -107,7 +108,16 @@ const PixelGraphCanvas = ({
     return () => {
       document.removeEventListener('visualisation_update', handleWebsockets)
     }
-  }, [virtId, virtuals, pixelGraphs, devices, graphs, config, showMatrix])
+  }, [
+    virtId,
+    virtuals,
+    pixelGraphs,
+    devices,
+    graphs,
+    config,
+    showMatrix,
+    features.websocket_debug
+  ])
 
   const render =
     (virtuals[virtId].active && virtuals[virtId].effect?.name) ||
diff --git a/src/pages/Settings/BetaFeatures.tsx b/src/pages/Settings/BetaFeatures.tsx
index 0e290d3d..8999a1cb 100644
--- a/src/pages/Settings/BetaFeatures.tsx
+++ b/src/pages/Settings/BetaFeatures.tsx
@@ -23,6 +23,13 @@ const BetaFeatures = () => {
         checked={features.wakelock}
         onChange={() => setFeatures('wakelock', !features.wakelock)}
       />
+      <SettingsRow
+        title="Websocket debug"
+        checked={features.websocket_debug}
+        onChange={() =>
+          setFeatures('websocket_debug', !features.websocket_debug)
+        }
+      />
       {showFeatures.integrations ? (
         <SettingsRow
           title="Integrations"
diff --git a/src/store/ui/storeFeatures.tsx b/src/store/ui/storeFeatures.tsx
index aa22eb7a..2332ed5a 100644
--- a/src/store/ui/storeFeatures.tsx
+++ b/src/store/ui/storeFeatures.tsx
@@ -31,6 +31,7 @@ export type IFeatures =
   | 'gamepad'
   | 'wakelock'
   | 'melbankGraph'
+  | 'websocket_debug'
 
 const storeFeatures = (set: any) => ({
   features: {
@@ -62,7 +63,8 @@ const storeFeatures = (set: any) => ({
     gamepad: false,
     matrix_cam: false,
     wakelock: false,
-    melbankGraph: false
+    melbankGraph: false,
+    websocket_debug: false
   },
   showFeatures: {
     dev: false,
@@ -93,7 +95,8 @@ const storeFeatures = (set: any) => ({
     gamepad: false,
     matrix_cam: false,
     wakelock: false,
-    melbankGraph: false
+    melbankGraph: false,
+    websocket_debug: false
   },
   setFeatures: (feat: IFeatures, use: boolean): void =>
     set(
diff --git a/src/utils/Websocket.ts b/src/utils/Websocket.ts
index 68c5594f..e0fdaa66 100644
--- a/src/utils/Websocket.ts
+++ b/src/utils/Websocket.ts
@@ -93,13 +93,18 @@ function createSocket() {
       },
       onmessage: (event) => {
         const data = JSON.parse(event.data)
+        if (!data?.event_type) {
+          return
+        }
         if (data.event_type === 'visualisation_update') {
           document.dispatchEvent(
             new CustomEvent('visualisation_update', {
               detail: {
                 id: data.vis_id,
                 pixels: data.pixels,
-                shape: data.shape
+                shape: data.shape,
+                rid: data.id,
+                timestamp: data.timestamp
               }
             })
           )