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

Wulper Studio Library Components CMS

import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
var _excluded = ["sx"],
  _excluded2 = ["sx"],
  _excluded3 = ["sx", "component"];
import React from 'react';
import { Icon } from '@iconify/react';
import { Box, useTheme, IconButton } from '@mui/material';
import { ICONS_NAME } from '../../../helpers';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export var BlockVideoNative = function BlockVideoNative(_ref) {
  var srcVideo = _ref.srcVideo,
    iconName = _ref.iconName,
    containerProps = _ref.containerProps,
    contentProps = _ref.contentProps,
    videoProps = _ref.videoProps;
  var theme = useTheme();
  var videoRef = React.useRef(null);
  var _React$useState = React.useState(true),
    _React$useState2 = _slicedToArray(_React$useState, 2),
    isPlayButton = _React$useState2[0],
    setIsPlayButton = _React$useState2[1];
  var _ref2 = containerProps || {},
    sx = _ref2.sx,
    restContainerProps = _objectWithoutProperties(_ref2, _excluded);
  var _ref3 = contentProps || {},
    sxContent = _ref3.sx,
    restContentProps = _objectWithoutProperties(_ref3, _excluded2);
  var _ref4 = videoProps || {},
    sxVideo = _ref4.sx,
    _ref4$component = _ref4.component,
    component = _ref4$component === void 0 ? 'video' : _ref4$component,
    restVideoProps = _objectWithoutProperties(_ref4, _excluded3);
  var handlePlayVideo = React.useCallback(function () {
    if (videoRef != null && videoRef.current) {
      videoRef.current.muted = false;
      videoRef.current.play();
      videoRef.current.currentTime = 0;
      setIsPlayButton(false);
    }
  }, []);
  var handlePauseVideo = React.useCallback(function () {
    if (videoRef != null && videoRef.current) {
      videoRef.current.pause();
      setIsPlayButton(true);
    }
  }, []);
  return /*#__PURE__*/_jsx(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__*/_jsxs(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__*/_jsx(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__*/_jsx(Icon, {
          icon: iconName || ICONS_NAME.play,
          color: theme.palette.background["default"],
          width: 60,
          height: 60
        })
      }), /*#__PURE__*/_jsx(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))]
    }))
  }));
};