From 47def268af0986ab0bb9209addc51ef467ceeb95 Mon Sep 17 00:00:00 2001
From: wolfmanster <68727977+wolfmanster@users.noreply.github.com>
Date: Thu, 20 Aug 2026 14:50:00 +0800
Subject: [PATCH] Fix media previews for Capacitor file URLs

---
 apps/client/src/App.tsx | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/apps/client/src/App.tsx b/apps/client/src/App.tsx
index e66aa192..be6bd650 100644
--- a/apps/client/src/App.tsx
+++ b/apps/client/src/App.tsx
@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Capacitor } from '@capacitor/core';
 import {
   Archive,
   ArrowDownToLine,
@@ -66,11 +67,25 @@ function statusIcon(status: JobStatus) {
   return <Clock3 size={13} />;
 }
 
+function revealVideoPreview(video: HTMLVideoElement) {
+  if (video.currentTime > 0 || !Number.isFinite(video.duration) || video.duration <= 0) return;
+  video.currentTime = Math.min(0.05, video.duration / 2);
+}
+
 function MediaPreview({ media }: { media: MediaItem }) {
+  const previewUrl = Capacitor.convertFileSrc(media.previewUrl);
   if (media.kind === 'image' || media.kind === 'gif') {
-    return <img src={media.previewUrl} alt={media.filename} loading="lazy" />;
+    return <img src={previewUrl} alt={media.filename} loading="lazy" />;
   }
-  return <video src={media.previewUrl} controls preload="metadata" />;
+  return (
+    <video
+      src={previewUrl}
+      controls
+      playsInline
+      preload="metadata"
+      onLoadedMetadata={(event) => revealVideoPreview(event.currentTarget)}
+    />
+  );
 }
 
 function JobCard({ job, onAction }: { job: DownloadJob; onAction: (action: 'cancel' | 'retry', id: string) => void }) {