react-hook-videojs 2.0.1 → 3.0.0-rc.1

package/dist/index.d.ts

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

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

@@ -0,0 +1,70 @@
+import React, { forwardRef, useRef, useLayoutEffect, useState, useCallback } from "react";
+import videojs from "video.js";
+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 containerRef = useRef(null);
+  useLayoutEffect(() => {
+    var _a;
+    if (!((_a = videoNode.current) == null ? void 0 : _a.parentNode))
+      return;
+    const originalVideoNodeParent = videoNode.current.parentNode.cloneNode(true);
+    if (!player.current) {
+      player.current = videojs(videoNode.current, videoJsOptionsCloned);
+      player.current.ready(() => {
+        onReady();
+      });
+    }
+    return () => {
+      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();
+      }
+    };
+  }, [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
+};
+//# 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  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

@@ -0,0 +1,74 @@
+(function(global, factory) {
+  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";
+  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]);
+  }
+  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 containerRef = React.useRef(null);
+    React.useLayoutEffect(() => {
+      var _a;
+      if (!((_a = videoNode.current) == null ? void 0 : _a.parentNode))
+        return;
+      const originalVideoNodeParent = videoNode.current.parentNode.cloneNode(true);
+      if (!player.current) {
+        player.current = videojs__default.default(videoNode.current, videoJsOptionsCloned);
+        player.current.ready(() => {
+          onReady();
+        });
+      }
+      return () => {
+        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();
+        }
+      };
+    }, [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.defineProperties(exports2, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "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  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,53 +1,57 @@
 {
   "name": "react-hook-videojs",
-  "version": "2.0.1",
+  "version": "3.0.0-rc.1",
   "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.jsx",
+  "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": ">=12"
+    "node": ">=18"
   },
   "scripts": {
-    "build": "microbundle-crl --no-compress --format modern,cjs",
-    "start": "microbundle-crl watch --no-compress --format modern,cjs",
-    "test": "npm run test:lint && npm run test:jest",
-    "test:jest": "jest",
-    "test:lint": "eslint --ext .js --ext .jsx ."
+    "clean": "rimraf dist .tmp",
+    "build": "vite build && tsc --project tsconfig.types.json",
+    "test": "npm run test:vitest",
+    "test:vitest": "vitest run",
+    "format": "prettier --write .",
+    "prepare": "npm run clean && npm run build",
+    "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/preset-env": "^7.14.7",
-    "@babel/preset-react": "^7.14.5",
-    "@testing-library/react": "^12.0.0",
-    "babel-jest": "^27.0.6",
-    "eslint": "^7.31.0",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-jest": "^24.3.6",
-    "eslint-plugin-react": "^7.24.0",
-    "jest": "^27.0.6",
-    "microbundle-crl": "^0.13.10",
-    "npm-run-all": "^4.1.5",
-    "prettier": "^2.3.2",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "video.js": "^7.13.3"
+    "@testing-library/react": "^13.3.0",
+    "@types/lodash.clonedeep": "^4.5.7",
+    "@types/video.js": "^7.3.42",
+    "@typescript-eslint/eslint-plugin": "^5.30.7",
+    "@typescript-eslint/parser": "^5.30.7",
+    "@vitejs/plugin-react-refresh": "^1.3.6",
+    "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",
+    "typescript": "^4.7.4",
+    "video.js": "^7.20.1",
+    "vite": "^3.0.2",
+    "vitest": "^0.18.1"
   },
   "files": [
     "dist"
   ],
-  "dependencies": {},
-  "jest": {
-    "testEnvironment": "jsdom",
-    "moduleNameMapper": {
-      "\\.(css|less|sass|scss)$": "<rootDir>/__mocks__/styleMock.js"
-    }
+  "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,31 +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:
-
-```
-import React from "react";
-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 }] });
-  if (ready) {
-      // Do something with the video.js player object.
-  }
-  return (
-    <div className="App">
-      <Video />
-    </div>
-  );
-};
-```
-
-`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.

package/dist/index.js

@@ -1,37 +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');
-
-const useVideoJS = videoJsOptions => {
-  const videoNode = React.useRef(null);
-  const [ready, setReady] = React.useState(false);
-  const changedKey = JSON.stringify(videoJsOptions);
-  const player = React.useRef(null);
-  React.useEffect(() => {
-    player.current = videojs(videoNode.current, videoJsOptions);
-    player.current.ready(() => {
-      setReady(true);
-    });
-    return () => {
-      player.current.dispose();
-    };
-  }, [changedKey]);
-  const Video = React.useCallback(() => /*#__PURE__*/React__default.createElement("div", {
-    "data-vjs-player": true,
-    key: changedKey
-  }, /*#__PURE__*/React__default.createElement("video", {
-    ref: videoNode,
-    className: "video-js"
-  })), [changedKey]);
-  return {
-    Video,
-    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.jsx"],"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","ready","setReady","useState","changedKey","JSON","stringify","player","useEffect","current","videojs","dispose","Video","useCallback","React"],"mappings":";;;;;;;MAIaA,UAAU,GAAIC,cAAD,IAAoB;AAC5C,QAAMC,SAAS,GAAGC,YAAM,CAAC,IAAD,CAAxB;AACA,QAAM,CAACC,KAAD,EAAQC,QAAR,IAAoBC,cAAQ,CAAC,KAAD,CAAlC;AACA,QAAMC,UAAU,GAAGC,IAAI,CAACC,SAAL,CAAeR,cAAf,CAAnB;AACA,QAAMS,MAAM,GAAGP,YAAM,CAAC,IAAD,CAArB;AACAQ,EAAAA,eAAS,CAAC,MAAM;AACdD,IAAAA,MAAM,CAACE,OAAP,GAAiBC,OAAO,CAACX,SAAS,CAACU,OAAX,EAAoBX,cAApB,CAAxB;AACAS,IAAAA,MAAM,CAACE,OAAP,CAAeR,KAAf,CAAqB,MAAM;AACzBC,MAAAA,QAAQ,CAAC,IAAD,CAAR;AACD,KAFD;AAGA,WAAO,MAAM;AACXK,MAAAA,MAAM,CAACE,OAAP,CAAeE,OAAf;AACD,KAFD;AAGD,GARQ,EAQN,CAACP,UAAD,CARM,CAAT;AAUA,QAAMQ,KAAK,GAAGC,iBAAW,CACvB,mBACEC;AAAK,2BAAL;AAAqB,IAAA,GAAG,EAAEV;AAA1B,kBACEU;AAAO,IAAA,GAAG,EAAEf,SAAZ;AAAuB,IAAA,SAAS,EAAC;AAAjC,IADF,CAFqB,EAMvB,CAACK,UAAD,CANuB,CAAzB;AAQA,SAAO;AAAEQ,IAAAA,KAAF;AAASX,IAAAA,KAAT;AAAgBM,IAAAA,MAAM,EAAEA,MAAM,CAACE;AAA/B,GAAP;AACD;;;;"}

package/dist/index.modern.js

@@ -1,34 +0,0 @@
-import React, { useRef, useState, useEffect, useCallback } from 'react';
-import videojs from 'video.js';
-import 'video.js/dist/video-js.css';
-
-const useVideoJS = videoJsOptions => {
-  const videoNode = useRef(null);
-  const [ready, setReady] = useState(false);
-  const changedKey = JSON.stringify(videoJsOptions);
-  const player = useRef(null);
-  useEffect(() => {
-    player.current = videojs(videoNode.current, videoJsOptions);
-    player.current.ready(() => {
-      setReady(true);
-    });
-    return () => {
-      player.current.dispose();
-    };
-  }, [changedKey]);
-  const Video = useCallback(() => /*#__PURE__*/React.createElement("div", {
-    "data-vjs-player": true,
-    key: changedKey
-  }, /*#__PURE__*/React.createElement("video", {
-    ref: videoNode,
-    className: "video-js"
-  })), [changedKey]);
-  return {
-    Video,
-    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.jsx"],"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","ready","setReady","useState","changedKey","JSON","stringify","player","useEffect","current","videojs","dispose","Video","useCallback"],"mappings":";;;;MAIaA,UAAU,GAAIC,cAAD,IAAoB;AAC5C,QAAMC,SAAS,GAAGC,MAAM,CAAC,IAAD,CAAxB;AACA,QAAM,CAACC,KAAD,EAAQC,QAAR,IAAoBC,QAAQ,CAAC,KAAD,CAAlC;AACA,QAAMC,UAAU,GAAGC,IAAI,CAACC,SAAL,CAAeR,cAAf,CAAnB;AACA,QAAMS,MAAM,GAAGP,MAAM,CAAC,IAAD,CAArB;AACAQ,EAAAA,SAAS,CAAC,MAAM;AACdD,IAAAA,MAAM,CAACE,OAAP,GAAiBC,OAAO,CAACX,SAAS,CAACU,OAAX,EAAoBX,cAApB,CAAxB;AACAS,IAAAA,MAAM,CAACE,OAAP,CAAeR,KAAf,CAAqB,MAAM;AACzBC,MAAAA,QAAQ,CAAC,IAAD,CAAR;AACD,KAFD;AAGA,WAAO,MAAM;AACXK,MAAAA,MAAM,CAACE,OAAP,CAAeE,OAAf;AACD,KAFD;AAGD,GARQ,EAQN,CAACP,UAAD,CARM,CAAT;AAUA,QAAMQ,KAAK,GAAGC,WAAW,CACvB,mBACE;AAAK,2BAAL;AAAqB,IAAA,GAAG,EAAET;AAA1B,kBACE;AAAO,IAAA,GAAG,EAAEL,SAAZ;AAAuB,IAAA,SAAS,EAAC;AAAjC,IADF,CAFqB,EAMvB,CAACK,UAAD,CANuB,CAAzB;AAQA,SAAO;AAAEQ,IAAAA,KAAF;AAASX,IAAAA,KAAT;AAAgBM,IAAAA,MAAM,EAAEA,MAAM,CAACE;AAA/B,GAAP;AACD;;;;"}