From d505b243c1542f949c0ebfd59ef9177fcc76e135 Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Thu, 6 Jun 2024 19:35:44 +0200
Subject: [PATCH] fix ui: add wait cycle for canvas url (#2246)

Co-authored-by: nick-delirium <nikita@openreplay.com>
---
 frontend/app/player/common/types.ts       |  1 +
 frontend/app/player/web/MessageLoader.ts  | 29 ++++++++++++++++++++++-
 frontend/app/player/web/MessageManager.ts | 11 +++++++--
 frontend/app/player/web/TabManager.ts     |  6 ++++-
 frontend/app/player/web/WebPlayer.ts      |  1 +
 5 files changed, 44 insertions(+), 4 deletions(-)

diff --git a/frontend/app/player/common/types.ts b/frontend/app/player/common/types.ts
index 222719bc7..ad34097cb 100644
--- a/frontend/app/player/common/types.ts
+++ b/frontend/app/player/common/types.ts
@@ -51,6 +51,7 @@ export interface SessionFilesInfo {
   frustrations: Record<string, any>[]
   errors: Record<string, any>[]
   agentInfo?: { email: string, name: string }
+  canvasURL?: string[]
 }
 
 export type PlayerMsg = Message & { tabId: string }
\ No newline at end of file
diff --git a/frontend/app/player/web/MessageLoader.ts b/frontend/app/player/web/MessageLoader.ts
index 5cf84b140..102b3df32 100644
--- a/frontend/app/player/web/MessageLoader.ts
+++ b/frontend/app/player/web/MessageLoader.ts
@@ -129,8 +129,35 @@ export default class MessageLoader {
     };
   }
 
+  waitForCanvasURL = () => {
+    const start = Date.now();
+    return new Promise((resolve) => {
+      const checkInterval = setInterval(() => {
+        if (Boolean(this.session.canvasURL?.length)) {
+          clearInterval(checkInterval);
+          resolve(true);
+        } else {
+          if (Date.now() - start > 15000) {
+            clearInterval(checkInterval);
+            throw new Error('could not load canvas data after 15 seconds')
+          }
+        }
+      }, 100);
+    });
+  };
+
   processMessages = (msgs: PlayerMsg[], file?: string) => {
-    msgs.forEach((msg) => {
+    msgs.forEach(async (msg) => {
+      if (msg.tp === MType.CanvasNode) {
+        /**
+         * in case of prefetched sessions with canvases,
+         * we wait for signed urls and then parse the session
+         * */
+        if (file?.includes('p:dom') && !Boolean(this.session.canvasURL?.length)) {
+          console.warn('⚠️Openreplay is waiting for canvas node to load')
+          await this.waitForCanvasURL();
+        }
+      }
       this.messageManager.distributeMessage(msg);
     });
     logger.info('Messages count: ', msgs.length, msgs, file);
diff --git a/frontend/app/player/web/MessageManager.ts b/frontend/app/player/web/MessageManager.ts
index d8f5625f9..8183d2b98 100644
--- a/frontend/app/player/web/MessageManager.ts
+++ b/frontend/app/player/web/MessageManager.ts
@@ -106,7 +106,7 @@ export default class MessageManager {
 
   public readonly decoder = new Decoder();
 
-  private readonly sessionStart: number;
+  private sessionStart: number;
   private lastMessageTime: number = 0;
   private firstVisualEventSet = false;
   public readonly tabs: Record<string, TabSessionManager> = {};
@@ -114,7 +114,7 @@ export default class MessageManager {
   private activeTab = '';
 
   constructor(
-    private readonly session: SessionFilesInfo,
+    private session: SessionFilesInfo,
     private readonly state: Store<State & { time: number }>,
     private readonly screen: Screen,
     private readonly initialLists?: Partial<InitialLists>,
@@ -134,6 +134,13 @@ export default class MessageManager {
     return Object.values(this.tabs)[0].getListsFullState();
   };
 
+  public setSession = (session: SessionFilesInfo) => {
+    this.session = session;
+    this.sessionStart = this.session.startedAt;
+    this.state.update({ sessionStart: this.sessionStart });
+    Object.values(this.tabs).forEach((tab) => tab.setSession(session));
+  }
+
   public updateLists(lists: RawList) {
     Object.keys(this.tabs).forEach((tab) => {
       this.tabs[tab]!.updateLists(lists);
diff --git a/frontend/app/player/web/TabManager.ts b/frontend/app/player/web/TabManager.ts
index 37f7bf5a2..7873e0bf1 100644
--- a/frontend/app/player/web/TabManager.ts
+++ b/frontend/app/player/web/TabManager.ts
@@ -80,7 +80,7 @@ export default class TabSessionManager {
   private canvasReplayWalker: ListWalker<CanvasNode> = new ListWalker();
 
   constructor(
-    private readonly session: any,
+    private session: any,
     private readonly state: Store<{ tabStates: { [tabId: string]: TabState } }>,
     private readonly screen: Screen,
     private readonly id: string,
@@ -98,6 +98,10 @@ export default class TabSessionManager {
     });
   }
 
+  setSession = (session: any) => {
+    this.session = session;
+  }
+
   public getNode = (id: number) => {
     return this.pagesManager.getNode(id);
   };
diff --git a/frontend/app/player/web/WebPlayer.ts b/frontend/app/player/web/WebPlayer.ts
index ac447b5c5..f89e93e50 100644
--- a/frontend/app/player/web/WebPlayer.ts
+++ b/frontend/app/player/web/WebPlayer.ts
@@ -95,6 +95,7 @@ export default class WebPlayer extends Player {
   reinit(session: SessionFilesInfo) {
     if (this.wpState.get().mobsFetched) return; // already initialized
     this.messageLoader.setSession(session)
+    this.messageManager.setSession(session)
     void this.messageLoader.loadFiles();
 
     this.targetMarker = new TargetMarker(this.screen, this.wpState)