import './_commonjsHelpers-0c4b6f40.js';
import React__default from 'react';
import { R as ReactPlayerLoader } from './brightcove-react-player-loader.es-83f53e4e.js';

var HighlightenVideo = function HighlightenVideo(_ref) {
  var highlightVideoOptions = _ref.highlightVideoOptions;
  var accountId = highlightVideoOptions.accountId,
      experienceId = highlightVideoOptions.experienceId,
      playerId = highlightVideoOptions.playerId,
      playlistId = highlightVideoOptions.playlistId,
      videoId = highlightVideoOptions.videoId;

  if (accountId && experienceId) {
    return React__default.createElement(
      React__default.Fragment,
      null,
      React__default.createElement(
        'div',
        { className: 'brightcove-experience-player' },
        React__default.createElement(
          'p',
          { style: { width: '100%' } },
          'Highlighted Videos'
        ),
        React__default.createElement(
          'div',
          { className: 'playlist-player', style: { position: 'relative', display: 'block', margin: '0px auto' } },
          React__default.createElement(
            'div',
            { style: { paddingTop: '56.25%' } },
            React__default.createElement('iframe', {
              src: 'https://players.brightcove.net/' + accountId + '/' + experienceId + '/share.html',
              allowFullScreen: true,
              allow: 'encrypted-media',
              style: { border: 'none', position: 'absolute', top: '0px', right: '0px', bottom: '0px', left: '0px', width: '100%', height: '100%' }
            })
          )
        )
      ),
      React__default.createElement(
        'style',
        { jsx: 'true' },
        '\n          @media (min-width: 320px) {\n            .playlist-player {\n              height: 290px;\n            }\n          }\n          @media (min-width: 360px) {\n            .playlist-player {\n              height: 340px;\n            }\n          }\n          @media (min-width: 480px) {\n            .playlist-player {\n              height: 400px;\n            }\n          }\n          @media (min-width: 560px) {\n            .playlist-player {\n              height: 300px;\n            }\n          }\n          @media (min-width: 768px) {\n            .playlist-player {\n              height: 400px;\n            }\n          }\n          @media (min-width: 968px) {\n            .playlist-player {\n              height: 300px;\n            }\n          }\n          @media (min-width: 992px) {\n            .playlist-player {\n              height: 350px;\n            }\n          }\n          @media (min-width: 1192px) {\n            .playlist-player {\n              height: 300px;\n            }\n          }\n          @media (min-width: 1400px) {\n            .playlist-player {\n              height: 400px;\n            }\n          }\n          .brightcove-experience-player {\n            margin-bottom: 10px;\n            width: 100%;\n          }\n          .brightcove-experience-player p {\n            padding: 10px;\n            margin: 0;\n            color: #fff;\n            text-transform: uppercase;\n            text-align: center;\n            font-size: 1.5em;\n            font-weight: 400;\n            margin-bottom: 10px;\n          }\n        '
      )
    );
  } else if (accountId && playerId && playlistId) {
    return React__default.createElement(
      'div',
      { className: 'brightcove-playlist-player' },
      React__default.createElement(ReactPlayerLoader, { accountId: accountId, playerId: playerId, playlistId: playlistId, attrs: { className: 'brightcove' } })
    );
  } else if (accountId && playerId && videoId) {
    return React__default.createElement(
      'div',
      { className: 'brightcove-video-player' },
      React__default.createElement(ReactPlayerLoader, { accountId: accountId, playerId: playerId, videoId: videoId, attrs: { className: 'brightcove' } })
    );
  } else {
    return null;
  }
};

export default HighlightenVideo;
