Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 | 43x 43x 819x 819x 819x 819x 819x 819x 819x 819x 819x 819x | import React from "react";
import { Box, BoxProps } from "@mui/material";
import {
animationAssets,
DEFAULT_ANIMATION,
pageAnimations,
PageAnimationsType,
} from "./animations";
import { VIDEO_BASE_URL } from "@constants/constants";
import { styled } from "@theme/v2/Provider";
import { useCustomThemeV2 } from "@theme/hooks/useCustomThemeV2";
const BANNER_BREAKPOINT = 2050;
interface GiveAnimationWrapperProps extends BoxProps {
videoProps?: React.VideoHTMLAttributes<HTMLVideoElement>;
page: PageAnimationsType;
fullscreen?: boolean;
}
const GiveAnimationWrapper: React.FC<GiveAnimationWrapperProps> = ({
children,
videoProps,
page,
fullscreen,
...rest
}) => {
const { isMobileView } = useCustomThemeV2();
const device = isMobileView ? "mobile" : "desktop";
function getAnimationForPage(page: PageAnimationsType) {
const animationKey = pageAnimations[page];
Iif (!animationKey) return DEFAULT_ANIMATION[device];
const animationSrc = fullscreen
? animationAssets[animationKey]["fullscreen"]
: animationAssets[animationKey][device];
return `${VIDEO_BASE_URL}/${animationSrc}`;
}
return (
<AnimationContainer {...rest}>
<StyledVideo
data-testid="banner-video"
autoPlay
muted
loop
playsInline
preload="none"
className="banner-video"
{...videoProps}
>
<source src={getAnimationForPage(page)} type="video/mp4" />
</StyledVideo>
<ContentContainer>{children}</ContentContainer>
</AnimationContainer>
);
};
export default GiveAnimationWrapper;
const StyledVideo = styled("video")(() => ({
overflow: "hidden",
position: "absolute",
width: "100%",
height: "100%",
objectFit: "cover",
top: 0,
left: 0,
zIndex: 0,
borderRadius: "inherit",
}));
const ContentContainer = styled(Box)(({ theme }) => ({
zIndex: 1,
position: "relative",
height: "100%",
display: "flex",
flexDirection: "column",
width: "100%",
maxWidth: "1920px",
[theme.breakpoints.up(BANNER_BREAKPOINT)]: {
padding: "64px 64px 0 64px",
},
}));
const AnimationContainer = styled(Box)(() => ({
minHeight: "300px",
display: "flex",
justifyContent: "center",
}));
|