Add Bandcamp search and Listening Room page

Implement Bandcamp search service with autocomplete API and HTML
scraping fallback. Add /api/bandcamp/search and /api/bandcamp/embed
endpoints. Create Listening Room page with search, embedded player,
and queue management. Add navigation entry and Bandcamp link on
recommendation cards.
This commit is contained in:
root
2026-03-30 23:38:14 -05:00
parent 3303cd1507
commit dd4df6a070
8 changed files with 673 additions and 3 deletions

View File

@@ -1,12 +1,13 @@
import { useState } from 'react'
import { Link, useLocation, useNavigate } from 'react-router-dom'
import { Disc3, LayoutDashboard, ListMusic, Compass, Heart, Crown, Menu, X, LogOut, User } from 'lucide-react'
import { Disc3, LayoutDashboard, ListMusic, Compass, Heart, Crown, Headphones, Menu, X, LogOut, User } from 'lucide-react'
import { useAuth } from '../lib/auth'
const navItems = [
{ path: '/dashboard', label: 'Dashboard', icon: LayoutDashboard },
{ path: '/playlists', label: 'Playlists', icon: ListMusic },
{ path: '/discover', label: 'Discover', icon: Compass },
{ path: '/listen', label: 'Listen', icon: Headphones },
{ path: '/saved', label: 'Saved', icon: Heart },
{ path: '/billing', label: 'Pro', icon: Crown },
]

View File

@@ -1,4 +1,5 @@
import { Heart, ExternalLink, Music } from 'lucide-react'
import { Heart, ExternalLink, Music, Headphones } from 'lucide-react'
import { Link } from 'react-router-dom'
import type { RecommendationItem } from '../lib/api'
interface Props {
@@ -71,6 +72,14 @@ export default function RecommendationCard({ recommendation, onToggleSave, savin
<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>
</div>
</div>
</div>