feat(suggestions): add interactive navigation and track info modal

- Add artist_id field to SuggestedTrack for navigation
- Make artist names clickable to navigate to artist view
- Make album names clickable to navigate to album view
- Add TrackInfo button (info icon) to view track credits
- Integrate TrackInfoModal component with suggestions
- Update PlaylistDetailView to pass navigation callbacks
This commit is contained in:
vicrodh committed 2026-01-27 16:53:56 -06:00
1 parent 54315c2e4e
commit 9a89074b5f
4 files changed
+311 -74

No files matched your search

+154 -40
View File
@@ -60,12 +60,16 @@ pub struct SuggestedTrack {
pub title: String,
/// Artist name
pub artist_name: String,
/// Artist Qobuz ID (for navigation)
pub artist_id: Option<u64>,
/// Artist MBID (if known)
pub artist_mbid: Option<String>,
/// Album title
pub album_title: String,
/// Album ID for cover art
pub album_id: String,
/// Direct URL to album cover image
pub album_image_url: Option<String>,
/// Duration in seconds
pub duration: u32,
/// Similarity score (higher = more similar to playlist)
@@ -118,18 +122,18 @@ impl SuggestionsEngine {
/// Generate suggestions for a playlist
///
/// # Arguments
/// * `playlist_artist_mbids` - MBIDs of artists in the playlist
/// * `playlist_artists` - Artist info (MBID, name) from the playlist
/// * `exclude_track_ids` - Track IDs to exclude (already in playlist)
/// * `include_reasons` - Whether to include reason strings (dev mode)
pub async fn generate_suggestions(
&self,
playlist_artist_mbids: &[String],
playlist_artists: &[(String, String)], // (mbid, name)
exclude_track_ids: &HashSet<u64>,
include_reasons: bool,
) -> Result<SuggestionResult, String> {
use std::time::Instant;
if playlist_artist_mbids.is_empty() {
if playlist_artists.is_empty() {
log::debug!("[SuggestionsEngine] Empty playlist, returning empty");
return Ok(SuggestionResult {
tracks: Vec::new(),
@@ -139,19 +143,22 @@ impl SuggestionsEngine {
});
}
// Extract MBIDs for vector operations
let playlist_artist_mbids: Vec<String> = playlist_artists.iter().map(|(mbid, _)| mbid.clone()).collect();
// 1. Ensure vectors exist for playlist artists (skip if configured)
let step1_start = Instant::now();
if self.config.skip_vector_build {
log::info!("[SuggestionsEngine] Step 1: SKIPPED (skip_vector_build=true), using only cached vectors");
} else {
log::info!("[SuggestionsEngine] Step 1: Ensuring vectors for {} artists", playlist_artist_mbids.len());
for (i, mbid) in playlist_artist_mbids.iter().enumerate() {
log::info!("[SuggestionsEngine] Step 1: Ensuring vectors for {} artists", playlist_artists.len());
for (i, (mbid, name)) in playlist_artists.iter().enumerate() {
let artist_start = Instant::now();
let _ = self
.builder
.ensure_vector(mbid, None, None, self.config.vector_max_age_days)
.ensure_vector(mbid, Some(name), None, self.config.vector_max_age_days)
.await;
log::debug!("[SuggestionsEngine] ensure_vector {}/{} took {:?}", i + 1, playlist_artist_mbids.len(), artist_start.elapsed());
log::debug!("[SuggestionsEngine] ensure_vector {}/{} took {:?}", i + 1, playlist_artists.len(), artist_start.elapsed());
}
log::info!("[SuggestionsEngine] Step 1 completed in {:?}", step1_start.elapsed());
}
@@ -159,7 +166,7 @@ impl SuggestionsEngine {
// 2. Compute combined playlist vector
log::info!("[SuggestionsEngine] Step 2: Computing playlist vector");
let step2_start = Instant::now();
let playlist_vector = self.compute_playlist_vector(playlist_artist_mbids).await?;
let playlist_vector = self.compute_playlist_vector(&playlist_artist_mbids).await?;
log::info!("[SuggestionsEngine] Step 2 completed in {:?}, vector empty={}", step2_start.elapsed(), playlist_vector.is_empty());
if playlist_vector.is_empty() {
@@ -172,37 +179,68 @@ impl SuggestionsEngine {
});
}
// 3. Find nearest artists (excluding playlist artists)
log::info!("[SuggestionsEngine] Step 3: Finding nearest artists");
// 3. Find related artists (using direct relationships, not vector similarity)
log::info!("[SuggestionsEngine] Step 3: Finding related artists");
let step3_start = Instant::now();
let exclude_vec: Vec<String> = playlist_artist_mbids.to_vec();
let similar_artists = {
let store = self.store.lock().await;
store.find_nearest(&playlist_vector, self.config.max_artists, &exclude_vec)?
// Use direct relationship lookup instead of vector similarity
// This finds members, collaborators, etc. from the MusicBrainz data
store.get_all_related_artists(&playlist_artist_mbids, &exclude_vec, self.config.max_artists)?
};
log::info!("[SuggestionsEngine] Step 3 completed in {:?}, found {} similar artists", step3_start.elapsed(), similar_artists.len());
log::info!("[SuggestionsEngine] Step 3 completed in {:?}, found {} related artists", step3_start.elapsed(), similar_artists.len());
let similar_artists_count = similar_artists.len();
let mut source_artists = Vec::new();
let mut all_tracks = Vec::new();
// 4. Search for tracks by similar artists
log::info!("[SuggestionsEngine] Step 4: Searching tracks for similar artists");
let step4_start = Instant::now();
// 4a. First, search for tracks by playlist artists themselves (highest relevance)
log::info!("[SuggestionsEngine] Step 4a: Searching tracks for {} playlist artists", playlist_artists.len());
let step4a_start = Instant::now();
for (mbid, name) in playlist_artists {
source_artists.push(name.clone());
// Search Qobuz for tracks by this playlist artist (similarity = 1.0)
// Fetch 1.5x more tracks for playlist artists (higher priority)
let playlist_artist_limit = (self.config.tracks_per_artist as f32 * 1.5).ceil() as usize;
let tracks = self.search_artist_tracks_with_limit(mbid, Some(name), 1.0, playlist_artist_limit).await;
for mut track in tracks {
// Skip if already in playlist
if exclude_track_ids.contains(&track.track_id) {
continue;
}
if include_reasons {
track.reason = Some(format!("More from {}", name));
}
all_tracks.push(track);
}
}
log::info!("[SuggestionsEngine] Step 4a completed in {:?}, got {} tracks from playlist artists", step4a_start.elapsed(), all_tracks.len());
// 4b. Then search for tracks by related/similar artists
log::info!("[SuggestionsEngine] Step 4b: Searching tracks for {} related artists", similar_artists.len());
let step4b_start = Instant::now();
for (i, artist) in similar_artists.iter().enumerate() {
if artist.similarity < self.config.min_similarity {
continue;
}
source_artists.push(artist.name.clone().unwrap_or_else(|| artist.mbid.clone()));
if let Some(name) = &artist.name {
if !source_artists.contains(name) {
source_artists.push(name.clone());
}
}
// Search Qobuz for tracks by this artist
let search_start = Instant::now();
// Search Qobuz for tracks by this related artist
let tracks = self
.search_artist_tracks(&artist.mbid, artist.name.as_deref(), artist.similarity)
.await;
log::debug!("[SuggestionsEngine] search_artist_tracks {}/{} took {:?}, got {} tracks",
i + 1, similar_artists.len(), search_start.elapsed(), tracks.len());
for mut track in tracks {
// Skip if already in playlist
@@ -216,7 +254,7 @@ impl SuggestionsEngine {
&artist.mbid,
artist.name.as_deref(),
artist.similarity,
playlist_artist_mbids,
&playlist_artist_mbids,
));
}
@@ -224,19 +262,26 @@ impl SuggestionsEngine {
}
// Stop if we have enough tracks
if all_tracks.len() >= self.config.max_pool_size {
log::info!("[SuggestionsEngine] Reached pool size {} after {} artists", all_tracks.len(), i + 1);
if all_tracks.len() >= self.config.max_pool_size * 2 {
log::info!("[SuggestionsEngine] Reached extended pool size {} after {} related artists", all_tracks.len(), i + 1);
break;
}
}
log::info!("[SuggestionsEngine] Step 4 completed in {:?}, got {} tracks", step4_start.elapsed(), all_tracks.len());
log::info!("[SuggestionsEngine] Step 4b completed in {:?}, got {} total tracks", step4b_start.elapsed(), all_tracks.len());
// 5. Sort by similarity score and limit pool size
all_tracks.sort_by(|a, b| {
b.similarity_score
.partial_cmp(&a.similarity_score)
.unwrap_or(std::cmp::Ordering::Equal)
// 5. Deduplicate by title+artist (keeps highest similarity version)
let mut seen_titles: HashSet<String> = HashSet::new();
all_tracks.retain(|track| {
let key = format!("{}|{}", track.title.to_lowercase(), track.artist_name.to_lowercase());
seen_titles.insert(key)
});
// 6. Shuffle tracks for variety (so same artist doesn't dominate)
use rand::seq::SliceRandom;
let mut rng = rand::thread_rng();
all_tracks.shuffle(&mut rng);
// 7. Limit pool size
all_tracks.truncate(self.config.max_pool_size);
Ok(SuggestionResult {
@@ -265,12 +310,23 @@ impl SuggestionsEngine {
Ok(combined.normalize())
}
/// Search Qobuz for tracks by an artist
/// Search Qobuz for tracks by an artist (uses default tracks_per_artist limit)
async fn search_artist_tracks(
&self,
artist_mbid: &str,
artist_name: Option<&str>,
similarity: f32,
) -> Vec<SuggestedTrack> {
self.search_artist_tracks_with_limit(artist_mbid, artist_name, similarity, self.config.tracks_per_artist).await
}
/// Search Qobuz for tracks by an artist with custom limit
async fn search_artist_tracks_with_limit(
&self,
artist_mbid: &str,
artist_name: Option<&str>,
similarity: f32,
limit: usize,
) -> Vec<SuggestedTrack> {
let search_query = match artist_name {
Some(name) => name.to_string(),
@@ -285,16 +341,34 @@ impl SuggestionsEngine {
let client = self.qobuz_client.lock().await;
// Search for tracks by artist name
// Search for tracks by artist name (fetch 3x limit to have room for filtering)
match client
.search_tracks(&search_query, self.config.tracks_per_artist as u32, 0, None)
.search_tracks(&search_query, (limit * 3) as u32, 0, None)
.await
{
Ok(results) => {
let mut tracks = Vec::new();
let search_name_lower = search_query.to_lowercase();
for item in results.items {
tracks.push(self.track_to_suggested(&item, artist_mbid, similarity));
// Verify the track's performer matches the artist we searched for
let performer_name = item
.performer
.as_ref()
.map(|p| p.name.to_lowercase())
.unwrap_or_default();
// Check if performer name matches (fuzzy: contains or is contained)
let is_match = performer_name.contains(&search_name_lower)
|| search_name_lower.contains(&performer_name)
|| names_similar(&performer_name, &search_name_lower);
if is_match {
tracks.push(self.track_to_suggested(&item, artist_mbid, similarity));
if tracks.len() >= limit {
break;
}
}
}
tracks
@@ -308,26 +382,35 @@ impl SuggestionsEngine {
/// Convert a Track to a SuggestedTrack
fn track_to_suggested(&self, track: &Track, artist_mbid: &str, similarity: f32) -> SuggestedTrack {
// Extract album info
let (album_title, album_id) = match &track.album {
Some(album) => (album.title.clone(), album.id.clone()),
None => (String::new(), String::new()),
// Extract album info including image URL
let (album_title, album_id, album_image_url) = match &track.album {
Some(album) => {
let image_url = album.image.thumbnail
.as_ref()
.or(album.image.small.as_ref())
.or(album.image.large.as_ref())
.cloned();
(album.title.clone(), album.id.clone(), image_url)
}
None => (String::new(), String::new(), None),
};
// Extract artist name from track performer
let track_artist = track
// Extract artist name and ID from track performer
let (track_artist, artist_id) = track
.performer
.as_ref()
.map(|p| p.name.clone())
.map(|p| (p.name.clone(), p.id))
.unwrap_or_default();
SuggestedTrack {
track_id: track.id,
title: track.title.clone(),
artist_name: track_artist,
artist_id,
artist_mbid: Some(artist_mbid.to_string()),
album_title,
album_id,
album_image_url,
duration: track.duration,
similarity_score: similarity,
reason: None,
@@ -349,6 +432,37 @@ impl SuggestionsEngine {
}
}
/// Check if two artist names are similar enough to be considered a match
///
/// Handles cases like "George Harrison" vs "Harrison, George" or slight variations
fn names_similar(name1: &str, name2: &str) -> bool {
// Exact match
if name1 == name2 {
return true;
}
// Split into words and check overlap
let words1: HashSet<&str> = name1.split_whitespace().collect();
let words2: HashSet<&str> = name2.split_whitespace().collect();
if words1.is_empty() || words2.is_empty() {
return false;
}
// Count matching words
let matches = words1.intersection(&words2).count();
let min_words = words1.len().min(words2.len());
// If most words match, consider it a match
// For 2-word names (like "George Harrison"), need both words
// For longer names, allow some flexibility
if min_words <= 2 {
matches >= min_words
} else {
matches as f32 / min_words as f32 >= 0.7
}
}
/// Extract unique artist MBIDs from playlist tracks
///
/// This is a helper function that should be called from the Tauri command
+150 -33
View File
@@ -10,12 +10,15 @@
dismissTrack,
formatDuration
} from '$lib/services/playlistSuggestionsService';
import TrackInfoModal from './TrackInfoModal.svelte';
interface Props {
playlistId: number;
artists: PlaylistArtist[];
excludeTrackIds: number[];
onAddTrack?: (trackId: number) => Promise<void>;
onGoToAlbum?: (albumId: string) => void;
onGoToArtist?: (artistId: number) => void;
showReasons?: boolean;
}
@@ -24,9 +27,37 @@
artists,
excludeTrackIds,
onAddTrack,
onGoToAlbum,
onGoToArtist,
showReasons = false
}: Props = $props();
// TrackInfo modal state
let trackInfoOpen = $state(false);
let trackInfoId = $state<number | null>(null);
function handleShowTrackInfo(trackId: number) {
trackInfoId = trackId;
trackInfoOpen = true;
}
function handleCloseTrackInfo() {
trackInfoOpen = false;
trackInfoId = null;
}
function handleArtistClick(artistId: number | undefined) {
if (artistId && onGoToArtist) {
onGoToArtist(artistId);
}
}
function handleAlbumClick(albumId: string | undefined) {
if (albumId && onGoToAlbum) {
onGoToAlbum(albumId);
}
}
// State
let loading = $state(false);
let loadingMore = $state(false);
@@ -40,6 +71,11 @@
const VISIBLE_COUNT = 6;
const INITIAL_POOL = 18; // 3 pages worth
const EXPANDED_POOL = 60; // Full pool on demand
const MAX_POOL = 120; // Maximum pool for "load more variety"
// Track user interaction to detect when they want more variety
let completedCycles = $state(0); // How many times user cycled through all pages
let lastAddedAt = $state(0); // Track count when last track was added
// Derived state
const dismissedIds = $derived(getDismissedTrackIds(playlistId));
@@ -52,7 +88,9 @@
);
const hasMorePages = $derived(currentPage < totalPages - 1);
const canLoadMore = $derived(hasLoadedOnce && pool.length < EXPANDED_POOL && !loadingMore);
const canLoadMoreVariety = $derived(hasLoadedOnce && pool.length >= EXPANDED_POOL && pool.length < MAX_POOL && !loadingMore);
const isEmpty = $derived(filteredPool.length === 0 && !loading && hasLoadedOnce);
const showVarietyPrompt = $derived(completedCycles >= 1 && canLoadMoreVariety);
// Track the last playlist we loaded for
let lastLoadedPlaylistId = $state<number | null>(null);
@@ -74,6 +112,8 @@
lastLoadedPlaylistId = currentPlaylistId;
hasLoadedOnce = false;
pool = [];
completedCycles = 0;
lastAddedAt = 0;
void loadSuggestions(false);
}
});
@@ -144,15 +184,46 @@
function handleRefresh() {
if (hasMorePages) {
// Rotate to next page
currentPage = (currentPage + 1) % totalPages;
} else if (canLoadMore) {
// Load more tracks
void handleLoadMore();
} else {
// Reload from scratch
hasLoadedOnce = false;
void loadSuggestions(false);
// Go to next page
currentPage = currentPage + 1;
} else if (totalPages > 0) {
// Completed a cycle - wrap to first page
currentPage = 0;
completedCycles++;
log(`Completed cycle ${completedCycles}, pool size: ${pool.length}`);
// If we can load more, do it automatically after first cycle
if (completedCycles === 1 && canLoadMore) {
void handleLoadMore();
}
}
}
async function handleLoadMoreVariety() {
if (loadingMore || pool.length >= MAX_POOL) return;
loadingMore = true;
log('Loading more variety...');
try {
const moreResult = await getPlaylistSuggestionsV2(
artists,
excludeTrackIds,
showReasons,
{ max_pool_size: MAX_POOL }
);
// Merge new tracks, avoiding duplicates
const existingIds = new Set(pool.map(t => t.track_id));
const newTracks = moreResult.tracks.filter(t => !existingIds.has(t.track_id));
pool = [...pool, ...newTracks];
result = moreResult;
completedCycles = 0; // Reset cycle counter
log(`Added ${newTracks.length} new tracks, total pool: ${pool.length}`);
} catch (err) {
console.error('Failed to load more variety:', err);
} finally {
loadingMore = false;
}
}
@@ -163,6 +234,9 @@
await onAddTrack(track.track_id);
// Remove from pool locally (will be excluded on next load anyway)
pool = pool.filter(t => t.track_id !== track.track_id);
// Reset cycle counter - user found something they liked
completedCycles = 0;
lastAddedAt = pool.length;
} catch (err) {
console.error('Failed to add track:', err);
}
@@ -174,13 +248,16 @@
pool = [...pool];
}
function getAlbumArt(albumId: string): string {
if (!albumId) return '';
// Qobuz album art URL pattern
return `https://static.qobuz.com/images/covers/${albumId}_50.jpg`;
}
</script>
<!-- Track Info Modal -->
<TrackInfoModal
isOpen={trackInfoOpen}
trackId={trackInfoId}
onClose={handleCloseTrackInfo}
onArtistClick={onGoToArtist}
/>
{#if artists.length > 0 && !isEmpty}
<div class="suggestions-section" id="suggestions-anchor">
<div class="suggestions-header">
@@ -219,9 +296,9 @@
{#each visibleTracks as track (track.track_id)}
<div class="suggestion-row">
<div class="album-art">
{#if track.album_id}
{#if track.album_image_url}
<img
src={getAlbumArt(track.album_id)}
src={track.album_image_url}
alt=""
loading="lazy"
onerror={(e) => {
@@ -235,10 +312,28 @@
<div class="track-info">
<div class="track-title">{track.title}</div>
<div class="track-meta">
<span class="artist">{track.artist_name}</span>
{#if track.artist_id && onGoToArtist}
<button
class="meta-link artist"
onclick={(e) => { e.stopPropagation(); handleArtistClick(track.artist_id); }}
>
{track.artist_name}
</button>
{:else}
<span class="artist">{track.artist_name}</span>
{/if}
{#if track.album_title}
<span class="separator">·</span>
<span class="album">{track.album_title}</span>
{#if track.album_id && onGoToAlbum}
<button
class="meta-link album"
onclick={(e) => { e.stopPropagation(); handleAlbumClick(track.album_id); }}
>
{track.album_title}
</button>
{:else}
<span class="album">{track.album_title}</span>
{/if}
{/if}
</div>
</div>
@@ -247,14 +342,13 @@
{formatDuration(track.duration)}
</div>
{#if showReasons && track.reason}
<button
class="reason-btn"
title={track.reason}
>
<Info size={14} />
</button>
{/if}
<button
class="info-btn"
onclick={(e) => { e.stopPropagation(); handleShowTrackInfo(track.track_id); }}
title={showReasons && track.reason ? track.reason : 'Track info'}
>
<Info size={14} />
</button>
<div class="actions">
<button
@@ -276,7 +370,7 @@
{/each}
</div>
{#if filteredPool.length > VISIBLE_COUNT || canLoadMore}
{#if filteredPool.length > VISIBLE_COUNT || canLoadMore || canLoadMoreVariety}
<div class="pagination-info">
{#if loadingMore}
Loading more...
@@ -284,6 +378,8 @@
Showing {currentPage * VISIBLE_COUNT + 1}-{Math.min((currentPage + 1) * VISIBLE_COUNT, filteredPool.length)} of {filteredPool.length}
{#if canLoadMore}
<button class="load-more-link" onclick={handleLoadMore}>Load more</button>
{:else if showVarietyPrompt}
<button class="load-more-link" onclick={handleLoadMoreVariety}>Load more variety</button>
{/if}
{/if}
</div>
@@ -467,7 +563,7 @@
flex-shrink: 0;
}
.reason-btn {
.info-btn {
display: flex;
align-items: center;
justify-content: center;
@@ -476,14 +572,35 @@
background: transparent;
border: none;
color: var(--text-muted);
cursor: help;
cursor: pointer;
border-radius: 4px;
opacity: 0.5;
transition: opacity 150ms ease;
opacity: 0;
transition: opacity 150ms ease, background-color 150ms ease;
}
.suggestion-row:hover .reason-btn {
opacity: 1;
.suggestion-row:hover .info-btn {
opacity: 0.6;
}
.info-btn:hover {
opacity: 1 !important;
background: var(--bg-tertiary);
color: var(--text-primary);
}
.meta-link {
background: none;
border: none;
padding: 0;
font-size: inherit;
color: inherit;
cursor: pointer;
transition: color 150ms ease;
}
.meta-link:hover {
color: var(--accent-primary);
text-decoration: underline;
}
.actions {
@@ -1682,6 +1682,8 @@
artists={playlistArtists}
excludeTrackIds={excludeTrackIds}
onAddTrack={handleAddSuggestedTrack}
onGoToAlbum={onTrackGoToAlbum}
onGoToArtist={onTrackGoToArtist}
showReasons={false}
/>
{/if}
@@ -23,9 +23,13 @@ export interface SuggestedTrack {
track_id: number;
title: string;
artist_name: string;
/** Qobuz artist ID for navigation */
artist_id?: number;
artist_mbid?: string;
album_title: string;
album_id: string;
/** Direct URL to album cover image */
album_image_url?: string;
duration: number;
similarity_score: number;
reason?: string;
@@ -158,7 +162,7 @@ export async function cleanupVectorStore(maxAgeDays?: number): Promise<number> {
// ============ Helpers ============
/** Default number of top artists to use for suggestions */
const DEFAULT_TOP_ARTISTS = 5;
const DEFAULT_TOP_ARTISTS = 30;
/**
* Extract top artists from playlist tracks, sorted by frequency (track count)