From c7ed5a36d5d4ee7c9a0e54ff04c6119d361f5a2a Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Fri, 29 Aug 2025 23:23:48 +0000
Subject: [PATCH] Improve carousel functionality and visual presentation for
 video content

Refactors the `SimpleCarousel` component to use horizontal scrolling with duplicated content for an infinite scrolling effect. Updates styling for video cards, including dynamic sizing and improved visual overlays for "Top 10" content. Removes fixed poster styling from `index.css`.

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/kdQ95gE
---
 client/src/components/simple-carousel.tsx | 53 ++++++++++++++---------
 client/src/index.css                      | 20 ---------
 2 files changed, 33 insertions(+), 40 deletions(-)

diff --git a/client/src/components/simple-carousel.tsx b/client/src/components/simple-carousel.tsx
index 7349373..8c1a567 100644
--- a/client/src/components/simple-carousel.tsx
+++ b/client/src/components/simple-carousel.tsx
@@ -122,27 +122,40 @@ export default function SimpleCarousel({ category, onVideoClick }: SimpleCarouse
           <ChevronRight className="w-6 h-6 text-white" />
         </button>
 
-        {/* Flex container z poster postavitvijo */}
-        <div className="flex flex-wrap justify-center gap-2.5 p-2.5">
-          {category.videos.map((video, videoIndex) => (
-            <div key={video.id} className="poster-container relative">
-              {/* Top 10 Number overlay for first category */}
-              {category.title.includes("Top 10") && (
-                <div className="absolute top-1 left-1 z-30 text-white font-black text-xl md:text-2xl drop-shadow-2xl pointer-events-none"
-                     style={{ 
-                       textShadow: '4px 4px 8px rgba(0,0,0,0.8), -2px -2px 4px rgba(0,0,0,0.6)',
-                       WebkitTextStroke: '1px rgba(0,0,0,0.8)',
-                     }}>
-                  {videoIndex + 1}
+        {/* Scroll container */}
+        <div 
+          ref={scrollContainerRef}
+          className="overflow-x-auto pb-8"
+          style={{ 
+            scrollbarWidth: 'none', 
+            msOverflowStyle: 'none'
+          }}
+        >
+          <div className="flex space-x-4 w-max">
+            {/* Create many copies for infinite feel */}
+            {Array.from({ length: 20 }).map((_, copyIndex) => 
+              category.videos.map((video, videoIndex) => (
+                <div key={`${video.id}-${copyIndex}-${videoIndex}`} className="flex-shrink-0 w-48 md:w-80 relative individual-video-hover">
+                  {/* Top 10 Number overlay for first category */}
+                  {category.title.includes("Top 10") && (
+                    <div className="absolute top-1 left-1 z-30 text-white font-black text-3xl md:text-5xl drop-shadow-2xl pointer-events-none individual-video-hover:opacity-0 transition-opacity duration-300"
+                         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)',
+                           transform: 'none'
+                         }}>
+                      {videoIndex + 1}
+                    </div>
+                  )}
+                  <VideoCard
+                    video={video}
+                    onClick={onVideoClick}
+                    className="w-full hover:scale-105 transition-all duration-300 hover:shadow-2xl rounded-md overflow-hidden relative"
+                  />
                 </div>
-              )}
-              <VideoCard
-                video={video}
-                onClick={onVideoClick}
-                className="poster w-full h-auto max-w-full hover:scale-105 transition-all duration-300 hover:shadow-2xl rounded-md overflow-hidden relative"
-              />
-            </div>
-          ))}
+              ))
+            ).flat()}
+          </div>
         </div>
       </div>
     </div>
diff --git a/client/src/index.css b/client/src/index.css
index cd79817..a689e01 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -401,26 +401,6 @@ input[data-testid*="search"]::placeholder {
   font-display: swap;
 }
 
-/* Poster postavitev style */
-.poster-container {
-  width: 150px; /* Fiksna širina slik */
-}
-
-.poster {
-  width: 150px; /* Fiksna širina slik */
-  height: auto; /* Ohranjanje razmerja stranic */
-  max-width: 100%; /* Prilagoditev na manjših zaslonih */
-}
-
-@media (max-width: 768px) {
-  .poster-container {
-    width: 120px; /* Manjša širina za mobilne naprave */
-  }
-  .poster {
-    width: 120px; /* Manjša širina za mobilne naprave */
-  }
-}
-
 /* Hide picture-in-picture button on all video elements */
 video::-webkit-media-controls-picture-in-picture-button {
   display: none !important;