cursedbelt 4.1.0 → 4.3.0

package/src/react/media/videoChapterEditor.css

@@ -17,6 +17,25 @@
 	border-radius: var(--radius-md, 8px);
 }
 
+/* Why there is no film, said IN the player's own place — the sibling of `.cbvc-nofilm` in
+   `videoCutEditor.css`, which documents both halves of the reasoning (why the panel wears the
+   video's own class, and why the turner's white-on-black note cannot be reused on a theme
+   surface). Restated here for the same reason every `.cbch-*` rule is a sibling of a `.cbvc-*`
+   one: these two sheets ride their own lazily-imported chunks and share nothing. */
+.cbch-nofilm {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	min-block-size: 8rem;
+	margin: 0;
+	padding: 1.5rem;
+	text-align: center;
+	text-wrap: balance;
+	font-size: 13px;
+	line-height: 1.5;
+	color: var(--muted-foreground, var(--foreground));
+}
+
 /* The one authoring row: name the section, then mark it. In that order, because the button
    is disabled until there is a name — see the component. */
 .cbch-add {

package/src/react/media/videoCutEditor.css

@@ -17,6 +17,28 @@
 	border-radius: var(--radius-md, 8px);
 }
 
+/* Why there is no film, said IN the player's own place — the owner's *"I see a black screen"*,
+   which he could only report as a black screen because the dialog said nothing. It carries
+   `.cbvc-video` as well, so the panel is the same width, ground and corner as the element it
+   stands in for and the dialog does not jump when a source resolves.
+
+   🔴 Not `.cbpe-frame-note`, which the turner and the grabber share: that note is white on the
+   true black of a photograph's frame, and this sheet's ground is a theme surface — reusing it
+   here would be invisible text in the light theme. */
+.cbvc-nofilm {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	min-block-size: 8rem;
+	margin: 0;
+	padding: 1.5rem;
+	text-align: center;
+	text-wrap: balance;
+	font-size: 13px;
+	line-height: 1.5;
+	color: var(--muted-foreground, var(--foreground));
+}
+
 .cbvc-marks {
 	display: flex;
 	align-items: center;

package/src/react/media-gallery/MediaGallery.spec.tsx

@@ -567,6 +567,103 @@ describe('MediaGallery — turning a video', () => {
     expect(preview?.getAttribute('poster')).toBe('/signed/poster2');
   });
 
+  /**
+   * ── 🔴 The other four dialogs read the raw row too, and the same black screen came out ──
+   *
+   * The fix above was scoped to the turn dialog; the cause is shared by every capability
+   * dialog the gallery mounts. Each of the four below was written as
+   * `src={item.streamUrl ?? item.url ?? ''}` (or `item.url ?? ''` for the picture editor) and
+   * each therefore opened on nothing at all for an app whose URLs are minted on demand — the
+   * app that reported the original bug. They are asserted one dialog per test, by the source
+   * that ARRIVES at the element, because that is the fact the report was about.
+   *
+   * 🔴 Every assertion goes through `baseElement`: these are portals, so nothing they render
+   * is under the render root and a `container` query would find null and pass for the wrong
+   * reason.
+   */
+  const SIGNED_FILM: MediaGalleryItem[] = [
+    {
+      id: 'vid3',
+      name: 'signed.mp4',
+      mime: 'video/mp4',
+      createdAt: 10,
+      durationSeconds: 90,
+      // No `url` and no `streamUrl`: the app mints them when something needs them.
+      resolveMedia: async () => ({ streamUrl: '/signed/vid3', posterUrl: '/signed/poster3' }),
+    },
+  ];
+
+  test('🔴 the TRIM dialog is handed the RESOLVED source, not the raw row', async () => {
+    const view = render(<MediaGallery items={SIGNED_FILM} onTrimVideo={() => {}} />);
+    await waitFor(() => expect(view.queryByRole('button', { name: 'Open signed.mp4' })).not.toBeNull());
+    fireEvent.click(view.getByRole('button', { name: 'Open signed.mp4' }));
+    fireEvent.click(view.getByRole('button', { name: 'Trim' }));
+    await waitFor(() => expect(view.queryByText('Trim signed.mp4')).not.toBeNull());
+    const film = await waitFor(() => {
+      const el = view.baseElement.querySelector<HTMLVideoElement>('video.cbvc-video');
+      expect(el, 'the trim dialog rendered no film to mark up').not.toBeNull();
+      return el as HTMLVideoElement;
+    });
+    expect(film.getAttribute('src')).toBe('/signed/vid3');
+    expect(film.getAttribute('poster')).toBe('/signed/poster3');
+  });
+
+  test('🔴 the SECTIONS dialog is handed the RESOLVED source, not the raw row', async () => {
+    const view = render(<MediaGallery items={SIGNED_FILM} onSaveChapters={() => {}} />);
+    await waitFor(() => expect(view.queryByRole('button', { name: 'Open signed.mp4' })).not.toBeNull());
+    fireEvent.click(view.getByRole('button', { name: 'Open signed.mp4' }));
+    fireEvent.click(view.getByRole('button', { name: 'Sections' }));
+    await waitFor(() => expect(view.queryByText('Sections of signed.mp4')).not.toBeNull());
+    const film = await waitFor(() => {
+      const el = view.baseElement.querySelector<HTMLVideoElement>('video.cbch-video');
+      expect(el, 'the sections dialog rendered no film to scrub').not.toBeNull();
+      return el as HTMLVideoElement;
+    });
+    expect(film.getAttribute('src')).toBe('/signed/vid3');
+    expect(film.getAttribute('poster')).toBe('/signed/poster3');
+  });
+
+  test('🔴 the FRAME GRABBER is handed the RESOLVED source, not the raw row', async () => {
+    const view = render(<MediaGallery items={SIGNED_FILM} onSaveThumbnail={() => {}} />);
+    await waitFor(() => expect(view.queryByRole('button', { name: 'Open signed.mp4' })).not.toBeNull());
+    fireEvent.click(view.getByRole('button', { name: 'Open signed.mp4' }));
+    // "Choose" rather than "Change": the RAW row carries no poster. The dialog is told about
+    // the resolved one, which is the fact the button's own wording cannot see.
+    fireEvent.click(view.getByRole('button', { name: 'Choose thumbnail' }));
+    await waitFor(() => expect(view.queryByText('Pick a moment in signed.mp4')).not.toBeNull());
+    const film = await waitFor(() => {
+      const el = view.baseElement.querySelector<HTMLVideoElement>('.cbpe-frame video');
+      expect(el, 'the frame grabber rendered no film to take a frame from').not.toBeNull();
+      return el as HTMLVideoElement;
+    });
+    expect(film.getAttribute('src')).toBe('/signed/vid3');
+  });
+
+  test('🔴 the PICTURE EDITOR is handed the RESOLVED source, not the raw row', async () => {
+    const signed: MediaGalleryItem[] = [
+      {
+        id: 'img9',
+        name: 'signed.jpg',
+        mime: 'image/jpeg',
+        createdAt: 10,
+        resolveMedia: async () => ({ url: '/signed/img9' }),
+      },
+    ];
+    const view = render(<MediaGallery items={signed} onSaveEdit={() => {}} />);
+    await waitFor(() => expect(view.queryByRole('button', { name: 'Open signed.jpg' })).not.toBeNull());
+    fireEvent.click(view.getByRole('button', { name: 'Open signed.jpg' }));
+    fireEvent.click(view.getByRole('button', { name: 'Edit picture' }));
+    await waitFor(() => expect(view.queryByText('Edit picture')).not.toBeNull());
+    const picture = await waitFor(() => {
+      const el = view.baseElement.querySelector<HTMLImageElement>('.cbpe-frame img');
+      // 🔴 The worst of the five to get wrong: this dialog BAKES pixels, so an empty frame is
+      // not a bad preview, it is a blank picture about to be written over a photograph.
+      expect(el, 'the picture editor rendered no picture to edit').not.toBeNull();
+      return el as HTMLImageElement;
+    });
+    expect(picture.getAttribute('src')).toBe('/signed/img9');
+  });
+
   test('🔴 a PICTURE never gets the video control — it already has the fuller editor', () => {
     const picture: MediaGalleryItem[] = [
       { id: 'img1', name: 'beach.jpg', url: '/files/img1', createdAt: 1 },
@@ -1271,6 +1368,30 @@ describe('🔴 the stage hands the player every transport the app resolved', ()
       false,
     );
   });
+
+  /*
+   * 🔴 The FIFTH field down this road, and the first one that is not a URL — the app's own
+   * answer to "was this play a fallback, or is there simply no ladder?". It fails the same way
+   * as the four before it: not destructured in the app's `resolveMedia`, or not listed here,
+   * and the badge is dead with every gate green. The ordinary ladder-less video must stay
+   * silent, which is the second assertion — a badge that appears on every unoptimized clip
+   * stops meaning anything.
+   */
+  test('🔴 an unreachable ladder reaches the player as `playbackDegraded`', () => {
+    const video = stagePlayableVideo(item, { playbackDegraded: true }, '/files/v1.web.mp4');
+    expect(video.playbackDegraded).toBe(true);
+    // It never stands in for the ladder or for a processing fault — those are other sentences.
+    expect('hlsUrl' in video).toBe(false);
+    expect('processingStatus' in video).toBe(false);
+  });
+
+  test('a video that simply has NO ladder leaves the field absent, so the badge stays quiet', () => {
+    expect('playbackDegraded' in stagePlayableVideo(item, {}, '/files/v1.web.mp4')).toBe(false);
+    expect(
+      'playbackDegraded' in
+        stagePlayableVideo(item, { playbackDegraded: false }, '/files/v1.web.mp4'),
+    ).toBe(false);
+  });
 });
 
 /**
@@ -2446,3 +2567,170 @@ describe('MediaGallery — tags and descriptions', () => {
     expect(line?.textContent).toContain('holiday');
   });
 });
+
+/**
+ * 🔴 A 404 AND A HANG MUST NOT LOOK THE SAME — the owner's report, 2026-09-17.
+ *
+ * *"make a 404 stop the media player spinner so I don't think it's going to eventually load."*
+ * `itm_cbaebe887d3b48dab2c4` in his catalogue has no ladder, so the very first request its
+ * stage made was answered honestly and immediately — `404`, `{"error":"not_found"}`, 0.2 s —
+ * and the spinner then ran until he gave up. A timeout may keep spinning, because something
+ * might still arrive. An answer may not, because nothing will.
+ *
+ * happy-dom can see all of this: both surfaces below are a plain `<video>` and a plain `<img>`,
+ * the probe is a `fetch` a test can install, and what is under test is which element is in the
+ * DOM and which sentence is on screen. (The real `fetch` is restored after each test — the unit
+ * suite may not put a request on a real socket; see `iframesMakeNoRealRequest.spec.ts`.)
+ */
+describe('🔴 a source that ANSWERED stops the stage spinning and says why', () => {
+  const realFetch = globalThis.fetch;
+  afterEach(() => {
+    globalThis.fetch = realFetch;
+  });
+
+  /** Answer every probe with one status, and count how many were made. */
+  function probesAnswer(...statuses: number[]): { count: () => number } {
+    let n = 0;
+    globalThis.fetch = (() => {
+      const status = statuses[Math.min(n, statuses.length - 1)] ?? 404;
+      n += 1;
+      return Promise.resolve(new Response(null, { status }));
+    }) as unknown as typeof fetch;
+    return { count: () => n };
+  }
+
+  const GONE_VIDEO = 'This video is no longer on the media store (HTTP 404) — nothing is still loading.';
+  const GONE_PICTURE =
+    'This picture is no longer on the media store (HTTP 404) — nothing is still loading.';
+  const STALE_PICTURE = "This picture's link has expired (HTTP 403) — reopen it for a fresh one.";
+
+  test('🔴 the native stage: a 404 source replaces the `<video>` with the reason', async () => {
+    probesAnswer(404);
+    const items: MediaGalleryItem[] = [
+      { id: 'vid1', name: 'clip.mp4', streamUrl: '/files/vid1.web.mp4', createdAt: 20 },
+    ];
+    const { container, getByRole, getByText } = render(
+      <MediaGallery items={items} nativeVideoStage />,
+    );
+    fireEvent.click(getByRole('button', { name: 'Open clip.mp4' }));
+    const video = container.querySelector<HTMLVideoElement>('.cbmg-stage-video');
+    expect(video).not.toBeNull();
+
+    fireEvent.error(video as HTMLVideoElement);
+
+    await waitFor(() => expect(getByText(GONE_VIDEO)).not.toBeNull());
+    // 🔴 The element is GONE, not merely covered: a `<video>` still in the tree is a browser
+    // spinner still on the picture, which is the entire complaint.
+    expect(container.querySelector('.cbmg-stage-video')).toBeNull();
+  });
+
+  test('🔴 the picture stage: a 404 image replaces the torn-page glyph with the reason', async () => {
+    probesAnswer(404);
+    const items: MediaGalleryItem[] = [
+      { id: 'img1', name: 'beach.jpg', url: '/files/img1', createdAt: 30 },
+    ];
+    const { container, getByRole, getByText } = render(<MediaGallery items={items} />);
+    fireEvent.click(getByRole('button', { name: 'Open beach.jpg' }));
+    const img = container.querySelector<HTMLImageElement>('.cbgd-stage-img img');
+    expect(img).not.toBeNull();
+
+    fireEvent.error(img as HTMLImageElement);
+
+    await waitFor(() => expect(getByText(GONE_PICTURE)).not.toBeNull());
+    expect(container.querySelector('.cbgd-stage-img')).toBeNull();
+  });
+
+  /*
+   * 🔴 A 403 is the one fault that comes back on its own. Every signed URL in this fleet
+   * carries `exp = iat + 2 × window`, so a page left open across a window boundary meets a
+   * stale token legitimately — and the app can simply mint another. Saying "gone" there would
+   * be a false and permanent-sounding sentence about a file that is still sitting in the store.
+   */
+  test('🔴 a 403 re-asks the app for a fresh URL instead of stating anything', async () => {
+    probesAnswer(403);
+    let minted = 0;
+    const items: MediaGalleryItem[] = [
+      {
+        id: 'img1',
+        name: 'beach.jpg',
+        createdAt: 30,
+        resolveMedia: async () => {
+          minted += 1;
+          return { url: `/files/img1?sig=${minted}` };
+        },
+      },
+    ];
+    const { container, getByRole, queryByText } = render(<MediaGallery items={items} />);
+    fireEvent.click(getByRole('button', { name: 'Open beach.jpg' }));
+    await waitFor(() =>
+      expect(container.querySelector<HTMLImageElement>('.cbgd-stage-img img')?.src).toContain(
+        'sig=1',
+      ),
+    );
+
+    fireEvent.error(container.querySelector('.cbgd-stage-img img') as HTMLImageElement);
+
+    // A second signature, drawn as a picture again — not a sentence.
+    await waitFor(() =>
+      expect(container.querySelector<HTMLImageElement>('.cbgd-stage-img img')?.src).toContain(
+        'sig=2',
+      ),
+    );
+    expect(minted).toBe(2);
+    expect(queryByText(STALE_PICTURE)).toBeNull();
+  });
+
+  /*
+   * 🔴 And the re-ask is BOUNDED at one. An unbounded retry against a URL that is not going to
+   * come back fresh is the same spinner with more requests in it — the failure `RECOVERY_BUDGET`
+   * bounds one layer down, for the same reason.
+   */
+  test('🔴 a second 403 states the reason rather than re-asking for ever', async () => {
+    probesAnswer(403);
+    let minted = 0;
+    const items: MediaGalleryItem[] = [
+      {
+        id: 'img1',
+        name: 'beach.jpg',
+        createdAt: 30,
+        resolveMedia: async () => {
+          minted += 1;
+          return { url: `/files/img1?sig=${minted}` };
+        },
+      },
+    ];
+    const { container, getByRole, getByText } = render(<MediaGallery items={items} />);
+    fireEvent.click(getByRole('button', { name: 'Open beach.jpg' }));
+    await waitFor(() =>
+      expect(container.querySelector('.cbgd-stage-img img')).not.toBeNull(),
+    );
+
+    fireEvent.error(container.querySelector('.cbgd-stage-img img') as HTMLImageElement);
+    await waitFor(() =>
+      expect(container.querySelector<HTMLImageElement>('.cbgd-stage-img img')?.src).toContain(
+        'sig=2',
+      ),
+    );
+    fireEvent.error(container.querySelector('.cbgd-stage-img img') as HTMLImageElement);
+
+    await waitFor(() => expect(getByText(STALE_PICTURE)).not.toBeNull());
+    expect(minted).toBe(2);
+  });
+
+  /*
+   * 🔴 The guard on all of it: nothing here may fire while a source is merely SLOW. A stage
+   * that has not been told anything is a stage that keeps waiting, which is correct — the
+   * fix is about answers, and an element that has said nothing has not answered.
+   */
+  test('🔴 a stage nobody has answered is still loading, and still says so', async () => {
+    const { count } = probesAnswer(404);
+    const items: MediaGalleryItem[] = [
+      { id: 'img1', name: 'beach.jpg', createdAt: 30, resolveMedia: async () => null },
+    ];
+    const { getByText } = render(<MediaGallery items={items} />);
+    fireEvent.click(getByText('beach.jpg'));
+    await waitFor(() => expect(getByText('Image unavailable.')).not.toBeNull());
+    // And no probe was made: the price of this feature on a working gallery is zero requests.
+    expect(count()).toBe(0);
+  });
+});