From 560a4d21cf0f30ea158a6394d56c999effde0222 Mon Sep 17 00:00:00 2001
From: pollutri <pollutri@afasystems.it>
Date: Fri, 8 May 2026 11:03:53 +0200
Subject: [PATCH] AutoFullscreen Option

---
 app/admin/page.tsx        | 32 ++++++++++++++++++++++++++------
 components/PublicGrid.tsx |  9 ++++++++-
 types/index.ts            |  3 ++-
 3 files changed, 36 insertions(+), 8 deletions(-)

diff --git a/app/admin/page.tsx b/app/admin/page.tsx
index 23ddefc..025ac58 100644
--- a/app/admin/page.tsx
+++ b/app/admin/page.tsx
@@ -149,6 +149,15 @@ export default function AdminDashboard() {
     }));
   };
 
+  const toggleAutoFullscreen = (index: number) => {
+    setIsEditing(prev => ({
+      ...prev,
+      extraMedia: (prev?.extraMedia || []).map((m, i) =>
+        i === index ? { ...m, autoFullscreen: !m.autoFullscreen } : m
+      ),
+    }));
+  };
+
   const handleSaveCard = async () => {
     if (!isEditing) return;
     const generateSafeId = () => 'card-' + Date.now().toString(36) + Math.random().toString(36).substring(2);
@@ -478,17 +487,28 @@ export default function AdminDashboard() {
                               <div className="text-xs font-semibold text-gray-700 uppercase tracking-wider">
                                 {video ? 'Video' : 'Image'}
                               </div>
-                              {video && (
-                                <label className="flex items-center gap-2 mt-1 cursor-pointer">
+                              <div className="flex flex-wrap gap-x-4 gap-y-1 mt-1">
+                                {video && (
+                                  <label className="flex items-center gap-2 cursor-pointer">
+                                    <input
+                                      type="checkbox"
+                                      checked={!!item.autoplay}
+                                      onChange={() => toggleAutoplay(i)}
+                                      className="w-4 h-4 text-blue-600 rounded"
+                                    />
+                                    <span className="text-sm text-gray-700">Autoplay (muted)</span>
+                                  </label>
+                                )}
+                                <label className="flex items-center gap-2 cursor-pointer">
                                   <input
                                     type="checkbox"
-                                    checked={!!item.autoplay}
-                                    onChange={() => toggleAutoplay(i)}
+                                    checked={!!item.autoFullscreen}
+                                    onChange={() => toggleAutoFullscreen(i)}
                                     className="w-4 h-4 text-blue-600 rounded"
                                   />
-                                  <span className="text-sm text-gray-700">Autoplay (muted)</span>
+                                  <span className="text-sm text-gray-700">Auto fullscreen</span>
                                 </label>
-                              )}
+                              </div>
                             </div>
                             <button
                               onClick={() => removeExtraMedia(i)}
diff --git a/components/PublicGrid.tsx b/components/PublicGrid.tsx
index f43eaa0..10ad7cd 100644
--- a/components/PublicGrid.tsx
+++ b/components/PublicGrid.tsx
@@ -340,7 +340,14 @@ export default function PublicGrid({ cards, maxCols = 5 }: { cards: Card[], maxC
           return (
             <div
               key={card.id}
-              onClick={() => setActiveCard(card)}
+              onClick={() => {
+                setActiveCard(card);
+                // If any extraMedia item is flagged auto-fullscreen, open it immediately.
+                // The carousel's index 0 is the cover image; extraMedia starts at offset 1 (or 0 if no cover).
+                const offset = card.imageUrl ? 1 : 0;
+                const idx = (card.extraMedia || []).findIndex(m => m.autoFullscreen);
+                if (idx >= 0) setFullscreenIndex(offset + idx);
+              }}
               className="group relative cursor-pointer overflow-hidden rounded-xl shadow-md aspect-square bg-gray-200 transition-all duration-300 hover:shadow-xl hover:-translate-y-1"
             >
               {card.imageUrl ? (
diff --git a/types/index.ts b/types/index.ts
index 0be89e2..7d69d5b 100644
--- a/types/index.ts
+++ b/types/index.ts
@@ -2,7 +2,8 @@ export type CardType = 'INFO_PAGE' | 'EXTERNAL_LINK' | 'IMAGE_GALLERY' | 'SERVIC
 
 export type MediaItem = {
   url: string;
-  autoplay?: boolean;
+  autoplay?: boolean;       // videos only — autoplay muted when shown
+  autoFullscreen?: boolean; // any media — open the fullscreen viewer at this slide on card open
 };
 
 export interface Card {