Changeset e6ad948 in Klonkt

Timestamp:

06/20/2026 06:47:41 AM (3 months ago)

Author:

roboburr <roboburr@…>

Branches:

main

Children:

08cfdaa

Parents:

57b1843

Message:

feat(epk): choose up to 5 tracks for the press kit (instead of auto top-5)

Press kit editor now has a track picker (checkboxes, max 5). /pers shows the
chosen tracks in that order; no selection → automatically the top 5 most
played. Stored as epk_tracks_<siteId> (validated on site + max 5).

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

Location:

src

Files:

• routes/admin-epk.js (modified) (5 diffs)
• routes/epk.js (modified) (1 diff)
• views/pages/admin-epk.ejs (modified) (2 diffs)

src/routes/admin-epk.js

@@ -10 +10 @@
 
 import express from 'express';
+import db from '../config/database.js';
 import { renderPage } from '../middleware/render.js';
 import { requireGod } from '../middleware/auth.js';
@@ -17 +18 @@
 const router = express.Router();
 
+const MAX_EPK_TRACKS = 5;
+
 router.get('/', requireGod, (req, res) => {
   const site = res.locals.site;
@@ -23 +26 @@
     return res.status(403).send('Perskit is een premium-functie.');
   }
+  const allTracks = db.prepare(
+    `SELECT id, title, artist FROM audio_tracks WHERE site_id = ? ORDER BY position ASC, created_at ASC`
+  ).all(site.id);
+  let chosen = [];
+  try { const r = JSON.parse(getSetting('epk_tracks_' + site.id, '') || '[]'); if (Array.isArray(r)) chosen = r; } catch (e) {}
   renderPage(req, res, 'pages/admin-epk', {
     pageTitle: 'Perskit bewerken',
@@ -29 +37 @@
     epkBio: getSetting('epk_bio_' + site.id, '') || '',
     epkContact: getSetting('epk_contact_' + site.id, '') || '',
+    allTracks,
+    chosenTracks: chosen,
+    maxEpkTracks: MAX_EPK_TRACKS,
     success: req.query.success || null,
   });
@@ -38 +49 @@
   setSetting('epk_bio_' + site.id, (req.body.epk_bio || '').toString().slice(0, 1000).trim());
   setSetting('epk_contact_' + site.id, (req.body.epk_contact || '').toString().slice(0, 300).trim());
+  // Gekozen nummers: alleen ids van DEZE site, max 5, in de aangeleverde volgorde.
+  let ids = req.body.epk_tracks;
+  if (!Array.isArray(ids)) ids = ids ? [ids] : [];
+  const valid = new Set(db.prepare('SELECT id FROM audio_tracks WHERE site_id = ?').all(site.id).map((r) => r.id));
+  ids = ids.map(String).filter((id) => valid.has(id)).slice(0, MAX_EPK_TRACKS);
+  setSetting('epk_tracks_' + site.id, JSON.stringify(ids));
   res.redirect('/admin/epk?success=' + encodeURIComponent('Perskit opgeslagen'));
 });

src/routes/epk.js

@@ -25 +25 @@
   if (!site) return next();
 
-  // Top 10 meest beluisterde nummers (op play_count), niet zomaar de eerste paar.
-  const tracks = db.prepare(
-    `SELECT title, artist, duration, cover_url, COALESCE(play_count, 0) AS plays
-       FROM audio_tracks
-      WHERE site_id = ?
-      ORDER BY plays DESC, position ASC, created_at ASC
-      LIMIT 10`
-  ).all(site.id);
+  // Nummers op de perskit: een door de admin GEKOZEN selectie (max 5, in eigen
+  // volgorde) als die is ingesteld; anders automatisch de top 5 meest beluisterde.
+  let chosenIds = [];
+  try {
+    const raw = JSON.parse(getSetting('epk_tracks_' + site.id, '') || '[]');
+    if (Array.isArray(raw)) chosenIds = raw.filter((x) => typeof x === 'string').slice(0, 5);
+  } catch (e) { /* ongeldige JSON → val terug op top */ }
+
+  let tracks;
+  if (chosenIds.length) {
+    const ph = chosenIds.map(() => '?').join(',');
+    const rows = db.prepare(
+      `SELECT id, title, artist, duration, cover_url, COALESCE(play_count, 0) AS plays
+         FROM audio_tracks WHERE site_id = ? AND id IN (${ph})`
+    ).all(site.id, ...chosenIds);
+    const byId = new Map(rows.map((r) => [r.id, r]));
+    tracks = chosenIds.map((id) => byId.get(id)).filter(Boolean);  // behoud gekozen volgorde
+  } else {
+    tracks = db.prepare(
+      `SELECT title, artist, duration, cover_url, COALESCE(play_count, 0) AS plays
+         FROM audio_tracks
+        WHERE site_id = ?
+        ORDER BY plays DESC, position ASC, created_at ASC
+        LIMIT 5`
+    ).all(site.id);
+  }
 
   const posts = db.prepare(

src/views/pages/admin-epk.ejs

@@ -26 +26 @@
                value="<%= epkContact %>">
       </label>
+
+      <div class="set-field">
+        <span>Nummers op de perskit <small>(kies er max <%= maxEpkTracks %>; laat leeg voor automatisch de top <%= maxEpkTracks %> meest beluisterd)</small></span>
+        <% if (!allTracks.length) { %>
+          <p class="set-help" style="margin:0">Nog geen nummers — voeg eerst audio toe in Beheer → Audio.</p>
+        <% } else { %>
+          <div class="epk-track-pick" data-max="<%= maxEpkTracks %>">
+            <% allTracks.forEach(function(t){ %>
+              <label class="epk-pick-item">
+                <input type="checkbox" name="epk_tracks" value="<%= t.id %>" <%= chosenTracks.indexOf(t.id) >= 0 ? 'checked' : '' %>>
+                <span class="epk-pick-title"><%= t.title || '(zonder titel)' %></span>
+                <% if (t.artist) { %><span class="epk-pick-artist"><%= t.artist %></span><% } %>
+              </label>
+            <% }); %>
+          </div>
+        <% } %>
+      </div>
+
       <button type="submit" class="btn btn-primary">Opslaan</button>
     </form>
@@ -51 +69 @@
   .admin-page .set-field textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); }
   .admin-page .set-form .btn { align-self: flex-start; }
+  .admin-page .epk-track-pick { display: flex; flex-direction: column; gap: 2px; max-height: 300px; overflow-y: auto; border: 1px solid var(--rule); border-radius: 8px; padding: 4px; }
+  .admin-page .epk-pick-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.5rem; border-radius: 6px; cursor: pointer; }
+  .admin-page .epk-pick-item:hover { background: var(--paper); }
+  .admin-page .epk-pick-item input { width: auto; flex: 0 0 auto; }
+  .admin-page .epk-pick-title { font-weight: 600; }
+  .admin-page .epk-pick-artist { color: var(--ink-muted, var(--ink-soft)); font-size: 0.85rem; }
+  .admin-page .epk-pick-item input:disabled ~ .epk-pick-title { opacity: 0.45; }
 </style>
+<script>
+(function () {
+  var box = document.querySelector('.epk-track-pick');
+  if (!box) return;
+  var max = parseInt(box.dataset.max, 10) || 5;
+  function sync() {
+    var checks = box.querySelectorAll('input[type=checkbox]');
+    var n = box.querySelectorAll('input[type=checkbox]:checked').length;
+    checks.forEach(function (c) { c.disabled = (!c.checked && n >= max); });
+  }
+  box.addEventListener('change', sync);
+  sync();
+})();
+</script>