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

Persist user's audio preference for video previews

Browse Source 
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
This commit is contained in:
sebastjanartic 2025-09-02 15:43:02 +00:00
parent f4052654ae
commit a3cc41d477
1 changed files with 12 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -46,7 +46,11 @@ function formatDate(date: Date | string): string {
export default function VideoCard({ video, onClick, className = "", hideOverlay = false }: VideoCardProps) { export default function VideoCard({ video, onClick, className = "", hideOverlay = false }: VideoCardProps) {
const [isHovered, setIsHovered] = useState(false); const [isHovered, setIsHovered] = useState(false);
const [showPreview, setShowPreview] = 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 hoverTimeoutRef = useRef<NodeJS.Timeout>();
const videoRef = useRef<HTMLVideoElement>(null); const videoRef = useRef<HTMLVideoElement>(null);
const hlsRef = useRef<Hls | null>(null); const hlsRef = useRef<Hls | null>(null);
@ -198,9 +202,14 @@ export default function VideoCard({ video, onClick, className = "", hideOverlay
onClick={(e) => { onClick={(e) => {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); 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) { 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" 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"