@oplayer/react/dist/index.es.js

React wrapper for oplayer.

/**
 * name: @oplayer/react
 * version: v1.2.11-beta.2
 * description: React wrapper for oplayer.
 * author: shiyiya
 * homepage: https://github.com/shiyiya/oplayer
 */
const _excluded = ["playing", "duration", "aspectRatio", "plugins", "onEvent", "source"];
function _objectWithoutPropertiesLoose(r, e) {
  if (null == r) return {};
  var t = {};
  for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
    if (e.includes(n)) continue;
    t[n] = r[n];
  }
  return t;
}
import { jsx } from "react/jsx-runtime";
import Player__default from "@oplayer/core";
export * from "@oplayer/core";
import { forwardRef, useRef, useCallback, useEffect, useImperativeHandle, useMemo } from "react";
const ReactOPlayer = forwardRef((props, ref) => {
  const playing = props.playing, duration = props.duration, _props$aspectRatio = props.aspectRatio, aspectRatio = _props$aspectRatio === void 0 ? 9 / 16 : _props$aspectRatio, _props$plugins = props.plugins, plugins = _props$plugins === void 0 ? [] : _props$plugins, onEvent = props.onEvent, source = props.source, rest = _objectWithoutPropertiesLoose(props, _excluded);
  const onEventRef = useRef(onEvent);
  onEventRef.current = onEvent;
  const player = useRef(null);
  const preSource = usePrevious(source);
  const isReady = player.current && player.current.$root;
  const onRefChange = useCallback((node) => {
    if (node !== null && !isReady) {
      const initialParams = source instanceof Promise ? rest : Object.assign({}, rest, {
        source
      });
      player.current = Player__default.make(node, initialParams).use(plugins).create();
      if (source instanceof Promise) player.current.changeSource(source);
      if (typeof duration == "number") player.current.seek(duration / 1e3);
      if (onEvent) {
        player.current.on((payload) => {
          var _a;
          return (_a = onEventRef.current) == null ? void 0 : _a.call(onEventRef, payload);
        });
      }
    }
  }, []);
  useEffectIf(isReady, () => {
    if (playing) {
      if (!player.current.isPlaying) player.current.play();
    } else {
      if (player.current.isPlaying) player.current.pause();
    }
  }, [playing]);
  useEffectIf(isReady, () => {
    if (source && (source instanceof Promise ? preSource != source : source.src && (preSource == null ? void 0 : preSource.src) !== source.src)) {
      player.current.changeSource(source);
    }
  }, [source]);
  useEffectIf(isReady && typeof duration === "number", () => {
    player.current.seek(duration / 1e3);
  }, [duration]);
  useEffectIf(isReady, () => {
    if (rest.muted) {
      player.current.mute();
    } else {
      player.current.unmute();
    }
  }, [rest.muted]);
  useEffectIf(isReady, () => {
    player.current.setPlaybackRate(rest.playbackRate);
  }, [rest.playbackRate]);
  useEffect(() => {
    return () => {
      var _a;
      (_a = player.current) == null ? void 0 : _a.destroy();
      player.current = null;
    };
  }, []);
  useImperativeHandle(ref, () => player.current, []);
  return useMemo(() => {
    if (aspectRatio == 0) {
      return /* @__PURE__ */ jsx("div", {
        ref: onRefChange
      });
    }
    return /* @__PURE__ */ jsx("div", {
      style: {
        width: "100%",
        paddingTop: aspectRatio * 100 + "%",
        backgroundColor: "#f4f4f4",
        position: "relative"
      },
      children: /* @__PURE__ */ jsx("div", {
        style: {
          position: "absolute",
          top: 0,
          left: 0,
          width: "100%",
          height: "100%"
        },
        ref: onRefChange
      })
    });
  }, []);
});
const useEffectIf = (where, cb, deps) => {
  useEffect(() => {
    if (Boolean(where)) {
      return cb();
    }
  }, deps);
};
function usePrevious(value) {
  const ref = useRef();
  useEffect(() => {
    ref.current = value;
  }, [value]);
  return ref.current;
}
export {
  ReactOPlayer as default,
  usePrevious
};