feat: add video thumbnail microservice for Android support (#73)

- Use preload="metadata" on web for native browser thumbnails
- Add VITE_THUMBNAIL_URL env var for configurable thumbnail service
- On Android, use thumbnail microservice to generate poster images
- Add standalone Express + ffmpeg thumbnail service in services/video-thumbnails/

.env

@@ -19,5 +19,6 @@ VITE_DEFAULT_SEARCH_RELAYS=relay.ditto.pub,antiprimal.net,relay.vertexlab.io
 VITE_DEFAULT_MESSAGING_RELAYS=auth.nostr1.com,relay.keychat.io,relay.ditto.pub
 VITE_SIGNER_RELAYS=relay.nsec.app,ephemeral.snowflare.cc,bucket.coracle.social
 VITE_VAPID_PUBLIC_KEY=BIt2D4BdgdbCowD_0d3Np6GbrIGHxd7aIEUeZNe3hQuRlHz02OhzvDaai0XSFoJYVzSzdMjdyW-QhvW9_yq8j4Y
+VITE_THUMBNAIL_URL=
 VITE_GLITCHTIP_API_KEY=
 GLITCHTIP_AUTH_TOKEN=

src/app/components/ContentLinkBlock.svelte

@@ -1,12 +1,19 @@
 <script lang="ts">
   import {call, ellipsize, displayUrl, postJson} from "@welshman/lib"
   import {isRelayUrl, getTagValue} from "@welshman/util"
+  import {Capacitor} from "@capacitor/core"
   import {preventDefault, stopPropagation} from "@lib/html"
   import Link from "@lib/components/Link.svelte"
   import ContentLinkDetail from "@app/components/ContentLinkDetail.svelte"
   import ContentLinkBlockImage from "@app/components/ContentLinkBlockImage.svelte"
   import {pushModal} from "@app/util/modal"
-  import {dufflepud, PLATFORM_URL, IMAGE_CONTENT_TYPES, VIDEO_CONTENT_TYPES} from "@app/core/state"
+  import {
+    dufflepud,
+    PLATFORM_URL,
+    IMAGE_CONTENT_TYPES,
+    VIDEO_CONTENT_TYPES,
+    THUMBNAIL_URL,
+  } from "@app/core/state"
   import {makeSpacePath} from "@app/util/routes"
 
   const {value, event} = $props()
@@ -22,6 +29,14 @@
     return [url, true]
   })
 
+  const getVideoPoster = (videoUrl: string): string | undefined => {
+    if (Capacitor.getPlatform() === "android" && THUMBNAIL_URL) {
+      return `${THUMBNAIL_URL}/thumbnail?url=${encodeURIComponent(videoUrl)}`
+    }
+
+    return undefined
+  }
+
   const loadPreview = async () => {
     const json = await postJson(dufflepud("link/preview"), {url})
 
@@ -45,7 +60,8 @@
       <video
         controls
         src={url}
-        poster="{url}#t=1"
+        poster={getVideoPoster(url)}
+        preload="metadata"
         class="max-h-96 rounded-box object-contain object-center">
         <track kind="captions" />
       </video>

src/app/core/state.ts

@@ -210,6 +210,8 @@ export const DEFAULT_PUBKEYS = import.meta.env.VITE_DEFAULT_PUBKEYS
 
 export const DUFFLEPUD_URL = "https://dufflepud.onrender.com"
 
+export const THUMBNAIL_URL = import.meta.env.VITE_THUMBNAIL_URL
+
 export const NIP46_PERMS =
   "nip44_encrypt,nip44_decrypt," +
   [