import { useState, useEffect } from "react"; import { useQuery } from "@tanstack/react-query"; import { type Video } from "@shared/schema"; import VideoGrid from "@/components/video-grid"; import { Link } from "wouter"; import { Input } from "@/components/ui/input"; import { Search } from "lucide-react"; import NetflixGrid from "@/components/netflix-grid"; import go4LogoPath from "@assets/go4_1756394900352.png"; interface VideosResponse { videos: Video[]; total: number; hasMore: boolean; } export default function Home() { const [searchQuery, setSearchQuery] = useState(""); const [viewMode, setViewMode] = useState<"grid" | "list">("grid"); const [offset, setOffset] = useState(0); const [allVideos, setAllVideos] = useState([]); // Fetch videos with aggressive caching for speed const { data: videosResponse, isLoading, refetch } = useQuery({ queryKey: ["/api/videos", { limit: 1000, // Naloži vse videje naenkrat offset: 0, search: searchQuery || undefined }], queryFn: async ({ queryKey }) => { const [, params] = queryKey as [string, any]; const searchParams = new URLSearchParams(); Object.entries(params).forEach(([key, value]) => { if (value !== undefined) { searchParams.append(key, String(value)); } }); const response = await fetch(`/api/videos?${searchParams}`); if (!response.ok) { throw new Error('Failed to fetch videos'); } return response.json(); }, staleTime: 5 * 60 * 1000, // 5 minutes cache - much faster gcTime: 10 * 60 * 1000, // 10 minutes retention refetchOnWindowFocus: false, // Don't refetch on focus refetchOnReconnect: false // Don't refetch on reconnect }); // Update videos when new data comes in useEffect(() => { if (videosResponse) { setAllVideos(videosResponse.videos); } }, [videosResponse]); // Reset videos when search changes const handleSearch = (query: string) => { setSearchQuery(query); setAllVideos([]); }; // Only refetch when search changes, not offset (for speed) useEffect(() => { if (searchQuery !== undefined) { refetch(); } }, [searchQuery, refetch]); return (
{/* Simple Header - MUST scroll with page */}
{/* Logo */}

go4.video

{/* Navigation */}
Home FOLX STADL setSearchQuery(e.target.value)} style={{background: 'white', border: '1px solid #ccc', borderRadius: '8px', padding: '8px 12px', width: '200px', fontSize: '14px'}} />
{/* Trikotniki na robovih - ne prekrivajo video kartic */}
{viewMode === "grid" ? ( ) : ( {}} viewMode={viewMode} /> )}
{/* Footer with large triangle design */}
); }