mirror of
https://github.com/MODSetter/SurfSense.git
synced 2026-04-25 00:36:31 +02:00
fix: improved lighthouse scores
- Implemented dynamic import for HeroCarousel to improve loading performance. - Added IntersectionObserver to manage video playback based on visibility. - Removed unused video prefetching logic and adjusted autoplay conditions. - Updated button styles for better consistency and user experience.
This commit is contained in:
DESKTOP-RTLN3BA\$punk
parent
354d80bf7a
commit
7f134efa03
2 changed files with 80 additions and 112 deletions
|
|
@ -1,14 +1,38 @@
|
|||
"use client";
|
||||
import { AnimatePresence, motion } from "motion/react";
|
||||
import dynamic from "next/dynamic";
|
||||
import Link from "next/link";
|
||||
import type React from "react";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import Balancer from "react-wrap-balancer";
|
||||
import { HeroCarousel } from "@/components/ui/hero-carousel";
|
||||
import { AUTH_TYPE, BACKEND_URL } from "@/lib/env-config";
|
||||
import { trackLoginAttempt } from "@/lib/posthog/events";
|
||||
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
|
||||
const GoogleLogo = ({ className }: { className?: string }) => (
|
||||
<svg className={className} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
|
|
|
|||
|
|
@ -81,11 +81,23 @@ function HeroCarouselCard({
|
|||
|
||||
useEffect(() => {
|
||||
const video = videoRef.current;
|
||||
if (video) {
|
||||
setHasLoaded(false);
|
||||
video.currentTime = 0;
|
||||
video.play().catch(() => {});
|
||||
}
|
||||
if (!video) return;
|
||||
|
||||
setHasLoaded(false);
|
||||
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]);
|
||||
|
||||
const handleCanPlay = useCallback(() => {
|
||||
|
|
@ -94,7 +106,7 @@ function HeroCarouselCard({
|
|||
|
||||
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="min-w-0">
|
||||
<h3 className="truncate text-base font-semibold text-neutral-900 sm:text-xl dark:text-white">
|
||||
|
|
@ -108,7 +120,7 @@ function HeroCarouselCard({
|
|||
<video
|
||||
ref={videoRef}
|
||||
src={src}
|
||||
autoPlay
|
||||
preload="none"
|
||||
loop
|
||||
muted
|
||||
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() {
|
||||
const [activeIndex, setActiveIndex] = useState(0);
|
||||
const [isGifExpanded, setIsGifExpanded] = useState(false);
|
||||
const [isHovered, setIsHovered] = useState(false);
|
||||
const [isTabVisible, setIsTabVisible] = useState(true);
|
||||
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(
|
||||
(newIndex: number) => {
|
||||
directionRef.current = newIndex >= activeIndex ? "forward" : "backward";
|
||||
|
|
@ -210,11 +166,7 @@ function HeroCarousel() {
|
|||
const isForward = directionRef.current === "forward";
|
||||
|
||||
return (
|
||||
<div
|
||||
className="w-full py-4 sm:py-8"
|
||||
onMouseEnter={() => setIsHovered(true)}
|
||||
onMouseLeave={() => setIsHovered(false)}
|
||||
>
|
||||
<div className="w-full py-4 sm:py-8">
|
||||
<div className="relative mx-auto w-full max-w-[900px]">
|
||||
<AnimatePresence mode="wait" initial={false}>
|
||||
<motion.div
|
||||
|
|
@ -234,53 +186,45 @@ function HeroCarousel() {
|
|||
</AnimatePresence>
|
||||
</div>
|
||||
|
||||
<div className="relative z-5 mt-6 flex items-center justify-center gap-4">
|
||||
<button
|
||||
type="button"
|
||||
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"
|
||||
aria-label="Previous slide"
|
||||
>
|
||||
<ChevronLeft className="size-5" />
|
||||
</button>
|
||||
<div className="relative z-5 mt-4 flex items-center justify-center gap-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => !isGifExpanded && goToPrev()}
|
||||
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"
|
||||
>
|
||||
<ChevronLeft className="size-5" />
|
||||
</button>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
{carouselItems.map((_, i) => (
|
||||
<button
|
||||
key={`dot_${i}`}
|
||||
type="button"
|
||||
onClick={() => !isGifExpanded && goTo(i)}
|
||||
className={`relative h-2 overflow-hidden rounded-full transition-all duration-300 ${
|
||||
<div className="flex items-center">
|
||||
{carouselItems.map((_, i) => (
|
||||
<button
|
||||
key={`dot_${i}`}
|
||||
type="button"
|
||||
onClick={() => !isGifExpanded && goTo(i)}
|
||||
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
|
||||
? shouldAutoPlay
|
||||
? "w-6 bg-neutral-300 dark:bg-neutral-600"
|
||||
: "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"
|
||||
? "w-6 bg-neutral-900 dark:bg-white"
|
||||
: "w-2.5 bg-neutral-300 hover:bg-neutral-400 dark:bg-neutral-600 dark:hover:bg-neutral-500"
|
||||
}`}
|
||||
aria-label={`Go to slide ${i + 1}`}
|
||||
>
|
||||
{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>
|
||||
/>
|
||||
</button>
|
||||
))}
|
||||
</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>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue