From 945fb610f9acf17513ac22345a2a9024f424b086 Mon Sep 17 00:00:00 2001
From: Ben Miller <ben.p.miller@gmail.com>
Date: Sun, 28 Dec 2025 21:13:02 -0700
Subject: [PATCH] Fix: Prevent drag-drop overlay during internal reordering in
 Media Manager

Updated drag event listeners in MediaManager.html to check for 'Files' in dataTransfer.types. This ensures the upload overlay only appears when files are dragged from the OS, preventing interference with SortableJS reordering.
---
 src/MediaManager.html | 79 +++++++++++++++++++++++++------------------
 1 file changed, 47 insertions(+), 32 deletions(-)

diff --git a/src/MediaManager.html b/src/MediaManager.html
index 2de00a6..0b5ac1a 100644
--- a/src/MediaManager.html
+++ b/src/MediaManager.html
@@ -716,17 +716,13 @@
         badge = '<span class="badge" style="background:#fee2e2; color:#991b1b;">Deleted</span>';
       }
 
-      // Check Video
       var isVideo = (item.mimeType && item.mimeType.startsWith('video/')) || (item.filename && item.filename.match(/\.(mp4|mov|webm)$/i));
       if (isVideo) console.log("[MediaManager] Video Detected: " + item.filename);
 
-      var videoBadgeIcon = isVideo ? '<div class="type-badge" title="Video">📹</div>' : '';
+        var videoBadgeIcon = isVideo ? '<div class="type-badge" title="Video">🎞️</div>' : '';
 
-      // Content URL
-      var contentUrl = item.contentUrl || "";
-      if (isVideo && item.source !== 'shopify_only' && state.token) {
-        contentUrl = "https://www.googleapis.com/drive/v3/files/" + item.id + "?alt=media&access_token=" + state.token;
-      }
+        // content URL logic (Only relevant for Shopify where we have a direct public link)
+        var contentUrl = item.contentUrl || "";
 
       var actionBtn = item._deleted
         ? '<button class="icon-btn" onclick="state.deleteItem(' + index + ')" title="Restore">↩️</button>'
@@ -740,16 +736,19 @@
         actionBtn +
         '</div>';
 
-      // Create Media Element Programmatically
+        // Create Media Element
+        // RULE: Only create <video> for Shopify-hosted videos (public).
+        // Drive videos use static thumbnail + Iframe Preview.
       var mediaEl;
-      if (isVideo) {
-        mediaEl = document.createElement('video');
-        mediaEl.src = contentUrl;
-        mediaEl.poster = item.thumbnail || "";
-        mediaEl.muted = true;
-        mediaEl.loop = true;
-        mediaEl.style.objectFit = 'cover';
+        if (isVideo && item.source === 'shopify_only' && contentUrl) {
+          mediaEl = document.createElement('video');
+          mediaEl.src = contentUrl;
+          mediaEl.poster = item.thumbnail || "";
+          mediaEl.muted = true;
+          mediaEl.loop = true;
+          mediaEl.style.objectFit = 'cover';
       } else {
+          // Static Image for Drive videos or regular images
         mediaEl = document.createElement('img');
         mediaEl.src = item.thumbnail || "";
         mediaEl.loading = "lazy";
@@ -779,22 +778,27 @@
       var isVideo = (item.mimeType && item.mimeType.startsWith('video/')) || (item.filename && item.filename.match(/\.(mp4|mov|webm)$/i));
 
       if (isVideo) {
+        // Drive Video -> Iframe
+        if (item.source !== 'shopify_only') {
+          iframe.src = "https://drive.google.com/file/d/" + item.id + "/preview";
+          iframe.style.display = 'block';
+        }
+        // Shopify Video -> Direct Player
+        else {
           var previewUrlParam = item.contentUrl || "";
-          if (item.source !== 'shopify_only' && state.token) {
-            previewUrlParam = "https://www.googleapis.com/drive/v3/files/" + item.id + "?alt=media&access_token=" + state.token;
-          }
           if (previewUrlParam) {
             vid.src = previewUrlParam;
             vid.style.display = 'block';
-               vid.play().catch(console.warn);
+            vid.play().catch(console.warn);
              } else {
-               iframe.src = "https://drive.google.com/file/d/" + item.id + "/preview";
-               iframe.style.display = 'block';
-             }
-        } else {
+            // Fallback if URL missing
+            console.warn("Missing contentUrl for Shopify video");
+          }
+        }
+      } else {
           img.src = item.thumbnail;
           img.style.display = 'block';
-        }
+      }
 
       modal.style.display = 'flex';
     };
@@ -1130,13 +1134,20 @@
                       const dropOverlay = document.getElementById('drop-overlay');
                       let dragCounter = 0;
 
+                        // Check if the drag involves files
+                        function isFileDrag(e) {
+                          return e.dataTransfer.types && Array.from(e.dataTransfer.types).includes('Files');
+                        }
+
                       document.addEventListener('dragenter', (e) => {
+                        if (!isFileDrag(e)) return;
                         e.preventDefault();
                         dragCounter++;
                         dropOverlay.style.display = 'flex';
                       });
 
                       document.addEventListener('dragleave', (e) => {
+                        if (!isFileDrag(e)) return;
                         e.preventDefault();
                         dragCounter--;
                         if (dragCounter === 0) {
@@ -1144,16 +1155,20 @@
                         }
                       });
 
-                      document.addEventListener('dragover', (e) => { e.preventDefault(); });
+                        document.addEventListener('dragover', (e) => {
+                          if (!isFileDrag(e)) return;
+                          e.preventDefault();
+                        });
 
                       document.addEventListener('drop', (e) => {
-                    e.preventDefault();
-                      dragCounter = 0;
-                      dropOverlay.style.display = 'none';
-                      if (e.dataTransfer && e.dataTransfer.files.length > 0) {
-                        controller.handleFiles(e.dataTransfer.files);
-                      }
-                  });
+                        if (!isFileDrag(e)) return;
+                        e.preventDefault();
+                        dragCounter = 0;
+                        dropOverlay.style.display = 'none';
+                        if (e.dataTransfer && e.dataTransfer.files.length > 0) {
+                          controller.handleFiles(e.dataTransfer.files);
+                        }
+                      });
 
   </script>
   <script async defer src="https://apis.google.com/js/api.js" onload="onApiLoad()"></script>