From a9e6e551328bddb6644d96089a8a14229cefde05 Mon Sep 17 00:00:00 2001
From: pollutri <pollutri@afasystems.it>
Date: Fri, 8 May 2026 11:42:37 +0200
Subject: [PATCH] Mute audio fix 2

---
 app/admin/page.tsx        | 25 ++++++++++---------------
 components/PublicGrid.tsx |  8 ++------
 types/index.ts            |  2 +-
 3 files changed, 13 insertions(+), 22 deletions(-)

diff --git a/app/admin/page.tsx b/app/admin/page.tsx
index 1b3dcc6..920fdf2 100644
--- a/app/admin/page.tsx
+++ b/app/admin/page.tsx
@@ -149,11 +149,11 @@ export default function AdminDashboard() {
     }));
   };
 
-  const setVolume = (index: number, volume: number) => {
+  const toggleMuted = (index: number) => {
     setIsEditing(prev => ({
       ...prev,
       extraMedia: (prev?.extraMedia || []).map((m, i) =>
-        i === index ? { ...m, volume } : m
+        i === index ? { ...m, muted: !m.muted } : m
       ),
     }));
   };
@@ -514,7 +514,7 @@ export default function AdminDashboard() {
                                 {video ? 'Video' : 'Image'}
                               </div>
                               {video && (
-                                <div className="mt-1 space-y-1.5">
+                                <div className="mt-1 flex flex-wrap gap-x-4 gap-y-1">
                                   <label className="flex items-center gap-2 cursor-pointer">
                                     <input
                                       type="checkbox"
@@ -524,20 +524,15 @@ export default function AdminDashboard() {
                                     />
                                     <span className="text-sm text-gray-700">Autoplay</span>
                                   </label>
-                                  <div className="flex items-center gap-2">
-                                    <span className="text-sm text-gray-700 shrink-0">Volume:</span>
+                                  <label className="flex items-center gap-2 cursor-pointer">
                                     <input
-                                      type="range"
-                                      min={0}
-                                      max={100}
-                                      value={Math.round((item.volume ?? 1) * 100)}
-                                      onChange={e => setVolume(i, parseInt(e.target.value, 10) / 100)}
-                                      className="flex-1 accent-blue-600"
+                                      type="checkbox"
+                                      checked={!!item.muted}
+                                      onChange={() => toggleMuted(i)}
+                                      className="w-4 h-4 text-blue-600 rounded"
                                     />
-                                    <span className="text-xs text-gray-600 w-10 text-right tabular-nums">
-                                      {Math.round((item.volume ?? 1) * 100)}%
-                                    </span>
-                                  </div>
+                                    <span className="text-sm text-gray-700">Muted</span>
+                                  </label>
                                 </div>
                               )}
                             </div>
diff --git a/components/PublicGrid.tsx b/components/PublicGrid.tsx
index d302dc9..39bae88 100644
--- a/components/PublicGrid.tsx
+++ b/components/PublicGrid.tsx
@@ -20,9 +20,7 @@ function MediaCarousel({
   const markPaused = (i: number) => setPlaying(p => { const n = new Set(p); n.delete(i); return n; });
 
   const applyVolume = (v: HTMLVideoElement, item: MediaItem) => {
-    const desired = item.volume ?? 1;
-    v.volume = desired;
-    v.muted = desired === 0;
+    v.muted = !!item.muted;
   };
 
   const togglePlay = (i: number) => {
@@ -194,9 +192,7 @@ function FullscreenViewer({
   const markPaused = (i: number) => setPlaying(p => { const n = new Set(p); n.delete(i); return n; });
 
   const applyVolume = (v: HTMLVideoElement, item: MediaItem) => {
-    const desired = item.volume ?? 1;
-    v.volume = desired;
-    v.muted = desired === 0;
+    v.muted = !!item.muted;
   };
 
   const togglePlay = (i: number) => {
diff --git a/types/index.ts b/types/index.ts
index 5636c4f..aeb5408 100644
--- a/types/index.ts
+++ b/types/index.ts
@@ -3,7 +3,7 @@ export type CardType = 'INFO_PAGE' | 'EXTERNAL_LINK' | 'IMAGE_GALLERY' | 'SERVIC
 export type MediaItem = {
   url: string;
   autoplay?: boolean; // videos only — start playing as soon as the slide is shown
-  volume?: number;    // videos only — initial volume 0..1 (default 1). Volume === 0 means muted.
+  muted?: boolean;    // videos only — start muted (default: unmuted)
 };
 
 export interface Card {