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

Improve carousel scrolling behavior and remove auto-scroll functionality

Browse Source 
Disable auto-scroll functionality in the carousel component and adjust styling for smoother horizontal scrolling.

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/KcsXLXG
This commit is contained in:
sebastjanartic 2025-08-29 16:44:33 +00:00
parent 227267abf1
commit 5877e65e60
1 changed files with 8 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -230,16 +230,15 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
console.log('LEFT BUTTON CLICKED!'); console.log('LEFT BUTTON CLICKED!');
alert('LEFT BUTTON CLICKED!');
scroll('left'); scroll('left');
}} }}
onMouseEnter={(e) => { onMouseEnter={(e) => {
e.stopPropagation(); e.stopPropagation();
startAutoScroll('left'); // startAutoScroll('left');
}} }}
onMouseLeave={(e) => { onMouseLeave={(e) => {
e.stopPropagation(); e.stopPropagation();
stopAutoScroll(); // stopAutoScroll();
}} }}
className="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 opacity-80 hover:!opacity-100" className="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 opacity-80 hover:!opacity-100"
data-testid="button-scroll-left" data-testid="button-scroll-left"
@ -253,16 +252,15 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
console.log('RIGHT BUTTON CLICKED!'); console.log('RIGHT BUTTON CLICKED!');
alert('RIGHT BUTTON CLICKED!');
scroll('right'); scroll('right');
}} }}
onMouseEnter={(e) => { onMouseEnter={(e) => {
e.stopPropagation(); e.stopPropagation();
startAutoScroll('right'); // startAutoScroll('right');
}} }}
onMouseLeave={(e) => { onMouseLeave={(e) => {
e.stopPropagation(); e.stopPropagation();
stopAutoScroll(); // stopAutoScroll();
}} }}
className="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 opacity-80 hover:!opacity-100" className="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 opacity-80 hover:!opacity-100"
data-testid="button-scroll-right" data-testid="button-scroll-right"
@ -311,19 +309,14 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
</button> </button>
{/* Continuous flowing carousel - videos flow across entire width */} {/* Continuous flowing carousel - videos flow across entire width */}
<div className="overflow-hidden"> <div className="overflow-hidden w-full">
<div <div
className="flex space-x-2 md:space-x-3 pb-4 px-4 md:px-0" className="flex space-x-2 md:space-x-3 pb-4"
style={{ style={{
transform: `translateX(${translateX}px)`, transform: `translateX(${translateX}px)`,
willChange: 'transform', willChange: 'transform',
transition: isScrolling ? 'none' : 'transform 0.3s ease' transition: 'transform 0.3s ease',
}} width: 'max-content'
ref={(el) => {
if (el) {
console.log(`Setting transform: translateX(${translateX}px)`);
el.style.transform = `translateX(${translateX}px)`;
}
}} }}
> >
{/* Many copies for true infinite scroll */} {/* Many copies for true infinite scroll */}