From ad67dd9ab56ac446180f610d1a88afca58da5ba0 Mon Sep 17 00:00:00 2001
From: Ben Miller <ben.p.miller@gmail.com>
Date: Wed, 31 Dec 2025 08:43:04 -0700
Subject: [PATCH] Optimize Media Matching Workflow

- **Preload Thumbnails**: Implemented image preloading in the media matching wizard to ensure instant rendering of candidate matches.
- **Async Linking**: Refactored the linking confirmation to be asynchronous. The UI now optimistically advances to the next match immediately, performing the backend linking in the background.
- **Completion Gate**: Added a check to ensure all pending background linking operations verify completion before the wizard closes and reloading occurs.
- **Video Support**: Verified that filename-based matching correctly handles video files by extracting filenames from Shopify video URLs.
---
 src/MediaManager.html | 75 +++++++++++++++++++++++++++++++------------
 1 file changed, 54 insertions(+), 21 deletions(-)

diff --git a/src/MediaManager.html b/src/MediaManager.html
index 2fc4996..5ccd934 100644
--- a/src/MediaManager.html
+++ b/src/MediaManager.html
@@ -578,7 +578,7 @@
       <div id="transfer-progress-bar" class="progress-fill"></div>
     </div>
     </div>
-    
+
     <!-- Footer Buttons (Bottom) -->
     <div class="transfer-footer">
       <button id="btn-transfer-reopen" class="btn btn-secondary" style="font-size:12px;" disabled>
@@ -1540,7 +1540,7 @@
         this.setPickerState(false);
         setTimeout(() => ui.hideTransferSession(), 2000);
       },
-      
+
 
       startPhotoSession() {
         this.setPickerState(true);
@@ -1678,6 +1678,13 @@
           this.matches = newMatches;
           this.currentMatchIndex = 0;
           ui.logStatus('info', 'Found ' + newMatches.length + ' potential matches. Starting matching wizard...', 'info');
+
+          // Preload Images
+          newMatches.forEach(function (m) {
+            if (m.drive && m.drive.thumbnail) new Image().src = m.drive.thumbnail;
+            if (m.shopify && m.shopify.thumbnail) new Image().src = m.shopify.thumbnail;
+          });
+
           this.startMatching();
         } else {
           // No matches, show UI
@@ -1740,35 +1747,36 @@
         }, 50);
       },
 
+      pendingLinks: 0,
+
       confirmLink() {
         var match = this.matches[this.currentMatchIndex];
         var _this = this;
 
-        document.getElementById('btn-match-confirm').disabled = true;
-        document.getElementById('btn-match-confirm').innerText = "Linking...";
-        document.getElementById('btn-match-skip').disabled = true;
-
+        // Async Fire & Forget (from UI perspective)
+        this.pendingLinks++;
         ui.logStatus('link', 'Linking ' + match.drive.filename + '...', 'info');
 
         google.script.run
           .withSuccessHandler(function () {
             ui.logStatus('link', 'Linked ' + match.drive.filename, 'success');
-            _this.nextMatch();
+            _this.pendingLinks--;
+            _this.checkMatchingDone();
           })
           .withFailureHandler(function (e) {
-            alert("Failed to link: " + e.message);
-            document.getElementById('btn-match-confirm').disabled = false;
-            document.getElementById('btn-match-confirm').innerText = "Yes, Link";
-            document.getElementById('btn-match-skip').disabled = false;
+            ui.logStatus('link', 'Failed to link ' + match.drive.filename + ': ' + e.message, 'error');
+            _this.pendingLinks--;
+            _this.checkMatchingDone();
           })
           .linkDriveFileToShopifyMedia(state.sku, match.drive.id, match.shopify.id);
+
+        // Move to next immediately
+        this.nextMatch();
       },
 
       skipLink() {
-        document.getElementById('btn-match-skip').innerText = "Skipping...";
-        document.getElementById('btn-match-skip').disabled = true;
-        document.getElementById('btn-match-confirm').disabled = true;
-        setTimeout(() => this.nextMatch(), 200);
+        // No async op needed for skip
+        this.nextMatch();
       },
 
       nextMatch() {
@@ -1776,15 +1784,40 @@
         if (this.currentMatchIndex < this.matches.length) {
           this.renderMatch();
         } else {
-          // Done
-          document.getElementById('matching-modal').style.display = 'none';
-          ui.logStatus('info', 'Matching complete. Reloading...', 'info');
-          document.getElementById('loading-ui').style.display = 'block';
-          // Reload to get fresh state. Since hasRunMatching is true, it shouldn't trigger again.
-          this.loadMedia(true);
+          this.checkMatchingDone();
         }
       },
 
+      checkMatchingDone() {
+        // 1. Are we visually done?
+        if (this.currentMatchIndex < this.matches.length) return;
+
+        // 2. Are background jobs done?
+        if (this.pendingLinks > 0) {
+          // Show "Waiting" state in Modal
+          document.getElementById('matching-modal').style.display = 'flex'; // Ensure open
+          document.getElementById('btn-match-confirm').disabled = true;
+          document.getElementById('btn-match-skip').disabled = true;
+
+          // Re-purpose the modal content temporarily or overlay?
+          // Let's just update the title/status
+          var title = document.querySelector('#matching-modal h3');
+          if (title) title.innerText = "Finalizing...";
+
+          var p = document.querySelector('#matching-modal p');
+          if (p) p.innerText = "Finishing " + this.pendingLinks + " pending link operations...";
+
+          return;
+        }
+
+        // All Done
+        document.getElementById('matching-modal').style.display = 'none';
+        ui.logStatus('info', 'Matching complete. Reloading...', 'info');
+        document.getElementById('loading-ui').style.display = 'block';
+        // Reload to get fresh state. Since hasRunMatching is true, it shouldn't trigger again.
+        this.loadMedia(true);
+      },
+
       // Sand Animation (Global Loop)
       sandInterval: null,
       startSandAnimation() {