From d9c0b8bb541fb673c7e7bee3215b611bb9886e55 Mon Sep 17 00:00:00 2001
From: Josh Patra <joshpatra12@gmail.com>
Date: Thu, 5 Feb 2026 00:26:02 -0500
Subject: [PATCH] Add separate 'Map to External' button for missing tracks

- Missing tracks now show both 'Map to Local' and 'Map to External' buttons
- External tracks continue to show only 'Map to Local' button
- Added openExternalMap() function that opens modal in external mapping mode
- Added event listeners for .map-external-btn buttons
- External mapping button styled with warning color to distinguish from local mapping
- Users can now easily choose between mapping to Jellyfin tracks or external provider IDs
---
 allstarr/wwwroot/index.html | 48 +++++++++++++++++++++++++++++++++++--
 1 file changed, 46 insertions(+), 2 deletions(-)

diff --git a/allstarr/wwwroot/index.html b/allstarr/wwwroot/index.html
index f628332..f9c70b1 100644
--- a/allstarr/wwwroot/index.html
+++ b/allstarr/wwwroot/index.html
@@ -1803,7 +1803,7 @@
                     } else {
                         // isLocal is null/undefined - track is missing (not found locally or externally)
                         statusBadge = '<span class="status-badge" style="font-size:0.75rem;padding:2px 8px;margin-left:8px;background:var(--bg-tertiary);color:var(--text-secondary);"><span class="status-dot" style="background:var(--text-secondary);"></span>Missing</span>';
-                        // Add manual map button for missing tracks too
+                        // Add both mapping buttons for missing tracks
                         const firstArtist = (t.artists && t.artists.length > 0) ? t.artists[0] : '';
                         mapButton = `<button class="small map-track-btn" 
                             data-playlist-name="${escapeHtml(name)}" 
@@ -1811,7 +1811,14 @@
                             data-title="${escapeHtml(t.title || '')}" 
                             data-artist="${escapeHtml(firstArtist)}" 
                             data-spotify-id="${escapeHtml(t.spotifyId || '')}" 
-                            style="margin-left:8px;font-size:0.75rem;padding:4px 8px;">Map to Local</button>`;
+                            style="margin-left:8px;font-size:0.75rem;padding:4px 8px;">Map to Local</button>
+                            <button class="small map-external-btn" 
+                            data-playlist-name="${escapeHtml(name)}" 
+                            data-position="${t.position}" 
+                            data-title="${escapeHtml(t.title || '')}" 
+                            data-artist="${escapeHtml(firstArtist)}" 
+                            data-spotify-id="${escapeHtml(t.spotifyId || '')}" 
+                            style="margin-left:4px;font-size:0.75rem;padding:4px 8px;background:var(--warning);border-color:var(--warning);">Map to External</button>`;
                     }
                     
                     return `
@@ -1841,6 +1848,18 @@
                         openManualMap(playlistName, position, title, artist, spotifyId);
                     });
                 });
+                
+                // Add event listeners to external map buttons
+                document.querySelectorAll('.map-external-btn').forEach(btn => {
+                    btn.addEventListener('click', function() {
+                        const playlistName = this.getAttribute('data-playlist-name');
+                        const position = parseInt(this.getAttribute('data-position'));
+                        const title = this.getAttribute('data-title');
+                        const artist = this.getAttribute('data-artist');
+                        const spotifyId = this.getAttribute('data-spotify-id');
+                        openExternalMap(playlistName, position, title, artist, spotifyId);
+                    });
+                });
             } catch (error) {
                 document.getElementById('tracks-list').innerHTML = '<p style="text-align:center;color:var(--error);padding:40px;">Failed to load tracks</p>';
             }
@@ -2120,6 +2139,31 @@
             openModal('manual-map-modal');
         }
         
+        // Open external mapping modal (pre-set to external mode)
+        function openExternalMap(playlistName, position, title, artist, spotifyId) {
+            document.getElementById('map-playlist-name').value = playlistName;
+            document.getElementById('map-position').textContent = position + 1;
+            document.getElementById('map-spotify-title').textContent = title;
+            document.getElementById('map-spotify-artist').textContent = artist;
+            document.getElementById('map-spotify-id').value = spotifyId;
+            
+            // Set to external mapping mode
+            document.getElementById('map-type-select').value = 'external';
+            document.getElementById('jellyfin-mapping-section').style.display = 'none';
+            document.getElementById('external-mapping-section').style.display = 'block';
+            
+            // Reset all fields
+            document.getElementById('map-search-query').value = '';
+            document.getElementById('map-jellyfin-url').value = '';
+            document.getElementById('map-selected-jellyfin-id').value = '';
+            document.getElementById('map-external-id').value = '';
+            document.getElementById('map-external-provider').value = 'SquidWTF';
+            document.getElementById('map-save-btn').disabled = true;
+            document.getElementById('map-search-results').innerHTML = '<p style="text-align: center; color: var(--text-secondary); padding: 20px;">Enter an external provider ID above</p>';
+            
+            openModal('manual-map-modal');
+        }
+        
         // Update the saveManualMapping function to handle both types
         async function saveManualMapping() {
             const playlistName = document.getElementById('map-playlist-name').value;