fix(frontend): unbreak round video ring and playback in firefox

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}

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;