feat(player): the OS media controls, the basic keys and resume for the library and shared-link players

Plex, library and /watch tell the operating system what plays (title, line, picture) and take its play / pause / skip / seek through one hook (lib/mediaSession); the Plex player drives it with its own seek and clock, so the lock screen shows the film's position, not the stream's. The YouTube player is left alone: its iframe already publishes all of it, and the OS routes to the frame that plays. The library and /watch players get the basic keys (lib/mediaKeys, the keymap's mediaPlayer rows) and open where the viewer stopped (lib/resume): the library keeps the point on the server, per user and library item (library_states, POST /api/downloads/{id}/progress, listed back on both listings), the shared link in this browser. A started library row continues, its menu can start it over, and its picture carries the cards' progress bar. The resume rule (too early / near the end = from the start) is one function shared with the YouTube route. The library dialog opens focused on its panel (Modal initialFocus "player"): on the ✕, Space closed the film. While the media element itself has the focus, Space and the arrows stay its own controls' — the browser acts on them whatever a listener does, and one Space played and paused.
2026-10-06 23:55:41 +02:00
parent 02feaa9a1c
commit 59b27467ab
32 changed files with 1489 additions and 133 deletions
@@ -235,6 +235,46 @@ describe("DownloadCenter · the library row", () => {
    ]);
  });

+  it("a started item continues — its bar shows how far — and its menu can start it over", async () => {
+    mocks.jobs = [job(2, "done", { position_seconds: 30 })];
+    mount("done");
+    await screen.findByText("Clip 2");
+    expect(rowButtons("Clip 2")[0]).toBe("card.continueTitle");
+    // The media cards' bar along the picture's bottom edge: 30 s of the 60 s item.
+    expect(rowOf("Clip 2").querySelector<HTMLElement>(".bg-accent")!.style.width).toBe("50%");
+    await openMenu(() => fireEvent.contextMenu(rowOf("Clip 2")));
+    expect(menuRows().slice(0, 2)).toEqual(["card.continue", "card.restartTitle"]);
+
+    // Starting over opens the player at 0:00, not at the kept point.
+    fireEvent.click(
+      screen
+        .getAllByRole("menuitem", { hidden: true })
+        .find((b) => b.textContent === "card.restartTitle")!,
+    );
+    const video = await waitFor(() => {
+      const v = document.querySelector("video");
+      expect(v).not.toBeNull();
+      return v!;
+    });
+    let t = 0;
+    Object.defineProperties(video, {
+      currentTime: { get: () => t, set: (v: number) => void (t = v), configurable: true },
+      duration: { get: () => 60, configurable: true },
+      readyState: { get: () => 1, configurable: true },
+    });
+    video.dispatchEvent(new Event("loadedmetadata"));
+    expect(video.currentTime).toBe(0);
+  });
+
+  it("an item never played offers Play only, with no bar", async () => {
+    mocks.jobs = [job(2, "done", { position_seconds: 0 })];
+    mount("done");
+    await screen.findByText("Clip 2");
+    expect(rowOf("Clip 2").querySelector(".bg-accent")).toBeNull();
+    await openMenu(() => fireEvent.contextMenu(rowOf("Clip 2")));
+    expect(menuRows()).not.toContain("card.restartTitle");
+  });
+
  it("copies the share link from the row's own Share button", async () => {
    mocks.jobs = [job(2, "done")];
    vi.spyOn(api, "downloadLinks").mockResolvedValue([] as never);