react-hook-videojs 2.0.0 → 2.1.0-beta.2

package/README.md

@@ -10,15 +10,20 @@ Due to how video.js mutates the DOM, integrating video.js with React can be a bi
 
 React Hooks helps us package this quite nicely, and all you have to do to use this package is:
 
-```
+```jsx
 import React from "react";
-import useVideoJS from "react-hook-videojs";
+import "video.js/dist/video-js.css";
+import { useVideoJS } from "react-hook-videojs";
 
 const App = () => {
   const videoUrl = "http://techslides.com/demos/sample-videos/small.mp4";
-  const { Video, player, ready } = useVideoJS({ sources: [{ src: videoUrl }] });
+  const className = "my-class";
+  const { Video, player, ready } = useVideoJS(
+    { sources: [{ src: videoUrl }] },
+    className // optional
+  );
   if (ready) {
-      // Do something with the video.js player object.
+    // Do something with the video.js player object.
   }
   return (
     <div className="App">
@@ -28,4 +33,45 @@ const App = () => {
 };
 ```
 
-`useVideoJS` takes a single options argument, and passes it without modifications to video.js. See their [options reference](https://docs.videojs.com/tutorial-options.html) for further information.
+`useVideoJS` takes an options argument, and passes it without modifications to video.js.
+You may also provide an optional second string argument that will be appended as class name on the `video` DOM node.
+
+See their [options reference](https://docs.videojs.com/tutorial-options.html) for further information on the options argument.
+
+### Using with Tracks or other child components
+
+This hook now supports using features such as [tracks](https://docs.videojs.com/tutorial-tracks.html#text-tracks), and other child components of the `<video>` element.
+
+Example of using a text track:
+
+```jsx
+const App = () => {
+  // ...setup code from above
+
+  return (
+    <Video>
+      <track
+        kind="captions"
+        src="//example.com/path/to/captions.vtt"
+        srclang="en"
+        label="English"
+        default
+      />
+    </Video>
+  );
+};
+```
+
+_Note: Videojs supports adding `<track>` and `<sources>` elements programmatically_
+
+### Support for all `<video>` element attributes
+
+This hook supports all attributes for the native `<video>` element directly on the `<Video>` component.
+
+```jsx
+const App = () => {
+  return <Video muted autopictureinpicture />;
+};
+```
+
+_Note: video.js supports many of these (and registration of listeners) through the player options_

package/dist/index.d.ts

@@ -0,0 +1,11 @@
+import React, { HTMLProps } from "react";
+import videojs, { VideoJsPlayerOptions } from "video.js";
+declare type VideoType = (props: {
+    children?: React.ReactNode;
+} & Partial<HTMLProps<HTMLVideoElement>>) => JSX.Element;
+export declare const useVideoJS: (videoJsOptions: VideoJsPlayerOptions, classNames?: string) => {
+    Video: VideoType;
+    ready: boolean;
+    player: videojs.Player | null;
+};
+export {};

package/dist/react-hook-videojs.es.js

@@ -0,0 +1,61 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import React, { useRef, useState, useEffect, useCallback } from "react";
+import videojs from "video.js";
+const useVideoJS = (videoJsOptions, classNames = "") => {
+  const videoNode = useRef(null);
+  const [ready, setReady] = useState(false);
+  const changedKey = JSON.stringify(videoJsOptions);
+  const player = useRef(null);
+  useEffect(() => {
+    if (!videoNode.current)
+      return;
+    player.current = videojs(videoNode.current, videoJsOptions);
+    player.current.ready(() => {
+      setReady(true);
+    });
+    return () => {
+      var _a;
+      (_a = player.current) == null ? void 0 : _a.dispose();
+    };
+  }, [changedKey]);
+  const Video = useCallback((_a) => {
+    var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
+    return /* @__PURE__ */ React.createElement("div", {
+      "data-vjs-player": true,
+      key: changedKey
+    }, /* @__PURE__ */ React.createElement("video", __spreadValues({
+      ref: videoNode,
+      className: `video-js ${classNames}`
+    }, props), children));
+  }, [changedKey]);
+  return { Video, ready, player: player.current };
+};
+export { useVideoJS };
+//# sourceMappingURL=react-hook-videojs.es.js.map

package/dist/react-hook-videojs.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"react-hook-videojs.es.js","sources":["../src/index.tsx"],"sourcesContent":["import React, {\n  useRef,\n  useState,\n  useEffect,\n  useCallback,\n  HTMLProps,\n} from \"react\";\nimport videojs, { VideoJsPlayer, VideoJsPlayerOptions } from \"video.js\";\n\ntype VideoType = (\n  props: {\n    children?: React.ReactNode;\n  } & Partial<HTMLProps<HTMLVideoElement>>\n) => JSX.Element;\n\nexport const useVideoJS = (\n  videoJsOptions: VideoJsPlayerOptions,\n  classNames = \"\"\n): {\n  Video: VideoType;\n  ready: boolean;\n  player: videojs.Player | null;\n} => {\n  const videoNode = useRef(null);\n  const [ready, setReady] = useState(false);\n  const changedKey = JSON.stringify(videoJsOptions);\n  const player = useRef<VideoJsPlayer | null>(null);\n  useEffect(() => {\n    if (!videoNode.current) return;\n    player.current = videojs(videoNode.current, videoJsOptions);\n    player.current.ready(() => {\n      setReady(true);\n    });\n    return () => {\n      player.current?.dispose();\n    };\n  }, [changedKey]);\n\n  const Video = useCallback<VideoType>(\n    ({ children, ...props }) => (\n      <div data-vjs-player={true} key={changedKey}>\n        <video ref={videoNode} className={`video-js ${classNames}`} {...props}>\n          {children}\n        </video>\n      </div>\n    ),\n    [changedKey]\n  );\n  return { Video, ready, player: player.current };\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAea,aAAa,CACxB,gBACA,aAAa,OAKV;QACG,YAAY,OAAO,IAAI;QACvB,CAAC,OAAO,YAAY,SAAS,KAAK;QAClC,aAAa,KAAK,UAAU,cAAc;QAC1C,SAAS,OAA6B,IAAI;YACtC,MAAM;QACV,CAAC,UAAU;;WACR,UAAU,QAAQ,UAAU,SAAS,cAAc;WACnD,QAAQ,MAAM,MAAM;eAChB,IAAI;AAAA,KACd;WACM,MAAM;;mBACJ,+BAAS;AAAA;KAEjB,CAAC,UAAU,CAAC;QAET,QAAQ,YACZ,CAAC;AAAA,iBAAE,eAAF,IAAe,kBAAf,IAAe,CAAb;+CACA;MAAI,mBAAiB;AAAA,MAAM,KAAK;AAAA,2CAC9B;MAAM,KAAK;AAAA,MAAW,WAAW,YAAY;AAAA,OAAkB,QAC7D,QACH,CACF;AAAA,KAEF,CAAC,UAAU,CACb;SACO,EAAE,OAAO,OAAO,QAAQ,OAAO;AACxC;;"}

package/dist/react-hook-videojs.umd.js

@@ -0,0 +1,71 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+(function(global, factory) {
+  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("react"), require("video.js")) : typeof define === "function" && define.amd ? define(["exports", "react", "video.js"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global["react-hook-videojs"] = {}, global.React, global.videojs));
+})(this, function(exports2, React, videojs) {
+  "use strict";
+  function _interopDefaultLegacy(e) {
+    return e && typeof e === "object" && "default" in e ? e : { "default": e };
+  }
+  var React__default = /* @__PURE__ */ _interopDefaultLegacy(React);
+  var videojs__default = /* @__PURE__ */ _interopDefaultLegacy(videojs);
+  const useVideoJS = (videoJsOptions, classNames = "") => {
+    const videoNode = React.useRef(null);
+    const [ready, setReady] = React.useState(false);
+    const changedKey = JSON.stringify(videoJsOptions);
+    const player = React.useRef(null);
+    React.useEffect(() => {
+      if (!videoNode.current)
+        return;
+      player.current = videojs__default["default"](videoNode.current, videoJsOptions);
+      player.current.ready(() => {
+        setReady(true);
+      });
+      return () => {
+        var _a;
+        (_a = player.current) == null ? void 0 : _a.dispose();
+      };
+    }, [changedKey]);
+    const Video = React.useCallback((_a) => {
+      var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
+      return /* @__PURE__ */ React__default["default"].createElement("div", {
+        "data-vjs-player": true,
+        key: changedKey
+      }, /* @__PURE__ */ React__default["default"].createElement("video", __spreadValues({
+        ref: videoNode,
+        className: `video-js ${classNames}`
+      }, props), children));
+    }, [changedKey]);
+    return { Video, ready, player: player.current };
+  };
+  exports2.useVideoJS = useVideoJS;
+  Object.defineProperty(exports2, "__esModule", { value: true });
+  exports2[Symbol.toStringTag] = "Module";
+});
+//# sourceMappingURL=react-hook-videojs.umd.js.map

package/dist/react-hook-videojs.umd.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"react-hook-videojs.umd.js","sources":["../src/index.tsx"],"sourcesContent":["import React, {\n  useRef,\n  useState,\n  useEffect,\n  useCallback,\n  HTMLProps,\n} from \"react\";\nimport videojs, { VideoJsPlayer, VideoJsPlayerOptions } from \"video.js\";\n\ntype VideoType = (\n  props: {\n    children?: React.ReactNode;\n  } & Partial<HTMLProps<HTMLVideoElement>>\n) => JSX.Element;\n\nexport const useVideoJS = (\n  videoJsOptions: VideoJsPlayerOptions,\n  classNames = \"\"\n): {\n  Video: VideoType;\n  ready: boolean;\n  player: videojs.Player | null;\n} => {\n  const videoNode = useRef(null);\n  const [ready, setReady] = useState(false);\n  const changedKey = JSON.stringify(videoJsOptions);\n  const player = useRef<VideoJsPlayer | null>(null);\n  useEffect(() => {\n    if (!videoNode.current) return;\n    player.current = videojs(videoNode.current, videoJsOptions);\n    player.current.ready(() => {\n      setReady(true);\n    });\n    return () => {\n      player.current?.dispose();\n    };\n  }, [changedKey]);\n\n  const Video = useCallback<VideoType>(\n    ({ children, ...props }) => (\n      <div data-vjs-player={true} key={changedKey}>\n        <video ref={videoNode} className={`video-js ${classNames}`} {...props}>\n          {children}\n        </video>\n      </div>\n    ),\n    [changedKey]\n  );\n  return { Video, ready, player: player.current };\n};\n"],"names":["useRef","useState","videojs","useCallback"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAea,aAAa,CACxB,gBACA,aAAa,OAKV;UACG,YAAYA,aAAO,IAAI;UACvB,CAAC,OAAO,YAAYC,eAAS,KAAK;UAClC,aAAa,KAAK,UAAU,cAAc;UAC1C,SAASD,aAA6B,IAAI;oBACtC,MAAM;UACV,CAAC,UAAU;;aACR,UAAUE,4BAAQ,UAAU,SAAS,cAAc;aACnD,QAAQ,MAAM,MAAM;iBAChB,IAAI;AAAA,OACd;aACM,MAAM;;qBACJ,+BAAS;AAAA;OAEjB,CAAC,UAAU,CAAC;UAET,QAAQC,kBACZ,CAAC;AAAA,mBAAE,eAAF,IAAe,kBAAf,IAAe,CAAb;qEACA;QAAI,mBAAiB;AAAA,QAAM,KAAK;AAAA,iEAC9B;QAAM,KAAK;AAAA,QAAW,WAAW,YAAY;AAAA,SAAkB,QAC7D,QACH,CACF;AAAA,OAEF,CAAC,UAAU,CACb;WACO,EAAE,OAAO,OAAO,QAAQ,OAAO;EACxC;;;;;"}

package/package.json

@@ -1,53 +1,58 @@
 {
   "name": "react-hook-videojs",
-  "version": "2.0.0",
+  "version": "2.1.0-beta.2",
   "description": "A simple react hook to easily integrate video.js with React",
   "author": "jimmycallin",
   "license": "MIT",
   "repository": "jimmycallin/react-hook-videojs",
-  "main": "dist/index.js",
-  "module": "dist/index.modern.js",
-  "source": "src/index.js",
+  "types": "./dist/index.d.ts",
+  "main": "dist/react-hook-videojs.umd.js",
+  "module": "dist/react-hook-videojs.es.js",
+  "source": "src/index.tsx",
   "engines": {
-    "node": ">=10"
+    "node": ">=12"
   },
   "scripts": {
-    "build": "microbundle-crl --no-compress --format modern,cjs",
-    "start": "microbundle-crl watch --no-compress --format modern,cjs",
-    "prepare": "run-s build",
-    "test": "run-s test:unit test:lint test:build",
-    "test:build": "run-s build",
-    "test:lint": "eslint .",
-    "test:unit": "cross-env CI=1 react-scripts test --env=jsdom",
-    "test:watch": "react-scripts test --env=jsdom",
-    "predeploy": "cd example && npm install && npm run build",
-    "deploy": "gh-pages -d example/build"
+    "clean": "rimraf dist .tmp",
+    "build": "vite build && tsc --project tsconfig.types.json",
+    "test": "npm run test:lint && npm run test:jest && npm run test:formatting",
+    "test:jest": "jest",
+    "test:lint": "eslint ./src",
+    "test:formatting": "prettier -c .",
+    "format": "prettier --write .",
+    "prepare": "npm run clean && npm run build",
+    "prepublishOnly": "npm run test"
   },
   "peerDependencies": {
-    "react": "^16.0.0",
+    "react": "^16.8.0, ^17.0.0",
     "video.js": "^7.0.0"
   },
   "devDependencies": {
-    "babel-eslint": "^10.0.3",
-    "cross-env": "^7.0.2",
-    "eslint": "^6.8.0",
-    "eslint-config-prettier": "^6.7.0",
-    "eslint-config-standard": "^14.1.0",
-    "eslint-config-standard-react": "^9.2.0",
-    "eslint-plugin-import": "^2.18.2",
-    "eslint-plugin-node": "^11.0.0",
-    "eslint-plugin-prettier": "^3.1.1",
-    "eslint-plugin-promise": "^4.2.1",
-    "eslint-plugin-react": "^7.17.0",
-    "eslint-plugin-standard": "^4.0.1",
-    "gh-pages": "^2.2.0",
-    "microbundle-crl": "^0.13.10",
-    "npm-run-all": "^4.1.5",
-    "prettier": "^2.0.4",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
-    "react-scripts": "^3.4.1",
-    "video.js": "^7.8.4"
+    "@babel/core": "^7.14.6",
+    "@babel/plugin-transform-typescript": "^7.18.8",
+    "@babel/preset-env": "^7.14.7",
+    "@babel/preset-react": "^7.14.5",
+    "@testing-library/react": "^12.0.0",
+    "@types/jest": "^28.1.5",
+    "@types/video.js": "^7.3.42",
+    "@typescript-eslint/eslint-plugin": "^5.30.6",
+    "@typescript-eslint/parser": "^5.30.6",
+    "@vitejs/plugin-react-refresh": "^1.3.6",
+    "babel-jest": "^28.1.3",
+    "eslint": "^8.0.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-jest": "^26.1.1",
+    "eslint-plugin-react": "^7.24.0",
+    "jest": "^28.1.3",
+    "jest-environment-jsdom": "^28.1.3",
+    "prettier": "^2.3.2",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "rimraf": "^3.0.2",
+    "ts-jest": "^28.0.5",
+    "typescript": "^4.7.4",
+    "video.js": "^7.13.3",
+    "vite": "^2.4.4"
   },
   "files": [
     "dist"

package/dist/index.css

@@ -1,9 +0,0 @@
-/* add css module styles here (optional) */
-
-._styles-module__test__3ybTi {
-  margin: 2em;
-  padding: 0.5em;
-  border: 2px solid #000;
-  font-size: 2em;
-  text-align: center;
-}

package/dist/index.js

@@ -1,43 +0,0 @@
-function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
-
-var React = require('react');
-var React__default = _interopDefault(React);
-var videojs = _interopDefault(require('video.js'));
-require('video.js/dist/video-js.css');
-
-var useVideoJS = function useVideoJS(videoJsOptions) {
-  var videoNode = React.useRef(null);
-
-  var _useState = React.useState(false),
-      ready = _useState[0],
-      setReady = _useState[1];
-
-  var changedKey = JSON.stringify(videoJsOptions);
-  var player = React.useRef(null);
-  React.useEffect(function () {
-    player.current = videojs(videoNode.current, videoJsOptions);
-    player.current.ready(function () {
-      setReady(true);
-    });
-    return function () {
-      player.current.dispose();
-    };
-  }, [changedKey]);
-  var Video = React.useCallback(function () {
-    return /*#__PURE__*/React__default.createElement("div", {
-      "data-vjs-player": true,
-      key: changedKey
-    }, /*#__PURE__*/React__default.createElement("video", {
-      ref: videoNode,
-      className: "video-js"
-    }));
-  }, [changedKey]);
-  return {
-    Video: Video,
-    ready: ready,
-    player: player.current
-  };
-};
-
-exports.useVideoJS = useVideoJS;
-//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sources":["../src/index.js"],"sourcesContent":["import React, { useRef, useState, useEffect, useCallback } from \"react\";\nimport videojs from \"video.js\";\nimport \"video.js/dist/video-js.css\";\n\nexport const useVideoJS = (videoJsOptions) => {\n  const videoNode = useRef(null);\n  const [ready, setReady] = useState(false);\n  const changedKey = JSON.stringify(videoJsOptions);\n  const player = useRef(null);\n  useEffect(() => {\n    player.current = videojs(videoNode.current, videoJsOptions);\n    player.current.ready(() => {\n      setReady(true);\n    });\n    return () => {\n      player.current.dispose();\n    };\n  }, [changedKey]);\n\n  const Video = useCallback(\n    () => (\n      <div data-vjs-player key={changedKey}>\n        <video ref={videoNode} className=\"video-js\" />\n      </div>\n    ),\n    [changedKey]\n  );\n  return { Video, ready, player: player.current };\n};\n"],"names":["useVideoJS","videoJsOptions","videoNode","useRef","useState","ready","setReady","changedKey","JSON","stringify","player","useEffect","current","videojs","dispose","Video","useCallback","React"],"mappings":";;;;;;;IAIaA,UAAU,GAAG,SAAbA,UAAa,CAACC,cAAD,EAAoB;AAC5C,MAAMC,SAAS,GAAGC,YAAM,CAAC,IAAD,CAAxB;;AAD4C,kBAElBC,cAAQ,CAAC,KAAD,CAFU;AAAA,MAErCC,KAFqC;AAAA,MAE9BC,QAF8B;;AAG5C,MAAMC,UAAU,GAAGC,IAAI,CAACC,SAAL,CAAeR,cAAf,CAAnB;AACA,MAAMS,MAAM,GAAGP,YAAM,CAAC,IAAD,CAArB;AACAQ,EAAAA,eAAS,CAAC,YAAM;AACdD,IAAAA,MAAM,CAACE,OAAP,GAAiBC,OAAO,CAACX,SAAS,CAACU,OAAX,EAAoBX,cAApB,CAAxB;AACAS,IAAAA,MAAM,CAACE,OAAP,CAAeP,KAAf,CAAqB,YAAM;AACzBC,MAAAA,QAAQ,CAAC,IAAD,CAAR;AACD,KAFD;AAGA,WAAO,YAAM;AACXI,MAAAA,MAAM,CAACE,OAAP,CAAeE,OAAf;AACD,KAFD;AAGD,GARQ,EAQN,CAACP,UAAD,CARM,CAAT;AAUA,MAAMQ,KAAK,GAAGC,iBAAW,CACvB;AAAA,wBACEC;AAAK,6BAAL;AAAqB,MAAA,GAAG,EAAEV;AAA1B,oBACEU;AAAO,MAAA,GAAG,EAAEf,SAAZ;AAAuB,MAAA,SAAS,EAAC;AAAjC,MADF,CADF;AAAA,GADuB,EAMvB,CAACK,UAAD,CANuB,CAAzB;AAQA,SAAO;AAAEQ,IAAAA,KAAK,EAALA,KAAF;AAASV,IAAAA,KAAK,EAALA,KAAT;AAAgBK,IAAAA,MAAM,EAAEA,MAAM,CAACE;AAA/B,GAAP;AACD;;;;"}

package/dist/index.modern.js

@@ -1,40 +0,0 @@
-import React, { useRef, useState, useEffect, useCallback } from 'react';
-import videojs from 'video.js';
-import 'video.js/dist/video-js.css';
-
-var useVideoJS = function useVideoJS(videoJsOptions) {
-  var videoNode = useRef(null);
-
-  var _useState = useState(false),
-      ready = _useState[0],
-      setReady = _useState[1];
-
-  var changedKey = JSON.stringify(videoJsOptions);
-  var player = useRef(null);
-  useEffect(function () {
-    player.current = videojs(videoNode.current, videoJsOptions);
-    player.current.ready(function () {
-      setReady(true);
-    });
-    return function () {
-      player.current.dispose();
-    };
-  }, [changedKey]);
-  var Video = useCallback(function () {
-    return /*#__PURE__*/React.createElement("div", {
-      "data-vjs-player": true,
-      key: changedKey
-    }, /*#__PURE__*/React.createElement("video", {
-      ref: videoNode,
-      className: "video-js"
-    }));
-  }, [changedKey]);
-  return {
-    Video: Video,
-    ready: ready,
-    player: player.current
-  };
-};
-
-export { useVideoJS };
-//# sourceMappingURL=index.modern.js.map

package/dist/index.modern.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.modern.js","sources":["../src/index.js"],"sourcesContent":["import React, { useRef, useState, useEffect, useCallback } from \"react\";\nimport videojs from \"video.js\";\nimport \"video.js/dist/video-js.css\";\n\nexport const useVideoJS = (videoJsOptions) => {\n  const videoNode = useRef(null);\n  const [ready, setReady] = useState(false);\n  const changedKey = JSON.stringify(videoJsOptions);\n  const player = useRef(null);\n  useEffect(() => {\n    player.current = videojs(videoNode.current, videoJsOptions);\n    player.current.ready(() => {\n      setReady(true);\n    });\n    return () => {\n      player.current.dispose();\n    };\n  }, [changedKey]);\n\n  const Video = useCallback(\n    () => (\n      <div data-vjs-player key={changedKey}>\n        <video ref={videoNode} className=\"video-js\" />\n      </div>\n    ),\n    [changedKey]\n  );\n  return { Video, ready, player: player.current };\n};\n"],"names":["useVideoJS","videoJsOptions","videoNode","useRef","useState","ready","setReady","changedKey","JSON","stringify","player","useEffect","current","videojs","dispose","Video","useCallback"],"mappings":";;;;IAIaA,UAAU,GAAG,SAAbA,UAAa,CAACC,cAAD,EAAoB;AAC5C,MAAMC,SAAS,GAAGC,MAAM,CAAC,IAAD,CAAxB;;AAD4C,kBAElBC,QAAQ,CAAC,KAAD,CAFU;AAAA,MAErCC,KAFqC;AAAA,MAE9BC,QAF8B;;AAG5C,MAAMC,UAAU,GAAGC,IAAI,CAACC,SAAL,CAAeR,cAAf,CAAnB;AACA,MAAMS,MAAM,GAAGP,MAAM,CAAC,IAAD,CAArB;AACAQ,EAAAA,SAAS,CAAC,YAAM;AACdD,IAAAA,MAAM,CAACE,OAAP,GAAiBC,OAAO,CAACX,SAAS,CAACU,OAAX,EAAoBX,cAApB,CAAxB;AACAS,IAAAA,MAAM,CAACE,OAAP,CAAeP,KAAf,CAAqB,YAAM;AACzBC,MAAAA,QAAQ,CAAC,IAAD,CAAR;AACD,KAFD;AAGA,WAAO,YAAM;AACXI,MAAAA,MAAM,CAACE,OAAP,CAAeE,OAAf;AACD,KAFD;AAGD,GARQ,EAQN,CAACP,UAAD,CARM,CAAT;AAUA,MAAMQ,KAAK,GAAGC,WAAW,CACvB;AAAA,wBACE;AAAK,6BAAL;AAAqB,MAAA,GAAG,EAAET;AAA1B,oBACE;AAAO,MAAA,GAAG,EAAEL,SAAZ;AAAuB,MAAA,SAAS,EAAC;AAAjC,MADF,CADF;AAAA,GADuB,EAMvB,CAACK,UAAD,CANuB,CAAzB;AAQA,SAAO;AAAEQ,IAAAA,KAAK,EAALA,KAAF;AAASV,IAAAA,KAAK,EAALA,KAAT;AAAgBK,IAAAA,MAAM,EAAEA,MAAM,CAACE;AAA/B,GAAP;AACD;;;;"}