@guestbell/react-page-plugins/build/video/Renderer/VideoHtmlRenderer.js

Plugins we use in GuestBell for working with amazing react-page package

/*
 * This file is part of ORY Editor.
 *
 * ORY Editor is free software: you can redistribute it and/or modify
 * it under the terms of the GNU Lesser General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * ORY Editor is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU Lesser General Public License for more details.
 *
 * You should have received a copy of the GNU Lesser General Public License
 * along with ORY Editor.  If not, see <http://www.gnu.org/licenses/>.
 *
 * @license LGPL-3.0
 * @copyright 2016-2018 Aeneas Rekkas
 * @author Aeneas Rekkas <aeneas+oss@aeneas.io>
 *
 */

import * as React from 'react';
import PlayArrow from '@mui/icons-material/PlayArrow';
import { iconStyle } from '../common/styles';
import { lazyLoad } from '@react-page/editor';
import PaddingComponent from '../../common/utils/PaddingComponent';
import { VideoTypeEnum } from '../types/enum/VideoTypeEnum';
import { defaultVideoState } from '../default/state';

// react player is big, better lazy load it.
var ReactPlayer = lazyLoad(function () {
  return import('react-player');
});
var Display = function Display(props) {
  var _props$data = props.data,
    _props$data2 = _props$data === void 0 ? defaultVideoState : _props$data,
    _props$data2$type = _props$data2.type,
    type = _props$data2$type === void 0 ? props.defaultType : _props$data2$type,
    embeddedSrc = _props$data2.embeddedSrc,
    uploadedSrc = _props$data2.uploadedSrc,
    readOnly = props.readOnly;
  return /*#__PURE__*/React.createElement(PaddingComponent, {
    state: props.data
  }, /*#__PURE__*/React.createElement("div", {
    className: "ory-plugins-content-video__container"
  }, type === VideoTypeEnum.Embedded ? embeddedSrc ? /*#__PURE__*/React.createElement("div", {
    style: {
      position: 'relative',
      height: 0,
      paddingBottom: '65.25%'
    }
  }, readOnly ? null : /*#__PURE__*/React.createElement("div", {
    style: {
      position: 'absolute',
      top: 0,
      left: 0,
      right: 0,
      bottom: 0,
      zIndex: 10
    }
  }), /*#__PURE__*/React.createElement(ReactPlayer, {
    url: embeddedSrc,
    height: "100%",
    width: "100%",
    style: {
      position: 'absolute',
      width: '100%',
      height: '100%'
    }
  })) : /*#__PURE__*/React.createElement("div", {
    className: "ory-plugins-content-video-placeholder"
  }, /*#__PURE__*/React.createElement(PlayArrow, {
    style: iconStyle
  })) : null, type === VideoTypeEnum.Uploaded ? uploadedSrc ? /*#__PURE__*/React.createElement("div", {
    className: "ory-content-plugin-html5-video"
  }, /*#__PURE__*/React.createElement("video", {
    autoPlay: true,
    controls: true,
    loop: true,
    muted: true,
    width: "100%",
    key: uploadedSrc
  }, /*#__PURE__*/React.createElement("source", {
    src: uploadedSrc,
    type: "video/".concat(uploadedSrc.split('.').pop())
  }))) : /*#__PURE__*/React.createElement("div", {
    className: "ory-plugins-content-video-placeholder"
  }, /*#__PURE__*/React.createElement(PlayArrow, {
    style: iconStyle
  })) : null));
};
export default Display;
//# sourceMappingURL=VideoHtmlRenderer.js.map