'use strict';

var asyncToGenerator = require('./asyncToGenerator-58c289d9.js');
var slicedToArray = require('./slicedToArray-5d1bc3b3.js');
var React = require('react');
var index_esm$1 = require('./index.esm-974f47d9.js');
var index_esm = require('./index.esm-05850a2f.js');
var main = require('./main-025fdc78.js');
require('./_commonjsHelpers-06173234.js');
require('./es6.string.iterator-c2573ffd.js');
require('./_to-object-6de10e57.js');
require('./web.dom.iterable-46657b5c.js');
require('./_library-dd23b178.js');
require('./core.get-iterator-method-f474eacc.js');
require('./_iter-detect-55a5657a.js');
require('./iconBase-68959171.js');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var React__default = /*#__PURE__*/_interopDefaultLegacy(React);

var _this = undefined;

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,
      _ref$logEvent = _ref.logEvent,
      logEvent = _ref$logEvent === undefined ? function () {} : _ref$logEvent;

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

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

  var _useState5 = React.useState(true),
      _useState6 = slicedToArray._slicedToArray(_useState5, 2),
      isMuted = _useState6[0],
      setIsMuted = _useState6[1];

  var ustreamContainer = React.useRef(null);

  React.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) {}
  }, []);

  React.useEffect(function () {

    if (isMuted) {
      var loadUstreamListener = function () {
        var _ref2 = asyncToGenerator._asyncToGenerator( /*#__PURE__*/asyncToGenerator.regenerator.mark(function _callee() {
          var UstreamEmbed, viewer, reporting;
          return asyncToGenerator.regenerator.wrap(function _callee$(_context) {
            while (1) {
              switch (_context.prev = _context.next) {
                case 0:
                  _context.next = 2;
                  return Promise.resolve().then(function () { return require('./ustream-api-b2b9092f.js'); });

                case 2:
                  UstreamEmbed = _context.sent;
                  viewer = UstreamEmbed('ustream-iframe');
                  reporting = setInterval(function () {
                    viewer.getProperty('volume', function (content) {
                      if (content > 0) {
                        logEvent({ category: 'Ustream Unmute', action: 'Unmute Ustream Widget', label: 'Unmute Ustream Widget' });
                        setIsMuted(false);
                        clearInterval(reporting);
                      }
                    });
                  }, 2000);

                case 5:
                case 'end':
                  return _context.stop();
              }
            }
          }, _callee, _this);
        }));

        return function loadUstreamListener() {
          return _ref2.apply(this, arguments);
        };
      }();
      loadUstreamListener();
    }
  }, [isMuted]);
  //return nothing if mobile
  if (main.main_43) {
    return null;
  }
  return React__default['default'].createElement(
    'div',
    { id: 'ustream-container', ref: ustreamContainer, style: { width: '' + currentWidth, marginBottom: '1rem' } },
    React__default['default'].createElement(
      'div',
      { style: { position: 'relative' } },
      close ? React__default['default'].createElement(
        'div',
        { className: 'ustream-close' },
        React__default['default'].createElement(index_esm.FaRegWindowClose, { style: { color: '#fff', fontSize: '1.3rem' } })
      ) : React__default['default'].createElement(
        React__default['default'].Fragment,
        null,
        React__default['default'].createElement(
          'div',
          { className: 'ustream-minimize' },
          React__default['default'].createElement(index_esm$1.IoIosOpen, { style: right ? { color: '#fff', fontSize: '1.3rem', transform: 'rotateZ(-90deg)' } : { color: '#fff', fontSize: '1.3rem' } })
        ),
        React__default['default'].createElement(
          'div',
          { className: 'ustream-close' },
          React__default['default'].createElement(index_esm.FaRegWindowClose, { style: { color: '#fff', fontSize: '1rem' } })
        )
      ),
      React__default['default'].createElement('iframe', { id: 'ustream-iframe', webkitallowfullscreen: 'true', allowFullScreen: true, frameBorder: 'no', style: { maxWidth: '100%', height: currentHeight, width: currentWidth } })
    ),
    React__default['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['default'].memo(Ustream);

module.exports = Ustream$1;
