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

frontend/src/lib/components/MediaVersionThumb.svelte

@@ -4,6 +4,7 @@
   import type { MediaVersion } 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";
 
   interface Props {
     version: MediaVersion;
@@ -37,7 +38,13 @@
     </a>
   {:else if result.state === "ready" && vk === "video"}
     <a href={result.url} target="_blank" rel="noopener">
-      <video src={result.url} muted preload="metadata"></video>
+      <video
+        src={result.url}
+        muted
+        playsinline
+        preload="metadata"
+        use:poster
+      ></video>
       <span class="play"><Icon name="large-play" size="1.5rem" /></span>
     </a>
   {:else if result.state === "ready"}

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>

frontend/src/lib/components/MessageMedia.svelte

@@ -15,6 +15,7 @@
   import ContextMenuItem from "$lib/components/ui/ContextMenuItem.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";
   import { ui } from "$lib/stores/ui.svelte";
 
@@ -143,7 +144,13 @@
         </button>
       {:else if ready && isThumbVideo}
         <button class="media-thumb" 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="2.5rem" /></span>
         </button>
       {:else if ready}

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 {

frontend/src/lib/components/profile/SharedMedia.svelte

@@ -9,6 +9,7 @@
   import Spinner from "$lib/components/ui/Spinner.svelte";
   import { formatListDate } from "$lib/format/datetime";
   import { formatBytes, mediaKindLabel } from "$lib/format/media";
+  import { poster } from "$lib/media/poster";
   import { accounts } from "$lib/stores/accounts.svelte";
   import { ui } from "$lib/stores/ui.svelte";
 
@@ -132,7 +133,13 @@
         {#if preview(item)?.state === "ready"}
           {@const ready = preview(item) as Extract<InlineMedia, { state: "ready" }>}
           {#if visualKind(item.kind) === "video"}
-            <video src={ready.url} muted preload="metadata"></video>
+            <video
+              src={ready.url}
+              muted
+              playsinline
+              preload="metadata"
+              use:poster
+            ></video>
             <span class="play"><Icon name="play" size="1.5rem" /></span>
           {:else}
             <img src={ready.url} alt="">

frontend/src/lib/components/stories/AllStoriesArchive.svelte

@@ -9,6 +9,7 @@
   import Icon from "$lib/components/ui/Icon.svelte";
   import Spinner from "$lib/components/ui/Spinner.svelte";
   import { peerName } from "$lib/format/peer";
+  import { poster } from "$lib/media/poster";
   import { accounts } from "$lib/stores/accounts.svelte";
 
   interface Group {
@@ -167,7 +168,9 @@
                 <video
                   src={previews[item.story_id]}
                   muted
+                  playsinline
                   preload="metadata"
+                  use:poster
                 ></video>
                 <span class="play"><Icon name="play" size="1.5rem" /></span>
               {:else}

frontend/src/lib/components/stories/StoriesArchive.svelte

@@ -8,6 +8,7 @@
   import EmptyState from "$lib/components/ui/EmptyState.svelte";
   import Icon from "$lib/components/ui/Icon.svelte";
   import Spinner from "$lib/components/ui/Spinner.svelte";
+  import { poster } from "$lib/media/poster";
   import { accounts } from "$lib/stores/accounts.svelte";
 
   const PAGE = 60;
@@ -113,7 +114,9 @@
             <video
               src={previews[item.story_id]}
               muted
+              playsinline
               preload="metadata"
+              use:poster
             ></video>
             <span class="play"><Icon name="play" size="1.5rem" /></span>
           {:else}

frontend/src/lib/media/poster.ts

@@ -0,0 +1,20 @@
+export const POSTER_TIME = 0.001;
+
+export function poster(node: HTMLVideoElement) {
+  const seek = () => {
+    if (node.currentTime === 0) {
+      node.currentTime = POSTER_TIME;
+    }
+  };
+
+  node.addEventListener("loadedmetadata", seek);
+  if (node.readyState >= node.HAVE_METADATA) {
+    seek();
+  }
+
+  return {
+    destroy() {
+      node.removeEventListener("loadedmetadata", seek);
+    },
+  };
+}