Changeset 6dd26e5 in Klonkt for src/assets/css/style.css

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@…>

File:

• src/assets/css/style.css (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).