"use client"; import { useState, useEffect, useCallback, useRef, } from "react"; import Image from "next/image"; import { useRouter } from "next/navigation"; import { Play, Info, ChevronLeft, ChevronRight, Volume2, VolumeX } from "lucide-react"; import { useAppDispatch } from "@/store/hooks"; import { stopAll } from "@/store/slices/playerSlice"; import { useSidebar } from "@/lib/SidebarContext"; import { VideoItem } from "@/types/home"; import { usePauseOnInactivity } from "@/hooks/usePauseOnInactivity"; /* ── constants ────────────────────────────────────────────────────────────── */ const SLIDE_MS = 6500; const FADE_MS = 700; /* ── types ────────────────────────────────────────────────────────────────── */ interface Props { items: VideoItem[]; } /* ── helpers ──────────────────────────────────────────────────────────────── */ function Badge({ children, accent }: { children: React.ReactNode; accent?: boolean }) { return ( {children} ); } /* ── FilmstripThumb ──────────────────────────────────────────────────────── */ function FilmstripThumb({ item, active, onClick, }: { item: VideoItem; active: boolean; onClick: () => void; }) { return ( ); } /* ── HeroBannerCarousel ───────────────────────────────────────────────────── */ export function HeroBannerCarousel({ items }: Props) { const router = useRouter(); const dispatch = useAppDispatch(); const { collapse } = useSidebar(); const [activeIdx, setActiveIdx] = useState(0); const [contentKey, setContentKey] = useState(0); // drives content re-animation const [paused, setPaused] = useState(false); const [animKey, setAnimKey] = useState(0); // increments to reset CSS progress animation const [muted, setMuted] = useState(true); const stripRef = useRef(null); const n = items.length; /* ── navigation ──────────────────────────────────────────────────────── */ const goTo = useCallback( (i: number) => { setActiveIdx(i); setContentKey((k) => k + 1); setAnimKey((k) => k + 1); }, [], ); const prev = useCallback(() => goTo((activeIdx - 1 + n) % n), [activeIdx, n, goTo]); const next = useCallback(() => goTo((activeIdx + 1) % n), [activeIdx, n, goTo]); /* ── auto-advance ─────────────────────────────────────────────────────── */ // Single timeout per slide — no 50ms polling. CSS animation handles the progress bar. useEffect(() => { if (n <= 1 || paused) return; const id = setTimeout(() => { setActiveIdx((prev) => (prev + 1) % n); setContentKey((k) => k + 1); setAnimKey((k) => k + 1); }, SLIDE_MS); return () => clearTimeout(id); }, [paused, n, activeIdx]); /* ── pause when tab is hidden ─────────────────────────────────────────── */ useEffect(() => { const onVisibility = () => setPaused(document.hidden); document.addEventListener("visibilitychange", onVisibility); return () => document.removeEventListener("visibilitychange", onVisibility); }, []); /* ── pause when user is inactive for 10 minutes ───────────────────────── */ usePauseOnInactivity(setPaused); /* ── scroll active thumb into view ──────────────────────────────────── */ useEffect(() => { const strip = stripRef.current; if (!strip) return; const el = strip.children[activeIdx] as HTMLElement | undefined; el?.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "center" }); }, [activeIdx]); /* ── keyboard navigation ─────────────────────────────────────────────── */ useEffect(() => { const onKey = (e: KeyboardEvent) => { if (e.key === "ArrowLeft") prev(); if (e.key === "ArrowRight") next(); }; window.addEventListener("keydown", onKey); return () => window.removeEventListener("keydown", onKey); }, [prev, next]); if (!n) return null; const current = items[activeIdx]; /* ── render ──────────────────────────────────────────────────────────── */ return (
setPaused(true)} onMouseLeave={() => setPaused(false)} > {/* ════════════════════════════════════════════════════════════════ BACKGROUND SLIDES — crossfade + Ken Burns ════════════════════════════════════════════════════════════════ */} {items.map((item, i) => { const isActive = i === activeIdx; return (
{item.thumbnail && (
{item.title}
)}
); })} {/* ════════════════════════════════════════════════════════════════ GRADIENT OVERLAYS — multi-layer cinematic scrim ════════════════════════════════════════════════════════════════ */} {/* Left scrim — anchors content readability */}
{/* Bottom scrim */}
{/* Top vignette */}
{/* ════════════════════════════════════════════════════════════════ CONTENT PANEL — animated in on every slide change ════════════════════════════════════════════════════════════════ */}
{/* Badges row */}
{current.category || "Featured"} {current.isPremium && Premium} {current.isNew && ( ● New )}
{/* Title */}

{current.title}

{/* Meta */}
{current.channelName && ( {current.channelName} )} {current.views && ( <> • {current.views} )} {current.duration && ( <> • {current.duration} )} {current.uploadedAt && ( <> • {current.uploadedAt} )}
{/* Action buttons */}
{/* Mute toggle — decorative */}
{/* ════════════════════════════════════════════════════════════════ PREV / NEXT ARROWS — visible only on hover (desktop) ════════════════════════════════════════════════════════════════ */} {n > 1 && ( <> )} {/* ════════════════════════════════════════════════════════════════ BOTTOM CONTROL BAR ════════════════════════════════════════════════════════════════ */} {n > 1 && (
{/* Left: slide counter */}
{String(activeIdx + 1).padStart(2, "0")} / {String(n).padStart(2, "0")}
{/* Mobile: dot indicators */}
{items.map((_, i) => (
{/* Right: filmstrip thumbnails (desktop) */}
{/* Dot indicators alongside thumbnails */}
{items.map((_, i) => (
))}
{items.map((item, i) => ( goTo(i)} /> ))}
)} {/* ════════════════════════════════════════════════════════════════ PROGRESS BAR — CSS animation (no JS polling) ════════════════════════════════════════════════════════════════ */} {n > 1 && (
)}
); }