change(player): only recompute list on change

frontend/app/components/Session_/Storage/Storage.tsx

@@ -65,6 +65,12 @@ function Storage(props: Props) {
     return { ...pureMSG, ...decoded };
   }
 
+  const decodedList = React.useMemo(() => {
+    return listNow.map(msg => {
+      return decodeMessage(msg)
+    })
+  }, [listNow.length])
+
   const focusNextButton = () => {
     if (lastBtnRef.current) {
       lastBtnRef.current.focus();
@@ -138,8 +144,8 @@ function Storage(props: Props) {
     let src;
     let name;
 
-    const prevItemD = prevItem ? decodeMessage(prevItem) : undefined
-    const itemD = decodeMessage(item)
+    const itemD = item
+    const prevItemD = prevItem ? prevItem : undefined
 
     switch (type) {
       case STORAGE_TYPES.REDUX:
@@ -322,8 +328,8 @@ function Storage(props: Props) {
           )}
           <div className="flex" style={{ width: showStore ? '75%' : '100%' }}>
             <Autoscroll className="ph-10">
-              {listNow.map((item: Record<string, any>, i: number) =>
-                renderItem(item, i, i > 0 ? listNow[i - 1] : undefined)
+              {decodedList.map((item: Record<string, any>, i: number) =>
+                renderItem(item, i, i > 0 ? decodedList[i - 1] : undefined)
               )}
             </Autoscroll>
           </div>
@@ -341,3 +347,47 @@ export default connect(
     hideHint,
   }
 )(observer(Storage));
+
+
+/**
+ * TODO: compute diff and only decode the required parts
+ * WIP example
+ * function useStorageDecryptedList(list: Record<string, any>[], type: string, player: IWebPlayer) {
+ *   const [decryptedList, setDecryptedList] = React.useState(list);
+ *   const [listLength, setLength] = React.useState(list.length)
+ *
+ *   const decodeMessage = (msg: any, type: StorageType) => {
+ *     const decoded = {};
+ *     const pureMSG = { ...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 };
+ *   }
+ *
+ *   React.useEffect(() => {
+ *     if (list.length !== listLength) {
+ *       const last = list[list.length - 1]._index;
+ *       let diff;
+ *       if (last < decryptedList[decryptedList.length - 1]._index) {
+ *
+ *       }
+ *       diff = list.filter(item => !decryptedList.includes(i => i._index === item._index))
+ *       const decryptedDiff = diff.map(item => {
+ *         return player.decodeMessage(item)
+ *       })
+ *       const result =
+ *     }
+ *   }, [list.length])
+ * }
+ *
+ * */

frontend/app/player/web/MessageManager.ts

@@ -463,6 +463,10 @@ export default class MessageManager {
     this.state.update({ messagesLoading, ready: !messagesLoading && !this.state.get().cssLoading });
   }
 
+  decodeMessage(msg: Message) {
+    return this.decoder.decode(msg)
+  }
+
   private setSize({ height, width }: { height: number, width: number }) {
     this.screen.scale({ height, width });
     this.state.update({ width, height });

frontend/app/player/web/WebPlayer.ts

@@ -86,7 +86,7 @@ export default class WebPlayer extends Player {
 
   // delayed message decoding for state plugins
   decodeMessage = (msg: Message) => {
-    return this.messageManager.decoder.decode(msg)
+    return this.messageManager.decodeMessage(msg)
   }
 
   // Inspector & marker