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

package/dist/index.d.ts

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

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

@@ -1,61 +1,70 @@
-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 React, { forwardRef, useRef, useLayoutEffect, useState, useCallback } from "react";
 import videojs from "video.js";
-const useVideoJS = (videoJsOptions, classNames = "") => {
+import cloneDeep from "lodash.clonedeep";
+import { dequal } from "dequal";
+function useDeepCompareMemoize(value) {
+  const ref = React.useRef(value);
+  const signalRef = React.useRef(0);
+  if (!dequal(value, ref.current)) {
+    ref.current = value;
+    signalRef.current += 1;
+  }
+  return React.useMemo(() => ref.current, [signalRef.current]);
+}
+const VideoJsWrapper = forwardRef(({ children, videoJsOptions, onReady, onDispose, classNames, ...props }, playerRef) => {
+  const player = playerRef;
+  const videoJsOptionsCloned = cloneDeep(videoJsOptions);
   const videoNode = useRef(null);
-  const [ready, setReady] = useState(false);
-  const changedKey = JSON.stringify(videoJsOptions);
-  const player = useRef(null);
-  useEffect(() => {
-    if (!videoNode.current)
+  const containerRef = useRef(null);
+  useLayoutEffect(() => {
+    var _a;
+    if (!((_a = videoNode.current) == null ? void 0 : _a.parentNode))
       return;
-    player.current = videojs(videoNode.current, videoJsOptions);
-    player.current.ready(() => {
-      setReady(true);
-    });
+    const originalVideoNodeParent = videoNode.current.parentNode.cloneNode(true);
+    if (!player.current) {
+      player.current = videojs(videoNode.current, videoJsOptionsCloned);
+      player.current.ready(() => {
+        onReady();
+      });
+    }
     return () => {
-      var _a;
-      (_a = player.current) == null ? void 0 : _a.dispose();
+      var _a2;
+      if (player.current) {
+        player.current.dispose();
+        if (containerRef.current && ((_a2 = videoNode.current) == null ? void 0 : _a2.parentNode) && !containerRef.current.contains(videoNode.current.parentNode)) {
+          containerRef.current.appendChild(originalVideoNodeParent);
+          videoNode.current = originalVideoNodeParent.firstChild;
+        }
+        player.current = null;
+        onDispose();
+      }
     };
-  }, [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]);
+  }, [useDeepCompareMemoize(videoJsOptions)]);
+  return /* @__PURE__ */ React.createElement("div", {
+    ref: containerRef
+  }, /* @__PURE__ */ React.createElement("div", {
+    "data-vjs-player": true
+  }, /* @__PURE__ */ React.createElement("video", {
+    ref: videoNode,
+    className: `video-js ${classNames}`,
+    ...props
+  }, children)));
+});
+VideoJsWrapper.displayName = "VideoJsWrapper";
+const useVideoJS = (videoJsOptions, classNames = "") => {
+  const [ready, setReady] = useState(false);
+  const player = useRef(null);
+  const Video = useCallback(({ children, ...props }) => /* @__PURE__ */ React.createElement(VideoJsWrapper, {
+    videoJsOptions,
+    classNames,
+    onReady: () => setReady(true),
+    onDispose: () => setReady(false),
+    ...props,
+    ref: player
+  }, children), [useDeepCompareMemoize(videoJsOptions), classNames]);
   return { Video, ready, player: player.current };
 };
-export { useVideoJS };
+export {
+  useVideoJS
+};
 //# sourceMappingURL=react-hook-videojs.es.js.map

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

@@ -1 +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;;"}
+{"version":3,"file":"react-hook-videojs.es.js","sources":["../src/index.tsx"],"sourcesContent":["import React, {\n  useRef,\n  useState,\n  useLayoutEffect,\n  useCallback,\n  forwardRef,\n  HTMLProps,\n  MutableRefObject,\n} from \"react\";\nimport videojs, { VideoJsPlayer, VideoJsPlayerOptions } from \"video.js\";\nimport cloneDeep from \"lodash.clonedeep\";\nimport { dequal } from \"dequal\";\n\n// Function copied from\n// https://github.com/kentcdodds/use-deep-compare-effect/blob/main/src/index.ts\nfunction useDeepCompareMemoize<T>(value: T): T {\n  const ref = React.useRef<T>(value);\n  const signalRef = React.useRef<number>(0);\n\n  if (!dequal(value, ref.current)) {\n    ref.current = value;\n    signalRef.current += 1;\n  }\n\n  return React.useMemo(() => ref.current, [signalRef.current]);\n}\n\n// Integrating React and video.js is a bit tricky, especially when supporting\n// React 18 strict mode. We'll do our best to explain what happens in inline comments.\n\nconst VideoJsWrapper = forwardRef<\n  VideoJsPlayer,\n  {\n    children: React.ReactNode;\n    videoJsOptions: VideoJsPlayerOptions;\n    onReady: () => void;\n    onDispose: () => void;\n    classNames: string;\n  }\n>(\n  (\n    { children, videoJsOptions, onReady, onDispose, classNames, ...props },\n    playerRef\n  ) => {\n    const player = playerRef as MutableRefObject<VideoJsPlayer | null>;\n    // video.js sometimes mutates the provided options object.\n    // We clone it to avoid mutation issues.\n    const videoJsOptionsCloned = cloneDeep(videoJsOptions);\n    const videoNode = useRef<HTMLVideoElement | null>(null);\n    const containerRef = useRef<HTMLDivElement | null>(null);\n\n    useLayoutEffect(() => {\n      if (!videoNode.current?.parentNode) return;\n\n      // Once we initialize the player, videojs will start mutating the DOM.\n      // We need a snapshot of the state just before, so we know what state\n      // to reset the DOM to.\n      const originalVideoNodeParent =\n        videoNode.current.parentNode.cloneNode(true);\n\n      if (!player.current) {\n        player.current = videojs(videoNode.current, videoJsOptionsCloned);\n        player.current.ready(() => {\n          onReady();\n        });\n      }\n\n      return (): void => {\n        // Whenever something changes in the options object, we\n        // want to reinitialize video.js, and destroy the old player by calling `player.current.dispose()`\n\n        if (player.current) {\n          player.current.dispose();\n\n          // Unfortunately, video.js heavily mutates the DOM in a way that React doesn't\n          // like, so we need to readd the removed DOM elements directly after dispose.\n          // More concretely, the node marked with `data-vjs-player` will be removed from the\n          // DOM. We are readding the cloned original video node parent as it was when React first rendered it,\n          // so it is once again synchronized with React.\n          if (\n            containerRef.current &&\n            videoNode.current?.parentNode &&\n            !containerRef.current.contains(videoNode.current.parentNode)\n          ) {\n            containerRef.current.appendChild(originalVideoNodeParent);\n            videoNode.current =\n              originalVideoNodeParent.firstChild as HTMLVideoElement;\n          }\n\n          player.current = null;\n          onDispose();\n        }\n      };\n\n      // We'll use the serialized videoJsOptions object as a dependency object\n    }, [useDeepCompareMemoize(videoJsOptions)]);\n\n    return (\n      // TODO: can we get by withour introducing an extra div?\n      <div ref={containerRef}>\n        <div data-vjs-player>\n          <video\n            ref={videoNode}\n            className={`video-js ${classNames}`}\n            {...props}\n          >\n            {children}\n          </video>\n        </div>\n      </div>\n    );\n  }\n);\n\nVideoJsWrapper.displayName = \"VideoJsWrapper\";\n\ntype VideoProps = {\n  children?: React.ReactNode;\n} & Partial<HTMLProps<HTMLVideoElement>>;\n\ntype VideoType = (props: VideoProps) => JSX.Element;\n\nexport const useVideoJS = (\n  videoJsOptions: VideoJsPlayerOptions,\n  classNames = \"\"\n): {\n  Video: VideoType;\n  ready: boolean;\n  player: VideoJsPlayer | null;\n} => {\n  const [ready, setReady] = useState(false);\n\n  // player will contain the video.js player object, once it is ready.\n  const player = useRef<VideoJsPlayer>(null);\n  const Video = useCallback(\n    ({ children, ...props }: VideoProps) => (\n      <VideoJsWrapper\n        videoJsOptions={videoJsOptions}\n        classNames={classNames}\n        onReady={(): void => setReady(true)}\n        onDispose={(): void => setReady(false)}\n        {...props}\n        ref={player}\n      >\n        {children}\n      </VideoJsWrapper>\n    ),\n    [useDeepCompareMemoize(videoJsOptions), classNames]\n  );\n\n  return { Video, ready, player: player.current };\n};\n"],"names":[],"mappings":";;;;AAeA,+BAAkC,OAAa;AACvC,QAAA,MAAM,MAAM,OAAU,KAAK;AAC3B,QAAA,YAAY,MAAM,OAAe,CAAC;AAExC,MAAI,CAAC,OAAO,OAAO,IAAI,OAAO,GAAG;AAC/B,QAAI,UAAU;AACd,cAAU,WAAW;AAAA,EACvB;AAEO,SAAA,MAAM,QAAQ,MAAM,IAAI,SAAS,CAAC,UAAU,OAAO,CAAC;AAC7D;AAKA,MAAM,iBAAiB,WAUrB,CACE,EAAE,UAAU,gBAAgB,SAAS,WAAW,eAAe,SAC/D,cACG;AACH,QAAM,SAAS;AAGT,QAAA,uBAAuB,UAAU,cAAc;AAC/C,QAAA,YAAY,OAAgC,IAAI;AAChD,QAAA,eAAe,OAA8B,IAAI;AAEvD,kBAAgB,MAAM;;AAChB,QAAA,CAAC,iBAAU,YAAV,mBAAmB;AAAY;AAKpC,UAAM,0BACJ,UAAU,QAAQ,WAAW,UAAU,IAAI;AAEzC,QAAA,CAAC,OAAO,SAAS;AACnB,aAAO,UAAU,QAAQ,UAAU,SAAS,oBAAoB;AACzD,aAAA,QAAQ,MAAM,MAAM;AACjB;MAAA,CACT;AAAA,IACH;AAEA,WAAO,MAAY;;AAIjB,UAAI,OAAO,SAAS;AAClB,eAAO,QAAQ;AAOf,YACE,aAAa,WACb,kBAAU,YAAV,oBAAmB,eACnB,CAAC,aAAa,QAAQ,SAAS,UAAU,QAAQ,UAAU,GAC3D;AACa,uBAAA,QAAQ,YAAY,uBAAuB;AACxD,oBAAU,UACR,wBAAwB;AAAA,QAC5B;AAEA,eAAO,UAAU;AACP;MACZ;AAAA,IAAA;AAAA,EAID,GAAA,CAAC,sBAAsB,cAAc,CAAC,CAAC;AAE1C,SAEG,sBAAA,cAAA,OAAA;AAAA,IAAI,KAAK;AAAA,EAAA,GACP,sBAAA,cAAA,OAAA;AAAA,IAAI,mBAAe;AAAA,EAAA,GACjB,sBAAA,cAAA,SAAA;AAAA,IACC,KAAK;AAAA,IACL,WAAW,YAAY;AAAA,IACtB,GAAG;AAAA,EAAA,GAEH,QACH,CACF,CACF;AAEJ,CACF;AAEA,eAAe,cAAc;AAQtB,MAAM,aAAa,CACxB,gBACA,aAAa,OAKV;AACH,QAAM,CAAC,OAAO,YAAY,SAAS,KAAK;AAGlC,QAAA,SAAS,OAAsB,IAAI;AACzC,QAAM,QAAQ,YACZ,CAAC,EAAE,aAAa,YACb,sBAAA,cAAA,gBAAA;AAAA,IACC;AAAA,IACA;AAAA,IACA,SAAS,MAAY,SAAS,IAAI;AAAA,IAClC,WAAW,MAAY,SAAS,KAAK;AAAA,IACpC,GAAG;AAAA,IACJ,KAAK;AAAA,EAAA,GAEJ,QACH,GAEF,CAAC,sBAAsB,cAAc,GAAG,UAAU,CACpD;AAEA,SAAO,EAAE,OAAO,OAAO,QAAQ,OAAO,QAAQ;AAChD;"}

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

@@ -1,71 +1,74 @@
-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) {
+  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("react"), require("video.js"), require("lodash.clonedeep"), require("dequal")) : typeof define === "function" && define.amd ? define(["exports", "react", "video.js", "lodash.clonedeep", "dequal"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global["react-hook-videojs"] = {}, global.react, global.video.js, global.lodash.clonedeep, global.dequal));
+})(this, function(exports2, React, videojs, cloneDeep, dequal) {
   "use strict";
-  function _interopDefaultLegacy(e) {
-    return e && typeof e === "object" && "default" in e ? e : { "default": e };
+  const _interopDefaultLegacy = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
+  const React__default = /* @__PURE__ */ _interopDefaultLegacy(React);
+  const videojs__default = /* @__PURE__ */ _interopDefaultLegacy(videojs);
+  const cloneDeep__default = /* @__PURE__ */ _interopDefaultLegacy(cloneDeep);
+  function useDeepCompareMemoize(value) {
+    const ref = React__default.default.useRef(value);
+    const signalRef = React__default.default.useRef(0);
+    if (!dequal.dequal(value, ref.current)) {
+      ref.current = value;
+      signalRef.current += 1;
+    }
+    return React__default.default.useMemo(() => ref.current, [signalRef.current]);
   }
-  var React__default = /* @__PURE__ */ _interopDefaultLegacy(React);
-  var videojs__default = /* @__PURE__ */ _interopDefaultLegacy(videojs);
-  const useVideoJS = (videoJsOptions, classNames = "") => {
+  const VideoJsWrapper = React.forwardRef(({ children, videoJsOptions, onReady, onDispose, classNames, ...props }, playerRef) => {
+    const player = playerRef;
+    const videoJsOptionsCloned = cloneDeep__default.default(videoJsOptions);
     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)
+    const containerRef = React.useRef(null);
+    React.useLayoutEffect(() => {
+      var _a;
+      if (!((_a = videoNode.current) == null ? void 0 : _a.parentNode))
         return;
-      player.current = videojs__default["default"](videoNode.current, videoJsOptions);
-      player.current.ready(() => {
-        setReady(true);
-      });
+      const originalVideoNodeParent = videoNode.current.parentNode.cloneNode(true);
+      if (!player.current) {
+        player.current = videojs__default.default(videoNode.current, videoJsOptionsCloned);
+        player.current.ready(() => {
+          onReady();
+        });
+      }
       return () => {
-        var _a;
-        (_a = player.current) == null ? void 0 : _a.dispose();
+        var _a2;
+        if (player.current) {
+          player.current.dispose();
+          if (containerRef.current && ((_a2 = videoNode.current) == null ? void 0 : _a2.parentNode) && !containerRef.current.contains(videoNode.current.parentNode)) {
+            containerRef.current.appendChild(originalVideoNodeParent);
+            videoNode.current = originalVideoNodeParent.firstChild;
+          }
+          player.current = null;
+          onDispose();
+        }
       };
-    }, [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]);
+    }, [useDeepCompareMemoize(videoJsOptions)]);
+    return /* @__PURE__ */ React__default.default.createElement("div", {
+      ref: containerRef
+    }, /* @__PURE__ */ React__default.default.createElement("div", {
+      "data-vjs-player": true
+    }, /* @__PURE__ */ React__default.default.createElement("video", {
+      ref: videoNode,
+      className: `video-js ${classNames}`,
+      ...props
+    }, children)));
+  });
+  VideoJsWrapper.displayName = "VideoJsWrapper";
+  const useVideoJS = (videoJsOptions, classNames = "") => {
+    const [ready, setReady] = React.useState(false);
+    const player = React.useRef(null);
+    const Video = React.useCallback(({ children, ...props }) => /* @__PURE__ */ React__default.default.createElement(VideoJsWrapper, {
+      videoJsOptions,
+      classNames,
+      onReady: () => setReady(true),
+      onDispose: () => setReady(false),
+      ...props,
+      ref: player
+    }, children), [useDeepCompareMemoize(videoJsOptions), classNames]);
     return { Video, ready, player: player.current };
   };
   exports2.useVideoJS = useVideoJS;
-  Object.defineProperty(exports2, "__esModule", { value: true });
-  exports2[Symbol.toStringTag] = "Module";
+  Object.defineProperties(exports2, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 });
 //# sourceMappingURL=react-hook-videojs.umd.js.map

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

@@ -1 +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;;;;;"}
+{"version":3,"file":"react-hook-videojs.umd.js","sources":["../src/index.tsx"],"sourcesContent":["import React, {\n  useRef,\n  useState,\n  useLayoutEffect,\n  useCallback,\n  forwardRef,\n  HTMLProps,\n  MutableRefObject,\n} from \"react\";\nimport videojs, { VideoJsPlayer, VideoJsPlayerOptions } from \"video.js\";\nimport cloneDeep from \"lodash.clonedeep\";\nimport { dequal } from \"dequal\";\n\n// Function copied from\n// https://github.com/kentcdodds/use-deep-compare-effect/blob/main/src/index.ts\nfunction useDeepCompareMemoize<T>(value: T): T {\n  const ref = React.useRef<T>(value);\n  const signalRef = React.useRef<number>(0);\n\n  if (!dequal(value, ref.current)) {\n    ref.current = value;\n    signalRef.current += 1;\n  }\n\n  return React.useMemo(() => ref.current, [signalRef.current]);\n}\n\n// Integrating React and video.js is a bit tricky, especially when supporting\n// React 18 strict mode. We'll do our best to explain what happens in inline comments.\n\nconst VideoJsWrapper = forwardRef<\n  VideoJsPlayer,\n  {\n    children: React.ReactNode;\n    videoJsOptions: VideoJsPlayerOptions;\n    onReady: () => void;\n    onDispose: () => void;\n    classNames: string;\n  }\n>(\n  (\n    { children, videoJsOptions, onReady, onDispose, classNames, ...props },\n    playerRef\n  ) => {\n    const player = playerRef as MutableRefObject<VideoJsPlayer | null>;\n    // video.js sometimes mutates the provided options object.\n    // We clone it to avoid mutation issues.\n    const videoJsOptionsCloned = cloneDeep(videoJsOptions);\n    const videoNode = useRef<HTMLVideoElement | null>(null);\n    const containerRef = useRef<HTMLDivElement | null>(null);\n\n    useLayoutEffect(() => {\n      if (!videoNode.current?.parentNode) return;\n\n      // Once we initialize the player, videojs will start mutating the DOM.\n      // We need a snapshot of the state just before, so we know what state\n      // to reset the DOM to.\n      const originalVideoNodeParent =\n        videoNode.current.parentNode.cloneNode(true);\n\n      if (!player.current) {\n        player.current = videojs(videoNode.current, videoJsOptionsCloned);\n        player.current.ready(() => {\n          onReady();\n        });\n      }\n\n      return (): void => {\n        // Whenever something changes in the options object, we\n        // want to reinitialize video.js, and destroy the old player by calling `player.current.dispose()`\n\n        if (player.current) {\n          player.current.dispose();\n\n          // Unfortunately, video.js heavily mutates the DOM in a way that React doesn't\n          // like, so we need to readd the removed DOM elements directly after dispose.\n          // More concretely, the node marked with `data-vjs-player` will be removed from the\n          // DOM. We are readding the cloned original video node parent as it was when React first rendered it,\n          // so it is once again synchronized with React.\n          if (\n            containerRef.current &&\n            videoNode.current?.parentNode &&\n            !containerRef.current.contains(videoNode.current.parentNode)\n          ) {\n            containerRef.current.appendChild(originalVideoNodeParent);\n            videoNode.current =\n              originalVideoNodeParent.firstChild as HTMLVideoElement;\n          }\n\n          player.current = null;\n          onDispose();\n        }\n      };\n\n      // We'll use the serialized videoJsOptions object as a dependency object\n    }, [useDeepCompareMemoize(videoJsOptions)]);\n\n    return (\n      // TODO: can we get by withour introducing an extra div?\n      <div ref={containerRef}>\n        <div data-vjs-player>\n          <video\n            ref={videoNode}\n            className={`video-js ${classNames}`}\n            {...props}\n          >\n            {children}\n          </video>\n        </div>\n      </div>\n    );\n  }\n);\n\nVideoJsWrapper.displayName = \"VideoJsWrapper\";\n\ntype VideoProps = {\n  children?: React.ReactNode;\n} & Partial<HTMLProps<HTMLVideoElement>>;\n\ntype VideoType = (props: VideoProps) => JSX.Element;\n\nexport const useVideoJS = (\n  videoJsOptions: VideoJsPlayerOptions,\n  classNames = \"\"\n): {\n  Video: VideoType;\n  ready: boolean;\n  player: VideoJsPlayer | null;\n} => {\n  const [ready, setReady] = useState(false);\n\n  // player will contain the video.js player object, once it is ready.\n  const player = useRef<VideoJsPlayer>(null);\n  const Video = useCallback(\n    ({ children, ...props }: VideoProps) => (\n      <VideoJsWrapper\n        videoJsOptions={videoJsOptions}\n        classNames={classNames}\n        onReady={(): void => setReady(true)}\n        onDispose={(): void => setReady(false)}\n        {...props}\n        ref={player}\n      >\n        {children}\n      </VideoJsWrapper>\n    ),\n    [useDeepCompareMemoize(videoJsOptions), classNames]\n  );\n\n  return { Video, ready, player: player.current };\n};\n"],"names":["React","dequal","forwardRef","cloneDeep","useRef","useLayoutEffect","videojs","useState","useCallback"],"mappings":";;;;;;;;AAeA,iCAAkC,OAAa;AACvC,UAAA,MAAMA,eAAAA,QAAM,OAAU,KAAK;AAC3B,UAAA,YAAYA,eAAAA,QAAM,OAAe,CAAC;AAExC,QAAI,CAACC,OAAAA,OAAO,OAAO,IAAI,OAAO,GAAG;AAC/B,UAAI,UAAU;AACd,gBAAU,WAAW;AAAA,IACvB;AAEO,WAAAD,eAAA,QAAM,QAAQ,MAAM,IAAI,SAAS,CAAC,UAAU,OAAO,CAAC;AAAA,EAC7D;AAKA,QAAM,iBAAiBE,MAUrB,WAAA,CACE,EAAE,UAAU,gBAAgB,SAAS,WAAW,eAAe,SAC/D,cACG;AACH,UAAM,SAAS;AAGT,UAAA,uBAAuBC,2BAAU,cAAc;AAC/C,UAAA,YAAYC,aAAgC,IAAI;AAChD,UAAA,eAAeA,aAA8B,IAAI;AAEvDC,UAAAA,gBAAgB,MAAM;;AAChB,UAAA,CAAC,iBAAU,YAAV,mBAAmB;AAAY;AAKpC,YAAM,0BACJ,UAAU,QAAQ,WAAW,UAAU,IAAI;AAEzC,UAAA,CAAC,OAAO,SAAS;AACnB,eAAO,UAAUC,iBAAA,QAAQ,UAAU,SAAS,oBAAoB;AACzD,eAAA,QAAQ,MAAM,MAAM;AACjB;QAAA,CACT;AAAA,MACH;AAEA,aAAO,MAAY;;AAIjB,YAAI,OAAO,SAAS;AAClB,iBAAO,QAAQ;AAOf,cACE,aAAa,WACb,kBAAU,YAAV,oBAAmB,eACnB,CAAC,aAAa,QAAQ,SAAS,UAAU,QAAQ,UAAU,GAC3D;AACa,yBAAA,QAAQ,YAAY,uBAAuB;AACxD,sBAAU,UACR,wBAAwB;AAAA,UAC5B;AAEA,iBAAO,UAAU;AACP;QACZ;AAAA,MAAA;AAAA,IAID,GAAA,CAAC,sBAAsB,cAAc,CAAC,CAAC;AAE1C,WAEGN,+BAAA,QAAA,cAAA,OAAA;AAAA,MAAI,KAAK;AAAA,IAAA,GACPA,+BAAA,QAAA,cAAA,OAAA;AAAA,MAAI,mBAAe;AAAA,IAAA,GACjBA,+BAAA,QAAA,cAAA,SAAA;AAAA,MACC,KAAK;AAAA,MACL,WAAW,YAAY;AAAA,MACtB,GAAG;AAAA,IAAA,GAEH,QACH,CACF,CACF;AAAA,EAEJ,CACF;AAEA,iBAAe,cAAc;AAQhB,QAAA,aAAa,CACxB,gBACA,aAAa,OAKV;AACH,UAAM,CAAC,OAAO,YAAYO,MAAA,SAAS,KAAK;AAGlC,UAAA,SAASH,aAAsB,IAAI;AACzC,UAAM,QAAQI,kBACZ,CAAC,EAAE,aAAa,YACbR,+BAAAA,QAAA,cAAA,gBAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,SAAS,MAAY,SAAS,IAAI;AAAA,MAClC,WAAW,MAAY,SAAS,KAAK;AAAA,MACpC,GAAG;AAAA,MACJ,KAAK;AAAA,IAAA,GAEJ,QACH,GAEF,CAAC,sBAAsB,cAAc,GAAG,UAAU,CACpD;AAEA,WAAO,EAAE,OAAO,OAAO,QAAQ,OAAO,QAAQ;AAAA,EAChD;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-hook-videojs",
-  "version": "2.1.0-beta.2",
+  "version": "3.0.2",
   "description": "A simple react hook to easily integrate video.js with React",
   "author": "jimmycallin",
   "license": "MIT",
@@ -9,52 +9,50 @@
   "main": "dist/react-hook-videojs.umd.js",
   "module": "dist/react-hook-videojs.es.js",
   "source": "src/index.tsx",
+  "engineStrict": false,
   "engines": {
-    "node": ">=12"
+    "node": ">=16"
   },
   "scripts": {
     "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 .",
+    "test": "npm run test:vitest",
+    "test:vitest": "vitest run",
     "format": "prettier --write .",
     "prepare": "npm run clean && npm run build",
-    "prepublishOnly": "npm run test"
+    "prepublishOnly": "npm run test",
+    "dev": "vite build --watch"
   },
   "peerDependencies": {
-    "react": "^16.8.0, ^17.0.0",
+    "react": ">=16.8.0 < 19",
+    "react-dom": ">=16.8.0 < 19",
     "video.js": "^7.0.0"
   },
   "devDependencies": {
-    "@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",
+    "@testing-library/react": "^13.3.0",
+    "@types/lodash.clonedeep": "^4.5.7",
     "@types/video.js": "^7.3.42",
-    "@typescript-eslint/eslint-plugin": "^5.30.6",
-    "@typescript-eslint/parser": "^5.30.6",
+    "@typescript-eslint/eslint-plugin": "^5.32.0",
+    "@typescript-eslint/parser": "^5.31.0",
     "@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",
+    "eslint": "^8.20.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-react": "^7.30.1",
+    "jsdom": "^20.0.0",
+    "prettier": "^2.7.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "rimraf": "^3.0.2",
-    "ts-jest": "^28.0.5",
     "typescript": "^4.7.4",
-    "video.js": "^7.13.3",
-    "vite": "^2.4.4"
+    "video.js": "^7.20.1",
+    "vite": "^3.0.4",
+    "vitest": "^0.20.2"
   },
   "files": [
     "dist"
-  ]
+  ],
+  "dependencies": {
+    "dequal": "^2.0.3",
+    "lodash.clonedeep": "^4.5.0"
+  }
 }

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2018 Jimmy Callin
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.

package/README.md

@@ -1,77 +0,0 @@
-# react-hook-videojs
-
-> A simple react hook to easily integrate video.js with React
-
-[![NPM](https://img.shields.io/npm/v/react-hook-videojs.svg)](https://www.npmjs.com/package/react-hook-videojs)
-
-# react-hook-videojs
-
-Due to how video.js mutates the DOM, integrating video.js with React can be a bit tricky. Especially if you want to support video.js component updates and correctly dispose of any old player.
-
-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 "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 className = "my-class";
-  const { Video, player, ready } = useVideoJS(
-    { sources: [{ src: videoUrl }] },
-    className // optional
-  );
-  if (ready) {
-    // Do something with the video.js player object.
-  }
-  return (
-    <div className="App">
-      <Video />
-    </div>
-  );
-};
-```
-
-`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_