fix: whiteboard flicker by syncing instance state only on page change

100mslive · May 15, 2024 · c14ce97 · c14ce97
1 parent b014a69
commit c14ce97
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 9 deletions.
diff --git a/packages/hms-video-store/src/session-store/interactivity-center/HMSWhiteboardCenter.ts b/packages/hms-video-store/src/session-store/interactivity-center/HMSWhiteboardCenter.ts
@@ -78,6 +78,11 @@ export class WhiteboardInteractivityCenter implements HMSWhiteboardInteractivity
     for (const whiteboard of whiteboards.values()) {
       if (whiteboard.url) {
         const response = await this.transport.signal.getWhiteboard({ id: whiteboard.id });
+        const localPeer = this.store.getLocalPeer();
+        const isOwner = localPeer?.customerUserId === response.owner;
+        const open = isOwner
+          ? localPeer.role?.permissions.whiteboard?.includes('admin')
+          : response.permissions.length > 0;
         const newWhiteboard: HMSWhiteboard = {
           ...whiteboard,
           id: response.id,
@@ -86,7 +91,7 @@ export class WhiteboardInteractivityCenter implements HMSWhiteboardInteractivity
           addr: response.addr,
           owner: response.owner,
           permissions: response.permissions,
-          open: response.permissions.length > 0,
+          open,
         };
 
         this.store.setWhiteboard(newWhiteboard);

diff --git a/packages/hms-whiteboard/src/hooks/StoreClient.ts b/packages/hms-whiteboard/src/hooks/StoreClient.ts
@@ -8,7 +8,7 @@ interface OpenCallbacks<T> {
   handleError: (error: Error) => void;
 }
 
-const WHITEBOARD_CLOSE_MESSAGE = 'client whiteboard close';
+const WHITEBOARD_CLOSE_MESSAGE = 'client whiteboard abort';
 
 export class SessionStore<T> {
   private storeClient: StoreClient;
@@ -61,7 +61,7 @@ export class SessionStore<T> {
     });
 
     call.responses.onError(error => {
-      if (error.message !== WHITEBOARD_CLOSE_MESSAGE) {
+      if (!error.message.includes('abort')) {
         handleError(error);
       }
     });

diff --git a/packages/hms-whiteboard/src/hooks/useCollaboration.ts b/packages/hms-whiteboard/src/hooks/useCollaboration.ts
@@ -7,6 +7,8 @@ import {
   HistoryEntry,
   throttle,
   TLAnyShapeUtilConstructor,
+  TLInstance,
+  TLINSTANCE_ID,
   TLPage,
   TLRecord,
   TLStoreWithStatus,
@@ -196,12 +198,15 @@ export function useCollaboration({
             if (!key.includes('instance')) {
               return;
             }
-            // full store sync
-            const instanceRecords = store
-              .allRecords()
-              .filter(record => FULL_SYNC_REQUIRED_RECORD_TYPES.includes(record.typeName));
-            for (const record of instanceRecords) {
-              sessionStore.set(record.id, record);
+            const newPage = editor?.getCurrentPage();
+
+            if (newPage?.id !== currentPage?.id) {
+              sessionStore.get(TLINSTANCE_ID).then(instance => {
+                if (instance) {
+                  sessionStore?.set(instance.id, { ...instance, currentPageId: newPage?.id } as TLInstance);
+                }
+              });
+              setCurrentPage(newPage);
             }
           });
         }, PAGES_DEBOUNCE_TIME),