From 040ea52a2543c7bdf6e717637ebf84eed6bab72a Mon Sep 17 00:00:00 2001 From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com> Date: Mon, 1 Sep 2025 18:16:31 +0000 Subject: [PATCH] Update home page to use a new grid layout and improve search functionality Refactors the home page to replace VideoCard with NetflixGrid, removes unused video categorization logic, and enhances search functionality by implementing conditional refetching based on search query changes. Replit-Commit-Author: Agent Replit-Commit-Session-Id: 890577b1-c154-40a4-a177-a0c6d55320c3 Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/890577b1-c154-40a4-a177-a0c6d55320c3/aC8PHqS --- client/src/pages/home.tsx | 257 +++++++++++--------------------------- 1 file changed, 70 insertions(+), 187 deletions(-) diff --git a/client/src/pages/home.tsx b/client/src/pages/home.tsx index 3f8ad41..494112c 100644 --- a/client/src/pages/home.tsx +++ b/client/src/pages/home.tsx @@ -1,11 +1,10 @@ -import { useState, useEffect, useRef } from "react"; +import { useState, useEffect } from "react"; import { useQuery } from "@tanstack/react-query"; import { type Video } from "@shared/schema"; -import VideoCard from "@/components/video-card"; +import NetflixGrid from "@/components/netflix-grid"; import { Link } from "wouter"; import { Input } from "@/components/ui/input"; -import { Search, Menu, X, ChevronLeft, ChevronRight } from "lucide-react"; -import { Button } from "@/components/ui/button"; +import { Search, Menu, X } from "lucide-react"; interface VideosResponse { videos: Video[]; @@ -13,18 +12,13 @@ interface VideosResponse { hasMore: boolean; } -interface VideoCategory { - title: string; - videos: Video[]; -} - export default function Home() { const [searchQuery, setSearchQuery] = useState(""); const [allVideos, setAllVideos] = useState([]); const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false); // Fetch videos with optimized loading - const { data: videosResponse, isLoading } = useQuery({ + const { data: videosResponse, isLoading, refetch } = useQuery({ queryKey: ["/api/videos", { limit: 150, offset: 0, @@ -59,70 +53,38 @@ export default function Home() { } }, [videosResponse]); - const handleVideoClick = (video: Video) => { - window.location.href = `/video/${video.id}`; - }; - - // Organize videos into categories like ZDF - const getCategories = (): VideoCategory[] => { - if (!allVideos.length) return []; - - // Sort by views for popular content - const sortedByViews = [...allVideos].sort((a, b) => (b.views || 0) - (a.views || 0)); - - // Sort by date for recently added - const sortedByDate = [...allVideos].sort((a, b) => - new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime() - ); - - // FOLX STADL videos - const folxStadlVideos = allVideos.filter(video => - video.title.includes("FOLX STADL") || video.title.includes("FOLXSTADL") - ); - - return [ - { - title: "Meist Angesehen", - videos: sortedByViews.slice(0, 12) - }, - ...(folxStadlVideos.length > 0 ? [{ - title: "FOLX STADL Shows", - videos: folxStadlVideos.slice(0, 12) - }] : []), - { - title: "Neue Videos", - videos: sortedByDate.slice(0, 12) - }, - { - title: "Alle Videos", - videos: allVideos.slice(0, 15) - } - ]; - }; + // Only refetch when search changes + useEffect(() => { + if (searchQuery !== undefined) { + refetch(); + } + }, [searchQuery, refetch]); return ( -
- {/* Header */} -
+
+ {/* STICKY HEADER */} +
- {/* Logo */} - -
-
-
-

go4.video

- + {/* Left side - Logo */} +
+ +
+
+
+

go4.video

+ +
- {/* Navigation & Search */} -
- {/* Desktop Navigation */} + {/* Right side - Navigation + Search */} +
+ {/* Desktop navigation */}
@@ -133,151 +95,72 @@ export default function Home() { placeholder="Videos suchen..." value={searchQuery} onChange={(e) => setSearchQuery(e.target.value)} - className="bg-white/10 border-white/20 text-white placeholder-white/50 w-64" + className="bg-white border border-gray-300 rounded-lg px-4 py-2 pl-10 text-sm text-gray-900 placeholder-gray-500 focus:outline-none focus:border-bunny-blue transition-colors w-64" /> - +
{/* Mobile menu button */}
+
- {/* Mobile Menu */} - {isMobileMenuOpen && ( -
-
+ +
+
+
-
- - {/* Main Content */} -
- {isLoading ? ( -
- {Array.from({ length: 3 }).map((_, categoryIndex) => ( -
-
-
- {Array.from({ length: 6 }).map((_, index) => ( -
-
-
-
-
-
-
- ))} -
-
- ))} -
- ) : ( -
- {getCategories().map((category, categoryIndex) => ( - - ))} -
- )} - - {allVideos.length === 0 && !isLoading && ( -
-
Keine Videos gefunden
-
- )}
); -} - -interface CategorySectionProps { - category: VideoCategory; - onVideoClick: (video: Video) => void; -} - -function CategorySection({ category, onVideoClick }: CategorySectionProps) { - const scrollRef = useRef(null); - - const scroll = (direction: 'left' | 'right') => { - if (scrollRef.current) { - const scrollAmount = 320; // Width of one card + gap - const newScrollLeft = scrollRef.current.scrollLeft + (direction === 'right' ? scrollAmount : -scrollAmount); - scrollRef.current.scrollTo({ - left: newScrollLeft, - behavior: 'smooth' - }); - } - }; - - return ( -
-

- {category.title} -

- -
- {/* Left scroll button */} - - - {/* Right scroll button */} - - - {/* Scrollable video row */} -
- {category.videos.map((video) => ( -
- -
- ))} -
-
-
- ); } \ No newline at end of file