Changeset 97bcf7e in Klonkt for src/routes/admin-media.js

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/routes/admin-media.js (modified) (2 diffs)

src/routes/admin-media.js

@@ -24 +24 @@
 
 const IMG_EXT = /\.(jpe?g|png|webp|gif|avif)$/i;
+const VIDEO_EXT = /\.(mp4|webm|m4v|mov)$/i;
+// C2S uploads (Shaer's composer and the help buoy) land here; the videos among
+// them are what the Video tab shows.
+const REPLY_MEDIA_DIR = path.resolve(
+  process.env.REPLY_MEDIA_PATH || path.join(__dirname, '..', '..', 'storage', 'media', 'reply-media')
+);
 const isSibling = (f) => /-v\.(mp4|jpg)$/i.test(f); // an animated cover's video/poster sibling
 
@@ -90 +96 @@
 
 // Delete one image + its loop-MP4 / poster siblings. Basename-only + within-dir → no traversal.
+// ── The Video tab (Robins opdracht, 30-7) ─────────────────────────────────
+// Videos live in reply-media (C2S uploads: Shaer's composer, the help buoy).
+// Usage is a content/attachment reference from a post, exactly like images.
+
+function videoEntries(siteId) {
+  const posts = db.prepare('SELECT id, content, c2s_attachments FROM posts WHERE site_id = ?').all(siteId);
+  const used = new Map();
+  const add = (fn, id) => { if (!fn) return; if (!used.has(fn)) used.set(fn, new Set()); used.get(fn).add(id); };
+  for (const p of posts) {
+    for (const m of String(p.content || '').matchAll(/\/media\/reply-media\/([^/?#"'\s)]+)/g)) add(m[1], p.id);
+    try { for (const a of JSON.parse(p.c2s_attachments || '[]')) { const m = String(a.url || '').match(/\/media\/reply-media\/([^/?#"'\s)]+)/); if (m) add(m[1], p.id); } } catch { /* malformed never blocks the list */ }
+  }
+  let all = [];
+  try { all = fs.readdirSync(REPLY_MEDIA_DIR).filter(f => !f.startsWith('.')); } catch { /* dir may not exist yet */ }
+  const vstat = (name, key) => { try { const st = fs.statSync(path.join(REPLY_MEDIA_DIR, name)); return key === 'size' ? st.size : st.mtimeMs; } catch { return 0; } };
+  return all
+    .filter(f => VIDEO_EXT.test(f))
+    .map(f => ({
+      file: f,
+      url: `/media/reply-media/${f}`,
+      kb: Math.round(vstat(f, 'size') / 1024),
+      usedCount: (used.get(f) || new Set()).size,
+      _mtime: vstat(f, 'mtime'),
+    }))
+    .sort((a, b) => b._mtime - a._mtime);
+}
+
+router.get('/videos', requireGod, (req, res) => {
+  const site = res.locals.site;
+  if (!site) return res.status(404).send('Site required');
+  renderPage(req, res, 'pages/admin-videos', {
+    pageTitleKey: 'admin.t_media',
+    bodyClass: 'on-admin',
+    items: videoEntries(site.id),
+    audioOn: audioEnabled(),
+    success: req.query.success || null,
+  });
+});
+
+// Delete one video. Basename-only + within-dir, and only when no post uses it:
+// the same guardrails the image delete has.
+router.post('/videos/delete', requireGod, (req, res) => {
+  const site = res.locals.site;
+  if (!site) return res.status(404).json({ error: 'site' });
+  const file = path.basename(String(req.body?.file || ''));
+  if (!file || !VIDEO_EXT.test(file)) return res.status(400).json({ error: 'bad_file' });
+  const entry = videoEntries(site.id).find(e => e.file === file);
+  if (!entry) return res.status(404).json({ error: 'not_found' });
+  if (entry.usedCount) return res.status(409).json({ error: 'in_use' });
+  try { fs.unlinkSync(path.join(REPLY_MEDIA_DIR, file)); } catch { /* already gone is gone */ }
+  res.json({ ok: true });
+});
+
 router.post('/delete', requireGod, (req, res) => {
   if (!res.locals.site) return res.status(404).json({ ok: false, error: 'Site required' });