feat: update blocks metadata on paused visualizer

client/src/features/visualizer-threejs/VisualizerInstance.tsx

@@ -80,13 +80,11 @@ const VisualizerInstance: React.FC<RouteComponentProps<VisualizerRouteProps>> =
     useEffect(() => {
         const handleVisibilityChange = async () => {
             if (document.hidden) {
-                await feedSubscriptionStop();
                 setIsPlaying(false);
             }
         };
 
         const handleBlur = async () => {
-            await feedSubscriptionStop();
             setIsPlaying(false);
         };
 
@@ -118,13 +116,9 @@ const VisualizerInstance: React.FC<RouteComponentProps<VisualizerRouteProps>> =
                 return;
             }
 
-            if (isPlaying) {
-                feedSubscriptionStart();
-            } else {
-                await feedSubscriptionStop();
-            }
+            feedSubscriptionStart();
         })();
-    }, [feedService, isPlaying, runListeners]);
+    }, [feedService, runListeners]);
 
     /**
      * Control width and height of canvas
@@ -157,18 +151,46 @@ const VisualizerInstance: React.FC<RouteComponentProps<VisualizerRouteProps>> =
             setRunListeners(false);
             setIsPlaying(false);
             resetConfigState();
-            await feedSubscriptionStop();
+            await feedSubscriptionFinalize();
             setFeedService(ServiceFactory.get<NovaFeedClient>(`feed-${network}`));
         })();
     }, [network]);
 
+    useEffect(() => {
+        if (!runListeners) {
+            return;
+        }
+        setIsPlaying(true);
+
+        return () => {
+            bpsCounter.stop();
+        };
+    }, [runListeners]);
+
+    const feedSubscriptionStart = () => {
+        if (!feedService) {
+            return;
+        }
+        feedService.subscribeBlocks(onNewBlock, onBlockMetadataUpdate);
+
+        bpsCounter.start();
+    };
+
+    const feedSubscriptionFinalize = async () => {
+        if (!feedService) {
+            return;
+        }
+        await feedService.unsubscribeBlocks();
+        bpsCounter.reset();
+    };
+
     /**
      * Subscribe to updates
      * @param blockData The new block data
      */
     const onNewBlock = (blockData: IFeedBlockData) => {
         const emitterObj = emitterRef.current;
-        if (emitterObj && blockData) {
+        if (emitterObj && blockData && isPlaying) {
             const emitterBox = new Box3().setFromObject(emitterObj);
 
             const emitterCenter = new THREE.Vector3();
@@ -220,33 +242,6 @@ const VisualizerInstance: React.FC<RouteComponentProps<VisualizerRouteProps>> =
         }
     }
 
-    useEffect(() => {
-        if (!runListeners) {
-            return;
-        }
-        setIsPlaying(true);
-
-        return () => {
-            bpsCounter.stop();
-        };
-    }, [runListeners]);
-
-    const feedSubscriptionStart = () => {
-        if (!feedService) {
-            return;
-        }
-        feedService.subscribeBlocks(onNewBlock, onBlockMetadataUpdate);
-        bpsCounter.start();
-    };
-
-    const feedSubscriptionStop = async () => {
-        if (!feedService) {
-            return;
-        }
-        await feedService.unsubscribeBlocks();
-        bpsCounter.reset();
-    };
-
     return (
         <Wrapper
             key={network}

client/src/features/visualizer-threejs/store/tangle.ts

@@ -41,7 +41,7 @@ interface TangleState {
 
     colorQueue: Pick<BlockState, "id" | "color">[];
     addToColorQueue: (blockId: string, color: Color) => void;
-    removeFromColorQueue: (blockId: string) => void;
+    removeFromColorQueue: (blockIds: string[]) => void;
 
     // Map of blockId to index in Tangle 'InstancedMesh'
     blockIdToIndex: Map<string, number>;
@@ -155,11 +155,13 @@ export const useTangleStore = create<TangleState>()(
                 colorQueue: [...state.colorQueue, { id, color }],
             }));
         },
-        removeFromColorQueue: (blockId: string) => {
-            set((state) => ({
-                ...state,
-                colorQueue: state.colorQueue.filter((block) => block.id !== blockId),
-            }));
+        removeFromColorQueue: (blockIds) => {
+            if (blockIds.length > 0) {
+                set((state) => ({
+                    ...state,
+                    colorQueue: state.colorQueue.filter((block) => !blockIds.includes(block.id)),
+                }));
+            }
         },
         updateBlockIdToIndex: (blockId: string, index: number) => {
             set((state) => {

client/src/features/visualizer-threejs/useRenderTangle.tsx

@@ -28,18 +28,6 @@ export const useRenderTangle = () => {
     const blockIdToPosition = useTangleStore((s) => s.blockIdToPosition);
     const blockIdToAnimationPosition = useTangleStore((s) => s.blockIdToAnimationPosition);
 
-    const updateBlockColor = (blockId: string, color: THREE.Color): void => {
-        const indexToUpdate = blockIdToIndex.get(blockId);
-
-        if (indexToUpdate) {
-            tangleMeshRef.current.setColorAt(indexToUpdate, color);
-            if (tangleMeshRef.current.instanceColor) {
-                tangleMeshRef.current.instanceColor.needsUpdate = true;
-            }
-            removeFromColorQueue(blockId);
-        }
-    };
-
     function updateInstancedMeshPosition(
         instancedMesh: THREE.InstancedMesh<THREE.SphereGeometry, THREE.MeshPhongMaterial>,
         index: number,
@@ -175,12 +163,23 @@ export const useRenderTangle = () => {
     }, [blockQueue, blockIdToAnimationPosition]);
 
     useEffect(() => {
-        if (colorQueue.length === 0) {
-            return;
-        }
+        if (colorQueue.length > 0) {
+            const removeIds: string[] = [];
+            for (const { id, color } of colorQueue) {
+                const indexToUpdate = blockIdToIndex.get(id);
+
+                if (indexToUpdate) {
+                    tangleMeshRef.current.setColorAt(indexToUpdate, color);
+
+                    if (tangleMeshRef.current.instanceColor) {
+                        tangleMeshRef.current.instanceColor.needsUpdate = true;
+                    }
+
+                    removeIds.push(id);
+                }
+            }
 
-        for (const { id, color } of colorQueue) {
-            updateBlockColor(id, color);
+            removeFromColorQueue(removeIds);
         }
-    }, [colorQueue]);
+    }, [colorQueue, blockIdToIndex]);
 };