kibi/f0ckm
1
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

admin/mods can delete attachments

Browse Source
This commit is contained in:
Kibi Kelburton
2026-05-17 11:21:59 +02:00
parent 2c67ccb803
commit d97ee57506
4 changed files with 277 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
public/s/css/f0ckm.css
View File

@@ -7642,6 +7642,48 @@ video.autoplay-gif {
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
background: rgba(0, 0, 0, 0.3);
padding: 6px 8px;
position: relative;
}
.image-embed-wrap {
position: relative;
display: inline-block;
max-width: 100%;
}
.admin-delete-attachment-btn {
position: absolute;
top: 5px;
right: 5px;
background: rgba(0, 0, 0, 0.6);
color: #ff4d4d;
border: none;
border-radius: 3px;
padding: 3px 6px;
cursor: pointer;
font-size: 11px;
font-family: monospace;
z-index: 10;
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease-in-out, background 0.2s;
box-shadow: 0 2px 4px rgba(0,0,0,0.5);
}
.image-embed-wrap:hover .admin-delete-attachment-btn,
.video-embed-wrap:hover .admin-delete-attachment-btn,
.audio-embed-wrap:hover .admin-delete-attachment-btn {
opacity: 1;
pointer-events: auto;
}
.admin-delete-attachment-btn:hover {
background: rgba(0, 0, 0, 0.8);
color: #ff6666;
}
.admin-delete-attachment-btn:active {
transform: scale(0.95);
}
.audio-embed-wrap audio {

106
public/s/js/comments.js
View File

@@ -1541,6 +1541,16 @@ class CommentSystem {
return `<a href="${href}"${titleAttr}${isMention ? ' class="mention"' : ''}>${displayText}</a>${extraSuffix}`;
};
renderer.image = (href, title, text) => {
const src = (typeof href === 'object' && href !== null) ? (href.href || '') : (href || '');
const imgHtml = `<img src="${src}" alt="${text || ''}"${title ? ` title="${title}"` : ''} onerror="this.onerror=null; this.outerHTML='<span class=\\'broken-image-text\\'>[image not found]</span>';">`;
if (this.isAdmin && src && src.startsWith('/c/')) {
const filename = src.substring(3); // Remove '/c/'
return `<span class="image-embed-wrap">${imgHtml}<button class="admin-delete-attachment-btn" data-filename="${filename}" title="Delete attachment">[x]</button></span>`;
}
return imgHtml;
};
// Pre-compile regexes used in the loop
const escapedSiteHost = window.location.host.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
const allowedHosts = [escapedSiteHost];
@@ -1556,7 +1566,7 @@ class CommentSystem {
// "Safe non-whitespace" — matches any \S except the start of an https?:// boundary.
// Prevents concatenated URLs (url1.webpurl2.webp) being consumed as one giant src.
const safeS = `(?:(?!https?:\\/\\/)\\S)`;
const imageRegex = new RegExp(`(?<![\\(\\[])(${domainOrRelative}(?:\\/${safeS}+\\.(?:jpg|jpeg|png|gif|webp)(?:\\?${safeS}+)?))(?![\\)\\]])`, 'gi');
const imageRegex = new RegExp(`(?<![\\(\\[])(${domainOrRelative}(?:\\/${safeS}+\\.(?:jpg|jpeg|png|gif|webp)(?:\\?${safeS}+)?(?:#gif)?))(?![\\)\\]])`, 'gi');
const rawVideoRegex = new RegExp(`(?<![\\(\\[])(${domainOrRelative}(?:\\/[^\\s\\[\\]\\(\\)]*\\.(?:mp4|webm|ogv|mov)(?:\\?[^\\s\\[\\]\\(\\)]+)?(?:#gif)?))`, 'gi');
const rawAudioRegex = new RegExp(`(?<![\\(\\[])(${domainOrRelative}(?:\\/[^\\s\\[\\]\\(\\)]*\\.(?:mp3|ogg|wav|flac|aac|opus|m4a)(?:\\?[^\\s\\[\\]\\(\\)]+)?))`, 'gi');
const mentionRegex = /(?<!\[)@([a-zA-Z0-9_\-\.]+)(?!\])|\[@([^\]]+)\]/g;
@@ -1674,16 +1684,26 @@ class CommentSystem {
md = md.replace(videoEmbedRegex, (match, url) => {
const isConvertedGif = url.endsWith('#gif');
const cleanUrl = url.replace(/#gif$/, '');
if (isConvertedGif) {
return `<span class="video-embed-wrap"><video src="${cleanUrl}" class="autoplay-gif" loop muted playsinline preload="auto"></video></span>`;
let deleteBtn = '';
if (this.isAdmin && cleanUrl.startsWith('/c/')) {
const filename = cleanUrl.substring(3);
deleteBtn = `<button class="admin-delete-attachment-btn" data-filename="${filename}" title="Delete attachment">[del attachment]</button>`;
}
return `<span class="video-embed-wrap"><video src="${cleanUrl}" controls loop muted playsinline preload="metadata"></video></span>`;
if (isConvertedGif) {
return `<span class="video-embed-wrap"><video src="${cleanUrl}" class="autoplay-gif" loop muted playsinline preload="auto"></video>${deleteBtn}</span>`;
}
return `<span class="video-embed-wrap"><video src="${cleanUrl}" controls loop muted playsinline preload="metadata"></video>${deleteBtn}</span>`;
});
// Audio embed: replace anchor links pointing to audio files from allowed hosters with an audio player
const audioEmbedRegex = new RegExp(`<a\\s[^>]*href="(${mediaDomainOrRelative}(?:\\/[^\\s\\[\\]\\(\\)]+\\.(?:mp3|ogg|wav|flac|aac|opus|m4a)(?:\\?[^\\s\\[\\]\\(\\)]+)?))"[^>]*>([\\s\\S]*?)<\\/a>`, 'gi');
md = md.replace(audioEmbedRegex, (match, url) => {
return `<span class="audio-embed-wrap"><audio src="${url}" controls preload="metadata"></audio></span>`;
let deleteBtn = '';
if (this.isAdmin && url.startsWith('/c/')) {
const filename = url.substring(3);
deleteBtn = `<button class="admin-delete-attachment-btn" data-filename="${filename}" title="Delete attachment">[del attachment]</button>`;
}
return `<span class="audio-embed-wrap"><audio src="${url}" controls preload="metadata"></audio>${deleteBtn}</span>`;
});
// Handle spoilers [spoiler]text[/spoiler] (supports nesting)
@@ -1749,7 +1769,7 @@ class CommentSystem {
v.autoplay = true;
v.muted = true;
v.play().catch(() => {
v.addEventListener('canplay', () => v.play().catch(() => {}), { once: true });
v.addEventListener('canplay', () => v.play().catch(() => { }), { once: true });
});
});
}
@@ -1887,7 +1907,7 @@ class CommentSystem {
<a href="#c${comment.id}" class="comment-time timeago" title="${fullDate}" data-id="${comment.id}" data-username="${comment.username}" data-display="${this.escapeHtml(comment.display_name || '')}">${timeAgo}</a>
</div>
<div class="comment-content" data-raw="${this.escapeHtml(comment.content)}">${content}</div>
${this.renderCommentAttachments(comment.files)}
${this.renderCommentAttachments(comment.files, comment.content)}
<div class="comment-footer">
<div class="comment-footer-right">
<div class="comment-actions">
@@ -1931,10 +1951,11 @@ class CommentSystem {
return div.innerHTML;
}
renderCommentAttachments(files) {
renderCommentAttachments(files, content = '') {
if (!files || files.length === 0) return '';
const items = files.map(f => {
const url = `/c/${f.dest}`;
if (content.includes(url)) return ''; // Skip if already rendered in content
if (f.mime.startsWith('image/')) {
return `<a href="${url}" target="_blank" class="cf-attachment cf-image"><img src="${url}" alt="${this.escapeHtml(f.original_filename || 'image')}" loading="lazy"></a>`;
} else if (f.mime.startsWith('video/')) {
@@ -2427,15 +2448,64 @@ class CommentSystem {
body: params
});
const json = await res.json();
if (json.success) {
this.loadComments();
} else {
if (json.success) {
const commentEl = document.getElementById(`c${id}`);
if (commentEl) {
commentEl.classList.add('deleted');
const contentEl = commentEl.querySelector('.comment-content');
if (contentEl) {
contentEl.innerHTML = '<span class="deleted-msg">[deleted]</span>';
}
const actionsEl = commentEl.querySelector('.comment-actions');
if (actionsEl) {
actionsEl.innerHTML = ''; // Remove reply/quote/admin buttons
}
// Remove attachments if present
const attachmentsEl = commentEl.querySelector('.comment-attachments, .media-pills'); // Try common classes
if (attachmentsEl) attachmentsEl.remove();
} else {
this.loadComments();
}
} else {
throw new Error(json.message || 'Failed to delete');
}
}, { allowEmpty: window.f0ckSession?.is_admin });
return;
}
// Admin Delete Attachment
const adminDelAttachBtn = target.closest('.admin-delete-attachment-btn');
if (adminDelAttachBtn) {
const filename = adminDelAttachBtn.dataset.filename;
if (filename) {
if (confirm('Are you sure you want to delete this attachment?')) {
const res = await fetch('/api/comments/attachment/delete', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
'X-CSRF-Token': window.f0ckSession?.csrf_token
},
body: `filename=${encodeURIComponent(filename)}`
});
const json = await res.json();
if (json.success) {
const wrapper = adminDelAttachBtn.closest('.image-embed-wrap') || adminDelAttachBtn.closest('.video-embed-wrap') || adminDelAttachBtn.closest('.audio-embed-wrap');
if (wrapper) {
const span = document.createElement('span');
span.className = 'attachment-removed-text';
span.textContent = '[attachment removed]';
wrapper.parentNode.replaceChild(span, wrapper);
} else {
this.loadComments();
}
} else {
alert('Failed to delete attachment: ' + (json.message || 'Error'));
}
}
}
return;
}
// Admin Pin
const adminPinBtn = target.closest('.admin-pin-btn');
if (adminPinBtn) {
@@ -2655,6 +2725,20 @@ class CommentSystem {
if (parentId) params.append('parent_id', parentId);
params.append('content', text);
if (videoTime !== null) params.append('video_time', videoTime.toFixed(3));
// Collect file IDs from upload previews
const fileIds = [];
const previewArea = wrap.querySelector('.comment-file-preview');
if (previewArea) {
previewArea.querySelectorAll('.cf-preview-item').forEach(item => {
if (item.dataset.fileId) {
fileIds.push(item.dataset.fileId);
}
});
}
if (fileIds.length > 0) {
params.append('file_ids', fileIds.join(','));
}
const res = await fetch('/api/comments', {
method: 'POST',

4
src/comment_upload_handler.mjs
View File

@@ -252,7 +252,8 @@ export const handleCommentUpload = async (req, res) => {
try {
await queue.spawn('magick', [tmpPath, '-coalesce',
'-resize', `${COMMENT_IMG_MAX_DIM}x${COMMENT_IMG_MAX_DIM}>`,
'-quality', '80', webpTmpPath]);
'-quality', '40', '+repage',
webpTmpPath]);
const webpStat = await fs.stat(webpTmpPath);
if (webpStat.size < gifSize) {
await fs.unlink(tmpPath).catch(() => { });
@@ -260,6 +261,7 @@ export const handleCommentUpload = async (req, res) => {
actualMime = 'image/webp';
ext = 'webp';
converted = true;
convertedFromGif = true;
console.log(`[COMMENT_UPLOAD] GIF → WebP (${(gifSize / 1024 / 1024).toFixed(1)}MB → ${(webpStat.size / 1024 / 1024).toFixed(1)}MB): ${file.filename}`);
} else {
console.log(`[COMMENT_UPLOAD] WebP larger than GIF, keeping original: ${file.filename}`);

137
src/inc/routes/comments.mjs
View File

@@ -3,6 +3,8 @@ import f0cklib from "../routeinc/f0cklib.mjs";
import cfg from "../config.mjs";
import lib from "../lib.mjs";
import audit from "../audit.mjs";
import { promises as fs } from "fs";
import path from "path";
export default (router, tpl) => {
@@ -529,6 +531,37 @@ export default (router, tpl) => {
old_content: comment[0].content
});
// Handle attachments cleanup
const files = await db`SELECT id, dest, checksum FROM comment_files WHERE comment_id = ${commentId}`;
for (const f of files) {
const otherRefs = await db`SELECT id FROM comment_files WHERE checksum = ${f.checksum} AND id != ${f.id}`;
const textRefs = await db`SELECT id FROM comments WHERE content LIKE ${'%' + f.dest + '%'} AND id != ${commentId}`;
const hasRefs = otherRefs.length > 0 || textRefs.length > 0;
const filePath = path.join(cfg.paths.c, f.dest);
const thumbPath = path.join(cfg.paths.t, `cf_${f.dest.split('.')[0]}.webp`);
if (!hasRefs) {
// Safe to delete from disk (last reference)
await fs.unlink(filePath).catch(() => {});
await fs.unlink(thumbPath).catch(() => {});
} else {
// There are other references. Only delete if it's a symlink AND not referenced by text!
try {
const stats = await fs.lstat(filePath);
if (stats.isSymbolicLink() && textRefs.length === 0) {
await fs.unlink(filePath).catch(() => {});
await fs.unlink(thumbPath).catch(() => {});
}
} catch (e) {
console.error(`[DELETE_COMMENT] Failed to check stats for ${f.dest}:`, e.message);
}
}
// Delete record from DB
await db`DELETE FROM comment_files WHERE id = ${f.id}`;
}
await db`UPDATE comments SET is_deleted = true, content = '[deleted]' WHERE id = ${commentId}`;
// Notify for live update
@@ -547,6 +580,110 @@ export default (router, tpl) => {
}
});
// Delete comment attachment (admin/mod only)
router.post('/api/comments/attachment/delete', async (req, res) => {
if (!req.session) return res.reply({ code: 401, body: JSON.stringify({ success: false }) });
if (!req.session.admin && !req.session.is_moderator) return res.reply({ code: 403, body: JSON.stringify({ success: false, message: "Forbidden" }) });
const body = req.post || {};
const filename = body.filename;
if (!filename) {
return res.reply({ body: JSON.stringify({ success: false, message: "Missing filename" }) });
}
try {
const cleanFilename = filename.split('#')[0];
const file = await db`SELECT id, comment_id, dest FROM comment_files WHERE dest = ${cleanFilename}`;
if (!file.length) return res.reply({ code: 404, body: JSON.stringify({ success: false, message: "Attachment not found" }) });
let commentId = file[0].comment_id;
let comment;
if (!commentId) {
// Try to find the comment by content search if not linked
const commentsFound = await db`SELECT id, content, item_id FROM comments WHERE content LIKE ${'%' + cleanFilename + '%'}`;
if (commentsFound.length > 0) {
commentId = commentsFound[0].id;
comment = commentsFound;
}
} else {
comment = await db`SELECT id, content, item_id FROM comments WHERE id = ${commentId}`;
}
if (!commentId || !comment.length) {
// File uploaded but not linked and not found in any comment content
await db`DELETE FROM comment_files WHERE id = ${file[0].id}`;
const filePath = path.join(cfg.paths.c, file[0].dest);
await fs.unlink(filePath).catch(() => {});
return res.reply({ body: JSON.stringify({ success: true, message: "Orphaned attachment deleted" }) });
}
const escapedFilename = cleanFilename.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
// Find ALL comments containing this filename and update them
const commentsToUpdate = await db`SELECT id, content FROM comments WHERE content LIKE ${'%' + cleanFilename + '%'}`;
let finalContent = comment[0].content;
for (const c of commentsToUpdate) {
const originalContent = c.content;
const domainRegex = `(?:https?:\\/\\/[^\\/\\s]+)?`;
const updatedContent = originalContent
.replace(new RegExp(`!?\\[[^\\]]*\\]\\(${domainRegex}/c/${escapedFilename}(?:#gif)?\\)`, 'g'), '[attachment removed]')
.replace(new RegExp(`${domainRegex}/c/${escapedFilename}(?:#gif)?`, 'g'), '[attachment removed]');
if (updatedContent !== originalContent) {
await db`UPDATE comments SET content = ${updatedContent}, updated_at = NOW() WHERE id = ${c.id}`;
if (c.id === commentId) {
finalContent = updatedContent;
}
// Notify for live update for each updated comment
db.notify('comments', JSON.stringify({
type: 'edit',
comment_id: c.id,
content: updatedContent
}));
}
}
// Delete file record
await db`DELETE FROM comment_files WHERE id = ${file[0].id}`;
// Delete file from disk
const filePath = path.join(cfg.paths.c, file[0].dest);
await fs.unlink(filePath).catch(() => {});
// Also delete thumbnail if exists
const thumbPath = path.join(cfg.paths.t, `cf_${filename.split('.')[0]}.webp`);
await fs.unlink(thumbPath).catch(() => {});
// Log in audit log
await audit.log(req.session.id, 'delete_attachment', 'comment', commentId, {
filename: filename,
old_content: comment[0].content,
new_content: finalContent
});
// Notify for live update
db.notify('comments', JSON.stringify({
type: 'edit',
item_id: comment[0].item_id,
comment_id: commentId,
content: finalContent
}));
return res.reply({
headers: { 'Content-Type': 'application/json; charset=utf-8' },
body: JSON.stringify({ success: true })
});
} catch (e) {
console.error(e);
return res.reply({ code: 500, body: JSON.stringify({ success: false }) });
}
});
// Edit comment (admin/mod only)
router.post(/\/api\/comments\/(?<id>\d+)\/edit/, async (req, res) => {
if (!req.session) return res.reply({ code: 401, body: JSON.stringify({ success: false }) });