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

Wulper Studio Library Components CMS

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.BlockVideoProgress = void 0;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireDefault(require("react"));
var _react2 = require("@iconify/react");
var _reactPlayer = _interopRequireDefault(require("react-player"));
var _material = require("@mui/material");
var _icons = require("../../../helpers/icons");
var _components = require("../../../components");
var _ref4 = require("../../../utils/ref");
var _jsxRuntime = require("react/jsx-runtime");
var _excluded = ["srcVideo", "backgroundImage", "iconName", "containerProps", "contentProps", "children", "isProgress", "playerRef", "setProgressValue"],
  _excluded2 = ["sx"],
  _excluded3 = ["sx"];
/* eslint-disable object-curly-newline */
/* eslint-disable max-len */
/* eslint-disable no-undef */
var BlockVideoProgressBase = function BlockVideoProgressBase(_ref) {
  var srcVideo = _ref.srcVideo,
    backgroundImage = _ref.backgroundImage,
    iconName = _ref.iconName,
    containerProps = _ref.containerProps,
    contentProps = _ref.contentProps,
    children = _ref.children,
    isProgress = _ref.isProgress,
    playerRef = _ref.playerRef,
    setProgressValue = _ref.setProgressValue,
    props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
  var theme = (0, _material.useTheme)();
  var reactPlayerRef = _react["default"].useRef(null);
  var _React$useState = _react["default"].useState(10),
    _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
    progress = _React$useState2[0],
    setProgress = _React$useState2[1];
  var _React$useState3 = _react["default"].useState(false),
    _React$useState4 = (0, _slicedToArray2["default"])(_React$useState3, 2),
    isPlayButton = _React$useState4[0],
    setIsPlayButton = _React$useState4[1];
  var _ref2 = containerProps || {},
    sx = _ref2.sx,
    restContainerProps = (0, _objectWithoutProperties2["default"])(_ref2, _excluded2);
  var _ref3 = contentProps || {},
    sxContent = _ref3.sx,
    restContentProps = (0, _objectWithoutProperties2["default"])(_ref3, _excluded3);
  var handlePlayVideo = function handlePlayVideo() {
    setIsPlayButton(function (prev) {
      return !prev;
    });
  };
  var handleRef = _react["default"].useCallback(function (ref) {
    reactPlayerRef.current = ref;
    if (playerRef) {
      (0, _ref4.assocRefToPropRef)(ref, playerRef);
    }
  }, [playerRef]);
  _react["default"].useEffect(function () {
    var timer;
    if (isProgress) {
      timer = setInterval(function () {
        setProgress(function (prevProgress) {
          return prevProgress >= 100 ? 0 : prevProgress + 10;
        });
      }, 400);
    }
    return function () {
      clearInterval(timer);
    };
  }, [isProgress]);
  _react["default"].useEffect(function () {
    if (progress === 100) {
      setProgressValue == null || setProgressValue(100);
      setIsPlayButton(true);
      setProgress(10);
    }
  }, [progress]);
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, Object.assign({
    sx: Object.assign({
      maxWidth: '100%',
      padding: 0,
      position: 'relative',
      width: '100%',
      margin: 'auto',
      boxShadow: theme.shadows[1],
      borderRadius: '16px',
      background: '#000'
    }, !isPlayButton && {
      background: "url(".concat(backgroundImage, ") no-repeat top"),
      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%'
        },
        '& .react-player': {
          position: 'absolute',
          top: 0,
          left: 0,
          width: '100%',
          height: '100%'
        }
      }, sxContent)
    }, restContentProps, {
      children: [!isPlayButton && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
        sx: {
          position: 'absolute',
          top: '50%',
          left: '50%',
          transform: 'translate(-50%,-50%)',
          zIndex: 2,
          color: 'background.default'
        },
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.CircularProgressWithLabel, {
          value: progress,
          size: 70,
          color: "inherit",
          thickness: 2,
          sx: {
            visibility: isProgress ? 'visible' : 'hidden'
          },
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.IconButton, {
            onClick: function onClick() {
              return handlePlayVideo();
            },
            sx: {
              backgroundColor: (0, _material.alpha)('#000', 0.04),
              zIndex: 2,
              display: 'flex',
              justifyContent: 'center',
              alignItems: 'center',
              transition: 'color .2s',
              width: '70px',
              height: '70px',
              '&:hover': {
                cursor: 'pointer',
                backgroundColor: (0, _material.alpha)('#000', 0.04)
              }
            },
            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Icon, {
              icon: iconName || _icons.ICONS_NAME.play,
              color: theme.palette.background["default"],
              width: 50,
              height: 50
            })
          })
        })
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactPlayer["default"], Object.assign({
        className: "react-player",
        height: "100%",
        controls: true,
        playing: true,
        muted: true,
        url: srcVideo,
        width: "100%"
      }, props, {
        ref: handleRef,
        style: Object.assign({
          display: isPlayButton ? 'block' : 'none'
        }, props.style)
      })), children]
    }))
  }));
};
var BlockVideoProgress = exports.BlockVideoProgress = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(BlockVideoProgressBase, Object.assign({}, props, {
    playerRef: ref
  }));
});