Add Netflix-style video browsing with categorized rows

Introduces a new `NetflixGrid` component to display videos in categorized rows, similar to Netflix. This includes styling for hidden scrollbars, adding a `className` prop to `VideoCard`, and updating the home page to conditionally render either the `VideoGrid` or the new `NetflixGrid` based on the `viewMode`.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 2eb1084e-b728-4449-9231-f1665924c8d5
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/2eb1084e-b728-4449-9231-f1665924c8d5/spLs1aN

client/src/components/netflix-grid.tsx

@@ -0,0 +1,206 @@
+import { useState, useRef } from "react";
+import { type Video } from "@shared/schema";
+import VideoCard from "./video-card";
+import BunnyVideoModal from "./bunny-video-modal";
+import { Button } from "@/components/ui/button";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+
+interface VideoCategory {
+  title: string;
+  videos: Video[];
+}
+
+interface NetflixGridProps {
+  videos: Video[];
+  isLoading: boolean;
+}
+
+export default function NetflixGrid({ videos, isLoading }: NetflixGridProps) {
+  const [selectedVideo, setSelectedVideo] = useState<Video | null>(null);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  const handleVideoClick = (video: Video) => {
+    setSelectedVideo(video);
+    setIsModalOpen(true);
+  };
+
+  const handleCloseModal = () => {
+    setIsModalOpen(false);
+    setSelectedVideo(null);
+  };
+
+  const handleVideoChange = (video: Video) => {
+    setSelectedVideo(video);
+  };
+
+  // Organize videos into categories
+  const getCategories = (): VideoCategory[] => {
+    if (!videos.length) return [];
+
+    // Sort by views for top content
+    const sortedByViews = [...videos].sort((a, b) => (b.views || 0) - (a.views || 0));
+    
+    // Sort by date for recently added
+    const sortedByDate = [...videos].sort((a, b) => 
+      new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
+    );
+
+    return [
+      {
+        title: "Top 10 Videjev Danes",
+        videos: sortedByViews.slice(0, 10)
+      },
+      {
+        title: "Priljubljeni Videi",
+        videos: sortedByViews.slice(10, 20)
+      },
+      {
+        title: "Nazadnje Dodano",
+        videos: sortedByDate.slice(0, 15)
+      },
+      {
+        title: "Trending Sedaj",
+        videos: videos.slice(0, 12)
+      }
+    ];
+  };
+
+  if (isLoading && videos.length === 0) {
+    return (
+      <div className="space-y-8">
+        {Array.from({ length: 3 }).map((_, categoryIndex) => (
+          <div key={categoryIndex} className="space-y-4">
+            <div className="h-6 bg-bunny-gray rounded w-48 animate-pulse"></div>
+            <div className="flex space-x-4 overflow-hidden">
+              {Array.from({ length: 6 }).map((_, index) => (
+                <div key={index} className="flex-shrink-0 w-64 animate-pulse">
+                  <div className="bg-bunny-gray aspect-video rounded-xl mb-3"></div>
+                  <div className="space-y-2">
+                    <div className="h-4 bg-bunny-gray rounded w-3/4"></div>
+                    <div className="h-3 bg-bunny-gray rounded w-1/2"></div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        ))}
+      </div>
+    );
+  }
+
+  if (videos.length === 0) {
+    return (
+      <div className="text-center py-12">
+        <div className="text-bunny-muted text-lg mb-4">
+          Ni najdenih videjev
+        </div>
+        <p className="text-sm text-bunny-muted">
+          Poskusi prilagoditi iskalne ali filter kriterije
+        </p>
+      </div>
+    );
+  }
+
+  const categories = getCategories();
+
+  return (
+    <>
+      <div className="space-y-12">
+        {categories.map((category, categoryIndex) => (
+          <CategoryRow
+            key={categoryIndex}
+            category={category}
+            onVideoClick={handleVideoClick}
+          />
+        ))}
+      </div>
+
+      <BunnyVideoModal
+        video={selectedVideo}
+        isOpen={isModalOpen}
+        onClose={handleCloseModal}
+        videos={videos}
+        onVideoChange={handleVideoChange}
+      />
+    </>
+  );
+}
+
+interface CategoryRowProps {
+  category: VideoCategory;
+  onVideoClick: (video: Video) => void;
+}
+
+function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
+  const scrollRef = useRef<HTMLDivElement>(null);
+
+  const scroll = (direction: 'left' | 'right') => {
+    if (scrollRef.current) {
+      const scrollAmount = 320; // Width of card + gap
+      const currentScroll = scrollRef.current.scrollLeft;
+      const targetScroll = direction === 'left' 
+        ? currentScroll - scrollAmount 
+        : currentScroll + scrollAmount;
+        
+      scrollRef.current.scrollTo({
+        left: targetScroll,
+        behavior: 'smooth'
+      });
+    }
+  };
+
+  return (
+    <div className="relative group">
+      <h2 className="text-2xl font-bold text-bunny-light mb-6 px-4">
+        {category.title}
+      </h2>
+      
+      <div className="relative">
+        {/* Left scroll button */}
+        <Button
+          onClick={() => scroll('left')}
+          className="absolute left-2 top-1/2 -translate-y-1/2 z-10 bg-black/60 hover:bg-black/80 text-white border-none p-2 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300"
+          size="sm"
+        >
+          <ChevronLeft className="w-6 h-6" />
+        </Button>
+
+        {/* Right scroll button */}
+        <Button
+          onClick={() => scroll('right')}
+          className="absolute right-2 top-1/2 -translate-y-1/2 z-10 bg-black/60 hover:bg-black/80 text-white border-none p-2 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300"
+          size="sm"
+        >
+          <ChevronRight className="w-6 h-6" />
+        </Button>
+
+        {/* Scrollable video row */}
+        <div
+          ref={scrollRef}
+          className="flex space-x-4 overflow-x-auto scrollbar-hide pb-4 px-4"
+          style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}
+        >
+          {category.videos.map((video, index) => (
+            <div key={video.id} className="flex-shrink-0 w-80 relative group">
+              {/* Top 10 Number overlay for first category */}
+              {category.title.includes("Top 10") && index < 10 && (
+                <div className="absolute top-2 left-2 z-20 text-white font-black text-7xl drop-shadow-2xl"
+                     style={{ 
+                       textShadow: '4px 4px 8px rgba(0,0,0,0.8), -2px -2px 4px rgba(0,0,0,0.6)',
+                       WebkitTextStroke: '2px rgba(0,0,0,0.8)' 
+                     }}>
+                  {index + 1}
+                </div>
+              )}
+              <VideoCard
+                video={video}
+                onClick={onVideoClick}
+                className="w-full hover:scale-110 hover:z-10 transition-all duration-500 group-hover:shadow-2xl rounded-lg overflow-hidden"
+              />
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

client/src/components/video-card.tsx

@@ -5,6 +5,7 @@ import HLSPreviewThumbnail from "./hls-preview-thumbnail";
 interface VideoCardProps {
   video: Video;
   onClick: (video: Video) => void;
+  className?: string;
 }
 
 function formatDuration(seconds: number): string {
@@ -40,11 +41,11 @@ function formatDate(date: Date | string): string {
   return `${Math.floor(diffDays / 30)} month${Math.floor(diffDays / 30) > 1 ? 's' : ''} ago`;
 }
 
-export default function VideoCard({ video, onClick }: VideoCardProps) {
+export default function VideoCard({ video, onClick, className = "" }: VideoCardProps) {
   return (
     <div 
       data-testid={`card-video-${video.id}`}
-      className="video-card transition-transform duration-200 hover:scale-[1.02] p-3"
+      className={`video-card transition-transform duration-200 hover:scale-[1.02] p-3 ${className}`}
     >
       {/* Simple thumbnail with fallback - no HLS loading until needed */}
       <div 

client/src/index.css

@@ -106,6 +106,16 @@
     overflow: hidden;
   }
 
+  /* Hide scrollbars for Netflix-style horizontal scrolling */
+  .scrollbar-hide {
+    -ms-overflow-style: none;  /* Internet Explorer 10+ */
+    scrollbar-width: none;  /* Firefox */
+  }
+  
+  .scrollbar-hide::-webkit-scrollbar { 
+    display: none;  /* Safari and Chrome */
+  }
+
   /* Video player volume slider styles */
   .slider {
     -webkit-appearance: none;

client/src/pages/home.tsx

@@ -3,6 +3,7 @@ import { useQuery } from "@tanstack/react-query";
 import { type Video } from "@shared/schema";
 import SearchHeader from "@/components/search-header";
 import VideoGrid from "@/components/video-grid";
+import NetflixGrid from "@/components/netflix-grid";
 import go4LogoPath from "@assets/go4_1756394900352.png";
 
 
@@ -84,6 +85,12 @@ export default function Home() {
         <div className="absolute top-10 right-2 w-0 h-0 border-l-[70px] border-l-transparent border-r-[70px] border-r-transparent border-b-[100px] border-b-blue-400/8 rotate-12 z-0"></div>
         <div className="absolute top-1/2 left-2 w-0 h-0 border-l-[60px] border-l-transparent border-r-[60px] border-r-transparent border-b-[85px] border-b-purple-400/8 -rotate-12 z-0"></div>
         <div className="absolute bottom-1/4 right-2 w-0 h-0 border-l-[50px] border-l-transparent border-r-[50px] border-r-transparent border-b-[70px] border-b-cyan-400/8 rotate-45 z-0"></div>
+        {viewMode === "grid" ? (
+          <NetflixGrid
+            videos={allVideos}
+            isLoading={isLoading}
+          />
+        ) : (
           <VideoGrid
             videos={allVideos}
             isLoading={isLoading}
@@ -91,6 +98,7 @@ export default function Home() {
             onLoadMore={() => {}}
             viewMode={viewMode}
           />
+        )}
       </main>