3

app.js

@@ -63,6 +63,14 @@ function renderGallery(photos) {
 
     thumbDiv.appendChild(img);
 
+    // ICONA PLAY SE È VIDEO
+    if (photo.mime_type.startsWith("video/")) {
+      const play = document.createElement("div");
+      play.className = "play-icon";
+      play.textContent = "▶";
+      thumbDiv.appendChild(play);
+    }
+
     // Fallback se thub2 manca
     const preview = photo.thub2
       ? `https://prova.patachina.it/${photo.thub2}`
@@ -82,28 +90,48 @@ function renderGallery(photos) {
 
 
 // ===============================
-// MODALE IMMAGINE
+// MODALE (FOTO + VIDEO)
 // ===============================
 const modal = document.getElementById('modal');
-const modalImg = document.getElementById('modalImage');
+const modalImg = document.getElementById('modalImage'); // NON USATO PIÙ
 const modalClose = document.getElementById('modalClose');
 
 function openModal(srcOriginal, srcPreview, photo) {
   currentPhoto = photo;
 
-  modalImg.src = srcPreview;
-  modal.classList.add('open');
+  const container = document.getElementById("modalMediaContainer");
+  container.innerHTML = ""; // pulizia
 
-  const img = new Image();
+  if (photo.mime_type.startsWith("video/")) {
+    // VIDEO
+    const video = document.createElement("video");
+    video.src = srcOriginal;
+    video.controls = true;
+    video.autoplay = true;
+    video.style.maxWidth = "100%";
+    video.style.maxHeight = "100%";
+    container.appendChild(video);
+  } else {
+    // FOTO
+    const img = document.createElement("img");
+    img.src = srcPreview;
+    img.style.maxWidth = "100%";
+    img.style.maxHeight = "100%";
+    container.appendChild(img);
+
+    const full = new Image();
+    full.src = srcOriginal;
+    full.onload = () => {
       img.src = srcOriginal;
-  img.onload = () => {
-    modalImg.src = srcOriginal;
     };
   }
 
+  modal.classList.add('open');
+}
+
 function closeModal() {
   modal.classList.remove('open');
-  modalImg.src = '';
+  document.getElementById("modalMediaContainer").innerHTML = "";
 }
 
 modalClose.addEventListener('click', closeModal);
@@ -121,13 +149,9 @@ const infoBtn = document.getElementById('modalInfoBtn');
 infoBtn.addEventListener('click', () => {
   if (!currentPhoto) return;
 
-  // Gestione sicura GPS null
   const gps = currentPhoto.gps || { lat: '-', lng: '-', alt: '-' };
-
-  // Cartella estratta dal path
   const folder = currentPhoto.path.split('/').slice(2, -1).join('/');
 
-  // HTML del pannello
   infoPanel.innerHTML = `
     <h3>Informazioni</h3>
 
@@ -149,7 +173,6 @@ infoBtn.addEventListener('click', () => {
 
   infoPanel.classList.add('open');
 
-  // Se la foto ha coordinate GPS, crea la mappa
   if (gps.lat !== '-' && gps.lng !== '-') {
     setTimeout(() => {
       const map = L.map('infoMap', {
@@ -166,7 +189,6 @@ infoBtn.addEventListener('click', () => {
   }
 });
 
-// Chiudi pannello cliccando fuori
 document.addEventListener('click', (e) => {
   if (!infoPanel.classList.contains('open')) return;
 

index.html

@@ -21,11 +21,14 @@
     <div id="gallery" class="gallery"></div>
   </main>
 
-  <!-- Modal Immagine -->
+  <!-- Modal Media (foto + video) -->
   <div id="modal" class="modal">
     <div class="modal-content">
       <div class="modal-close" id="modalClose">×</div>
-      <img id="modalImage" src="" alt="">
+
+      <!-- CONTENITORE DINAMICO -->
+      <div id="modalMediaContainer"></div>
+
       <div class="modal-info-btn" id="modalInfoBtn">ℹ️</div>
     </div>
   </div>

style.css

@@ -140,3 +140,18 @@ header {
   background: #ddd;
   outline: none;
 }
+
+.video-thumb {
+  position: relative;
+}
+
+.play-icon {
+  position: absolute;
+  bottom: 8px;
+  right: 8px;
+  background: rgba(0,0,0,0.6);
+  color: white;
+  padding: 4px 6px;
+  border-radius: 4px;
+  font-size: 14px;
+}