feat!: v3 refactor

.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 [email protected] 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

.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:

.gitignore

@@ -10,3 +10,4 @@ yarn-error.log
 .idea/
 .vscode/
 /disttest/
+/dist/

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__.

biome.json

@@ -0,0 +1,9 @@
+{
+  "files": {
+    "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"],
+    "ignore": ["dist/**"]
+  },
+  "formatter": {
+    "indentStyle": "space"
+  }
+}

examples/react/public/App.css

@@ -20,14 +20,13 @@
 
 .player-wrapper {
   width: 480px;
-  height: 270px;
-}
-
-.react-player {
-  margin-bottom: 10px;
+  aspect-ratio: 16 / 9;
   background: rgba(0, 0, 0, .1);
+  margin-bottom: 10px;
 }
 
+.react-player {}
+
 .faded {
   color: rgba(0, 0, 0, .5);
 }

examples/react/public/index.html

@@ -8,7 +8,7 @@
     <link rel='stylesheet' href='./defaults.css'>
     <link rel='stylesheet' href='./range.css'>
     <link rel='stylesheet' href='./App.css'>
-    <script defer src='./index.js'></script>
+    <script type='module' src='./index.js'></script>
   </head>
   <body>
     <div id='app'></div>