chrisryn/vynl
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Wire Bandcamp into AI recommendations - prioritize indie artists, attach Bandcamp links to results

Browse Source
This commit is contained in:
root
2026-03-30 23:42:03 -05:00
parent dd4df6a070
commit 37fccc6eef
9 changed files with 62 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
frontend/src/components/RecommendationCard.tsx
View File

@@ -61,25 +61,25 @@ export default function RecommendationCard({ recommendation, onToggleSave, savin
/>
</button>
{recommendation.spotify_url && (
{recommendation.bandcamp_url ? (
<a
href={recommendation.spotify_url}
href={recommendation.bandcamp_url}
target="_blank"
rel="noopener noreferrer"
className="p-2 rounded-full bg-green-50 text-green-600 hover:bg-green-100 transition-colors"
title="Open in Spotify"
className="p-2 rounded-full bg-amber-50 text-amber-700 hover:bg-amber-100 transition-colors"
title="Listen on Bandcamp"
>
<ExternalLink className="w-4 h-4" />
</a>
) : (
<Link
to={`/listen?q=${encodeURIComponent(`${recommendation.artist} ${recommendation.title}`)}`}
className="p-2 rounded-full bg-purple-50 text-purple-400 hover:bg-purple-100 hover:text-purple transition-colors"
title="Find on Bandcamp"
>
<Headphones className="w-4 h-4" />
</Link>
)}
<Link
to={`/listen?q=${encodeURIComponent(`${recommendation.artist} ${recommendation.title}`)}`}
className="p-2 rounded-full bg-purple-50 text-purple-400 hover:bg-purple-100 hover:text-purple transition-colors"
title="Find on Bandcamp"
>
<Headphones className="w-4 h-4" />
</Link>
</div>
</div>
</div>

1
frontend/src/lib/api.ts
View File

@@ -96,6 +96,7 @@ export interface RecommendationItem {
album: string
image_url: string | null
spotify_url: string | null
bandcamp_url: string | null
reason: string
saved: boolean
created_at: string

12
frontend/src/pages/Playlists.tsx
View File

@@ -1,6 +1,6 @@
import { useState, useEffect } from 'react'
import { Link } from 'react-router-dom'
import { ListMusic, Plus, Loader2, Music, ChevronRight, Download, X, Youtube, Link2, ClipboardPaste } from 'lucide-react'
import { ListMusic, Plus, Loader2, Music, ChevronRight, Download, X, Play, Link2, ClipboardPaste } from 'lucide-react'
import { getPlaylists, getSpotifyPlaylists, importSpotifyPlaylist, importYouTubePlaylist, previewLastfm, importLastfm, importPastedSongs, type PlaylistResponse, type SpotifyPlaylistItem, type LastfmPreviewResponse } from '../lib/api'
export default function Playlists() {
@@ -8,7 +8,7 @@ export default function Playlists() {
const [spotifyPlaylists, setSpotifyPlaylists] = useState<SpotifyPlaylistItem[]>([])
const [showImport, setShowImport] = useState(false)
const [showYouTubeImport, setShowYouTubeImport] = useState(false)
const [youtubeUrl, setYoutubeUrl] = useState('')
const [youtubeUrl, setPlayUrl] = useState('')
const [importingYouTube, setImportingYouTube] = useState(false)
const [importing, setImporting] = useState<string | null>(null)
const [loadingSpotify, setLoadingSpotify] = useState(false)
@@ -60,7 +60,7 @@ export default function Playlists() {
try {
const imported = await importYouTubePlaylist(youtubeUrl.trim())
setPlaylists((prev) => [...prev, imported])
setYoutubeUrl('')
setPlayUrl('')
setShowYouTubeImport(false)
} catch (err: any) {
setError(err.response?.data?.detail || 'Failed to import YouTube Music playlist')
@@ -162,7 +162,7 @@ export default function Playlists() {
onClick={() => setShowYouTubeImport(true)}
className="flex items-center gap-2 px-5 py-2.5 bg-red-600 text-white font-medium rounded-xl hover:bg-red-700 transition-colors cursor-pointer border-none text-sm"
>
<Youtube className="w-4 h-4" />
<Play className="w-4 h-4" />
Import from YouTube Music
</button>
<button
@@ -210,7 +210,7 @@ export default function Playlists() {
onClick={() => setShowYouTubeImport(true)}
className="inline-flex items-center gap-2 px-6 py-3 bg-red-600 text-white font-medium rounded-xl hover:bg-red-700 transition-colors cursor-pointer border-none text-sm"
>
<Youtube className="w-4 h-4" />
<Play className="w-4 h-4" />
Import from YouTube Music
</button>
<button
@@ -291,7 +291,7 @@ export default function Playlists() {
<input
type="url"
value={youtubeUrl}
onChange={(e) => setYoutubeUrl(e.target.value)}
onChange={(e) => setPlayUrl(e.target.value)}
placeholder="https://music.youtube.com/playlist?list=..."
className="w-full pl-10 pr-4 py-3 bg-cream/50 border border-purple-100 rounded-xl text-charcoal placeholder:text-charcoal-muted/40 focus:outline-none focus:ring-2 focus:ring-purple/30 focus:border-purple transition-colors text-sm"
/>