muse/static/app.js

// Who is signed in, plus a logout link. Hidden entirely when MUSE_AUTH=off.
fetch('/api/me').then(r => r.json()).then(d => {
  if (d.user) document.getElementById('who').innerHTML =
    'signed in as ' + d.user.replace(/[&<>"]/g, '') + ' <a href="/auth/logout">log out</a>';
}).catch(() => {});

const $ = s => document.querySelector(s);
const esc = s => (s??'').replace(/[&<>"]/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;'}[c]));

$('#f').onsubmit = async e => {
  e.preventDefault();
  const q = $('#q').value.trim();
  if (!q) return;
  $('#go').disabled = true;
  $('#results').innerHTML = '<div class="empty">searching MusicBrainz&hellip;</div>';
  try {
    const r = await fetch('/api/search?q=' + encodeURIComponent(q));
    const { results } = await r.json();
    render(results);
  } catch (err) {
    $('#results').innerHTML = '<div class="empty">search failed: ' + esc(err.message) + '</div>';
  }
  $('#go').disabled = false;
};

function render(list) {
  if (!list || !list.length) {
    $('#results').innerHTML = '<div class="empty">no matches</div>';
    return;
  }
  $('#results').innerHTML = list.map((x, i) => `
    <div class="row">
      ${x.cover ? `<img src="${esc(x.cover)}" loading="lazy" onerror="this.style.visibility='hidden'">`
                : '<img>'}
      <div class="meta">
        <div class="t">${esc(x.title)}</div>
        <div class="s">${esc(x.artist)}${x.album ? ' &middot; ' + esc(x.album) : ''}${x.year ? ' &middot; ' + esc(x.year) : ''}</div>
      </div>
      <button class="get" data-i="${i}">Get</button>
    </div>`).join('');

  $('#results').querySelectorAll('.get').forEach(b => {
    b.onclick = async () => {
      const x = list[+b.dataset.i];
      b.disabled = true; b.textContent = '…';
      await fetch('/api/request', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(x)
      });
      b.textContent = 'Queued'; b.classList.add('done');
      poll();
    };
  });
}

$('#imprun').onclick = async () => {
  const text = $('#bulk').value.trim();
  if (!text) return;
  const b = $('#imprun');
  b.disabled = true; b.textContent = 'Queueing…';
  $('#impout').innerHTML = '';
  try {
    const r = await fetch('/api/import', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ text })
    });
    const d = await r.json();
    $('#impout').innerHTML =
      `<div class="hint">Queued ${d.queued.length}.</div>` +
      (d.skipped.length
        ? `<div class="skipped">Skipped ${d.skipped.length}: ` +
          d.skipped.map(s => esc(s.line) + ' (' + esc(s.why) + ')').join('; ') + '</div>'
        : '');
    if (d.queued.length) $('#bulk').value = '';
    poll();
  } catch (e) {
    $('#impout').innerHTML = '<div class="skipped">import failed: ' + esc(e.message) + '</div>';
  }
  b.disabled = false; b.textContent = 'Queue all';
};

async function poll() {
  try {
    const { jobs, counts, pending } = await (await fetch('/api/jobs')).json();

    const active = (counts.queued || 0) + (counts.searching || 0) + (counts.downloading || 0);
    const done = counts.imported || 0;
    $('#qcount').textContent = active
      ? `${active} in flight${pending ? ` · ${pending} waiting` : ''}`
      : (done ? `${done} imported` : '');

    // Progress only means something during a batch.
    const bar = $('#bar'), total = active + done;
    bar.classList.toggle('hidden', !(active && total));
    if (active && total)
      bar.firstElementChild.style.width = (done / total * 100).toFixed(1) + '%';

    $('#jobs').innerHTML = jobs.length ? jobs.map(j => `
      <div class="row">
        <div class="meta">
          <div class="t">${esc(j.title)}</div>
          <div class="s">${esc(j.artist)}${j.detail ? ' &middot; ' + esc(j.detail) : ''}</div>
        </div>
        ${j.state === 'failed'
          ? `<button class="retry" data-id="${esc(j.id)}">Retry</button>` : ''}
        <span class="pill ${esc(j.state)}">${esc(j.state)}</span>
      </div>`).join('') : '<div class="empty">nothing requested yet</div>';

    $('#jobs').querySelectorAll('.retry').forEach(b => {
      b.onclick = async () => {
        b.disabled = true;
        await fetch('/api/retry/' + b.dataset.id, { method: 'POST' });
        poll();
      };
    });
  } catch {}
}
poll();
setInterval(poll, 4000);