From fe1668ec01c2ddede5f528b560e84cc8a8001e9b Mon Sep 17 00:00:00 2001
From: nick-delirium <nikita@openreplay.com>
Date: Mon, 6 Mar 2023 12:26:04 +0100
Subject: [PATCH] change(player): decode state messages only on render

---
 .../components/Session_/Storage/Storage.tsx   | 54 +++++++++++++++----
 frontend/app/player/web/MessageManager.ts     |  5 ++
 frontend/app/player/web/WebPlayer.ts          |  6 +++
 3 files changed, 56 insertions(+), 9 deletions(-)

diff --git a/frontend/app/components/Session_/Storage/Storage.tsx b/frontend/app/components/Session_/Storage/Storage.tsx
index f955912e7..587d5bc31 100644
--- a/frontend/app/components/Session_/Storage/Storage.tsx
+++ b/frontend/app/components/Session_/Storage/Storage.tsx
@@ -12,6 +12,8 @@ import BottomBlock from '../BottomBlock/index';
 import DiffRow from './DiffRow';
 import cn from 'classnames';
 import stl from './storage.module.css';
+import logger from "App/logger";
+import { toJS } from 'mobx'
 
 function getActionsName(type: string) {
   switch (type) {
@@ -23,10 +25,19 @@ function getActionsName(type: string) {
   }
 }
 
+const storageDecodeKeys = {
+  [STORAGE_TYPES.REDUX]: ['state', 'action'],
+  [STORAGE_TYPES.NGRX]: ['state', 'action'],
+  [STORAGE_TYPES.VUEX]: ['state', 'mutation'],
+  [STORAGE_TYPES.ZUSTAND]: ['state', 'mutation'],
+  [STORAGE_TYPES.MOBX]: ['payload'],
+  [STORAGE_TYPES.NONE]: ['state, action', 'payload', 'mutation'],
+}
 interface Props {
   hideHint: (args: string) => void;
   hintIsHidden: boolean;
 }
+
 function Storage(props: Props) {
   const lastBtnRef = React.useRef<HTMLButtonElement>();
   const [showDiffs, setShowDiffs] = React.useState(false);
@@ -37,6 +48,24 @@ function Storage(props: Props) {
   const list = selectStorageList(state);
   const type = selectStorageType(state);
 
+  const decodeMessage = (msg: any) => {
+    const decoded = {};
+    const pureMSG = toJS(msg)
+    const keys = storageDecodeKeys[type];
+    try {
+      keys.forEach(key => {
+        if (pureMSG[key]) {
+          // @ts-ignore TODO: types for decoder
+          decoded[key] = player.decodeMessage(pureMSG[key]);
+        }
+      });
+    } catch (e) {
+      logger.error("Error on message decoding: ", e, pureMSG);
+      return null;
+    }
+    return { ...pureMSG, ...decoded };
+  }
+
   const focusNextButton = () => {
     if (lastBtnRef.current) {
       lastBtnRef.current.focus();
@@ -106,27 +135,30 @@ function Storage(props: Props) {
     player.jump(list[listNow.length].time);
   };
 
-  const renderItem = (item: Record<string, any>, i: number, prevItem: Record<string, any>) => {
+  const renderItem = (item: Record<string, any>, i: number, prevItem?: Record<string, any>) => {
     let src;
     let name;
 
+    const prevItemD = prevItem ? decodeMessage(prevItem) : undefined
+    const itemD = decodeMessage(item)
+
     switch (type) {
       case STORAGE_TYPES.REDUX:
       case STORAGE_TYPES.NGRX:
-        src = item.action;
+        src = itemD.action;
         name = src && src.type;
         break;
       case STORAGE_TYPES.VUEX:
-        src = item.mutation;
+        src = itemD.mutation;
         name = src && src.type;
         break;
       case STORAGE_TYPES.MOBX:
-        src = item.payload;
+        src = itemD.payload;
         name = `@${item.type} ${src && src.type}`;
         break;
       case STORAGE_TYPES.ZUSTAND:
         src = null;
-        name = item.mutation.join('');
+        name = itemD.mutation.join('');
     }
 
     if (src !== null && !showDiffs) {
@@ -144,7 +176,7 @@ function Storage(props: Props) {
           </div>
         ) : (
           <>
-            {renderDiff(item, prevItem)}
+            {renderDiff(itemD, prevItemD)}
             <div style={{ flex: 2 }} className="flex pl-10 pt-2">
               <JSONTree
                 name={ensureString(name)}
@@ -160,11 +192,11 @@ function Storage(props: Props) {
           className="flex-1 flex gap-2 pt-2 items-center justify-end self-start"
         >
           {typeof item.duration === 'number' && (
-            <div className="font-size-12 color-gray-medium">{formatMs(item.duration)}</div>
+            <div className="font-size-12 color-gray-medium">{formatMs(itemD.duration)}</div>
           )}
           <div className="w-12">
             {i + 1 < listNow.length && (
-              <button className={stl.button} onClick={() => jump(item.time, item._index)}>
+              <button className={stl.button} onClick={() => player.jump(item.time)}>
                 {'JUMP'}
               </button>
             )}
@@ -281,7 +313,11 @@ function Storage(props: Props) {
                   {'Empty state.'}
                 </div>
               ) : (
-                <JSONTree collapsed={2} src={listNow.length === 0 ? list[0].state : listNow[listNow.length - 1].state} />
+                <JSONTree collapsed={2} src={
+                  listNow.length === 0
+                    ? decodeMessage(list[0]).state
+                    : decodeMessage(listNow[listNow.length - 1]).state}
+                />
               )}
             </div>
           )}
diff --git a/frontend/app/player/web/MessageManager.ts b/frontend/app/player/web/MessageManager.ts
index c54b86fb8..fea01b6c5 100644
--- a/frontend/app/player/web/MessageManager.ts
+++ b/frontend/app/player/web/MessageManager.ts
@@ -416,18 +416,23 @@ export default class MessageManager {
         this.lists.lists.fetch.insert(getResourceFromNetworkRequest(msg, this.sessionStart))
         break;
       case MType.Redux:
+        logger.log('redux', msg)
         this.lists.lists.redux.append(msg);
         break;
       case MType.NgRx:
+        logger.log('ngrx', msg)
         this.lists.lists.ngrx.append(msg);
         break;
       case MType.Vuex:
+        logger.log('vuex', msg)
         this.lists.lists.vuex.append(msg);
         break;
       case MType.Zustand:
+        logger.log('zustand', msg)
         this.lists.lists.zustand.append(msg)
         break
       case MType.MobX:
+        logger.log('mobx', msg)
         this.lists.lists.mobx.append(msg);
         break;
       case MType.GraphQl:
diff --git a/frontend/app/player/web/WebPlayer.ts b/frontend/app/player/web/WebPlayer.ts
index d1a56f9fd..0889089ee 100644
--- a/frontend/app/player/web/WebPlayer.ts
+++ b/frontend/app/player/web/WebPlayer.ts
@@ -7,6 +7,7 @@ import MessageManager from './MessageManager'
 import InspectorController from './addons/InspectorController'
 import TargetMarker from './addons/TargetMarker'
 import Screen, { ScaleMode } from './Screen/Screen'
+import { Message } from "Player/web/messages";
 
 
 // export type State = typeof WebPlayer.INITIAL_STATE
@@ -83,6 +84,11 @@ export default class WebPlayer extends Player {
     this.targetMarker.updateMarkedTargets()
   }
 
+  // delayed message decoding for state plugins
+  decodeMessage = (msg: Message) => {
+    return this.messageManager.decoder.decode(msg)
+  }
+
   // Inspector & marker
   mark(e: Element) {
     this.inspectorController.marker?.mark(e)