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

Improve carousel scrolling behavior with adjustable speed

Browse Source 
Update carousel component to allow users to control scroll speed by clicking navigation arrows. Implements toggling between normal and fast scrolling speeds, restarting the interval with the new speed. Adds state for current direction and speed.

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/yexZbDm
This commit is contained in:
sebastjanartic 2025-08-29 17:21:08 +00:00
parent bf2a6ca6af
commit b9a80de311
1 changed files with 32 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
client/src/components/simple-carousel.tsx
View File

@ -15,15 +15,34 @@ export default function SimpleCarousel({ category, onVideoClick }: SimpleCarouse
const scrollContainerRef = useRef<HTMLDivElement>(null);
const scrollIntervalRef = useRef<NodeJS.Timeout | null>(null);
const [isScrolling, setIsScrolling] = useState(false);
const [currentDirection, setCurrentDirection] = useState<'left' | 'right' | null>(null);
const [speed, setSpeed] = useState<'normal' | 'fast'>('normal');
const scroll = (direction: 'left' | 'right') => {
if (!scrollContainerRef.current) return;
const scrollAmount = direction === 'right' ? 300 : -300;
scrollContainerRef.current.scrollBy({
left: scrollAmount,
behavior: 'smooth'
});
// If already scrolling in same direction, toggle speed
if (isScrolling && currentDirection === direction) {
const newSpeed = speed === 'normal' ? 'fast' : 'normal';
setSpeed(newSpeed);
// Restart with new speed
if (scrollIntervalRef.current) {
clearInterval(scrollIntervalRef.current);
}
scrollIntervalRef.current = setInterval(() => {
if (!scrollContainerRef.current) return;
const currentSpeed = newSpeed === 'fast' ? 8 : 3;
const scrollAmount = direction === 'right' ? currentSpeed : -currentSpeed;
scrollContainerRef.current.scrollBy({
left: scrollAmount,
behavior: 'auto'
});
}, 16);
} else {
// If not scrolling or different direction, start scrolling
startAutoScroll(direction);
}
};
const startAutoScroll = (direction: 'left' | 'right') => {
@ -32,12 +51,14 @@ export default function SimpleCarousel({ category, onVideoClick }: SimpleCarouse
}
setIsScrolling(true);
setCurrentDirection(direction);
setSpeed('normal'); // Reset to normal speed when starting
scrollIntervalRef.current = setInterval(() => {
if (!scrollContainerRef.current) return;
const speed = 3;
const scrollAmount = direction === 'right' ? speed : -speed;
const currentSpeed = speed === 'fast' ? 8 : 3;
const scrollAmount = direction === 'right' ? currentSpeed : -currentSpeed;
scrollContainerRef.current.scrollBy({
left: scrollAmount,
behavior: 'auto'
@ -51,6 +72,8 @@ export default function SimpleCarousel({ category, onVideoClick }: SimpleCarouse
scrollIntervalRef.current = null;
}
setIsScrolling(false);
setCurrentDirection(null);
setSpeed('normal');
};
// Initialize scroll position in the middle so we can scroll both ways