From 9d5bb39483e1b9631395c2d14fb2f8dbc90ec4f5 Mon Sep 17 00:00:00 2001
From: Cedric Rische <cedric.rische@cedsoft.de>
Date: Sun, 10 Mar 2024 20:43:24 +0100
Subject: [PATCH 1/2] Added vimeo facade on load

---
 src/components/WhatToExpect/WhatToExpect.jsx | 42 ++++++++++++++++----
 1 file changed, 34 insertions(+), 8 deletions(-)

diff --git a/src/components/WhatToExpect/WhatToExpect.jsx b/src/components/WhatToExpect/WhatToExpect.jsx
index 8aa2350..d61a313 100644
--- a/src/components/WhatToExpect/WhatToExpect.jsx
+++ b/src/components/WhatToExpect/WhatToExpect.jsx
@@ -1,9 +1,14 @@
-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)
+
     return (
         <HackHPIWrapper>
 
@@ -28,13 +33,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/867922224?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/867922224.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>

From fd855c5e27e096515dc7dd950ed419569859f3dd Mon Sep 17 00:00:00 2001
From: Cedric Rische <cedric.rische@cedsoft.de>
Date: Sun, 10 Mar 2024 20:48:06 +0100
Subject: [PATCH 2/2] Removed magic number

---
 src/components/WhatToExpect/WhatToExpect.jsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/WhatToExpect/WhatToExpect.jsx b/src/components/WhatToExpect/WhatToExpect.jsx
index d61a313..94f4395 100644
--- a/src/components/WhatToExpect/WhatToExpect.jsx
+++ b/src/components/WhatToExpect/WhatToExpect.jsx
@@ -8,6 +8,7 @@ import {useState} from "react";
 function WhatToExpect() {
 
     const [playVideo, setPlayVideo] = useState(false)
+    const vimeoVideoId = "867922224"
 
     return (
         <HackHPIWrapper>
@@ -35,7 +36,7 @@ function WhatToExpect() {
                             <WindowCard>
                                 {playVideo ? (
                                     <iframe
-                                        src="https://player.vimeo.com/video/867922224?h=30cf0b8b55&title=0&byline=0&portrait=0&autoplay=1&muted=1"
+                                        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
@@ -47,7 +48,7 @@ function WhatToExpect() {
                                             aspectRatio: "16 / 9",
                                             borderRadius: "5px",
                                             width: "100%",
-                                            background: `linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)), url(https://vumbnail.com/867922224.jpg)`,
+                                            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",