From 3807ebbaea88b3914e97d3859b98ec90ec34eff7 Mon Sep 17 00:00:00 2001
From: Delirium <nikita@openreplay.com>
Date: Mon, 8 Apr 2024 16:54:19 +0200
Subject: [PATCH] fix ui: fix reader byte skipping, add pause on css loading
 screen (#2058)

---
 frontend/app/components/Session/WebPlayer.tsx   | 5 ++++-
 frontend/app/player/mobile/IOSMessageManager.ts | 2 +-
 frontend/app/player/web/MessageManager.ts       | 8 ++++++--
 frontend/app/player/web/messages/MFileReader.ts | 3 +++
 4 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/frontend/app/components/Session/WebPlayer.tsx b/frontend/app/components/Session/WebPlayer.tsx
index 5d569e386e..2cc605fe41 100644
--- a/frontend/app/components/Session/WebPlayer.tsx
+++ b/frontend/app/components/Session/WebPlayer.tsx
@@ -65,7 +65,10 @@ function WebPlayer(props: any) {
     }
   }, [session.sessionId]);
 
-  const { firstVisualEvent: visualOffset, messagesProcessed } = contextValue.store?.get() || {};
+  const { firstVisualEvent: visualOffset, messagesProcessed, tabStates, ready } = contextValue.store?.get() || {};
+  const cssLoading = ready && tabStates ? Object.values(tabStates).some(
+    ({ cssLoading }) => cssLoading
+  ) : true
 
   React.useEffect(() => {
     if (messagesProcessed && (session.events.length > 0 || session.errors.length > 0)) {
diff --git a/frontend/app/player/mobile/IOSMessageManager.ts b/frontend/app/player/mobile/IOSMessageManager.ts
index 3276bc9d32..20c7309a58 100644
--- a/frontend/app/player/mobile/IOSMessageManager.ts
+++ b/frontend/app/player/mobile/IOSMessageManager.ts
@@ -282,7 +282,7 @@ export default class IOSMessageManager implements IMessageManager {
   setMessagesLoading = (messagesLoading: boolean) => {
     this.screen.display(!messagesLoading);
     // @ts-ignore idk
-    this.state.update({ messagesLoading, ready: !messagesLoading && !this.state.get().cssLoading });
+    this.state.update({ messagesLoading, ready: !messagesLoading });
   };
 
   private setSize({ height, width }: { height: number; width: number }) {
diff --git a/frontend/app/player/web/MessageManager.ts b/frontend/app/player/web/MessageManager.ts
index a4473a360e..8a121676da 100644
--- a/frontend/app/player/web/MessageManager.ts
+++ b/frontend/app/player/web/MessageManager.ts
@@ -63,6 +63,7 @@ export interface State extends ScreenState {
   currentTab: string;
   tabs: Set<string>;
   tabChangeEvents: TabChangeEvent[];
+  sessionStart: number;
 }
 
 export const visualChanges = [
@@ -90,6 +91,7 @@ export default class MessageManager {
     currentTab: '',
     tabs: new Set(),
     tabChangeEvents: [],
+    sessionStart: 0,
   };
 
   private clickManager: ListWalker<MouseClick> = new ListWalker();
@@ -116,6 +118,7 @@ export default class MessageManager {
   ) {
     this.mouseMoveManager = new MouseMoveManager(screen);
     this.sessionStart = this.session.startedAt;
+    state.update({ sessionStart: this.sessionStart });
     this.activityManager = new ActivityManager(this.session.duration.milliseconds); // only if not-live
   }
 
@@ -325,8 +328,9 @@ export default class MessageManager {
       this.updateChangeEvents();
     }
     this.screen.display(!messagesLoading);
-    // @ts-ignore idk
-    this.state.update({ messagesLoading, ready: !messagesLoading && !this.state.get().cssLoading });
+    const cssLoading = Object.values(this.state.get().tabStates).some((tab) => tab.cssLoading);
+    const isReady = !messagesLoading && !cssLoading
+    this.state.update({ messagesLoading, ready: isReady});
   };
 
   decodeMessage(msg: Message) {
diff --git a/frontend/app/player/web/messages/MFileReader.ts b/frontend/app/player/web/messages/MFileReader.ts
index 4a7b5e9d54..79e8d763ce 100644
--- a/frontend/app/player/web/messages/MFileReader.ts
+++ b/frontend/app/player/web/messages/MFileReader.ts
@@ -56,6 +56,9 @@ export default class MFileReader extends RawMessageReader {
    * */
   private readRawMessage(): RawMessage | null {
     try {
+      if (!this.noIndexes) {
+        this.skip(8)
+      }
       return super.readMessage()
     } catch (e) {
       this.logger.error("Read message error:", e)