fix(frontend): paint video poster frames, clip round videos to circle

frontend/src/lib/components/MediaViewer.svelte

@@ -7,6 +7,7 @@
   import Button from "$lib/components/ui/Button.svelte";
   import Icon from "$lib/components/ui/Icon.svelte";
   import Spinner from "$lib/components/ui/Spinner.svelte";
+  import { poster } from "$lib/media/poster";
   import { toasts } from "$lib/stores/toasts.svelte";
 
   interface Props {
@@ -149,7 +150,14 @@
         {:else if result?.state === "ready" && isVideo}
           <!-- svelte-ignore a11y_media_has_caption -->
           <!-- biome-ignore lint/a11y/useMediaCaption: archived media has no captions -->
-          <video class="media-video" src={result.url} controls></video>
+          <video
+            class="media-video"
+            src={result.url}
+            controls
+            playsinline
+            preload="metadata"
+            use:poster
+          ></video>
         {:else if result?.state === "ready" && isAudio}
           <!-- biome-ignore lint/a11y/useMediaCaption: archived media has no captions -->
           <audio src={result.url} controls></audio>