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

Improve video player navigation and modal visibility with hover effects

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

BIN
attached_assets/image_1756477766206.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 167 KiB

2
client/src/components/ad-settings.tsx
View File

@ -116,7 +116,7 @@ export default function AdSettings({ isOpen, onClose }: AdSettingsProps) {
if (!isOpen) return null;
return (
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4" style={{ zIndex: 999999 }}>
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4" style={{ zIndex: 9999999 }}>
<div className="bg-white dark:bg-gray-900 rounded-lg max-w-4xl w-full max-h-[90vh] overflow-y-auto">
<div className="sticky top-0 bg-white dark:bg-gray-900 p-6 border-b border-gray-200 dark:border-gray-700">
<div className="flex items-center justify-between">

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: 999999, backgroundColor: '#1f2937' }}
style={{ zIndex: 9999999, backgroundColor: '#1f2937' }}
onClick={handleBackdropClick}
>
<div className="relative w-full h-full max-w-7xl mx-auto p-4 flex flex-col">

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

@ -134,6 +134,8 @@ interface CategoryRowProps {
function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
const scrollRef = useRef<HTMLDivElement>(null);
const scrollIntervalRef = useRef<NodeJS.Timeout | null>(null);
const [isLeftButtonHovered, setIsLeftButtonHovered] = useState(false);
const [isRightButtonHovered, setIsRightButtonHovered] = useState(false);
const scroll = (direction: 'left' | 'right') => {
if (scrollRef.current) {
@ -195,7 +197,7 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
};
return (
<div className="relative group mb-8 overflow-hidden">
<div className="relative group mb-8">
<h2 className="text-2xl font-bold text-bunny-light mb-6 px-4">
{category.title}
</h2>
@ -210,13 +212,15 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
}}
onMouseEnter={(e) => {
e.stopPropagation();
setIsLeftButtonHovered(true);
startAutoScroll('left');
}}
onMouseLeave={(e) => {
e.stopPropagation();
setIsLeftButtonHovered(false);
stopAutoScroll();
}}
className="hidden md: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={`${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`}
data-testid="button-scroll-left"
>
<ChevronLeft className="w-6 h-6 text-white" />
@ -231,13 +235,15 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
}}
onMouseEnter={(e) => {
e.stopPropagation();
setIsRightButtonHovered(true);
startAutoScroll('right');
}}
onMouseLeave={(e) => {
e.stopPropagation();
setIsRightButtonHovered(false);
stopAutoScroll();
}}
className="hidden md: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={`${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`}
data-testid="button-scroll-right"
>
<ChevronRight className="w-6 h-6 text-white" />

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: 999999 }}>
<div className="fixed inset-0 bg-black bg-opacity-90 flex items-center justify-center" style={{ zIndex: 9999999 }}>
<div className="relative w-full max-w-6xl mx-4">
{/* Close button */}
<Button

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: 999999 }}
style={{ zIndex: 9999999 }}
onClick={handleBackdropClick}
data-testid="modal-video"
>