cursedbelt 4.1.0 → 4.3.0

package/src/react/media/VideoPlayer.tsx

@@ -25,6 +25,12 @@ import {
   type SessionVolume,
   writeSessionVolume,
 } from '../media-gallery/playbackPreferences';
+import {
+  hlsErrorIsAnswer,
+  probeSourceFault,
+  type SourceFault,
+  SourceFaultOverlay,
+} from './sourceFault';
 import { isSurfaceControl } from './surfaceGesture';
 import { chapterSpans, type ChapteredVideo, type VideoChapter } from './videoChapters';
 
@@ -47,13 +53,36 @@ import { chapterSpans, type ChapteredVideo, type VideoChapter } from './videoCha
  * Vidstack's default layout from a bare bar into a YouTube-shaped one — dividers on the time
  * slider, the current section's name above it, and a chapters menu. See {@link ChaptersTrack}.
  */
+/**
+ * The clip as the players in THIS package consume it — core's {@link PlayableVideo} plus the
+ * two facts cursedbelt carries that `cursedbelt-core` does not yet: the named sections
+ * ({@link ChapteredVideo}) and whether this play is a KNOWN fallback off the adaptive ladder.
+ *
+ * 🔴 An intersection for the same reason `ChapteredVideo` is one — see `videoChapters.ts`'s
+ * header. `PlayableVideo` lives in the published `cursedbelt-core`, which this package cannot
+ * edit and read in the same commit. It only widens, so every existing source, stage and prop
+ * still typechecks untouched.
+ */
+export type PlayerVideo = ChapteredVideo & {
+  /**
+   * The app could not ASK its media store about this video's ladder, so it is serving the
+   * progressive copy on that ignorance — see `MediaGalleryItemMedia.playbackDegraded` for the
+   * full note and the measurements.
+   *
+   * 🔴 Absent is the ordinary state, including for every video that simply has no ladder. Only
+   * a probe that did not ANSWER sets this; "there is no ladder" is not a fault and draws
+   * nothing.
+   */
+  playbackDegraded?: boolean;
+};
+
 export interface VideoPlayerProps {
   /**
-   * The clip, with every URL already resolved — and its named sections, when the app carries
-   * any. {@link ChapteredVideo} is `PlayableVideo` plus `chapters`, so every existing source
-   * still satisfies this unchanged.
+   * The clip, with every URL already resolved — its named sections when the app carries any,
+   * and whether the ladder was unreachable. {@link PlayerVideo} is `PlayableVideo` plus those
+   * two optional fields, so every existing source still satisfies this unchanged.
    */
-  video: ChapteredVideo;
+  video: PlayerVideo;
   /**
    * Start playing on mount. **Defaults to `true`** — see {@link usePrefersReducedMotion} and
    * the block on {@link AUTOPLAY_DEFAULT}.
@@ -523,10 +552,30 @@ export function VideoPlayer({
   canStep = true,
   fullscreenOnDoubleClick = true,
 }: VideoPlayerProps) {
+  /*
+   * 🔴 What the SOURCES have answered, and why a player needs to hold that at all.
+   *
+   * Owner, 2026-09-17: *"make a 404 stop the media player spinner so I don't think it's going
+   * to eventually load."* Vidstack's layout draws a buffering spinner whenever the player is
+   * not ready, and nothing in it distinguishes "waiting" from "asked and told no" — so an item
+   * whose ladder answers `404` in 0.2 s spun until he gave up. Two pieces of state end that:
+   *
+   *   · `ladderAnswered` — the master or a rung REPLIED with a status. Nothing to wait for, so
+   *     the progressive copy (the one that always exists) takes over at once instead of after
+   *     hls.js has retried an answer. Vidstack has no fallback of its own; this is it.
+   *   · `fault` — the progressive copy answered too, so there is nothing left to play and the
+   *     only useful act is to say what happened. See `sourceFault.ts`.
+   *
+   * Both are set ONLY from an answer. A timeout, a stall and a slow origin set neither and
+   * still spin, which is correct: something might still arrive.
+   */
+  const [ladderAnswered, setLadderAnswered] = useState(false);
+  const [fault, setFault] = useState<SourceFault | null>(null);
   // Prefer the adaptive HLS master; fall back to the progressive Range source.
-  const src = video.hlsUrl
-    ? ({ src: video.hlsUrl, type: 'application/x-mpegurl' } as const)
-    : video.streamUrl;
+  const src =
+    video.hlsUrl && !ladderAnswered
+      ? ({ src: video.hlsUrl, type: 'application/x-mpegurl' } as const)
+      : video.streamUrl;
 
   // See AUTOPLAY_DEFAULT. `muted` follows `autoPlay` because an unmuted autoplay is refused
   // by every browser and the refusal LOOKS like the spinner this batch removed — unless he
@@ -561,7 +610,10 @@ export function VideoPlayer({
   const forcedMute = useRef(false);
 
   const status = video.processingStatus;
-  const showProcessing = status != null && status !== 'ready';
+  // 🔴 `playbackDegraded` is its own reason to draw, not a processing state — a video that
+  // optimized perfectly can still be served off the progressive copy because the ladder probe
+  // did not answer, and that play has no `ProcessingStatus` at all.
+  const showProcessing = (status != null && status !== 'ready') || video.playbackDegraded === true;
 
   // Memoized because `slots` holds React elements: a fresh object every render remounts
   // Vidstack's whole layout, which drops the control bar mid-hover and restarts its
@@ -594,6 +646,27 @@ export function VideoPlayer({
         // `preferBundledHls` — without it an adaptive ladder depends on a third-party CDN
         // and fails as a permanent spinner when that CDN is unreachable.
         onProviderChange={preferBundledHls}
+        /* See {@link hlsErrorIsAnswer}. Typed `unknown` on purpose: `hls.js` is an OPTIONAL
+           peer, so its `ErrorData` must not become a static type dependency of this file. */
+        onHlsError={(detail: unknown) => {
+          if (hlsErrorIsAnswer(detail)) setLadderAnswered(true);
+        }}
+        /* The element itself gave up, and what that means depends on what was playing.
+           With a LADDER in play it is the case Vidstack has no answer for at all — a browser
+           playing HLS natively (Safari, every iPhone) meeting a master that is not there, or
+           an hls.js that has spent its own six retries — and the progressive copy has not had
+           its turn yet. 🔴 Handing over is a DOWNGRADE to a stream the edge will not cache, so
+           it happens only once the ladder has actually failed, never on a stall; it is the
+           same call `hlsSource.ts` makes when its recovery budget is spent, and a playing film
+           beats a dead one. On the progressive copy there is no turn left, so the URL is
+           probed for what it actually said and the picture says it. */
+        onError={() => {
+          if (video.hlsUrl && !ladderAnswered) {
+            setLadderAnswered(true);
+            return;
+          }
+          void probeSourceFault(video.streamUrl).then(setFault);
+        }}
         title={video.name}
         poster={video.posterUrl}
         crossOrigin
@@ -680,12 +753,19 @@ export function VideoPlayer({
       </MediaPlayer>
 
       {showProcessing ? (
-        <ProcessingIndicator status={status} progress={video.processingProgress} />
+        <ProcessingIndicator
+          status={status}
+          progress={video.processingProgress}
+          playbackDegraded={video.playbackDegraded}
+        />
       ) : null}
+
+      {fault ? <SourceFaultOverlay fault={fault} name={video.name} /> : null}
     </div>
   );
 }
 
+
 /**
  * The named sections, as the `kind='chapters'` text track Vidstack's default layout is already
  * looking for.
@@ -725,86 +805,154 @@ function ChaptersTrack({ chapters }: { chapters?: readonly VideoChapter[] }) {
   return <Track content={content} type='json' kind='chapters' label='Chapters' default />;
 }
 
+/*
+ * 🔴 Module-private, and the specs spell both sentences out rather than importing them. This
+ * is COPY: which words are on the picture is the deliverable, so an assertion that reads the
+ * constant asserts nothing — it would stay green through a rewrite of the very thing it is
+ * meant to be pinning. (They are also not worth a line of published surface, which
+ * `publicSurface.baseline` charges for.)
+ */
+const OPTIMIZATION_FAILED_BADGE = 'Optimization failed — playing original';
+const PLAYBACK_DEGRADED_BADGE = 'Reduced quality — could not reach the media store';
+
+/**
+ * The top-right corner of a video surface, as ONE stack.
+ *
+ * 🔴 A stack rather than each badge pinning itself to `top: 8; right: 8`, because both facts
+ * can be true of the same play — an optimization that failed AND a media store we could not
+ * reach — and two absolutely-positioned pills at one coordinate draw exactly on top of each
+ * other, so the second sentence is invisible precisely when there is most to say. Laid out as
+ * a column, the corner holds one, two, or (returning `null`) none.
+ *
+ * Never covers the picture: pills only, right-aligned, `pointer-events: none`, so the original
+ * bytes stay fully visible and the control bar underneath stays clickable.
+ */
+function VideoStatusBadges({
+  processingFailed,
+  playbackDegraded,
+}: {
+  processingFailed?: boolean;
+  playbackDegraded?: boolean;
+}) {
+  const lines = [
+    processingFailed ? OPTIMIZATION_FAILED_BADGE : null,
+    // 🔴 A SECOND line, never a re-use of the first. The optimization did not fail here — it
+    // may well have succeeded and we could not ask — so borrowing that sentence would put a
+    // false one on screen. See `PlayerVideo.playbackDegraded`.
+    playbackDegraded ? PLAYBACK_DEGRADED_BADGE : null,
+  ].filter((line): line is string => line !== null);
+  if (lines.length === 0) return null;
+  return (
+    <div
+      style={{
+        position: 'absolute',
+        top: 8,
+        right: 8,
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'flex-end',
+        gap: 4,
+        pointerEvents: 'none',
+      }}
+    >
+      {lines.map((line) => (
+        <div
+          key={line}
+          role='status'
+          style={{
+            padding: '3px 8px',
+            borderRadius: 999,
+            // A corner badge scrim ON TOP of video content — dark-on-video regardless of app
+            // theme (same convention as plugin-video-gallery's modal backdrop).
+            // guardrails-ignore no-hardcoded-colors: see comment above.
+            background: 'rgba(0, 0, 0, 0.65)',
+            color: 'rgba(255, 255, 255, 0.9)',
+            fontSize: 12,
+            fontWeight: 600,
+            lineHeight: 1.4,
+          }}
+        >
+          {line}
+        </div>
+      ))}
+    </div>
+  );
+}
+
 /**
- * The processing state for a video surface: a thin progress bar pinned across the bottom edge
- * while derivatives build (indeterminate shimmer until real progress arrives), or a compact
- * corner badge when optimization failed. Never covers the video — the original bytes stay
+ * The transport state for a video surface: a thin progress bar pinned across the bottom edge
+ * while derivatives build (indeterminate shimmer until real progress arrives), plus whatever
+ * {@link VideoStatusBadges} has to say in the corner — optimization failed, and/or this play
+ * being a known fallback off the ladder. Never covers the video — the original bytes stay
  * fully visible and playable behind it. Shared by {@link VideoPlayer} and the canvas fallback.
+ *
+ * 🔴 `status` is OPTIONAL, because a degraded play is not a processing state: a video that
+ * finished optimizing perfectly well can still be served off the progressive copy because the
+ * ladder probe did not answer. That combination has no `ProcessingStatus` to pass.
  */
 export function ProcessingIndicator({
   status,
   progress,
+  playbackDegraded,
 }: {
-  status: NonNullable<PlayableVideo['processingStatus']>;
+  status?: PlayableVideo['processingStatus'];
   progress?: number;
+  playbackDegraded?: boolean;
 }) {
-  if (status === 'failed') {
-    return (
-      <div
-        role='status'
-        style={{
-          position: 'absolute',
-          top: 8,
-          right: 8,
-          padding: '3px 8px',
-          borderRadius: 999,
-          // A corner badge scrim ON TOP of video content — dark-on-video regardless of app
-          // theme (same convention as plugin-video-gallery's modal backdrop).
-          // guardrails-ignore no-hardcoded-colors: see comment above.
-          background: 'rgba(0, 0, 0, 0.65)',
-          color: 'rgba(255, 255, 255, 0.9)',
-          fontSize: 12,
-          fontWeight: 600,
-          lineHeight: 1.4,
-          pointerEvents: 'none',
-        }}
-      >
-        Optimization failed — playing original
-      </div>
-    );
-  }
+  // The corner is one stack, so it is rendered from one place — see `VideoStatusBadges`.
+  const badges = (
+    <VideoStatusBadges processingFailed={status === 'failed'} playbackDegraded={playbackDegraded} />
+  );
+  // The bar is for work in FLIGHT. A failed, ready or absent status has nothing building, so
+  // the corner is the whole of what this component draws.
+  if (status !== 'pending' && status !== 'processing') return badges;
 
   const clamped = Math.max(0, Math.min(100, progress ?? 0));
   const indeterminate = clamped === 0;
 
   return (
-    <div
-      role='progressbar'
-      aria-label='Optimizing video'
-      aria-valuemin={0}
-      aria-valuemax={100}
-      aria-valuenow={indeterminate ? undefined : Math.round(clamped)}
-      style={{
-        position: 'absolute',
-        left: 0,
-        right: 0,
-        bottom: 0,
-        height: 4,
-        // The progress bar's TRACK sits directly on the video surface, not app chrome — a
-        // translucent white track reads on any video frame regardless of app theme (the fill
-        // is already theme-token'd: `var(--vds-accent, var(--accent))`).
-        // guardrails-ignore no-hardcoded-colors: see comment above.
-        background: 'rgba(255, 255, 255, 0.25)',
-        overflow: 'hidden',
-        pointerEvents: 'none',
-      }}
-    >
-      <style>
-        {
-          '@keyframes cb-video-processing-indeterminate{0%{transform:translateX(-100%)}100%{transform:translateX(400%)}}'
-        }
-      </style>
+    <>
+      {/* A video can be BOTH still optimizing and served off an unreachable ladder, so the
+          bar and the corner are siblings rather than two branches of one `if`. */}
+      {badges}
       <div
+        role='progressbar'
+        aria-label='Optimizing video'
+        aria-valuemin={0}
+        aria-valuemax={100}
+        aria-valuenow={indeterminate ? undefined : Math.round(clamped)}
         style={{
-          width: indeterminate ? '25%' : `${clamped}%`,
-          height: '100%',
-          background: 'var(--vds-accent, var(--accent))',
-          transition: indeterminate ? undefined : 'width 300ms',
-          animation: indeterminate
-            ? 'cb-video-processing-indeterminate 1.4s ease-in-out infinite'
-            : undefined,
+          position: 'absolute',
+          left: 0,
+          right: 0,
+          bottom: 0,
+          height: 4,
+          // The progress bar's TRACK sits directly on the video surface, not app chrome — a
+          // translucent white track reads on any video frame regardless of app theme (the fill
+          // is already theme-token'd: `var(--vds-accent, var(--accent))`).
+          // guardrails-ignore no-hardcoded-colors: see comment above.
+          background: 'rgba(255, 255, 255, 0.25)',
+          overflow: 'hidden',
+          pointerEvents: 'none',
         }}
-      />
-    </div>
+      >
+        <style>
+          {
+            '@keyframes cb-video-processing-indeterminate{0%{transform:translateX(-100%)}100%{transform:translateX(400%)}}'
+          }
+        </style>
+        <div
+          style={{
+            width: indeterminate ? '25%' : `${clamped}%`,
+            height: '100%',
+            background: 'var(--vds-accent, var(--accent))',
+            transition: indeterminate ? undefined : 'width 300ms',
+            animation: indeterminate
+              ? 'cb-video-processing-indeterminate 1.4s ease-in-out infinite'
+              : undefined,
+          }}
+        />
+      </div>
+    </>
   );
 }

package/src/react/media/hlsSource.answer.spec.ts

@@ -0,0 +1,255 @@
+import { afterEach, describe, expect, mock, test } from 'bun:test';
+import { attachHlsSource } from './hlsSource';
+
+/*
+ * *"make a 404 stop the media player spinner so I don't think it's going to eventually load"*
+ * — owner, 2026-09-17.
+ *
+ * `hlsSource.recovery.spec.ts` beside this one pins the other half: a fatal error that is a
+ * BLIP gets four recoveries and a widening backoff, because something might still arrive.
+ * This file pins the opposite case, which that machinery was getting exactly wrong — an error
+ * that is an ANSWER. The ladder in the report replied `404` in 0.2 s, and the answer went
+ * through `startLoad()` four times and twelve seconds of backoff before reaching the fallback
+ * it could have taken immediately.
+ *
+ * 🔴 The two must not be conflated, which is why both files exist: the fix here has to leave
+ * the recoveries alone. `response.code` is the discriminator — hls.js sets it only when the
+ * server actually replied.
+ */
+
+/** A `<video>` that reports native HLS or not, so both branches can be driven. */
+function videoEl(canPlayHls = false): HTMLVideoElement {
+  const el = document.createElement('video');
+  el.canPlayType = ((type: string) =>
+    canPlayHls && type === 'application/vnd.apple.mpegurl'
+      ? 'maybe'
+      : '') as HTMLVideoElement['canPlayType'];
+  return el;
+}
+
+const LADDER = 'https://example.test/clip.hls/master.m3u8';
+const REMUX = 'https://example.test/clip.web.mp4';
+
+const calls: string[] = [];
+let emit: ((data: Record<string, unknown>) => void) | null = null;
+
+/** The same fake engine `hlsSource.recovery.spec.ts` drives — happy-dom has no MediaSource. */
+function installFakeHls(): void {
+  class Hls {
+    static Events = { ERROR: 'hlsError' } as const;
+    static ErrorTypes = {
+      NETWORK_ERROR: 'networkError',
+      MEDIA_ERROR: 'mediaError',
+      MUX_ERROR: 'muxError',
+    } as const;
+    static isSupported = (): boolean => true;
+    on(_event: string, handler: (e: unknown, d: Record<string, unknown>) => void): void {
+      emit = (d) => handler('hlsError', d);
+    }
+    loadSource(url: string): void {
+      calls.push(`loadSource:${url}`);
+    }
+    attachMedia(): void {
+      calls.push('attachMedia');
+    }
+    startLoad(): void {
+      calls.push('startLoad');
+    }
+    recoverMediaError(): void {
+      calls.push('recoverMediaError');
+    }
+    destroy(): void {
+      calls.push('destroy');
+    }
+  }
+  mock.module('hls.js', () => ({ default: Hls }));
+}
+
+/** Let the dynamic import resolve and its `.then` run. */
+const settle = async (): Promise<void> => {
+  for (let i = 0; i < 4; i++) await new Promise((r) => setTimeout(r, 0));
+};
+
+const realFetch = globalThis.fetch;
+afterEach(() => {
+  globalThis.fetch = realFetch;
+  calls.length = 0;
+  emit = null;
+});
+
+describe('attachHlsSource — an answered status is not waited out', () => {
+  test('🔴 a 404 master takes the progressive copy AT ONCE, with no retry at all', async () => {
+    installFakeHls();
+    const el = videoEl(false);
+    const detach = attachHlsSource(el, { hlsUrl: LADDER, streamUrl: REMUX });
+    await settle();
+
+    emit?.({
+      fatal: true,
+      type: 'networkError',
+      details: 'manifestLoadError',
+      response: { code: 404 },
+    });
+
+    expect(el.src).toBe(REMUX);
+    // 🔴 Not one retry. Twelve seconds of backoff in front of a reply that came in 0.2 s is
+    // the spinner the owner reported, and asking a 404 again cannot change what it says.
+    expect(calls).not.toContain('startLoad');
+    detach();
+  });
+
+  test('🔴 a 403 on the ladder is an answer too — a stale token is not something to retry', async () => {
+    installFakeHls();
+    const el = videoEl(false);
+    const detach = attachHlsSource(el, { hlsUrl: LADDER, streamUrl: REMUX });
+    await settle();
+
+    emit?.({ fatal: true, type: 'networkError', response: { code: 403 } });
+
+    expect(el.src).toBe(REMUX);
+    expect(calls).not.toContain('startLoad');
+    detach();
+  });
+
+  /*
+   * 🔴 The guard on the whole fix. A fatal error with NO `response.code` is a timeout, an
+   * abort or a stall — the tunnel blinking, this Mac waking — and those are what the recovery
+   * budget was built for. If this test ever goes green the other way, the fix has turned a
+   * slow origin into a dead one.
+   */
+  test('🔴 a fatal error with NO status still spends the recovery budget', async () => {
+    installFakeHls();
+    const el = videoEl(false);
+    const detach = attachHlsSource(el, { hlsUrl: LADDER, streamUrl: REMUX });
+    await settle();
+
+    emit?.({ fatal: true, type: 'networkError', details: 'fragLoadTimeOut' });
+    await new Promise((r) => setTimeout(r, 20));
+
+    expect(calls).toContain('startLoad');
+    expect(el.src).not.toBe(REMUX);
+    detach();
+  });
+});
+
+describe('attachHlsSource — the element gives up', () => {
+  /*
+   * 🔴 Before this, the native branch had NO fallback: Safari and every iPhone got
+   * `el.src = hlsUrl` and nothing else, so a 404 master on the phone was simply a dead
+   * player. The element's own `error` event is the only signal there is on that path.
+   */
+  test('🔴 a ladder the browser plays natively falls back to the remux when it fails', () => {
+    const el = videoEl(true);
+    const detach = attachHlsSource(el, { hlsUrl: LADDER, streamUrl: REMUX });
+    expect(el.src).toBe(LADDER);
+
+    el.dispatchEvent(new Event('error'));
+
+    expect(el.src).toBe(REMUX);
+    detach();
+  });
+
+  test('🔴 the progressive copy failing is REPORTED, because there is nothing left to try', async () => {
+    let asked = '';
+    globalThis.fetch = ((url: string) => {
+      asked = url;
+      return Promise.resolve(new Response(null, { status: 404 }));
+    }) as typeof fetch;
+
+    const faults: { kind: string; status?: number; source: string }[] = [];
+    const el = videoEl(false);
+    const detach = attachHlsSource(
+      el,
+      { streamUrl: REMUX },
+      { onFault: (fault, source) => faults.push({ ...fault, source }) },
+    );
+    expect(el.src).toBe(REMUX);
+
+    el.dispatchEvent(new Event('error'));
+    await settle();
+
+    expect(asked).toBe(REMUX);
+    expect(faults).toEqual([{ kind: 'gone', status: 404, source: 'stream' }]);
+    detach();
+  });
+
+  /*
+   * 🔴 A missing LADDER is the ordinary state of most of a library and the remux plays, so it
+   * must never reach `onFault`. A viewer told "no longer on the media store" about a film that
+   * is about to start is worse off than one told nothing at all.
+   */
+  test('🔴 a ladder that fails alone reports NOTHING — the remux is still to come', () => {
+    const faults: unknown[] = [];
+    const el = videoEl(true);
+    const detach = attachHlsSource(
+      el,
+      { hlsUrl: LADDER, streamUrl: REMUX },
+      { onFault: (fault) => faults.push(fault) },
+    );
+
+    el.dispatchEvent(new Event('error'));
+
+    expect(el.src).toBe(REMUX);
+    expect(faults).toEqual([]);
+    detach();
+  });
+
+  /*
+   * 🔴 The probe is bought for an ANSWER somebody will read. `CanvasVideoPlayer` and every
+   * other surface that takes the default has nowhere to put one, and a request nobody reads is
+   * a request paid for nothing — on the exact path where things are already going badly.
+   */
+  /*
+   * 🔴 hls.js owns the element while it is attached: it listens to this same event, turns it
+   * into a fatal `MEDIA_ERROR` and waits for `recoverMediaError()`. Acting on it here as well
+   * would abandon the ladder on the first buffer stall — undoing `100206d` and putting a
+   * 467 MB uncacheable stream in front of a recovery that costs nothing.
+   */
+  test('🔴 an element error while hls.js is driving is ITS error, not a fallback', async () => {
+    installFakeHls();
+    const el = videoEl(false);
+    const detach = attachHlsSource(el, { hlsUrl: LADDER, streamUrl: REMUX });
+    await settle();
+    expect(calls).toContain('attachMedia');
+
+    el.dispatchEvent(new Event('error'));
+
+    expect(el.src).not.toBe(REMUX);
+    expect(calls).not.toContain('destroy');
+    detach();
+  });
+
+  test('🔴 a surface with no `onFault` makes no probe at all', async () => {
+    let probes = 0;
+    globalThis.fetch = (() => {
+      probes += 1;
+      return Promise.resolve(new Response(null, { status: 404 }));
+    }) as unknown as typeof fetch;
+    const el = videoEl(false);
+    const detach = attachHlsSource(el, { streamUrl: REMUX });
+
+    el.dispatchEvent(new Event('error'));
+    await settle();
+
+    expect(probes).toBe(0);
+    detach();
+  });
+
+  test('a detached source reports nothing — the listener comes off with the engine', async () => {
+    globalThis.fetch = (() =>
+      Promise.resolve(new Response(null, { status: 404 }))) as unknown as typeof fetch;
+    const faults: unknown[] = [];
+    const el = videoEl(false);
+    const detach = attachHlsSource(
+      el,
+      { streamUrl: REMUX },
+      { onFault: (fault) => faults.push(fault) },
+    );
+    detach();
+
+    el.dispatchEvent(new Event('error'));
+    await settle();
+
+    expect(faults).toEqual([]);
+  });
+});