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

Improve video card controls by making the mute button more prominent

Browse Source 
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
This commit is contained in:
sebastjanartic 2025-09-17 09:56:54 +00:00
parent f80683c8a3
commit e2674495b4
1 changed files with 6 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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>