Changeset 1f640ff in Klonkt for src/routes

Timestamp:

07/30/2026 12:04:21 PM (6 weeks ago)

Author:

Robin <roboburr@…>

Branches:

main

Children:

f9b1c5c

Parents:

6dd26e5

Message:

Audio-tegel: golfvorm en titel elk hun eigen band, en balkjes ipv de rauwe golf

De titel stond dwars door de golfvorm heen (Robins schermafdruk): de
golfvorm hing absoluut gecentreerd en de flex-tegel centreerde de titel
er bovenop. Nu heeft elk zijn eigen band: golfvorm in de bovenhelft
(8-54 procent), titel op 60 procent, bronregel op 76. De maten staan
expliciet: een absoluut gepositioneerde img valt bij width/height auto
terug op zijn intrinsieke maat en de band klapte dicht.

En de golfvorm zelf is mooier (Robins tweede vraag): geen harige rauwe
golf meer maar balkjes in SoundCloud-stijl. Peak en average worden op 57
kolommen gesampled (zachte piek-top over heldere kern), nearest-neighbor
opgeblazen tot balkjes van 14px, en drawgrid wist er transparante
spleetjes van 5px tussen (c=black@0 met replace=1 schrijft echte
transparantie).

Changed files:
src/routes/activitypub.js

• het showwavespic-recept vervangen door de gelaagde balkjes-graph

src/views/partials/post-tile.ejs

• grid-tile-audio-klasse op de anchor als er een golfvorm is

src/assets/css/style.css

• grid-tile-wave: expliciete band (top 8, hoogte 46, breedte 84)
• grid-tile-audio: titel op 60 procent, bronregel op 76

remarks: geometrie numeriek geverifieerd in een browser-preview (golf
17.6-44.4 procent, titel 60-65.2, 58px ruimte, gradient intact) en het
balkjes-recept visueel beoordeeld op een tegel-gradient-compositie. De
bestaande audiopost houdt zijn oude dunne golfvorm-png; een verse upload
krijgt de balkjes. 345 tests groen.

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

File:

• src/routes/activitypub.js (modified) (2 diffs)

src/routes/activitypub.js

@@ -357 +357 @@
     // audio-tegel op): ffmpeg draws the waveform into <name>.poster.png.
     // White on transparent, so the tile's own gradient stays the backdrop
-    // and every audio post keeps its own hue.
+    // and every audio post keeps its own hue. The shape is bars, not the
+    // raw hairy wave (Robins tweede vraag): peak and average sampled into
+    // 57 columns (soft tip over bright core), blown up nearest-neighbor to
+    // 14px bars, and drawgrid ERASES 5px gaps (c=black@0 + replace=1 writes
+    // transparent pixels; h=2*ih keeps horizontal grid lines out of frame).
     if (mime.startsWith('audio/')) {
       Promise.all([import('child_process'), import('ffmpeg-static')]).then(([{ execFile }, ff]) => {
@@ -363 +367 @@
         if (!bin) return;
         const poster = req.file.path + '.poster.png';
-        execFile(bin, ['-hide_banner', '-loglevel', 'error', '-y', '-i', req.file.path, '-filter_complex', 'showwavespic=s=800x256:colors=white', '-frames:v', '1', poster],
+        const graph = '[0:a]aformat=channel_layouts=mono,asplit[a][b];'
+          + '[a]showwavespic=s=57x256:colors=white@0.5:filter=peak:scale=sqrt:draw=full[pk];'
+          + '[b]showwavespic=s=57x256:colors=white:filter=average:scale=sqrt:draw=full[av];'
+          + '[pk][av]overlay=format=auto,scale=798:256:flags=neighbor,drawgrid=w=14:h=2*ih:t=5:c=black@0:replace=1';
+        execFile(bin, ['-hide_banner', '-loglevel', 'error', '-y', '-i', req.file.path, '-filter_complex', graph, '-frames:v', '1', poster],
           { timeout: 30000 }, (e) => { if (e && e.code !== 'ENOENT') console.warn('[media] waveform failed:', e.message); });
       }).catch(() => { /* never blocks the upload */ });