Skip to content

fix(vidstack): correct slider video preview error handling - #1864

Open
TDaglis wants to merge 1 commit into
vidstack:mainfrom
TDaglis:fix/slider-video-preview-errors
Open

TDaglis wants to merge 1 commit into
vidstack:mainfrom
TDaglis:fix/slider-video-preview-errors

Conversation

@TDaglis

@TDaglis TDaglis commented Oct 2, 2026

Copy link
Copy Markdown

Related:

Fixes #1863

Related: #1090

Description:

Fixes two bugs in SliderVideo (TimeSlider.Video in React, <media-slider-video> as a custom element):

  • Valid previews were always marked as errored and hidden. #hasError() checked isNull(error), which tests the signal function itself, and that is never null. As a result data-error was always set and hidden was true whenever the player could load, so the default theme (.vds-slider-video[data-hidden] { display: none }) never showed the preview. It now reads the value with isNull(error()), matching Thumbnail and Poster.
  • Preview errors recursed in React. React's TimeSlider.Video attaches the component to the same <video> it listens to for error. #onError() redispatched error on that element and re-entered itself until the stack overflowed, calling the onError prop at every level. It now returns early for its own event (event.target === this, since Maverick's dispatch() sets target to the component). Native errors, whose target is the <video>, are still handled.

Adds slider-video.test.ts, covering a valid preview, an error with the video as the host (React) and inside the host (custom element), recovery after a source change, and seeking the preview to the pointer position.

Ready?

Yes.

Anything Else?

Reproduction with @vidstack/react@1.15.6: https://stackblitz.com/github/TDaglis/examples/tree/slider-video-repro/player/react/slider-video-repro?file=src/player.tsx

Checked in a browser against the published @vidstack/react@1.15.6 and against this branch (React sandbox):

1.15.6 This PR
Valid preview data-error, data-hidden, display: none Visible, no error flags
Missing preview onError × 44, then RangeError: Maximum call stack size exceeded onError × 1, hidden

Vitest resolves Maverick's server build, where dispatch() is a no-op, so the test re-creates the browser dispatch (including the target override) on a jsdom element. It caps recursion so the pre-fix run fails without overflowing the runner.

pnpm format:check, pnpm typecheck, pnpm build and pnpm test pass locally (Node 22, pnpm 8.7.0).

Review Process:

  • Open the reproduction: on 1.15.6 the valid preview reports data-error: true and display: none, and the missing preview counts dozens of onError calls.
  • pnpm -F vidstack exec vitest --run src/components/ui/sliders/slider-video.test.ts passes; with slider-video.ts reverted, 3 of the 5 tests fail.
  • Optional: in the React sandbox, render TimeSlider.Video with the default theme and one valid and one missing src. The valid preview is visible on hover, and the missing one fires onError once.

@TDaglis
TDaglis marked this pull request as ready for review October 2, 2026 17:37

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

SliderVideo marks valid previews as errored/hidden and recursively redispatches errors in React

1 participant