feat: video player

.gitattributes

@@ -0,0 +1 @@
+public/assets/**.png filter=lfs diff=lfs merge=lfs -text

src/App.svelte

@@ -1,14 +1,27 @@
 <script lang="ts">
   import SvgContent from "./components/SVGContent.svelte";
+  import VideoPlayer from "./components/VideoPlayer.svelte";
 
   function setBackground(ev: CustomEvent<string>) {
     console.debug(`Setting background color to "${ev.detail}"`);
     document.body.style.background = ev.detail;
   }
+
+  let currentVideo: string | undefined;
 </script>
 
 <main>
-  <SvgContent url="content/intro.svg" on:setBackground={setBackground} />
+  <SvgContent
+    url="content/intro.svg"
+    on:setBackground={setBackground}
+    on:video={(ev) => (currentVideo = ev.detail)}
+  />
+  {#if currentVideo}
+    <VideoPlayer
+      url={currentVideo}
+      on:exit={() => (currentVideo = undefined)}
+    />
+  {/if}
 </main>
 
 <style lang="scss">

src/components/SVGContent.svelte

@@ -252,6 +252,11 @@
     const images = processImages(svg);
     console.info(`[SVG] Found ${images.length} images.`);
 
+    // Videos
+    console.debug("[SVG] Processing images as videos.");
+    processVideos(svg, (el) => root.appendChild(el));
+    // console.info(`[SVG] Found ${audioAreas.length} audio areas.`);
+
     // Audio areas
     console.debug("[SVG] Processing audio areas.");
     audioAreas = processAudio(svg);
@@ -426,6 +431,65 @@
     return result;
   }
 
+  function processVideos(
+    svgDocument: SVGElement,
+    callback: (el: HTMLDivElement) => void
+  ) {
+    const ratio =
+      svgDocument.clientWidth / (svgDocument as any).viewBox.baseVal.width;
+
+    Array.from(svgDocument.getElementsByTagName("image")).forEach((el) => {
+      const href = el.getAttribute("xlink:href");
+      const origPath = href.split("/");
+      const basename = origPath[origPath.length - 1];
+      const videoUrl = `content/video/${basename.replace(
+        /.[a-zA-Z0-9]+$/,
+        ".mp4"
+      )}`;
+
+      fetch(videoUrl, {
+        method: "HEAD",
+        cache: "no-store",
+      }).then((videoExistsFetch) => {
+        if (videoExistsFetch.status !== 200) {
+          return;
+        }
+        console.debug(
+          `[SVG/VIDEOS] Found image with video: #${el.id} (${href} / ${videoUrl}).`
+        );
+
+        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 playEl = document.createElement("div");
+        playEl.classList.add("videoOverlay");
+        playEl.style.position = "absolute";
+        playEl.style.top = `${y * ratio}px`;
+        playEl.style.left = `${x * ratio}px`;
+        playEl.style.width = `${w * ratio}px`;
+        playEl.style.height = `${h * ratio}px`;
+        playEl.addEventListener("click", () => {
+          dispatch("video", videoUrl);
+        });
+        callback(playEl);
+      });
+    });
+  }
+
   async function processScrolls(
     svg: SVGElement,
     images: SVGImageElement[]
@@ -708,6 +772,16 @@
     box-shadow: 0 6px 3px rgba(0, 0, 0, 0.33);
   }
 
+  :global(.videoOverlay) {
+    background: url("assets/play.png");
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: 66%;
+    opacity: 0.25;
+    background-color: rgba(0, 0, 0, 1);
+    cursor: pointer;
+  }
+
   .dev {
     display: none;
   }

src/components/VideoPlayer.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+  import { createEventDispatcher } from "svelte";
+
+  const dispatch = createEventDispatcher();
+  export let url: string;
+</script>
+
+<div class="videoPlayer" on:click={() => dispatch("exit")}>
+  <!-- svelte-ignore a11y-media-has-caption -->
+  <video controls autoplay src={url} />
+</div>
+
+<style lang="scss">
+  .videoPlayer {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+
+    background: rgba(0, 0, 0, 0.88);
+    video {
+      width: 90%;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
+  }
+</style>