Changeset 3e86f1c in Klonkt for src/views/partials/track-editor.ejs

Timestamp:

06/15/2026 03:23:29 AM (3 months ago)

Author:

roboburr <roboburr@…>

Branches:

main

Children:

7f46817d

Parents:

4c9f29a

Message:

feat: automatic track duration — no more manually entering seconds

The duration of an audio track is now determined automatically instead of manually:

• On upload: read from ffmpeg's codecData event during the existing transcode (no extra ffprobe binary). The upload INSERT never set duration before -> every track started as NULL ('--:--'); that is now fixed.
• In the track editor: a hidden <audio preload=metadata> reads the duration and fills the field if it's still empty (manual override still possible).
• Backfill: npm run backfill:durations fills existing tracks without duration via ffmpeg (probeDuration reads only codecData and stops immediately -> fast).

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

File:

• src/views/partials/track-editor.ejs (modified) (2 diffs)

src/views/partials/track-editor.ejs

@@ -380 +380 @@
 
             <label class="te-field">
-              <span>Duur <small>(seconden — bv. 142 voor 2:22)</small></span>
+              <span>Duur <small>(seconden — automatisch bepaald, hier te overschrijven)</small></span>
               <input type="number" id="te-duration" min="0" step="1"
                      inputmode="numeric" pattern="[0-9]*"
-                     value="${track.duration || ''}" placeholder="0">
+                     value="${track.duration || ''}" placeholder="auto">
             </label>
 
@@ -619 +619 @@
     });
 
+    // ── Auto-duur ───────────────────────────────────────────
+    // De server bepaalt de duur al automatisch bij upload. Dit is de vangnet/
+    // UX-laag: opent een admin een bestaande track zónder duur, dan lezen we 'm
+    // hier uit de audio-metadata en vullen het veld — zodat je nooit seconden
+    // hoeft te typen. Bestaande waarde wordt nooit overschreven. We halen de
+    // bytes via dezelfde header-gate als de speler (X-Audio-Player).
+    (async function autoDuration() {
+      const durEl = $('#te-duration');
+      if (!durEl || !track.stream_url) return;
+      if (durEl.value && Number(durEl.value) > 0) return;  // al ingevuld → met rust laten
+      let objUrl = null;
+      try {
+        const r = await fetch(track.stream_url, { credentials: 'same-origin', headers: { 'X-Audio-Player': '1' } });
+        if (!r.ok) return;
+        objUrl = URL.createObjectURL(await r.blob());
+        const probe = new Audio();
+        probe.preload = 'metadata';
+        probe.addEventListener('loadedmetadata', () => {
+          if (isFinite(probe.duration) && probe.duration > 0 && !(durEl.value && Number(durEl.value) > 0)) {
+            durEl.value = Math.round(probe.duration);
+          }
+          if (objUrl) URL.revokeObjectURL(objUrl);
+        });
+        probe.addEventListener('error', () => { if (objUrl) URL.revokeObjectURL(objUrl); });
+        probe.src = objUrl;
+      } catch (e) { if (objUrl) URL.revokeObjectURL(objUrl); }
+    })();
+
     // Focus title for fast typing
     setTimeout(() => $('#te-title').focus(), 60);