Merge pull request #141 from HackHPI/feature/website-2.0-vimeo-facade

Added vimeo facade on load
HackHPI · Mar 18, 2024 · e0865f0 · e0865f0
2 parents b4b8a85 + fd855c5
commit e0865f0
Showing 1 changed file with 35 additions and 8 deletions.
diff --git a/src/components/WhatToExpect/WhatToExpect.jsx b/src/components/WhatToExpect/WhatToExpect.jsx
@@ -1,9 +1,15 @@
-import {Box, Container, Grid, Typography} from "@mui/material";
+"use client"
+import {Box, Container, Grid, IconButton, Typography} from "@mui/material";
 import {WindowCard} from "../WindowCard/WindowCard.jsx";
 import HackHPIWrapper from "../Theme/HackHPIWrapper.jsx";
+import {PlayArrow} from "@mui/icons-material";
+import {useState} from "react";
 
 function WhatToExpect() {
 
+    const [playVideo, setPlayVideo] = useState(false)
+    const vimeoVideoId = "867922224"
+
     return (
         <HackHPIWrapper>
 
@@ -28,13 +34,34 @@ function WhatToExpect() {
                     <Grid item xs={12} md={4} sx={{display: "flex", justifyContent: "center"}}>
                         <Box sx={{width: "100%"}}>
                             <WindowCard>
-                                <iframe
-                                    src="https://player.vimeo.com/video/867922224?h=30cf0b8b55&title=0&byline=0&portrait=0"
-                                    style={{aspectRatio: "16 / 9", borderRadius: "5px", width: "100%"}}
-                                    allow="autoPlay; fullscreen; picture-in-picture"
-                                    allowFullScreen
-                                    title={"Image Movie"}
-                                />
+                                {playVideo ? (
+                                    <iframe
+                                        src={`https://player.vimeo.com/video/${vimeoVideoId}?h=30cf0b8b55&title=0&byline=0&portrait=0&autoplay=1&muted=1`}
+                                        style={{aspectRatio: "16 / 9", borderRadius: "5px", width: "100%", border: 0}}
+                                        allow="autoPlay; fullscreen; picture-in-picture"
+                                        allowFullScreen
+                                        title={"Image Movie"}
+                                    />
+                                ) : (
+                                    <Box
+                                        style={{
+                                            aspectRatio: "16 / 9",
+                                            borderRadius: "5px",
+                                            width: "100%",
+                                            background: `linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)), url(https://vumbnail.com/${vimeoVideoId}.jpg)`,
+                                            backgroundRepeat: "no-repeat",
+                                            backgroundSize: "cover",
+                                            display: "flex",
+                                            alignItems: "center",
+                                            justifyContent: "center",
+                                        }}
+                                    >
+                                        <IconButton onClick={() => setPlayVideo(true)}>
+                                            <PlayArrow sx={{fontSize: "3rem"}}/>
+                                        </IconButton>
+                                    </Box>
+                                )}
+
                             </WindowCard>
                         </Box>
                     </Grid>