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

Improve video selection highlighting and display on hover

Browse Source 
Update the `CategoryRow` component in `netflix-grid.tsx` to manage the `clickedVideoId` state. This state is used to conditionally render the "Top 10" number overlay on videos. When a video is clicked, its ID is stored in `clickedVideoId`. The overlay is now hidden if the `clickedVideoId` matches the current video's ID. Additionally, hovering over a video category row resets `clickedVideoId` to `null` to ensure the number reappears when the mouse leaves the video. The `onClick` handler for `VideoCard` is modified to update this state and then call the original `onVideoClick` prop.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 074b0e4c-6171-43bd-aa98-f9e04623ca14
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/074b0e4c-6171-43bd-aa98-f9e04623ca14/7j5FE92
This commit is contained in:
sebastjanartic 2025-08-30 12:59:37 +00:00
parent b5f0bcb2ae
commit 8d5dd20cf3
1 changed files with 12 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -135,6 +135,7 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
const scrollRef = useRef<HTMLDivElement>(null);
const [isScrolling, setIsScrolling] = useState(false);
const scrollIntervalRef = useRef<NodeJS.Timeout>();
const [clickedVideoId, setClickedVideoId] = useState<string | null>(null);
const scroll = (direction: 'left' | 'right') => {
if (scrollRef.current) {
@ -220,10 +221,14 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}
>
{category.videos.map((video, index) => (
<div key={video.id} className="flex-shrink-0 w-[calc(50vw-2px)] sm:w-[calc(33.33vw-2px)] md:w-[calc(25vw-2px)] lg:w-[calc(20vw-2px)] relative group">
<div
key={video.id}
className="flex-shrink-0 w-[calc(50vw-2px)] sm:w-[calc(33.33vw-2px)] md:w-[calc(25vw-2px)] lg:w-[calc(20vw-2px)] relative group"
onMouseEnter={() => setClickedVideoId(null)}
>
{/* 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-4xl sm:text-5xl md:text-7xl drop-shadow-2xl"
{category.title.includes("Top 10") && index < 10 && clickedVideoId !== video.id && (
<div className="absolute top-2 left-2 z-20 text-white font-black text-4xl sm:text-5xl 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)'
@ -233,7 +238,10 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
)}
<VideoCard
video={video}
onClick={onVideoClick}
onClick={(video) => {
setClickedVideoId(video.id);
onVideoClick(video);
}}
className="w-full hover:scale-105 md:hover:scale-110 hover:z-10 transition-all duration-300 md:duration-500 group-hover:shadow-2xl rounded-lg overflow-hidden"
/>
</div>