feature(website): finalize the video hero section (#846)

socialincome-san · Jun 16, 2024 · 7179136 · 7179136
1 parent 751437c
commit 7179136
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 18 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/website/src/app/[lang]/[region]/v2/(home)/(components)/mux-video.tsx b/website/src/app/[lang]/[region]/v2/(home)/(components)/mux-video.tsx
@@ -1,19 +1,65 @@
 'use client';
 
+import { PauseIcon, PlayIcon, SpeakerWaveIcon, SpeakerXMarkIcon } from '@heroicons/react/24/solid';
 import MuxVideo from '@mux/mux-video-react';
+import { Button } from '@socialincome/ui';
+import { useEffect, useRef, useState } from 'react';
 
 const MuxVideoComponent = () => {
+	const ref = useRef<HTMLVideoElement>(null);
+	const [muted, setMuted] = useState(true);
+	const [playing, setPlaying] = useState(false);
+
+	useEffect(() => {
+		if (playing) {
+			ref.current?.play();
+		} else {
+			ref.current?.pause();
+		}
+	}, [playing]);
+
 	return (
-		<MuxVideo
-			className="h-full w-full object-cover"
-			playbackId="KHN8ZJ7Zn7noPy8AHUToA4VSf017EdoKpkKmyp02Wr13o"
-			// playbackId="QAjK00JKjEY9lojsht02VLckXDzrETx02glBSQ2WR9y3nk" //Portrait video
-			poster="https://image.mux.com/KHN8ZJ7Zn7noPy8AHUToA4VSf017EdoKpkKmyp02Wr13o/thumbnail.jpg?time=0"
-			loop
-			muted
-			autoPlay
-			playsInline
-		/>
+		<>
+			<MuxVideo
+				ref={ref}
+				className="h-full w-full object-cover"
+				playbackId="KHN8ZJ7Zn7noPy8AHUToA4VSf017EdoKpkKmyp02Wr13o"
+				// playbackId="QAjK00JKjEY9lojsht02VLckXDzrETx02glBSQ2WR9y3nk" //Portrait video
+				poster="https://image.mux.com/KHN8ZJ7Zn7noPy8AHUToA4VSf017EdoKpkKmyp02Wr13o/thumbnail.jpg?time=0"
+				loop
+				muted={muted}
+				autoPlay={playing}
+				playsInline
+			/>
+			<div className="absolute bottom-16 left-8 z-10">
+				<div className="flex flex-row space-x-2">
+					<Button
+						variant="ghost"
+						size="icon"
+						className="bg-muted rounded-full p-2.5"
+						onClick={() => setPlaying((prevState) => !prevState)}
+					>
+						{playing ? (
+							<PauseIcon className="text-muted-foreground h-6 w-6" />
+						) : (
+							<PlayIcon className="text-muted-foreground h-6 w-6" />
+						)}
+					</Button>
+					<Button
+						variant="ghost"
+						size="icon"
+						className="bg-muted rounded-full p-2.5"
+						onClick={() => setMuted((prevState) => !prevState)}
+					>
+						{muted ? (
+							<SpeakerXMarkIcon className="text-muted-foreground h-6 w-6" />
+						) : (
+							<SpeakerWaveIcon className="text-muted-foreground h-6 w-6" />
+						)}
+					</Button>
+				</div>
+			</div>
+		</>
 	);
 };
 

diff --git a/website/src/app/[lang]/[region]/v2/(home)/(sections)/hero-video.tsx b/website/src/app/[lang]/[region]/v2/(home)/(sections)/hero-video.tsx
@@ -13,18 +13,19 @@ export async function HeroVideo({ lang }: DefaultParams) {
 	return (
 		<div className="relative h-screen w-full">
 			<MuxVideoComponent />
-			<div className="absolute left-2 right-2 top-[10%] mx-auto max-w-4xl md:top-[30%]">
-				<div className="flex flex-col items-center">
-					<div className="text-center text-white">
+			<div className="absolute inset-2">
+				<div className=" flex h-full flex-col justify-around">
+					<div className="hidden md:block" />
+					<div className="mx-auto max-w-4xl text-center text-white">
 						{translator.t<{ text: string; color?: FontColor }[]>('section-1.title-1').map((title, index) => (
-							<Typography as="span" size="6xl" weight="medium" key={index} lineHeight="normal" color={title.color}>
+							<Typography as="span" size="6xl" weight="medium" key={index} lineHeight="tight" color={title.color}>
 								{title.text}{' '}
 							</Typography>
 						))}
 					</div>
+					<Button className="mx-auto hidden md:block">Handle Jetzt</Button>
 				</div>
 			</div>
-			<Button className="absolute inset-x-0 bottom-16 mx-auto w-48">Handle Jetzt</Button>
 		</div>
 	);
 }