Inital Commit

src/lib/MediaItem.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+    let { simName, resourceName } = $props();
+
+    function getResourceUrl(simName: string, resourceName: string) {
+        return `/results/${simName}/${resourceName}`;
+    }
+
+    function isImage(fname: string) {
+        return (
+            fname.toLowerCase().endsWith(".png") ||
+            fname.toLowerCase().endsWith(".jpg") ||
+            fname.toLowerCase().endsWith(".jpeg")
+        );
+    }
+
+    function isVideo(fname: string) {
+        return (
+            fname.toLowerCase().endsWith(".mp4") ||
+            fname.toLowerCase().endsWith(".avi") ||
+            fname.toLowerCase().endsWith(".webm")
+        );
+    }
+</script>
+
+<div class="media-item">
+    <div class="media-title">{resourceName}</div>
+    {#if isImage(resourceName)}
+        <img src={getResourceUrl(simName, resourceName)} alt={resourceName} />
+    {:else if isVideo(resourceName)}
+        <video controls>
+            <source
+                src={getResourceUrl(simName, resourceName)}
+                type="video/webm"
+            />
+            <source
+                src={getResourceUrl(simName, resourceName)}
+                type="video/mp4"
+            />
+            <a href={getResourceUrl(simName, resourceName)}>Download Video</a>
+        </video>
+    {:else}
+        <ul>
+            <li>
+                <a href={getResourceUrl(simName, resourceName)} target="_blank"
+                    >{resourceName}</a
+                >
+            </li>
+        </ul>
+    {/if}
+</div>
+
+<style>
+    img,
+    video {
+        max-width: 600px;
+        border: 1px solid #000;
+        margin-bottom: 15px;
+    }
+    .media-item {
+        margin-bottom: 20px;
+    }
+    .media-title {
+        font-weight: bold;
+        margin-bottom: 5px;
+    }
+    ul {
+        list-style-type: square;
+    }
+    a {
+        color: #0000ff;
+        text-decoration: underline;
+    }
+    a:visited {
+        color: #800080;
+    }
+</style>