From a3cc41d477606cf11f5af9e060758c26a8b7b2d4 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Tue, 2 Sep 2025 15:43:02 +0000
Subject: [PATCH] Persist user's audio preference for video previews

Update VideoCard component to save and load mute state from localStorage for video previews.

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/components/video-card.tsx | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/client/src/components/video-card.tsx b/client/src/components/video-card.tsx
index b846489..a28f437 100644
--- a/client/src/components/video-card.tsx
+++ b/client/src/components/video-card.tsx
@@ -46,7 +46,11 @@ function formatDate(date: Date | string): string {
 export default function VideoCard({ video, onClick, className = "", hideOverlay = false }: VideoCardProps) {
   const [isHovered, setIsHovered] = useState(false);
   const [showPreview, setShowPreview] = useState(false);
-  const [isMuted, setIsMuted] = useState(true);
+  const [isMuted, setIsMuted] = useState(() => {
+    // Check localStorage for user's audio preference, default to muted
+    const savedMuteState = localStorage.getItem('videoPreviewMuted');
+    return savedMuteState === null ? true : savedMuteState === 'true';
+  });
   const hoverTimeoutRef = useRef<NodeJS.Timeout>();
   const videoRef = useRef<HTMLVideoElement>(null);
   const hlsRef = useRef<Hls | null>(null);
@@ -198,9 +202,14 @@ export default function VideoCard({ video, onClick, className = "", hideOverlay
               onClick={(e) => {
                 e.preventDefault();
                 e.stopPropagation();
-                setIsMuted(!isMuted);
+                const newMutedState = !isMuted;
+                setIsMuted(newMutedState);
+                
+                // Save preference to localStorage for all future previews
+                localStorage.setItem('videoPreviewMuted', newMutedState.toString());
+                
                 if (videoRef.current) {
-                  videoRef.current.muted = !isMuted;
+                  videoRef.current.muted = newMutedState;
                 }
               }}
               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"