adds video support

web/src/lib/components/summit_log/summit_log_card.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-    
     import emptyStateTrailDark from "$lib/assets/svgs/empty_states/empty_state_trail_dark.svg";
     import emptyStateTrailLight from "$lib/assets/svgs/empty_states/empty_state_trail_light.svg";
     import type { SummitLog } from "$lib/models/summit_log";
@@ -7,7 +6,7 @@
     import Dropdown, { type DropdownItem } from "../base/dropdown.svelte";
 
     import { theme } from "$lib/stores/theme_store";
-    import { getFileURL, readAsDataURLAsync } from "$lib/util/file_util";
+    import { getFileURL, isVideoURL, readAsDataURLAsync } from "$lib/util/file_util";
     import {
         formatDistance,
         formatElevation,
@@ -55,12 +54,24 @@
 <div class="p-4 my-2 border border-input-border rounded-xl">
     <div class="flex items-center gap-x-4">
         <div class="h-24 aspect-square shrink-0 rounded-xl overflow-hidden">
-            <img
-                id="header-img"
-                class="object-cover h-full"
-                src={thumbnail}
-                alt=""
-            />
+            {#if isVideoURL(thumbnail)}
+                <!-- svelte-ignore a11y_media_has_caption -->
+                <video
+                    controls={false}
+                    loop
+                    class="object-cover h-full w-full"
+                    onmouseenter={(e) => (e.target as any).play()}
+                    onmouseleave={(e) => (e.target as any).pause()}
+                    src={thumbnail}
+                ></video>
+            {:else}
+                <img
+                    id="header-img"
+                    class="object-cover h-full w-full"
+                    src={thumbnail}
+                    alt=""
+                />
+            {/if}
         </div>
         <div class="basis-full">
             <div

web/src/lib/components/summit_log/summit_log_table_row.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
     import type { SummitLog } from "$lib/models/summit_log";
 
-    import { getFileURL } from "$lib/util/file_util";
+    import { getFileURL, isVideoURL } from "$lib/util/file_util";
     import {
         formatDistance,
         formatElevation,
@@ -31,7 +31,7 @@
         showDescription = false,
         showPhotos = false,
         onopen,
-        ontext
+        ontext,
     }: Props = $props();
 
     let gallery: PhotoGallery;
@@ -81,13 +81,27 @@
                     onclick={() => gallery.openGallery()}
                 >
                     {#each imgSrc as img, i}
-                        <img
-                            class="absolute h-full rounded-xl object-cover"
-                            style="top: {4 * i}px; right: {4 *
-                                i}px; transform: rotate(-{i * 5}deg)"
-                            src={img}
-                            alt="waypoint"
-                        />
+                        {#if isVideoURL(img)}
+                            <!-- svelte-ignore a11y_media_has_caption -->
+                            <video
+                                controls={false}
+                                loop
+                                class="absolute h-full w-full rounded-xl object-cover"
+                                style="top: {4 * i}px; right: {4 *
+                                    i}px; transform: rotate(-{i * 5}deg)"
+                                onmouseenter={(e) => (e.target as any).play()}
+                                onmouseleave={(e) => (e.target as any).pause()}
+                                src={img}
+                            ></video>
+                        {:else}
+                            <img
+                                class="absolute h-full rounded-xl object-cover"
+                                style="top: {4 * i}px; right: {4 *
+                                    i}px; transform: rotate(-{i * 5}deg)"
+                                src={img}
+                                alt="waypoint"
+                            />
+                        {/if}
                     {/each}
                 </button>
             {/if}