import _extends from "@babel/runtime/helpers/esm/extends";

/* eslint-disable @typescript-eslint/ban-types */
import React from 'react';
import { toProps } from '../core';
import EventListener from '../event/EventListener';

function toVideoSphereProps(_ref) {
  var autoplay = _ref.autoplay,
      crossOrigin = _ref.crossOrigin,
      loop = _ref.loop,
      radius = _ref.radius,
      segmentsHeight = _ref.segmentsHeight,
      segmentsWidth = _ref.segmentsWidth;
  return {
    autoplay: autoplay,
    crossOrigin: crossOrigin,
    loop: loop,
    radius: radius,
    'segments-height': segmentsHeight,
    'segments-width': segmentsWidth
  };
}
/**
 * The videosphere primitive plays 360° videos in the background of the scene.
 * Videospheres are a large sphere with the video texture mapped to the inside.
 *
 * @see https://aframe.io/docs/1.3.0/primitives/a-videosphere.html
 *
 * @example
 * ```tsx
 * <Scene>
 *   <Assets>
 *     <video
 *       id="antarctica"
 *       autoplay
 *       loop={true}
 *       src="antarctica.mp4"
 *     />
 *   </Assets>
 *
 *   // Using the asset management system.
 *   <VideoSphere src="#antarctica" />
 *
 *   // Defining the URL inline. Not recommended but more comfortable for web developers.
 *   <VideoSphere src="africa.mp4" />
 * </Scene>
 * ```
 */


export var VideoSphere = function VideoSphere(props) {
  var videoSphereKeys = ['autoplay', 'crossOrigin', 'loop', 'radius', 'segmentsHeight', 'segmentsWidth'];
  var children = props.children;
  return /*#__PURE__*/React.createElement(EventListener, _extends({
    primitive: "a-videosphere"
  }, toProps(props, videoSphereKeys), toVideoSphereProps(props)), children);
};