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.
2026-08-28 02:22:28 +02:00
parent 11e32163b8
commit b7a6451dba
9 changed files with 158 additions and 21 deletions
@@ -0,0 +1,39 @@
+// @vitest-environment jsdom
+//
+// S3 item 5a: the public watch page must render a native <audio> element for an audio-only asset
+// (mp3) and a <video> for everything else. WebKit (all iOS browsers) refuses to play an audio-only
+// mp3 inside a <video>, which is exactly why the branch exists — this locks it so a refactor can't
+// silently drop the audio player and reintroduce the iPad-broken behavior.
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { render, waitFor, cleanup } from "@testing-library/react";
+import WatchPage from "./WatchPage";
+
+function mockMeta(meta: Record<string, unknown>) {
+  vi.stubGlobal(
+    "fetch",
+    vi.fn(async () => ({ ok: true, json: async () => meta })),
+  );
+}
+
+afterEach(() => {
+  cleanup();
+  vi.unstubAllGlobals();
+});
+
+describe("WatchPage media element (S3 · 5a)", () => {
+  it("renders a native <audio> for an audio-only asset", async () => {
+    window.history.replaceState({}, "", "/watch/tok-audio");
+    mockMeta({ needs_password: false, audio: true, file_url: "/f.mp3", title: "A song" });
+    const { container } = render(<WatchPage />);
+    await waitFor(() => expect(container.querySelector("audio")).not.toBeNull());
+    expect(container.querySelector("video")).toBeNull();
+  });
+
+  it("renders a <video> for a normal video asset", async () => {
+    window.history.replaceState({}, "", "/watch/tok-video");
+    mockMeta({ needs_password: false, audio: false, file_url: "/f.mp4", title: "A clip" });
+    const { container } = render(<WatchPage />);
+    await waitFor(() => expect(container.querySelector("video")).not.toBeNull());
+    expect(container.querySelector("audio")).toBeNull();
+  });
+});