From 4b68e79ab410298eaec8ab1c4f560858934f2397 Mon Sep 17 00:00:00 2001
From: nick-delirium <nikita@openreplay.com>
Date: Tue, 28 Jan 2025 16:11:24 +0100
Subject: [PATCH] ui: support filekey for mob preloading

---
 frontend/app/components/Session/WebPlayer.tsx | 2 +-
 frontend/app/mstore/sessionStore.ts           | 9 +++++----
 frontend/app/player/common/unpack.ts          | 3 +++
 frontend/app/player/web/MessageLoader.ts      | 5 ++++-
 frontend/app/player/web/WebPlayer.ts          | 4 ++--
 frontend/app/services/SessionService.ts       | 2 +-
 6 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/frontend/app/components/Session/WebPlayer.tsx b/frontend/app/components/Session/WebPlayer.tsx
index dec5b52b9..d15852d9a 100644
--- a/frontend/app/components/Session/WebPlayer.tsx
+++ b/frontend/app/components/Session/WebPlayer.tsx
@@ -88,7 +88,7 @@ function WebPlayer(props: any) {
     );
     if (usePrefetched) {
       if (mobData?.data) {
-        WebPlayerInst.preloadFirstFile(mobData?.data);
+        WebPlayerInst.preloadFirstFile(mobData?.data, mobData?.fileKey);
       }
     }
     setContextValue({ player: WebPlayerInst, store: PlayerStore });
diff --git a/frontend/app/mstore/sessionStore.ts b/frontend/app/mstore/sessionStore.ts
index ad1463801..761283e4f 100644
--- a/frontend/app/mstore/sessionStore.ts
+++ b/frontend/app/mstore/sessionStore.ts
@@ -137,7 +137,7 @@ export default class SessionStore {
   previousId = '';
   nextId = '';
   userTimezone = '';
-  prefetchedMobUrls: Record<string, { data: Uint8Array; entryNum: number }> = {};
+  prefetchedMobUrls: Record<string, { data: Uint8Array; entryNum: number, fileKey?: string }> = {};
   prefetched: boolean = false;
   fetchFailed: boolean = false;
   loadingLiveSessions: boolean = false;
@@ -161,11 +161,11 @@ export default class SessionStore {
   }
 
   getFirstMob = async (sessionId: string) => {
-    const { domURL } = await sessionService.getFirstMobUrl(sessionId);
-    await loadFile(domURL[0], (data) => this.setPrefetchedMobUrl(sessionId, data));
+    const { domURL, fileKey } = await sessionService.getFirstMobUrl(sessionId);
+    await loadFile(domURL[0], (data) => this.setPrefetchedMobUrl(sessionId, data, fileKey));
   }
 
-  setPrefetchedMobUrl = (sessionId: string, fileData: Uint8Array) => {
+  setPrefetchedMobUrl = (sessionId: string, fileData: Uint8Array, fileKey?: string) => {
     const keys = Object.keys(this.prefetchedMobUrls);
     const toLimit = 10 - keys.length;
     if (toLimit < 0) {
@@ -181,6 +181,7 @@ export default class SessionStore {
       : 0;
     this.prefetchedMobUrls[sessionId] = {
       data: fileData,
+      fileKey,
       entryNum: nextEntryNum,
     };
   }
diff --git a/frontend/app/player/common/unpack.ts b/frontend/app/player/common/unpack.ts
index e1f2891c5..dddb87d7a 100644
--- a/frontend/app/player/common/unpack.ts
+++ b/frontend/app/player/common/unpack.ts
@@ -34,6 +34,9 @@ const unpack = (b: Uint8Array): Uint8Array => {
     );
     data = uData;
   }
+  if (!isGzip && !isZstd) {
+    console.debug('No unpacking needed', Math.floor(b.byteLength / 1024) + 'kb');
+  }
   return data;
 };
 
diff --git a/frontend/app/player/web/MessageLoader.ts b/frontend/app/player/web/MessageLoader.ts
index 1bdceb7f0..48c2e74e4 100644
--- a/frontend/app/player/web/MessageLoader.ts
+++ b/frontend/app/player/web/MessageLoader.ts
@@ -214,7 +214,10 @@ export default class MessageLoader {
   }
 
   preloaded = false;
-  async preloadFirstFile(data: Uint8Array) {
+  async preloadFirstFile(data: Uint8Array, fileKey?: string) {
+    if (fileKey) {
+      this.session.fileKey = fileKey;
+    }
     this.mobParser = this.createNewParser(true, this.processMessages, 'p:dom');
 
     try {
diff --git a/frontend/app/player/web/WebPlayer.ts b/frontend/app/player/web/WebPlayer.ts
index a503ebdac..4abe08be7 100644
--- a/frontend/app/player/web/WebPlayer.ts
+++ b/frontend/app/player/web/WebPlayer.ts
@@ -86,8 +86,8 @@ export default class WebPlayer extends Player {
     window.playerJumpToTime = this.jump.bind(this)
   }
 
-  preloadFirstFile(data: Uint8Array) {
-    void this.messageLoader.preloadFirstFile(data)
+  preloadFirstFile(data: Uint8Array, fileKey?: string) {
+    void this.messageLoader.preloadFirstFile(data, fileKey)
   }
 
   reinit(session: SessionFilesInfo) {
diff --git a/frontend/app/services/SessionService.ts b/frontend/app/services/SessionService.ts
index d773c2bef..c27eaa2a6 100644
--- a/frontend/app/services/SessionService.ts
+++ b/frontend/app/services/SessionService.ts
@@ -46,7 +46,7 @@ export default class SettingsService {
       .catch((e) => Promise.reject(e));
   }
 
-  getFirstMobUrl(sessionId: string): Promise<{ domURL: string[] }> {
+  getFirstMobUrl(sessionId: string): Promise<{ domURL: string[], fileKey?: string }> {
     return this.client
       .get(`/sessions/${sessionId}/first-mob`)
       .then((r) => r.json())