From b6080b24922acd630f19d9ef604f7115f7def7be Mon Sep 17 00:00:00 2001
From: nick-delirium <nikita@openreplay.com>
Date: Wed, 18 Dec 2024 14:31:07 +0100
Subject: [PATCH] tracker: use simple string for sprites

---
 frontend/app/player/web/MessageLoader.ts      |  9 +++----
 .../tracker/src/main/app/observer/observer.ts | 27 +++++++++++++------
 2 files changed, 23 insertions(+), 13 deletions(-)

diff --git a/frontend/app/player/web/MessageLoader.ts b/frontend/app/player/web/MessageLoader.ts
index e52c31f6f..1bdceb7f0 100644
--- a/frontend/app/player/web/MessageLoader.ts
+++ b/frontend/app/player/web/MessageLoader.ts
@@ -455,13 +455,12 @@ function findBrokenNodes(nodes: any[]) {
 }
 
 function handleSprites(potentialSpriteMap: Record<string, any>, parser: DOMParser, msg: Record<string, any>, spriteMapSvg: SVGElement, i: number) {
-  const [_, dataUrl] = msg.value.split('_$OPENREPLAY_SPRITE$_');
-  const potentialSprite = potentialSpriteMap[dataUrl];
+  const [_, svgData] = msg.value.split('_$OPENREPLAY_SPRITE$_');
+  const potentialSprite = potentialSpriteMap[svgData];
   if (potentialSprite) {
     msg.value = potentialSprite;
   } else {
-    const svgText = atob(dataUrl.split(",")[1]);
-    const svgDoc = parser.parseFromString(svgText, "image/svg+xml");
+    const svgDoc = parser.parseFromString(svgData, "image/svg+xml");
     const originalSvg = svgDoc.querySelector("svg");
     if (originalSvg) {
       const symbol = document.createElementNS("http://www.w3.org/2000/svg", "symbol");
@@ -472,7 +471,7 @@ function handleSprites(potentialSpriteMap: Record<string, any>, parser: DOMParse
 
       spriteMapSvg.appendChild(symbol);
       msg.value = `#${symbolId}`;
-      potentialSpriteMap[dataUrl] = `#${symbolId}`;
+      potentialSpriteMap[svgData] = `#${symbolId}`;
     }
   }
 }
diff --git a/tracker/tracker/src/main/app/observer/observer.ts b/tracker/tracker/src/main/app/observer/observer.ts
index 3c2b3bd68..d386b5b81 100644
--- a/tracker/tracker/src/main/app/observer/observer.ts
+++ b/tracker/tracker/src/main/app/observer/observer.ts
@@ -25,7 +25,7 @@ import {
 const iconCache = {}
 const domParser = new DOMParser()
 
-async function parseUseEl(useElement: SVGUseElement, mode: 'inline' | 'dataurl') {
+async function parseUseEl(useElement: SVGUseElement, mode: 'inline' | 'dataurl' | 'svgtext') {
   try {
     const href = useElement.getAttribute('xlink:href') || useElement.getAttribute('href')
     if (!href) {
@@ -58,7 +58,19 @@ async function parseUseEl(useElement: SVGUseElement, mode: 'inline' | 'dataurl')
       const res = { paths: symbol.innerHTML, vbox: symbol.getAttribute('viewBox') || '0 0 24 24' }
       iconCache[symbolId] = res
       return res
-    } else if (mode === 'dataurl') {
+    }
+    if (mode === 'svgtext') {
+      const inlineSvg = `
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="${symbol.getAttribute('viewBox') || '0 0 24 24'}">
+          ${symbol.innerHTML}
+        </svg>
+      `.trim()
+
+      iconCache[symbolId] = inlineSvg
+
+      return inlineSvg
+    }
+    if (mode === 'dataurl') {
       const inlineSvg = `
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="${symbol.getAttribute('viewBox') || '0 0 24 24'}">
           ${symbol.innerHTML}
@@ -70,9 +82,8 @@ async function parseUseEl(useElement: SVGUseElement, mode: 'inline' | 'dataurl')
       iconCache[symbolId] = dataUrl
 
       return dataUrl
-    } else {
-      console.debug(`Openreplay: Unknown mode: ${mode}. Use "inline" or "dataurl".`)
     }
+    console.debug(`Openreplay: Unknown mode: ${mode}. Use "inline" or "dataurl".`)
   } catch (error) {
     console.error('Openreplay: Error processing <use> element:', error)
   }
@@ -239,10 +250,10 @@ export default abstract class Observer {
       }
 
       if (isUseElement(node) && name === 'href') {
-        parseUseEl(node, 'dataurl')
-          .then((dataUrl) => {
-            if (dataUrl) {
-              this.app.send(SetNodeAttribute(id, name, `_$OPENREPLAY_SPRITE$_${dataUrl}`))
+        parseUseEl(node, 'svgtext')
+          .then((svgData) => {
+            if (svgData) {
+              this.app.send(SetNodeAttribute(id, name, `_$OPENREPLAY_SPRITE$_${svgData}`))
             }
           })
           .catch((e: any) => {