@stokr/components-library
Version:
STOKR - Components Library
159 lines (157 loc) • 9.37 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.Video = exports.StyledSlideImage = void 0;
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _styledComponents = _interopRequireWildcard(require("styled-components"));
var sc = _interopRequireWildcard(require("../../constants/style"));
var _reactTransitionGroup = require("react-transition-group");
var _renderToBody = require("../renderToBody");
var _icons = require("../icons");
var _rwd = require("../../styles/rwd");
const _excluded = ["src", "poster", "videoStyle", "isCenter", "isSmallCard", "isInvestingExpanded", "noPlayButton", "play", "prevProps", "onOpen", "onClose", "lightboxAnimationLen", "videoAnimationLen", "animationLen"];
var _templateObject;
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
const Wrapper = _styledComponents.default.div.withConfig({
displayName: "Video__Wrapper",
componentId: "sc-13aeehw-0"
})(["position:relative;cursor:pointer;", " ", ""], _ref => {
let {
videoStyle
} = _ref;
return videoStyle;
}, _ref2 => {
let {
isInvestingExpanded
} = _ref2;
return isInvestingExpanded && (0, _styledComponents.css)(["align-items:center;display:flex;"]);
});
const zIndex = 9999;
const LightboxVideo = _styledComponents.default.div.withConfig({
displayName: "Video__LightboxVideo",
componentId: "sc-13aeehw-1"
})(["display:flex;justify-content:center;align-items:center;position:fixed;left:0;right:0;top:0;bottom:0;z-index:", ";&::before{display:block;content:'';position:fixed;top:0;left:0;bottom:0;right:0;background-color:white;opacity:0.8;z-index:", ";transform-origin:left center;}&.lightbox-enter::before{transform:scaleX(0.01);transition:all ", "ms cubic-bezier(0.785,0.135,0.15,0.86);}&.lightbox-enter-active::before{transform:scaleX(1);}&.lightbox-exit::before{transform:scaleX(1);transform-origin:right center;}&.lightbox-exit-active::before{transform:scaleX(0);transition:all ", "ms cubic-bezier(0.785,0.135,0.15,0.86);transition-delay:", "ms;}video{max-width:80vw;max-height:90vh;position:relative;z-index:", ";box-shadow:0 0 20px 1px black;transition:all 0.4s;", " @media screen and (max-width:768px){max-width:95vw;}}&.lightbox-enter video{transform:scale(0.8) translate3d(-12%,0,0);opacity:0.01;transition:all ", "ms cubic-bezier(0.785,0.135,0.15,0.86);transition-delay:", "ms;}&.lightbox-enter-active video{transform:scale(1) translate3d(0,0,0);opacity:1;}&.lightbox-exit video{transform:scale(1) translate3d(0,0,0);opacity:1;}&.lightbox-exit-active video{transform:scale(0.8) translate3d(13%,0,0);opacity:0;transition:all ", "ms cubic-bezier(0.785,0.135,0.15,0.86);}"], zIndex, zIndex - 1, props => props.lightboxAnimationLen, props => props.lightboxAnimationLen / 2, props => props.videoAnimationLen / 2, zIndex + 1, _rwd.rwdMax.Medium(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n max-width: 88vw;\n "]))), props => props.videoAnimationLen, props => props.lightboxAnimationLen * 0.75, props => props.videoAnimationLen * 0.75);
const PlayButton = _styledComponents.default.div.withConfig({
displayName: "Video__PlayButton",
componentId: "sc-13aeehw-2"
})(["position:absolute;height:100%;left:0;right:0;bottom:0;display:flex;justify-content:center;align-items:", ";z-index:10;", " ", " img{transition:transform 0.3s;position:relative;top:", ";@media screen and (min-width:769px){top:", ";}}&:hover,&:focus,&:active{img{transform:scale(1.25);}}"], _ref3 => {
let {
isSmallCard
} = _ref3;
return isSmallCard ? 'flex-start' : 'center';
}, _ref4 => {
let {
isCenter
} = _ref4;
return isCenter && (0, _styledComponents.css)(["height:calc(100% - 48px);"]);
}, _ref5 => {
let {
isInvestingExpanded
} = _ref5;
return isInvestingExpanded && (0, _styledComponents.css)(["bottom:unset;"]);
}, _ref6 => {
let {
isSmallCard
} = _ref6;
return isSmallCard ? '100px' : '0px';
}, _ref7 => {
let {
isSmallCard
} = _ref7;
return isSmallCard ? '132px' : '0px';
});
const CloseButtonContainer = _styledComponents.default.div.withConfig({
displayName: "Video__CloseButtonContainer",
componentId: "sc-13aeehw-3"
})(["align-items:center;background:", ";cursor:pointer;display:flex;height:48px;justify-content:center;position:absolute;right:0;top:0;width:48px;transition:all 0.2s;z-index:99999;&:hover{background:transparent;svg{transform:rotate(-180deg);fill:#000;}}svg{fill:#fff;transition:all 0.2s;}"], sc.BLUE_BASE_HEX);
const StyledSlideImage = exports.StyledSlideImage = _styledComponents.default.div.withConfig({
displayName: "Video__StyledSlideImage",
componentId: "sc-13aeehw-4"
})(["background-size:cover;background-position:center;height:400px;width:100%;@media screen and (max-width:480px){height:250px;}"]);
const Video = props => {
const [isPlaying, setIsPlaying] = (0, _react.useState)(props.autoplay);
const {
src,
poster,
videoStyle,
isCenter,
isSmallCard,
isInvestingExpanded,
noPlayButton,
play,
prevProps,
onOpen,
onClose,
lightboxAnimationLen = 550,
videoAnimationLen = 440,
animationLen = lightboxAnimationLen + videoAnimationLen
} = props,
otherProps = _objectWithoutProperties(props, _excluded);
const mounted = (0, _react.useRef)(); //initializing .current for componentDidUpdate
(0, _react.useEffect)(() => {
if (!mounted.current) {
// do componentDidMount logic
mounted.current = true;
} else {
// do componentDidUpdate logic
if ((prevProps === null || prevProps === void 0 ? void 0 : prevProps.play) !== play) {
play ? togglePlay() : toggleStop();
}
}
});
const togglePlay = () => {
setIsPlaying(true);
onOpen && onOpen();
document.body.style.overflow = 'hidden';
};
const toggleStop = () => {
setIsPlaying(false);
onClose && onClose();
document.body.style.overflow = 'unset';
};
delete otherProps.onOpen;
delete otherProps.onClose;
return /*#__PURE__*/_react.default.createElement(Wrapper, {
onClick: !noPlayButton ? togglePlay : () => {},
videoStyle: videoStyle,
isInvestingExpanded: isInvestingExpanded
}, poster && poster, !noPlayButton && /*#__PURE__*/_react.default.createElement(PlayButton, {
isCenter: isCenter,
isSmallCard: isSmallCard,
isInvestingExpanded: isInvestingExpanded
}, /*#__PURE__*/_react.default.createElement("img", {
alt: "Play video",
src: require('../../static/images/play-btn.svg')
})), /*#__PURE__*/_react.default.createElement(_renderToBody.RenderToBody, null, /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.CSSTransition, {
in: isPlaying,
timeout: animationLen,
classNames: "lightbox",
unmountOnExit: true
}, /*#__PURE__*/_react.default.createElement(LightboxVideo, {
isPlaying: isPlaying,
onClick: toggleStop,
lightboxAnimationLen: lightboxAnimationLen,
videoAnimationLen: videoAnimationLen
}, /*#__PURE__*/_react.default.createElement(CloseButtonContainer, null, /*#__PURE__*/_react.default.createElement(_icons.X, null)), /*#__PURE__*/_react.default.createElement("video", _extends({
ref: video => video && video.play(),
controls: true,
src: src
}, otherProps))))));
};
exports.Video = Video;
Video.propTypes = {
src: _propTypes.default.string.isRequired,
autoplay: _propTypes.default.bool,
// Hack to let the component know the default attribute
poster: _propTypes.default.any,
onOpen: _propTypes.default.func,
onClose: _propTypes.default.func
};
var _default = exports.default = Video; //doublecheck: do not know whether this is working, no working storybook to check.