From e0e20b7e8bcb4561b1151c5f9effc759fb7940a0 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Tue, 2 Sep 2025 15:35:30 +0000
Subject: [PATCH] Improve video player controls by showing them only on hover

Add hover effects to video player navigation buttons, making them visible only when the user hovers over the video player.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 2cd2c0bc-434c-4bc9-ad3f-b99d3897a0d1
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/2cd2c0bc-434c-4bc9-ad3f-b99d3897a0d1/4DOsXkx
---
 client/src/pages/VideoPage.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/client/src/pages/VideoPage.tsx b/client/src/pages/VideoPage.tsx
index 65a8963..09f8d63 100644
--- a/client/src/pages/VideoPage.tsx
+++ b/client/src/pages/VideoPage.tsx
@@ -489,7 +489,7 @@ export default function VideoPage() {
           <div className="flex-1">
             {/* Video player */}
             <div 
-              className="relative w-full h-0 pb-[56.25%] bg-black rounded-lg overflow-hidden mb-4"
+              className="group relative w-full h-0 pb-[56.25%] bg-black rounded-lg overflow-hidden mb-4"
               onTouchStart={handleTouchStart}
               onTouchMove={handleTouchMove}
               onTouchEnd={handleTouchEnd}
@@ -504,7 +504,7 @@ export default function VideoPage() {
                       e.stopPropagation();
                       navigateToVideo('prev');
                     }}
-                    className="absolute left-2 top-1/2 transform -translate-y-1/2 bg-gradient-to-r from-purple-600 to-blue-500 hover:from-purple-700 hover:to-blue-600 text-white border-none p-2 rounded-full z-20 shadow-lg hidden md:flex items-center justify-center w-10 h-10 transition-all duration-200"
+                    className="absolute left-2 top-1/2 transform -translate-y-1/2 bg-gradient-to-r from-purple-600 to-blue-500 hover:from-purple-700 hover:to-blue-600 text-white border-none p-2 rounded-full z-20 shadow-lg hidden md:group-hover:flex items-center justify-center w-10 h-10 transition-all duration-200 opacity-0 group-hover:opacity-100"
                     size="sm"
                     data-testid="button-prev-video"
                   >
@@ -516,7 +516,7 @@ export default function VideoPage() {
                       e.stopPropagation();
                       navigateToVideo('next');
                     }}
-                    className="absolute right-2 top-1/2 transform -translate-y-1/2 bg-gradient-to-r from-purple-600 to-blue-500 hover:from-purple-700 hover:to-blue-600 text-white border-none p-2 rounded-full z-20 shadow-lg hidden md:flex items-center justify-center w-10 h-10 transition-all duration-200"
+                    className="absolute right-2 top-1/2 transform -translate-y-1/2 bg-gradient-to-r from-purple-600 to-blue-500 hover:from-purple-700 hover:to-blue-600 text-white border-none p-2 rounded-full z-20 shadow-lg hidden md:group-hover:flex items-center justify-center w-10 h-10 transition-all duration-200 opacity-0 group-hover:opacity-100"
                     size="sm"
                     data-testid="button-next-video"
                   >