@wulperstudio/cms/node/organisms/Blocks/BlockVideoNative/index.js

Wulper Studio Library Components CMS

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.BlockVideoNative = void 0;
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireDefault(require("react"));
var _react2 = require("@iconify/react");
var _material = require("@mui/material");
var _helpers = require("../../../helpers");
var _jsxRuntime = require("react/jsx-runtime");
var _excluded = ["sx"],
  _excluded2 = ["sx"],
  _excluded3 = ["sx", "component"];
var BlockVideoNative = exports.BlockVideoNative = function BlockVideoNative(_ref) {
  var srcVideo = _ref.srcVideo,
    iconName = _ref.iconName,
    containerProps = _ref.containerProps,
    contentProps = _ref.contentProps,
    videoProps = _ref.videoProps;
  var theme = (0, _material.useTheme)();
  var videoRef = _react["default"].useRef(null);
  var _React$useState = _react["default"].useState(true),
    _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
    isPlayButton = _React$useState2[0],
    setIsPlayButton = _React$useState2[1];
  var _ref2 = containerProps || {},
    sx = _ref2.sx,
    restContainerProps = (0, _objectWithoutProperties2["default"])(_ref2, _excluded);
  var _ref3 = contentProps || {},
    sxContent = _ref3.sx,
    restContentProps = (0, _objectWithoutProperties2["default"])(_ref3, _excluded2);
  var _ref4 = videoProps || {},
    sxVideo = _ref4.sx,
    _ref4$component = _ref4.component,
    component = _ref4$component === void 0 ? 'video' : _ref4$component,
    restVideoProps = (0, _objectWithoutProperties2["default"])(_ref4, _excluded3);
  var handlePlayVideo = _react["default"].useCallback(function () {
    if (videoRef != null && videoRef.current) {
      videoRef.current.muted = false;
      videoRef.current.play();
      videoRef.current.currentTime = 0;
      setIsPlayButton(false);
    }
  }, []);
  var handlePauseVideo = _react["default"].useCallback(function () {
    if (videoRef != null && videoRef.current) {
      videoRef.current.pause();
      setIsPlayButton(true);
    }
  }, []);
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, Object.assign({
    onClick: function onClick(e) {
      e.stopPropagation();
      handlePauseVideo();
    },
    sx: Object.assign({
      maxWidth: '100%',
      padding: 0,
      position: 'relative',
      width: '100%',
      margin: 'auto',
      boxShadow: theme.shadows[1],
      borderRadius: '16px',
      backgroundSize: 'cover'
    }, sx)
  }, restContainerProps, {
    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, Object.assign({
      sx: Object.assign({
        position: 'relative',
        borderRadius: '16px',
        overflow: 'hidden',
        '&::before': {
          content: '" "',
          display: 'block',
          paddingBottom: '56.25%'
        },
        '& iframe': {
          position: 'absolute',
          top: 0,
          left: 0,
          width: '100%',
          height: '100%'
        }
      }, sxContent)
    }, restContentProps, {
      children: [isPlayButton && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.IconButton, {
        onClick: function onClick(e) {
          e.stopPropagation();
          handlePlayVideo();
        },
        sx: {
          position: 'absolute',
          backgroundColor: 'rgba(0, 0, 0, 0.5)',
          top: '50%',
          left: '50%',
          zIndex: 10,
          transform: 'translate(-50%,-50%)',
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
          transition: 'color .2s',
          width: '90px',
          height: '90px',
          '&:hover': {
            cursor: 'pointer'
          }
        },
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Icon, {
          icon: iconName || _helpers.ICONS_NAME.play,
          color: theme.palette.background["default"],
          width: 60,
          height: 60
        })
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, Object.assign({
        ref: videoRef,
        component: component,
        autoPlay: true,
        muted: true,
        src: srcVideo,
        sx: Object.assign({
          cursor: 'pointer',
          height: '100%',
          left: '49.9%',
          minHeight: '102%',
          minWidth: '101%',
          objectFit: 'cover',
          position: 'absolute',
          top: '50%',
          transform: 'translate(-50%, -50%)',
          width: '100%',
          transitionDelay: '1s',
          opacity: 1,
          background: 'transparent'
        }, sxVideo)
      }, restVideoProps))]
    }))
  }));
};