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

Wulper Studio Library Components CMS

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.VariantDefault = exports.CustomVideo = exports.CustomIconPlay = exports.ContainerVideo = exports.ContainerVariantDefault = void 0;
var _material = require("@mui/material");
var ContainerVideo = exports.ContainerVideo = (0, _material.styled)(_material.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'
  });
});
var CustomVideo = exports.CustomVideo = (0, _material.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'
  };
});
var CustomIconPlay = exports.CustomIconPlay = (0, _material.styled)(_material.IconButton)(function () {
  return {
    backgroundColor: (0, _material.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: (0, _material.alpha)('#000', 0.08)
    }
  };
});
var VariantDefault = exports.VariantDefault = (0, _material.styled)(_material.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'
  });
});
var ContainerVariantDefault = exports.ContainerVariantDefault = (0, _material.styled)(_material.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%'
    }
  };
});