Commit Graph

589 Commits

Author SHA1 Message Date
sebastjanartic
87dea07bae Improve carousel behavior for smoother video browsing
Implement an infinite scrolling carousel by duplicating video content and refining scroll logic for seamless navigation within 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
2025-08-29 14:51:01 +00:00
sebastjanartic
34effd491b Create an infinite scrolling carousel for video categories
Implement infinite scrolling logic in the `CategoryRow` component of the Netflix grid. This change modifies the scroll behavior to loop back to the beginning when reaching the end, and vice-versa, creating a continuous carousel effect. The navigation buttons are now always visible to facilitate this continuous scrolling. The CSS classes for the navigation buttons have also been updated to ensure their visibility and hover effects work correctly with the new infinite scroll functionality.

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
2025-08-29 14:49:21 +00:00
sebastjanartic
d4b1359b79 Improve carousel navigation and video scrolling behavior
Refactor the `CategoryRow` component to use `scrollTo` for smoother horizontal scrolling and dynamically show/hide navigation buttons based on scroll position.

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
2025-08-29 14:45:30 +00:00
sebastjanartic
208d3d9f76 Improve carousel scrolling behavior for smoother content navigation
Refactors the `CategoryRow` component in `netflix-grid.tsx` to adjust scroll behavior, using a fixed 80% of container width for scrolling and removing the interval-based auto-scroll.

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
2025-08-29 14:42:10 +00:00
sebastjanartic
dde1b37180 Improve carousel scrolling and modal display across the platform
Update z-index for modals to ensure they display correctly, adjust carousel scroll amount and behavior, and refine video card z-indexing.

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
2025-08-29 14:38:22 +00:00
sebastjanartic
ee5cef0645 Improve carousel and modal behavior for smoother video browsing
Adjust z-index for modals and carousels, introduce touch events for carousel navigation, and refine hover effects for video cards.

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
2025-08-29 14:33:18 +00:00
sebastjanartic
b1eb6ffa9f Improve video player navigation and modal visibility with hover effects
Update z-index for modals to ensure they appear above other content, and enhance category row scrolling by making navigation buttons visible on hover rather than always hidden.

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
2025-08-29 14:31:37 +00:00
sebastjanartic
59d5115a45 Improve video scrolling by preventing default event propagation
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
2025-08-29 14:29:17 +00:00
sebastjanartic
74daa5f04c Adjust scroll button positioning to better align with video thumbnails
Update the vertical positioning of left and right scroll buttons in the `netflix-grid.tsx` component to `top-[45%]` to improve visual alignment with video thumbnails.

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
2025-08-29 14:28:09 +00:00
sebastjanartic
368e023ed3 Improve positioning and appearance of video row scroll buttons
Update CSS for horizontal scroll buttons in `netflix-grid.tsx` to vertically center them at 60% and enhance visual styling with darker backgrounds, white borders, and shadows.

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
2025-08-29 14:26:24 +00:00
sebastjanartic
534527d233 Improve the video carousel scrolling and navigation experience
Adjusts the scrolling behavior and replaces hover-activated scroll areas with dedicated buttons in the video carousel component to enhance usability on both desktop and mobile.

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/fgCGOr7
2025-08-29 14:23:14 +00:00
sebastjanartic
ebd7d8952e Improve modal visibility by ensuring they appear on top of all other content
Increase the z-index of all modal components to 999999 to ensure proper stacking context and prevent overlap issues with other page elements.

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/mZpi7Z1
2025-08-29 14:20:38 +00:00
sebastjanartic
ba913bdd1c Ensure all video modals and ad popups appear above other content
Adjust z-index values across multiple modal and player components to ensure they render on top of other UI elements.

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/mZpi7Z1
2025-08-29 11:12:55 +00:00
sebastjanartic
f466c7f288 Improve video card hover effect and adjust playback volume
Update the z-index styling for the video card component to ensure proper layering on hover and remove the default volume attribute from the Video.js player.

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/mZpi7Z1
2025-08-29 11:10:24 +00:00
sebastjanartic
fffe3be291 Improve video card scaling and layering behavior for a better viewing experience
Updates the z-index and hover effects for video cards in `client/src/components/video-card.tsx` to ensure proper layering when scaled, addressing an issue where cards would overlap incorrectly.

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/mZpi7Z1
2025-08-29 11:09:12 +00:00
sebastjanartic
57287e7ec3 Improve scrolling behavior for video carousels by increasing speed
Update the `netflix-grid.tsx` component to implement faster horizontal scrolling for video categories. The scrolling logic has been modified to jump to the opposite end when reaching the boundaries, creating a continuous loop. The scrolling interval has been reduced to 8ms for a more rapid movement, and the hover functionality now directly triggers faster scrolling without a separate state variable.

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/mZpi7Z1
2025-08-29 11:06:21 +00:00
sebastjanartic
fa5014cbf3 Improve carousel scrolling behavior for a smoother user experience
Refactor the `CategoryRow` component in `netflix-grid.tsx` to improve the carousel scrolling logic. The changes include implementing instant jumps to the beginning or end of the carousel when reaching the boundaries during scrolling, and simplifying the click handlers for navigation buttons and touch areas to directly call the `scroll` function. This addresses the issue where scrolling functionality was not working correctly.

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/mZpi7Z1
2025-08-29 11:04:50 +00:00
sebastjanartic
887c15f111 Improve video row scrolling functionality for faster navigation
Add fast scrolling capability to video category rows and implement infinite looping for seamless horizontal navigation.

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/mZpi7Z1
2025-08-29 11:03:23 +00:00
sebastjanartic
1db99fc5b3 Improve scrolling responsiveness in the video grid component
Adjust the scrolling logic in `netflix-grid.tsx` to allow for faster, more responsive scrolling with variable animation speeds based on a new `isFastScrolling` state, improving user interaction experience.

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/mZpi7Z1
2025-08-29 11:01:37 +00:00
sebastjanartic
e23fa462eb Improve video carousel scrolling for a smoother user experience
Add console logs to the `CategoryRow` component in `netflix-grid.tsx` to debug and improve the infinite scrolling behavior of video carousels.

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/mZpi7Z1
2025-08-29 10:59:22 +00:00
sebastjanartic
8997338812 Improve scrolling behavior in video category rows for smoother navigation
Adjusted scroll thresholds in `netflix-grid.tsx` to prevent premature infinite loop behavior on category rows, enhancing user experience.

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/P3O2FU7
2025-08-29 10:57:39 +00:00
sebastjanartic
8af8f06fe2 Enable looping functionality for video carousels to enhance user experience
Update client/src/components/netflix-grid.tsx to implement infinite scrolling for category rows. When scrolling left and reaching the beginning, the view now jumps to the end, and when scrolling right and reaching the end, it jumps to the beginning, creating a seamless looping effect.

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/P3O2FU7
2025-08-29 10:56:11 +00:00
sebastjanartic
10079f756b Improve scrolling speed and behavior in video category grids
Adjust scroll amount and remove infinite looping for category rows to enhance user navigation.

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/P3O2FU7
2025-08-29 10:54:50 +00:00
sebastjanartic
26bd63a2f4 Enable infinite scrolling for video categories in the grid view
Modify the `CategoryRow` component in `netflix-grid.tsx` to implement infinite scrolling for video categories. Adjust the scroll logic to loop back to the beginning or end when the boundary is reached, providing a seamless carousel experience. Also, update the auto-scroll interval for smoother animations.

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/P3O2FU7
2025-08-29 10:53:37 +00:00
sebastjanartic
593d6ce327 Improve video card performance and visual appeal with smoother animations
Refactor VideoCard component to use `animationFrame` for smoother video preview scrubbing and update transition properties for improved visual performance.

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/P3O2FU7
2025-08-29 10:49:52 +00:00
sebastjanartic
09fb64bbf4 Improve video card hover effect to slightly enlarge videos
Update `client/src/components/video-card.tsx` to increase the hover scale effect of video cards from 1.25 to 1.35.

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/P3O2FU7
2025-08-29 10:46:30 +00:00
sebastjanartic
cf9de359bd Improve video card hover effect for smoother transitions
Adjusted the `VideoCard` component by removing the `-translate-y-4` class from the hover effect and adding `transformStyle: 'preserve-3d'` to the style attribute. This aims to fix an issue where the card might jump or not scale correctly during hover interactions, providing a more visually consistent experience.

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/P3O2FU7
2025-08-29 10:45:52 +00:00
sebastjanartic
1bc6717c37 Enlarge video cards when hovering over them with the mouse
Update the `VideoCard` component to scale and elevate the card on hover using Tailwind CSS transitions for a better user experience.

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/P3O2FU7
2025-08-29 10:45:09 +00:00
sebastjanartic
0e790f5932 Remove netflix-style popup overlay from video cards
Remove the experimental Netflix-style popup overlay and associated state management from the VideoCard component, simplifying the UI and improving performance.

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/P3O2FU7
2025-08-29 10:44:28 +00:00
sebastjanartic
76c0e4488f Improve video card appearance by removing hover effect
Remove hover:scale-[1.02] from the video-card className in client/src/components/video-card.tsx.

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/P3O2FU7
2025-08-29 10:43:42 +00:00
sebastjanartic
b7d972cbf5 Adjust video card popup behavior and appearance for better display
Modify the video card component to adjust the popup overlay's positioning, size, and styling to ensure it remains within the card boundaries and improves visual presentation. This includes changes to class names, element sizes, and gradient overlays.

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/P3O2FU7
2025-08-29 10:43:07 +00:00
sebastjanartic
c631dd9f96 Add an interactive popup to video cards on hover
Implement a hover effect on video cards to display an interactive popup with video details and action buttons.

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/P3O2FU7
2025-08-29 10:41:52 +00:00
sebastjanartic
9579c54ae4 Improve video scrubbing for a smoother user experience
Refactor `VideoCard` component to throttle mouse scrubbing events and utilize `requestAnimationFrame` for smoother video seeking, enhancing preview responsiveness.

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/P3O2FU7
2025-08-29 10:39:30 +00:00
sebastjanartic
05355d44fe Add video scrubbing and sound preview for interactive browsing
Implement mouse-based video scrubbing and low-volume audio playback for previews in the video card component.

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/P3O2FU7
2025-08-29 10:38:06 +00:00
sebastjanartic
f1331dafc6 Add subtle sound effect when hovering over video cards
Implements a new `playHoverSound` function within `video-card.tsx` that utilizes the Web Audio API to generate a brief, quiet, high-pitched tone on mouse enter events. This provides auditory feedback for user interaction.

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/P3O2FU7
2025-08-29 10:36:07 +00:00
sebastjanartic
9a35a7bd21 Improve scrolling behavior on mobile devices for a smoother user experience
Adjust the scroll amount for mobile devices and enhance touch event handling in the `CategoryRow` component to fix scrolling issues.

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/P3O2FU7
2025-08-29 10:30:35 +00:00
sebastjanartic
6407a4770b Improve the smoothness of scrolling for video categories
Adjusted auto-scroll interval and amount in `netflix-grid.tsx` to increase animation frame rate from ~60fps to ~120fps for a smoother visual experience.

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/P3O2FU7
2025-08-29 10:29:34 +00:00
sebastjanartic
29416c68b6 Remove play button from video cards on all devices
Removes the play button overlay from the VideoCard component in client/src/components/video-card.tsx.

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/P3O2FU7
2025-08-29 10:28:29 +00:00
sebastjanartic
8fea0f2c76 Enable automatic scrolling of video rows on hover
Implement automatic left and right scrolling for video rows when the mouse hovers over designated areas, replacing the previous click-based navigation buttons with a more intuitive hover-activated system.

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/P3O2FU7
2025-08-29 10:27:30 +00:00
sebastjanartic
645ac19776 Improve video display by unifying mobile and desktop layouts
Unify mobile and desktop layouts in `netflix-grid.tsx` by removing conditional rendering for different screen sizes and applying responsive styling directly.

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/P3O2FU7
2025-08-29 10:25:28 +00:00
sebastjanartic
f0a8358043 Arrange videos into two rows on desktop screens
Modify the NetflixGrid component to display videos in a two-row grid layout on desktop (md:block) while maintaining a single scrollable row on mobile (md:hidden). This change ensures better use of screen real estate for larger displays.

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/P3O2FU7
2025-08-29 10:24:52 +00:00
sebastjanartic
c14082c300 Remove non-essential video metadata from display
Remove the display of video views and upload date from the video card component.

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/P3O2FU7
2025-08-29 10:23:57 +00:00
sebastjanartic
1dbffb52bc Improve video card appearance by adjusting title and view count spacing
Update `VideoCard` component in `client/src/components/video-card.tsx` to reduce vertical spacing for titles and view counts, enhancing visual appeal.

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/P3O2FU7
2025-08-29 10:21:45 +00:00
sebastjanartic
f0be2287eb Adjust video tile size for better mobile display
Resizes the video tiles in the Netflix grid component to be 25% smaller on mobile devices by changing the `w-36` class to `w-28` in `client/src/components/netflix-grid.tsx`.

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/P3O2FU7
2025-08-29 10:20:41 +00:00
sebastjanartic
94b1392a0f Improve scrolling responsiveness and smoothness in video grid
Update the CategoryRow component in netflix-grid.tsx to calculate scroll amount based on container width and apply smooth scrolling behavior for a better user experience.

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/P3O2FU7
2025-08-29 10:19:35 +00:00
sebastjanartic
c5cc537586 Add touch controls for navigating video carousels on mobile devices
Modify `netflix-grid.tsx` to hide desktop scroll buttons on mobile and introduce touch-sensitive areas on the left and right sides of the carousel for navigation.

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/P3O2FU7
2025-08-29 10:16:40 +00:00
sebastjanartic
015466d2e7 Adjust video card sizes for a more compact display
Update client/src/components/netflix-grid.tsx to reduce the width of video cards and adjust scroll amounts for a more compact grid layout, particularly on mobile devices.

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/P3O2FU7
2025-08-29 10:16:00 +00:00
sebastjanartic
a72037b423 Adjust video display to resemble Netflix layout
Update `netflix-grid.tsx` and `video-card.tsx` to adjust spacing, card widths, and hover effects, mimicking the visual style of Netflix for a more familiar user experience.

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/P3O2FU7
2025-08-29 10:15:20 +00:00
sebastjanartic
f65b176868 Improve video preview by delaying on mobile devices
Update VideoCard component to prevent video previews from playing on mobile devices or when quickly hovering.

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/P3O2FU7
2025-08-29 10:13:30 +00:00
sebastjanartic
eaea04e219 Improve video playback speed and responsiveness during initial loading
Adjust HLS.js configuration for low-latency streaming, reducing initial buffer lengths and optimizing start-up quality selection for faster video playback initiation.

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/P3O2FU7
2025-08-29 10:09:40 +00:00