apunkt/SurfSense
1
0
Fork 0
mirror of https://github.com/MODSetter/SurfSense.git synced 2026-05-25 19:15:18 +02:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #924 from MODSetter/fix_hero

Browse source 
fix: improved lighthouse scores
This commit is contained in:
Rohan Verma 2026-03-24 01:44:44 -07:00 • committed by GitHub
commit c41e79860f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 80 additions and 112 deletions
Download patch file Download diff file Expand all files Collapse all files

26
surfsense_web/components/homepage/hero-section.tsx
View file

@ -1,14 +1,38 @@
"use client"; "use client";
import { AnimatePresence, motion } from "motion/react"; import { AnimatePresence, motion } from "motion/react";
import dynamic from "next/dynamic";
import Link from "next/link"; import Link from "next/link";
import type React from "react"; import type React from "react";
import { useEffect, useRef, useState } from "react"; import { useEffect, useRef, useState } from "react";
import Balancer from "react-wrap-balancer"; import Balancer from "react-wrap-balancer";
import { HeroCarousel } from "@/components/ui/hero-carousel";
import { AUTH_TYPE, BACKEND_URL } from "@/lib/env-config"; import { AUTH_TYPE, BACKEND_URL } from "@/lib/env-config";
import { trackLoginAttempt } from "@/lib/posthog/events"; import { trackLoginAttempt } from "@/lib/posthog/events";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
const HeroCarousel = dynamic(
() => import("@/components/ui/hero-carousel").then((m) => ({ default: m.HeroCarousel })),
{
ssr: false,
loading: () => (
<div className="w-full py-4 sm:py-8">
<div className="mx-auto w-full max-w-[900px]">
<div className="overflow-hidden rounded-2xl border border-neutral-200/60 bg-white shadow-xl sm:rounded-3xl dark:border-neutral-700/60 dark:bg-neutral-900">
<div className="flex items-center gap-3 border-b border-neutral-200/60 px-4 py-3 sm:px-6 sm:py-4 dark:border-neutral-700/60">
<div className="min-w-0 flex-1">
<div className="h-5 w-32 animate-pulse rounded bg-neutral-200 dark:bg-neutral-700" />
<div className="mt-2 h-4 w-64 animate-pulse rounded bg-neutral-100 dark:bg-neutral-800" />
</div>
</div>
<div className="bg-neutral-50 p-2 sm:p-3 dark:bg-neutral-950">
<div className="aspect-video w-full animate-pulse rounded-lg bg-neutral-100 sm:rounded-xl dark:bg-neutral-800" />
</div>
</div>
</div>
</div>
),
}
);
// Official Google "G" logo with brand colors // Official Google "G" logo with brand colors
const GoogleLogo = ({ className }: { className?: string }) => ( const GoogleLogo = ({ className }: { className?: string }) => (
<svg className={className} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <svg className={className} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">

166
surfsense_web/components/ui/hero-carousel.tsx
View file

@ -81,11 +81,23 @@ function HeroCarouselCard({
useEffect(() => { useEffect(() => {
const video = videoRef.current; const video = videoRef.current;
if (video) { if (!video) return;
setHasLoaded(false);
video.currentTime = 0; setHasLoaded(false);
video.play().catch(() => {}); video.currentTime = 0;
}
const observer = new IntersectionObserver(
([entry]) => {
if (entry.isIntersecting) {
video.play().catch(() => {});
observer.disconnect();
}
},
{ threshold: 0.1 }
);
observer.observe(video);
return () => observer.disconnect();
}, [src]); }, [src]);
const handleCanPlay = useCallback(() => { const handleCanPlay = useCallback(() => {
@ -94,7 +106,7 @@ function HeroCarouselCard({
return ( return (
<> <>
<div className="rounded-2xl border border-neutral-200/60 bg-white shadow-xl sm:rounded-3xl dark:border-neutral-700/60 dark:bg-neutral-900"> <div className="overflow-hidden rounded-2xl border border-neutral-200/60 bg-white shadow-xl sm:rounded-3xl dark:border-neutral-700/60 dark:bg-neutral-900">
<div className="flex items-center gap-3 border-b border-neutral-200/60 px-4 py-3 sm:px-6 sm:py-4 dark:border-neutral-700/60"> <div className="flex items-center gap-3 border-b border-neutral-200/60 px-4 py-3 sm:px-6 sm:py-4 dark:border-neutral-700/60">
<div className="min-w-0"> <div className="min-w-0">
<h3 className="truncate text-base font-semibold text-neutral-900 sm:text-xl dark:text-white"> <h3 className="truncate text-base font-semibold text-neutral-900 sm:text-xl dark:text-white">
@ -108,7 +120,7 @@ function HeroCarouselCard({
<video <video
ref={videoRef} ref={videoRef}
src={src} src={src}
autoPlay preload="none"
loop loop
muted muted
playsInline playsInline
@ -129,67 +141,11 @@ function HeroCarouselCard({
); );
} }
function usePrefetchVideos() {
const videosRef = useRef<HTMLVideoElement[]>([]);
useEffect(() => {
let cancelled = false;
async function prefetch() {
for (const item of carouselItems) {
if (cancelled) break;
await new Promise<void>((resolve) => {
const video = document.createElement("video");
video.preload = "auto";
video.src = item.src;
video.oncanplaythrough = () => resolve();
video.onerror = () => resolve();
setTimeout(resolve, 10000);
videosRef.current.push(video);
});
}
}
prefetch();
return () => {
cancelled = true;
videosRef.current = [];
};
}, []);
}
const AUTOPLAY_MS = 6000;
function HeroCarousel() { function HeroCarousel() {
const [activeIndex, setActiveIndex] = useState(0); const [activeIndex, setActiveIndex] = useState(0);
const [isGifExpanded, setIsGifExpanded] = useState(false); const [isGifExpanded, setIsGifExpanded] = useState(false);
const [isHovered, setIsHovered] = useState(false);
const [isTabVisible, setIsTabVisible] = useState(true);
const directionRef = useRef<"forward" | "backward">("forward"); const directionRef = useRef<"forward" | "backward">("forward");
usePrefetchVideos();
const shouldAutoPlay = !isGifExpanded && !isHovered && isTabVisible;
useEffect(() => {
if (!shouldAutoPlay) return;
const id = setTimeout(() => {
directionRef.current = "forward";
setActiveIndex((prev) =>
prev >= carouselItems.length - 1 ? 0 : prev + 1
);
}, AUTOPLAY_MS);
return () => clearTimeout(id);
}, [activeIndex, shouldAutoPlay]);
useEffect(() => {
const handler = () => setIsTabVisible(!document.hidden);
document.addEventListener("visibilitychange", handler);
return () => document.removeEventListener("visibilitychange", handler);
}, []);
const goTo = useCallback( const goTo = useCallback(
(newIndex: number) => { (newIndex: number) => {
directionRef.current = newIndex >= activeIndex ? "forward" : "backward"; directionRef.current = newIndex >= activeIndex ? "forward" : "backward";
@ -210,11 +166,7 @@ function HeroCarousel() {
const isForward = directionRef.current === "forward"; const isForward = directionRef.current === "forward";
return ( return (
<div <div className="w-full py-4 sm:py-8">
className="w-full py-4 sm:py-8"
onMouseEnter={() => setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}
>
<div className="relative mx-auto w-full max-w-[900px]"> <div className="relative mx-auto w-full max-w-[900px]">
<AnimatePresence mode="wait" initial={false}> <AnimatePresence mode="wait" initial={false}>
<motion.div <motion.div
@ -234,53 +186,45 @@ function HeroCarousel() {
</AnimatePresence> </AnimatePresence>
</div> </div>
<div className="relative z-5 mt-6 flex items-center justify-center gap-4"> <div className="relative z-5 mt-4 flex items-center justify-center gap-2">
<button <button
type="button" type="button"
onClick={() => !isGifExpanded && goToPrev()} onClick={() => !isGifExpanded && goToPrev()}
className="flex size-9 items-center justify-center rounded-full border border-neutral-200 bg-white text-neutral-700 shadow-sm transition-colors hover:bg-neutral-100 dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-700" className="flex size-11 items-center justify-center rounded-full border border-neutral-200 bg-white text-neutral-700 shadow-sm transition-colors hover:bg-neutral-100 touch-manipulation dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-700"
aria-label="Previous slide" aria-label="Previous slide"
> >
<ChevronLeft className="size-5" /> <ChevronLeft className="size-5" />
</button> </button>
<div className="flex items-center gap-2"> <div className="flex items-center">
{carouselItems.map((_, i) => ( {carouselItems.map((_, i) => (
<button <button
key={`dot_${i}`} key={`dot_${i}`}
type="button" type="button"
onClick={() => !isGifExpanded && goTo(i)} onClick={() => !isGifExpanded && goTo(i)}
className={`relative h-2 overflow-hidden rounded-full transition-all duration-300 ${ className="flex h-11 min-w-[28px] items-center justify-center touch-manipulation"
aria-label={`Go to slide ${i + 1}`}
>
<span
className={`block h-2.5 rounded-full transition-all duration-300 ${
i === activeIndex i === activeIndex
? shouldAutoPlay ? "w-6 bg-neutral-900 dark:bg-white"
? "w-6 bg-neutral-300 dark:bg-neutral-600" : "w-2.5 bg-neutral-300 hover:bg-neutral-400 dark:bg-neutral-600 dark:hover:bg-neutral-500"
: "w-6 bg-neutral-900 dark:bg-white"
: "w-2 bg-neutral-300 hover:bg-neutral-400 dark:bg-neutral-600 dark:hover:bg-neutral-500"
}`} }`}
aria-label={`Go to slide ${i + 1}`} />
> </button>
{i === activeIndex && shouldAutoPlay && ( ))}
<motion.span
key={`progress_${activeIndex}`}
className="absolute inset-0 origin-left rounded-full bg-neutral-900 dark:bg-white"
initial={{ scaleX: 0 }}
animate={{ scaleX: 1 }}
transition={{ duration: AUTOPLAY_MS / 1000, ease: "linear" }}
/>
)}
</button>
))}
</div>
<button
type="button"
onClick={() => !isGifExpanded && goToNext()}
className="flex size-9 items-center justify-center rounded-full border border-neutral-200 bg-white text-neutral-700 shadow-sm transition-colors hover:bg-neutral-100 dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-700"
aria-label="Next slide"
>
<ChevronRight className="size-5" />
</button>
</div> </div>
<button
type="button"
onClick={() => !isGifExpanded && goToNext()}
className="flex size-11 items-center justify-center rounded-full border border-neutral-200 bg-white text-neutral-700 shadow-sm transition-colors hover:bg-neutral-100 touch-manipulation dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-700"
aria-label="Next slide"
>
<ChevronRight className="size-5" />
</button>
</div>
</div> </div>
); );
} }