Replace Shaka Player with hls.js on web #10

colonelpanic · 2026-08-04T08:29:38Z

colonelpanic commented

2026-08-04 08:29:38 +00:00

Every source railbird-mobile plays is HLS, and the only thing Shaka Player was providing is HLS playback in browsers without native support. hls.js does that in a fraction of the code.

This removes Shaka along with the scaffolding that grew around its async attach/load lifecycle while it was being debugged:

an ActionQueue that serialized every play/pause/seek/volume call behind a 2s timeout
a shallowEqual source comparison plus currentSource state
a large amount of debug logging (makeNewShaka, What is going on, etc.)

The video element is now driven directly: set src when the browser plays HLS natively (Safari/WebKit) or the source isn't HLS at all, and attach hls.js otherwise. Only fatal hls.js errors are forwarded to onError; the rest are routine recoverable warnings.

Dropping the queue restores the original direct play/pause/seek/setVolume implementations. resume() now swallows play() rejections, which the queue used to absorb — those are routine when play() lands before the manifest is parsed, or when autoplay is denied.

The source effect keys on the URI string rather than the source object. Consumers pass source={{uri}} as a fresh object literal on every render, which is what shallowEqual was defending against.

Carried forward from the Shaka implementation: the onSeekComplete event and objectFit: 'fill'. poster is now resolved to a URL string instead of suppressing the type error with @ts-ignore.

Dropped: web-side cropStart/cropEnd, which was implemented with Shaka's playRangeStart/playRangeEnd. No consumer passes those props, and neither upstream's web player nor this file before Shaka supported them.

Net: -245/+92 lines, and the package's only runtime dependency goes from shaka-player (plus its Yarn patch and 4 transitive deps) to hls.js.

Verification

tsc --noEmit and eslint are clean on src/Video.web.tsx. The two pre-existing src/Video.tsx errors are present on railbird-v6 unchanged and are untouched here.

Every source railbird-mobile plays is HLS, and the only thing Shaka Player was providing is HLS playback in browsers without native support. `hls.js` does that in a fraction of the code. This removes Shaka along with the scaffolding that grew around its async attach/load lifecycle while it was being debugged: - an `ActionQueue` that serialized every play/pause/seek/volume call behind a 2s timeout - a `shallowEqual` source comparison plus `currentSource` state - a large amount of debug logging (`makeNewShaka`, `What is going on`, etc.) The video element is now driven directly: set `src` when the browser plays HLS natively (Safari/WebKit) or the source isn't HLS at all, and attach `hls.js` otherwise. Only fatal hls.js errors are forwarded to `onError`; the rest are routine recoverable warnings. Dropping the queue restores the original direct `play`/`pause`/`seek`/`setVolume` implementations. `resume()` now swallows `play()` rejections, which the queue used to absorb — those are routine when `play()` lands before the manifest is parsed, or when autoplay is denied. The source effect keys on the URI string rather than the source object. Consumers pass `source={{uri}}` as a fresh object literal on every render, which is what `shallowEqual` was defending against. **Carried forward from the Shaka implementation:** the `onSeekComplete` event and `objectFit: 'fill'`. `poster` is now resolved to a URL string instead of suppressing the type error with `@ts-ignore`. **Dropped:** web-side `cropStart`/`cropEnd`, which was implemented with Shaka's `playRangeStart`/`playRangeEnd`. No consumer passes those props, and neither upstream's web player nor this file before Shaka supported them. Net: -245/+92 lines, and the package's only runtime dependency goes from `shaka-player` (plus its Yarn patch and 4 transitive deps) to `hls.js`. ## Verification `tsc --noEmit` and `eslint` are clean on `src/Video.web.tsx`. The two pre-existing `src/Video.tsx` errors are present on `railbird-v6` unchanged and are untouched here.

colonelpanic added 1 commit 2026-08-04 08:29:38 +00:00

Replace Shaka Player with hls.js on web

Check JS / Check TS (tsc) (pull_request) Has been cancelled

Details

Check JS / Lint JS (eslint, prettier) (pull_request) Has been cancelled

Details

b01e55488e

The web player carried a Shaka Player integration plus the scaffolding
built up around it while debugging: an ActionQueue that serialized every
play/pause/seek/volume call behind a 2s timeout, a shallowEqual source
comparison, and a large amount of debug logging. All of it existed to
work around Shaka's async attach/load lifecycle.

Every source this fork's consumer plays is HLS, and the only thing Shaka
was providing is HLS playback in browsers without native support. hls.js
does that in a fraction of the code, so drive the video element directly:
set `src` when the browser plays HLS natively (Safari/WebKit) or the
source isn't HLS at all, and attach hls.js otherwise.

Dropping the queue restores the original direct play/pause/seek/volume
implementations. `resume()` now swallows play() rejections, which the
queue used to absorb -- these are routine when play() lands before the
manifest is parsed or when autoplay is denied.

The source effect keys on the URI string rather than the source object.
Consumers pass `source={{uri}}` as a fresh object literal every render,
which is what shallowEqual was defending against.

Carried forward from the Shaka implementation: the onSeekComplete event
and objectFit: 'fill'. Also resolves `poster` to a URL string instead of
suppressing the type error with @ts-ignore.

Dropped: web-side cropStart/cropEnd handling, which was implemented with
Shaka's playRangeStart/playRangeEnd. No consumer passes those props, and
neither upstream's web player nor this file before Shaka supported them.

colonelpanic referenced this issue from a commit

2026-08-04 08:30:11 +00:00

Replace Shaka Player with hls.js on web

Check JS / Check TS (tsc) (pull_request) Has been cancelled

Details

Check JS / Lint JS (eslint, prettier) (pull_request) Has been cancelled

Details

This pull request can be merged automatically.

You are not authorized to merge this pull request.

View command line instructions

Checkout

From your project repository, check out a new branch and test the changes.

git fetch -u origin ivan/replace-shaka-with-hlsjs:ivan/replace-shaka-with-hlsjs

git checkout ivan/replace-shaka-with-hlsjs

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: railbird/react-native-video#10