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

Improve video carousel scrolling experience for smoother navigation

Browse Source 
Refactors the Netflix grid component's horizontal scrolling implementation. Instead of using CSS transforms for manual positioning, it now utilizes the browser's native smooth scrolling behavior via `scrollBy` on a container with `overflow-x-auto`. This change aims to resolve issues where videos were not scrolling correctly and to provide a more fluid user experience. The `scrollContainerRef` is introduced to directly access the DOM element for scrolling. The component now relies on CSS to manage the display of the carousel items, eliminating the need for manual `translateX` state management and fixed video widths for calculation.

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:07:20 +00:00
parent e554b8a346
commit 91617c8835
1 changed files with 15 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -134,19 +134,20 @@ interface CategoryRowProps {
function CategoryRow({ category, onVideoClick }: CategoryRowProps) { function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
const scrollRef = useRef<HTMLDivElement>(null); const scrollRef = useRef<HTMLDivElement>(null);
const scrollIntervalRef = useRef<NodeJS.Timeout | null>(null); const scrollIntervalRef = useRef<NodeJS.Timeout | null>(null);
const scrollContainerRef = useRef<HTMLDivElement>(null);
const [showLeftButton, setShowLeftButton] = useState(false); const [showLeftButton, setShowLeftButton] = useState(false);
const [showRightButton, setShowRightButton] = useState(true); const [showRightButton, setShowRightButton] = useState(true);
const [translateX, setTranslateX] = useState(0);
const [isScrolling, setIsScrolling] = useState(false); const [isScrolling, setIsScrolling] = useState(false);
const [speedMode, setSpeedMode] = useState<'normal' | 'fast'>('normal'); const [speedMode, setSpeedMode] = useState<'normal' | 'fast'>('normal');
const videosToShow = 5; // Show 5 videos at a time
const videoWidth = 120; // Width including spacing
const scroll = (direction: 'left' | 'right') => { const scroll = (direction: 'left' | 'right') => {
// SUPER SIMPLE - just move without any wrapping if (!scrollContainerRef.current) return;
const step = direction === 'right' ? -250 : 250;
setTranslateX(prev => prev + step); const scrollAmount = direction === 'right' ? 300 : -300;
scrollContainerRef.current.scrollBy({
left: scrollAmount,
behavior: 'smooth'
});
}; };
const toggleSpeed = (direction: 'left' | 'right') => { const toggleSpeed = (direction: 'left' | 'right') => {
@ -327,15 +328,13 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
<ChevronRight className="w-5 h-5 text-white" /> <ChevronRight className="w-5 h-5 text-white" />
</button> </button>
{/* Continuous flowing carousel - videos flow across entire width */} {/* Simple horizontal scroll carousel */}
<div className="overflow-hidden"> <div
<div ref={scrollContainerRef}
className="flex space-x-4 pb-4" className="overflow-x-auto scrollbar-hide"
style={{ style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}
transform: `translateX(${translateX}px)`, >
willChange: 'transform' <div className="flex space-x-4 pb-4 w-max">
}}
>
{/* ULTRA SIMPLE - just many copies */} {/* ULTRA SIMPLE - just many copies */}
{Array.from({ length: 50 }).map((_, copyIndex) => {Array.from({ length: 50 }).map((_, copyIndex) =>
category.videos.map((video, videoIndex) => ( category.videos.map((video, videoIndex) => (