From e2674495b45ebe2f19a78b882bdbd1fa7a2d6585 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Wed, 17 Sep 2025 09:56:54 +0000
Subject: [PATCH] Improve video card controls by making the mute button more
 prominent

Update the VideoCard component to make the mute/unmute button more visible and functional, ensuring correct volume control and better user experience.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 45a1dcfc-f8a2-475a-a6b9-96fbb841dc27
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/60d372ff-2c10-46c7-b01b-10c3435136b0/45a1dcfc-f8a2-475a-a6b9-96fbb841dc27/UlmzLzs
---
 client/src/components/video-card.tsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/client/src/components/video-card.tsx b/client/src/components/video-card.tsx
index f91848d..f69cd41 100644
--- a/client/src/components/video-card.tsx
+++ b/client/src/components/video-card.tsx
@@ -276,7 +276,7 @@ export default function VideoCard({ video, onClick, className = "", hideOverlay
               }}
             />
             
-            {/* Mute/Unmute button */}
+            {/* Mute/Unmute button - make it always visible and more prominent */}
             <button
               onClick={(e) => {
                 e.preventDefault();
@@ -294,15 +294,17 @@ export default function VideoCard({ video, onClick, className = "", hideOverlay
                 
                 if (videoRef.current) {
                   videoRef.current.muted = newMutedState;
+                  videoRef.current.volume = newMutedState ? 0 : 1;
                 }
               }}
-              className="absolute top-2 right-2 z-20 bg-black/50 hover:bg-black/70 text-white border-none p-2 rounded-full transition-all duration-200 opacity-75 hover:opacity-100"
+              className="absolute top-3 right-3 z-20 bg-black/80 hover:bg-black/90 text-white border-2 border-white/30 hover:border-white/50 p-2.5 rounded-full transition-all duration-200 opacity-90 hover:opacity-100 shadow-lg backdrop-blur-sm"
               data-testid="button-mute-toggle"
+              title={isMuted ? "Unmute video" : "Mute video"}
             >
               {isMuted ? (
-                <VolumeX className="w-4 h-4" />
+                <VolumeX className="w-5 h-5" />
               ) : (
-                <Volume2 className="w-4 h-4" />
+                <Volume2 className="w-5 h-5" />
               )}
             </button>