react-hook-videojs 3.0.2 → 4.0.0-beta.1

package/LICENSE

@@ -0,0 +1,21 @@
+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/dist/deepClone.d.ts

@@ -0,0 +1,2 @@
+declare const deepClone: <T>(value: T) => T;
+export default deepClone;

package/dist/index.d.ts

@@ -1,11 +1,81 @@
-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;
+import type { ComponentPropsWithRef, MutableRefObject, Ref } from "react";
+type VideoJsModule = (typeof import("video.js"))["default"];
+type VideoJsPlayer = ReturnType<VideoJsModule>;
+type VideoJsPlayerOptions = Parameters<VideoJsModule>[1];
+export declare const __private__: {
+    setVideoNodeRef: (videoNode: MutableRefObject<HTMLVideoElement | null>, videoRef: Ref<HTMLVideoElement> | undefined, value: HTMLVideoElement | null) => void;
+    getVideoClassName: (classNames: string, className?: string) => string;
+    restoreDisposedVideoNode: (containerNode: HTMLDivElement, originalVideoNode: HTMLVideoElement | null, videoNode: MutableRefObject<HTMLVideoElement | null>, videoRef?: Ref<HTMLVideoElement>) => void;
+    shouldSkipReadyCallback: (disposed: boolean, playerRef: MutableRefObject<VideoJsPlayer | null>, initializedPlayer: VideoJsPlayer) => boolean;
+    callOnReadyForCurrentPlayer: (disposed: boolean, playerRef: MutableRefObject<VideoJsPlayer | null>, initializedPlayer: VideoJsPlayer, onReady: (player: VideoJsPlayer) => void) => void;
+    getCurrentVideoNode: (containerNode: HTMLDivElement, videoNode: MutableRefObject<HTMLVideoElement | null>) => HTMLVideoElement | null;
+};
+type VideoElementProps = ComponentPropsWithRef<"video">;
+/** All standard `<video>` element attributes and the `ref` prop are accepted. */
+export type VideoProps = VideoElementProps;
+/**
+ * The `Video` component returned by {@link useVideoJS}.
+ *
+ * Renders a Video.js-managed `<video>` element. Accepts any prop that a
+ * native `<video>` element accepts (including `ref`, `className`, `muted`,
+ * `autoPlay`, etc.) as well as child elements such as `<track>` nodes.
+ *
+ * @example
+ * ```tsx
+ * const { Video } = useVideoJS(options);
+ * return (
+ *   <Video className="my-player" muted>
+ *     <track kind="captions" src="/captions.vtt" srcLang="en" default />
+ *   </Video>
+ * );
+ * ```
+ */
+export type VideoComponent = (props: VideoProps) => React.JSX.Element;
+/**
+ * Integrates Video.js with React.
+ *
+ * Initializes a Video.js player when the returned `Video` component mounts,
+ * disposes it on unmount or when `videoJsOptions` changes, and reinitializes
+ * with the new configuration — all while handling React 19 Strict Mode's
+ * double-invoke lifecycle correctly.
+ *
+ * @param videoJsOptions - Video.js player options. **Must be memoized** (e.g.
+ *   with `React.useMemo`) so the player only reinitializes when options values
+ *   actually change, not on every render.
+ * @param classNames - Optional CSS class name(s) appended to the `<video>`
+ *   node in addition to the required `"video-js"` class.
+ * @returns An object with three fields:
+ *   - `Video` — React component to render in JSX. Accepts all `<video>` props
+ *     and children (e.g. `<track>` elements).
+ *   - `ready` — `true` once the player has fired its `"ready"` event.
+ *   - `player` — The `VideoJsPlayer` instance when ready, `null` otherwise.
+ *     Use this to call Video.js API methods imperatively (e.g. in a
+ *     `useEffect` that depends on `player`).
+ *
+ * @example
+ * ```tsx
+ * import React, { useMemo, useEffect } from "react";
+ * import "video.js/dist/video-js.css";
+ * import { useVideoJS } from "react-hook-videojs";
+ *
+ * const MyPlayer = ({ src }: { src: string }) => {
+ *   const options = useMemo(() => ({ sources: [{ src }] }), [src]);
+ *   const { Video, ready, player } = useVideoJS(options);
+ *
+ *   // Attach event listeners imperatively once the player is ready
+ *   useEffect(() => {
+ *     if (!player) return;
+ *     const onPlay = () => console.log("playing");
+ *     player.on("play", onPlay);
+ *     return () => { player.off("play", onPlay); };
+ *   }, [player]);
+ *
+ *   return <Video />;
+ * };
+ * ```
+ */
 export declare const useVideoJS: (videoJsOptions: VideoJsPlayerOptions, classNames?: string) => {
-    Video: VideoType;
+    Video: VideoComponent;
     ready: boolean;
     player: VideoJsPlayer | null;
 };

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

@@ -1,70 +1,545 @@
-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]);
+import require$$0, { useState, useRef, useCallback, useMemo, useEffect } from "react";
+import videojsModule from "video.js";
+var jsxRuntime = { exports: {} };
+var reactJsxRuntime_production = {};
+var hasRequiredReactJsxRuntime_production;
+function requireReactJsxRuntime_production() {
+  if (hasRequiredReactJsxRuntime_production) return reactJsxRuntime_production;
+  hasRequiredReactJsxRuntime_production = 1;
+  var REACT_ELEMENT_TYPE = /* @__PURE__ */ Symbol.for("react.transitional.element"), REACT_FRAGMENT_TYPE = /* @__PURE__ */ Symbol.for("react.fragment");
+  function jsxProd(type, config, maybeKey) {
+    var key = null;
+    void 0 !== maybeKey && (key = "" + maybeKey);
+    void 0 !== config.key && (key = "" + config.key);
+    if ("key" in config) {
+      maybeKey = {};
+      for (var propName in config)
+        "key" !== propName && (maybeKey[propName] = config[propName]);
+    } else maybeKey = config;
+    config = maybeKey.ref;
+    return {
+      $$typeof: REACT_ELEMENT_TYPE,
+      type,
+      key,
+      ref: void 0 !== config ? config : null,
+      props: maybeKey
+    };
+  }
+  reactJsxRuntime_production.Fragment = REACT_FRAGMENT_TYPE;
+  reactJsxRuntime_production.jsx = jsxProd;
+  reactJsxRuntime_production.jsxs = jsxProd;
+  return reactJsxRuntime_production;
 }
-const VideoJsWrapper = forwardRef(({ children, videoJsOptions, onReady, onDispose, classNames, ...props }, playerRef) => {
-  const player = playerRef;
-  const videoJsOptionsCloned = cloneDeep(videoJsOptions);
+var reactJsxRuntime_development = {};
+var hasRequiredReactJsxRuntime_development;
+function requireReactJsxRuntime_development() {
+  if (hasRequiredReactJsxRuntime_development) return reactJsxRuntime_development;
+  hasRequiredReactJsxRuntime_development = 1;
+  "production" !== process.env.NODE_ENV && (function() {
+    function getComponentNameFromType(type) {
+      if (null == type) return null;
+      if ("function" === typeof type)
+        return type.$$typeof === REACT_CLIENT_REFERENCE ? null : type.displayName || type.name || null;
+      if ("string" === typeof type) return type;
+      switch (type) {
+        case REACT_FRAGMENT_TYPE:
+          return "Fragment";
+        case REACT_PROFILER_TYPE:
+          return "Profiler";
+        case REACT_STRICT_MODE_TYPE:
+          return "StrictMode";
+        case REACT_SUSPENSE_TYPE:
+          return "Suspense";
+        case REACT_SUSPENSE_LIST_TYPE:
+          return "SuspenseList";
+        case REACT_ACTIVITY_TYPE:
+          return "Activity";
+      }
+      if ("object" === typeof type)
+        switch ("number" === typeof type.tag && console.error(
+          "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
+        ), type.$$typeof) {
+          case REACT_PORTAL_TYPE:
+            return "Portal";
+          case REACT_CONTEXT_TYPE:
+            return type.displayName || "Context";
+          case REACT_CONSUMER_TYPE:
+            return (type._context.displayName || "Context") + ".Consumer";
+          case REACT_FORWARD_REF_TYPE:
+            var innerType = type.render;
+            type = type.displayName;
+            type || (type = innerType.displayName || innerType.name || "", type = "" !== type ? "ForwardRef(" + type + ")" : "ForwardRef");
+            return type;
+          case REACT_MEMO_TYPE:
+            return innerType = type.displayName || null, null !== innerType ? innerType : getComponentNameFromType(type.type) || "Memo";
+          case REACT_LAZY_TYPE:
+            innerType = type._payload;
+            type = type._init;
+            try {
+              return getComponentNameFromType(type(innerType));
+            } catch (x) {
+            }
+        }
+      return null;
+    }
+    function testStringCoercion(value) {
+      return "" + value;
+    }
+    function checkKeyStringCoercion(value) {
+      try {
+        testStringCoercion(value);
+        var JSCompiler_inline_result = false;
+      } catch (e) {
+        JSCompiler_inline_result = true;
+      }
+      if (JSCompiler_inline_result) {
+        JSCompiler_inline_result = console;
+        var JSCompiler_temp_const = JSCompiler_inline_result.error;
+        var JSCompiler_inline_result$jscomp$0 = "function" === typeof Symbol && Symbol.toStringTag && value[Symbol.toStringTag] || value.constructor.name || "Object";
+        JSCompiler_temp_const.call(
+          JSCompiler_inline_result,
+          "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
+          JSCompiler_inline_result$jscomp$0
+        );
+        return testStringCoercion(value);
+      }
+    }
+    function getTaskName(type) {
+      if (type === REACT_FRAGMENT_TYPE) return "<>";
+      if ("object" === typeof type && null !== type && type.$$typeof === REACT_LAZY_TYPE)
+        return "<...>";
+      try {
+        var name = getComponentNameFromType(type);
+        return name ? "<" + name + ">" : "<...>";
+      } catch (x) {
+        return "<...>";
+      }
+    }
+    function getOwner() {
+      var dispatcher = ReactSharedInternals.A;
+      return null === dispatcher ? null : dispatcher.getOwner();
+    }
+    function UnknownOwner() {
+      return Error("react-stack-top-frame");
+    }
+    function hasValidKey(config) {
+      if (hasOwnProperty.call(config, "key")) {
+        var getter = Object.getOwnPropertyDescriptor(config, "key").get;
+        if (getter && getter.isReactWarning) return false;
+      }
+      return void 0 !== config.key;
+    }
+    function defineKeyPropWarningGetter(props, displayName) {
+      function warnAboutAccessingKey() {
+        specialPropKeyWarningShown || (specialPropKeyWarningShown = true, console.error(
+          "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
+          displayName
+        ));
+      }
+      warnAboutAccessingKey.isReactWarning = true;
+      Object.defineProperty(props, "key", {
+        get: warnAboutAccessingKey,
+        configurable: true
+      });
+    }
+    function elementRefGetterWithDeprecationWarning() {
+      var componentName = getComponentNameFromType(this.type);
+      didWarnAboutElementRef[componentName] || (didWarnAboutElementRef[componentName] = true, console.error(
+        "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
+      ));
+      componentName = this.props.ref;
+      return void 0 !== componentName ? componentName : null;
+    }
+    function ReactElement(type, key, props, owner, debugStack, debugTask) {
+      var refProp = props.ref;
+      type = {
+        $$typeof: REACT_ELEMENT_TYPE,
+        type,
+        key,
+        props,
+        _owner: owner
+      };
+      null !== (void 0 !== refProp ? refProp : null) ? Object.defineProperty(type, "ref", {
+        enumerable: false,
+        get: elementRefGetterWithDeprecationWarning
+      }) : Object.defineProperty(type, "ref", { enumerable: false, value: null });
+      type._store = {};
+      Object.defineProperty(type._store, "validated", {
+        configurable: false,
+        enumerable: false,
+        writable: true,
+        value: 0
+      });
+      Object.defineProperty(type, "_debugInfo", {
+        configurable: false,
+        enumerable: false,
+        writable: true,
+        value: null
+      });
+      Object.defineProperty(type, "_debugStack", {
+        configurable: false,
+        enumerable: false,
+        writable: true,
+        value: debugStack
+      });
+      Object.defineProperty(type, "_debugTask", {
+        configurable: false,
+        enumerable: false,
+        writable: true,
+        value: debugTask
+      });
+      Object.freeze && (Object.freeze(type.props), Object.freeze(type));
+      return type;
+    }
+    function jsxDEVImpl(type, config, maybeKey, isStaticChildren, debugStack, debugTask) {
+      var children = config.children;
+      if (void 0 !== children)
+        if (isStaticChildren)
+          if (isArrayImpl(children)) {
+            for (isStaticChildren = 0; isStaticChildren < children.length; isStaticChildren++)
+              validateChildKeys(children[isStaticChildren]);
+            Object.freeze && Object.freeze(children);
+          } else
+            console.error(
+              "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
+            );
+        else validateChildKeys(children);
+      if (hasOwnProperty.call(config, "key")) {
+        children = getComponentNameFromType(type);
+        var keys = Object.keys(config).filter(function(k) {
+          return "key" !== k;
+        });
+        isStaticChildren = 0 < keys.length ? "{key: someKey, " + keys.join(": ..., ") + ": ...}" : "{key: someKey}";
+        didWarnAboutKeySpread[children + isStaticChildren] || (keys = 0 < keys.length ? "{" + keys.join(": ..., ") + ": ...}" : "{}", console.error(
+          'A props object containing a "key" prop is being spread into JSX:\n  let props = %s;\n  <%s {...props} />\nReact keys must be passed directly to JSX without using spread:\n  let props = %s;\n  <%s key={someKey} {...props} />',
+          isStaticChildren,
+          children,
+          keys,
+          children
+        ), didWarnAboutKeySpread[children + isStaticChildren] = true);
+      }
+      children = null;
+      void 0 !== maybeKey && (checkKeyStringCoercion(maybeKey), children = "" + maybeKey);
+      hasValidKey(config) && (checkKeyStringCoercion(config.key), children = "" + config.key);
+      if ("key" in config) {
+        maybeKey = {};
+        for (var propName in config)
+          "key" !== propName && (maybeKey[propName] = config[propName]);
+      } else maybeKey = config;
+      children && defineKeyPropWarningGetter(
+        maybeKey,
+        "function" === typeof type ? type.displayName || type.name || "Unknown" : type
+      );
+      return ReactElement(
+        type,
+        children,
+        maybeKey,
+        getOwner(),
+        debugStack,
+        debugTask
+      );
+    }
+    function validateChildKeys(node) {
+      isValidElement(node) ? node._store && (node._store.validated = 1) : "object" === typeof node && null !== node && node.$$typeof === REACT_LAZY_TYPE && ("fulfilled" === node._payload.status ? isValidElement(node._payload.value) && node._payload.value._store && (node._payload.value._store.validated = 1) : node._store && (node._store.validated = 1));
+    }
+    function isValidElement(object) {
+      return "object" === typeof object && null !== object && object.$$typeof === REACT_ELEMENT_TYPE;
+    }
+    var React = require$$0, REACT_ELEMENT_TYPE = /* @__PURE__ */ Symbol.for("react.transitional.element"), REACT_PORTAL_TYPE = /* @__PURE__ */ Symbol.for("react.portal"), REACT_FRAGMENT_TYPE = /* @__PURE__ */ Symbol.for("react.fragment"), REACT_STRICT_MODE_TYPE = /* @__PURE__ */ Symbol.for("react.strict_mode"), REACT_PROFILER_TYPE = /* @__PURE__ */ Symbol.for("react.profiler"), REACT_CONSUMER_TYPE = /* @__PURE__ */ Symbol.for("react.consumer"), REACT_CONTEXT_TYPE = /* @__PURE__ */ Symbol.for("react.context"), REACT_FORWARD_REF_TYPE = /* @__PURE__ */ Symbol.for("react.forward_ref"), REACT_SUSPENSE_TYPE = /* @__PURE__ */ Symbol.for("react.suspense"), REACT_SUSPENSE_LIST_TYPE = /* @__PURE__ */ Symbol.for("react.suspense_list"), REACT_MEMO_TYPE = /* @__PURE__ */ Symbol.for("react.memo"), REACT_LAZY_TYPE = /* @__PURE__ */ Symbol.for("react.lazy"), REACT_ACTIVITY_TYPE = /* @__PURE__ */ Symbol.for("react.activity"), REACT_CLIENT_REFERENCE = /* @__PURE__ */ Symbol.for("react.client.reference"), ReactSharedInternals = React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, hasOwnProperty = Object.prototype.hasOwnProperty, isArrayImpl = Array.isArray, createTask = console.createTask ? console.createTask : function() {
+      return null;
+    };
+    React = {
+      react_stack_bottom_frame: function(callStackForError) {
+        return callStackForError();
+      }
+    };
+    var specialPropKeyWarningShown;
+    var didWarnAboutElementRef = {};
+    var unknownOwnerDebugStack = React.react_stack_bottom_frame.bind(
+      React,
+      UnknownOwner
+    )();
+    var unknownOwnerDebugTask = createTask(getTaskName(UnknownOwner));
+    var didWarnAboutKeySpread = {};
+    reactJsxRuntime_development.Fragment = REACT_FRAGMENT_TYPE;
+    reactJsxRuntime_development.jsx = function(type, config, maybeKey) {
+      var trackActualOwner = 1e4 > ReactSharedInternals.recentlyCreatedOwnerStacks++;
+      return jsxDEVImpl(
+        type,
+        config,
+        maybeKey,
+        false,
+        trackActualOwner ? Error("react-stack-top-frame") : unknownOwnerDebugStack,
+        trackActualOwner ? createTask(getTaskName(type)) : unknownOwnerDebugTask
+      );
+    };
+    reactJsxRuntime_development.jsxs = function(type, config, maybeKey) {
+      var trackActualOwner = 1e4 > ReactSharedInternals.recentlyCreatedOwnerStacks++;
+      return jsxDEVImpl(
+        type,
+        config,
+        maybeKey,
+        true,
+        trackActualOwner ? Error("react-stack-top-frame") : unknownOwnerDebugStack,
+        trackActualOwner ? createTask(getTaskName(type)) : unknownOwnerDebugTask
+      );
+    };
+  })();
+  return reactJsxRuntime_development;
+}
+var hasRequiredJsxRuntime;
+function requireJsxRuntime() {
+  if (hasRequiredJsxRuntime) return jsxRuntime.exports;
+  hasRequiredJsxRuntime = 1;
+  if (process.env.NODE_ENV === "production") {
+    jsxRuntime.exports = requireReactJsxRuntime_production();
+  } else {
+    jsxRuntime.exports = requireReactJsxRuntime_development();
+  }
+  return jsxRuntime.exports;
+}
+var jsxRuntimeExports = requireJsxRuntime();
+const cloneWithDescriptor = (descriptor, cloneValue) => {
+  if (!("value" in descriptor)) {
+    return descriptor;
+  }
+  return {
+    ...descriptor,
+    value: cloneValue(descriptor.value)
+  };
+};
+const deepCloneInternal = (value, seen) => {
+  if (value === null || typeof value !== "object") {
+    return value;
+  }
+  if (typeof Node !== "undefined" && value instanceof Node) {
+    return value;
+  }
+  const cached = seen.get(value);
+  if (cached) {
+    return cached;
+  }
+  if (value instanceof Date) {
+    const clonedDate = new Date(value.getTime());
+    seen.set(value, clonedDate);
+    return clonedDate;
+  }
+  if (value instanceof RegExp) {
+    const clonedRegExp = new RegExp(value.source, value.flags);
+    clonedRegExp.lastIndex = value.lastIndex;
+    seen.set(value, clonedRegExp);
+    return clonedRegExp;
+  }
+  if (value instanceof ArrayBuffer) {
+    const clonedBuffer = value.slice(0);
+    seen.set(value, clonedBuffer);
+    return clonedBuffer;
+  }
+  if (ArrayBuffer.isView(value)) {
+    if (value instanceof DataView) {
+      const clonedBuffer2 = deepCloneInternal(value.buffer, seen);
+      const clonedDataView = new DataView(
+        clonedBuffer2,
+        value.byteOffset,
+        value.byteLength
+      );
+      seen.set(value, clonedDataView);
+      return clonedDataView;
+    }
+    const TypedArrayConstructor = value.constructor;
+    const clonedBuffer = deepCloneInternal(value.buffer, seen);
+    const length = value.byteLength / TypedArrayConstructor.BYTES_PER_ELEMENT;
+    const clonedTypedArray = new TypedArrayConstructor(
+      clonedBuffer,
+      value.byteOffset,
+      length
+    );
+    seen.set(value, clonedTypedArray);
+    return clonedTypedArray;
+  }
+  if (value instanceof Map) {
+    const clonedMap = /* @__PURE__ */ new Map();
+    seen.set(value, clonedMap);
+    for (const [key, mapValue] of value.entries()) {
+      clonedMap.set(
+        deepCloneInternal(key, seen),
+        deepCloneInternal(mapValue, seen)
+      );
+    }
+    return clonedMap;
+  }
+  if (value instanceof Set) {
+    const clonedSet = /* @__PURE__ */ new Set();
+    seen.set(value, clonedSet);
+    for (const setValue of value.values()) {
+      clonedSet.add(deepCloneInternal(setValue, seen));
+    }
+    return clonedSet;
+  }
+  const clonedObject = Array.isArray(value) ? (() => {
+    const clonedArray = [];
+    clonedArray.length = value.length;
+    return clonedArray;
+  })() : Object.create(Object.getPrototypeOf(value));
+  seen.set(value, clonedObject);
+  for (const key of Reflect.ownKeys(value)) {
+    if (Array.isArray(value) && key === "length") {
+      continue;
+    }
+    const descriptor = Object.getOwnPropertyDescriptor(value, key);
+    if (!descriptor) {
+      continue;
+    }
+    Object.defineProperty(
+      clonedObject,
+      key,
+      cloneWithDescriptor(
+        descriptor,
+        (input) => deepCloneInternal(input, seen)
+      )
+    );
+  }
+  return clonedObject;
+};
+const deepClone = (value) => deepCloneInternal(value, /* @__PURE__ */ new WeakMap());
+const videojs = videojsModule;
+const setVideoNodeRef = (videoNode, videoRef, value) => {
+  videoNode.current = value;
+  if (!videoRef) {
+    return;
+  }
+  if (typeof videoRef === "function") {
+    videoRef(value);
+    return;
+  }
+  videoRef.current = value;
+};
+const getVideoClassName = (classNames, className) => ["video-js", classNames, className].filter(Boolean).join(" ");
+const restoreDisposedVideoNode = (containerNode, originalVideoNode, videoNode, videoRef) => {
+  if (originalVideoNode && !containerNode.querySelector("video")) {
+    containerNode.appendChild(originalVideoNode);
+    setVideoNodeRef(
+      videoNode,
+      videoRef,
+      containerNode.querySelector("video")
+    );
+  }
+};
+const shouldSkipReadyCallback = (disposed, playerRef, initializedPlayer) => disposed || playerRef.current !== initializedPlayer;
+const getCurrentVideoNode = (containerNode, videoNode) => {
+  const connectedVideoNode = containerNode.querySelector(
+    "video"
+  );
+  return videoNode.current?.isConnected === true ? videoNode.current : connectedVideoNode;
+};
+const callOnReadyForCurrentPlayer = (disposed, playerRef, initializedPlayer, onReady) => {
+  if (shouldSkipReadyCallback(disposed, playerRef, initializedPlayer)) {
+    return;
+  }
+  onReady(initializedPlayer);
+};
+const __private__ = {
+  setVideoNodeRef,
+  getVideoClassName,
+  restoreDisposedVideoNode,
+  shouldSkipReadyCallback,
+  callOnReadyForCurrentPlayer,
+  getCurrentVideoNode
+};
+const VideoJsWrapper = ({
+  children,
+  videoJsOptions,
+  onReady,
+  onDispose,
+  classNames,
+  playerRef,
+  ref: videoRef,
+  className,
+  ...props
+}) => {
+  const videoJsOptionsCloned = useMemo(
+    () => deepClone(videoJsOptions),
+    [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();
-      });
+  useEffect(() => {
+    const containerNode = containerRef.current;
+    const currentVideoNode = getCurrentVideoNode(containerNode, videoNode);
+    if (!currentVideoNode || !currentVideoNode.isConnected) return;
+    if (videoNode.current !== currentVideoNode) {
+      setVideoNodeRef(videoNode, videoRef, currentVideoNode);
     }
+    const originalVideoNode = currentVideoNode.cloneNode(
+      true
+    );
+    let disposed = false;
+    const initializedPlayer = videojs(currentVideoNode, videoJsOptionsCloned);
+    playerRef.current = initializedPlayer;
+    initializedPlayer.ready(() => {
+      callOnReadyForCurrentPlayer(
+        disposed,
+        playerRef,
+        initializedPlayer,
+        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();
-      }
+      disposed = true;
+      initializedPlayer.dispose();
+      playerRef.current = null;
+      restoreDisposedVideoNode(
+        containerNode,
+        originalVideoNode,
+        videoNode,
+        videoRef
+      );
+      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";
+  }, [videoJsOptionsCloned, onReady, onDispose, playerRef, videoRef]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: containerRef, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "video",
+    {
+      ref: (value) => {
+        setVideoNodeRef(videoNode, videoRef, value);
+      },
+      className: getVideoClassName(classNames, className),
+      ...props,
+      children
+    }
+  ) });
+};
 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 };
+  const [player, setPlayer] = useState(null);
+  const playerRef = useRef(null);
+  const onReady = useCallback((playerInstance) => {
+    setReady(true);
+    setPlayer(playerInstance);
+  }, []);
+  const onDispose = useCallback(() => {
+    setReady(false);
+    setPlayer(null);
+  }, []);
+  const Video = useCallback(
+    ({ children, ...props }) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+      VideoJsWrapper,
+      {
+        videoJsOptions,
+        classNames,
+        onReady,
+        onDispose,
+        playerRef,
+        ...props,
+        children
+      }
+    ),
+    [videoJsOptions, classNames, onReady, onDispose]
+  );
+  return { Video, ready, player };
 };
 export {
+  __private__,
   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  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;"}
+{"version":3,"file":"react-hook-videojs.es.js","sources":["../../../node_modules/.pnpm/react@19.2.4/node_modules/react/cjs/react-jsx-runtime.production.js","../../../node_modules/.pnpm/react@19.2.4/node_modules/react/cjs/react-jsx-runtime.development.js","../../../node_modules/.pnpm/react@19.2.4/node_modules/react/jsx-runtime.js","../src/deepClone.ts","../src/index.tsx"],"sourcesContent":["/**\n * @license React\n * react-jsx-runtime.production.js\n *\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n\"use strict\";\nvar REACT_ELEMENT_TYPE = Symbol.for(\"react.transitional.element\"),\n  REACT_FRAGMENT_TYPE = Symbol.for(\"react.fragment\");\nfunction jsxProd(type, config, maybeKey) {\n  var key = null;\n  void 0 !== maybeKey && (key = \"\" + maybeKey);\n  void 0 !== config.key && (key = \"\" + config.key);\n  if (\"key\" in config) {\n    maybeKey = {};\n    for (var propName in config)\n      \"key\" !== propName && (maybeKey[propName] = config[propName]);\n  } else maybeKey = config;\n  config = maybeKey.ref;\n  return {\n    $$typeof: REACT_ELEMENT_TYPE,\n    type: type,\n    key: key,\n    ref: void 0 !== config ? config : null,\n    props: maybeKey\n  };\n}\nexports.Fragment = REACT_FRAGMENT_TYPE;\nexports.jsx = jsxProd;\nexports.jsxs = jsxProd;\n","/**\n * @license React\n * react-jsx-runtime.development.js\n *\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n\"use strict\";\n\"production\" !== process.env.NODE_ENV &&\n  (function () {\n    function getComponentNameFromType(type) {\n      if (null == type) return null;\n      if (\"function\" === typeof type)\n        return type.$$typeof === REACT_CLIENT_REFERENCE\n          ? null\n          : type.displayName || type.name || null;\n      if (\"string\" === typeof type) return type;\n      switch (type) {\n        case REACT_FRAGMENT_TYPE:\n          return \"Fragment\";\n        case REACT_PROFILER_TYPE:\n          return \"Profiler\";\n        case REACT_STRICT_MODE_TYPE:\n          return \"StrictMode\";\n        case REACT_SUSPENSE_TYPE:\n          return \"Suspense\";\n        case REACT_SUSPENSE_LIST_TYPE:\n          return \"SuspenseList\";\n        case REACT_ACTIVITY_TYPE:\n          return \"Activity\";\n      }\n      if (\"object\" === typeof type)\n        switch (\n          (\"number\" === typeof type.tag &&\n            console.error(\n              \"Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue.\"\n            ),\n          type.$$typeof)\n        ) {\n          case REACT_PORTAL_TYPE:\n            return \"Portal\";\n          case REACT_CONTEXT_TYPE:\n            return type.displayName || \"Context\";\n          case REACT_CONSUMER_TYPE:\n            return (type._context.displayName || \"Context\") + \".Consumer\";\n          case REACT_FORWARD_REF_TYPE:\n            var innerType = type.render;\n            type = type.displayName;\n            type ||\n              ((type = innerType.displayName || innerType.name || \"\"),\n              (type = \"\" !== type ? \"ForwardRef(\" + type + \")\" : \"ForwardRef\"));\n            return type;\n          case REACT_MEMO_TYPE:\n            return (\n              (innerType = type.displayName || null),\n              null !== innerType\n                ? innerType\n                : getComponentNameFromType(type.type) || \"Memo\"\n            );\n          case REACT_LAZY_TYPE:\n            innerType = type._payload;\n            type = type._init;\n            try {\n              return getComponentNameFromType(type(innerType));\n            } catch (x) {}\n        }\n      return null;\n    }\n    function testStringCoercion(value) {\n      return \"\" + value;\n    }\n    function checkKeyStringCoercion(value) {\n      try {\n        testStringCoercion(value);\n        var JSCompiler_inline_result = !1;\n      } catch (e) {\n        JSCompiler_inline_result = !0;\n      }\n      if (JSCompiler_inline_result) {\n        JSCompiler_inline_result = console;\n        var JSCompiler_temp_const = JSCompiler_inline_result.error;\n        var JSCompiler_inline_result$jscomp$0 =\n          (\"function\" === typeof Symbol &&\n            Symbol.toStringTag &&\n            value[Symbol.toStringTag]) ||\n          value.constructor.name ||\n          \"Object\";\n        JSCompiler_temp_const.call(\n          JSCompiler_inline_result,\n          \"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.\",\n          JSCompiler_inline_result$jscomp$0\n        );\n        return testStringCoercion(value);\n      }\n    }\n    function getTaskName(type) {\n      if (type === REACT_FRAGMENT_TYPE) return \"<>\";\n      if (\n        \"object\" === typeof type &&\n        null !== type &&\n        type.$$typeof === REACT_LAZY_TYPE\n      )\n        return \"<...>\";\n      try {\n        var name = getComponentNameFromType(type);\n        return name ? \"<\" + name + \">\" : \"<...>\";\n      } catch (x) {\n        return \"<...>\";\n      }\n    }\n    function getOwner() {\n      var dispatcher = ReactSharedInternals.A;\n      return null === dispatcher ? null : dispatcher.getOwner();\n    }\n    function UnknownOwner() {\n      return Error(\"react-stack-top-frame\");\n    }\n    function hasValidKey(config) {\n      if (hasOwnProperty.call(config, \"key\")) {\n        var getter = Object.getOwnPropertyDescriptor(config, \"key\").get;\n        if (getter && getter.isReactWarning) return !1;\n      }\n      return void 0 !== config.key;\n    }\n    function defineKeyPropWarningGetter(props, displayName) {\n      function warnAboutAccessingKey() {\n        specialPropKeyWarningShown ||\n          ((specialPropKeyWarningShown = !0),\n          console.error(\n            \"%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)\",\n            displayName\n          ));\n      }\n      warnAboutAccessingKey.isReactWarning = !0;\n      Object.defineProperty(props, \"key\", {\n        get: warnAboutAccessingKey,\n        configurable: !0\n      });\n    }\n    function elementRefGetterWithDeprecationWarning() {\n      var componentName = getComponentNameFromType(this.type);\n      didWarnAboutElementRef[componentName] ||\n        ((didWarnAboutElementRef[componentName] = !0),\n        console.error(\n          \"Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.\"\n        ));\n      componentName = this.props.ref;\n      return void 0 !== componentName ? componentName : null;\n    }\n    function ReactElement(type, key, props, owner, debugStack, debugTask) {\n      var refProp = props.ref;\n      type = {\n        $$typeof: REACT_ELEMENT_TYPE,\n        type: type,\n        key: key,\n        props: props,\n        _owner: owner\n      };\n      null !== (void 0 !== refProp ? refProp : null)\n        ? Object.defineProperty(type, \"ref\", {\n            enumerable: !1,\n            get: elementRefGetterWithDeprecationWarning\n          })\n        : Object.defineProperty(type, \"ref\", { enumerable: !1, value: null });\n      type._store = {};\n      Object.defineProperty(type._store, \"validated\", {\n        configurable: !1,\n        enumerable: !1,\n        writable: !0,\n        value: 0\n      });\n      Object.defineProperty(type, \"_debugInfo\", {\n        configurable: !1,\n        enumerable: !1,\n        writable: !0,\n        value: null\n      });\n      Object.defineProperty(type, \"_debugStack\", {\n        configurable: !1,\n        enumerable: !1,\n        writable: !0,\n        value: debugStack\n      });\n      Object.defineProperty(type, \"_debugTask\", {\n        configurable: !1,\n        enumerable: !1,\n        writable: !0,\n        value: debugTask\n      });\n      Object.freeze && (Object.freeze(type.props), Object.freeze(type));\n      return type;\n    }\n    function jsxDEVImpl(\n      type,\n      config,\n      maybeKey,\n      isStaticChildren,\n      debugStack,\n      debugTask\n    ) {\n      var children = config.children;\n      if (void 0 !== children)\n        if (isStaticChildren)\n          if (isArrayImpl(children)) {\n            for (\n              isStaticChildren = 0;\n              isStaticChildren < children.length;\n              isStaticChildren++\n            )\n              validateChildKeys(children[isStaticChildren]);\n            Object.freeze && Object.freeze(children);\n          } else\n            console.error(\n              \"React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.\"\n            );\n        else validateChildKeys(children);\n      if (hasOwnProperty.call(config, \"key\")) {\n        children = getComponentNameFromType(type);\n        var keys = Object.keys(config).filter(function (k) {\n          return \"key\" !== k;\n        });\n        isStaticChildren =\n          0 < keys.length\n            ? \"{key: someKey, \" + keys.join(\": ..., \") + \": ...}\"\n            : \"{key: someKey}\";\n        didWarnAboutKeySpread[children + isStaticChildren] ||\n          ((keys =\n            0 < keys.length ? \"{\" + keys.join(\": ..., \") + \": ...}\" : \"{}\"),\n          console.error(\n            'A props object containing a \"key\" prop is being spread into JSX:\\n  let props = %s;\\n  <%s {...props} />\\nReact keys must be passed directly to JSX without using spread:\\n  let props = %s;\\n  <%s key={someKey} {...props} />',\n            isStaticChildren,\n            children,\n            keys,\n            children\n          ),\n          (didWarnAboutKeySpread[children + isStaticChildren] = !0));\n      }\n      children = null;\n      void 0 !== maybeKey &&\n        (checkKeyStringCoercion(maybeKey), (children = \"\" + maybeKey));\n      hasValidKey(config) &&\n        (checkKeyStringCoercion(config.key), (children = \"\" + config.key));\n      if (\"key\" in config) {\n        maybeKey = {};\n        for (var propName in config)\n          \"key\" !== propName && (maybeKey[propName] = config[propName]);\n      } else maybeKey = config;\n      children &&\n        defineKeyPropWarningGetter(\n          maybeKey,\n          \"function\" === typeof type\n            ? type.displayName || type.name || \"Unknown\"\n            : type\n        );\n      return ReactElement(\n        type,\n        children,\n        maybeKey,\n        getOwner(),\n        debugStack,\n        debugTask\n      );\n    }\n    function validateChildKeys(node) {\n      isValidElement(node)\n        ? node._store && (node._store.validated = 1)\n        : \"object\" === typeof node &&\n          null !== node &&\n          node.$$typeof === REACT_LAZY_TYPE &&\n          (\"fulfilled\" === node._payload.status\n            ? isValidElement(node._payload.value) &&\n              node._payload.value._store &&\n              (node._payload.value._store.validated = 1)\n            : node._store && (node._store.validated = 1));\n    }\n    function isValidElement(object) {\n      return (\n        \"object\" === typeof object &&\n        null !== object &&\n        object.$$typeof === REACT_ELEMENT_TYPE\n      );\n    }\n    var React = require(\"react\"),\n      REACT_ELEMENT_TYPE = Symbol.for(\"react.transitional.element\"),\n      REACT_PORTAL_TYPE = Symbol.for(\"react.portal\"),\n      REACT_FRAGMENT_TYPE = Symbol.for(\"react.fragment\"),\n      REACT_STRICT_MODE_TYPE = Symbol.for(\"react.strict_mode\"),\n      REACT_PROFILER_TYPE = Symbol.for(\"react.profiler\"),\n      REACT_CONSUMER_TYPE = Symbol.for(\"react.consumer\"),\n      REACT_CONTEXT_TYPE = Symbol.for(\"react.context\"),\n      REACT_FORWARD_REF_TYPE = Symbol.for(\"react.forward_ref\"),\n      REACT_SUSPENSE_TYPE = Symbol.for(\"react.suspense\"),\n      REACT_SUSPENSE_LIST_TYPE = Symbol.for(\"react.suspense_list\"),\n      REACT_MEMO_TYPE = Symbol.for(\"react.memo\"),\n      REACT_LAZY_TYPE = Symbol.for(\"react.lazy\"),\n      REACT_ACTIVITY_TYPE = Symbol.for(\"react.activity\"),\n      REACT_CLIENT_REFERENCE = Symbol.for(\"react.client.reference\"),\n      ReactSharedInternals =\n        React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,\n      hasOwnProperty = Object.prototype.hasOwnProperty,\n      isArrayImpl = Array.isArray,\n      createTask = console.createTask\n        ? console.createTask\n        : function () {\n            return null;\n          };\n    React = {\n      react_stack_bottom_frame: function (callStackForError) {\n        return callStackForError();\n      }\n    };\n    var specialPropKeyWarningShown;\n    var didWarnAboutElementRef = {};\n    var unknownOwnerDebugStack = React.react_stack_bottom_frame.bind(\n      React,\n      UnknownOwner\n    )();\n    var unknownOwnerDebugTask = createTask(getTaskName(UnknownOwner));\n    var didWarnAboutKeySpread = {};\n    exports.Fragment = REACT_FRAGMENT_TYPE;\n    exports.jsx = function (type, config, maybeKey) {\n      var trackActualOwner =\n        1e4 > ReactSharedInternals.recentlyCreatedOwnerStacks++;\n      return jsxDEVImpl(\n        type,\n        config,\n        maybeKey,\n        !1,\n        trackActualOwner\n          ? Error(\"react-stack-top-frame\")\n          : unknownOwnerDebugStack,\n        trackActualOwner ? createTask(getTaskName(type)) : unknownOwnerDebugTask\n      );\n    };\n    exports.jsxs = function (type, config, maybeKey) {\n      var trackActualOwner =\n        1e4 > ReactSharedInternals.recentlyCreatedOwnerStacks++;\n      return jsxDEVImpl(\n        type,\n        config,\n        maybeKey,\n        !0,\n        trackActualOwner\n          ? Error(\"react-stack-top-frame\")\n          : unknownOwnerDebugStack,\n        trackActualOwner ? createTask(getTaskName(type)) : unknownOwnerDebugTask\n      );\n    };\n  })();\n","'use strict';\n\nif (process.env.NODE_ENV === 'production') {\n  module.exports = require('./cjs/react-jsx-runtime.production.js');\n} else {\n  module.exports = require('./cjs/react-jsx-runtime.development.js');\n}\n","const cloneWithDescriptor = (\n  descriptor: PropertyDescriptor,\n  cloneValue: (input: unknown) => unknown,\n): PropertyDescriptor => {\n  if (!(\"value\" in descriptor)) {\n    return descriptor;\n  }\n\n  return {\n    ...descriptor,\n    value: cloneValue(descriptor.value),\n  };\n};\n\nconst deepCloneInternal = <T>(value: T, seen: WeakMap<object, unknown>): T => {\n  if (value === null || typeof value !== \"object\") {\n    return value;\n  }\n\n  if (typeof Node !== \"undefined\" && value instanceof Node) {\n    return value;\n  }\n\n  const cached = seen.get(value as object);\n  if (cached) {\n    return cached as T;\n  }\n\n  if (value instanceof Date) {\n    const clonedDate = new Date(value.getTime());\n    seen.set(value, clonedDate);\n    return clonedDate as T;\n  }\n\n  if (value instanceof RegExp) {\n    const clonedRegExp = new RegExp(value.source, value.flags);\n    clonedRegExp.lastIndex = value.lastIndex;\n    seen.set(value, clonedRegExp);\n    return clonedRegExp as T;\n  }\n\n  if (value instanceof ArrayBuffer) {\n    const clonedBuffer = value.slice(0);\n    seen.set(value, clonedBuffer);\n    return clonedBuffer as T;\n  }\n\n  if (ArrayBuffer.isView(value)) {\n    if (value instanceof DataView) {\n      const clonedBuffer = deepCloneInternal(value.buffer, seen);\n      const clonedDataView = new DataView(\n        clonedBuffer,\n        value.byteOffset,\n        value.byteLength,\n      );\n      seen.set(value, clonedDataView);\n      return clonedDataView as T;\n    }\n\n    const TypedArrayConstructor = value.constructor as {\n      new (\n        buffer: ArrayBufferLike,\n        byteOffset?: number,\n        length?: number,\n      ): unknown;\n      BYTES_PER_ELEMENT: number;\n    };\n    const clonedBuffer = deepCloneInternal(value.buffer, seen);\n    const length = value.byteLength / TypedArrayConstructor.BYTES_PER_ELEMENT;\n    const clonedTypedArray = new TypedArrayConstructor(\n      clonedBuffer,\n      value.byteOffset,\n      length,\n    );\n    seen.set(value, clonedTypedArray);\n    return clonedTypedArray as T;\n  }\n\n  if (value instanceof Map) {\n    const clonedMap = new Map<unknown, unknown>();\n    seen.set(value, clonedMap);\n\n    for (const [key, mapValue] of value.entries()) {\n      clonedMap.set(\n        deepCloneInternal(key, seen),\n        deepCloneInternal(mapValue, seen),\n      );\n    }\n\n    return clonedMap as T;\n  }\n\n  if (value instanceof Set) {\n    const clonedSet = new Set<unknown>();\n    seen.set(value, clonedSet);\n\n    for (const setValue of value.values()) {\n      clonedSet.add(deepCloneInternal(setValue, seen));\n    }\n\n    return clonedSet as T;\n  }\n\n  const clonedObject = Array.isArray(value)\n    ? (() => {\n        const clonedArray: unknown[] = [];\n        clonedArray.length = (value as unknown[]).length;\n        return clonedArray;\n      })()\n    : Object.create(Object.getPrototypeOf(value));\n\n  seen.set(value as object, clonedObject);\n\n  for (const key of Reflect.ownKeys(value as object)) {\n    if (Array.isArray(value) && key === \"length\") {\n      continue;\n    }\n\n    const descriptor = Object.getOwnPropertyDescriptor(value as object, key);\n    if (!descriptor) {\n      continue;\n    }\n\n    Object.defineProperty(\n      clonedObject,\n      key,\n      cloneWithDescriptor(descriptor, (input) =>\n        deepCloneInternal(input, seen),\n      ),\n    );\n  }\n\n  return clonedObject as T;\n};\n\nconst deepClone = <T>(value: T): T => deepCloneInternal(value, new WeakMap());\n\nexport default deepClone;\n","import { useRef, useState, useEffect, useCallback, useMemo } from \"react\";\nimport type { ComponentPropsWithRef, MutableRefObject, Ref } from \"react\";\nimport videojsModule from \"video.js\";\nimport deepClone from \"./deepClone.js\";\n\ntype VideoJsModule = (typeof import(\"video.js\"))[\"default\"];\ntype VideoJsPlayer = ReturnType<VideoJsModule>;\ntype VideoJsPlayerOptions = Parameters<VideoJsModule>[1];\n\nconst videojs = videojsModule as unknown as VideoJsModule;\n\nconst setVideoNodeRef = (\n  videoNode: MutableRefObject<HTMLVideoElement | null>,\n  videoRef: Ref<HTMLVideoElement> | undefined,\n  value: HTMLVideoElement | null,\n): void => {\n  videoNode.current = value;\n\n  if (!videoRef) {\n    return;\n  }\n\n  if (typeof videoRef === \"function\") {\n    videoRef(value);\n    return;\n  }\n\n  videoRef.current = value;\n};\n\nconst getVideoClassName = (classNames: string, className?: string): string =>\n  [\"video-js\", classNames, className].filter(Boolean).join(\" \");\n\nconst restoreDisposedVideoNode = (\n  containerNode: HTMLDivElement,\n  originalVideoNode: HTMLVideoElement | null,\n  videoNode: MutableRefObject<HTMLVideoElement | null>,\n  videoRef?: Ref<HTMLVideoElement>,\n): void => {\n  if (originalVideoNode && !containerNode.querySelector(\"video\")) {\n    containerNode.appendChild(originalVideoNode);\n    setVideoNodeRef(\n      videoNode,\n      videoRef,\n      containerNode.querySelector(\"video\") as HTMLVideoElement | null,\n    );\n  }\n};\n\nconst shouldSkipReadyCallback = (\n  disposed: boolean,\n  playerRef: MutableRefObject<VideoJsPlayer | null>,\n  initializedPlayer: VideoJsPlayer,\n): boolean => disposed || playerRef.current !== initializedPlayer;\n\nconst getCurrentVideoNode = (\n  containerNode: HTMLDivElement,\n  videoNode: MutableRefObject<HTMLVideoElement | null>,\n): HTMLVideoElement | null => {\n  const connectedVideoNode = containerNode.querySelector(\n    \"video\",\n  ) as HTMLVideoElement | null;\n\n  return videoNode.current?.isConnected === true\n    ? videoNode.current\n    : connectedVideoNode;\n};\n\nconst callOnReadyForCurrentPlayer = (\n  disposed: boolean,\n  playerRef: MutableRefObject<VideoJsPlayer | null>,\n  initializedPlayer: VideoJsPlayer,\n  onReady: (player: VideoJsPlayer) => void,\n): void => {\n  if (shouldSkipReadyCallback(disposed, playerRef, initializedPlayer)) {\n    return;\n  }\n\n  onReady(initializedPlayer);\n};\n\nexport const __private__ = {\n  setVideoNodeRef,\n  getVideoClassName,\n  restoreDisposedVideoNode,\n  shouldSkipReadyCallback,\n  callOnReadyForCurrentPlayer,\n  getCurrentVideoNode,\n};\n\n// Integrating React and video.js is a bit tricky, especially when supporting\n// React 19 strict mode. We'll do our best to explain what happens in inline comments.\n\ntype VideoElementProps = ComponentPropsWithRef<\"video\">;\n\ntype VideoJsWrapperProps = {\n  videoJsOptions: VideoJsPlayerOptions;\n  onReady: (player: VideoJsPlayer) => void;\n  onDispose: () => void;\n  classNames: string;\n  playerRef: MutableRefObject<VideoJsPlayer | null>;\n} & VideoElementProps;\n\nconst VideoJsWrapper = ({\n  children,\n  videoJsOptions,\n  onReady,\n  onDispose,\n  classNames,\n  playerRef,\n  ref: videoRef,\n  className,\n  ...props\n}: VideoJsWrapperProps): React.JSX.Element => {\n  const videoJsOptionsCloned = useMemo(\n    () => deepClone(videoJsOptions),\n    [videoJsOptions],\n  );\n  const videoNode = useRef<HTMLVideoElement | null>(null);\n  const containerRef = useRef<HTMLDivElement | null>(null);\n\n  useEffect(() => {\n    const containerNode = containerRef.current as HTMLDivElement;\n\n    const currentVideoNode = getCurrentVideoNode(containerNode, videoNode);\n\n    if (!currentVideoNode || !currentVideoNode.isConnected) return;\n\n    if (videoNode.current !== currentVideoNode) {\n      setVideoNodeRef(videoNode, videoRef, currentVideoNode);\n    }\n\n    const originalVideoNode = currentVideoNode.cloneNode(\n      true,\n    ) as HTMLVideoElement;\n\n    let disposed = false;\n\n    const initializedPlayer = videojs(currentVideoNode, videoJsOptionsCloned);\n    playerRef.current = initializedPlayer;\n    initializedPlayer.ready(() => {\n      callOnReadyForCurrentPlayer(\n        disposed,\n        playerRef,\n        initializedPlayer,\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      disposed = true;\n      initializedPlayer.dispose();\n      playerRef.current = null;\n\n      restoreDisposedVideoNode(\n        containerNode,\n        originalVideoNode,\n        videoNode,\n        videoRef,\n      );\n\n      onDispose();\n    };\n\n    // Reinitialize only when deep-compared options or lifecycle handlers change.\n  }, [videoJsOptionsCloned, onReady, onDispose, playerRef, videoRef]);\n\n  return (\n    <div ref={containerRef}>\n      <video\n        ref={(value) => {\n          setVideoNodeRef(videoNode, videoRef, value);\n        }}\n        className={getVideoClassName(classNames, className)}\n        {...props}\n      >\n        {children}\n      </video>\n    </div>\n  );\n};\n\n/** All standard `<video>` element attributes and the `ref` prop are accepted. */\nexport type VideoProps = VideoElementProps;\n\n/**\n * The `Video` component returned by {@link useVideoJS}.\n *\n * Renders a Video.js-managed `<video>` element. Accepts any prop that a\n * native `<video>` element accepts (including `ref`, `className`, `muted`,\n * `autoPlay`, etc.) as well as child elements such as `<track>` nodes.\n *\n * @example\n * ```tsx\n * const { Video } = useVideoJS(options);\n * return (\n *   <Video className=\"my-player\" muted>\n *     <track kind=\"captions\" src=\"/captions.vtt\" srcLang=\"en\" default />\n *   </Video>\n * );\n * ```\n */\nexport type VideoComponent = (props: VideoProps) => React.JSX.Element;\n\n/**\n * Integrates Video.js with React.\n *\n * Initializes a Video.js player when the returned `Video` component mounts,\n * disposes it on unmount or when `videoJsOptions` changes, and reinitializes\n * with the new configuration — all while handling React 19 Strict Mode's\n * double-invoke lifecycle correctly.\n *\n * @param videoJsOptions - Video.js player options. **Must be memoized** (e.g.\n *   with `React.useMemo`) so the player only reinitializes when options values\n *   actually change, not on every render.\n * @param classNames - Optional CSS class name(s) appended to the `<video>`\n *   node in addition to the required `\"video-js\"` class.\n * @returns An object with three fields:\n *   - `Video` — React component to render in JSX. Accepts all `<video>` props\n *     and children (e.g. `<track>` elements).\n *   - `ready` — `true` once the player has fired its `\"ready\"` event.\n *   - `player` — The `VideoJsPlayer` instance when ready, `null` otherwise.\n *     Use this to call Video.js API methods imperatively (e.g. in a\n *     `useEffect` that depends on `player`).\n *\n * @example\n * ```tsx\n * import React, { useMemo, useEffect } from \"react\";\n * import \"video.js/dist/video-js.css\";\n * import { useVideoJS } from \"react-hook-videojs\";\n *\n * const MyPlayer = ({ src }: { src: string }) => {\n *   const options = useMemo(() => ({ sources: [{ src }] }), [src]);\n *   const { Video, ready, player } = useVideoJS(options);\n *\n *   // Attach event listeners imperatively once the player is ready\n *   useEffect(() => {\n *     if (!player) return;\n *     const onPlay = () => console.log(\"playing\");\n *     player.on(\"play\", onPlay);\n *     return () => { player.off(\"play\", onPlay); };\n *   }, [player]);\n *\n *   return <Video />;\n * };\n * ```\n */\nexport const useVideoJS = (\n  videoJsOptions: VideoJsPlayerOptions,\n  classNames = \"\",\n): {\n  Video: VideoComponent;\n  ready: boolean;\n  player: VideoJsPlayer | null;\n} => {\n  const [ready, setReady] = useState(false);\n  const [player, setPlayer] = useState<VideoJsPlayer | null>(null);\n\n  // player will contain the video.js player object, once it is ready.\n  const playerRef = useRef<VideoJsPlayer | null>(null);\n  const onReady = useCallback((playerInstance: VideoJsPlayer): void => {\n    setReady(true);\n    setPlayer(playerInstance);\n  }, []);\n  const onDispose = useCallback((): void => {\n    setReady(false);\n    setPlayer(null);\n  }, []);\n  const Video = useCallback(\n    ({ children, ...props }: VideoProps) => (\n      <VideoJsWrapper\n        videoJsOptions={videoJsOptions}\n        classNames={classNames}\n        onReady={onReady}\n        onDispose={onDispose}\n        playerRef={playerRef}\n        {...props}\n      >\n        {children}\n      </VideoJsWrapper>\n    ),\n    [videoJsOptions, classNames, onReady, onDispose],\n  );\n\n  return { Video, ready, player };\n};\n"],"names":["jsxRuntimeModule","require$$0","require$$1","clonedBuffer","jsx"],"mappings":"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","x_google_ignoreList":[0,1,2]}

package/package.json

@@ -1,58 +1,52 @@
 {
   "name": "react-hook-videojs",
-  "version": "3.0.2",
+  "type": "module",
+  "version": "4.0.0-beta.1",
   "description": "A simple react hook to easily integrate video.js with React",
   "author": "jimmycallin",
   "license": "MIT",
   "repository": "jimmycallin/react-hook-videojs",
   "types": "./dist/index.d.ts",
-  "main": "dist/react-hook-videojs.umd.js",
-  "module": "dist/react-hook-videojs.es.js",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/react-hook-videojs.es.js"
+    }
+  },
   "source": "src/index.tsx",
   "engineStrict": false,
   "engines": {
     "node": ">=16"
   },
-  "scripts": {
-    "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 < 19",
-    "react-dom": ">=16.8.0 < 19",
-    "video.js": "^7.0.0"
+    "react": ">=19 < 20",
+    "react-dom": ">=19 < 20",
+    "video.js": ">=7 <9"
   },
   "devDependencies": {
-    "@testing-library/react": "^13.3.0",
-    "@types/lodash.clonedeep": "^4.5.7",
-    "@types/video.js": "^7.3.42",
-    "@typescript-eslint/eslint-plugin": "^5.32.0",
-    "@typescript-eslint/parser": "^5.31.0",
-    "@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.4",
-    "vitest": "^0.20.2"
+    "@testing-library/react": "^16.3.2",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "@types/video.js": "^7.3.51",
+    "@vitejs/plugin-react": "^5.1.4",
+    "jsdom": "^28.1.0",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "rimraf": "^6.1.3",
+    "typescript": "^5.9.3",
+    "video.js": "^8.23.7",
+    "vite": "^7.3.1",
+    "vitest": "^4.0.18"
   },
   "files": [
-    "dist"
+    "dist",
+    "README.md",
+    "LICENSE"
   ],
-  "dependencies": {
-    "dequal": "^2.0.3",
-    "lodash.clonedeep": "^4.5.0"
+  "scripts": {
+    "clean": "rimraf dist .tmp",
+    "build": "vite build && tsc --project tsconfig.types.json",
+    "test": "pnpm --workspace-root run test:unit",
+    "dev": "vite build --watch"
   }
-}
+}

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

@@ -1,74 +0,0 @@
-(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

@@ -1 +0,0 @@
-{"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;;;;"}