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

A THEOplayer video component for react-native.

"use strict";

import React, { useEffect, useRef } from 'react';
import { ChromelessPlayer } from 'theoplayer';
import { THEOplayerWebAdapter } from './adapter/THEOplayerWebAdapter';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export function THEOplayerView(props) {
  const {
    config,
    children
  } = props;
  const player = useRef(null);
  const adapter = useRef(null);
  const container = useRef(null);
  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 ChromelessPlayer(container.current, updatedConfig);

      // Adapt native player to react-native player.
      adapter.current = new 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
      props.onPlayerReady?.(adapter.current);
    }

    // Clean-up
    return () => {
      // Notify the player will be destroyed.
      const {
        onPlayerDestroy
      } = props;
      if (adapter?.current && onPlayerDestroy) {
        onPlayerDestroy(adapter?.current);
      }
      adapter?.current?.destroy();
    };
  }, [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
    _jsxs("div", {
      id: 'theoplayer-root-container',
      style: {
        display: 'contents'
      },
      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}
      _jsx("div", {
        style: styles.containerNoAspectRatio,
        children: /*#__PURE__*/_jsx("div", {
          ref: container,
          style: styles.absoluteFillNoAspectRatio,
          className: "theoplayer-container"
        })
      }) : /*#__PURE__*/_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