@wulperstudio/cms/organisms/Blocks/BlockVideoCustom/styled.js

Wulper Studio Library Components CMS

import { Box, IconButton, alpha, styled } from '@mui/material';
export var ContainerVideo = styled(Box, {
  shouldForwardProp: function shouldForwardProp(prop) {
    return prop !== 'variantAspectRatio' && prop !== 'maxHeightVideo';
  }
})(function (_ref) {
  var variantAspectRatio = _ref.variantAspectRatio,
    maxHeightVideo = _ref.maxHeightVideo,
    theme = _ref.theme;
  return Object.assign({
    position: 'relative',
    overflow: 'hidden',
    borderRadius: '1rem',
    boxShadow: theme.shadows[1],
    maxHeight: maxHeightVideo != null ? maxHeightVideo : 'unset'
  }, variantAspectRatio === '16:9' && {
    aspectRatio: '16 / 9'
  }, variantAspectRatio === '4:3' && {
    aspectRatio: '4 / 3'
  }, variantAspectRatio === '3:2' && {
    aspectRatio: '3 / 2'
  }, variantAspectRatio === '8:5' && {
    aspectRatio: '8 / 5'
  }, variantAspectRatio === '1:1' && {
    aspectRatio: '1 / 1'
  });
});
export var CustomVideo = styled('video')(function () {
  return {
    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'
  };
});
export var CustomIconPlay = styled(IconButton)(function () {
  return {
    backgroundColor: alpha('#000', 0.04),
    position: 'absolute',
    top: '50%',
    left: '50%',
    transform: 'translate(-50%,-50%)',
    zIndex: 2,
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    transition: 'background-color .2s',
    width: '90px',
    height: '90px',
    '&:hover': {
      cursor: 'pointer',
      backgroundColor: alpha('#000', 0.08)
    }
  };
});
export var VariantDefault = styled(Box, {
  shouldForwardProp: function shouldForwardProp(prop) {
    return prop !== 'variantAspectRatio' && prop !== 'maxHeightVideo' && prop !== 'backgroundImage';
  }
})(function (_ref2) {
  var variantAspectRatio = _ref2.variantAspectRatio,
    maxHeightVideo = _ref2.maxHeightVideo,
    backgroundImage = _ref2.backgroundImage,
    theme = _ref2.theme;
  return Object.assign({
    padding: 0,
    position: 'relative',
    margin: 'auto',
    boxShadow: theme.shadows[1],
    borderRadius: '16px',
    background: "url(".concat(backgroundImage, ") no-repeat top"),
    backgroundSize: 'cover',
    maxHeight: maxHeightVideo != null ? maxHeightVideo : 'unset'
  }, variantAspectRatio === '16:9' && {
    aspectRatio: '16 / 9'
  }, variantAspectRatio === '4:3' && {
    aspectRatio: '4 / 3'
  }, variantAspectRatio === '3:2' && {
    aspectRatio: '3 / 2'
  }, variantAspectRatio === '8:5' && {
    aspectRatio: '8 / 5'
  }, variantAspectRatio === '1:1' && {
    aspectRatio: '1 / 1'
  });
});
export var ContainerVariantDefault = styled(Box, {
  shouldForwardProp: function shouldForwardProp(prop) {
    return prop !== 'variantAspectRatio';
  }
})(function (_ref3) {
  var variantAspectRatio = _ref3.variantAspectRatio;
  return {
    position: 'relative',
    borderRadius: '1rem',
    overflow: 'hidden',
    '&::before': Object.assign({
      content: '" "',
      display: 'block'
    }, variantAspectRatio === '16:9' && {
      paddingTop: '56.25%'
    }, variantAspectRatio === '4:3' && {
      paddingTop: '75%'
    }, variantAspectRatio === '3:2' && {
      paddingTop: '66.66%'
    }, variantAspectRatio === '8:5' && {
      paddingTop: '62.5%'
    }, variantAspectRatio === '1:1' && {
      paddingTop: '100%'
    }),
    '& .react-player': {
      position: 'absolute',
      top: 0,
      left: 0,
      width: '100%',
      height: '100%'
    }
  };
});