diff --git a/frontend/app/components/Session_/Storage/Storage.tsx b/frontend/app/components/Session_/Storage/Storage.tsx
index 7cabca865..8f7f3e92e 100644
--- a/frontend/app/components/Session_/Storage/Storage.tsx
+++ b/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) {
)}
- {listNow.map((item: Record, i: number) =>
- renderItem(item, i, i > 0 ? listNow[i - 1] : undefined)
+ {decodedList.map((item: Record, i: number) =>
+ renderItem(item, i, i > 0 ? decodedList[i - 1] : undefined)
)}
@@ -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[], 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])
+ * }
+ *
+ * */
\ No newline at end of file
diff --git a/frontend/app/player/web/MessageManager.ts b/frontend/app/player/web/MessageManager.ts
index dced92641..0d9aaee3d 100644
--- a/frontend/app/player/web/MessageManager.ts
+++ b/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 });
diff --git a/frontend/app/player/web/WebPlayer.ts b/frontend/app/player/web/WebPlayer.ts
index 0889089ee..9ca769598 100644
--- a/frontend/app/player/web/WebPlayer.ts
+++ b/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