diff --git a/.github/workflows/cd.yml b/.github/workflows/cd.yml index 94f23ef6..f77cc4e3 100644 --- a/.github/workflows/cd.yml +++ b/.github/workflows/cd.yml @@ -56,10 +56,8 @@ jobs: - run: npm ci - run: npm run lint - run: npm run test:coverage - - run: npm run build:lib + - run: npm run build - run: npm run build:demo - - run: npm run build:dist - - run: npm run build:standalone - run: npx --yes wet-run@1.0.1 release ${{ inputs.version }} ${{ inputs.dryrun && '--dry-run' || '' }} ${{ inputs.prerelease && format('--prerelease {0}', inputs.prerelease) || '' }} --provenance --github-release --verbose - name: Get NPM version id: npm-version diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 77eb9199..052df39f 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -58,10 +58,8 @@ jobs: node-version: ${{ matrix.node-version }} cache: npm - run: npm ci - - run: npm run build:lib + - run: npm run build - run: npm run build:demo - - run: npm run build:dist - - run: npm run build:standalone deploy-preview: # Grant GITHUB_TOKEN the permissions required to make a Pages deployment @@ -82,7 +80,7 @@ jobs: with: node-version: 20 - run: npm ci - - run: npm run build:lib + - run: npm run build - run: npm run build:demo - uses: actions/upload-pages-artifact@v3 with: diff --git a/.gitignore b/.gitignore index 9c251bfa..f987a30b 100644 --- a/.gitignore +++ b/.gitignore @@ -10,3 +10,4 @@ yarn-error.log .idea/ .vscode/ /disttest/ +/dist/ diff --git a/.npmignore b/.npmignore deleted file mode 100644 index 95c8dd78..00000000 --- a/.npmignore +++ /dev/null @@ -1,12 +0,0 @@ -.github -babel.config.js -codecov.yml -coverage -src -test -webpack/* -yarn-error.log -/demo/ -/examples/ -/disttest/ -/scripts/ diff --git a/MIGRATING.md b/MIGRATING.md index c27f6aad..3b3cefbf 100644 --- a/MIGRATING.md +++ b/MIGRATING.md @@ -1,3 +1,57 @@ +## Migrating to `v3.0` + +Breaking changes are in πŸ”₯ __bold and on fire__. + +### Some player providers are not supported yet + +Since `v3.0` is a new architecture not all providers have been updated. +It is recommended to keep using `v2` and vote to add this provider to `v3` in [discussions](https://github.com/cookpete/react-player/discussions). +These include: + + - `Dailymotion` + - `SoundCloud` + - `Streamable` + - `Twitch` + - `Facebook` + - `Mixcloud` + - `Kaltura` + +### Lazy players + +As of `v3.0` all the players are lazy loaded by default. +Due to the use of `lazy` and `Suspense`, πŸ”₯ __React 16.6 or later is now required__. + +### Player props + +As of `v3.0` some player props are renamed to be closer to the native +[HTMLMediaElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement) naming. + +- πŸ”₯ __`url` => `src`__ +- πŸ”₯ __`playsinline` => `playsInline`__ +- πŸ”₯ __`progressInterval` deprecated +- πŸ”₯ __`stopOnUnmount` => deprecated +- πŸ”₯ __`wrapper` is `undefined` by default. Set to `div` if you want a wrapper element. + +### Player instance methods + +As of `v3.0` use [`ref`](https://react.dev/learn/manipulating-the-dom-with-refs) to call instance methods on the player. See [the demo app](examples/react/src/App.js) for an example of this. Since `v3`, the instance methods aim to be πŸ”₯ __compatible +with the [HTMLMediaElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement) interface__. + +### Player callback props + +As of `v3.0` some player callback props are renamed to be closer to the native +[HTMLMediaElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement) event naming. + +- πŸ”₯ __`onProgress` => `onTimeUpdate` and `onProgress`__ +- πŸ”₯ __`onDuration` => `onDurationChange`__ +- πŸ”₯ __`onPlaybackRateChange` => `onRateChange`__ +- πŸ”₯ __`onSeek` => `onSeeking` and `onSeeked`__ +- πŸ”₯ __`onBuffer` => `onWaiting`__ +- πŸ”₯ __`onBufferEnd` => `onPlaying`__ +- πŸ”₯ __`onEnablePIP` => `onEnterPictureInPicture`__ +- πŸ”₯ __`onDisablePIP` => `onLeavePictureInPicture`__ + + ## Migrating to `v2.0` Breaking changes are in πŸ”₯ __bold and on fire__. diff --git a/README.md b/README.md index aee04455..5d2a865f 100644 --- a/README.md +++ b/README.md @@ -9,11 +9,14 @@

- A React component for playing a variety of URLs, including file paths, YouTube, Facebook, Twitch, SoundCloud, Streamable, Vimeo, Wistia, Mixcloud, DailyMotion and Kaltura. Not using React? No problem. + A React component for playing a variety of URLs, including file paths, HLS, DASH, YouTube, Vimeo, Wistia and Mux.

--- +> Version 3 of ReactPlayer is a major update with a new architecture and many new features. It is not backwards compatible with v2, so please see the [migration guide](MIGRATING.md) for details. + + > Using Next.js and need to handle video upload/processing? Check out [next-video](https://github.com/muxinc/next-video). ### ✨ The future of ReactPlayer @@ -36,25 +39,7 @@ import ReactPlayer from 'react-player' ``` -By default, ReactPlayer supports [many different types](#supported-media) of `url`. If you only ever use one type, use imports such as `react-player/youtube` to reduce your bundle size. See [config keys](#config-prop) for all player keys. - -```jsx -import React from 'react' -import ReactPlayer from 'react-player/youtube' - -// Only loads the YouTube player - -``` - -If your build system supports `import()` statements, use `react-player/lazy` to lazy load the appropriate player for the `url` you pass in. This adds several `reactPlayer` chunks to your output, but reduces your main bundle size. - -```jsx -import React from 'react' -import ReactPlayer from 'react-player/lazy' - -// Lazy load the YouTube player - -``` +If your build system supports `import()` statements and code splitting enable this to lazy load the appropriate player for the `url` you pass in. This adds several `reactPlayer` chunks to your output, but reduces your main bundle size. Demo page: [`https://cookpete.github.io/react-player`](https://cookpete.github.io/react-player) @@ -70,7 +55,7 @@ As of Chrome 66, [videos must be `muted` in order to play automatically](https:/ Prop | Description | Default ---- | ----------- | ------- -`url` | The url of a video or song to play
  β—¦  Can be an [array](#multiple-sources-and-tracks) or [`MediaStream`](https://developer.mozilla.org/en-US/docs/Web/API/MediaStream) object +`src` | The url of a video or song to play | `undefined` `playing` | Set to `true` or `false` to pause or play the media | `false` `loop` | Set to `true` or `false` to loop the media | `false` `controls` | Set to `true` or `false` to display native player controls.
  β—¦  For Vimeo videos, hiding controls must be enabled by the video owner. | `false` @@ -78,18 +63,15 @@ Prop | Description | Default `volume` | Set the volume of the player, between `0` and `1`
  β—¦  `null` uses default volume on all players [`#357`](https://github.com/cookpete/react-player/issues/357) | `null` `muted` | Mutes the player
  β—¦  Only works if `volume` is set | `false` `playbackRate` | Set the playback rate of the player
  β—¦  Only supported by YouTube, Wistia, and file paths | `1` -`width` | Set the width of the player | `640px` -`height` | Set the height of the player | `360px` +`width` | Set the width of the player | `320px` +`height` | Set the height of the player | `180px` `style` | Add [inline styles](https://facebook.github.io/react/tips/inline-styles.html) to the root element | `{}` -`progressInterval` | The time between `onProgress` callbacks, in milliseconds | `1000` -`playsinline` | Applies the `playsinline` attribute where supported | `false` +`playsInline` | Applies the `playsInline` attribute where supported | `false` `pip` | Set to `true` or `false` to enable or disable [picture-in-picture mode](https://developers.google.com/web/updates/2018/10/watch-video-using-picture-in-picture)
  β—¦  Only available when playing file URLs in [certain browsers](https://caniuse.com/#feat=picture-in-picture) | `false` -`stopOnUnmount` | If you are using `pip` you may want to use `stopOnUnmount={false}` to continue playing in picture-in-picture mode even after ReactPlayer unmounts | `true` `fallback` | Element or component to use as a fallback if you are using lazy loading | `null` -`wrapper` | Element or component to use as the container element | `div` +`wrapper` | Element or component to use as the container element | null `playIcon` | Element or component to use as the play icon in light mode `previewTabIndex` | Set the tab index to be used on light mode | 0 -`config` | Override options for the various players, see [config prop](#config-prop) #### Callback props @@ -97,22 +79,23 @@ Callback props take a function that gets fired on various player events: Prop | Description ---- | ----------- +`onClickPreview` | Called when user clicks the `light` mode preview `onReady` | Called when media is loaded and ready to play. If `playing` is set to `true`, media will play immediately `onStart` | Called when media starts playing -`onPlay` | Called when media starts or resumes playing after pausing or buffering -`onProgress` | Callback containing `played` and `loaded` progress as a fraction, and `playedSeconds` and `loadedSeconds` in seconds
  β—¦  eg `{ played: 0.12, playedSeconds: 11.3, loaded: 0.34, loadedSeconds: 16.7 }` -`onDuration` | Callback containing duration of the media, in seconds +`onPlay` | Called when the `playing` prop is set to true +`onPlaying` | Called when media actually starts playing +`onProgress` | Called when media data is loaded +`onTimeUpdate` | Called when the media's current time changes +`onDurationChange` | Callback containing duration of the media, in seconds `onPause` | Called when media is paused -`onBuffer` | Called when media starts buffering -`onBufferEnd` | Called when media has finished buffering
  β—¦  Works for files, YouTube and Facebook -`onSeek` | Called when media seeks with `seconds` parameter -`onPlaybackRateChange` | Called when playback rate of the player changed
  β—¦  Only supported by YouTube, Vimeo ([if enabled](https://developer.vimeo.com/player/sdk/reference#playbackratechange)), Wistia, and file paths -`onPlaybackQualityChange` | Called when playback quality of the player changed
  β—¦  Only supported by YouTube ([if enabled](https://developers.google.com/youtube/iframe_api_reference#Events)) +`onWaiting` | Called when media is buffering and waiting for more data +`onSeeking` | Called when media is seeking +`onSeeked` | Called when media has finished seeking +`onRateChange` | Called when playback rate of the player changed
  β—¦  Only supported by YouTube, Vimeo ([if enabled](https://developer.vimeo.com/player/sdk/reference#playbackratechange)), Wistia, and file paths `onEnded` | Called when media finishes playing
  β—¦  Does not fire when `loop` is set to `true` `onError` | Called when an error occurs whilst attempting to play media -`onClickPreview` | Called when user clicks the `light` mode preview -`onEnablePIP` | Called when picture-in-picture mode is enabled -`onDisablePIP` | Called when picture-in-picture mode is disabled +`onEnterPictureInPicture` | Called when entering picture-in-picture mode +`onLeavePictureInPicture` | Called when leaving picture-in-picture mode #### Config prop @@ -123,11 +106,8 @@ There is a single `config` prop to override settings for each type of player: url={url} config={{ youtube: { - playerVars: { showinfo: 1 } + color: 'white', }, - facebook: { - appId: '12345' - } }} /> ``` @@ -136,16 +116,9 @@ Settings for each player live under different keys: Key | Options --- | ------- -`youtube` | `playerVars`: Override the [default player vars](https://developers.google.com/youtube/player_parameters?playerVersion=HTML5)
`embedOptions`: Override the [default embed options](https://developers.google.com/youtube/iframe_api_reference#Loading_a_Video_Player)
`onUnstarted`: Called when state changes to `unstarted` (usually when video fails to autoplay) -`facebook` | `appId`: Your own [Facebook app ID](https://developers.facebook.com/docs/apps/register#app-id)
`version`: Facebook SDK version
`playerId`: Override player ID for consistent server-side rendering (use with [`react-uid`](https://github.com/thearnica/react-uid))
`attributes`: Extra data attributes to pass to the `fb-video` element -`soundcloud` | `options`: Override the [default player options](https://developers.soundcloud.com/docs/api/html5-widget#params) -`vimeo` | `playerOptions`: Override the [default params](https://developer.vimeo.com/player/sdk/embed)
`title`: Set the player `iframe` title attribute -`mux` | `attributes`: Apply [element attributes](https://github.com/muxinc/elements/blob/main/packages/mux-player/REFERENCE.md#attributes)
`version`: Mux player version -`wistia` | `options`: Override the [default player options](https://wistia.com/doc/embed-options#options_list)
`playerId`: Override player ID for consistent server-side rendering (use with [`react-uid`](https://github.com/thearnica/react-uid)) -`mixcloud` | `options`: Override the [default player options](https://www.mixcloud.com/developers/widget/#methods) -`dailymotion` | `params`: Override the [default player vars](https://developer.dailymotion.com/player#player-parameters) -`twitch` | `options`: Override the [default player options](https://dev.twitch.tv/docs/embed)
`playerId`: Override player ID for consistent server-side rendering (use with [`react-uid`](https://github.com/thearnica/react-uid)) -`file` | `attributes`: Apply [element attributes](https://developer.mozilla.org/en/docs/Web/HTML/Element/video#Attributes)
`forceVideo`: Always render a `