Changeset 98a1990 in Klonkt

Timestamp:

06/30/2026 03:06:32 PM (2 months ago)

Author:

roboburr <roboburr@…>

Branches:

main

Children:

4d1aefb

Parents:

d4d8f9d

Message:

feat(admin-audio): replace an existing track's audio file + Playlists shortcut

• Track editor: a "Vervang audiobestand" control uploads a new audio file for an existing track. POST /admin/audio/api/:id/replace-audio transcodes it to mp3, swaps the track's media_id + duration, and deletes the old media (file + row). The track id is unchanged, so every [[track:id]] in posts keeps pointing at the same track — now with the new audio.
• /admin/audio header gets a Playlists button so you can jump to playlist management.

• src/routes/admin-audio.js — POST /api/:id/replace-audio
• src/views/partials/track-editor.ejs — replace-audio field + uploader
• src/views/pages/admin-audio.ejs — Playlists link in the header

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

Location:

src

Files:

• routes/admin-audio.js (modified) (1 diff)
• views/pages/admin-audio.ejs (modified) (1 diff)
• views/partials/track-editor.ejs (modified) (2 diffs)

src/routes/admin-audio.js

@@ -582 +582 @@
 });
 
+// Replace the audio FILE of an existing track (keeps all metadata + the track id, so any
+// [[track:id]] in posts keeps pointing here). Transcodes the new upload to a uniform mp3,
+// swaps the track's media_id + duration, and deletes the old media file/row.
+router.post('/api/:id/replace-audio', requireGod, (req, res) => {
+  const site = res.locals.site;
+  if (!site) return res.status(404).json({ ok: false, error: 'Site required' });
+  const track = db.prepare('SELECT id, media_id FROM audio_tracks WHERE id = ? AND site_id = ?').get(req.params.id, site.id);
+  if (!track) return res.status(404).json({ ok: false, error: 'Track niet gevonden' });
+
+  upload.single('audio')(req, res, async (err) => {
+    if (err) return res.status(400).json({ ok: false, error: err.message });
+    const file = req.file;
+    if (!file) return res.status(400).json({ ok: false, error: 'Geen bestand' });
+    const ext = path.extname(file.originalname).toLowerCase();
+    const limit = audioByteLimitFor(ext);
+    if (file.size > limit) {
+      try { fs.unlinkSync(file.path); } catch {}
+      return res.status(413).json({ ok: false, error: `Te groot (max ${Math.round(limit / 1024 / 1024)}MB voor ${ext || 'dit type'})` });
+    }
+
+    let transcoded;
+    try {
+      transcoded = await transcodeToMp3({
+        inputPath: file.path, outputDir: AUDIO_DIR,
+        outputBaseName: path.basename(file.filename, path.extname(file.filename)), tags: {},
+      });
+    } catch (e) {
+      try { fs.unlinkSync(file.path); } catch {}
+      return res.status(500).json({ ok: false, error: 'Conversie mislukt: ' + e.message });
+    }
+
+    const newMediaId = uuid();
+    try {
+      db.prepare('INSERT INTO media (id, site_id, filename, mime_type, size, storage_path) VALUES (?,?,?,?,?,?)')
+        .run(newMediaId, site.id, transcoded.filename, transcoded.mimeType, transcoded.size, transcoded.path);
+      db.prepare('UPDATE audio_tracks SET media_id = ? WHERE id = ? AND site_id = ?').run(newMediaId, track.id, site.id);
+      const dur = (transcoded.durationSec != null && transcoded.durationSec > 0) ? transcoded.durationSec : null;
+      if (dur) db.prepare('UPDATE audio_tracks SET duration = ? WHERE id = ?').run(dur, track.id);
+      // Remove the OLD media (file + row), best-effort.
+      if (track.media_id && track.media_id !== newMediaId) {
+        try { const old = db.prepare('SELECT storage_path FROM media WHERE id = ?').get(track.media_id); if (old && old.storage_path) fs.unlinkSync(old.storage_path); } catch {}
+        try { db.prepare('DELETE FROM media WHERE id = ?').run(track.media_id); } catch {}
+      }
+      return res.json({ ok: true, stream_url: audioUrl(transcoded.filename), duration: dur });
+    } catch (e) {
+      return res.status(500).json({ ok: false, error: e.message });
+    }
+  });
+});
+
 export default router;

src/views/pages/admin-audio.ejs

@@ -1 +1 @@
 <div class="container ax-page">
 
-  <p><a href="/admin" class="btn">&larr; <%= t('nav.admin') %></a></p>
+  <p><a href="/admin" class="btn">&larr; <%= t('nav.admin') %></a> <a href="/admin/playlists" class="btn">🎵 <%= t('admin.b_playlists') %></a></p>
   <header class="ax-header">
     <div>

src/views/partials/track-editor.ejs

@@ -440 +440 @@
 
             <div class="te-field">
+              <span>Audiobestand</span>
+              <div class="te-cover-btn-row">
+                <input type="file" id="te-audio-file" accept="audio/*,.mp3,.wav,.m4a,.flac,.ogg,.aac" hidden>
+                <button type="button" class="te-cover-btn" id="te-audio-pick">${track.stream_url ? '🔁 Vervang audiobestand' : '🎵 Audiobestand kiezen'}</button>
+                <span class="te-cover-status" id="te-audio-status"></span>
+              </div>
+            </div>
+
+            <div class="te-field">
               <span>Cover</span>
               <div class="te-cover-row">
@@ -636 +645 @@
     }
 
+    // ── Replace the audio file of this track ──────────────────
+    const aPick = $('#te-audio-pick');
+    const aFile = $('#te-audio-file');
+    const aStatus = $('#te-audio-status');
+    if (aPick && aFile) {
+      aPick.addEventListener('click', () => aFile.click());
+      aFile.addEventListener('change', async (e) => {
+        const f = e.target.files && e.target.files[0];
+        aFile.value = '';
+        if (!f) return;
+        aStatus.textContent = '⏳ Converteren… (kan even duren)'; aStatus.className = 'te-cover-status';
+        aPick.disabled = true;
+        try {
+          const fd = new FormData();
+          fd.append('audio', f);
+          const j = await api('POST', '/admin/audio/api/' + encodeURIComponent(id) + '/replace-audio', fd);
+          if (!j.ok) throw new Error(j.error || 'mislukt');
+          aStatus.textContent = '✓ Vervangen'; aStatus.className = 'te-cover-status is-ok';
+          track.stream_url = j.stream_url || track.stream_url;
+          if (j.duration) { const d = $('#te-duration'); if (d) d.value = j.duration; }
+        } catch (err) {
+          aStatus.textContent = 'Mislukt: ' + err.message; aStatus.className = 'te-cover-status is-error';
+        } finally { aPick.disabled = false; }
+      });
+    }
+
     // ── Insert © symbol into the credit field ─────────────────
     const copyrBtn = $('#te-credit-copyr');