Changeset 749605a in Klonkt for src/assets/js/mod/playlist-editor.js

Timestamp:

08/16/2026 03:06:18 PM (3 weeks ago)

Author:

Robin <roboburr@…>

Branches:

main

Children:

a5caa73

Parents:

a5515b4 (diff), 9026de5 (diff)
Note: this is a merge changeset, the changes displayed below correspond to the merge itself.
Use the (diff) links above to see all the changes relative to each parent.

Message:

Bibliotheek en album-federatie terug op main (shaer-0nh, shaer-756s)

Achttien commits, in drie brokken.

DE BIBLIOTHEEK. Een Library-skelet met een eigen volgerssoort: wie de
bibliotheek volgt krijgt de muziek en met opzet niet de gewone posts, en
die staan daarom in een eigen tabel -- een vlag die iemand vergeet te
filteren bezorgt stilletjes de Krant aan mensen die er niet om vroegen.
Daarna wat er nodig bleek om werkelijk gelezen te worden: audience
(zonder dat gaf hun create() een KeyError en dus een 500 op onze URL),
de ongeordende collectievorm, en paginering op elke collectie die first
belooft -- die laatste vond meteen dat featured hetzelfde gat had.

HET VOCABULAIRE. fw:track in de kleine vorm die Emissary ook stuurt,
artist_credit met de site-actor als Artist (mogelijk geworden door de
MusicBrainz-koppeling), en het album als ingesloten fw:Album met
released, musicbrainzId en een eigen artist_credit. Daarvoor kwamen er
twee kolommen op playlists, alleen bij kind='album' en afgedwongen in
PlaylistService -- niet in het scherm, want de API ligt open.

HET BEHEER. De vijf mediapagina's stonden op drie verschillende
ontwerpen; nu op een gedeelde ax-romp, met de primitieven op een plek in
plaats van in acht kopieen. De playlist-modal ging alsnog door i18n: die
teksten stonden hard in het script, wat niet opviel omdat het toevallig
de brontaal was.

WAT ER NIET IN ZIT: bitrate en size top-level als fw:. Dat is bewust
(shaer-3f8a). Hun eigen outbox zet ze op de Link, net als wij, en het
wordt een gesprek in plaats van een aanpassing -- briefing in
~/bewaard/funkwhale-briefing-en.md.

Gereedschap dat meekomt: scripts/funkwhale-gat.mjs meet het gat naar hun
ingest, admin-css.mjs en admin-css-gelijk.mjs ontleden en vergelijken de
beheer-CSS, render-admin-views.mjs rendert de views gevuld en leeg. Die
laatste drie omdat de testsuite geen enkele view aanraakt.

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

File:

• src/assets/js/mod/playlist-editor.js (modified) (21 diffs)

src/assets/js/mod/playlist-editor.js

@@ -6 +6 @@
 
 import { pageData } from './lib.js';
+
+/**
+ * De teksten van deze modal, uit het gegevensblok van partials/playlist-editor.ejs.
+ *
+ * EIGEN BLOK en niet pageData(): die pakt met querySelector er EEN, en deze
+ * modal hangt onder pagina's die er zelf al een hebben. Een tweede blok zou
+ * daar genegeerd worden.
+ *
+ * De terugval is bewust de sleutelnaam en niet de Nederlandse tekst: ontbreekt
+ * er iets, dan zie je DAT er iets ontbreekt in plaats van een pagina die er
+ * half vertaald uitziet en waarvan niemand merkt welke helft.
+ */
+let _T = null;
+function T(sleutel) {
+  if (_T === null) {
+    try {
+      const el = document.querySelector('script[type="application/json"][data-playlist-editor-i18n]');
+      _T = el ? (JSON.parse(el.textContent) || {}) : {};
+    } catch (e) { _T = {}; }
+  }
+  return _T[sleutel] != null ? _T[sleutel] : sleutel;
+}
 
 (function() {
@@ -54 +76 @@
       if (Array.isArray(j.tracks)) tracks = j.tracks;
     } catch (e) {
-      alert('Tracks ophalen mislukt');
+      alert(T('e_tracks'));
       return;
     }
     if (!tracks.length) {
-      alert('Geen audio-tracks beschikbaar. Upload eerst tracks via Admin → Audio.');
+      alert(T('e_geen_tracks'));
       return;
     }
 
     // Existing playlist data when editing
-    let initial = { title: '', artist: '', year: '', cover: '', kind: 'album', track_ids: [] };
+    let initial = { title: '', artist: '', year: '', cover: '', kind: 'album', release_date: '', mb_release_id: '', track_ids: [] };
     if (isEdit && opts.id) {
       try {
@@ -75 +97 @@
     backdrop.className = 'pl-modal-backdrop';
     backdrop.innerHTML = `
-      <div class="pl-modal" role="dialog" aria-label="Playlist editor">
+      <div class="pl-modal" role="dialog" aria-label="${T('dialoog')}">
         <div class="pl-modal-header">
-          <h3>${isEdit ? '✎ Playlist bewerken' : '+ Nieuwe playlist'}</h3>
-          <button type="button" class="pl-modal-close" aria-label="Sluiten">×</button>
+          <h3>${isEdit ? '✎ ' + T('t_edit') : '+ ' + T('t_new')}</h3>
+          <button type="button" class="pl-modal-close" aria-label="${T('sluiten')}">×</button>
         </div>
         <div class="pl-modal-body">
@@ -85 +107 @@
               <div class="pl-meta-grid">
                 <label class="pl-field pl-field-full">
-                  <span>Titel *</span>
+                  <span>${T('titel')}</span>
                   <input type="text" id="pli-title" maxlength="200" autofocus value="${esc(initial.title)}">
                 </label>
                 <label class="pl-field">
-                  <span>Artiest</span>
+                  <span>${T('artiest')}</span>
                   <input type="text" id="pli-artist" maxlength="200" value="${esc(initial.artist)}">
                 </label>
                 <label class="pl-field">
-                  <span>Jaar</span>
+                  <span>${T('jaar')}</span>
                   <input type="number" id="pli-year" min="1900" max="2099" value="${initial.year || ''}">
                 </label>
                 <label class="pl-field">
-                  <span>Type</span>
+                  <span>${T('type')}</span>
                   <select id="pli-kind">
-                    <option value="album"    ${initial.kind === 'album' ? 'selected' : ''}>💿 Album (genummerd)</option>
-                    <option value="playlist" ${initial.kind === 'playlist' ? 'selected' : ''}>📃 Playlist (track-covers)</option>
+                    <option value="album"    ${initial.kind === 'album' ? 'selected' : ''}>💿 ${T('k_album')}</option>
+                    <option value="playlist" ${initial.kind === 'playlist' ? 'selected' : ''}>📃 ${T('k_playlist')}</option>
                   </select>
                 </label>
+                <label class="pl-field pl-uitgave">
+                  <span>${T('uitgave')}</span>
+                  <input type="date" id="pli-release-date" value="${esc(initial.release_date || '')}">
+                </label>
+                <label class="pl-field pl-uitgave">
+                  <span>${T('mb_release')}</span>
+                  <input type="text" id="pli-mb-release" maxlength="36" spellcheck="false"
+                         placeholder="00000000-0000-0000-0000-000000000000"
+                         value="${esc(initial.mb_release_id || '')}">
+                </label>
                 <div class="pl-field pl-field-full">
-                  <span>Cover</span>
+                  <span>${T('cover')}</span>
                   <div class="pl-cover-row">
                     <span class="pl-cover-thumb" id="pli-cover-thumb">
@@ -111 +143 @@
                         : `<span class="pl-cover-empty">🎨</span>`}
                     </span>
-                    <input type="text" id="pli-cover" placeholder="https://… of upload" value="${esc(initial.cover)}" style="flex:1">
+                    <input type="text" id="pli-cover" placeholder="${T('cover_url')}" value="${esc(initial.cover)}" style="flex:1">
                   </div>
                   <div class="pl-cover-upload-row">
                     <input type="file" id="pli-cover-file" accept="image/jpeg,image/png,image/webp,image/gif" hidden>
-                    <button type="button" class="pl-btn-small" id="pli-cover-pick">📷 Foto kiezen…</button>
+                    <button type="button" class="pl-btn-small" id="pli-cover-pick">📷 ${T('cover_kies')}</button>
                     <span class="pl-cover-status" id="pli-cover-status"></span>
                   </div>
@@ -121 +153 @@
               </div>
               <div class="pl-section-title">
-                Tracks in playlist <span class="pl-track-count" id="pli-count">0</span>
-                <small>(sleep ⠿ om te ordenen)</small>
+                ${T('tracks_in')} <span class="pl-track-count" id="pli-count">0</span>
+                <small>${T('sleep_hint')}</small>
               </div>
               <div id="pli-selected" class="pl-selected-list"></div>
             </div>
             <div class="pl-editor-right">
-              <div class="pl-section-title">Beschikbare tracks</div>
-              <input type="search" id="pli-search" placeholder="Zoek..." class="pl-search-input">
+              <div class="pl-section-title">${T('beschikbaar')}</div>
+              <input type="search" id="pli-search" placeholder="${T('zoek')}" class="pl-search-input">
               <div id="pli-available" class="pl-available-list"></div>
             </div>
@@ -134 +166 @@
         </div>
         <div class="pl-modal-footer">
-          <button type="button" class="btn" id="pli-cancel">Annuleren</button>
+          <button type="button" class="btn" id="pli-cancel">${T('annuleren')}</button>
           <button type="button" class="btn btn-primary" id="pli-save" disabled>
-            ${isEdit ? 'Opslaan' : 'Aanmaken'}
+            ${isEdit ? T('opslaan') : T('aanmaken')}
           </button>
         </div>
@@ -157 +189 @@
     const yearEl = $('#pli-year');
     const kindEl = $('#pli-kind');
+    const releaseEl = $('#pli-release-date');
+    const mbReleaseEl = $('#pli-mb-release');
     const coverEl = $('#pli-cover');
+
+    // Uitgavedatum en release-id horen bij een ALBUM, niet bij een
+    // afspeellijst -- dat is wat de keuze album/playlist betekent. Ze
+    // verdwijnen dus als je omschakelt, en de server maakt ze dan ook leeg;
+    // dit scherm is de uitleg, niet de bewaking.
+    const toonUitgave = () => {
+      const album = kindEl.value !== 'playlist';
+      for (const el of backdrop.querySelectorAll('.pl-uitgave')) el.hidden = !album;
+    };
+    kindEl.addEventListener('change', toonUitgave);
+    toonUitgave();
     const coverThumb = $('#pli-cover-thumb');
     const saveBtn = $('#pli-save');
@@ -176 +221 @@
     // requireAuth) dat een /media/-URL teruggeeft — dat heeft GEEN playlist-id
     // nodig, dus uploaden kan ook al vóór het aanmaken. De URL belandt in het
-    // cover-veld en wordt bij 'Aanmaken'/'Opslaan' met de playlist meegestuurd.
+    // cover-veld en wordt bij het opslaan met de playlist meegestuurd.
     const coverFileInput = $('#pli-cover-file');
     const coverPickBtn   = $('#pli-cover-pick');
@@ -187 +232 @@
         if (!file) return;
         if (!/^image\//.test(file.type)) {
-          coverStatus.textContent = 'Alleen afbeeldingen';
+          coverStatus.textContent = T('e_alleen_afb');
           coverStatus.className = 'pl-cover-status is-error';
           return;
         }
-        coverStatus.textContent = 'Uploaden…';
+        coverStatus.textContent = T('bezig');
         coverStatus.className = 'pl-cover-status';
         const fd = new FormData();
@@ -200 +245 @@
           );
           const j = await r.json();
-          if (!r.ok || !j.url) throw new Error(j.error || 'Upload mislukt');
+          if (!r.ok || !j.url) throw new Error(j.error || T('e_upload'));
           const url = j.url || '';
           coverEl.value = url;
@@ -209 +254 @@
           coverStatus.className = 'pl-cover-status is-ok';
         } catch (err) {
-          coverStatus.textContent = 'Mislukt: ' + err.message;
+          coverStatus.textContent = T('e_mislukt') + err.message;
           coverStatus.className = 'pl-cover-status is-error';
         }
@@ -222 +267 @@
       countEl.textContent = selected.length;
       if (selected.length === 0) {
-        selectedEl.innerHTML = '<div class="pl-empty">Klik tracks rechts om toe te voegen.</div>';
+        selectedEl.innerHTML = '<div class="pl-empty">' + T('leeg_sel') + '</div>';
         updateSaveBtn();
         return;
@@ -233 +278 @@
           : `<span class="pl-row-cover pl-row-cover-empty">♪</span>`;
         return `<div class="pl-row" data-id="${esc(id)}" data-pos="${i}">
-          <span class="pl-row-handle" aria-label="Verslepen">⠿</span>
+          <span class="pl-row-handle" aria-label="${T('versleep')}">⠿</span>
           <span class="pl-row-num">${i + 1}</span>
           ${cover}
@@ -240 +285 @@
             ${t.artist ? `<span class="pl-row-artist">${esc(t.artist)}</span>` : ''}
           </span>
-          <button type="button" class="pl-row-x" data-id="${esc(id)}" aria-label="Verwijderen">×</button>
+          <button type="button" class="pl-row-x" data-id="${esc(id)}" aria-label="${T('verwijder')}">×</button>
         </div>`;
       }).join('');
@@ -263 +308 @@
       });
       if (matches.length === 0) {
-        availEl.innerHTML = '<div class="pl-empty">Geen resultaten.</div>';
+        availEl.innerHTML = '<div class="pl-empty">' + T('geen_res') + '</div>';
         return;
       }
@@ -274 +319 @@
           ? `<span class="pl-row-cover"><img src="${esc(t.cover)}" alt=""></span>`
           : `<span class="pl-row-cover pl-row-cover-empty">♪</span>`;
-        return `<div class="${cls.join(' ')}" data-id="${esc(t.id)}" ${t.playable ? '' : 'title="Track heeft geen audio-bestand"'}>
+        return `<div class="${cls.join(' ')}" data-id="${esc(t.id)}" ${t.playable ? '' : `title="${T('geen_audio')}"`}>
           ${cover}
           <span class="pl-row-info">
@@ -368 +413 @@
       const orig = saveBtn.textContent;
       saveBtn.disabled = true;
-      saveBtn.textContent = 'Opslaan...';
+      saveBtn.textContent = T('bezig_opslaan');
 
       const payload = {
@@ -376 +421 @@
         cover:  coverEl.value.trim(),
         kind:   kindEl.value === 'playlist' ? 'playlist' : 'album',
+        release_date:  releaseEl.value.trim(),
+        mb_release_id: mbReleaseEl.value.trim(),
         tracks: selected.slice(),
       };
@@ -385 +432 @@
         const j = await api('POST', url, payload);
         if (!j.ok) {
-          alert('Opslaan mislukt: ' + (j.error || 'onbekend'));
+          alert(T('e_opslaan') + (j.error || 'onbekend'));
           saveBtn.disabled = false;
           saveBtn.textContent = orig;
@@ -396 +443 @@
         }
       } catch (err) {
-        alert('Opslaan mislukt: ' + err.message);
+        alert(T('e_opslaan') + err.message);
         saveBtn.disabled = false;
         saveBtn.textContent = orig;