sebastjan/videofolxtv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve carousel functionality and visual presentation for video content

Browse Source 
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
This commit is contained in:
sebastjanartic 2025-08-29 23:23:48 +00:00
parent 94b2c8747b
commit c7ed5a36d5
2 changed files with 33 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
client/src/components/simple-carousel.tsx
View File

@ -122,27 +122,40 @@ export default function SimpleCarousel({ category, onVideoClick }: SimpleCarouse
<ChevronRight className="w-6 h-6 text-white" /> <ChevronRight className="w-6 h-6 text-white" />
</button> </button>
{/* Flex container z poster postavitvijo */} {/* Scroll container */}
<div className="flex flex-wrap justify-center gap-2.5 p-2.5"> <div
{category.videos.map((video, videoIndex) => ( ref={scrollContainerRef}
<div key={video.id} className="poster-container relative"> className="overflow-x-auto pb-8"
{/* Top 10 Number overlay for first category */} style={{
{category.title.includes("Top 10") && ( scrollbarWidth: 'none',
<div className="absolute top-1 left-1 z-30 text-white font-black text-xl md:text-2xl drop-shadow-2xl pointer-events-none" msOverflowStyle: '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)', <div className="flex space-x-4 w-max">
}}> {/* Create many copies for infinite feel */}
{videoIndex + 1} {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> </div>
)} ))
<VideoCard ).flat()}
video={video} </div>
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>
))}
</div> </div>
</div> </div>
</div> </div>

20
client/src/index.css
View File

@ -401,26 +401,6 @@ input[data-testid*="search"]::placeholder {
font-display: swap; 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 */ /* Hide picture-in-picture button on all video elements */
video::-webkit-media-controls-picture-in-picture-button { video::-webkit-media-controls-picture-in-picture-button {
display: none !important; display: none !important;