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

Improve carousel and modal behavior for smoother video browsing

Browse Source 
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
This commit is contained in:
sebastjanartic 2025-08-29 14:33:18 +00:00
parent b1eb6ffa9f
commit ee5cef0645
5 changed files with 22 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/src/components/bunny-video-modal.tsx
View File

@ -169,7 +169,7 @@ export default function BunnyVideoModal({ video, isOpen, onClose, onEdit, videos
return (
<div
className="fixed inset-0 bg-black bg-opacity-90 flex items-center justify-center"
style={{ zIndex: 9999999, backgroundColor: '#1f2937' }}
style={{ zIndex: 999999999, backgroundColor: '#1f2937', position: 'fixed' }}
onClick={handleBackdropClick}
>
<div className="relative w-full h-full max-w-7xl mx-auto p-4 flex flex-col">

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

@ -220,7 +220,7 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
setIsLeftButtonHovered(false);
stopAutoScroll();
}}
className={`${isLeftButtonHovered ? 'flex' : 'hidden md:group-hover: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`}
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-0 group-hover:opacity-100 hover:!opacity-100"
data-testid="button-scroll-left"
>
<ChevronLeft className="w-6 h-6 text-white" />
@ -243,7 +243,7 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
setIsRightButtonHovered(false);
stopAutoScroll();
}}
className={`${isRightButtonHovered ? 'flex' : 'hidden md:group-hover: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`}
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-0 group-hover:opacity-100 hover:!opacity-100"
data-testid="button-scroll-right"
>
<ChevronRight className="w-6 h-6 text-white" />
@ -256,6 +256,14 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
e.stopPropagation();
scroll('left');
}}
onTouchStart={(e) => {
e.stopPropagation();
startAutoScroll('left');
}}
onTouchEnd={(e) => {
e.stopPropagation();
stopAutoScroll();
}}
className="md:hidden absolute left-1 top-[45%] -translate-y-1/2 w-10 h-10 z-40 bg-black/80 rounded-full flex items-center justify-center border border-white/30 shadow-lg"
data-testid="button-mobile-scroll-left"
>
@ -267,6 +275,14 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
e.stopPropagation();
scroll('right');
}}
onTouchStart={(e) => {
e.stopPropagation();
startAutoScroll('right');
}}
onTouchEnd={(e) => {
e.stopPropagation();
stopAutoScroll();
}}
className="md:hidden absolute right-1 top-[45%] -translate-y-1/2 w-10 h-10 z-40 bg-black/80 rounded-full flex items-center justify-center border border-white/30 shadow-lg"
data-testid="button-mobile-scroll-right"
>

2
client/src/components/vast-player.tsx
View File

@ -270,7 +270,7 @@ export default function VASTPlayer({ video, onClose, vastTagUrl, enableAds = tru
};
return (
<div className="fixed inset-0 bg-black bg-opacity-90 flex items-center justify-center" style={{ zIndex: 9999999 }}>
<div className="fixed inset-0 bg-black bg-opacity-90 flex items-center justify-center" style={{ zIndex: 999999999, position: 'fixed' }}>
<div className="relative w-full max-w-6xl mx-4">
{/* Close button */}
<Button

2
client/src/components/video-card.tsx
View File

@ -168,7 +168,7 @@ export default function VideoCard({ video, onClick, className = "" }: VideoCardP
transformStyle: 'preserve-3d',
transition: 'transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), z-index 0.1s ease',
willChange: 'transform',
zIndex: isHovered ? 50 : 'auto',
zIndex: isHovered ? 10 : 'auto',
position: isHovered ? 'relative' : 'static'
}}
onMouseEnter={() => setIsHovered(true)}

2
client/src/components/video-modal.tsx
View File

@ -438,7 +438,7 @@ export default function VideoModal({ video, isOpen, onClose, enableAds = true }:
return (
<div
className="fixed inset-0 bg-black/90 backdrop-blur-sm flex items-center justify-center p-4"
style={{ zIndex: 9999999 }}
style={{ zIndex: 999999999, position: 'fixed' }}
onClick={handleBackdropClick}
data-testid="modal-video"
>