Changeset 97bcf7e in Klonkt for src/assets/css/style.css

Timestamp:

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

Author:

Robin <roboburr@…>

Branches:

main

Children:

7d01696

Parents:

6089c53

Message:

Video op maat in de post, en een Video-tab in Media

Robins opdracht (30-7): videoverwerking beter aanpakken. Een video die vanuit
Shaer op de Klonkt van een ward landt, rendert nu op maat in plaats van te
groot: dezelfde regels als afbeeldingen in de post-tekst, plus een plafond
(70vh/540px) en object-fit zodat een portret-video de kolom niet meer
volduwt. Geldt ook in de Krant en Berichten (tl-content), waar dezelfde
content langskomt. En de video-tag uit de composer krijgt preload=metadata,
dus de browser toont het eerste frame als voorlopige thumbnail.

Nieuw: Beheer -> Media -> Video's. De videos die C2S-uploads binnenbrachten
(Shaers composer, de boei), met bestandsnaam, grootte, gebruiksteller uit
content plus c2s_attachments, kopieer-URL, en verwijderen alleen voor
ongebruikte, met dezelfde basename-en-binnen-de-map-teugels als bij
afbeeldingen.

Echte posterframes (server-side thumbnails) kunnen hier nog niet: er staat
geen ffmpeg op de VPS. Dat wordt een bead, met de aantekening dat Shaer
thumbnails straks native kan maken (AVAssetImageGenerator /
MediaMetadataRetriever), zonder server-hulp.

Changed files:
src/assets/css/style.css

• .post-content video en .tl-content video: maatvoering + plafond

src/services/ActivityPubService.js

• de gevouwen video-tag preloadt zijn metadata

src/routes/admin-media.js

• videoEntries + GET /videos + POST /videos/delete

src/views/partials/media-tabs.ejs

• de Video-tab tussen Afbeeldingen en Audio

src/services/i18n.js

• media_videos/videos_*-strings, NL/EN/DE

New file:
src/views/pages/admin-videos.ejs

• de Video-tab zelf, zelfde snit als de afbeeldingenpagina

remarks: 336 tests groen, server start. Draait nog nergens; beta/demo
bijwerken maakt het zichtbaar.

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

File:

• src/assets/css/style.css (modified) (1 diff)

src/assets/css/style.css

@@ -773 +773 @@
     margin: 1.4em auto;
 }
+
+/* Video in de post-tekst (C2S-uploads uit Shaer): dezelfde maatvoering als
+   afbeeldingen, plus een plafond. Zonder deze regel rendert een <video> op
+   zijn natuurlijke maat en duwt een portret-video de hele kolom vol; met
+   object-fit blijft het beeld heel binnen het kader. Geldt ook voor de
+   Krant/Berichten (tl-content), waar dezelfde content langskomt. */
+.post-content video, .tl-content video {
+    display: block;
+    width: 100%;
+    max-width: 100%;
+    max-height: min(70vh, 540px);
+    height: auto;
+    object-fit: contain;
+    background: #000;
+    border-radius: 6px;
+    margin: 1.4em auto;
+}
+.post-content audio, .tl-content audio { width: 100%; display: block; margin: 1em auto; }
 
 /* Mini-player + bottom-tab clearance: applied to .pcms-main so the footer