import './_commonjsHelpers-0c4b6f40.js';
import './_to-object-ded78eb9.js';
import './es6.string.iterator-9b2af4a5.js';
import './core.get-iterator-method-54d2e411.js';
import './web.dom.iterable-8956f9a5.js';
import React__default, { useState, useRef, useEffect } from 'react';
import { m as main_36 } from './main-5d1e4bd3.js';
import { _ as _slicedToArray } from './slicedToArray-7021e5df.js';
import './iconBase-602d52fe.js';
import { c as IoIosOpen } from './index.esm-29e48d38.js';
import { F as FaRegWindowClose } from './index.esm-cf08bf18.js';

var Ustream = function Ustream(_ref) {
  var _ref$width = _ref.width,
      width = _ref$width === undefined ? '300px' : _ref$width,
      _ref$height = _ref.height,
      height = _ref$height === undefined ? '168px' : _ref$height,
      _ref$close = _ref.close,
      close = _ref$close === undefined ? false : _ref$close,
      _ref$right = _ref.right,
      right = _ref$right === undefined ? false : _ref$right,
      _ref$src = _ref.src,
      src = _ref$src === undefined ? 'https://video.ibm.com/embed/23627444?volume=0&autoplay=true' : _ref$src;

  var _useState = useState(width),
      _useState2 = _slicedToArray(_useState, 2),
      currentWidth = _useState2[0],
      setWidth = _useState2[1];

  var _useState3 = useState(height),
      _useState4 = _slicedToArray(_useState3, 2),
      currentHeight = _useState4[0],
      setHeight = _useState4[1];

  var ustreamContainer = useRef(null);

  useEffect(function () {
    try {
      var container = document.getElementById('ustream-container');
      var ustream = document.getElementById('ustream-iframe');
      ustream.setAttribute('src', src);

      if (close) {
        var closeBtn = document.querySelector('.ustream-close');
        closeBtn.addEventListener('click', function () {
          container.remove();
        });
      } else {
        document.querySelector('.ustream-minimize').addEventListener('click', function (e) {
          container.style.position = 'static';
          container.style.padding = '0 1rem';
          container.classList.add('closed');
          setWidth('100%');
          // aspect ratio
          var newHeight = 9 / 16 * ustreamContainer.current.clientWidth;
          setHeight(newHeight);
          document.querySelector('.ustream-minimize').remove();
          var closeBtn = document.querySelector('.ustream-close');
          closeBtn.style.display = 'block';
          closeBtn.addEventListener('click', function () {
            container.remove();
          });
        });
      }
    } catch (err) {}
  }, []);
  //return nothing if mobile
  if (main_36) {
    return null;
  }
  return React__default.createElement(
    'div',
    { id: 'ustream-container', ref: ustreamContainer, style: { width: '' + currentWidth, marginBottom: '1rem' } },
    React__default.createElement(
      'div',
      { style: { position: 'relative' } },
      close ? React__default.createElement(
        'div',
        { className: 'ustream-close' },
        React__default.createElement(FaRegWindowClose, { style: { color: '#fff', fontSize: '1.3rem' } })
      ) : React__default.createElement(
        React__default.Fragment,
        null,
        React__default.createElement(
          'div',
          { className: 'ustream-minimize' },
          React__default.createElement(IoIosOpen, { style: right ? { color: '#fff', fontSize: '1.3rem', transform: 'rotateZ(-90deg)' } : { color: '#fff', fontSize: '1.3rem' } })
        ),
        React__default.createElement(
          'div',
          { className: 'ustream-close' },
          React__default.createElement(FaRegWindowClose, { style: { color: '#fff', fontSize: '1rem' } })
        )
      ),
      React__default.createElement('iframe', { id: 'ustream-iframe', webkitallowfullscreen: 'true', allowFullScreen: true, frameBorder: 'no', style: { maxWidth: '100%', height: currentHeight, width: currentWidth } })
    ),
    React__default.createElement(
      'style',
      { jsx: 'true' },
      '\n        #ustream-container {\n          position: fixed;\n          bottom: 0;\n          ' + (right ? 'right: 1rem;' : 'left: 1.5rem;') + '\n          /* Updating z-index to fix gutter ad over ustream */\n          z-index: 999999;\n          max-width: 100%;\n        }\n        .ustream-minimize,\n        .ustream-close {\n          position: absolute;\n          color: white;\n          right: 0.5rem;\n          top: 0.25rem;\n          cursor: pointer;\n          font-weight: bold;\n        }\n        .ustream-close {\n          ' + (close ? 'display: block; right: .75rem; top: .5rem; ' : 'display: none; right: .5rem; top: .75rem;') + '\n        }\n        @media screen and (max-width: 768px) {\n          #ustream-container:not(.closed) {\n            width: 231px !important;\n            height: 130px !important;\n          }\n          #ustream-container:not(.closed) iframe {\n            height: 130px !important;\n          }\n        }\n      '
    )
  );
};

var Ustream$1 = React__default.memo(Ustream);

export default Ustream$1;
