Use hooks, support React 18, drop React < 16

.babelrc.js

@@ -1,16 +1,18 @@
-const TEST = process.env.BABEL_ENV === 'test';
-const CJS = process.env.BABEL_ENV === 'cjs';
+'use strict';
 
-module.exports = {
-  presets: [
-    ['@babel/env', {
-      modules: TEST || CJS ? 'commonjs' : false,
-      loose: true,
-      targets: TEST ? { node: 'current' } : {},
-    }],
-    '@babel/react',
-  ],
-  plugins: TEST ? [
-    'dynamic-import-node',
-  ] : [],
+module.exports = (api) => {
+  const isTest = api.caller((caller) => caller.name === '@babel/register');
+
+  return {
+    targets: isTest ? { node: 'current' } : {},
+    presets: [
+      ['@babel/env', {
+        modules: isTest ? 'commonjs' : false,
+      }],
+      '@babel/react',
+    ],
+    plugins: isTest ? [
+      'dynamic-import-node',
+    ] : [],
+  };
 };

.browserslistrc

@@ -0,0 +1,57 @@
+and_chr 122
+and_chr 121
+and_ff 123
+and_ff 122
+and_qq 14.9
+and_uc 15.5
+android 122
+android 121
+chrome 122
+chrome 121
+chrome 120
+chrome 119
+chrome 109
+edge 122
+edge 121
+firefox 123
+firefox 122
+firefox 115
+ios_saf 17.4
+ios_saf 17.3
+ios_saf 17.2
+ios_saf 17.1
+ios_saf 17.0
+ios_saf 16.6-16.7
+ios_saf 16.5
+ios_saf 16.4
+ios_saf 16.3
+ios_saf 16.2
+ios_saf 16.1
+ios_saf 16.0
+ios_saf 15.6-15.8
+ios_saf 15.5
+ios_saf 15.4
+kaios 3.0-3.1
+kaios 2.5
+op_mini all
+op_mob 80
+opera 108
+opera 107
+opera 106
+safari 17.4
+safari 17.3
+safari 17.2
+safari 17.1
+safari 17.0
+safari 16.6
+safari 16.5
+safari 16.4
+safari 16.3
+safari 16.2
+safari 16.1
+safari 16.0
+safari 15.6
+safari 15.5
+safari 15.4
+samsung 23
+samsung 22

.eslintrc.js

@@ -1,5 +1,23 @@
 module.exports = {
-  extends: 'airbnb',
+  extends: [
+    'eslint:recommended',
+    'plugin:import/recommended',
+    'plugin:react/recommended',
+    'plugin:react-hooks/recommended',
+    'plugin:jsx-a11y/recommended',
+  ],
+  plugins: [
+    'import',
+    'react',
+    'react-hooks',
+    'jsx-a11y',
+  ],
+
+  env: {
+    es6: true,
+    browser: true,
+  },
+
   parserOptions: {
     ecmaVersion: 2022,
     sourceType: 'module',
@@ -11,6 +29,11 @@
     'react/require-default-props': 'off',
     // Our babel config doesn't support class properties
     'react/state-in-constructor': 'off',
+    // I disagree
+    'react/function-component-definition': ['error', {
+      namedComponents: 'function-declaration',
+      unnamedComponents: 'arrow-function',
+    }],
     'import/no-extraneous-dependencies': ['error', { devDependencies: true }],
     'jsx-a11y/label-has-for': ['error', {
       components: [],

.github/dependabot.yml

@@ -1,11 +1,16 @@
 version: 2
 updates:
-- package-ecosystem: npm
+- package-ecosystem: github-actions
   directory: "/"
   schedule:
-    interval: weekly
+    interval: daily
   open-pull-requests-limit: 10
-- package-ecosystem: github-actions
+  commit-message:
+    prefix: "ci"
+- package-ecosystem: npm
   directory: "/"
   schedule:
     interval: weekly
+  open-pull-requests-limit: 10
+  commit-message:
+    prefix: "deps"

.github/workflows/ci.yml

@@ -56,7 +56,7 @@ jobs:
       - name: Install React ${{matrix.react-version}}
         if: matrix.react-version != '18.x'
         run: |
-          npm install --save-dev \
+          npm install --force --save-dev \
             react@${{matrix.react-version}} \
             react-dom@${{matrix.react-version}}
       - name: Run tests

.github/workflows/deploy.yml

@@ -19,7 +19,7 @@ jobs:
         run: npm test
       - name: Build example
         run: |
-          npm run example
+          npm run --prefix example build
           mkdir _deploy
           cp example/bundle.js example/index.html _deploy
       - name: Publish site

.gitignore

@@ -4,3 +4,4 @@ node_modules
 /generated-docs.md
 .eslintcache
 package-lock.json
+coverage

README.md

@@ -2,6 +2,8 @@
 
 Vimeo player component for React.
 
+Supported React versions: the latest releases of 16.x, 17.x, and 18.x.
+
 [Install][] - [Usage][] - [Demo][] - [Props][]
 
 ## Install
@@ -47,7 +49,7 @@ import Vimeo from '@u-wave/react-vimeo';
 | muted | bool | false | Starts in a muted state to help with autoplay |
 | background | bool | false | Starts in a background state with no controls to help with autoplay |
 | responsive | bool | false | Enable responsive mode and resize according to parent element (experimental) |
-| playbackRate | number | | Specify playback rate (requires Vimeo PRO / Business account)
+| playbackRate | number |  | Specify playback rate (requires Vimeo PRO / Business account) |
 | speed | bool | false | Enable playback rate controls (requires Vimeo PRO / Business account) |
 | keyboard | bool | true | Allows for keyboard input to trigger player events. |
 | pip | bool | false | Show the picture-in-picture button in the controlbar and enable the picture-in-picture API. |
@@ -63,13 +65,24 @@ import Vimeo from '@u-wave/react-vimeo';
 | onEnd | function |  | Triggered any time the video playback reaches the end. Note: when `loop` is turned on, the ended event will not fire. |
 | onTimeUpdate | function |  | Triggered as the `currentTime` of the video updates. It generally fires every 250ms, but it may vary depending on the browser. |
 | onProgress | function |  | Triggered as the video is loaded. Reports back the amount of the video that has been buffered. |
+| onSeeking | function |  | Triggered when the player starts seeking to a specific time. An `onTimeUpdate` event will also be fired at the same time. |
 | onSeeked | function |  | Triggered when the player seeks to a specific time. An `onTimeUpdate` event will also be fired at the same time. |
 | onTextTrackChange | function |  | Triggered when the active text track (captions/subtitles) changes. The values will be `null` if text tracks are turned off. |
+| onChapterChange | function |  | Triggered when the current chapter changes. |
 | onCueChange | function |  | Triggered when the active cue for the current text track changes. It also fires when the active text track changes. There may be multiple cues active. |
 | onCuePoint | function |  | Triggered when the current time hits a registered cue point. |
 | onVolumeChange | function |  | Triggered when the volume in the player changes. Some devices do not support setting the volume of the video independently from the system volume, so this event will never fire on those devices. |
 | onPlaybackRateChange | function |  | Triggered when the playback rate changes. |
+| onBufferStart | function |  | Triggered when buffering starts in the player. This is also triggered during preload and while seeking. |
+| onBufferEnd | function |  | Triggered when buffering ends in the player. This is also triggered at the end of preload and seeking. |
 | onLoaded | function |  | Triggered when a new video is loaded in the player. |
+| onDurationChange | function |  | Triggered when the duration attribute has been updated. |
+| onFullscreenChange | function |  | Triggered when the player enters or exits fullscreen. |
+| onQualityChange | function |  | Triggered when the set quality changes. |
+| onCameraChange | function |  | Triggered when any of the camera properties change for 360° videos. |
+| onResize | function |  | Triggered when the intrinsic size of the media changes. |
+| onEnterPictureInPicture | function |  | Triggered when the player enters picture-in-picture. |
+| onLeavePictureInPicture | function |  | Triggered when the player leaves picture-in-picture. |
 
 ## Related
 

example/app.js

@@ -1,6 +1,5 @@
-/* global document */
 import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
 import Vimeo from '@u-wave/react-vimeo'; // eslint-disable-line import/no-unresolved
 
 const videos = [
@@ -62,6 +61,7 @@ class App extends React.Component {
           <div className="collection">
             {videos.map((choice, index) => (
               <a
+                key={choice.id}
                 href={`#!/video/${index}`}
                 className={`collection-item ${video === choice ? 'active' : ''}`}
                 onClick={() => this.selectVideo(index)}
@@ -113,5 +113,5 @@ class App extends React.Component {
   }
 }
 
-// eslint-disable-next-line react/no-deprecated
-ReactDOM.render(<App />, document.getElementById('example'));
+const root = ReactDOM.createRoot(document.querySelector('#example'));
+root.render(<App />);

example/index.html

@@ -20,7 +20,7 @@
     <nav class="primary">
       <div class="nav-wrapper">
         <a href="https://u-wave.net" class="logo-wrapper">
-          <img src="https://u-wave.net/static/images/logo-white.png" alt="" class="logo">
+          <img src="https://u-wave.net/images/logo-white.png" alt="" class="logo">
         </a>
         <ul id="nav-mobile" class="right hide-on-med-and-down">
           <li><a href="https://hub.u-wave.net/" class="white-text btn-flat">Join</a></li>

example/package.json

@@ -5,7 +5,7 @@
   "version": "0.0.0-example",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "build": "esbuild --bundle app.js --loader:.js=jsx --sourcemap=inline --minify > bundle.js",
+    "build": "esbuild --bundle app.js --loader:.js=jsx --sourcemap=inline --minify-whitespace --minify-syntax > bundle.js",
     "start": "serve ."
   },
   "dependencies": {