Changeset 5300652 in Klonkt for src/assets/js/mod/admin-audio.js

Timestamp:

08/13/2026 01:08:32 PM (4 weeks ago)

Author:

Robin <roboburr@…>

Branches:

main

Children:

6401681

Parents:

a117862

git-author:

Robin <roboburr@…> (08/13/2026 12:10:40 PM)

git-committer:

Robin <roboburr@…> (08/13/2026 01:08:32 PM)

Message:

Stap 2: "Ben jij dit?" in Beheer -> Audio (shaer-mbz)

Een paneel bovenaan het audioscherm: zoek op je artiestennaam (voorgevuld met
wat er al in de site staat), kies je eigen pagina, klaar. Drie talen.

DE TOELICHTING IS HET HELE PUNT. Elke kandidaat toont MusicBrainz'
disambiguation naast soort, land en jaren -- er zijn drie bands die Nirvana
heten, en met alleen een naam kiest iemand de verkeerde. Wij kiezen NIET voor
de artiest, ook niet als er precies een treffer is: een verkeerd geraden MBID
zet jouw naam onder andermans werk.

ONTKOPPELEN KAN. Om dezelfde reden: zo'n vergissing hoort met een klik terug
te draaien te zijn, niet met een databasebewerking.

Alleen een echte MBID komt de kolom in; de route weigert een URL of een handle.
De naam bewaren we ernaast zodat het scherm kan tonen WAT er hangt zonder
ervoor te netwerken -- en zodat een verkeerde koppeling opvalt.

TWEE DINGEN UIT DE HUISREGELS. De kandidaten gaan met textContent het scherm op
en niet als HTML: dat is tekst uit een vreemd register. En het blok hangt in
run() en niet op moduleniveau -- deze modules krijgen bij elke paginawissel
opnieuw init(), en een blok dat maar een keer per sessie draait is precies wat
shaer-5s1 opleverde. Ik had hem er eerst buiten gezet.

Als iemand niet in MusicBrainz staat zegt het scherm dat hij zich daar kan
aanmelden -- en erbij dat dat alleen dáár kan, niet vanuit Klonkt. Dat is geen
bescheidenheid maar hun API: artiesten zijn er niet mee aan te maken.

Co-Authored-By: Claude Opus 5 <noreply@…>

File:

• src/assets/js/mod/admin-audio.js (modified) (1 diff)

src/assets/js/mod/admin-audio.js

@@ -452 +452 @@
   });
 })();
+
+  // MusicBrainz-paneel (shaer-mbz). Binnen run(), niet op moduleniveau:
+  // deze modules krijgen bij elke paginawissel opnieuw init(), en een blok dat
+  // maar een keer per sessie draait is precies wat shaer-5s1 opleverde.
+  wireMusicBrainz();
 }
+
+// ── MusicBrainz: ben jij dit? (shaer-mbz, stap 2) ─────────────────
+//
+// De kandidaten komen van de server, want MusicBrainz eist een verzoek per
+// seconde per APPLICATIE en een User-Agent met contact -- allebei niet vanuit
+// een browser af te dwingen.
+//
+// WIJ KIEZEN NIET. Ook niet als er precies een treffer is: een verkeerd
+// geraden MBID zet jouw naam onder andermans werk. De knop staat er, de klik
+// is van de artiest.
+function wireMusicBrainz() {
+  const knop = document.getElementById('mb-zoek-btn');
+  const veld = document.getElementById('mb-q');
+  const uit = document.getElementById('mb-uit');
+  if (!knop || !veld || !uit || knop.__wired) return;
+  knop.__wired = true;
+
+  const el = (tag, cls, tekst) => {
+    const e = document.createElement(tag);
+    if (cls) e.className = cls;
+    if (tekst != null) e.textContent = tekst;   // textContent: nooit HTML uit een vreemd register
+    return e;
+  };
+
+  async function zoek() {
+    const q = (veld.value || '').trim();
+    if (!q) return;
+    uit.hidden = false;
+    uit.replaceChildren(el('p', 'ax-hint', T.aaud_mb_busy || 'Zoeken…'));
+    knop.disabled = true;
+    try {
+      const r = await fetch(`api/musicbrainz?q=${encodeURIComponent(q)}`, { credentials: 'same-origin' });
+      const j = await r.json();
+      toon((j && j.kandidaten) || []);
+    } catch {
+      uit.replaceChildren(el('p', 'ax-hint', T.aaud_mb_fail || 'MusicBrainz is even niet bereikbaar.'));
+    } finally {
+      knop.disabled = false;
+    }
+  }
+
+  function toon(kandidaten) {
+    if (!kandidaten.length) {
+      uit.replaceChildren(el('p', 'ax-hint', T.aaud_mb_none || 'Niets gevonden.'));
+      return;
+    }
+    const lijst = el('ul', 'mb-lijst');
+    for (const k of kandidaten) {
+      const li = el('li', 'mb-kandidaat');
+      li.appendChild(el('strong', null, k.naam));
+      // De toelichting is het hele punt: er zijn drie bands die Nirvana heten,
+      // en zonder dit veld kiest iemand de verkeerde.
+      const bij = [k.toelichting, k.soort, k.land, k.jaren].filter(Boolean).join(' · ');
+      if (bij) li.appendChild(el('small', 'mb-bij', bij));
+      const open = el('a', 'mb-open', T.aaud_mb_open || 'Bekijk op MusicBrainz');
+      open.href = k.url; open.target = '_blank'; open.rel = 'noopener';
+      li.appendChild(open);
+      li.appendChild(kiesForm(k));
+      lijst.appendChild(li);
+    }
+    uit.replaceChildren(lijst);
+  }
+
+  function kiesForm(k) {
+    const f = document.createElement('form');
+    f.method = 'POST';
+    f.action = 'musicbrainz/link';
+    for (const [naam, waarde] of [['_csrf', csrf()], ['mbid', k.mbid], ['naam', k.naam]]) {
+      const i = document.createElement('input');
+      i.type = 'hidden'; i.name = naam; i.value = waarde || '';
+      f.appendChild(i);
+    }
+    const b = el('button', 'ax-btn', T.aaud_mb_pick || 'Dit ben ik');
+    b.type = 'submit';
+    f.appendChild(b);
+    return f;
+  }
+
+  // Het token staat al in elk formulier op deze pagina; er is er geen apart voor.
+  const csrf = () => (document.querySelector('input[name="_csrf"]') || {}).value || '';
+
+  knop.addEventListener('click', zoek);
+  veld.addEventListener('keydown', (e) => { if (e.key === 'Enter') { e.preventDefault(); zoek(); } });
+}