Consolidate API - remove v1/v2 duplication, v2 is now main

This commit is contained in:
Your Name
2026-01-11 18:36:54 +01:00
parent 7b69ea7f94
commit 881f13cb48
2 changed files with 178 additions and 696 deletions

162
ui.ts
View File

@@ -14,45 +14,27 @@ export const html = `<!DOCTYPE html>
*{margin:0;padding:0;box-sizing:border-box}
:root{--accent:#10b981;--accent-dim:rgba(16,185,129,.15);--bg:#0a0a0a;--surface:#111;--surface2:#1a1a1a;--border:#222;--text:#fff;--muted:#888;--dim:#555}
body{font-family:'Inter',system-ui,sans-serif;min-height:100vh;color:var(--text);background:var(--bg)}
/* Subtle gradient background */
.bg{position:fixed;inset:0;z-index:-1;background:radial-gradient(ellipse 80% 50% at 50% -20%,rgba(16,185,129,.08),transparent)}
.container{max-width:900px;margin:0 auto;padding:60px 24px 180px}
/* Hero */
.hero{text-align:center;margin-bottom:80px}
.logo{width:160px;height:160px;margin-bottom:32px;filter:drop-shadow(0 20px 50px rgba(16,185,129,.4));animation:float 6s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.title{font-size:3rem;font-weight:700;margin-bottom:12px;letter-spacing:-1px}
.subtitle{color:var(--muted);font-size:1.1rem;font-weight:400}
/* Navigation */
.nav{display:flex;justify-content:center;gap:8px;margin-bottom:48px}
.nav-btn{padding:12px 28px;background:transparent;border:1px solid var(--border);color:var(--muted);font-size:.9rem;font-weight:500;cursor:pointer;border-radius:10px;transition:all .3s cubic-bezier(.4,0,.2,1);font-family:inherit;position:relative;overflow:hidden}
.nav-btn::before{content:'';position:absolute;inset:0;background:var(--accent);opacity:0;transition:opacity .3s}
.nav-btn{padding:12px 28px;background:transparent;border:1px solid var(--border);color:var(--muted);font-size:.9rem;font-weight:500;cursor:pointer;border-radius:10px;transition:all .3s;font-family:inherit}
.nav-btn:hover{color:var(--text);border-color:#444;transform:translateY(-2px)}
.nav-btn.active{color:var(--accent);border-color:var(--accent);background:var(--accent-dim);transform:translateY(-2px)}
/* Tabs with transitions */
.tab{display:none;opacity:0;transform:translateY(20px);transition:opacity .4s ease,transform .4s ease}
.tab{display:none;opacity:0;transform:translateY(20px);transition:opacity .4s,transform .4s}
.tab.active{display:block;opacity:1;transform:translateY(0)}
.tab.fade-out{opacity:0;transform:translateY(-20px)}
.tab.fade-in{display:block}
/* Section */
.section{margin-bottom:40px}
.section-title{font-size:.7rem;text-transform:uppercase;letter-spacing:1.5px;color:var(--accent);margin-bottom:16px;font-weight:600}
/* API Cards */
.api-list{display:flex;flex-direction:column;gap:8px}
.api-item{display:flex;align-items:center;gap:16px;padding:16px 20px;background:var(--surface);border:1px solid var(--border);border-radius:12px;transition:all .15s;cursor:pointer}
.api-item:hover{border-color:#333;transform:translateX(4px)}
.method{font-size:.65rem;font-weight:700;padding:5px 10px;border-radius:6px;background:var(--accent-dim);color:var(--accent);min-width:42px;text-align:center}
.path{font-family:'SF Mono',Monaco,monospace;font-size:.85rem;flex:1}
.desc{font-size:.75rem;color:var(--dim);max-width:280px;text-align:right}
/* Search */
.search-row{display:flex;gap:12px;margin-bottom:24px}
.input{flex:1;background:var(--surface);border:1px solid var(--border);padding:14px 18px;border-radius:10px;color:var(--text);font-size:.95rem;font-family:inherit}
.input:focus{outline:none;border-color:var(--accent)}
@@ -63,8 +45,6 @@ export const html = `<!DOCTYPE html>
.btn{background:var(--accent);color:#000;border:none;padding:14px 28px;border-radius:10px;font-size:.9rem;font-weight:600;font-family:inherit;cursor:pointer;transition:all .15s}
.btn:hover{opacity:.9}
.btn:disabled{opacity:.4}
/* Results */
.results{max-height:50vh;overflow-y:auto}
.result{display:flex;align-items:center;gap:14px;padding:12px;border-radius:10px;cursor:pointer;transition:all .15s}
.result:hover{background:var(--surface)}
@@ -76,14 +56,10 @@ export const html = `<!DOCTYPE html>
.dur{font-size:.75rem;color:var(--dim);font-family:monospace}
.empty{padding:48px;text-align:center;color:var(--dim)}
.loading{display:none;padding:48px;text-align:center;color:var(--accent)}
/* API Tester */
.tester-row{display:flex;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.url-preview{font-family:monospace;font-size:.8rem;color:var(--muted);padding:12px 16px;background:var(--surface);border-radius:8px;margin-bottom:16px;border:1px solid var(--border)}
.response{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:20px;margin-top:20px;max-height:400px;overflow:auto}
.response pre{font-family:'SF Mono',Monaco,monospace;font-size:.75rem;color:var(--accent);white-space:pre-wrap;word-break:break-all}
/* Player */
.player{position:fixed;bottom:0;left:0;right:0;background:rgba(10,10,10,.95);backdrop-filter:blur(20px);border-top:1px solid var(--border);padding:16px 24px;display:none;z-index:100}
.player.visible{display:block}
.player-inner{max-width:900px;margin:0 auto}
@@ -100,14 +76,7 @@ export const html = `<!DOCTYPE html>
.time{font-size:.7rem;color:var(--muted);min-width:40px;font-family:monospace}
.bar{flex:1;height:4px;background:var(--surface2);border-radius:2px;cursor:pointer}
.fill{height:100%;background:var(--accent);border-radius:2px;width:0%}
@media(max-width:600px){
.container{padding:40px 16px 180px}
.logo{width:80px;height:80px}
.title{font-size:2rem}
.desc{display:none}
.search-row{flex-direction:column}
}
@media(max-width:600px){.container{padding:40px 16px 180px}.logo{width:80px;height:80px}.title{font-size:2rem}.desc{display:none}.search-row{flex-direction:column}}
</style>
</head>
<body>
@@ -125,33 +94,24 @@ export const html = `<!DOCTYPE html>
<button class="nav-btn" onclick="showTab('tester')">Tester</button>
</div>
<!-- DOCS TAB -->
<div id="docs" class="tab active">
<div class="section">
<div class="section-title">Search</div>
<div class="api-list">
<div class="api-item"><span class="method">GET</span><span class="path">/api/search</span><span class="desc">Search songs, albums, artists</span></div>
<div class="api-item"><span class="method">GET</span><span class="path">/api/search/suggestions</span><span class="desc">Autocomplete suggestions</span></div>
<div class="api-item"><span class="method">GET</span><span class="path">/api/yt_search</span><span class="desc">YouTube video search</span></div>
</div>
</div>
<div class="section">
<div class="section-title">Content (v1)</div>
<div class="section-title">Content</div>
<div class="api-list">
<div class="api-item"><span class="method">GET</span><span class="path">/api/songs/:videoId</span><span class="desc">Song details</span></div>
<div class="api-item"><span class="method">GET</span><span class="path">/api/albums/:browseId</span><span class="desc">Album with tracks</span></div>
<div class="api-item"><span class="method">GET</span><span class="path">/api/artists/:browseId</span><span class="desc">Artist profile</span></div>
<div class="api-item"><span class="method">GET</span><span class="path">/api/songs/:videoId</span><span class="desc">Song + artist/album links</span></div>
<div class="api-item"><span class="method">GET</span><span class="path">/api/albums/:browseId</span><span class="desc">Album + tracks + artist</span></div>
<div class="api-item"><span class="method">GET</span><span class="path">/api/artists/:browseId</span><span class="desc">Artist + discography</span></div>
<div class="api-item"><span class="method">GET</span><span class="path">/api/playlists/:playlistId</span><span class="desc">Playlist tracks</span></div>
</div>
</div>
<div class="section">
<div class="section-title">Unified Content (v2) — Linked Entities</div>
<div class="api-list">
<div class="api-item"><span class="method">GET</span><span class="path">/api/v2/songs/:videoId</span><span class="desc">Song + artist/album links</span></div>
<div class="api-item"><span class="method">GET</span><span class="path">/api/v2/albums/:browseId</span><span class="desc">Album + artist + numbered tracks</span></div>
<div class="api-item"><span class="method">GET</span><span class="path">/api/v2/artists/:browseId</span><span class="desc">Artist + full discography</span></div>
<div class="api-item"><span class="method">GET</span><span class="path">/api/v2/chain/:videoId</span><span class="desc">Song → Artist → Discography</span></div>
<div class="api-item"><span class="method">GET</span><span class="path">/api/chain/:videoId</span><span class="desc">Song -> Artist -> Albums</span></div>
</div>
</div>
@@ -160,7 +120,10 @@ export const html = `<!DOCTYPE html>
<div class="api-list">
<div class="api-item"><span class="method">GET</span><span class="path">/api/related/:videoId</span><span class="desc">Related songs</span></div>
<div class="api-item"><span class="method">GET</span><span class="path">/api/radio?videoId=</span><span class="desc">Generate radio mix</span></div>
<div class="api-item"><span class="method">GET</span><span class="path">/api/similar?title=&artist=</span><span class="desc">Similar tracks</span></div>
<div class="api-item"><span class="method">GET</span><span class="path">/api/charts?country=</span><span class="desc">Music charts</span></div>
<div class="api-item"><span class="method">GET</span><span class="path">/api/trending?country=</span><span class="desc">Trending music</span></div>
<div class="api-item"><span class="method">GET</span><span class="path">/api/moods</span><span class="desc">Mood categories</span></div>
</div>
</div>
@@ -168,12 +131,22 @@ export const html = `<!DOCTYPE html>
<div class="section-title">Streaming & Lyrics</div>
<div class="api-list">
<div class="api-item"><span class="method">GET</span><span class="path">/api/stream?id=</span><span class="desc">Audio stream URLs</span></div>
<div class="api-item"><span class="method">GET</span><span class="path">/api/proxy?url=</span><span class="desc">Audio proxy (CORS)</span></div>
<div class="api-item"><span class="method">GET</span><span class="path">/api/lyrics?title=&artist=</span><span class="desc">Synced lyrics (LRC)</span></div>
</div>
</div>
<div class="section">
<div class="section-title">Info</div>
<div class="api-list">
<div class="api-item"><span class="method">GET</span><span class="path">/api/artist/info?artist=</span><span class="desc">Artist bio (Last.fm)</span></div>
<div class="api-item"><span class="method">GET</span><span class="path">/api/track/info?title=&artist=</span><span class="desc">Track info (Last.fm)</span></div>
<div class="api-item"><span class="method">GET</span><span class="path">/api/top/artists?country=</span><span class="desc">Top artists</span></div>
<div class="api-item"><span class="method">GET</span><span class="path">/api/top/tracks?country=</span><span class="desc">Top tracks</span></div>
</div>
</div>
</div>
<!-- PLAYER TAB -->
<div id="player-tab" class="tab">
<div class="search-row">
<select class="select" id="filter">
@@ -189,7 +162,6 @@ export const html = `<!DOCTYPE html>
<div class="results" id="results"></div>
</div>
<!-- TESTER TAB -->
<div id="tester" class="tab">
<div class="tester-row">
<select class="select" id="endpoint" onchange="updateInputs()" style="min-width:200px">
@@ -198,10 +170,7 @@ export const html = `<!DOCTYPE html>
<option value="song">Song Details</option>
<option value="album">Album</option>
<option value="artist">Artist</option>
<option value="v2song">v2 Song (linked)</option>
<option value="v2album">v2 Album (linked)</option>
<option value="v2artist">v2 Artist (linked)</option>
<option value="v2chain">v2 Chain (full)</option>
<option value="chain">Full Chain</option>
<option value="related">Related</option>
<option value="radio">Radio</option>
<option value="lyrics">Lyrics</option>
@@ -215,7 +184,6 @@ export const html = `<!DOCTYPE html>
</div>
</div>
<!-- PLAYER BAR -->
<div class="player" id="playerBar">
<div class="player-inner">
<div class="player-row">
@@ -241,38 +209,16 @@ export const html = `<!DOCTYPE html>
<div id="ytplayer"></div>
</body>
<script>
// Suppress YouTube errors
(function(){var e=console.error;console.error=function(){var m=arguments[0]||'';if(typeof m==='string'&&(m.includes('postMessage')||m.includes('youtube')))return;e.apply(console,arguments)}})();
// Load YouTube API
var tag=document.createElement('script');tag.src='https://www.youtube.com/iframe_api';document.head.appendChild(tag);
var songs=[],yt=null,ready=false,playing=false,idx=-1,interval=null;
document.getElementById('query').onkeypress=e=>{if(e.key==='Enter')search()};
function showTab(t){
var current=document.querySelector('.tab.active');
var next=document.getElementById(t==='player'?'player-tab':t);
if(current===next)return;
document.querySelectorAll('.tab').forEach(el=>el.classList.remove('active'));
document.querySelectorAll('.nav-btn').forEach(b=>b.classList.remove('active'));
document.getElementById(t==='player'?'player-tab':t).classList.add('active');
document.querySelector('.nav-btn[onclick*="'+t+'"]').classList.add('active');
// Fade out current
if(current){
current.classList.add('fade-out');
setTimeout(()=>{
current.classList.remove('active','fade-out');
// Fade in next
next.classList.add('fade-in');
requestAnimationFrame(()=>{
next.classList.add('active');
next.classList.remove('fade-in');
});
},200);
}else{
next.classList.add('active');
}
}
function onYouTubeIframeAPIReady(){
@@ -280,29 +226,17 @@ function onYouTubeIframeAPIReady(){
}
function onErr(e){
if(e.data===150||e.data===101||e.data===100){
// Try fallbackVideoId first, then search YouTube
var s=songs[idx];
if(s&&s.fallbackVideoId&&!s.triedFallback){
console.log('Using fallback:',s.fallbackVideoId);
s.triedFallback=true;
yt.loadVideoById(s.fallbackVideoId);
s.triedFallback=true;yt.loadVideoById(s.fallbackVideoId);
}else if(s&&!s.triedSearch){
// Search YouTube for playable version
s.triedSearch=true;
searchYouTube(s.title,s.artists?.[0]?.name||'').then(vid=>{
if(vid){console.log('Found alternative:',vid);yt.loadVideoById(vid)}
});
searchYouTube(s.title,s.artists?.[0]?.name||'').then(vid=>{if(vid)yt.loadVideoById(vid)});
}
}
}
async function searchYouTube(title,artist){
try{
var q=title+' '+artist+' official';
var res=await fetch('/api/yt_search?q='+encodeURIComponent(q)+'&filter=videos');
var data=await res.json();
var alt=data.results?.find(v=>v.channel?.name&&!v.channel.name.includes('Topic')&&v.id);
return alt?.id||null;
}catch(e){return null}
try{var res=await fetch('/api/yt_search?q='+encodeURIComponent(title+' '+artist+' official')+'&filter=videos');var data=await res.json();var alt=data.results?.find(v=>v.channel?.name&&!v.channel.name.includes('Topic')&&v.id);return alt?.id||null}catch(e){return null}
}
function onState(e){
if(e.data===1){playing=true;document.getElementById('playBtn').textContent='⏸';startProgress()}
@@ -311,29 +245,16 @@ function onState(e){
}
function startProgress(){stopProgress();interval=setInterval(updateProgress,500)}
function stopProgress(){if(interval){clearInterval(interval);interval=null}}
function updateProgress(){
if(!yt||!ready)return;
var c=yt.getCurrentTime()||0,t=yt.getDuration()||0;
document.getElementById('cur').textContent=fmt(c);
document.getElementById('total').textContent=fmt(t);
document.getElementById('fill').style.width=t>0?(c/t*100)+'%':'0%';
}
function updateProgress(){if(!yt||!ready)return;var c=yt.getCurrentTime()||0,t=yt.getDuration()||0;document.getElementById('cur').textContent=fmt(c);document.getElementById('total').textContent=fmt(t);document.getElementById('fill').style.width=t>0?(c/t*100)+'%':'0%'}
function fmt(s){var m=Math.floor(s/60),sec=Math.floor(s%60);return m+':'+(sec<10?'0':'')+sec}
function seek(e){if(!yt||!ready)return;var bar=document.getElementById('bar'),rect=bar.getBoundingClientRect(),pct=(e.clientX-rect.left)/rect.width;yt.seekTo(pct*(yt.getDuration()||0),true)}
async function search(){
var q=document.getElementById('query').value.trim();if(!q)return;
var f=document.getElementById('filter').value;
document.getElementById('searchBtn').disabled=true;
document.getElementById('loading').style.display='block';
document.getElementById('results').innerHTML='';
try{
var url='/api/search?q='+encodeURIComponent(q);if(f)url+='&filter='+f;
var res=await fetch(url);var data=await res.json();
songs=data.results||[];render(f);
}catch(e){songs=[];render(f)}
document.getElementById('searchBtn').disabled=false;
document.getElementById('loading').style.display='none';
document.getElementById('searchBtn').disabled=true;document.getElementById('loading').style.display='block';document.getElementById('results').innerHTML='';
try{var url='/api/search?q='+encodeURIComponent(q);if(f)url+='&filter='+f;var res=await fetch(url);var data=await res.json();songs=data.results||[];render(f)}catch(e){songs=[];render(f)}
document.getElementById('searchBtn').disabled=false;document.getElementById('loading').style.display='none';
}
function render(f){
@@ -348,8 +269,7 @@ function render(f){
}
function play(i){
if(!songs[i]||!ready)return;
idx=i;var s=songs[i];
if(!songs[i]||!ready)return;idx=i;var s=songs[i];
document.getElementById('pTitle').textContent=s.title||'Unknown';
document.getElementById('pArtist').textContent=s.artists?.map(a=>a.name).join(', ')||'';
document.getElementById('pThumb').src=s.thumbnails?.[0]?.url||'https://img.youtube.com/vi/'+s.videoId+'/mqdefault.jpg';
@@ -361,21 +281,16 @@ function toggle(){if(!ready)return;playing?yt.pauseVideo():yt.playVideo()}
function prev(){if(idx>0)play(idx-1)}
function next(){if(idx<songs.length-1)play(idx+1)}
function esc(t){var d=document.createElement('div');d.textContent=t;return d.innerHTML}
function viewArtist(id){showTab('tester');document.getElementById('endpoint').value='artist';updateInputs();document.getElementById('api_browseId').value=id;updateUrl();testApi()}
function viewAlbum(id){showTab('tester');document.getElementById('endpoint').value='album';updateInputs();document.getElementById('api_browseId').value=id;updateUrl();testApi()}
function viewArtist(id){showTab('tester');document.getElementById('endpoint').value='v2artist';updateInputs();document.getElementById('api_browseId').value=id;updateUrl();testApi()}
function viewAlbum(id){showTab('tester');document.getElementById('endpoint').value='v2album';updateInputs();document.getElementById('api_browseId').value=id;updateUrl();testApi()}
// API Tester
var cfg={
search:{inputs:[{n:'q',p:'Query',v:'coldplay'}],url:'/api/search'},
stream:{inputs:[{n:'id',p:'Video ID',v:'dQw4w9WgXcQ'}],url:'/api/stream'},
song:{inputs:[{n:'videoId',p:'Video ID',v:'dQw4w9WgXcQ'}],url:'/api/songs/{videoId}'},
album:{inputs:[{n:'browseId',p:'Album ID',v:'MPREb_PvMNqFUp1oW'}],url:'/api/albums/{browseId}'},
artist:{inputs:[{n:'browseId',p:'Artist ID',v:'UCIaFw5VBEK8qaW6nRpx_qnw'}],url:'/api/artists/{browseId}'},
v2song:{inputs:[{n:'videoId',p:'Video ID',v:'9qnqYL0eNNI'}],url:'/api/v2/songs/{videoId}'},
v2album:{inputs:[{n:'browseId',p:'Album ID',v:'MPREb_PvMNqFUp1oW'}],url:'/api/v2/albums/{browseId}'},
v2artist:{inputs:[{n:'browseId',p:'Artist ID',v:'UCIaFw5VBEK8qaW6nRpx_qnw'}],url:'/api/v2/artists/{browseId}'},
v2chain:{inputs:[{n:'videoId',p:'Video ID',v:'9qnqYL0eNNI'}],url:'/api/v2/chain/{videoId}'},
chain:{inputs:[{n:'videoId',p:'Video ID',v:'9qnqYL0eNNI'}],url:'/api/chain/{videoId}'},
related:{inputs:[{n:'id',p:'Video ID',v:'dQw4w9WgXcQ'}],url:'/api/related/{id}'},
radio:{inputs:[{n:'videoId',p:'Video ID',v:'9qnqYL0eNNI'}],url:'/api/radio'},
lyrics:{inputs:[{n:'title',p:'Title',v:'Yellow'},{n:'artist',p:'Artist',v:'Coldplay'}],url:'/api/lyrics'},
@@ -390,8 +305,7 @@ function updateInputs(){
function updateUrl(){
var ep=document.getElementById('endpoint').value,c=cfg[ep],url=c.url,params=new URLSearchParams();
c.inputs.forEach(i=>{var v=document.getElementById('api_'+i.n)?.value||i.v;if(v){if(url.includes('{'+i.n+'}'))url=url.replace('{'+i.n+'}',encodeURIComponent(v));else params.append(i.n,v)}});
var qs=params.toString();if(qs)url+='?'+qs;
document.getElementById('urlPreview').textContent='GET '+url;
var qs=params.toString();if(qs)url+='?'+qs;document.getElementById('urlPreview').textContent='GET '+url;
}
async function testApi(){
var ep=document.getElementById('endpoint').value,c=cfg[ep],url=c.url,params=new URLSearchParams();