From cc887eeb8c5a7fda77ea6b979b593f84878e539a Mon Sep 17 00:00:00 2001 From: Wesley Luyten Date: Tue, 1 Oct 2024 09:29:08 -0500 Subject: [PATCH] feat: TS, function comps, media-elements --- README.md | 177 +- biome.json | 9 + examples/react/public/index.html | 2 +- examples/react/src/App.js | 438 ---- examples/react/src/App.tsx | 513 ++++ examples/react/src/Duration.js | 24 - examples/react/src/Duration.tsx | 24 + examples/react/src/index.js | 7 - examples/react/src/index.tsx | 7 + package-lock.json | 3618 ++++++--------------------- package.json | 76 +- scripts/builder/builder.js | 1 + scripts/pre-publish.js | 19 - scripts/tester/tester.js | 67 +- src/HtmlPlayer.tsx | 15 + src/Player.js | 267 -- src/Player.tsx | 109 + src/Preview.js | 112 - src/Preview.tsx | 124 + src/ReactPlayer.js | 183 -- src/ReactPlayer.tsx | 139 + src/index.js | 7 - src/index.ts | 9 + src/patterns.js | 67 - src/patterns.ts | 39 + src/players.ts | 76 + src/players/DailyMotion.js | 124 - src/players/Facebook.js | 124 - src/players/FilePlayer.js | 378 --- src/players/Kaltura.js | 120 - src/players/Mixcloud.js | 110 - src/players/Mux.js | 211 -- src/players/SoundCloud.js | 122 - src/players/Streamable.js | 115 - src/players/Twitch.js | 112 - src/players/Vidyard.js | 117 - src/players/Vimeo.js | 156 -- src/players/Wistia.js | 133 - src/players/YouTube.js | 203 -- src/players/index.js | 86 - src/props.js | 224 -- src/props.ts | 26 + src/standalone.js | 7 - src/types.ts | 48 + src/utils.js | 183 -- test/Player.js | 355 --- test/Player.tsx | 329 +++ test/ReactPlayer/instanceMethods.js | 112 +- test/ReactPlayer/props.js | 42 +- test/ReactPlayer/render.js | 40 +- test/ReactPlayer/staticMethods.js | 60 +- test/helpers/server-safe-globals.js | 73 +- test/players/DailyMotion.js | 101 - test/players/Facebook.js | 91 - test/players/FilePlayer.js | 440 ---- test/players/Kaltura.js | 84 - test/players/Mixcloud.js | 77 - test/players/SoundCloud.js | 92 - test/players/Streamable.js | 85 - test/players/Twitch.js | 69 - test/players/Vimeo.js | 67 - test/players/Wistia.js | 70 - test/players/YouTube.js | 125 - test/utils/callPlayer.js | 40 - test/utils/getSDK.js | 119 - test/utils/omit.js | 24 - test/utils/parseEndTime.js | 31 - test/utils/parseStartTime.js | 36 - test/utils/queryString.js | 11 - test/utils/randomString.js | 16 - tsconfig.json | 24 +- tsconfig.tsbuildinfo | 1 + types/base.d.ts | 78 - types/dailymotion.d.ts | 11 - types/facebook.d.ts | 14 - types/file.d.ts | 31 - types/index.d.ts | 31 - types/kaltura.d.ts | 5 - types/lazy/index.d.ts | 2 - types/mixcloud.d.ts | 11 - types/soundcloud.d.ts | 11 - types/streamable.d.ts | 5 - types/twitch.d.ts | 12 - types/vidyard.d.ts | 11 - types/vimeo.d.ts | 12 - types/wistia.d.ts | 13 - types/youtube.d.ts | 13 - 87 files changed, 2588 insertions(+), 9014 deletions(-) create mode 100644 biome.json delete mode 100644 examples/react/src/App.js create mode 100644 examples/react/src/App.tsx delete mode 100644 examples/react/src/Duration.js create mode 100644 examples/react/src/Duration.tsx delete mode 100644 examples/react/src/index.js create mode 100644 examples/react/src/index.tsx delete mode 100644 scripts/pre-publish.js create mode 100644 src/HtmlPlayer.tsx delete mode 100644 src/Player.js create mode 100644 src/Player.tsx delete mode 100644 src/Preview.js create mode 100644 src/Preview.tsx delete mode 100644 src/ReactPlayer.js create mode 100644 src/ReactPlayer.tsx delete mode 100644 src/index.js create mode 100644 src/index.ts delete mode 100644 src/patterns.js create mode 100644 src/patterns.ts create mode 100644 src/players.ts delete mode 100644 src/players/DailyMotion.js delete mode 100644 src/players/Facebook.js delete mode 100644 src/players/FilePlayer.js delete mode 100644 src/players/Kaltura.js delete mode 100644 src/players/Mixcloud.js delete mode 100644 src/players/Mux.js delete mode 100644 src/players/SoundCloud.js delete mode 100644 src/players/Streamable.js delete mode 100644 src/players/Twitch.js delete mode 100644 src/players/Vidyard.js delete mode 100644 src/players/Vimeo.js delete mode 100644 src/players/Wistia.js delete mode 100644 src/players/YouTube.js delete mode 100644 src/players/index.js delete mode 100644 src/props.js create mode 100644 src/props.ts delete mode 100644 src/standalone.js create mode 100644 src/types.ts delete mode 100644 src/utils.js delete mode 100644 test/Player.js create mode 100644 test/Player.tsx delete mode 100644 test/players/DailyMotion.js delete mode 100644 test/players/Facebook.js delete mode 100644 test/players/FilePlayer.js delete mode 100644 test/players/Kaltura.js delete mode 100644 test/players/Mixcloud.js delete mode 100644 test/players/SoundCloud.js delete mode 100644 test/players/Streamable.js delete mode 100644 test/players/Twitch.js delete mode 100644 test/players/Vimeo.js delete mode 100644 test/players/Wistia.js delete mode 100644 test/players/YouTube.js delete mode 100644 test/utils/callPlayer.js delete mode 100644 test/utils/getSDK.js delete mode 100644 test/utils/omit.js delete mode 100644 test/utils/parseEndTime.js delete mode 100644 test/utils/parseStartTime.js delete mode 100644 test/utils/queryString.js delete mode 100644 test/utils/randomString.js create mode 100644 tsconfig.tsbuildinfo delete mode 100644 types/base.d.ts delete mode 100644 types/dailymotion.d.ts delete mode 100644 types/facebook.d.ts delete mode 100644 types/file.d.ts delete mode 100644 types/index.d.ts delete mode 100644 types/kaltura.d.ts delete mode 100644 types/lazy/index.d.ts delete mode 100644 types/mixcloud.d.ts delete mode 100644 types/soundcloud.d.ts delete mode 100644 types/streamable.d.ts delete mode 100644 types/twitch.d.ts delete mode 100644 types/vidyard.d.ts delete mode 100644 types/vimeo.d.ts delete mode 100644 types/wistia.d.ts delete mode 100644 types/youtube.d.ts diff --git a/README.md b/README.md index aee04455..4f8cc222 100644 --- a/README.md +++ b/README.md @@ -36,25 +36,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) @@ -81,15 +63,12 @@ Prop | Description | Default `width` | Set the width of the player | `640px` `height` | Set the height of the player | `360px` `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` `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,55 +76,21 @@ 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 }` +`onProgress` | Called when media data is loaded +`onTimeUpdate` | Called when the media's current time changes `onDuration` | 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)) +`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 - -#### Config prop - -There is a single `config` prop to override settings for each type of player: - -```jsx - -``` - -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 `