fix(downloads): iPad audio playback + honest non-retryable failure for auth-walled hosts

5a — the public watch page rendered every asset in a <video>, but WebKit (all
iOS browsers) refuses to play an audio-only mp3 in <video>, so shared audio
links were broken on iPad while working on desktop Chromium. public_meta now
flags audio-only assets (codec present, no video stream) and WatchPage renders
a native <audio> in a padded surface card (no artwork exists for these).

5c — a login-walled Facebook post failed as a bare 'unknown', which offered a
misleading Retry. Classify closed-group / cookie-suggestion auth walls as
login_required and genuinely unsupported sites as a new unsupported_host class
(both non-retryable), and drop unknown from the modal's retryable set — an
unclassified failure is most often an unparsed auth wall. The queue row keeps
its own force-retry for real transients.

frontend/src/components/WatchPage.tsx

@@ -11,10 +11,11 @@ import { Download, Link2, Lock, PlayCircle } from "lucide-react";
 // playing in the background on Brave iOS. We deliberately do NOT route the audio through the Web
 // Audio API: `createMediaElementSource` pulls the element out of the normal media pipeline that the
 // background feature (and iOS) hooks into, and iOS then suspends the AudioContext on background —
-// which STOPPED playback instead of keeping it alive (measured on iPad Brave). A plain <video> +
-// MediaSession leaves the browser's native background handling in charge.
+// which STOPPED playback instead of keeping it alive (measured on iPad Brave). A plain <video>/<audio>
+// + MediaSession leaves the browser's native background handling in charge. Typed on HTMLMediaElement
+// so it drives either the video or the audio-only player.
 function useMediaSession(
-  videoRef: React.RefObject<HTMLVideoElement | null>,
+  videoRef: React.RefObject<HTMLMediaElement | null>,
   meta: Meta | null,
   ready: boolean,
 ) {
@@ -45,6 +46,7 @@ type Meta = {
   source_url?: string | null;
   extra_links?: string[];
   duration_s?: number | null;
+  audio?: boolean;
   allow_download?: boolean;
   file_url?: string;
   poster_url?: string | null;
@@ -112,8 +114,13 @@ export default function WatchPage() {
   const [password, setPassword] = useState("");
   const [error, setError] = useState<string | null>(null);
   const [unlocking, setUnlocking] = useState(false);
-  const videoRef = useRef<HTMLVideoElement>(null);
-  useMediaSession(videoRef, meta, status === "ready");
+  // One ref for whichever element renders (video or audio-only) — a callback ref so it can bind to
+  // both without a per-element typed ref.
+  const mediaRef = useRef<HTMLMediaElement | null>(null);
+  const setMedia = (el: HTMLMediaElement | null) => {
+    mediaRef.current = el;
+  };
+  useMediaSession(mediaRef, meta, status === "ready");
 
   useEffect(() => {
     if (!token) {
@@ -206,18 +213,27 @@ export default function WatchPage() {
 
         {status === "ready" && meta && (
           <div>
-            {/* Shrink-wrap the player to the video so a vertical/short clip renders as a narrow
-                player instead of a wide box with black bars; a landscape clip fills the width. */}
-            <div className="rounded-xl overflow-hidden bg-black border border-border w-fit max-w-full mx-auto">
-              <video
-                ref={videoRef}
-                controls
-                playsInline
-                src={meta.file_url}
-                poster={meta.poster_url || undefined}
-                className="max-h-[80vh] max-w-full mx-auto block"
-              />
-            </div>
+            {meta.audio ? (
+              /* Audio-only asset (mp3): WebKit won't play it in a <video>, so render a native
+                 <audio>. No poster exists for these, so present it as a deliberate padded bar on
+                 the surface (not the black video box) so it looks intentional without artwork. */
+              <div className="rounded-xl border border-border bg-surface p-4">
+                <audio ref={setMedia} controls src={meta.file_url} className="w-full block" />
+              </div>
+            ) : (
+              /* Shrink-wrap the player to the video so a vertical/short clip renders as a narrow
+                 player instead of a wide box with black bars; a landscape clip fills the width. */
+              <div className="rounded-xl overflow-hidden bg-black border border-border w-fit max-w-full mx-auto">
+                <video
+                  ref={setMedia}
+                  controls
+                  playsInline
+                  src={meta.file_url}
+                  poster={meta.poster_url || undefined}
+                  className="max-h-[80vh] max-w-full mx-auto block"
+                />
+              </div>
+            )}
             <div className="mt-3 flex items-start gap-3">
               <div className="min-w-0 flex-1">
                 <h1 className="text-lg font-semibold leading-snug">{meta.title || "Video"}</h1>