mirror of
https://github.com/ION606/bluesky-client.git
synced 2026-05-14 21:26:54 +00:00
101 lines
3.7 KiB
JavaScript
101 lines
3.7 KiB
JavaScript
// function to create a single reply card, with an optional parent post shown above it
|
|
function createReplyCard(replyData) {
|
|
const replyCardContainer = document.createElement('div');
|
|
replyCardContainer.classList.add('reply-card-container');
|
|
|
|
// add parent post if exists, along with dots if it's not the root
|
|
if (replyData.reply.parent) {
|
|
const parentPost = createPostPreview(replyData.reply.parent, true);
|
|
replyCardContainer.appendChild(parentPost);
|
|
|
|
// add dots if there's a grandparent (to indicate more context above)
|
|
if (replyData.reply.grandparentAuthor) {
|
|
const dots = document.createElement('p');
|
|
dots.classList.add('convcont');
|
|
dots.textContent = '.....';
|
|
replyCardContainer.appendChild(dots);
|
|
}
|
|
}
|
|
|
|
// main reply card
|
|
const replyCard = document.createElement('div');
|
|
replyCard.classList.add('reply-card');
|
|
|
|
// author section
|
|
const authorSection = document.createElement('div');
|
|
authorSection.classList.add('author-section');
|
|
|
|
const avatar = document.createElement('img');
|
|
avatar.src = replyData.post.author.avatar;
|
|
avatar.alt = `${replyData.post.author.handle}'s avatar`;
|
|
avatar.classList.add('card-avatar');
|
|
authorSection.appendChild(avatar);
|
|
|
|
const authorInfo = document.createElement('div');
|
|
authorInfo.classList.add('author-info');
|
|
const authorName = document.createElement('p');
|
|
authorName.textContent = replyData.post.author.displayName || replyData.post.author.handle;
|
|
authorName.classList.add('author-name');
|
|
authorInfo.appendChild(authorName);
|
|
|
|
authorSection.appendChild(authorInfo);
|
|
replyCard.appendChild(authorSection);
|
|
|
|
// reply text
|
|
const replyText = document.createElement('p');
|
|
replyText.textContent = replyData.post.record.text || 'Image reply';
|
|
replyText.classList.add('reply-text');
|
|
replyCard.appendChild(replyText);
|
|
|
|
// embedded media if available
|
|
if (replyData.post.embed && replyData.post.embed.external) {
|
|
const mediaContainer = document.createElement('div');
|
|
mediaContainer.classList.add('media-container');
|
|
|
|
const mediaImage = document.createElement('img');
|
|
mediaImage.src = replyData.post.embed.external.thumb;
|
|
mediaImage.alt = replyData.post.embed.external.description;
|
|
mediaImage.classList.add('media-image');
|
|
mediaImage.loading = 'lazy';
|
|
|
|
mediaContainer.appendChild(mediaImage);
|
|
replyCard.appendChild(mediaContainer);
|
|
}
|
|
|
|
replyCardContainer.appendChild(replyCard);
|
|
return replyCardContainer;
|
|
}
|
|
|
|
// helper function to create a condensed preview of the parent post
|
|
function createPostPreview(post, isParent = false) {
|
|
const postPreview = document.createElement('div');
|
|
postPreview.classList.add(isParent ? 'parent-post-preview' : 'grandparent-post-preview');
|
|
|
|
// author and content preview
|
|
const author = document.createElement('p');
|
|
author.textContent = `${post.author.displayName || post.author.handle}`;
|
|
author.classList.add('original-author');
|
|
postPreview.appendChild(author);
|
|
|
|
const content = document.createElement('p');
|
|
content.textContent = post.record.text || 'Image reply';
|
|
content.classList.add('original-text');
|
|
postPreview.appendChild(content);
|
|
|
|
return postPreview;
|
|
}
|
|
|
|
|
|
module.exports = function renderReplies({ cursor, replies }) {
|
|
const repliesContainer = document.querySelector('#replies');
|
|
repliesContainer.querySelector('.placeholder')?.remove();
|
|
|
|
if (cursor) sessionStorage.setItem('repliescursor', cursor);
|
|
else sessionStorage.removeItem('repliescursor');
|
|
|
|
replies.forEach(reply => {
|
|
const replyCard = createReplyCard(reply);
|
|
repliesContainer.appendChild(replyCard);
|
|
});
|
|
}
|