// playlist.jsx — DJ Antønic Intelligence Hub const { useState, useEffect, useMemo, useCallback, useRef } = React; const Eng = window.DJEngine; // ── Helpers ─────────────────────────────────────────────────────────────────── function uid() { return Math.random().toString(36).slice(2) + Date.now().toString(36); } function subGenre(g) { return g?.includes('---') ? g.split('---')[1] : g; } function fmtDate(ts) { return new Date(ts).toLocaleDateString('es-ES', { day:'2-digit', month:'short', year:'numeric' }); } function camelotCompatible(key) { if (!key) return []; const m = key.match(/^(\d+)([AB])$/); if (!m) return [key]; const n = parseInt(m[1]), L = m[2]; return [key, `${n===1?12:n-1}${L}`, `${n===12?1:n+1}${L}`, `${n}${L==='A'?'B':'A'}`]; } const ROLE_LABELS = { opener:'Opener', builder:'Builder', peak:'Peak', bridge:'Puente', closer:'Closer' }; const ROLE_COLORS = { opener:'#5cc7ff', builder:'#96f582', peak:'#eb4baf', bridge:'#a86eff', closer:'#f5a623' }; function roleColor(r) { return ROLE_COLORS[r] || 'var(--text-3)'; } function scoreColor(n) { if (n >= 80) return '#96f582'; if (n >= 60) return '#5cc7ff'; if (n >= 40) return '#f5a623'; return 'var(--text-3)'; } // ── Smart playlist logic ────────────────────────────────────────────────────── function matchCondition(track, cond) { const { field, op, value } = cond; if (field === 'bpm') { if (!track.bpm) return false; if (op === 'between') return track.bpm >= value[0] && track.bpm <= value[1]; if (op === 'gte') return track.bpm >= value; if (op === 'lte') return track.bpm <= value; if (op === 'eq') return track.bpm === value; } if (field === 'camelot') { if (!track.camelot) return false; if (op === 'compatible') return camelotCompatible(value).includes(track.camelot); if (op === 'is') return track.camelot === value; } if (field === 'genre') { if (!track.genres?.length) return false; const lv = (value||'').toLowerCase(); if (!lv) return true; return track.genres.some(g => subGenre(g).toLowerCase().includes(lv) || g.toLowerCase().includes(lv)); } if (field === 'danceability') { if (track.danceability == null) return false; const pct = track.danceability * 100; if (op === 'between') return pct >= value[0] && pct <= value[1]; if (op === 'gte') return pct >= value; if (op === 'lte') return pct <= value; } if (field === 'vocal') { if (track.instrumental == null) return false; return value === 'instrumental' ? track.instrumental >= 0.5 : track.instrumental < 0.5; } if (field.startsWith('mood_')) { const mk = field.replace('mood_', ''); const mv = track.moods?.[mk]; if (mv == null) return false; const pct = mv * 100; if (op === 'between') return pct >= value[0] && pct <= value[1]; if (op === 'gte') return pct >= value; if (op === 'lte') return pct <= value; } return false; } function matchPlaylist(track, pl) { if (!pl.conditions?.length) return true; if (pl.operator === 'AND') return pl.conditions.every(c => matchCondition(track, c)); return pl.conditions.some(c => matchCondition(track, c)); } // ── Exports ─────────────────────────────────────────────────────────────────── function exportM3U(tracks, name) { let txt = '#EXTM3U\n'; txt += '# Generado por DJ Antønic · Pon los archivos en la misma carpeta que este .m3u\n'; for (const t of tracks) { const dur = t.sections?.duration ?? -1; const info = [t.bpm && `${t.bpm} BPM`, t.camelot].filter(Boolean).join(' · '); txt += `#EXTINF:${dur},${t.name}${info ? ' — ' + info : ''}\n`; txt += (t.filename || `${t.name}.${t.format || 'mp3'}`) + '\n'; } const a = Object.assign(document.createElement('a'), { href: URL.createObjectURL(new Blob([txt], { type:'audio/mpegurl' })), download: (name||'playlist').replace(/[^\w\s-]/g,'').trim()+'.m3u', }); document.body.appendChild(a); a.click(); setTimeout(() => { document.body.removeChild(a); URL.revokeObjectURL(a.href); }, 300); } function doExportCSV(tracks) { if (!Eng) return; const csv = Eng.exportCSV(tracks); const a = Object.assign(document.createElement('a'), { href: URL.createObjectURL(new Blob([csv], { type:'text/csv;charset=utf-8' })), download: 'antonic-biblioteca.csv', }); document.body.appendChild(a); a.click(); setTimeout(() => { document.body.removeChild(a); URL.revokeObjectURL(a.href); }, 300); } function doExportJSON(tracks) { const a = Object.assign(document.createElement('a'), { href: URL.createObjectURL(new Blob([JSON.stringify(tracks, null, 2)], { type:'application/json' })), download: 'antonic-biblioteca.json', }); document.body.appendChild(a); a.click(); setTimeout(() => { document.body.removeChild(a); URL.revokeObjectURL(a.href); }, 300); } // ── TrackPills ──────────────────────────────────────────────────────────────── function TrackPills({ track }) { return (
{track.bpm && {track.bpm} BPM} {track.camelot && {track.camelot}} {track.genres?.slice(0,2).map((g,i) => {subGenre(g)})} {track.danceability != null && 💃 {Math.round(track.danceability*100)}%} {track.instrumental != null && ( {track.instrumental>0.5?'Instrumental':'Vocal'} )}
); } // ── Track DNA modal ─────────────────────────────────────────────────────────── function TrackDNA({ track, allTracks, onClose }) { const [mode, setMode] = useState('safe'); const [bridgeTarget, setBridgeTarget] = useState(null); const score = Eng ? Eng.getAntonicScore(track) : null; const roles = Eng ? Eng.getDjRoles(track) : null; const nextBest = Eng ? Eng.getNextBestTracks(track, allTracks, mode) : []; const bridges = Eng && bridgeTarget ? Eng.findBridgeTracks(track, bridgeTarget, allTracks) : null; const risk = bridgeTarget && Eng ? Eng.analyzeTransitionRisk(track, bridgeTarget) : null; const MODES = [ { id:'safe', label:'Seguro' }, { id:'energy_up', label:'Subir ↑' }, { id:'energy_down', label:'Bajar ↓' }, { id:'bridge', label:'Puente' }, ]; return (
{ if (e.target === e.currentTarget) onClose(); }}>
Track DNA

{track.name}

{score != null && (
{score}
Antønic Score
)}
{roles && (
Rol principal: {ROLE_LABELS[roles.primaryRole] || roles.primaryRole}
)}
{roles && (
Scores de rol
{Object.entries(roles.scores).map(([role, val]) => (
{ROLE_LABELS[role]}
{val}
))}
)} {track.sections && (
Análisis de secciones{track.sections.duration ? ` · ${track.sections.duration}s` : ''}
{[ { label:'Intro', energy:track.sections.introEnergy, clean:track.sections.introCleanliness }, { label:'Core', energy:track.sections.coreEnergy }, { label:'Outro', energy:track.sections.outroEnergy, clean:track.sections.outroCleanliness }, ].map(({ label, energy, clean }) => (
{label}
{Math.round(energy * 100)}% {clean && MIX}
))}
)} {allTracks.length > 1 && (
Siguiente mejor pista
{MODES.map(m => ( ))}
{nextBest.length === 0 ? (
Analiza más canciones para ver compatibilidades.
) : ( nextBest.slice(0,5).map(({ track:t, matchScore, finalScore, reason, risk:rsk }) => (
{finalScore}
{t.name}
{reason} · Riesgo: {rsk}
{t.bpm && {t.bpm}} {t.camelot && {t.camelot}}
)) )}
)} {bridgeTarget && bridges && (
Puentes: {track.name} → {bridgeTarget.name} {risk && 60?'#eb4baf':risk.riskScore>30?'#f5a623':'#96f582' }}>(riesgo directo: {risk.riskScore})}
{bridges.length === 0 ? (
Sin puentes disponibles con los datos actuales.
) : ( bridges.map(({ track:t, score:s, explanation }) => (
{s}
{t.name}
{explanation}
)) )}
)}
); } // ── Playlist editor ─────────────────────────────────────────────────────────── const FIELDS = [ { id:'bpm', label:'BPM', type:'numeric' }, { id:'camelot', label:'Camelot', type:'camelot' }, { id:'genre', label:'Género', type:'text' }, { id:'danceability', label:'Bailabilidad', type:'pct' }, { id:'vocal', label:'Vocal / Inst', type:'select', options:[{v:'vocal',l:'Vocal'},{v:'instrumental',l:'Instrumental'}] }, { id:'mood_party', label:'Mood · Party', type:'pct' }, { id:'mood_happy', label:'Mood · Happy', type:'pct' }, { id:'mood_aggressive', label:'Mood · Agresivo', type:'pct' }, { id:'mood_relaxed', label:'Mood · Relajado', type:'pct' }, ]; const OPS = { numeric:[{id:'between',l:'entre'},{id:'gte',l:'≥'},{id:'lte',l:'≤'},{id:'eq',l:'='}], camelot:[{id:'compatible',l:'compatible con'},{id:'is',l:'exactamente'}], text: [{id:'contains',l:'contiene'}], pct: [{id:'between',l:'entre'},{id:'gte',l:'≥'},{id:'lte',l:'≤'}], select: [{id:'is',l:'es'}], }; const CAMELOT_KEYS = ['1A','2A','3A','4A','5A','6A','7A','8A','9A','10A','11A','12A','1B','2B','3B','4B','5B','6B','7B','8B','9B','10B','11B','12B']; const CAMELOT_LABELS = {'1A':'Am','2A':'Em','3A':'Bm','4A':'F#m','5A':'C#m','6A':'G#m','7A':'Ebm','8A':'Bbm','9A':'Fm','10A':'Cm','11A':'Gm','12A':'Dm','1B':'C','2B':'G','3B':'D','4B':'A','5B':'E','6B':'B','7B':'F#','8B':'Db','9B':'Ab','10B':'Eb','11B':'Bb','12B':'F'}; function defaultVal(fieldId, op) { if (op==='between') return fieldId==='bpm' ? [120,140] : [60,90]; if (op==='compatible') return '8A'; if (op==='is') return FIELDS.find(f=>f.id===fieldId)?.options?.[0]?.v ?? '8A'; if (op==='contains') return ''; return fieldId==='bpm' ? 120 : 70; } function makeCondition(fieldId='bpm') { const fd = FIELDS.find(f=>f.id===fieldId) || FIELDS[0]; const op = OPS[fd.type]?.[0]?.id || 'gte'; return { id:uid(), field:fieldId, op, value:defaultVal(fieldId,op) }; } function changeConditionOp(cond, newOp) { return { ...cond, op:newOp, value:defaultVal(cond.field,newOp) }; } function ConditionRow({ cond, onChange, onRemove }) { const fd = FIELDS.find(f=>f.id===cond.field) || FIELDS[0]; const ops = OPS[fd.type] || []; const setField = (fid) => onChange(makeCondition(fid)); const setOp = (op) => onChange(changeConditionOp(cond,op)); const setVal = (v) => onChange({...cond,value:v}); function ValueInput() { if (fd.type==='select') return ( ); if (fd.type==='camelot') return ( ); if (cond.op==='between') { const val = Array.isArray(cond.value)?cond.value:[0,100]; const unit = fd.type==='pct'?'%':''; return ( setVal([e.target.value===''?'':+e.target.value,val[1]])} /> – setVal([val[0],e.target.value===''?'':+e.target.value])} /> {unit&&{unit}} ); } if (fd.type==='text') return ( setVal(e.target.value)} /> ); const unit = fd.type==='pct'?'%':''; return ( setVal(e.target.value===''?'':+e.target.value)} /> {unit&&{unit}} ); } return (
); } function PlaylistEditor({ playlist, tracks, onSave, onBack }) { const [name, setName] = useState(playlist?.name || ''); const [operator, setOperator] = useState(playlist?.operator || 'AND'); const [conditions, setConditions] = useState(playlist?.conditions?.length ? playlist.conditions : [makeCondition('bpm')]); const addCond = () => setConditions(prev=>[...prev,makeCondition('bpm')]); const removeCond = (id) => setConditions(prev=>prev.filter(c=>c.id!==id)); const updateCond = (id,nc) => setConditions(prev=>prev.map(c=>c.id===id?nc:c)); const matching = useMemo(() => tracks.filter(t=>matchPlaylist(t,{operator,conditions})), [tracks,operator,conditions]); const save = () => { if (!name.trim()) return; const pl = { id:playlist?.id||uid(), name:name.trim(), operator, conditions, createdAt:playlist?.createdAt||Date.now(), updatedAt:Date.now() }; window.LibraryStore.savePlaylist(pl); onSave(pl); }; return (
setName(e.target.value)} />
Incluir pistas donde condición se cumpla:
{conditions.map(c=>( updateCond(c.id,nc)} onRemove={()=>removeCond(c.id)} /> ))}
{matching.length} pista{matching.length!==1?'s':''} coinciden {matching.length > 0 && ( )}
{matching.length > 0 ? ( <>
{matching.slice(0,10).map(t=>(
{t.name}
))}
{matching.length > 10 &&
… y {matching.length-10} pistas más
} ) : (
{tracks.length===0 ? 'La biblioteca está vacía. Importa canciones primero.' : 'Ninguna pista cumple estas condiciones todavía.'}
)}
); } function PlaylistCard({ pl, tracks, onEdit, onDelete }) { const matching = useMemo(() => tracks.filter(t=>matchPlaylist(t,pl)), [tracks,pl]); return (
onEdit(pl)}>
{pl.name}
{pl.conditions.slice(0,3).map(c=>{ const fd = FIELDS.find(f=>f.id===c.field); const op = OPS[fd?.type||'numeric']?.find(o=>o.id===c.op); const val = Array.isArray(c.value)?`${c.value[0]}–${c.value[1]}`:String(c.value); return {fd?.label} {op?.l} {val}{fd?.type==='pct'?'%':''}; })} {pl.conditions.length > 3 && +{pl.conditions.length-3} más}
{matching.length} pista{matching.length!==1?'s':''} · {pl.conditions.length} regla{pl.conditions.length!==1?'s':''} · {pl.operator}
e.stopPropagation()}> {matching.length > 0 && ( )}
); } // ── Analysis Queue ──────────────────────────────────────────────────────────── const ANALYSIS_SLOTS = 2; class AnalysisQueue { constructor(onUpdate) { this._onUpdate = onUpdate; this._pending = []; this._slots = []; this._busy = []; this._onnx = null; this._init(); } _init() { for (let i = 0; i < ANALYSIS_SLOTS; i++) { const w = new Worker('workers/conversion-worker.js', { type:'module' }); w.onmessage = (e) => this._onMsg(i, e.data); w.onerror = () => { this._busy[i] = false; this._drain(); }; this._slots.push(w); this._busy.push(false); } this._onnx = new Worker('workers/onnx-worker.js', { type:'module' }); this._onnx.onmessage = (e) => this._onOnnx(e.data); this._onnx.postMessage({ type:'preload' }); } enqueue(localId, file) { this._pending.push({ localId, file }); this._onUpdate(localId, { status:'queued', position:this._pending.length }); this._drain(); } _drain() { for (let i = 0; i < this._slots.length; i++) { if (this._busy[i] || !this._pending.length) continue; const job = this._pending.shift(); this._dispatch(i, job); this._pending.forEach((j, idx) => this._onUpdate(j.localId, { position:idx+1 })); } } async _dispatch(slotIdx, { localId, file }) { this._busy[slotIdx] = true; this._onUpdate(localId, { status:'analyzing', progress:0 }); const buf = await file.arrayBuffer(); this._slots[slotIdx].postMessage( { type:'analyze_only', jobId:localId, fileBuffer:buf, fileName:file.name }, [buf] ); } _onMsg(slotIdx, msg) { const { type, jobId } = msg; if (type === 'progress') { this._onUpdate(jobId, { progress:msg.progress }); return; } if (type === 'analyzed_only') { this._onUpdate(jobId, { status:'done', progress:100, bpm:msg.bpm??null, key:msg.key??null, camelot:msg.camelot??null, sections:msg.sections??null }); if (msg.patches && msg.patchCount > 0) { this._onnx.postMessage({ type:'analyze', jobId, patches:msg.patches, patchCount:msg.patchCount }, [msg.patches.buffer]); } else { this._onUpdate(jobId, { onnxDone:true }); } } if (type === 'error') this._onUpdate(jobId, { status:'error', error:msg.error }); if (type === 'idle') { this._busy[slotIdx] = false; this._drain(); } } _onOnnx(msg) { if (msg.type !== 'analyzed') return; const patch = { onnxDone:true }; if (!msg.error) { patch.genres = msg.genres ?? null; patch.danceability = msg.danceability ?? null; patch.instrumental = msg.instrumental ?? null; patch.embedding = msg.embedding ?? null; patch.moods = { party:msg.party, aggressive:msg.aggressive, happy:msg.happy, relaxed:msg.relaxed }; } this._onUpdate(msg.jobId, patch); } destroy() { this._slots.forEach(w => w.terminate()); this._onnx?.terminate(); } } // ── File helpers ────────────────────────────────────────────────────────────── const IMPORT_SUPPORTED = ['mp3','alac','aac','m4a','mp4','wav','aiff','aif','flac','ape','tta','wv','ogg','opus','wma','dsf','dff','caf']; const IMPORT_MAX_MB = 500; function getExt(name) { const m=(name||'').toLowerCase().match(/\.([a-z0-9]+)$/); return m?m[1]:''; } function fmtMB(b) { return (b/1024/1024).toFixed(1)+' MB'; } function importUid() { return Math.random().toString(36).slice(2)+Math.random().toString(36).slice(2); } // ── Drop Hero (empty-library entry point) ───────────────────────────────────── function DropHero({ onFiles }) { const [hot, setHot] = useState(false); const inputRef = useRef(null); return (
{e.preventDefault();setHot(true);}} onDragEnter={e=>{e.preventDefault();setHot(true);}} onDragLeave={()=>setHot(false)} onDrop={e=>{e.preventDefault();setHot(false);if(e.dataTransfer.files.length)onFiles(e.dataTransfer.files);}} >

Añade tu música

BPM · Camelot · Género · Bailabilidad — todo se analiza aquí, sin subir nada

{if(e.target.files?.length)onFiles(e.target.files);e.target.value='';}} />
{['mp3','wav','aiff','flac','alac','aac','ogg','opus','wma','dsf','ape'].map(f=>( .{f} ))}
); } // ── Add Panel (analysis progress) ───────────────────────────────────────────── function AddPanel({ initialFiles, onClose, hasLibrary }) { const [items, setItems] = useState([]); const [phase, setPhase] = useState('idle'); const [hot, setHot] = useState(false); const inputRef = useRef(null); const queueRef = useRef(null); const itemsRef = useRef([]); const savedRef = useRef(new Set()); const pendingFilesRef = useRef(new Map()); useEffect(() => { itemsRef.current = items; }, [items]); const patchItem = useCallback((id, patch) => { setItems(prev => prev.map(i => i.id === id ? { ...i, ...patch } : i)); }, []); const makeItem = (f) => { const ext = getExt(f.name); const ok = IMPORT_SUPPORTED.includes(ext); const big = f.size > IMPORT_MAX_MB * 1024 * 1024; return { id: importUid(), fileName: f.name, status: !ok ? 'error' : big ? 'error' : 'pending', error: !ok ? 'Formato no soportado' : big ? `Demasiado grande (${fmtMB(f.size)})` : null, progress:0, position:0, bpm:null, key:null, camelot:null, genres:null, danceability:null, instrumental:null, moods:null, sections:null, embedding:null, onnxDone:false, }; }; const addFiles = useCallback((fileList) => { const files = Array.from(fileList).slice(0, 200 - itemsRef.current.length); const newItems = files.map(f => { const item = makeItem(f); if (item.status === 'pending') pendingFilesRef.current.set(item.id, f); return item; }); if (!newItems.length) return; setItems(prev => [...prev, ...newItems]); setPhase(p => p === 'idle' ? 'selected' : p); }, []); useEffect(() => { if (initialFiles?.length) addFiles(initialFiles); }, []); // Auto-save when ONNX complete useEffect(() => { for (const item of items) { if (item.status !== 'done' || !item.onnxDone || savedRef.current.has(item.id)) continue; savedRef.current.add(item.id); window.LibraryStore.addTrack({ id: item.id, name: item.fileName.replace(/\.[^.]+$/, ''), filename: item.fileName, format: getExt(item.fileName), addedAt: Date.now(), bpm: item.bpm ?? null, key: item.key ?? null, camelot: item.camelot ?? null, genres: item.genres ?? null, danceability: item.danceability ?? null, instrumental: item.instrumental ?? null, moods: item.moods ?? null, sections: item.sections ?? null, embedding: item.embedding ?? null, }); } const allDone = items.length > 0 && items.every(i => i.status === 'done' || i.status === 'error'); if (allDone && phase === 'analyzing') setPhase('done'); }, [items, phase]); useEffect(() => () => queueRef.current?.destroy(), []); const startAnalysis = () => { const toAnalyze = itemsRef.current.filter(i => i.status === 'pending'); if (!toAnalyze.length) return; setPhase('analyzing'); if (!queueRef.current) queueRef.current = new AnalysisQueue(patchItem); toAnalyze.forEach(item => { const file = pendingFilesRef.current.get(item.id); if (file) queueRef.current.enqueue(item.id, file); }); }; const reset = () => { queueRef.current?.destroy(); queueRef.current = null; setItems([]); setPhase('idle'); savedRef.current = new Set(); pendingFilesRef.current = new Map(); }; const pending = items.filter(i => i.status === 'pending'); const done = items.filter(i => i.status === 'done'); const errors = items.filter(i => i.status === 'error'); const running = phase === 'analyzing'; const StatusIcon = ({ item }) => { if (item.status === 'done' && item.onnxDone) return ✓; if (item.status === 'done') return …; if (item.status === 'error') return ✗; if (item.status === 'analyzing') return {item.progress}%; if (item.status === 'queued') return #{item.position}; return ; }; return (
{/* Header row */}
Añadir canciones {items.length > 0 && ( {items.length} archivo{items.length!==1?'s':''} {running && ` · analizando ${done.length}/${items.length-errors.length}`} {phase==='done' && ` · ${done.length} guardadas`} )}
{/* Privacy note */}
🔒 Análisis local · tus archivos no se suben · los originales no se modifican
{/* Drop zone when no items yet */} {items.length === 0 && (
{e.preventDefault();setHot(true);}} onDragEnter={e=>{e.preventDefault();setHot(true);}} onDragLeave={()=>setHot(false)} onDrop={e=>{e.preventDefault();setHot(false);addFiles(e.dataTransfer.files);}} onClick={() => inputRef.current?.click()} style={{ border:`2px dashed ${hot?'var(--accent)':'var(--line-2)'}`, borderRadius:10, padding:'28px 20px', textAlign:'center', background: hot?'rgba(92,199,255,0.05)':'transparent', transition:'border-color .2s,background .2s', cursor:'pointer', }} >
Arrastra archivos aquí o
)} {addFiles(e.target.files);e.target.value='';}} /> {items.length > 0 && ( <> {/* Action bar */} {!running && phase !== 'done' && (
)} {/* File list */}
{items.map(item => (
{item.fileName}
{item.status === 'done' && (
{item.bpm && {item.bpm} BPM} {item.camelot && {item.camelot}} {item.danceability!=null && 💃 {Math.round(item.danceability*100)}%} {item.instrumental!=null && {item.instrumental>=0.5?'Inst':'Vocal'}} {item.genres?.slice(0,2).map((g,i)=>{subGenre(g)})} {!item.onnxDone && Descubriendo estilo…}
)} {item.status === 'analyzing' && (
)} {item.status === 'error' && (
{item.error}
)}
))}
{phase === 'done' && (
✓ {done.length} guardadas en biblioteca
)} )}
); } // ── Playlists Section ───────────────────────────────────────────────────────── function PlaylistsSection({ playlists, tracks, onRefresh, onEdit }) { const handleDelete = (id) => { if (!confirm('¿Eliminar esta playlist?')) return; window.LibraryStore.deletePlaylist(id); onRefresh(); }; return (
Playlists inteligentes{playlists.length>0?` · ${playlists.length}`:''}
{playlists.length === 0 ? (
Crea una playlist para filtrar tu música por BPM, clave, género o mood.
) : (
{playlists.map(pl => )}
)}
); } // ── Doctor Section ──────────────────────────────────────────────────────────── function DoctorSection({ tracks }) { const health = useMemo(() => Eng ? Eng.getLibraryHealth(tracks) : null, [tracks]); if (!health) return null; const withBpm = tracks.filter(t => t.bpm); const withCam = tracks.filter(t => t.camelot); const camFreq = {}; withCam.forEach(t => { camFreq[t.camelot] = (camFreq[t.camelot]||0)+1; }); const topCam = Object.entries(camFreq).sort((a,b)=>b[1]-a[1]).slice(0,4); return (
Library Doctor
{health.score}/100
Salud de biblioteca
{health.strengths.map((s,i) =>
✓ {s}
)}
{health.issues.length > 0 && (
{health.issues.map((issue,i) => (
{issue.sev==='warn'?'⚠':'ℹ'}{issue.msg}
))}
)}
BPM
{withBpm.length}/{tracks.length}
{withBpm.length < tracks.length &&
{tracks.length-withBpm.length} sin BPM
}
Camelot
{withCam.length}/{tracks.length}
{withCam.length < tracks.length &&
{tracks.length-withCam.length} sin Camelot
}
Top Camelot
{topCam.map(([k,n]) => (
{k} {n}
))}
{health.roleRecs.length > 0 && (
Mejores pistas por rol
{health.roleRecs.map(({ role, track, score:s }) => (
{ROLE_LABELS[role]} {track.name} {track.bpm && {track.bpm}} {track.camelot && {track.camelot}} {s}
))}
)}
); } // ── Library View ────────────────────────────────────────────────────────────── function LibraryView({ tracks, playlists, onRefresh, onAdd, onEditPlaylist }) { const [query, setQuery] = useState(''); const [sortBy, setSortBy] = useState('score'); const [sortDir, setSortDir] = useState('desc'); const [dnaTrack, setDnaTrack] = useState(null); const [showPlaylists, setShowPlaylists] = useState(false); const [showDoctor, setShowDoctor] = useState(false); const filtered = useMemo(() => { let list = tracks; if (query.trim()) { const q = query.toLowerCase(); list = list.filter(t => t.name.toLowerCase().includes(q) || t.genres?.some(g => subGenre(g).toLowerCase().includes(q)) || t.camelot?.toLowerCase() === q || String(t.bpm||'') === q ); } const dir = sortDir === 'asc' ? 1 : -1; return [...list].sort((a, b) => { if (sortBy === 'date') return dir * (a.addedAt - b.addedAt); if (sortBy === 'bpm') return dir * ((a.bpm||0) - (b.bpm||0)); if (sortBy === 'name') return dir * a.name.localeCompare(b.name); if (sortBy === 'dance') return dir * ((a.danceability||0) - (b.danceability||0)); if (sortBy === 'score' && Eng) return dir * (Eng.getAntonicScore(a) - Eng.getAntonicScore(b)); return 0; }); }, [tracks, query, sortBy, sortDir]); const toggleSort = (col) => { if (sortBy === col) setSortDir(d => d === 'asc' ? 'desc' : 'asc'); else { setSortBy(col); setSortDir('desc'); } }; const SortBtn = ({ col, label }) => ( ); const Btn = ({ active, danger, onClick, children }) => ( ); const remove = (id) => { window.LibraryStore.removeTrack(id); onRefresh(); }; const clearAll = () => { if (!confirm(`¿Vaciar la biblioteca? Se eliminarán ${tracks.length} pistas.`)) return; window.LibraryStore.clearTracks(); onRefresh(); }; return (
{dnaTrack && setDnaTrack(null)} />} {/* Toolbar */}
setQuery(e.target.value)} />
Añadir setShowPlaylists(p=>!p)}> Playlists{playlists.length>0?` (${playlists.length})`:''} setShowDoctor(p=>!p)}>Doctor doExportCSV(tracks)}>CSV doExportJSON(tracks)}>JSON Vaciar
{/* Count + sort */}
{filtered.length}{filtered.length!==tracks.length?` de ${tracks.length}`:''} pista{tracks.length!==1?'s':''}
{/* Track list */}
{filtered.length === 0 && query.trim() ? (
Sin resultados para "{query}"
) : ( filtered.map(track => { const score = Eng ? Eng.getAntonicScore(track) : null; const roles = Eng ? Eng.getDjRoles(track) : null; const isInst = track.instrumental != null ? track.instrumental >= 0.5 : null; return (
{score != null && (
{score}
)}
{track.name}
{track.bpm && {track.bpm} BPM} {track.camelot && {track.camelot}} {track.danceability!=null && 💃 {Math.round(track.danceability*100)}%} {isInst != null && {isInst?'Inst':'Vocal'}} {track.genres?.slice(0,1).map((g,i) => {subGenre(g)})} {roles && ( {ROLE_LABELS[roles.primaryRole]} )}
{fmtDate(track.addedAt)}
); }) )}
{showPlaylists && ( )} {showDoctor && }
); } // ── Main Page ───────────────────────────────────────────────────────────────── function PlaylistPage() { const [tracks, setTracks] = useState([]); const [playlists, setPlaylists] = useState([]); const [adding, setAdding] = useState(false); const [initialFiles, setInitialFiles] = useState(null); const [editingPlaylist, setEditingPlaylist] = useState(null); const [loading, setLoading] = useState(false); const refresh = useCallback(() => { setTracks(window.LibraryStore.getTracks()); setPlaylists(window.LibraryStore.getPlaylists()); }, []); useEffect(() => { const p = window.LibraryStore?.init?.(); if (p) { p.then(refresh).catch(refresh).finally(() => setLoading(false)); } else { refresh(); setLoading(false); } }, []); useEffect(() => { const handler = (e) => { if (e.key === 'antonic_signal') refresh(); }; window.addEventListener('storage', handler); return () => window.removeEventListener('storage', handler); }, [refresh]); useEffect(() => { if (adding) window.scrollTo({ top: 0, behavior: 'smooth' }); }, [adding]); const hasLibrary = tracks.length > 0; const Header = () => (
DJ Antønic
{hasLibrary && ( {tracks.length} pista{tracks.length!==1?'s':''} {playlists.length>0 && ` · ${playlists.length} playlist${playlists.length!==1?'s':''}`} )} ← Convertidor
); if (loading) return (
Cargando biblioteca…
); // Playlist editor takes over if (editingPlaylist !== null) return (
{ refresh(); setEditingPlaylist(null); }} onBack={() => setEditingPlaylist(null)} />
); return (
{/* Add panel */} {adding && ( { setAdding(false); setInitialFiles(null); refresh(); }} /> )} {/* Empty state */} {!hasLibrary && !adding && ( { setInitialFiles(files); setAdding(true); }} /> )} {/* Library */} {hasLibrary && ( { setInitialFiles(null); setAdding(true); }} onEditPlaylist={setEditingPlaylist} /> )}
); } ReactDOM.createRoot(document.getElementById('root')).render();