react-native-theoplayer/lib/commonjs/internal/THEOplayerView.web.js

A THEOplayer video component for react-native.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.THEOplayerView = THEOplayerView;
var _react = _interopRequireWildcard(require("react"));
var _theoplayer = require("theoplayer");
var _THEOplayerWebAdapter = require("./adapter/THEOplayerWebAdapter");
var _jsxRuntime = require("react/jsx-runtime");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
function THEOplayerView(props) {
  const {
    config,
    children,
    onPlayerReady,
    onPlayerDestroy
  } = props;
  const player = (0, _react.useRef)(null);
  const adapter = (0, _react.useRef)(null);
  const container = (0, _react.useRef)(null);
  (0, _react.useEffect)(() => {
    // Create player inside container.
    if (container.current) {
      const ads = {
        ...config?.ads,
        googleIma: {
          ...config?.ads?.ima,
          useNativeIma: true,
          language: config?.ui?.language ?? 'en'
        }
      };
      const updatedConfig = {
        ...config,
        allowNativeFullscreen: true,
        ads
      };
      player.current = new _theoplayer.ChromelessPlayer(container.current, updatedConfig);

      // Adapt native player to react-native player.
      adapter.current = new _THEOplayerWebAdapter.THEOplayerWebAdapter(player.current, config);

      // Expose players for easy access
      // @ts-ignore
      window.player = adapter.current;

      // @ts-ignore
      window.nativePlayer = player;

      // Notify the player is ready
      onPlayerReady?.(adapter.current);
    }

    // Clean-up
    return () => {
      // Notify the player will be destroyed.
      if (adapter?.current && onPlayerDestroy) {
        onPlayerDestroy(adapter?.current);
      }
      adapter?.current?.destroy();
    };
    // TODO: Follow the rules of react hooks, to be fixed in next major because it's a breaking change for some customers.
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [container]);
  return (
    /*#__PURE__*/
    // Note: `display: contents` causes an element's children to appear as if they were direct children of the element's parent,
    // ignoring the element itself.
    // It's necessary to make sure we do not interfere with the IMA container
    (0, _jsxRuntime.jsxs)("div", {
      id: 'theoplayer-root-container',
      style: {
        display: CSS.supports('display', 'contents') ? 'contents' : 'flex'
      },
      children: [!CSS.supports('aspect-ratio', '16/9') ?
      /*#__PURE__*/
      // Handle aspect-ratio 16/9 with padding-top: 56.25% to support older versions.
      // {@link https://www.w3schools.com/howto/howto_css_aspect_ratio.asp}
      (0, _jsxRuntime.jsx)("div", {
        style: styles.containerNoAspectRatio,
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
          ref: container,
          style: styles.absoluteFillNoAspectRatio,
          className: "theoplayer-container"
        })
      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        ref: container,
        style: styles.container,
        className: "theoplayer-container"
      }), children]
    })
  );
}
const styles = {
  // by default stretch the video to cover the container.
  // Override using the 'theoplayer-container' class.
  container: {
    display: 'flex',
    position: 'relative',
    width: '100%',
    height: '100%',
    maxHeight: '100vh',
    maxWidth: '100vw',
    aspectRatio: '16 / 9'
  },
  containerNoAspectRatio: {
    width: '100%',
    position: 'relative',
    paddingTop: '56.25%'
  },
  absoluteFillNoAspectRatio: {
    position: 'absolute',
    top: 0,
    left: 0,
    bottom: 0,
    right: 0,
    width: '100%',
    height: '100%'
  }
};
//# sourceMappingURL=THEOplayerView.web.js.map