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

frontend/src/lib/components/media/AlbumTile.svelte

@@ -5,6 +5,7 @@
   import type { MediaRef } from "$lib/api/types";
   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 {
@@ -46,7 +47,13 @@
 <div class="AlbumTile" use:visible={start}>
   {#if ready && isVideo}
     <button class="tile" onclick={onopen} type="button">
-      <video src={ready.url} muted preload="metadata"></video>
+      <video
+        src={ready.url}
+        muted
+        playsinline
+        preload="metadata"
+        use:poster
+      ></video>
       <span class="play"><Icon name="large-play" size="2rem" /></span>
     </button>
   {:else if ready}

frontend/src/lib/components/media/VideoNote.svelte

@@ -2,6 +2,7 @@
   import Icon from "$lib/components/ui/Icon.svelte";
   import { formatDuration } from "$lib/format/duration";
   import { claimPlayback, releasePlayback } from "$lib/media/playback";
+  import { POSTER_TIME, poster } from "$lib/media/poster";
 
   interface Props {
     transcript?: string | null;
@@ -54,6 +55,7 @@
       playsinline
       preload="metadata"
       src={url}
+      use:poster
     ></video>
     <svg class="ring" viewBox="0 0 200 200" aria-hidden="true">
       <circle
@@ -70,7 +72,7 @@
     {/if}
     <span class="badge">
       <Icon name="microphone" size="0.875rem" />
-      {formatDuration(paused && currentTime === 0 ? duration : remaining)}
+      {formatDuration(paused && currentTime <= POSTER_TIME ? duration : remaining)}
     </span>
   </button>
   {#if transcript}
@@ -137,17 +139,26 @@
     height: 13rem;
     padding: 0;
     border: 0;
+    border-radius: 50%;
 
     background: transparent;
+    -webkit-tap-highlight-color: transparent;
+
+    &:focus {
+      outline: none;
+    }
   }
 
   video {
+    display: block;
+
     width: 100%;
     height: 100%;
     border-radius: 50%;
 
     object-fit: cover;
     background-color: var(--color-default-shadow);
+    clip-path: circle(50%);
   }
 
   .ring {