slices.network / tools
Tools for the Atmosphere tools.slices.network
quickslice atproto html
fork atom

feat(teal-scrobble): improve track search with smart album matching

- Show all album versions for each track in dropdown
- Sort results by quality: official albums first, compilations last
- Prefer original releases (earliest date) over reissues
- Dedupe to show one entry per album (keeping best version)
- Remove separate album search field (track dropdown now includes album)
- Make selected artist/track tags full width
- Increase search limit to 50 recordings

chadtmiller.com dca1c235 73995475

+76 -134
unified split
+76 -134
teal-scrobble.html
··· 228 228 229 229 /* Selected Tag */ 230 230 .selected-tag { 231 - display: inline-flex; 231 + display: flex; 232 232 align-items: center; 233 + justify-content: space-between; 233 234 gap: 0.5rem; 234 235 background: var(--bg-hover); 235 236 border: 1px solid var(--accent); 236 237 border-radius: 0.375rem; 237 - padding: 0.5rem 0.75rem; 238 + padding: 0.75rem; 238 239 color: var(--text-primary); 240 + width: 100%; 239 241 } 240 242 241 243 .selected-tag button { ··· 579 581 if (query.length < 2) return []; 580 582 581 583 const fullQuery = `${query} AND arid:${artistMbid}`; 582 - const url = `${MB_API}/recording?query=${encodeURIComponent(fullQuery)}&fmt=json&limit=20`; 584 + const url = `${MB_API}/recording?query=${encodeURIComponent(fullQuery)}&fmt=json&limit=50`; 583 585 const res = await fetch(url, { headers: MB_HEADERS }); 584 586 585 587 if (!res.ok) throw new Error("MusicBrainz search failed"); 586 588 587 589 const data = await res.json(); 588 590 return data.recordings || []; 589 - } 590 - 591 - async function searchReleases(query, artistMbid) { 592 - if (query.length < 2) return []; 593 - 594 - const fullQuery = `${query} AND arid:${artistMbid}`; 595 - const url = `${MB_API}/release?query=${encodeURIComponent(fullQuery)}&fmt=json&limit=10`; 596 - const res = await fetch(url, { headers: MB_HEADERS }); 597 - 598 - if (!res.ok) throw new Error("MusicBrainz search failed"); 599 - 600 - const data = await res.json(); 601 - return data.releases || []; 602 591 } 603 592 604 593 function debounce(fn, ms) { ··· 804 793 <div id="track-field"></div> 805 794 </div> 806 795 807 - <div class="form-row"> 808 - <div class="form-group"> 809 - <label>Album <span style="font-weight: normal; color: var(--text-secondary);">(optional)</span></label> 810 - <div id="album-field"></div> 811 - </div> 812 - <div class="form-group" style="flex: 0 0 80px;"> 813 - <label>Duration</label> 814 - <input type="text" id="duration-display" class="read-only" readonly placeholder="--:--" /> 815 - </div> 796 + <div class="form-group" style="max-width: 100px;"> 797 + <label>Duration</label> 798 + <input type="text" id="duration-display" class="read-only" readonly placeholder="--:--" /> 816 799 </div> 817 800 818 801 <div class="form-group"> ··· 841 824 842 825 renderArtistField(); 843 826 renderTrackField(); 844 - renderAlbumField(); 845 827 } 846 828 847 829 function renderArtistField() { ··· 874 856 const container = document.getElementById("track-field"); 875 857 876 858 if (state.selectedRecording) { 859 + const albumText = state.selectedRecording.releaseName 860 + ? ` · ${esc(state.selectedRecording.releaseName)}` 861 + : ""; 877 862 container.innerHTML = ` 878 863 <div class="selected-tag"> 879 - <span>${esc(state.selectedRecording.title)}</span> 864 + <span>${esc(state.selectedRecording.title)}${albumText}</span> 880 865 <button onclick="clearRecording()">&times;</button> 881 866 </div> 882 867 `; ··· 898 883 } 899 884 } 900 885 901 - function renderAlbumField() { 902 - const container = document.getElementById("album-field"); 903 - const disabled = !state.selectedArtist; 904 - const albumName = state.selectedRecording?.releaseName || ""; 905 - 906 - container.innerHTML = ` 907 - <div class="autocomplete-wrapper"> 908 - <input 909 - type="text" 910 - id="album-input" 911 - placeholder="${disabled ? "Select an artist first" : "Search or leave blank..."}" 912 - value="${esc(albumName)}" 913 - ${disabled ? "disabled" : ""} 914 - oninput="handleAlbumInput(this.value)" 915 - onfocus="handleAlbumInput(this.value)" 916 - /> 917 - <div id="album-dropdown" class="autocomplete-dropdown hidden"></div> 918 - </div> 919 - `; 920 - } 921 - 922 886 // ============================================================================= 923 887 // ARTIST SEARCH HANDLERS 924 888 // ============================================================================= ··· 977 941 978 942 renderArtistField(); 979 943 renderTrackField(); 980 - renderAlbumField(); 981 944 updateSubmitButton(); 982 945 } 983 946 ··· 988 951 989 952 renderArtistField(); 990 953 renderTrackField(); 991 - renderAlbumField(); 992 954 updateSubmitButton(); 993 955 } 994 956 ··· 1020 982 return; 1021 983 } 1022 984 1023 - dropdown.innerHTML = recordings 1024 - .map((r, i) => { 1025 - const release = r.releases?.[0]; 985 + // Flatten recordings into recording+release pairs 986 + let items = []; 987 + recordings.forEach((r) => { 988 + const releases = r.releases || []; 989 + if (releases.length === 0) { 990 + items.push({ recording: r, release: null }); 991 + } else { 992 + releases.forEach((release) => { 993 + items.push({ recording: r, release }); 994 + }); 995 + } 996 + }); 997 + 998 + // Sort: prefer official albums without secondary types, then by date 999 + items.sort((a, b) => { 1000 + const aRelease = a.release || {}; 1001 + const bRelease = b.release || {}; 1002 + const aGroup = aRelease["release-group"] || {}; 1003 + const bGroup = bRelease["release-group"] || {}; 1004 + 1005 + // Prefer official status 1006 + const aOfficial = aRelease.status === "Official" ? 0 : 1; 1007 + const bOfficial = bRelease.status === "Official" ? 0 : 1; 1008 + if (aOfficial !== bOfficial) return aOfficial - bOfficial; 1009 + 1010 + // Prefer albums without secondary types (not compilations) 1011 + const aIsCompilation = (aGroup["secondary-types"] || []).length > 0 ? 1 : 0; 1012 + const bIsCompilation = (bGroup["secondary-types"] || []).length > 0 ? 1 : 0; 1013 + if (aIsCompilation !== bIsCompilation) return aIsCompilation - bIsCompilation; 1014 + 1015 + // Prefer primary type "Album" 1016 + const aIsAlbum = aGroup["primary-type"] === "Album" ? 0 : 1; 1017 + const bIsAlbum = bGroup["primary-type"] === "Album" ? 0 : 1; 1018 + if (aIsAlbum !== bIsAlbum) return aIsAlbum - bIsAlbum; 1019 + 1020 + // Prefer earlier release date (original release) 1021 + const aDate = aRelease.date || "9999"; 1022 + const bDate = bRelease.date || "9999"; 1023 + return aDate.localeCompare(bDate); 1024 + }); 1025 + 1026 + // Dedupe after sorting - keep first (best) occurrence of each track+album 1027 + const seen = new Set(); 1028 + items = items.filter((item) => { 1029 + const key = `${item.recording.title}|${item.release?.title || ""}`; 1030 + if (seen.has(key)) return false; 1031 + seen.add(key); 1032 + return true; 1033 + }); 1034 + 1035 + dropdown.innerHTML = items 1036 + .map((item, i) => { 1037 + const r = item.recording; 1038 + const release = item.release; 1026 1039 const duration = r.length ? formatDuration(Math.floor(r.length / 1000)) : ""; 1027 1040 const album = release?.title || ""; 1028 1041 const artUrl = release?.id ··· 1030 1043 : ""; 1031 1044 1032 1045 return ` 1033 - <div class="autocomplete-item" onclick="selectRecording(${i})" data-index="${i}"> 1046 + <div class="autocomplete-item" onclick="selectRecordingItem(${i})" data-index="${i}"> 1034 1047 <div class="autocomplete-item-art"> 1035 1048 ${artUrl ? `<img src="${artUrl}" alt="" onerror="this.style.display='none'">` : ""} 1036 1049 </div> 1037 1050 <div class="autocomplete-item-info"> 1038 - <div class="autocomplete-item-title">${esc(r.title)} ${duration ? `<span style="color: var(--text-secondary); font-weight: normal;">${duration}</span>` : ""}</div> 1039 - ${album ? `<div class="autocomplete-item-subtitle">${esc(album)}</div>` : ""} 1051 + <div class="autocomplete-item-title">${esc(r.title)}${album ? ` <span style="color: var(--text-secondary); font-weight: normal;">· ${esc(album)}</span>` : ""}</div> 1052 + ${duration ? `<div class="autocomplete-item-subtitle">${duration}</div>` : ""} 1040 1053 </div> 1041 1054 </div> 1042 1055 `; 1043 1056 }) 1044 1057 .join(""); 1045 1058 1046 - dropdown.dataset.recordings = JSON.stringify(recordings); 1059 + dropdown.dataset.items = JSON.stringify(items); 1047 1060 } catch (error) { 1048 1061 dropdown.innerHTML = `<div class="autocomplete-status" style="color: var(--error-text)">Search failed</div>`; 1049 1062 } 1050 1063 }, 300); 1051 1064 1052 - function selectRecording(index) { 1065 + function selectRecordingItem(index) { 1053 1066 const dropdown = document.getElementById("track-dropdown"); 1054 - const recordings = JSON.parse(dropdown.dataset.recordings || "[]"); 1055 - const recording = recordings[index]; 1067 + const items = JSON.parse(dropdown.dataset.items || "[]"); 1068 + const item = items[index]; 1056 1069 1057 - if (!recording) return; 1070 + if (!item) return; 1058 1071 1059 - const release = recording.releases?.[0]; 1072 + const recording = item.recording; 1073 + const release = item.release; 1060 1074 const durationSecs = recording.length ? Math.floor(recording.length / 1000) : null; 1061 1075 1062 1076 state.selectedRecording = { ··· 1076 1090 : ""; 1077 1091 1078 1092 renderTrackField(); 1079 - renderAlbumField(); 1080 1093 updateSubmitButton(); 1081 1094 } 1082 1095 ··· 1085 1098 document.getElementById("duration-display").value = ""; 1086 1099 1087 1100 renderTrackField(); 1088 - renderAlbumField(); 1089 1101 updateSubmitButton(); 1090 1102 } 1091 1103 ··· 1094 1106 const m = Math.floor(secs / 60); 1095 1107 const s = secs % 60; 1096 1108 return `${m}:${s.toString().padStart(2, "0")}`; 1097 - } 1098 - 1099 - // ============================================================================= 1100 - // ALBUM SEARCH HANDLERS 1101 - // ============================================================================= 1102 - 1103 - const handleAlbumInput = debounce(async (query) => { 1104 - const dropdown = document.getElementById("album-dropdown"); 1105 - 1106 - // Update the release name in state as user types 1107 - if (state.selectedRecording) { 1108 - state.selectedRecording.releaseName = query || null; 1109 - state.selectedRecording.releaseMbid = null; 1110 - } 1111 - 1112 - if (!state.selectedArtist || query.length < 2) { 1113 - dropdown.classList.add("hidden"); 1114 - return; 1115 - } 1116 - 1117 - dropdown.innerHTML = `<div class="autocomplete-status">Searching...</div>`; 1118 - dropdown.classList.remove("hidden"); 1119 - 1120 - try { 1121 - const releases = await searchReleases(query, state.selectedArtist.mbid); 1122 - 1123 - if (releases.length === 0) { 1124 - dropdown.innerHTML = `<div class="autocomplete-status">No albums found</div>`; 1125 - return; 1126 - } 1127 - 1128 - dropdown.innerHTML = releases 1129 - .map((r, i) => { 1130 - const date = r.date ? r.date.substring(0, 4) : ""; 1131 - const artUrl = r.id ? `https://coverartarchive.org/release/${r.id}/front-250` : ""; 1132 - 1133 - return ` 1134 - <div class="autocomplete-item" onclick="selectRelease(${i})" data-index="${i}"> 1135 - <div class="autocomplete-item-art"> 1136 - ${artUrl ? `<img src="${artUrl}" alt="" onerror="this.style.display='none'">` : ""} 1137 - </div> 1138 - <div class="autocomplete-item-info"> 1139 - <div class="autocomplete-item-title">${esc(r.title)}</div> 1140 - ${date ? `<div class="autocomplete-item-subtitle">${date}</div>` : ""} 1141 - </div> 1142 - </div> 1143 - `; 1144 - }) 1145 - .join(""); 1146 - 1147 - dropdown.dataset.releases = JSON.stringify(releases); 1148 - } catch (error) { 1149 - dropdown.innerHTML = `<div class="autocomplete-status" style="color: var(--error-text)">Search failed</div>`; 1150 - } 1151 - }, 300); 1152 - 1153 - function selectRelease(index) { 1154 - const dropdown = document.getElementById("album-dropdown"); 1155 - const releases = JSON.parse(dropdown.dataset.releases || "[]"); 1156 - const release = releases[index]; 1157 - 1158 - if (!release) return; 1159 - 1160 - if (state.selectedRecording) { 1161 - state.selectedRecording.releaseName = release.title; 1162 - state.selectedRecording.releaseMbid = release.id; 1163 - } 1164 - 1165 - dropdown.classList.add("hidden"); 1166 - document.getElementById("album-input").value = release.title; 1167 1109 } 1168 1110 1169 1111 // =============================================================================