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

Wulper Studio Library Components CMS

import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
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 */
import React from 'react';
import { Icon } from '@iconify/react';
import ReactPlayer from 'react-player';
import { alpha, Box, useTheme, IconButton } from '@mui/material';
import { ICONS_NAME } from '../../../helpers/icons';
import { CircularProgressWithLabel } from '../../../components';
import { assocRefToPropRef } from '../../../utils/ref';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
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 = _objectWithoutProperties(_ref, _excluded);
  var theme = useTheme();
  var reactPlayerRef = React.useRef(null);
  var _React$useState = React.useState(10),
    _React$useState2 = _slicedToArray(_React$useState, 2),
    progress = _React$useState2[0],
    setProgress = _React$useState2[1];
  var _React$useState3 = React.useState(false),
    _React$useState4 = _slicedToArray(_React$useState3, 2),
    isPlayButton = _React$useState4[0],
    setIsPlayButton = _React$useState4[1];
  var _ref2 = containerProps || {},
    sx = _ref2.sx,
    restContainerProps = _objectWithoutProperties(_ref2, _excluded2);
  var _ref3 = contentProps || {},
    sxContent = _ref3.sx,
    restContentProps = _objectWithoutProperties(_ref3, _excluded3);
  var handlePlayVideo = function handlePlayVideo() {
    setIsPlayButton(function (prev) {
      return !prev;
    });
  };
  var handleRef = React.useCallback(function (ref) {
    reactPlayerRef.current = ref;
    if (playerRef) {
      assocRefToPropRef(ref, playerRef);
    }
  }, [playerRef]);
  React.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.useEffect(function () {
    if (progress === 100) {
      setProgressValue == null || setProgressValue(100);
      setIsPlayButton(true);
      setProgress(10);
    }
  }, [progress]);
  return /*#__PURE__*/_jsx(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__*/_jsxs(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__*/_jsx(Box, {
        sx: {
          position: 'absolute',
          top: '50%',
          left: '50%',
          transform: 'translate(-50%,-50%)',
          zIndex: 2,
          color: 'background.default'
        },
        children: /*#__PURE__*/_jsx(CircularProgressWithLabel, {
          value: progress,
          size: 70,
          color: "inherit",
          thickness: 2,
          sx: {
            visibility: isProgress ? 'visible' : 'hidden'
          },
          children: /*#__PURE__*/_jsx(IconButton, {
            onClick: function onClick() {
              return handlePlayVideo();
            },
            sx: {
              backgroundColor: alpha('#000', 0.04),
              zIndex: 2,
              display: 'flex',
              justifyContent: 'center',
              alignItems: 'center',
              transition: 'color .2s',
              width: '70px',
              height: '70px',
              '&:hover': {
                cursor: 'pointer',
                backgroundColor: alpha('#000', 0.04)
              }
            },
            children: /*#__PURE__*/_jsx(Icon, {
              icon: iconName || ICONS_NAME.play,
              color: theme.palette.background["default"],
              width: 50,
              height: 50
            })
          })
        })
      }), /*#__PURE__*/_jsx(ReactPlayer, 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]
    }))
  }));
};
export var BlockVideoProgress = /*#__PURE__*/React.forwardRef(function (props, ref) {
  return /*#__PURE__*/_jsx(BlockVideoProgressBase, Object.assign({}, props, {
    playerRef: ref
  }));
});