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

Fix video thumbnail display issues and improve category row rendering

Browse Source 
Corrected an "Invalid hook call" warning by ensuring the key prop is applied to the outermost element in the video mapping of the CategoryRow component in `netflix-grid.tsx`.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 401e2ec0-e00d-4f10-9d0e-60f3d479f9a5
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: b8a18225-2a77-4482-93d7-b918832f4401
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/60d372ff-2c10-46c7-b01b-10c3435136b0/401e2ec0-e00d-4f10-9d0e-60f3d479f9a5/QA9iJJ7
This commit is contained in:
sebastjanartic 2026-01-10 16:57:09 +00:00
parent 4ebf51de2c
commit 18b976ccc5
1 changed files with 28 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
client/src/components/netflix-grid.tsx
View File

@ -433,38 +433,35 @@ function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: Cate
onTouchEnd={handleTouchEnd} onTouchEnd={handleTouchEnd}
> >
{category.videos.map((video, index) => ( {category.videos.map((video, index) => (
<> <div
<div key={video.id}
key={video.id} className="flex-shrink-0 w-[calc(100vw-1.5rem)] sm:w-[330px] relative hover:z-50"
className="flex-shrink-0 w-[calc(100vw-1.5rem)] sm:w-[330px] relative hover:z-50" style={{
style={{ scrollSnapAlign: window.innerWidth < 768 ? 'start' : 'none'
scrollSnapAlign: window.innerWidth < 768 ? 'start' : 'none' }}
onMouseEnter={() => setClickedVideoId(video.id)}
>
{/* Top 10 Number overlay for "Meist Angesehen" category - visible on all devices */}
{category.title.includes("Meist Angesehen") && index < 10 && clickedVideoId !== video.id && (
<div className="absolute top-0 left-2 z-20 text-white font-black text-5xl sm:text-6xl md:text-7xl drop-shadow-2xl 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)',
fontFeatureSettings: 'normal',
fontVariantNumeric: 'normal'
}}>
{(index + 1).toString()}
</div>
)}
<VideoCard
video={video}
onClick={(video) => {
setClickedVideoId(video.id);
onVideoClick(video);
}} }}
onMouseEnter={() => setClickedVideoId(video.id)} className="w-full hover:scale-102 md:hover:scale-105 hover:z-50 transition-all duration-300 md:duration-500 hover:shadow-2xl rounded-lg overflow-hidden"
> />
{/* Top 10 Number overlay for "Meist Angesehen" category - visible on all devices */} </div>
{category.title.includes("Meist Angesehen") && index < 10 && clickedVideoId !== video.id && (
<div className="absolute top-0 left-2 z-20 text-white font-black text-5xl sm:text-6xl md:text-7xl drop-shadow-2xl 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)',
fontFeatureSettings: 'normal',
fontVariantNumeric: 'normal'
}}>
{(index + 1).toString()}
</div>
)}
<VideoCard
video={video}
onClick={(video) => {
setClickedVideoId(video.id);
onVideoClick(video);
}}
className="w-full hover:scale-102 md:hover:scale-105 hover:z-50 transition-all duration-300 md:duration-500 hover:shadow-2xl rounded-lg overflow-hidden"
/>
</div>
</>
))} ))}
</div> </div>