From 1e143c75735161bf380cf07ce79598e41c267eb1 Mon Sep 17 00:00:00 2001
From: h <h@kotikot.com>
Date: Thu, 6 Aug 2026 13:52:27 +0200
Subject: [PATCH] fix(frontend): unbreak round video ring and playback in
 firefox

---
 frontend/src/lib/components/MediaViewer.svelte     |  2 +-
 frontend/src/lib/components/media/VideoNote.svelte | 14 +++++---------
 2 files changed, 6 insertions(+), 10 deletions(-)

diff --git a/frontend/src/lib/components/MediaViewer.svelte b/frontend/src/lib/components/MediaViewer.svelte
index 54443ac..d72944a 100644
--- a/frontend/src/lib/components/MediaViewer.svelte
+++ b/frontend/src/lib/components/MediaViewer.svelte
@@ -155,7 +155,7 @@
             src={result.url}
             controls
             playsinline
-            preload="metadata"
+            preload="auto"
             use:poster
           ></video>
         {:else if result?.state === "ready" && isAudio}
diff --git a/frontend/src/lib/components/media/VideoNote.svelte b/frontend/src/lib/components/media/VideoNote.svelte
index ff200d9..4064ef7 100644
--- a/frontend/src/lib/components/media/VideoNote.svelte
+++ b/frontend/src/lib/components/media/VideoNote.svelte
@@ -53,13 +53,13 @@
       onended={() => element && releasePlayback(element)}
       onplay={() => element && claimPlayback(element)}
       playsinline
-      preload="metadata"
+      preload="auto"
       src={url}
       use:poster
     ></video>
-    <svg class="ring" viewBox="0 0 200 200" aria-hidden="true">
+    <svg class="RoundVideoRing" viewBox="0 0 200 200" aria-hidden="true">
       <circle
-        class="ring-progress"
+        class="RoundVideoProgress"
         cx="100"
         cy="100"
         r={RADIUS}
@@ -143,10 +143,6 @@
 
     background: transparent;
     -webkit-tap-highlight-color: transparent;
-
-    &:focus {
-      outline: none;
-    }
   }
 
   video {
@@ -161,7 +157,7 @@
     clip-path: circle(50%);
   }
 
-  .ring {
+  .RoundVideoRing {
     pointer-events: none;
     position: absolute;
     inset: 0;
@@ -171,7 +167,7 @@
     height: 100%;
   }
 
-  .ring-progress {
+  .RoundVideoProgress {
     fill: transparent;
     stroke: var(--color-white);
     stroke-width: 4;