Changeset 6dd26e5 in Klonkt

Timestamp:

07/30/2026 11:48:53 AM (6 weeks ago)

Author:

Robin <roboburr@…>

Branches:

main

Children:

1f640ff

Parents:

67f7150

Message:

De audio-tegel opgevrolijkt: golfvorm als thumbnail en een echte titel

Een audiopost uit Shaer was op Klonkt een kale gradient met (untitled)
(Robins schermafdruk, 30-7). Twee dingen tegelijk gefixt.

De thumbnail: de upload-leg tekent bij audio nu een golfvorm met de
gebundelde ffmpeg (showwavespic, wit op transparant) naar
<naam>.poster.png, precies zoals video zijn stilstaand beeld krijgt. Die
golfvorm rijdt mee als data-poster op de audio-tag (voor de tegels), in
c2s_attachments en als AS2-icon op het gefedereerde Audio-attachment. De
tegel toont hem OVER de eigen hue-gradient, dus elke audiopost houdt
zijn kleur en krijgt zijn vorm.

De titel: C2S-posts hebben geen titel, dus elke Shaer-post toonde
(untitled). Tegels en kaarten leiden de titel nu af: eerst de eigen
woorden van de post (afgekapt op 64), anders een vriendelijk typelabel
(muzieknoot audio, pijl video), en pas als er echt niets is (untitled).
Een tegel die zijn beeld al toont forceert geen label meer.

Changed files:
src/routes/activitypub.js

• uploadMedia: audio/* -> showwavespic-golfvorm naar .poster.png (best-effort, zelfde patroon als de videoposter)

src/services/ActivityPubService.js

• c2sCreatePost: posterExt per type (video .jpg, audio .png); de audio-tag krijgt data-poster

src/views/partials/post-tile.ejs

• audio-detectie + golfvorm over de gradient; titelcascade (titel -> tekst -> typelabel)

src/views/partials/post-card.ejs

• zelfde spiegel: golfvorm als cover met eigen accent-gradient, zelfde titelcascade

src/assets/css/style.css

• .grid-tile-wave: contain, padding, transparant op de gradient

test/c2s-compose.test.js

• audio-golfvormketen: data-poster op de tag, poster in de store, icon op het gefedereerde attachment

remarks: bestaande audioposts kregen hun upload voor deze code en hebben
dus nog geen golfvorm-bestand; die tonen nu wel het muzieknoot-label. Een
verse audiopost laat het hele effect zien. ffmpeg-commando en beide
templates hier lokaal gesmoke-test (RGBA-png, render ok), 345 tests
groen.

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

Files:

• src/assets/css/style.css (modified) (1 diff)
• src/routes/activitypub.js (modified) (1 diff)
• src/services/ActivityPubService.js (modified) (2 diffs)
• src/views/partials/post-card.ejs (modified) (6 diffs)
• src/views/partials/post-tile.ejs (modified) (3 diffs)
• test/c2s-compose.test.js (modified) (1 diff)

src/assets/css/style.css

@@ -2421 +2421 @@
 .grid-tile-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; transition: opacity .4s ease; }
 .grid-tile-img.is-loading { opacity: 0; }
+/* Audio tile (Shaer, Robins vraag 30-7): the waveform PNG is white on
+   transparent and floats OVER the tile's own hue gradient, so every audio
+   post keeps its color and gets its shape. Contain + padding leaves the
+   centered title readable. */
+.grid-tile-img.grid-tile-wave {
+    background-color: transparent;
+    object-fit: contain;
+    padding: 26% 10%;
+    opacity: .85;
+}
 /* Cover videos are decorative, not players: let clicks + right-click pass through to the
    tile link so you get the normal link menu (not the browser's <video> menu/controls).

src/routes/activitypub.js

@@ -354 +354 @@
       }).catch(() => { /* never blocks the upload */ });
     }
+    // Audio gets the same courtesy (Robins vraag, 30-7: vrolijk de kale
+    // 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.
+    if (mime.startsWith('audio/')) {
+      Promise.all([import('child_process'), import('ffmpeg-static')]).then(([{ execFile }, ff]) => {
+        const bin = process.env.FFMPEG_PATH || ff.default;
+        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],
+          { timeout: 30000 }, (e) => { if (e && e.code !== 'ENOENT') console.warn('[media] waveform failed:', e.message); });
+      }).catch(() => { /* never blocks the upload */ });
+    }
     res.status(201).json({
       url: '/media/reply-media/' + req.file.filename,

src/services/ActivityPubService.js

@@ -2441 +2441 @@
     .map((a) => {
       const entry = { url: a.url, mediaType: String(a.mediaType), name: String(a.name || '').slice(0, 120) };
-      // A video's poster frame, when the upload leg made one (shaer-zowq):
-      // rides along so the tag, the federated attachment and the apps all
-      // show a still instead of a black box.
-      if (entry.mediaType.startsWith('video/')) {
+      // The poster the upload leg made, when it did: a video's still frame
+      // (shaer-zowq, .poster.jpg) or an audio's waveform (Robins vraag 30-7,
+      // .poster.png). Rides along so the tag, the federated attachment and
+      // the apps all have something to show instead of a bare box.
+      const posterExt = entry.mediaType.startsWith('video/') ? '.poster.jpg'
+        : entry.mediaType.startsWith('audio/') ? '.poster.png' : null;
+      if (posterExt) {
         try {
           const mediaRoot = path.resolve(process.env.MEDIA_PATH || './storage/media');
           const rel = entry.url.replace(/^\/media\//, '');
-          if (fs.existsSync(path.join(mediaRoot, rel + '.poster.jpg'))) entry.poster = entry.url + '.poster.jpg';
+          if (fs.existsSync(path.join(mediaRoot, rel + posterExt))) entry.poster = entry.url + posterExt;
         } catch { /* no poster is fine */ }
       }
@@ -2461 +2464 @@
   const mediaHtml = media.map((a) => {
     if (a.mediaType.startsWith('image/')) return `<p><img src="${a.url}" alt="${esc(a.name)}"></p>`;
-    if (a.mediaType.startsWith('audio/')) return `<p><audio controls preload="metadata" src="${a.url}"></audio></p>`;
+    // data-poster: <audio> has no poster attribute, but the tile derivation
+    // reads this one to show the waveform (post-tile/post-card).
+    if (a.mediaType.startsWith('audio/')) return `<p><audio controls preload="metadata"${a.poster ? ` data-poster="${a.poster}"` : ''} src="${a.url}"></audio></p>`;
     const poster = a.poster ? ` poster="${a.poster}"` : '';
     return `<p><video controls playsinline preload="metadata"${poster} src="${a.url}"></video></p>`;

src/views/partials/post-card.ejs

@@ -19 +19 @@
 // Content-derived fallback (see post-tile.ejs): a C2S post's media lives in
 // its content, and the card fronts it from there.
-let _cVideo = null, _cPoster = null, _cImg = null;
+let _cVideo = null, _cPoster = null, _cImg = null, _cAudio = false, _cWave = null;
 if (!_realCover && post.content) {
   const vm = String(post.content).match(/<video[^>]*\ssrc="([^"]+)"[^>]*>/i);
   if (vm) { _cVideo = vm[1]; const pm = vm[0].match(/poster="([^"]+)"/i); if (pm) _cPoster = pm[1]; }
-  else { const im = String(post.content).match(/<img[^>]*\ssrc="([^"]+)"/i); if (im) _cImg = im[1]; }
-}
-const _hasCover  = _realCover || !!_cVideo || !!_cImg;
+  else {
+    const im = String(post.content).match(/<img[^>]*\ssrc="([^"]+)"/i);
+    if (im) _cImg = im[1];
+    else {
+      // An audio post (Robins vraag, 30-7): the upload leg drew a waveform
+      // (data-poster on the tag); the card fronts it like a cover.
+      const am = String(post.content).match(/<audio[^>]*>/i);
+      if (am) { _cAudio = true; const wm = am[0].match(/data-poster="([^"]+)"/i); if (wm) _cWave = wm[1]; }
+    }
+  }
+}
+const _hasCover  = _realCover || !!_cVideo || !!_cImg || !!_cWave;
+// A C2S post has no title: fall back to the post's own words, then to a
+// friendly type label instead of "(zonder titel)".
+let _title = post.title || '';
+if (!_title && post.content) {
+  const _txt = String(post.content).replace(/<[^>]*>/g, ' ').replace(/&[a-zA-Z#0-9]+;/g, ' ').replace(/\s+/g, ' ').trim();
+  if (_txt) _title = _txt.length > 64 ? _txt.slice(0, 63).replace(/\s+\S*$/, '') + '…' : _txt;
+}
+if (!_title) _title = _cAudio ? '♪ audio' : _cVideo ? '▶ video' : '(zonder titel)';
 const _typeLabel = (post.type && post.type !== 'overig' && post.type !== 'post') ? post.type : '';
 const _isPinned  = !!post.pinned;
@@ -57 +74 @@
     <a class="post-list-cover<%= post.nsfw ? ' nsfw-media' : '' %>" href="<%= _href %>"
        <% if (_ext) { %>target="_blank" rel="noopener"<% } else { %>hx-get="<%= _href %>?partial=1" hx-target="#pcms-main" hx-swap="innerHTML" hx-push-url="<%= _href %>" hx-indicator="#pcms-loading"<% } %>
-       aria-label="<%= post.title || '(zonder titel)' %>" tabindex="-1">
+       aria-label="<%= _title %>" tabindex="-1">
       <% if (post.cover_image_url) { %><img src="<%= thumb(post.cover_image_url, 480) %>"
            srcset="<%= thumb(post.cover_image_url, 320) %> 320w, <%= thumb(post.cover_image_url, 640) %> 640w, <%= thumb(post.cover_image_url, 1280) %> 1280w"
            sizes="(min-width: 768px) 120px, 100vw"
            alt="" loading="lazy" decoding="async"<% if (post.cover_video_url) { %> data-ios-mp4="<%= post.cover_video_url %>"<% } %>>
-      <% } else if (post.cover_video_url) { %><video src="<%= post.cover_video_url %>" poster="<%= thumb(post.cover_video_url, 480) %>" autoplay loop muted playsinline></video><% } else if (_cVideo) { %><video src="<%= _cVideo %>"<% if (_cPoster) { %> poster="<%= _cPoster %>"<% } %> autoplay loop muted playsinline preload="metadata"></video><% } else if (_cImg) { %><img src="<%= _cImg %>" alt="" loading="lazy" decoding="async"><% } %>
+      <% } else if (post.cover_video_url) { %><video src="<%= post.cover_video_url %>" poster="<%= thumb(post.cover_video_url, 480) %>" autoplay loop muted playsinline></video><% } else if (_cVideo) { %><video src="<%= _cVideo %>"<% if (_cPoster) { %> poster="<%= _cPoster %>"<% } %> autoplay loop muted playsinline preload="metadata"></video><% } else if (_cImg) { %><img src="<%= _cImg %>" alt="" loading="lazy" decoding="async"><% } else if (_cWave) { %><img class="post-cover-wave" src="<%= _cWave %>" alt="" loading="lazy" decoding="async"><% } %>
       <% if (post.nsfw) { %><span class="nsfw-veil"><%- include('nsfw-veil', { cw: post.content_warning }) %></span><% } %>
     </a>
@@ -68 +85 @@
     <a class="post-list-cover nsfw-media" href="<%= _href %>"
        <% if (_ext) { %>target="_blank" rel="noopener"<% } else { %>hx-get="<%= _href %>?partial=1" hx-target="#pcms-main" hx-swap="innerHTML" hx-push-url="<%= _href %>" hx-indicator="#pcms-loading"<% } %>
-       aria-label="<%= post.title || '(zonder titel)' %>" tabindex="-1">
+       aria-label="<%= _title %>" tabindex="-1">
       <span class="nsfw-veil"><%- include('nsfw-veil', { cw: post.content_warning }) %></span>
     </a>
@@ -89 +106 @@
       <a href="<%= _href %>"
          <% if (_ext) { %>target="_blank" rel="noopener"<% } else { %>hx-get="<%= _href %>?partial=1" hx-target="#pcms-main" hx-swap="innerHTML" hx-push-url="<%= _href %>" hx-indicator="#pcms-loading"<% } %>>
-        <%= post.title || '(zonder titel)' %>
+        <%= _title %>
       </a>
     </h3>
@@ -189 +206 @@
   }
 
+  /* Audio cover (Shaer): white-on-transparent waveform on its own accent
+     gradient, contained so the shape reads at 120px and full-bleed alike. */
+  /* (see also .grid-tile-wave in style.css for the grid tiles) */
   /* Pinned indicator */
   .post-list-item.is-pinned .post-list-title a {
@@ -233 +253 @@
 
 /* ============================================================
+   AUDIO COVER (shared) — Shaer audio post (Robins vraag, 30-7):
+   the waveform PNG is white on transparent; give it its own accent
+   gradient and contain it so the shape reads at 120px and full-bleed.
+   ============================================================ */
+.post-list-cover .post-cover-wave {
+  width: 100%; height: 100%;
+  object-fit: contain !important;
+  padding: 14% 8%;
+  background-image: linear-gradient(135deg,
+      color-mix(in srgb, var(--accent, #888) 26%, var(--paper-2, var(--paper))) 0%,
+      color-mix(in srgb, var(--accent, #888) 8%, var(--paper-2, var(--paper))) 100%);
+}
+
+/* ============================================================
    PIN + DRAFT INDICATORS (shared)
    ============================================================ */

src/views/partials/post-tile.ejs

@@ -11 +11 @@
 // content instead, like the Cirkel card: first <video> (with its poster) or
 // first <img>.
-let _cVideo = null, _cPoster = null, _cImg = null;
+let _cVideo = null, _cPoster = null, _cImg = null, _cAudio = false, _cWave = null;
 if (!_hasCover && post.content) {
   const vm = String(post.content).match(/<video[^>]*\ssrc="([^"]+)"[^>]*>/i);
   if (vm) { _cVideo = vm[1]; const pm = vm[0].match(/poster="([^"]+)"/i); if (pm) _cPoster = pm[1]; }
-  else { const im = String(post.content).match(/<img[^>]*\ssrc="([^"]+)"/i); if (im) _cImg = im[1]; }
+  else {
+    const im = String(post.content).match(/<img[^>]*\ssrc="([^"]+)"/i);
+    if (im) _cImg = im[1];
+    else {
+      // An audio post (Robins vraag, 30-7): the waveform the upload leg drew
+      // (data-poster) goes OVER the gradient, so the tile keeps its own hue.
+      const am = String(post.content).match(/<audio[^>]*>/i);
+      if (am) { _cAudio = true; const wm = am[0].match(/data-poster="([^"]+)"/i); if (wm) _cWave = wm[1]; }
+    }
+  }
 }
-const _showCover = _hasCover || !!_cVideo || !!_cImg;
+const _showCover = _hasCover || !!_cVideo || !!_cImg;   // the wave keeps the gradient
+// A C2S post has no title: fall back to the post's own words, and for a
+// media-only post to a friendly type label instead of "(untitled)". A tile
+// that already shows its picture needs no forced label at all.
+let _title = post.title || '';
+if (!_title && post.content) {
+  const _txt = String(post.content).replace(/<[^>]*>/g, ' ').replace(/&[a-zA-Z#0-9]+;/g, ' ').replace(/\s+/g, ' ').trim();
+  if (_txt) _title = _txt.length > 64 ? _txt.slice(0, 63).replace(/\s+\S*$/, '') + '…' : _txt;
+}
+if (!_title) _title = _cAudio ? '♪ audio' : (_cVideo || _cImg) ? '' : '(untitled)';
 const _typeLabel = (post.type && post.type !== 'post') ? post.type : '';
 const _src = post.source_name || '';   // bron-site (cirkel-feed: van welke site komt deze post)
@@ -30 +48 @@
    <% if (_ext) { %>target="_blank" rel="noopener"<% } else { %>hx-get="<%= _href %>?partial=1" hx-target="#pcms-main" hx-swap="innerHTML" hx-push-url="<%= _href %>" hx-indicator="#pcms-loading"<% } %>>
 
-  <% if (post.cover_image_url) { %><img class="grid-tile-img" src="<%= thumb(post.cover_image_url, 480) %>" alt="" loading="lazy" decoding="async"<% if (post.cover_video_url) { %> data-ios-mp4="<%= post.cover_video_url %>"<% } %>><% } else if (post.cover_video_url) { %><video class="grid-tile-img" src="<%= post.cover_video_url %>" poster="<%= thumb(post.cover_video_url, 480) %>" autoplay loop muted playsinline></video><% } else if (_cVideo) { %><video class="grid-tile-img" src="<%= _cVideo %>"<% if (_cPoster) { %> poster="<%= _cPoster %>"<% } %> autoplay loop muted playsinline preload="metadata"></video><% } else if (_cImg) { %><img class="grid-tile-img" src="<%= _cImg %>" alt="" loading="lazy" decoding="async"><% } %>
+  <% if (post.cover_image_url) { %><img class="grid-tile-img" src="<%= thumb(post.cover_image_url, 480) %>" alt="" loading="lazy" decoding="async"<% if (post.cover_video_url) { %> data-ios-mp4="<%= post.cover_video_url %>"<% } %>><% } else if (post.cover_video_url) { %><video class="grid-tile-img" src="<%= post.cover_video_url %>" poster="<%= thumb(post.cover_video_url, 480) %>" autoplay loop muted playsinline></video><% } else if (_cVideo) { %><video class="grid-tile-img" src="<%= _cVideo %>"<% if (_cPoster) { %> poster="<%= _cPoster %>"<% } %> autoplay loop muted playsinline preload="metadata"></video><% } else if (_cImg) { %><img class="grid-tile-img" src="<%= _cImg %>" alt="" loading="lazy" decoding="async"><% } else if (_cWave) { %><img class="grid-tile-img grid-tile-wave" src="<%= _cWave %>" alt="" loading="lazy" decoding="async"><% } %>
 
   <% if (_typeLabel) { %>
@@ -43 +61 @@
   <% if (_hasCover) { %>
     <div class="grid-tile-overlay">
-      <strong><%= post.title || '(untitled)' %></strong>
+      <strong><%= _title %></strong>
       <% if (_src) { %><span class="grid-tile-overlay-src">van <%= _src %></span><% } %>
     </div>
   <% } else { %>
-    <span class="grid-tile-title"><%= post.title || '(untitled)' %></span>
+    <span class="grid-tile-title"><%= _title %></span>
     <% if (_src) { %><span class="grid-tile-gradient-src">van <%= _src %></span><% } %>
   <% } %>

test/c2s-compose.test.js

@@ -102 +102 @@
 });
 
+test("an audio note's waveform rides the tag, the store and the federated attachment", async () => {
+  // Same courtesy as the video poster (Robins vraag, 30-7: de kale
+  // audio-tegel): the upload leg draws <name>.poster.png (showwavespic).
+  // From there it must reach the data-poster on the folded tag (the tiles
+  // read it), the stored entry, and the AS2 icon on the federated Audio.
+  const os = await import('os');
+  const fsm = await import('fs');
+  const pathm = await import('path');
+  const root = fsm.mkdtempSync(pathm.join(os.tmpdir(), 'klonkt-media-'));
+  fsm.mkdirSync(pathm.join(root, 'reply-media'), { recursive: true });
+  fsm.writeFileSync(pathm.join(root, 'reply-media', 'lied.m4a.poster.png'), 'x');
+  const prev = process.env.MEDIA_PATH;
+  process.env.MEDIA_PATH = root;
+  try {
+    const r = await AP.ingestOutboxActivity(site, user, {
+      type: 'Create',
+      object: {
+        type: 'Note', content: '',
+        to: ['https://test.example/ap/users/kid/followers'],
+        attachment: [{ type: 'Audio', url: '/media/reply-media/lied.m4a', mediaType: 'audio/mp4' }],
+      },
+    });
+    assert.equal(r.status, 201);
+    const post = db.prepare('SELECT * FROM posts WHERE id = ?').get(r.id);
+    assert.match(post.content, /data-poster="\/media\/reply-media\/lied\.m4a\.poster\.png"/, 'the tag carries the waveform for the tiles');
+    const note = AP.buildNote('https://test.example', site, post);
+    const aud = (note.attachment || []).find((a) => a.url.endsWith('lied.m4a'));
+    assert.ok(aud && aud.type === 'Audio');
+    assert.equal(aud.icon && aud.icon.url, 'https://test.example/media/reply-media/lied.m4a.poster.png',
+      'the waveform federates as the attachment icon');
+  } finally {
+    if (prev === undefined) delete process.env.MEDIA_PATH; else process.env.MEDIA_PATH = prev;
+  }
+});
+
 test('a video without a poster simply has none: no guessed icon', async () => {
   const r = await AP.ingestOutboxActivity(site, user, {