Changeset feced2c in Klonkt for src/routes

Timestamp:

07/19/2026 05:25:26 PM (7 weeks ago)

Author:

Robin <roboburr@…>

Branches:

main

Children:

5190152

Parents:

33e1dbd

git-author:

Robin <roboburr@…> (07/19/2026 05:24:58 PM)

git-committer:

Robin <roboburr@…> (07/19/2026 05:25:26 PM)

Message:

Feature: media in replies — rich replies phase 2 (klonkt-demo-c7f)

Drop, paste or pick images/audio/video in the reply editor; they upload, show
as removable chips, travel as AS2 attachments on the federated Note, and render
in the thread.

• POST /posts/upload-reply-media (requireSiteManager): image/audio/video by extension AND mimetype, stored as-is under /media/reply-media/ (no transcode; a reply attachment is not a track), 32MB cap, returns {url, mediaType, name}.
• Editor: paperclip button + hidden file input (the mobile path), paste-files and drag/drop handlers, busy/error chips, image thumbnails, max 4, hidden attachments JSON field. Media-only submit allowed (text no longer required when something is attached).
• deliverReply({attachments}): re-validates server-side — own /media/ paths only (the upload route is the sole producer, remote URLs rejected), image|audio|video mimetypes, capped at 4; stored as JSON on ap_outbox (additive column). Dedup guard now includes attachments so two media-only replies to the same parent are distinct from each other but double-submits still dedup.
• buildNote reply branch: attachment array with Image/Audio/Video types and absolute URLs. getInteractions passes media through; fedi-node renders it (img/audio/video) for visitors too, loading the stylesheet when the owner-only editor is not on the page.

3 new tests (foreign-URL and type rejection, typed absolute Note attachments,
media-only allowed, only-invalid rejected); 91 green. Browser-verified end to
end: real upload via the endpoint, paste-event -> chip with thumbnail ->
submit -> ap_outbox row with content+language+attachments -> media rendered in
the thread -> /ap/notes/<id> serves the typed absolute attachment.

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

File:

• src/routes/posts.js (modified) (4 diffs)

src/routes/posts.js

@@ -32 +32 @@
 const MAX_IMAGE_BYTES = 10 * 1024 * 1024;
 
+// Rich replies: media dropped/pasted into the reply editor. Images, audio and
+// video, stored as-is (no transcode; a reply attachment is not a track).
+const REPLY_MEDIA_DIR = path.resolve(
+  process.env.REPLY_MEDIA_PATH ||
+  path.join(__dirname, '..', '..', 'storage', 'media', 'reply-media')
+);
+fs.mkdirSync(REPLY_MEDIA_DIR, { recursive: true });
+const ALLOWED_REPLY_MEDIA_EXT = new Set([
+  '.jpg', '.jpeg', '.png', '.webp', '.gif',
+  '.mp3', '.m4a', '.ogg', '.opus', '.flac', '.wav',
+  '.mp4', '.webm', '.mov',
+]);
+const MAX_REPLY_MEDIA_BYTES = 32 * 1024 * 1024;
+const replyMediaUpload = multer({
+  storage: multer.diskStorage({
+    destination: (req, file, cb) => cb(null, REPLY_MEDIA_DIR),
+    filename: (req, file, cb) => cb(null, `${uuid()}${path.extname(file.originalname).toLowerCase()}`),
+  }),
+  limits: { fileSize: MAX_REPLY_MEDIA_BYTES },
+  fileFilter: (req, file, cb) => {
+    const ext = path.extname(file.originalname).toLowerCase();
+    if (!ALLOWED_REPLY_MEDIA_EXT.has(ext)) return cb(new Error('Media must be an image, audio or video file'));
+    cb(null, true);
+  },
+});
+
 const imageStorage = multer.diskStorage({
   destination: (req, file, cb) => cb(null, POST_IMAGES_DIR),
@@ -90 +116 @@
     } catch { /* keep the still image */ }
     res.json({ url, video, size: req.file.size, mime: req.file.mimetype });
+  });
+});
+
+// Rich replies: media for a reply (image/audio/video). Returns { url, mediaType, name }
+// exactly as the editor's attachments JSON wants it; deliverReply re-validates.
+router.post('/posts/upload-reply-media', requireSiteManager, (req, res) => {
+  replyMediaUpload.single('media')(req, res, (err) => {
+    if (err) return res.status(400).json({ error: err.message });
+    if (!req.file) return res.status(400).json({ error: 'No file' });
+    const mime = String(req.file.mimetype || '');
+    if (!/^(image|audio|video)\//.test(mime)) {
+      try { fs.unlinkSync(req.file.path); } catch { /* best effort */ }
+      return res.status(400).json({ error: 'Media must be an image, audio or video file' });
+    }
+    res.json({
+      url: '/media/reply-media/' + req.file.filename,
+      mediaType: mime,
+      name: String(req.file.originalname || '').slice(0, 120),
+    });
   });
 });
@@ -714 +759 @@
   const html = (req.body.content || '').toString();      // rich reply editor HTML (sanitized in deliverReply)
   const language = (req.body.language || '').toString();
-  if (site && uri && (text.trim() || html.trim())) {
+  let attachments = [];
+  try { attachments = JSON.parse(req.body.attachments || '[]'); } catch { /* geen media */ }
+  if (site && uri && (text.trim() || html.trim() || (Array.isArray(attachments) && attachments.length))) {
     // Resolve + deliver in the background so Send responds instantly.
     ActivityPubService.resolveRemoteNote(uri)
-      .then((parent) => parent && ActivityPubService.deliverReply(site, { postId: parent.localPostId || '', postSlug: null, parent, text, html, language }))
+      .then((parent) => parent && ActivityPubService.deliverReply(site, { postId: parent.localPostId || '', postSlug: null, parent, text, html, language, attachments }))
       .catch((e) => console.warn('[AP] remote reply failed:', e.message));
   }
@@ -1260 +1307 @@
   const text = (req.body.text || '').toString();
   const html = (req.body.content || '').toString();      // rich reply editor HTML (sanitized in deliverReply)
-  if (parent && parent.post_id === post.id && (text.trim() || html.trim())) {
+  let attachments = [];
+  try { attachments = JSON.parse(req.body.attachments || '[]'); } catch { /* geen media */ }
+  if (parent && parent.post_id === post.id && (text.trim() || html.trim() || (Array.isArray(attachments) && attachments.length))) {
     try {
       await ActivityPubService.deliverReply(site, {
-        postId: post.id, postSlug: post.slug, parent, text, html,
+        postId: post.id, postSlug: post.slug, parent, text, html, attachments,
         language: (req.body.language || '').toString(),
       });