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

large gifs are converted to vp9 instead of webp

Browse Source
This commit is contained in:
Kibi Kelburton
2026-05-17 10:28:19 +02:00
parent 734685b734
commit 838883bd6d
4 changed files with 151 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -7432,6 +7432,10 @@ input#s_avatar {
/* Comments System */
/* Primary definition moved up to line 1082 to avoid overrides */
video.autoplay-gif {
background: rgba(0, 0, 0, 0) !important;
}
#comments-container {
color: var(--white);
font-family: var(--font);
@@ -7615,6 +7619,11 @@ input#s_avatar {
background: #000;
}
.video-embed-wrap:has(.autoplay-gif) {
background: transparent;
box-shadow: none;
}
.video-embed-wrap video {
width: 100%;
display: block;

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

@@ -504,6 +504,7 @@ class CommentSystem {
contentEl.dataset.raw = this.escapeHtml(fullContent);
contentEl.innerHTML = this.renderCommentContent(fullContent, commentId);
CommentSystem.autoplayConvertedGifs(contentEl);
} catch (e) {
_f0ckDebug('[CommentSystem] _patchLiveCommentContent failed:', e);
}
@@ -527,6 +528,7 @@ class CommentSystem {
const contentEl = el.querySelector('.comment-content');
if (contentEl) {
contentEl.innerHTML = this.renderCommentContent(data.content, data.comment_id);
CommentSystem.autoplayConvertedGifs(contentEl);
// Flash effect to draw attention
el.classList.remove('new-item-fade');
@@ -1196,6 +1198,7 @@ class CommentSystem {
this.container.innerHTML = html;
this.restoreMediaState(mediaState);
this.syncSubscribeButton(isSubscribed);
CommentSystem.autoplayConvertedGifs(this.container);
// Attach media load listeners to re-stabilize scroll if a hash is active.
// Only during the initial anchor scroll — never on subsequent renders (tab re-focus,
@@ -1307,6 +1310,7 @@ class CommentSystem {
if (contentEl && contentEl.dataset.raw !== incoming.content) {
_f0ckDebug(`[CommentSystem] Reconcile: Updating content for #c${id}`);
contentEl.innerHTML = this.renderCommentContent(incoming.content, incoming.id);
CommentSystem.autoplayConvertedGifs(contentEl);
contentEl.dataset.raw = incoming.content;
}
@@ -1553,7 +1557,7 @@ class CommentSystem {
// 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 rawVideoRegex = new RegExp(`(?<![\\(\\[])(${domainOrRelative}(?:\\/[^\\s\\[\\]\\(\\)]*\\.(?:mp4|webm|ogv|mov)(?:\\?[^\\s\\[\\]\\(\\)]+)?))`, '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;
@@ -1666,9 +1670,14 @@ class CommentSystem {
const mediaDomainOrRelative = `(?:(?:https?:\\/\\/|\\/\\/)?(?:${mediaHostsPart})|(?=\\/[a-zA-Z0-9_\\-]))`;
// Video embed: replace anchor links pointing to video files from allowed hosters with a video player
const videoEmbedRegex = new RegExp(`<a\\s[^>]*href="(${mediaDomainOrRelative}(?:\\/[^\\s\\[\\]\\(\\)]+\\.(?:mp4|webm|ogv|mov)(?:\\?[^\\s\\[\\]\\(\\)]+)?))"[^>]*>([\\s\\S]*?)<\\/a>`, 'gi');
const videoEmbedRegex = new RegExp(`<a\\s[^>]*href="(${mediaDomainOrRelative}(?:\\/[^\\s\\[\\]\\(\\)]+\\.(?:mp4|webm|ogv|mov)(?:\\?[^\\s\\[\\]\\(\\)]+)?(?:#gif)?))"[^>]*>([\\s\\S]*?)<\\/a>`, 'gi');
md = md.replace(videoEmbedRegex, (match, url) => {
return `<span class="video-embed-wrap"><video src="${url}" controls loop muted playsinline preload="metadata"></video></span>`;
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>`;
}
return `<span class="video-embed-wrap"><video src="${cleanUrl}" controls loop muted playsinline preload="metadata"></video></span>`;
});
// Audio embed: replace anchor links pointing to audio files from allowed hosters with an audio player
@@ -1728,6 +1737,23 @@ class CommentSystem {
}
}
/**
* Force-play videos with autoplay attribute in a container.
* Browsers often block autoplay on dynamically inserted elements;
* calling .play() explicitly after DOM insertion resolves this.
*/
static autoplayConvertedGifs(container) {
if (!container) return;
const videos = container.querySelectorAll('video.autoplay-gif');
videos.forEach(v => {
v.autoplay = true;
v.muted = true;
v.play().catch(() => {
v.addEventListener('canplay', () => v.play().catch(() => {}), { once: true });
});
});
}
buildBacklinkMap(comments) {
this.backlinkMap = {};
const process = (c) => {
@@ -2184,7 +2210,7 @@ class CommentSystem {
const json = await res.json();
if (json.success && json.files && json.files.length > 0) {
const fileData = json.files[0];
const url = `/c/${fileData.dest}`;
const url = `/c/${fileData.dest}${fileData.converted_gif ? '#gif' : ''}`;
textarea.value = textarea.value.replace(placeholder, url);
// Update preview with actual thumbnail

24
public/s/js/sidebar-activity.js
View File

@@ -130,7 +130,7 @@
const safeS = `(?:(?!https?:\\/\\/)\\S)`;
const domainOrRelative = `(?:(?:https?:\\/\\/|\\/\\/)?(?:${hostsRegexPart})|(?<!\\S)(?=\\/[a-zA-Z0-9_\\-]))`;
const imageRegex = new RegExp(`(?<![\\(\\[])(${domainOrRelative}(?:\\/${safeS}+\\.(?:jpg|jpeg|png|gif|webp)(?:\\?${safeS}+)?))(?![\\)\\]])`, 'gi');
const rawVideoRegex = new RegExp(`(?<![\\(\\[])(${domainOrRelative}(?:\\/[^\\s\\[\\]\\(\\)]*\\.(?:mp4|webm|ogv|mov)(?:\\?[^\\s\\[\\]\\(\\)]+)?))`, 'gi');
const rawVideoRegex = new RegExp(`(?<![\\(\\[])(${domainOrRelative}(?:\\/[^\\s\\[\\]\\(\\)]*\\.(?:mp4|webm|ogv|mov)(?:\\?[^\\s\\[\\]\\(\\)]+)?(?:#gif)?))`, 'gi');
const mentionRegex = /(?<!\[)@([a-zA-Z0-9_\-\.]+)(?!\])|\[@([^\]]+)\]/g;
const renderer = new marked.Renderer();
@@ -303,18 +303,24 @@
const mediaDomainOrRelative = `(?:(?:https?:\\/\\/|\\/\\/)?(?:${mediaHostsPart})|(?=\\/[a-zA-Z0-9_\\-]))`;
// Video label replacement: instead of embedding, show a link
const videoEmbedRegex = new RegExp(`<a\\s[^>]*href="(${mediaDomainOrRelative}(?:\\/[^\\s\\[\\]\\(\\)]+\\.(?:mp4|webm|ogv|mov)(?:\\?[^\\s\\[\\]\\(\\)]+)?))"[^>]*>([\\s\\S]*?)<\\/a>`, 'gi');
const videoEmbedRegex = new RegExp(`<a\\s[^>]*href="(${mediaDomainOrRelative}(?:\\/[^\\s\\[\\]\\(\\)]+\\.(?:mp4|webm|ogv|mov)(?:\\?[^\\s\\[\\]\\(\\)]+)?(?:#gif)?))"[^>]*>([\\s\\S]*?)<\\/a>`, 'gi');
md = md.replace(videoEmbedRegex, (match, url) => {
const isConvertedGif = url.endsWith('#gif');
const cleanUrl = url.replace(/#gif$/, '');
// Converted GIFs → inline autoplay in sidebar too
if (isConvertedGif) {
return `<span class="video-embed-wrap"><video src="${cleanUrl}" class="sidebar-comment-img autoplay-gif" loop muted playsinline preload="auto"></video></span>`;
}
let isSameSite = false;
try {
const urlToParse = url.startsWith('//') ? window.location.protocol + url : url;
const urlToParse = cleanUrl.startsWith('//') ? window.location.protocol + cleanUrl : cleanUrl;
const urlObj = new URL(urlToParse, siteOrigin);
isSameSite = (urlObj.hostname === window.location.hostname);
} catch(e) {
isSameSite = url.startsWith(siteOrigin) || (url.startsWith('/') && !url.startsWith('//'));
isSameSite = cleanUrl.startsWith(siteOrigin) || (cleanUrl.startsWith('/') && !cleanUrl.startsWith('//'));
}
const label = isSameSite ? 'Video Link' : 'External Video Link';
const targetHref = (itemId && commentId) ? `/${itemId}#c${commentId}` : (commentId ? `#sc${commentId}` : url);
const targetHref = (itemId && commentId) ? `/${itemId}#c${commentId}` : (commentId ? `#sc${commentId}` : cleanUrl);
const externalAttr = (itemId && commentId) || commentId ? '' : ' target="_blank" rel="noopener noreferrer"';
return `<a href="${targetHref}"${externalAttr} class="sidebar-video-link"><i class="fa-solid fa-film"></i> ${label} &raquo;</a>`;
});
@@ -482,6 +488,8 @@
</div>`;
}
container.innerHTML = html;
// Auto-play converted GIF videos
container.querySelectorAll('video.autoplay-gif').forEach(v => { v.autoplay = true; v.muted = true; v.play().catch(() => { v.addEventListener('canplay', () => v.play().catch(() => {}), { once: true }); }); });
};
const renderFromCache = () => {
@@ -500,6 +508,8 @@
}
checkOverflow();
fetchSidebarYoutubeTitles(container);
// Auto-play converted GIF videos
container.querySelectorAll('video.autoplay-gif').forEach(v => { v.autoplay = true; v.muted = true; v.play().catch(() => { v.addEventListener('canplay', () => v.play().catch(() => {}), { once: true }); }); });
return true;
};
@@ -604,6 +614,8 @@
if (ioSentinel) container.appendChild(ioSentinel);
checkOverflow();
fetchSidebarYoutubeTitles(container);
// Auto-play converted GIF videos
container.querySelectorAll('video.autoplay-gif').forEach(v => { v.autoplay = true; v.muted = true; v.play().catch(() => { v.addEventListener('canplay', () => v.play().catch(() => {}), { once: true }); }); });
}
} else {
hasMore = false;
@@ -690,6 +702,8 @@
el.classList.add('new-item-fade');
checkOverflow();
fetchSidebarYoutubeTitles(el);
// Auto-play converted GIF videos
inner.querySelectorAll('video.autoplay-gif').forEach(v => { v.autoplay = true; v.muted = true; v.play().catch(() => { v.addEventListener('canplay', () => v.play().catch(() => {}), { once: true }); }); });
}
}
}

78
src/comment_upload_handler.mjs
View File

@@ -236,22 +236,85 @@ export const handleCommentUpload = async (req, res) => {
}
let ext = cfg.mimes[actualMime] || 'bin';
// Max dimension for comment images (scale down if larger)
const COMMENT_IMG_MAX_DIM = 1280;
// Convert GIF → animated WebP to save disk space
// Convert GIF → WebP (small) or WebM (large) to save disk space
let convertedFromGif = false;
if (actualMime === 'image/gif') {
const gifSize = file.data.length;
const GIF_WEBM_THRESHOLD = 5 * 1024 * 1024; // 8MB
let converted = false;
if (gifSize <= GIF_WEBM_THRESHOLD) {
// Small GIF → try WebP (with resize)
const webpTmpPath = tmpPath.replace(/\.tmp$/, '.webp');
try {
await queue.spawn('magick', [tmpPath, '-coalesce', '-quality', '80', webpTmpPath]);
// Replace the temp file with the converted one
await queue.spawn('magick', [tmpPath, '-coalesce',
'-resize', `${COMMENT_IMG_MAX_DIM}x${COMMENT_IMG_MAX_DIM}>`,
'-quality', '80', webpTmpPath]);
const webpStat = await fs.stat(webpTmpPath);
if (webpStat.size < gifSize) {
await fs.unlink(tmpPath).catch(() => { });
await fs.rename(webpTmpPath, tmpPath);
actualMime = 'image/webp';
ext = 'webp';
console.log(`[COMMENT_UPLOAD] Converted GIF → WebP: ${file.filename}`);
} catch (e) {
console.warn(`[COMMENT_UPLOAD] GIF→WebP conversion failed, keeping original:`, e.message);
converted = 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}`);
await fs.unlink(webpTmpPath).catch(() => { });
}
} catch (e) {
console.warn(`[COMMENT_UPLOAD] GIF→WebP failed, keeping original:`, e.message);
await fs.unlink(webpTmpPath).catch(() => { });
}
} else {
// Large GIF → go straight to WebM (VP9 with alpha + resize)
const webmTmpPath = tmpPath.replace(/\.tmp$/, '.webm');
try {
await queue.spawn('ffmpeg', [
'-y', '-i', tmpPath,
'-an',
'-vf', `scale='min(${COMMENT_IMG_MAX_DIM},iw)':min'(${COMMENT_IMG_MAX_DIM},ih)':force_original_aspect_ratio=decrease`,
'-c:v', 'libvpx-vp9',
'-pix_fmt', 'yuva420p',
'-auto-alt-ref', '0',
'-crf', '30', '-b:v', '0',
webmTmpPath
]);
const webmStat = await fs.stat(webmTmpPath);
if (webmStat.size < gifSize) {
await fs.unlink(tmpPath).catch(() => { });
await fs.rename(webmTmpPath, tmpPath);
actualMime = 'video/webm';
ext = 'webm';
converted = true;
convertedFromGif = true;
console.log(`[COMMENT_UPLOAD] GIF → WebM (${(gifSize / 1024 / 1024).toFixed(1)}MB → ${(webmStat.size / 1024 / 1024).toFixed(1)}MB): ${file.filename}`);
} else {
console.log(`[COMMENT_UPLOAD] WebM also larger, keeping original GIF: ${file.filename}`);
await fs.unlink(webmTmpPath).catch(() => { });
}
} catch (e) {
console.warn(`[COMMENT_UPLOAD] GIF→WebM failed, keeping original:`, e.message);
await fs.unlink(webmTmpPath).catch(() => { });
}
}
}
// Downscale regular images (JPEG, PNG, WebP) if too large
if (actualMime.startsWith('image/') && actualMime !== 'image/gif') {
try {
const { stdout: dims } = await queue.spawn('magick', [tmpPath, '-format', '%wx%h', 'info:']);
const [w, h] = dims.trim().split('x').map(Number);
if (w > COMMENT_IMG_MAX_DIM || h > COMMENT_IMG_MAX_DIM) {
await queue.spawn('magick', [tmpPath, '-resize', `${COMMENT_IMG_MAX_DIM}x${COMMENT_IMG_MAX_DIM}>`, '-quality', '85', tmpPath]);
console.log(`[COMMENT_UPLOAD] Resized ${w}x${h} → max ${COMMENT_IMG_MAX_DIM}px: ${file.filename}`);
}
} catch (e) {
console.warn(`[COMMENT_UPLOAD] Resize check failed:`, e.message);
}
}
const filename = `${uuid}.${ext}`;
@@ -397,7 +460,8 @@ export const handleCommentUpload = async (req, res) => {
id: inserted[0].id,
dest: inserted[0].dest,
mime: inserted[0].mime,
thumbnail: `/t/cf_${uuid}.webp`
thumbnail: `/t/cf_${uuid}.webp`,
converted_gif: convertedFromGif
});
}