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