change(player): decode state messages only on render

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>
           )}

frontend/app/player/web/MessageManager.ts

@@ -107,7 +107,7 @@ export default class MessageManager {
 
   private scrollManager: ListWalker<SetViewportScroll> = new ListWalker();
 
-  private readonly decoder = new Decoder();
+  public readonly decoder = new Decoder();
   private readonly lists: Lists;
 
   private activityManager: ActivityManager | null = null;
@@ -406,39 +406,24 @@ export default class MessageManager {
         this.lists.lists.fetch.insert(getResourceFromNetworkRequest(msg, this.sessionStart))
         break;
       case MType.Redux:
-        decoded = this.decodeStateMessage(msg, ["state", "action"]);
-        logger.log('redux', decoded)
-        if (decoded != null) {
-          this.lists.lists.redux.append(decoded);
-        }
+        logger.log('redux', msg)
+        this.lists.lists.redux.append(msg);
         break;
       case MType.NgRx:
-        decoded = this.decodeStateMessage(msg, ["state", "action"]);
-        logger.log('ngrx', decoded)
-        if (decoded != null) {
-          this.lists.lists.ngrx.append(decoded);
-        }
+        logger.log('ngrx', msg)
+        this.lists.lists.ngrx.append(msg);
         break;
       case MType.Vuex:
-        decoded = this.decodeStateMessage(msg, ["state", "mutation"]);
-        logger.log('vuex', decoded)
-        if (decoded != null) {
-          this.lists.lists.vuex.append(decoded);
-        }
+        logger.log('vuex', msg)
+        this.lists.lists.vuex.append(msg);
         break;
       case MType.Zustand:
-        decoded = this.decodeStateMessage(msg, ["state", "mutation"])
-        logger.log('zustand', decoded)
-        if (decoded != null) {
-          this.lists.lists.zustand.append(decoded)
-        }
+        logger.log('zustand', msg)
+        this.lists.lists.zustand.append(msg)
+        break
       case MType.MobX:
-        decoded = this.decodeStateMessage(msg, ["payload"]);
-        logger.log('mobx', decoded)
-
-        if (decoded != null) {
-          this.lists.lists.mobx.append(decoded);
-        }
+        logger.log('mobx', msg)
+        this.lists.lists.mobx.append(msg);
         break;
       case MType.GraphQl:
         this.lists.lists.graphql.append(msg);

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)