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

Improve video scrolling by preventing default event propagation

Browse Source 
This commit modifies the scroll buttons within the `netflix-grid.tsx` component to include `e.preventDefault()` and `e.stopPropagation()` calls on click and mouse events. This prevents default browser behavior and stops event bubbling, ensuring smoother scrolling and avoiding unintended interactions when navigating video categories.

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/QCN70f2
This commit is contained in:
sebastjanartic 2025-08-29 14:29:17 +00:00
parent 74daa5f04c
commit 59d5115a45
1 changed files with 36 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -203,9 +203,19 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
<div className="relative"> <div className="relative">
{/* Left scroll button - positioned at video thumbnail center */} {/* Left scroll button - positioned at video thumbnail center */}
<button <button
onClick={() => scroll('left')} onClick={(e) => {
onMouseEnter={() => startAutoScroll('left')} e.preventDefault();
onMouseLeave={stopAutoScroll} e.stopPropagation();
scroll('left');
}}
onMouseEnter={(e) => {
e.stopPropagation();
startAutoScroll('left');
}}
onMouseLeave={(e) => {
e.stopPropagation();
stopAutoScroll();
}}
className="hidden md:flex absolute left-2 top-[45%] -translate-y-1/2 w-12 h-12 z-30 bg-black/80 hover:bg-black/95 rounded-full items-center justify-center transition-all duration-300 cursor-pointer border border-white/30 shadow-lg" className="hidden md:flex absolute left-2 top-[45%] -translate-y-1/2 w-12 h-12 z-30 bg-black/80 hover:bg-black/95 rounded-full items-center justify-center transition-all duration-300 cursor-pointer border border-white/30 shadow-lg"
data-testid="button-scroll-left" data-testid="button-scroll-left"
> >
@ -214,9 +224,19 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
{/* Right scroll button - positioned at video thumbnail center */} {/* Right scroll button - positioned at video thumbnail center */}
<button <button
onClick={() => scroll('right')} onClick={(e) => {
onMouseEnter={() => startAutoScroll('right')} e.preventDefault();
onMouseLeave={stopAutoScroll} e.stopPropagation();
scroll('right');
}}
onMouseEnter={(e) => {
e.stopPropagation();
startAutoScroll('right');
}}
onMouseLeave={(e) => {
e.stopPropagation();
stopAutoScroll();
}}
className="hidden md:flex absolute right-2 top-[45%] -translate-y-1/2 w-12 h-12 z-30 bg-black/80 hover:bg-black/95 rounded-full items-center justify-center transition-all duration-300 cursor-pointer border border-white/30 shadow-lg" className="hidden md:flex absolute right-2 top-[45%] -translate-y-1/2 w-12 h-12 z-30 bg-black/80 hover:bg-black/95 rounded-full items-center justify-center transition-all duration-300 cursor-pointer border border-white/30 shadow-lg"
data-testid="button-scroll-right" data-testid="button-scroll-right"
> >
@ -225,14 +245,22 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
{/* Mobile scroll buttons */} {/* Mobile scroll buttons */}
<button <button
onClick={() => scroll('left')} onClick={(e) => {
e.preventDefault();
e.stopPropagation();
scroll('left');
}}
className="md:hidden absolute left-1 top-[45%] -translate-y-1/2 w-10 h-10 z-40 bg-black/80 rounded-full flex items-center justify-center border border-white/30 shadow-lg" className="md:hidden absolute left-1 top-[45%] -translate-y-1/2 w-10 h-10 z-40 bg-black/80 rounded-full flex items-center justify-center border border-white/30 shadow-lg"
data-testid="button-mobile-scroll-left" data-testid="button-mobile-scroll-left"
> >
<ChevronLeft className="w-5 h-5 text-white" /> <ChevronLeft className="w-5 h-5 text-white" />
</button> </button>
<button <button
onClick={() => scroll('right')} onClick={(e) => {
e.preventDefault();
e.stopPropagation();
scroll('right');
}}
className="md:hidden absolute right-1 top-[45%] -translate-y-1/2 w-10 h-10 z-40 bg-black/80 rounded-full flex items-center justify-center border border-white/30 shadow-lg" className="md:hidden absolute right-1 top-[45%] -translate-y-1/2 w-10 h-10 z-40 bg-black/80 rounded-full flex items-center justify-center border border-white/30 shadow-lg"
data-testid="button-mobile-scroll-right" data-testid="button-mobile-scroll-right"
> >