Changeset 6401681 in Klonkt for src/assets/js/mod/admin-site-edit.js

Timestamp:

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

Author:

Robin <roboburr@…>

Branches:

main

Children:

f59a46c

Parents:

5300652

git-author:

Robin <roboburr@…> (08/13/2026 12:16:47 PM)

git-committer:

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

Message:

Het paneel hoort bij wie je bent, niet bij je bestanden (Robins correctie)

Verhuisd van Beheer -> Audio naar het profielscherm van de site-eigenaar, en
daar staat het NAAST de aliassen -- want dat is dezelfde vraag. Een alias zegt
wie je elders in de fediverse bent, een MBID zegt wie je in het muziekregister
bent. Bij de audiobestanden ging het over beheer van spullen; hier gaat het over
identiteit, en daar hoort het thuis.

DE VERHUIZING VERANDERDE DE VORM, en dat is de moeite waard om te weten. Het
profielscherm IS een formulier, en een formulier in een formulier bestaat niet
in HTML. Dus geen eigen opslaan-knop meer: de keuze zet een verborgen veld en
gaat mee met de Opslaan van de pagina, precies zoals de profielfoto. Dat leest
ook beter -- een halve wijziging die je nog kunt herzien voor je opslaat.

Ontkoppelen is nu het veld leegmaken, geen aparte route. Minder oppervlak.

Het zoek-endpoint ging mee naar /admin/sites/:slug/api/musicbrainz. Een endpoint
onder /admin/audio laten staan voor een scherm in /admin/sites is precies zo'n
naad die later niemand meer kan plaatsen. De teksten heten nu asite.mb_* in
plaats van aaud.mb_*, in alle drie de talen, met een placeholder erbij.

Wat NIET veranderde: de zoekopdracht draait server-side (hun regel geldt per
applicatie), wij kiezen niet voor de artiest, en alleen een echte MBID komt de
kolom in.

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

File:

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

src/assets/js/mod/admin-site-edit.js

@@ -134 +134 @@
   }
 })();
+
+  // 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) ─────────────────────────
+//
+// 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. En de keuze gaat mee met de Opslaan-knop van de pagina -- een eigen
+// formulier kan hier niet, want deze pagina IS er een.
+function wireMusicBrainz() {
+  const knop = document.getElementById('mb-zoek-btn');
+  const veld = document.getElementById('mb-q');
+  const uit = document.getElementById('mb-uit');
+  const idVeld = document.getElementById('mb-id');
+  const naamVeld = document.getElementById('mb-naam');
+  const huidig = document.getElementById('mb-huidig');
+  if (!knop || !veld || !uit || !idVeld || knop.__wired) return;
+  knop.__wired = true;
+
+  const el = (tag, cls, tekst) => {
+    const e = document.createElement(tag);
+    if (cls) e.className = cls;
+    // textContent en nooit innerHTML: dit is tekst uit een vreemd register.
+    if (tekst != null) e.textContent = tekst;
+    return e;
+  };
+
+  function zet(mbid, naam) {
+    idVeld.value = mbid || '';
+    naamVeld.value = naam || '';
+    if (huidig) {
+      huidig.hidden = !mbid;
+      const n = document.getElementById('mb-huidig-naam');
+      const a = document.getElementById('mb-huidig-link');
+      if (n) n.textContent = naam || mbid || '';
+      if (a) a.href = mbid ? `https://musicbrainz.org/artist/${mbid}` : '#';
+    }
+    uit.hidden = true;
+    uit.replaceChildren();
+  }
+
+  const wis = document.getElementById('mb-wis');
+  if (wis) wis.addEventListener('click', () => zet('', ''));
+
+  async function zoek() {
+    const q = (veld.value || '').trim();
+    if (!q) return;
+    uit.hidden = false;
+    uit.replaceChildren(el('p', 'form-hint', T.asite_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', 'form-hint', T.asite_mb_fail || 'MusicBrainz is even niet bereikbaar.'));
+    } finally {
+      knop.disabled = false;
+    }
+  }
+
+  function toon(kandidaten) {
+    if (!kandidaten.length) {
+      uit.replaceChildren(el('p', 'form-hint', T.asite_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.asite_mb_open || 'Bekijk op MusicBrainz');
+      open.href = k.url; open.target = '_blank'; open.rel = 'noopener';
+      li.appendChild(open);
+      const b = el('button', 'btn', T.asite_mb_pick || 'Dit ben ik');
+      b.type = 'button';
+      b.addEventListener('click', () => zet(k.mbid, k.naam));
+      li.appendChild(b);
+      lijst.appendChild(li);
+    }
+    uit.replaceChildren(lijst);
+  }
+
+  knop.addEventListener('click', zoek);
+  veld.addEventListener('keydown', (e) => { if (e.key === 'Enter') { e.preventDefault(); zoek(); } });
+}