From 4ab26b92286bc21638b0845d612a02b7801b59eb Mon Sep 17 00:00:00 2001 From: Wesley Luyten Date: Thu, 1 Oct 2026 16:50:29 -0700 Subject: [PATCH 01/16] feat!: use Video.js v10 media components Replace the *-video-element and @mux/mux-player-react dependencies with the @videojs/react media components (@videojs/react/media/*). Each player is wrapped by createMediaPlayer, which maps src and the player's config onto the v10 source prop and passes ReactPlayer's ref as mediaRef, so ref.current is the playable media for every player (the embed iframe is ref.current.target). Breaking changes: - React 17 is no longer supported; the react peer range is now ^18 || ^19. - config keys are now the v10 engine options (config.hls -> hls.js config, config.dash -> dash.js settings, config.mux -> MuxSource options, etc.). - The ref for embed players (YouTube, Vimeo, Wistia, Spotify, Twitch, TikTok) is the playback adapter rather than a custom element. The media API is unchanged; use ref.current.target for the DOM node. BREAKING CHANGE: requires React 18+, config keys are now the Video.js v10 engine options, and the ref for embed players is the playback adapter (DOM node at ref.current.target). --- README.md | 21 +- package-lock.json | 1586 ++++++++++++++++++++++++++++--------- package.json | 28 +- src/MediaPlayer.tsx | 38 + src/players.ts | 101 ++- src/sources.ts | 48 ++ src/types.ts | 38 +- test/MediaPlayer.test.tsx | 117 +++ test/sources.test.tsx | 55 ++ 9 files changed, 1612 insertions(+), 420 deletions(-) create mode 100644 src/MediaPlayer.tsx create mode 100644 src/sources.ts create mode 100644 test/MediaPlayer.test.tsx create mode 100644 test/sources.test.tsx diff --git a/README.md b/README.md index 2731f1ee..900498ca 100644 --- a/README.md +++ b/README.md @@ -115,13 +115,19 @@ There is a single `config` prop to override settings for each type of player: /> ``` -Settings for each player live under different keys: +Settings for each player live under different keys and are passed to the engine that plays the media ([Video.js v10](https://github.com/videojs/v10) `source.engine.*` options): Key | Options --- | ------- `youtube` | https://developers.google.com/youtube/player_parameters#Parameters `vimeo` | https://developer.vimeo.com/player/sdk/embed `hls` | https://github.com/video-dev/hls.js/blob/master/docs/API.md#fine-tuning +`dash` | https://cdn.dashjs.org/latest/jsdoc/module-Settings.html +`mux` | `MuxSource` options (`playback`, `poster`, `storyboard`, `drm`, `engine`) from [`@videojs/mux-video`](https://www.npmjs.com/package/@videojs/mux-video) +`wistia` | https://docs.wistia.com/docs/javascript-player-api#embed-options +`spotify` | Spotify embed options (`t`, `theme`, `preferVideo`) +`twitch` | https://dev.twitch.tv/docs/embed/video-and-clips/#interactive-frames-for-live-streams-and-vods +`tiktok` | https://developers.tiktok.com/doc/embed-player#player_parameters ### Methods @@ -291,12 +297,13 @@ ReactPlayer `v2` changes single player imports and adds lazy loading players. Su ### Supported media * [Supported file types](https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats) are playing using [`