fix thumbs for videos in apk

Author: arcbtc

src/lib/components/MessagesView.svelte

@@ -22,10 +22,10 @@
   import { shouldSubmitTextareaOnEnter } from '$lib/keyboard';
   import { extractMediaAttachments, extractQuotedNoteReferences, parseNoteText } from '$lib/nostr/media';
   import { appPath } from '$lib/paths';
-  import { pauseWhenHidden } from '$lib/actions/pauseWhenHidden';
   import { findOrCreatePomegranateConnection } from '$lib/nostr/pomegranateAuth';
   import type { DirectMessage, MediaAttachment, NostrEvent, Profile } from '$lib/nostr/types';
   import QuotedNotePreview from './QuotedNotePreview.svelte';
+  import VideoAttachment from './VideoAttachment.svelte';
 
   const nostrChatUrl = 'https://chat.nostr.com';
   const nostrChatConnectionName = 'chat.nostr.com';
@@ -425,8 +425,7 @@
                     <div class="dm-media-grid">
                       {#each media as item}
                         {#if item.type === 'video'}
-                          <!-- svelte-ignore a11y_media_has_caption -->
-                          <video use:pauseWhenHidden src={item.url} poster={item.poster} controls preload="metadata" playsinline title={item.alt}></video>
+                          <VideoAttachment src={item.url} poster={item.poster} title={item.alt} />
                         {:else}
                           <button type="button" on:click={() => (openImage = { url: item.url, alt: item.alt })} aria-label="Open image">
                             <img src={item.url} alt={item.alt ?? ''} loading="lazy" referrerpolicy="no-referrer" />

src/lib/components/NoteCard.svelte

@@ -16,6 +16,7 @@
   import { saveThreadReturnTarget, currentThreadReturnTarget } from '$lib/stores/threadNavigation';
   import { saveThreadSeed } from '$lib/stores/threadSeed';
   import QuotedNotePreview from './QuotedNotePreview.svelte';
+  import VideoAttachment from './VideoAttachment.svelte';
 
   export let event: NostrEvent;
   export let profile: Profile | undefined;
@@ -590,8 +591,7 @@
       <div class="media-grid" class:single={mediaAttachments.length === 1} class:double={mediaAttachments.length === 2} class:triple={mediaAttachments.length === 3} class:quad={mediaAttachments.length >= 4}>
         {#each mediaAttachments as media}
           {#if media.type === 'video'}
-            <!-- svelte-ignore a11y_media_has_caption -->
-            <video use:pauseWhenHidden src={media.url} poster={media.poster} controls preload="metadata" playsinline title={media.alt}></video>
+            <VideoAttachment src={media.url} poster={media.poster} title={media.alt} />
           {:else}
             <button class="media-image-button" on:click={() => (openImage = { url: media.url, alt: media.alt })} aria-label="Open image">
               <img src={media.url} alt={media.alt ?? ''} loading="lazy" referrerpolicy="no-referrer" />

src/lib/components/VideoAttachment.svelte

@@ -0,0 +1,110 @@
+<script lang="ts" context="module">
+  const generatedPosters = new Map<string, Promise<string>>();
+
+  function generatedPosterFor(url: string) {
+    if (!generatedPosters.has(url)) generatedPosters.set(url, captureVideoPoster(url));
+    return generatedPosters.get(url) ?? Promise.resolve('');
+  }
+
+  function captureVideoPoster(url: string) {
+    return new Promise<string>((resolve) => {
+      if (typeof document === 'undefined') {
+        resolve('');
+        return;
+      }
+
+      const video = document.createElement('video');
+      const timeout = setTimeout(() => finish(''), 10_000);
+      let settled = false;
+
+      const finish = (poster: string) => {
+        if (settled) return;
+        settled = true;
+        clearTimeout(timeout);
+        video.removeAttribute('src');
+        video.load();
+        resolve(poster);
+      };
+
+      const drawFrame = () => {
+        const width = video.videoWidth;
+        const height = video.videoHeight;
+        if (!width || !height) {
+          finish('');
+          return;
+        }
+
+        try {
+          const maxWidth = 640;
+          const scale = Math.min(1, maxWidth / width);
+          const canvas = document.createElement('canvas');
+          canvas.width = Math.max(1, Math.round(width * scale));
+          canvas.height = Math.max(1, Math.round(height * scale));
+          const context = canvas.getContext('2d');
+          if (!context) {
+            finish('');
+            return;
+          }
+          context.drawImage(video, 0, 0, canvas.width, canvas.height);
+          finish(canvas.toDataURL('image/jpeg', 0.76));
+        } catch {
+          finish('');
+        }
+      };
+
+      const seekToFrame = () => {
+        if (settled) return;
+        const targetTime = Number.isFinite(video.duration) && video.duration > 0.25 ? 0.12 : 0;
+        if (targetTime <= 0) {
+          drawFrame();
+          return;
+        }
+        try {
+          video.currentTime = targetTime;
+        } catch {
+          drawFrame();
+        }
+      };
+
+      video.crossOrigin = 'anonymous';
+      video.muted = true;
+      video.playsInline = true;
+      video.preload = 'metadata';
+      video.addEventListener('loadedmetadata', seekToFrame, { once: true });
+      video.addEventListener('loadeddata', () => {
+        if (video.currentTime === 0) drawFrame();
+      }, { once: true });
+      video.addEventListener('seeked', drawFrame, { once: true });
+      video.addEventListener('error', () => finish(''), { once: true });
+      video.src = url;
+      video.load();
+    });
+  }
+</script>
+
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { pauseWhenHidden } from '$lib/actions/pauseWhenHidden';
+
+  export let src: string;
+  export let poster: string | undefined = undefined;
+  export let title: string | undefined = undefined;
+
+  let generatedPoster = '';
+  $: displayPoster = poster || generatedPoster || undefined;
+
+  onMount(() => {
+    let cancelled = false;
+    if (!poster) {
+      void generatedPosterFor(src).then((nextPoster) => {
+        if (!cancelled && nextPoster) generatedPoster = nextPoster;
+      });
+    }
+    return () => {
+      cancelled = true;
+    };
+  });
+</script>
+
+<!-- svelte-ignore a11y_media_has_caption -->
+<video use:pauseWhenHidden {src} poster={displayPoster} controls preload="metadata" playsinline {title}></video>