This commit is contained in:
2026-08-19 21:51:41 +02:00
parent 63ea313742
commit 0b2ece9447
9 changed files with 153 additions and 14 deletions

View File

@@ -468,9 +468,15 @@ class CommentSystem {
// 2. Check for duplicates (if we just posted it ourselves via optimistic insert).
// Even on early return, ensure the button is present if body was truncated.
if (document.getElementById('c' + data.id)) {
const el = document.getElementById('c' + data.id);
if (el && data.banner_file && data.banner_file !== 'null') {
el.style.setProperty('--author-banner', `url('/a/${data.banner_file}')`);
el.style.setProperty('--author-banner-position', data.banner_position === 'center' ? 'center top' : (data.banner_position || 'center top'));
el.style.setProperty('--author-banner-size', data.banner_size || 'cover');
el.style.setProperty('--author-banner-repeat', data.banner_repeat || 'repeat');
}
if (data.body && data.body.endsWith('\u2026')) {
console.log('[handleLiveComment] duplicate+truncated, ensuring button for', data.id);
const el = document.getElementById('c' + data.id);
const contentEl = el?.querySelector('.comment-content');
if (contentEl && !contentEl.querySelector('.load-full-comment-btn')) {
const btnLabel = (window.f0ckI18n?.sidebar_show_full_comment) || 'show full comment';
@@ -507,6 +513,10 @@ class CommentSystem {
avatar: data.avatar,
avatar_file: data.avatar_file,
username_color: data.username_color,
banner_file: data.banner_file || null,
banner_position: data.banner_position || null,
banner_size: data.banner_size || null,
banner_repeat: data.banner_repeat || null,
video_time: data.video_time ?? null,
is_new: true,
is_deleted: false,
@@ -593,7 +603,20 @@ class CommentSystem {
// Update in-memory data so future reconciles use the full content
if (this.lastData) {
const cached = this.lastData.find(c => String(c.id) === String(commentId));
if (cached) cached.content = fullContent;
if (cached) {
cached.content = fullContent;
if (json.comment.banner_file) cached.banner_file = json.comment.banner_file;
if (json.comment.banner_position) cached.banner_position = json.comment.banner_position;
if (json.comment.banner_size) cached.banner_size = json.comment.banner_size;
if (json.comment.banner_repeat) cached.banner_repeat = json.comment.banner_repeat;
}
}
if (json.comment && json.comment.banner_file) {
el.style.setProperty('--author-banner', `url('/a/${json.comment.banner_file}')`);
el.style.setProperty('--author-banner-position', json.comment.banner_position === 'center' ? 'center top' : (json.comment.banner_position || 'center top'));
el.style.setProperty('--author-banner-size', json.comment.banner_size || 'cover');
el.style.setProperty('--author-banner-repeat', json.comment.banner_repeat || 'repeat');
}
contentEl.dataset.raw = fullContent;
@@ -1502,6 +1525,13 @@ class CommentSystem {
el.classList.toggle('pinned', !!incoming.is_pinned);
const pinIcon = el.querySelector('.pin-icon');
if (pinIcon) pinIcon.style.display = incoming.is_pinned ? 'block' : 'none';
if (incoming && incoming.banner_file && incoming.banner_file !== 'null') {
el.style.setProperty('--author-banner', `url('/a/${incoming.banner_file}')`);
el.style.setProperty('--author-banner-position', incoming.banner_position === 'center' ? 'center top' : (incoming.banner_position || 'center top'));
el.style.setProperty('--author-banner-size', incoming.banner_size || 'cover');
el.style.setProperty('--author-banner-repeat', incoming.banner_repeat || 'repeat');
}
}
});
@@ -2170,7 +2200,11 @@ class CommentSystem {
}
}
return `<div class="${commentClass} ${isDeleted ? 'deleted' : ''} ${isPinned ? 'pinned' : ''}" id="c${comment.id}"><div class="comment-avatar">${comment.username ? `<a href="/user/${comment.username}">` : ''}<img src="${comment.avatar_file ? `/a/${comment.avatar_file}` : (comment.avatar ? `/t/${comment.avatar}.webp` : '/a/default.png')}">${comment.username ? `</a>` : ''}</div><div class="comment-body"><div class="comment-header"><div class="comment-header-left">${pinnedBadge}${comment.username ? `<a href="/user/${comment.username}" class="comment-author" tooltip="ID: ${comment.user_id}" ${comment.username_color ? `style="color: ${comment.username_color}"` : ''}>${this.escapeHtml(comment.display_name || comment.username)}</a>` : '<span class="comment-author">System</span>'}${contextMarker}${backlinkHtml}</div><a href="#c${comment.id}" class="comment-time timeago" tooltip="${fullDate}" data-iso="${isoDate}" 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, comment.content)}${this.renderCommentPoll(comment.poll, comment.id, comment.username)}<div class="comment-footer"><div class="comment-footer-right"><div class="comment-actions">${!isDeleted && currentUserId ? `<button class="reply-btn" data-id="${comment.id}" data-username="${comment.username}" data-display="${this.escapeHtml(comment.display_name || '')}" title="Reply"><i class="fa-solid fa-reply"></i></button><button class="quote-btn" data-id="${comment.id}" data-username="${comment.username}" data-display="${this.escapeHtml(comment.display_name || '')}" title="Quote with Text"><i class="fa-solid fa-quote-left"></i></button><button class="report-comment-btn" data-id="${comment.id}" title="Report Comment" style="background:none;border:none;color:inherit;cursor:pointer;opacity:0.75;padding:0;"><i class="fa-solid fa-triangle-exclamation"></i></button>` : ''}${adminButtons}${userDeleteButton}</div></div></div></div><a href="#c${comment.id}" class="comment-permalink" title="Permalink" data-id="${comment.id}" data-username="${comment.username}" data-display="${this.escapeHtml(comment.display_name || '')}">#${comment.id}</a></div>${repliesHtml}`;
const bannerStyle = (comment.banner_file && comment.banner_file !== 'null')
? `style="--author-banner: url('/a/${comment.banner_file}'); --author-banner-position: ${comment.banner_position === 'center' ? 'center top' : (comment.banner_position || 'center top')}; --author-banner-size: ${comment.banner_size || 'cover'}; --author-banner-repeat: ${comment.banner_repeat || 'repeat'};"`
: '';
return `<div class="${commentClass} ${isDeleted ? 'deleted' : ''} ${isPinned ? 'pinned' : ''}" id="c${comment.id}" ${bannerStyle}><div class="comment-avatar">${comment.username ? `<a href="/user/${comment.username}">` : ''}<img src="${comment.avatar_file ? `/a/${comment.avatar_file}` : (comment.avatar ? `/t/${comment.avatar}.webp` : '/a/default.png')}">${comment.username ? `</a>` : ''}</div><div class="comment-body"><div class="comment-header"><div class="comment-header-left">${pinnedBadge}${comment.username ? `<a href="/user/${comment.username}" class="comment-author" tooltip="ID: ${comment.user_id}" ${comment.username_color ? `style="color: ${comment.username_color}"` : ''}>${this.escapeHtml(comment.display_name || comment.username)}</a>` : '<span class="comment-author">System</span>'}${contextMarker}${backlinkHtml}</div><a href="#c${comment.id}" class="comment-time timeago" tooltip="${fullDate}" data-iso="${isoDate}" 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, comment.content)}${this.renderCommentPoll(comment.poll, comment.id, comment.username)}<div class="comment-footer"><div class="comment-footer-right"><div class="comment-actions">${!isDeleted && currentUserId ? `<button class="reply-btn" data-id="${comment.id}" data-username="${comment.username}" data-display="${this.escapeHtml(comment.display_name || '')}" title="Reply"><i class="fa-solid fa-reply"></i></button><button class="quote-btn" data-id="${comment.id}" data-username="${comment.username}" data-display="${this.escapeHtml(comment.display_name || '')}" title="Quote with Text"><i class="fa-solid fa-quote-left"></i></button><button class="report-comment-btn" data-id="${comment.id}" title="Report Comment" style="background:none;border:none;color:inherit;cursor:pointer;opacity:0.75;padding:0;"><i class="fa-solid fa-triangle-exclamation"></i></button>` : ''}${adminButtons}${userDeleteButton}</div></div></div></div><a href="#c${comment.id}" class="comment-permalink" title="Permalink" data-id="${comment.id}" data-username="${comment.username}" data-display="${this.escapeHtml(comment.display_name || '')}">#${comment.id}</a></div>${repliesHtml}`;
}
timeAgo(date) {
@@ -3494,6 +3528,50 @@ class CommentSystem {
}
}
let resolvedBannerFile = (json.comment?.banner_file && json.comment.banner_file !== 'null') ? json.comment.banner_file : ((session.banner_file && session.banner_file !== 'null') ? session.banner_file : null);
let resolvedBannerPosition = (json.comment?.banner_position && json.comment.banner_position !== 'null') ? json.comment.banner_position : ((session.banner_position && session.banner_position !== 'null') ? session.banner_position : null);
let resolvedBannerSize = (json.comment?.banner_size && json.comment.banner_size !== 'null') ? json.comment.banner_size : ((session.banner_size && session.banner_size !== 'null') ? session.banner_size : null);
let resolvedBannerRepeat = (json.comment?.banner_repeat && json.comment.banner_repeat !== 'null') ? json.comment.banner_repeat : ((session.banner_repeat && session.banner_repeat !== 'null') ? session.banner_repeat : null);
if (!resolvedBannerFile && this.lastData && currentUsername) {
const existingByMe = this.lastData.find(c =>
c.username && c.username.toLowerCase() === currentUsername.toLowerCase() && c.banner_file && c.banner_file !== 'null'
);
if (existingByMe) {
resolvedBannerFile = existingByMe.banner_file || null;
resolvedBannerPosition = existingByMe.banner_position || null;
resolvedBannerSize = existingByMe.banner_size || null;
resolvedBannerRepeat = existingByMe.banner_repeat || null;
}
}
if (!resolvedBannerFile && currentUsername) {
const existingCommentEl = document.querySelector(`.comment-author[href="/user/${currentUsername}"], .user-infobox-block[style*="--author-banner"]`);
if (existingCommentEl) {
const commentDiv = existingCommentEl.closest('.comment') || existingCommentEl.closest('.user-infobox-block');
if (commentDiv) {
const style = commentDiv.getAttribute('style') || '';
const bannerMatch = style.match(/--author-banner:\s*url\(['"]?\/a\/([^'"]+)['"]?\)/);
if (bannerMatch) {
resolvedBannerFile = bannerMatch[1];
const posMatch = style.match(/--author-banner-position:\s*([^;]+)/);
if (posMatch) resolvedBannerPosition = posMatch[1].trim();
const sizeMatch = style.match(/--author-banner-size:\s*([^;]+)/);
if (sizeMatch) resolvedBannerSize = sizeMatch[1].trim();
const repeatMatch = style.match(/--author-banner-repeat:\s*([^;]+)/);
if (repeatMatch) resolvedBannerRepeat = repeatMatch[1].trim();
}
}
}
}
if (resolvedBannerFile && window.f0ckSession) {
window.f0ckSession.banner_file = resolvedBannerFile;
if (resolvedBannerPosition) window.f0ckSession.banner_position = resolvedBannerPosition;
if (resolvedBannerSize) window.f0ckSession.banner_size = resolvedBannerSize;
if (resolvedBannerRepeat) window.f0ckSession.banner_repeat = resolvedBannerRepeat;
}
const newComment = {
id: json.comment.id,
item_id: this.itemId,
@@ -3507,6 +3585,10 @@ class CommentSystem {
avatar: resolvedAvatar,
avatar_file: resolvedAvatarFile,
username_color: session.username_color || null,
banner_file: resolvedBannerFile,
banner_position: resolvedBannerPosition,
banner_size: resolvedBannerSize,
banner_repeat: resolvedBannerRepeat,
is_deleted: false,
is_pinned: false,
video_time: json.comment.video_time ?? null,
@@ -3533,7 +3615,7 @@ class CommentSystem {
if (!this.lastData) this.lastData = [];
const existingInLastData = this.lastData.find(c => c.id === newComment.id);
if (existingInLastData) {
existingInLastData.files = files;
Object.assign(existingInLastData, newComment);
} else {
if (this.sort === 'new') this.lastData.unshift(newComment);
else this.lastData.push(newComment);