aljaz/goose
1
0
Fork 0
mirror of https://github.com/aljazceru/goose.git synced 2025-12-18 22:54:24 +01:00
Code Issues Packages Projects Releases Wiki Activity

add video to homepage (#1050)

Browse Source
This commit is contained in:
Ebony Louis
2025-02-03 17:37:04 -05:00
committed by GitHub
parent 90fb2f5358
commit 7cb31a893a
1 changed files with 76 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

121
documentation/src/components/HomepageFeatures/index.tsx
View File

@@ -1,4 +1,5 @@
import type { ReactNode } from "react";
import { useEffect, useRef, useState } from "react";
import clsx from "clsx";
import Heading from "@theme/Heading";
import styles from "./styles.module.css";
@@ -164,35 +165,42 @@ function Quote({ name, github, role, testimonial }: FeatureQuote) {
}
export default function HomepageFeatures(): ReactNode {
const videoRef = useRef<HTMLIFrameElement>(null);
const [videoLoaded, setVideoLoaded] = useState(false);
useEffect(() => {
const observer = new IntersectionObserver(
(entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting && !videoLoaded) {
setVideoLoaded(true); // Load video only when it first appears
}
});
},
{ threshold: 0.5 }
);
if (videoRef.current) {
observer.observe(videoRef.current);
}
return () => {
if (videoRef.current) {
observer.unobserve(videoRef.current);
}
};
}, [videoLoaded]);
return (
<section className={styles.features}>
<div className="container">
<div className="row">
<div className={styles.videoContainer}>
<video
className={`${styles.video} hide-in-dark`}
autoPlay
loop
muted
playsInline
>
<source
src={require("@site/static/videos/hero_light.mp4").default}
type="video/mp4"
/>
<video className={`${styles.video} hide-in-dark`} autoPlay loop muted playsInline>
<source src={require("@site/static/videos/hero_light.mp4").default} type="video/mp4" />
</video>
<video
className={`${styles.video} hide-in-light`}
autoPlay
loop
muted
playsInline
>
<source
src={require("@site/static/videos/hero_dark.mp4").default}
type="video/mp4"
/>
<video className={`${styles.video} hide-in-light`} autoPlay loop muted playsInline>
<source src={require("@site/static/videos/hero_dark.mp4").default} type="video/mp4" />
</video>
</div>
@@ -200,28 +208,51 @@ export default function HomepageFeatures(): ReactNode {
<Feature key={idx} {...props} />
))}
{/* inline styles in the interest of time */}
<div
style={{
display: "flex",
flexDirection: "column",
marginTop: "60px",
}}
>
<h3
style={{
textAlign: "center",
marginBottom: "40px",
}}
>
Loved by engineers
</h3>
<div
style={{
display: "flex",
flexWrap: "wrap",
}}
>
{/* YouTube Video Section */}
<div style={{ width: "100%", textAlign: "center", padding: "2rem 0" }}>
<h2 style={{ fontSize: "3rem", marginBottom: "1rem", fontWeight: "bold" }}>
Meet Codename Goose
</h2>
<div style={{ display: "flex", justifyContent: "center", alignItems: "center" }}>
<div
style={{
position: "relative",
width: "66vw",
height: "37.125vw",
maxWidth: "1100px",
borderRadius: "12px",
boxShadow: "0 8px 24px rgba(0, 0, 0, 0.25)",
overflow: "hidden",
}}
>
<iframe
ref={videoRef}
style={{
position: "absolute",
top: 0,
left: 0,
width: "100%",
height: "100%",
borderRadius: "12px",
}}
src={
videoLoaded
? "https://www.youtube.com/embed/tZCNOe4TTkM?autoplay=1"
: ""
}
title="Goose Introduction"
frameBorder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowFullScreen
></iframe>
</div>
</div>
</div>
{/* Testimonials Section */}
<div style={{ display: "flex", flexDirection: "column", marginTop: "60px" }}>
<h3 style={{ textAlign: "center", marginBottom: "40px" }}>Loved by engineers</h3>
<div style={{ display: "flex", flexWrap: "wrap" }}>
{FeatureQuotes.map((props, idx) => (
<Quote key={idx} {...props} />
))}