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

@@ -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
+        // content URL logic (Only relevant for Shopify where we have a direct public link)
         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;
-      }
 
       var actionBtn = item._deleted
         ? '<button class="icon-btn" onclick="state.deleteItem(' + index + ')" title="Restore">↩️</button>'
@@ -740,9 +736,11 @@
         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) {
+        if (isVideo && item.source === 'shopify_only' && contentUrl) {
           mediaEl = document.createElement('video');
           mediaEl.src = contentUrl;
           mediaEl.poster = item.thumbnail || "";
@@ -750,6 +748,7 @@
           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,17 +778,22 @@
       var isVideo = (item.mimeType && item.mimeType.startsWith('video/')) || (item.filename && item.filename.match(/\.(mp4|mov|webm)$/i));
 
       if (isVideo) {
-          var previewUrlParam = item.contentUrl || "";
+        // Drive Video -> Iframe
-          if (item.source !== 'shopify_only' && state.token) {
+        if (item.source !== 'shopify_only') {
-            previewUrlParam = "https://www.googleapis.com/drive/v3/files/" + item.id + "?alt=media&access_token=" + state.token;
+          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 (previewUrlParam) {
             vid.src = previewUrlParam;
             vid.style.display = 'block';
             vid.play().catch(console.warn);
              } else {
-               iframe.src = "https://drive.google.com/file/d/" + item.id + "/preview";
+            // Fallback if URL missing
-               iframe.style.display = 'block';
+            console.warn("Missing contentUrl for Shopify video");
+          }
         }
       } else {
           img.src = item.thumbnail;
@@ -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,9 +1155,13 @@
                         }
                       });
 
-                      document.addEventListener('dragover', (e) => { e.preventDefault(); });
+                        document.addEventListener('dragover', (e) => {
+                          if (!isFileDrag(e)) return;
+                          e.preventDefault();
+                        });
 
                       document.addEventListener('drop', (e) => {
+                        if (!isFileDrag(e)) return;
                         e.preventDefault();
                         dragCounter = 0;
                         dropOverlay.style.display = 'none';