cursedbelt 4.1.1 → 4.3.0

package/src/react/media/VideoChapterEditor.tsx

@@ -46,10 +46,25 @@ import {
  * by every visit after the first.
  */
 export interface VideoChapterEditorProps {
-  /** The clip, as a URL a `<video>` can play. */
+  /**
+   * The clip, as a URL a `<video>` can play.
+   *
+   * 🔴 The RESOLVED source, not whatever URL field a record happens to carry — see
+   * `MediaGallery`'s `ChapterVideoDialog`. A gallery item is allowed to carry no URL at all
+   * (`resolveMedia` is the documented path for a signed URL), and a `<video>` with an empty
+   * source never loads, never fires `error` and paints black forever: the owner's *"I see a
+   * black screen"* report, in a different dialog. An empty string here is now a stated reason,
+   * and the sections themselves stay editable — they are metadata beside the film.
+   */
   src: string;
   /** Shown until the first frame decodes — a black box reads as a broken player. */
   posterUrl?: string;
+  /**
+   * True while the app is still finding the source (a signed URL being minted, bytes being
+   * fetched). It is the difference between "on its way" and "cannot be shown", and only the
+   * caller knows which.
+   */
+  resolving?: boolean;
   name?: string;
   /**
    * The clip's length, when the app already knows it. The element's own metadata still wins
@@ -80,6 +95,7 @@ export interface VideoChapterEditorProps {
 export function VideoChapterEditor({
   src,
   posterUrl,
+  resolving = false,
   name,
   durationSeconds,
   chapters: initialChapters,
@@ -108,6 +124,25 @@ export function VideoChapterEditor({
   const [draftTitle, setDraftTitle] = React.useState('');
   const [submitting, setSubmitting] = React.useState(false);
   const [error, setError] = React.useState<string | null>(null);
+  // A source that changes is a fresh attempt: it must not inherit the previous one's failure,
+  // the same rule `VideoTurner` and the gallery's own `ThumbImg` keep.
+  const [failedSrc, setFailedSrc] = React.useState<string | null>(null);
+
+  /**
+   * Why there is no film to scrub — `null` when there is one.
+   *
+   * 🔴 Said out loud rather than drawn as the black rectangle a source-less `<video>` paints,
+   * which is the owner's *"I see a black screen"* in the sibling dialog. Each reason also says
+   * what is still true: a section is a name and a timestamp stored BESIDE the film, so the
+   * ones this video already has can still be renamed, removed and saved with no player at all.
+   */
+  const cannotShow: string | null = resolving
+    ? 'Finding this film…'
+    : !src
+      ? 'This file has no video source to play here, so there is nothing to scrub. The sections are stored beside the film, so the ones it already has can still be edited and saved.'
+      : failedSrc === src
+        ? 'The film could not be loaded, so there is nothing to scrub. The sections are stored beside the film, so the ones it already has can still be edited and saved.'
+        : null;
 
   const spans = React.useMemo(() => chapterSpans(chapters, duration), [chapters, duration]);
   /** What Save would send. Also what `isDirty` compares, so the two can never disagree. */
@@ -265,23 +300,34 @@ export function VideoChapterEditor({
         onKeyDown={onKeyDown}
         aria-label='Name the sections of this video. Type a name, then mark the point it starts at. Space plays and pauses.'
       >
-        {/* biome-ignore lint/a11y/useMediaCaption: arbitrary user-stored files carry no captions. */}
-        <video
-          ref={videoRef}
-          className='cbch-video'
-          src={src}
-          poster={posterUrl}
-          controls
-          playsInline
-          preload='metadata'
-          onLoadedMetadata={(event) => {
-            const seen = event.currentTarget.duration;
-            // The element's own metadata wins over anything the catalog rounded.
-            if (Number.isFinite(seen) && seen > 0) setDuration(seen);
-          }}
-          onTimeUpdate={(event) => setPlayhead(event.currentTarget.currentTime)}
-          onSeeked={(event) => setPlayhead(event.currentTarget.currentTime)}
-        />
+        {cannotShow === null ? (
+          // biome-ignore lint/a11y/useMediaCaption: arbitrary user-stored files carry no captions.
+            <video
+              ref={videoRef}
+              className='cbch-video'
+              // A new source is a new attempt — see `failedSrc`.
+              key={src}
+              src={src}
+              poster={posterUrl}
+              controls
+              playsInline
+              preload='metadata'
+              onLoadedMetadata={(event) => {
+                const seen = event.currentTarget.duration;
+                // The element's own metadata wins over anything the catalog rounded.
+                if (Number.isFinite(seen) && seen > 0) setDuration(seen);
+              }}
+              onTimeUpdate={(event) => setPlayhead(event.currentTarget.currentTime)}
+              onSeeked={(event) => setPlayhead(event.currentTarget.currentTime)}
+              onError={() => setFailedSrc(src)}
+            />
+        ) : (
+          /* In the film's own place and at its own size — a sentence under a black rectangle
+             would leave the rectangle there to be reported as a black screen. */
+          <p className='cbch-video cbch-nofilm' role='status'>
+            {cannotShow}
+          </p>
+        )}
 
         <div className='cbch-add'>
           <div className='cbch-add-field'>

package/src/react/media/VideoCutEditor.spec.tsx

@@ -10,6 +10,7 @@
 import { afterEach, describe, expect, test } from 'bun:test';
 import { readFileSync } from 'node:fs';
 import { join } from 'node:path';
+import type React from 'react';
 import { cleanup, fireEvent, render, screen } from '@testing-library/react';
 import { VideoCutEditor } from './VideoCutEditor';
 
@@ -124,3 +125,46 @@ describe('what gets sent', () => {
     expect(sent).toHaveLength(0);
   });
 });
+
+/**
+ * 🔴 The dialog SAYS when it has no film — it never renders the black rectangle.
+ *
+ * Filed from the turn dialog's report (`ideas/collections-09-14.md`: *"When I click the turn the
+ * video button I see a black screen"*) after the same cause was found in the four sibling
+ * dialogs: this one was mounted `src={item.streamUrl ?? item.url ?? ''}`, off the raw row, and a
+ * gallery item is allowed to carry neither field (`resolveMedia` is the documented path for a
+ * signed URL). A `<video>` with an empty source never loads, never fires `error` and paints
+ * black forever — so the only way anyone could report it was as a black screen. The gallery now
+ * hands over the RESOLVED source (`MediaGallery.spec.tsx`, "the TRIM dialog is handed the
+ * RESOLVED source"); this is the other half, for when there genuinely is no film.
+ */
+describe('when it cannot show the film', () => {
+  const openWith = (props: Partial<React.ComponentProps<typeof VideoCutEditor>>) =>
+    render(<VideoCutEditor src='' onClose={() => undefined} onSubmit={() => undefined} {...props} />);
+
+  test('🔴 no source at all is a stated reason, not a black box', () => {
+    // A portal: the dialog's body is on `document.body`, not under the render root.
+    const { getByRole } = openWith({});
+    expect(document.body.querySelector('video')).toBeNull();
+    const said = getByRole('status').textContent ?? '';
+    expect(said).toContain('no video source');
+    // …and it says what is still true — nothing was sent, so nothing was re-encoded.
+    expect(said).toContain('Nothing has been sent');
+  });
+
+  test('🔴 a source that fails to load says so too', () => {
+    const { getByRole, queryByRole } = openWith({ src: '/films/gone.mp4' });
+    const film = document.body.querySelector('video');
+    expect(film).not.toBeNull();
+    expect(queryByRole('status')).toBeNull();
+    fireEvent.error(film as HTMLVideoElement);
+    expect(getByRole('status').textContent).toContain('could not be loaded');
+  });
+
+  test('a source still being resolved reads as "on its way", not as a failure', () => {
+    // A signed URL takes a round trip to mint. Flashing "there is nothing to mark up" at
+    // somebody whose film is on its way would be a false report the dialog invented itself.
+    const { getByRole } = openWith({ src: '', resolving: true });
+    expect(getByRole('status').textContent).toContain('Finding this film');
+  });
+});

package/src/react/media/VideoCutEditor.tsx

@@ -74,10 +74,24 @@ import {
  * exists, in one predictable place, and pays no permanent rent in the dialog.
  */
 export interface VideoCutEditorProps {
-  /** The clip, as a URL a `<video>` can play. */
+  /**
+   * The clip, as a URL a `<video>` can play.
+   *
+   * 🔴 The RESOLVED source, not whatever URL field a record happens to carry — see
+   * `MediaGallery`'s `TrimVideoDialog`. A gallery item is allowed to carry no URL at all
+   * (`resolveMedia` is the documented path for a signed URL), and a `<video>` with an empty
+   * source never loads, never fires `error` and paints black forever: the owner's *"I see a
+   * black screen"* report, in a different dialog. An empty string here is now a stated reason.
+   */
   src: string;
   /** Shown until the first frame decodes — a black box reads as a broken player. */
   posterUrl?: string;
+  /**
+   * True while the app is still finding the source (a signed URL being minted, bytes being
+   * fetched). It is the difference between "on its way" and "cannot be shown", and only the
+   * caller knows which.
+   */
+  resolving?: boolean;
   name?: string;
   /**
    * The clip's length, when the app already knows it. The element's own metadata still wins
@@ -102,6 +116,7 @@ export interface VideoCutEditorProps {
 export function VideoCutEditor({
   src,
   posterUrl,
+  resolving = false,
   name,
   durationSeconds,
   open = true,
@@ -118,6 +133,25 @@ export function VideoCutEditor({
   const [plan, setPlan] = React.useState<CutPlan>(EMPTY_PLAN);
   const [submitting, setSubmitting] = React.useState(false);
   const [error, setError] = React.useState<string | null>(null);
+  // A source that changes is a fresh attempt: it must not inherit the previous one's failure,
+  // the same rule `VideoTurner` and the gallery's own `ThumbImg` keep.
+  const [failedSrc, setFailedSrc] = React.useState<string | null>(null);
+
+  /**
+   * Why there is no film to mark up — `null` when there is one.
+   *
+   * 🔴 The dialog SAYS it rather than rendering the black rectangle a source-less `<video>`
+   * paints. Marking a cut means scrubbing to a moment, so with nothing to play there is
+   * genuinely nothing to mark — and the one thing worse than that is a player that looks
+   * broken and a Send button whose refusal ("Nothing is marked") reads as the dialog's fault.
+   */
+  const cannotShow: string | null = resolving
+    ? 'Finding this film…'
+    : !src
+      ? 'This file has no video source to play here, so there is nothing to mark up. Nothing has been sent.'
+      : failedSrc === src
+        ? 'The film could not be loaded, so there is nothing to mark up. Nothing has been sent.'
+        : null;
 
   const segments = React.useMemo(() => planSegments(plan, duration), [plan, duration]);
   const cuts = React.useMemo(() => planCuts(plan, duration), [plan, duration]);
@@ -248,23 +282,34 @@ export function VideoCutEditor({
         onKeyDown={onKeyDown}
         aria-label='Mark sections to cut. Press [ to start a cut, ] to end it, space to play or pause.'
       >
-        {/* biome-ignore lint/a11y/useMediaCaption: arbitrary user-stored files carry no captions. */}
-        <video
-          ref={videoRef}
-          className='cbvc-video'
-          src={src}
-          poster={posterUrl}
-          controls
-          playsInline
-          preload='metadata'
-          onLoadedMetadata={(event) => {
-            const seen = event.currentTarget.duration;
-            // The element's own metadata wins over anything the catalog rounded.
-            if (Number.isFinite(seen) && seen > 0) setDuration(seen);
-          }}
-          onTimeUpdate={(event) => setPlayhead(event.currentTarget.currentTime)}
-          onSeeked={(event) => setPlayhead(event.currentTarget.currentTime)}
-        />
+        {cannotShow === null ? (
+          // biome-ignore lint/a11y/useMediaCaption: arbitrary user-stored files carry no captions.
+            <video
+              ref={videoRef}
+              className='cbvc-video'
+              // A new source is a new attempt — see `failedSrc`.
+              key={src}
+              src={src}
+              poster={posterUrl}
+              controls
+              playsInline
+              preload='metadata'
+              onLoadedMetadata={(event) => {
+                const seen = event.currentTarget.duration;
+                // The element's own metadata wins over anything the catalog rounded.
+                if (Number.isFinite(seen) && seen > 0) setDuration(seen);
+              }}
+              onTimeUpdate={(event) => setPlayhead(event.currentTarget.currentTime)}
+              onSeeked={(event) => setPlayhead(event.currentTarget.currentTime)}
+              onError={() => setFailedSrc(src)}
+            />
+        ) : (
+          /* In the film's own place and at its own size — a sentence under a black rectangle
+             would leave the rectangle there to be reported as a black screen. */
+          <p className='cbvc-video cbvc-nofilm' role='status'>
+            {cannotShow}
+          </p>
+        )}
 
         <div className='cbvc-marks'>
           <Button size='sm' variant='secondary' onClick={cutHere} tooltip='Cut the clip here (C)'>

package/src/react/media/VideoPlayer.spec.tsx

@@ -132,6 +132,89 @@ describe('ProcessingIndicator', () => {
   });
 });
 
+/**
+ * 🔴 The second corner badge: this play is the progressive fallback and the app KNOWS it,
+ * because its probe of the media store did not answer.
+ *
+ * Why it exists at all: `collections` answers `/api/items/:id/url` with `playbackDegraded`, and
+ * until this badge the fact surfaced in exactly two places — the field and one stderr line,
+ * neither of them on screen. The fallback is silent and expensive (a 467 MB average `.web.mp4`
+ * that Cloudflare refuses to cache against a ~1 MB edge-served ladder segment), so for eight
+ * days the only detector in the fleet was the owner watching a video stall.
+ *
+ * 🔴 These assertions are about WHICH SENTENCE is on screen, which is the whole risk here. The
+ * cheap implementation — map `playbackDegraded` onto `processingStatus: 'failed'` and reuse the
+ * badge that already exists — puts "Optimization failed" over a video whose optimization
+ * succeeded. Hence a test that the degraded badge appears WITHOUT that text, and a test that
+ * both sentences survive together.
+ */
+describe('🔴 the badge for a ladder we could not reach', () => {
+  // 🔴 Both sentences spelled out, not imported from the component. Which words are on the
+  // picture IS the deliverable here, and an assertion that reads the component's own constant
+  // stays green through a rewrite of the thing it exists to pin.
+  const DEGRADED = 'Reduced quality — could not reach the media store';
+  const OPTIMIZATION_FAILED = 'Optimization failed — playing original';
+  const textOf = (nodes: HTMLElement[]) => nodes.map((n) => n.textContent ?? '');
+
+  test('a degraded play says so — and does NOT claim the optimization failed', () => {
+    const { getAllByRole } = render(<ProcessingIndicator playbackDegraded />);
+    const lines = textOf(getAllByRole('status'));
+    expect(lines).toEqual([DEGRADED]);
+    expect(lines.join(' ')).not.toContain('Optimization failed');
+  });
+
+  test('a video with NO ladder and nothing wrong draws nothing at all', () => {
+    // The ordinary case: no ladder was ever built, `streamUrl` plays, there is no fault. A
+    // badge here would appear on most of the library and stop meaning anything.
+    const { container } = render(<VideoPlayer video={video} />);
+    expect(container.querySelector('[role="status"]')).toBeNull();
+    expect(container.querySelector('[role="progressbar"]')).toBeNull();
+  });
+
+  test('the flag on the clip is what puts it on the player', () => {
+    const { getAllByRole } = render(<VideoPlayer video={{ ...video, playbackDegraded: true }} />);
+    expect(textOf(getAllByRole('status'))).toEqual([DEGRADED]);
+  });
+
+  test('…and on the canvas fallback, which shares the indicator', () => {
+    const { getAllByRole } = render(
+      <CanvasVideoPlayer video={{ ...video, playbackDegraded: true }} />,
+    );
+    expect(textOf(getAllByRole('status'))).toEqual([DEGRADED]);
+  });
+
+  /*
+   * 🔴 Both at once is a real state — a probe that did not answer about a video whose
+   * optimization also failed — and it is the state the first draft of any corner badge gets
+   * wrong: two pills pinned to `top: 8; right: 8` draw one exactly on top of the other. They
+   * are two sentences in ONE stack, which is what `VideoStatusBadges` exists for.
+   */
+  test('a failed optimization AND an unreachable store are TWO pills, in one stack', () => {
+    const { getAllByRole } = render(
+      <VideoPlayer video={{ ...video, processingStatus: 'failed', playbackDegraded: true }} />,
+    );
+    const pills = getAllByRole('status');
+    expect(textOf(pills)).toEqual([OPTIMIZATION_FAILED, DEGRADED]);
+    // One positioned parent holding both, so the second can never be hidden under the first.
+    expect(pills[0]?.parentElement).toBe(pills[1]?.parentElement as HTMLElement);
+    const stack = pills[0]?.parentElement as HTMLElement;
+    expect(stack.style.position).toBe('absolute');
+    expect(stack.style.flexDirection).toBe('column');
+    expect(pills[0]?.style.position).toBe('');
+  });
+
+  test('still optimizing AND degraded keeps the bar as well as the badge', () => {
+    // The bar is work in flight; the badge is the transport. Neither replaces the other.
+    const { getAllByRole, getByRole } = render(
+      <VideoPlayer
+        video={{ ...video, processingStatus: 'processing', playbackDegraded: true }}
+      />,
+    );
+    expect(textOf(getAllByRole('status'))).toEqual([DEGRADED]);
+    expect(getByRole('progressbar', { name: 'Optimizing video' })).toBeDefined();
+  });
+});
+
 describe('autoplay — a video opened as the SUBJECT plays on arrival, silently', () => {
   /*
    * 🔴 Asserted on the pure `resolveAutoplay` rather than on the rendered player, because
@@ -569,3 +652,21 @@ describe('🔴 hls.js is served from this bundle, never from a CDN', () => {
     expect(source).toContain("() => import('hls.js')");
   });
 });
+
+/**
+ * 🔴 The shared player's half of *"make a 404 stop the media player spinner so I don't think
+ * it's going to eventually load"* (owner, 2026-09-17).
+ *
+ * The decision and the sentence live in `sourceFault.tsx` and are pinned by its spec — this is
+ * the one claim that belongs to the PLAYER: that a player nobody has answered draws neither.
+ * Vidstack's own element is a custom element happy-dom never brings to life, which is the same
+ * reason `stagePlayableVideo` is asserted as a mapping rather than through the DOM.
+ */
+describe('🔴 an answered source is not a slow one', () => {
+  test('a player nobody has answered draws no overlay at all', () => {
+    // The ordinary case, and the one that must stay untouched: nothing has failed, so the
+    // picture is the picture.
+    const { queryByRole } = render(<VideoPlayer video={video} />);
+    expect(queryByRole('status')).toBeNull();
+  });
+});