From 1a93571eb456de4852e7e3afd4476f12e9ac8026 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tom=C3=A1=C5=A1=20Ml=C3=A1dek?= <t@mldk.cz>
Date: Wed, 17 Aug 2022 22:42:00 +0200
Subject: [PATCH] fix: prevent 404s due to relative image paths of VideoScrolls

---
 src/components/SVGContent.svelte | 143 ++++++++++++++++---------------
 1 file changed, 76 insertions(+), 67 deletions(-)

diff --git a/src/components/SVGContent.svelte b/src/components/SVGContent.svelte
index e8f110f..44c8c67 100644
--- a/src/components/SVGContent.svelte
+++ b/src/components/SVGContent.svelte
@@ -74,6 +74,17 @@
     ) as Document;
     console.debug("[SVG] Loaded.");
     loadedPercent = 100;
+
+    // Prevent 404s due to relative image paths
+    const imageElements = Array.from(
+      svgParsed.getElementsByTagName("image")
+    ).filter((el) =>
+      Array.from(el.children).some((el) => el.tagName == "desc")
+    );
+    imageElements.forEach((el) => {
+      el.remove();
+    });
+
     const svg = root.appendChild(svgParsed.firstElementChild as Element) as any;
 
     // Set document background
@@ -238,7 +249,7 @@
 
     // Videoscrolls
     console.debug("[SVG] Processing video scrolls.");
-    scrolls = await processScrolls(svg);
+    scrolls = await processScrolls(svg, imageElements);
     console.info(`[SVG] Found ${scrolls.length} video scrolls.`);
 
     // Debug Stats
@@ -363,7 +374,7 @@
     requestAnimationFrame(animate);
   });
 
-  function processAnchors(document: XMLDocument): SVGRectElement[] {
+  function processAnchors(document: SVGElement): SVGRectElement[] {
     const result: SVGRectElement[] = [];
     Array.from(document.getElementsByTagName("rect"))
       .filter((el) => el.id.startsWith("anchor"))
@@ -375,81 +386,79 @@
     return result;
   }
 
-  async function processScrolls(svg: XMLDocument): Promise<VideoScrollDef[]> {
-    const ratio = (svg as any).clientWidth / (svg as any).viewBox.baseVal.width;
+  async function processScrolls(
+    svg: SVGElement,
+    images: SVGImageElement[]
+  ): Promise<VideoScrollDef[]> {
+    const ratio = svg.clientWidth / (svg as any).viewBox.baseVal.width;
 
     return Promise.all(
-      Array.from(svg.getElementsByTagName("image"))
-        .filter((el) =>
-          Array.from(el.children).some((el) => el.tagName == "desc")
-        )
-        .map(async (el) => {
-          const descNode = Array.from(el.children).find(
-            (el) => el.tagName == "desc"
-          );
-          console.debug(
-            `[SVG/VIDEOSCROLLS] Found video scroll #${el.id}: ${descNode?.textContent}`
-          );
-          const [directionString, filesURL] =
-            descNode!.textContent!.split("\n");
+      images.map(async (el) => {
+        const descNode = Array.from(el.children).find(
+          (el) => el.tagName == "desc"
+        );
+        console.debug(
+          `[SVG/VIDEOSCROLLS] Found video scroll #${el.id}: ${descNode?.textContent}`
+        );
+        const [directionString, filesURL] = descNode!.textContent!.split("\n");
 
-          const directions: VideoScrollDirection[] = directionString
-            .split(" ")
-            .map((direction) => {
-              if (
-                !Object.values(VideoScrollDirection).includes(
-                  direction as VideoScrollDirection
-                )
-              ) {
-                console.error(
-                  `Unknown direction definition: "${direction}" (in #${el.id})`
-                );
-                return false;
-              }
-              return direction as VideoScrollDirection;
-            })
-            .filter((d) => Boolean(d)) as VideoScrollDirection[];
+        const directions: VideoScrollDirection[] = directionString
+          .split(" ")
+          .map((direction) => {
+            if (
+              !Object.values(VideoScrollDirection).includes(
+                direction as VideoScrollDirection
+              )
+            ) {
+              console.error(
+                `Unknown direction definition: "${direction}" (in #${el.id})`
+              );
+              return false;
+            }
+            return direction as VideoScrollDirection;
+          })
+          .filter((d) => Boolean(d)) as VideoScrollDirection[];
 
-          console.debug(`[SVG/VIDEOSCROLLS] Fetching ${filesURL}...`);
-          const fileFetch = await fetch(`content/${filesURL}`);
-          const preURL = fileFetch.url.replace(/\/files.lst$/, "");
-          const files = (await fileFetch.text())
-            .split("\n")
-            .filter(Boolean)
-            .map((str) => `${preURL}/${str}`);
+        console.debug(`[SVG/VIDEOSCROLLS] Fetching ${filesURL}...`);
+        const fileFetch = await fetch(`content/${filesURL}`);
+        const preURL = fileFetch.url.replace(/\/files.lst$/, "");
+        const files = (await fileFetch.text())
+          .split("\n")
+          .filter(Boolean)
+          .map((str) => `${preURL}/${str}`);
 
-          let x = el.x.baseVal.value;
-          let y = el.y.baseVal.value;
-          let w = el.width.baseVal.value;
-          let h = el.height.baseVal.value;
-          let angle = 0;
+        let x = el.x.baseVal.value;
+        let y = el.y.baseVal.value;
+        let w = el.width.baseVal.value;
+        let h = el.height.baseVal.value;
+        let angle = 0;
 
-          const transform = el.attributes.getNamedItem("transform");
-          const rotateResult = /rotate\((-?[0-9.]+)\)/.exec(
-            transform?.value || ""
-          );
-          if (rotateResult) {
-            angle = parseFloat(rotateResult[1]);
-            const [ncx, ncy] = rotate(x + w / 2, y + h / 2, 0, 0, angle);
-            x = ncx - w / 2;
-            y = ncy - h / 2;
-          }
+        const transform = el.attributes.getNamedItem("transform");
+        const rotateResult = /rotate\((-?[0-9.]+)\)/.exec(
+          transform?.value || ""
+        );
+        if (rotateResult) {
+          angle = parseFloat(rotateResult[1]);
+          const [ncx, ncy] = rotate(x + w / 2, y + h / 2, 0, 0, angle);
+          x = ncx - w / 2;
+          y = ncy - h / 2;
+        }
 
-          return {
-            id: el.id,
-            top: y * ratio,
-            left: x * ratio,
-            angle,
-            width: w * ratio,
-            height: h * ratio,
-            directions,
-            files,
-          };
-        })
+        return {
+          id: el.id,
+          top: y * ratio,
+          left: x * ratio,
+          angle,
+          width: w * ratio,
+          height: h * ratio,
+          directions,
+          files,
+        };
+      })
     );
   }
 
-  function processAudio(svg: XMLDocument): AudioAreaDef[] {
+  function processAudio(svg: SVGElement): AudioAreaDef[] {
     const circles: (SVGCircleElement | SVGEllipseElement)[] = Array.from(
       svg.getElementsByTagName("circle")
     );