Fix for extremely minor sync issue

ShortestPathLab · May 10, 2024 · 8aea00c · 8aea00c
1 parent bb4996e
commit 8aea00c
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 11 deletions.
diff --git a/client/src/App.tsx b/client/src/App.tsx
@@ -62,6 +62,7 @@ function App() {
         <Fade in>
           <Stack
             sx={{
+              WebkitAppRegion: "drag",
               background: (t) => t.palette.background.paper,
               width: "100vw",
               height: "100vh",

diff --git a/client/src/hooks/usePlaybackState.tsx b/client/src/hooks/usePlaybackState.tsx
@@ -51,6 +51,8 @@ export function usePlaybackState(key?: string) {
       canStepBackward: ready && !playing && step > 0,
     };
 
+    console.log(layer);
+
     const pause = (n = 0) => {
       // notify("Playback paused");
       setPlaybackState({ playback: "paused", step: stepBy(n) });

diff --git a/client/src/layers/trace/index.tsx b/client/src/layers/trace/index.tsx
@@ -258,10 +258,11 @@ export const controller = {
       view: "main",
     });
     useEffect(() => {
-      produce((l) =>
-        set(l, "source.playbackTo", trace?.content?.events?.length ?? 0)
-      );
-    }, [trace?.content?.events?.length]);
+      produce((l) => {
+        console.log(trace?.content?.events?.length);
+        return set(l, "source.playbackTo", trace?.content?.events?.length ?? 0);
+      });
+    }, [trace?.key, trace?.lastModified]);
     useEffectWhen(
       async () => {
         const parsedTrace = await parseTrace();

diff --git a/client/src/services/SyncService.tsx b/client/src/services/SyncService.tsx
@@ -1,11 +1,11 @@
 import { useEffectWhen } from "hooks/useEffectWhen";
-import { useEffect, useSyncExternalStore } from "react";
+import { throttle } from "lodash";
+import { useEffect, useMemo, useSyncExternalStore } from "react";
+import { usePrevious } from "react-use";
 import { Layers, useLayers } from "slices/layers";
 import { Settings, useSettings } from "slices/settings";
 import sysend from "sysend";
 import { instance, participant } from "./SyncParticipant";
-import { usePrevious } from "react-use";
-import { merge } from "lodash";
 
 export function useSyncStatus() {
   return useSyncExternalStore(
@@ -30,7 +30,6 @@ export function SyncService() {
   const {
     isPrimary,
     isOnly,
-    loading,
     participants: participants,
     peers,
   } = useSyncStatus();
@@ -50,7 +49,7 @@ export function SyncService() {
         participants.includes(initiator) &&
         c3 !== c2
       )
-        setLayers((prev) => merge(prev, state.layers ?? prev), true);
+        setLayers((prev) => state.layers ?? prev, true);
     });
     return () => {
       sysend.off("settings");
@@ -72,11 +71,20 @@ export function SyncService() {
     [c1, peers.length]
   );
   const previous = usePrevious(c2);
+  const broadCastLayers = useMemo(
+    () =>
+      throttle(
+        (...args: Parameters<typeof sysend.broadcast<SyncedData>>) =>
+          sysend.broadcast(...args),
+        300
+      ),
+    []
+  );
   // Any changes
   useEffectWhen(
     () => {
       if (previous && participants.length) {
-        sysend.broadcast<SyncedData>("layers", {
+        broadCastLayers("layers", {
           initiator: instance,
           state: { layers },
           commit: c2,
@@ -90,7 +98,7 @@ export function SyncService() {
   useEffectWhen(
     () => {
       if (!isOnly && isPrimary) {
-        sysend.broadcast<SyncedData>("layers", {
+        broadCastLayers("layers", {
           initiator: instance,
           state: { layers },
           commit: c2,