mirror of
https://github.com/ION606/bluesky-client.git
synced 2026-05-14 21:26:54 +00:00
720 lines
24 KiB
JavaScript
720 lines
24 KiB
JavaScript
const { formatStr } = require("../src/renderer.cjs");
|
|
|
|
function zoomimg(e) {
|
|
const { src } = e.target,
|
|
overlayEl = document.querySelector('.overlay'),
|
|
zoomContainer = document.querySelector('#imgzoom');
|
|
|
|
zoomContainer.querySelector('video').style.display = 'none';
|
|
zoomContainer.querySelector('img').style.display = '';
|
|
|
|
zoomContainer.querySelector('img').src = src;
|
|
overlayEl.classList.toggle('hidden');
|
|
zoomContainer.classList.toggle('zoomed');
|
|
zoomContainer.classList.toggle('hidden');
|
|
|
|
document.querySelector('.profile-container').classList.toggle('.noscroll');
|
|
}
|
|
|
|
function zoomvid(e) {
|
|
const { src } = e.target;
|
|
if (src.endsWith('/assets/video-loading.mp4')) return;
|
|
|
|
const zoomContainer = document.querySelector('#imgzoom');
|
|
if (zoomContainer.contains(e.target)) return;
|
|
|
|
e.target.pause();
|
|
|
|
zoomContainer.querySelector('video').style.display = '';
|
|
zoomContainer.querySelector('img').style.display = 'none';
|
|
|
|
zoomContainer.querySelector('video').src = src;
|
|
zoomContainer.classList.toggle('zoomed');
|
|
document.querySelector('.overlay').classList.toggle('hidden');
|
|
document.querySelector('.overlay').classList.toggle('show');
|
|
document.querySelector('.profile-container').classList.toggle('.noscroll');
|
|
|
|
const isZoomed = zoomContainer.classList.contains('zoomed');
|
|
e.target.parentElement.querySelector('.controls').style.display = (isZoomed) ? 'none !important' : ''
|
|
}
|
|
|
|
|
|
// video stuff
|
|
function createVideoEl() {
|
|
// create main video container
|
|
const videoContainer = document.createElement('div');
|
|
videoContainer.classList.add('video-container');
|
|
videoContainer.classList.add('zoom-video');
|
|
|
|
// create video element
|
|
const videoElement = document.createElement('video');
|
|
videoElement.classList.add('video-element');
|
|
videoElement.src = ''; // specify the video source here
|
|
videoElement.controls = false; // disable default controls
|
|
videoElement.setAttribute('playsinline', ''); // ensures mobile compatibility for inline playback
|
|
|
|
// create controls container
|
|
const controls = document.createElement('div');
|
|
controls.classList.add('controls');
|
|
|
|
// create play/pause button
|
|
const playPauseButton = document.createElement('button');
|
|
playPauseButton.classList.add('play-pause');
|
|
playPauseButton.textContent = '';
|
|
|
|
// create fullscreen button
|
|
const fullscreenButton = document.createElement('button');
|
|
fullscreenButton.classList.add('fullscreen');
|
|
fullscreenButton.textContent = '⛶';
|
|
|
|
// create progress bar
|
|
const progressBar = document.createElement('input');
|
|
progressBar.classList.add('progress-bar');
|
|
progressBar.type = 'range';
|
|
progressBar.min = '0';
|
|
progressBar.value = '0';
|
|
progressBar.step = '0.1';
|
|
|
|
// create volume button with slider container
|
|
const volumeContainer = document.createElement('div');
|
|
volumeContainer.classList.add('volume-container');
|
|
|
|
const volumeButton = document.createElement('button');
|
|
volumeButton.classList.add('volume-button');
|
|
volumeButton.textContent = '🔊';
|
|
|
|
// append volume control to volume container
|
|
volumeContainer.appendChild(volumeButton);
|
|
|
|
// append controls to controls container
|
|
controls.appendChild(playPauseButton);
|
|
controls.appendChild(progressBar);
|
|
controls.appendChild(volumeContainer); // add volume container to the interface
|
|
controls.appendChild(fullscreenButton);
|
|
|
|
controls.style.display = 'none';
|
|
|
|
// append video and controls to video container
|
|
videoContainer.appendChild(videoElement);
|
|
videoContainer.appendChild(controls);
|
|
|
|
// JavaScript functionality for controls
|
|
|
|
// update play/pause functionality
|
|
playPauseButton.addEventListener('click', () => {
|
|
videoContainer.querySelector('.play-icon')?.remove();
|
|
if (videoElement.paused || videoElement.ended) {
|
|
videoElement.play();
|
|
playPauseButton.classList.remove('play');
|
|
playPauseButton.classList.add('pause');
|
|
} else {
|
|
videoElement.pause();
|
|
playPauseButton.classList.remove('pause');
|
|
playPauseButton.classList.add('play');
|
|
}
|
|
});
|
|
fullscreenButton.onclick = (_) => videoElement.click();
|
|
|
|
// set initial icon state to "play"
|
|
playPauseButton.classList.add('play');
|
|
|
|
// update progress bar as video plays
|
|
videoElement.addEventListener('timeupdate', () => {
|
|
progressBar.value = (videoElement.currentTime / videoElement.duration) * 100;
|
|
});
|
|
|
|
videoElement.addEventListener('pause', () => {
|
|
playPauseButton.classList.remove('pause');
|
|
playPauseButton.classList.add('play');
|
|
});
|
|
|
|
videoElement.addEventListener('play', () => {
|
|
playPauseButton.classList.remove('play');
|
|
playPauseButton.classList.add('pause');
|
|
});
|
|
|
|
// allow user to skip within video by dragging progress bar
|
|
progressBar.addEventListener('input', () => {
|
|
videoElement.currentTime = (progressBar.value / 100) * videoElement.duration;
|
|
});
|
|
|
|
// adjust video volume with volume control
|
|
let preVol;
|
|
volumeButton.addEventListener('click', () => {
|
|
if (videoElement.volume) {
|
|
preVol = videoElement.volume;
|
|
videoElement.volume = '0';
|
|
volumeButton.textContent = '🔇';
|
|
}
|
|
else {
|
|
videoElement.volume = preVol || '1';
|
|
volumeButton.textContent = '🔊';
|
|
}
|
|
});
|
|
|
|
return videoContainer;
|
|
}
|
|
|
|
|
|
function sendSuccess(dmItem, failed = false) {
|
|
const image = dmItem.querySelector('img');
|
|
if (image) {
|
|
// Create the checkmark div
|
|
const checkmark = document.createElement('div');
|
|
checkmark.className = (failed) ? 'crossmark' : 'checkmark';
|
|
checkmark.style.marginRight = '10px';
|
|
|
|
// Replace the image with the checkmark
|
|
image.replaceWith(checkmark);
|
|
|
|
setTimeout(() => {
|
|
document.querySelector('#dmPopup').querySelector('.close-btn').click();
|
|
checkmark.replaceWith(image);
|
|
checkmark.remove();
|
|
}, 1500);
|
|
}
|
|
else console.log('no pfp found!');
|
|
|
|
dmItem.classList.add((failed) ? 'error' : 'success');
|
|
}
|
|
|
|
|
|
function renderDMs(posturi, follows, ipcRenderer) {
|
|
const dmList = document.getElementById('dmList');
|
|
dmList.innerHTML = '';
|
|
|
|
follows.forEach(follow => {
|
|
const dmItem = document.createElement('div');
|
|
dmItem.className = 'dm-item' + (follow.dm ? '' : ' disabled');
|
|
dmItem.innerHTML = `
|
|
<img src="${follow.avatar}" alt="${follow.displayName}">
|
|
<div class="info">
|
|
<div class="name">${follow.displayName || follow.handle}</div>
|
|
<div class="handle">@${follow.handle}</div>
|
|
</div>
|
|
`;
|
|
|
|
dmItem.addEventListener('click', async (e) => {
|
|
e.preventDefault();
|
|
if (!follow.dm) return alert('not allowed!');
|
|
|
|
const r = await ipcRenderer.invoke('send-post', posturi, follow.handle, follow.dm.id);
|
|
if (!r) sendSuccess(dmItem, true);
|
|
else sendSuccess(dmItem);
|
|
});
|
|
|
|
dmList.appendChild(dmItem);
|
|
});
|
|
}
|
|
|
|
|
|
function createButtonEls(card, ipcRenderer, idkey = 'bskyid', containerid = 'cards') {
|
|
// Add this to your function after creating the main card content
|
|
const buttonContainer = document.createElement('div');
|
|
buttonContainer.classList.add('button-container');
|
|
|
|
// Like button
|
|
const likeButton = document.createElement('button');
|
|
likeButton.classList.add('action-button', 'like-button');
|
|
likeButton.innerHTML = `<i class="fa-${card.dataset.likeuri ? 'solid' : 'regular'} fa-heart"></i>`;
|
|
likeButton.title = 'Like';
|
|
|
|
// Like button
|
|
const repostButton = document.createElement('button');
|
|
repostButton.className = 'action-button';
|
|
repostButton.style.color = card.dataset.reposturi ? '#10c200' : 'grey';
|
|
repostButton.innerHTML = `<i class="fa-solid fa-retweet"></i>`;
|
|
repostButton.title = 'Repost';
|
|
|
|
// Delete button
|
|
const deleteButton = document.createElement('button');
|
|
deleteButton.classList.add('action-button', 'delete-button');
|
|
deleteButton.innerHTML = '<i class="fas fa-trash-alt"></i>';
|
|
deleteButton.title = 'Delete';
|
|
|
|
// Send via DM button
|
|
const sendDMButton = document.createElement('button');
|
|
sendDMButton.classList.add('action-button', 'dm-button');
|
|
sendDMButton.innerHTML = '<i class="fas fa-paper-plane"></i>';
|
|
sendDMButton.title = 'Send via DM';
|
|
|
|
// Copy link button
|
|
const copyLinkButton = document.createElement('button');
|
|
copyLinkButton.classList.add('action-button', 'copy-link-button');
|
|
copyLinkButton.innerHTML = '<i class="fas fa-link"></i>';
|
|
copyLinkButton.title = 'Copy Link';
|
|
|
|
// Pin/Unpin toggle button
|
|
const pinButton = document.createElement('button');
|
|
pinButton.classList.add('action-button', 'pin-button');
|
|
pinButton.innerHTML = '<i class="fas fa-thumbtack"></i>';
|
|
pinButton.title = 'Pin/Unpin';
|
|
|
|
// Three-dot menu button to toggle dropdown
|
|
const menuButton = document.createElement('button');
|
|
menuButton.classList.add('action-button', 'menu-button');
|
|
menuButton.innerHTML = '<i class="fas fa-ellipsis-h"></i>';
|
|
menuButton.title = 'More options';
|
|
|
|
// Dropdown menu container for collapsible options
|
|
const dropdownMenu = document.createElement('div');
|
|
dropdownMenu.classList.add('dropdown-menu');
|
|
dropdownMenu.classList.add('hidden'); // initially hidden
|
|
|
|
dropdownMenu.append(pinButton, copyLinkButton)
|
|
|
|
// Append buttons to the container
|
|
buttonContainer.appendChild(likeButton);
|
|
buttonContainer.appendChild(repostButton);
|
|
buttonContainer.appendChild(deleteButton);
|
|
buttonContainer.appendChild(sendDMButton);
|
|
buttonContainer.appendChild(menuButton);
|
|
buttonContainer.appendChild(dropdownMenu);
|
|
|
|
// Like button functionality
|
|
likeButton.addEventListener('click', async () => {
|
|
const lurl = card.dataset.likeuri,
|
|
r = await ipcRenderer.invoke('post-action', 'like', card.dataset[`${idkey}`], lurl);
|
|
|
|
// if there is a url then it should return nothing
|
|
if (!r && !lurl) return alert("ERROR!");
|
|
else if (lurl) delete card.dataset.likeuri;
|
|
else if (r) card.dataset.likeuri = r.uri
|
|
likeButton.innerHTML = `<i class="fa-${lurl ? 'regular' : 'solid'} fa-heart"></i>`
|
|
});
|
|
|
|
// Delete button functionality
|
|
deleteButton.addEventListener('click', async () => {
|
|
if (confirm('Are you sure you want to delete this post?')) {
|
|
const r = await ipcRenderer.invoke('post-action', 'delete', card.dataset[`${idkey}`]);
|
|
if (!r) return alert("ERROR!");
|
|
card.remove();
|
|
// alert('Post deleted.');
|
|
}
|
|
});
|
|
|
|
// Send DM functionality
|
|
sendDMButton.addEventListener('click', async () => {
|
|
const r = await ipcRenderer.invoke('get-connections');
|
|
document.getElementById('dmPopup').classList.add('active');
|
|
renderDMs(card.dataset[`${idkey}`], r.follows, ipcRenderer);
|
|
});
|
|
|
|
// Copy link functionality
|
|
copyLinkButton.addEventListener('click', async () => {
|
|
const r = await ipcRenderer.invoke('post-action', 'link', card.dataset[`${idkey}`]);
|
|
if (!r) return alert("ERROR!");
|
|
navigator.clipboard.writeText(r).then(() => {
|
|
alert('Link copied to clipboard!');
|
|
});
|
|
});
|
|
|
|
// Repost functionality
|
|
repostButton.addEventListener('click', async () => {
|
|
const r = await ipcRenderer.invoke('post-action', 'repost', card.dataset[`${idkey}`], card.dataset.reposturi);
|
|
|
|
if (!r) alert('ERROR!');
|
|
else if (card.dataset.reposturi) {
|
|
// TODO: move the card back to it's original position or refresh the page?
|
|
if (!card.dataset.ismypost) card.remove();
|
|
delete card.dataset.reposturi;
|
|
repostButton.style.color = 'grey';
|
|
}
|
|
else {
|
|
const pinnedEl = document.querySelector(`#${containerid}container`).querySelector('.pinned-card');
|
|
if (pinnedEl) pinnedEl.after(card);
|
|
else document.querySelector(`#${containerid}container`).prepend(card);
|
|
|
|
card.dataset.reposturi = r;
|
|
repostButton.style.color = '#10c200';
|
|
}
|
|
});
|
|
|
|
// Pin/Unpin functionality
|
|
let isPinned = false;
|
|
pinButton.addEventListener('click', async () => {
|
|
return alert("TODO");
|
|
// const r = await ipcRenderer.invoke('post-action', 'pin', card.dataset.bskyid);
|
|
// return alert(r);
|
|
|
|
isPinned = !isPinned;
|
|
pinButton.title = isPinned ? 'Unpin' : 'Pin';
|
|
pinButton.classList.toggle('pinned', isPinned);
|
|
alert(isPinned ? 'Pinned!' : 'Unpinned!');
|
|
// Add logic for pinning/unpinning the post
|
|
});
|
|
|
|
menuButton.addEventListener('click', (e) => {
|
|
e.stopPropagation(); // prevent event bubbling
|
|
dropdownMenu.classList.toggle('hidden'); // show/hide menu
|
|
});
|
|
|
|
// Hide dropdown menu when clicking outside
|
|
document.addEventListener('click', (e) => {
|
|
if (!buttonContainer.contains(e.target)) {
|
|
dropdownMenu.classList.add('hidden'); // hide menu
|
|
}
|
|
});
|
|
|
|
return buttonContainer;
|
|
}
|
|
|
|
|
|
function setupWorker(name = 'bktemp') {
|
|
if (typeof (Worker) === "undefined") return console.error('workers not supported!\nswitching to manual...');
|
|
|
|
const w = new Worker("../JS/worker.js", { name });
|
|
w.postMessage('PING');
|
|
w.onmessage = function (event) {
|
|
console.log(event.data);
|
|
};
|
|
|
|
function stopWorker() {
|
|
w.terminate();
|
|
w = undefined;
|
|
}
|
|
}
|
|
|
|
const statArr = [0, 0];
|
|
|
|
/**
|
|
* @param {*} post
|
|
* @param {*} a
|
|
* @param {{posturi: string, likeuri: string}[]} likes
|
|
* @param {*} ipcRenderer
|
|
* @param {*} container
|
|
*/
|
|
function renderPostSingle(post, a, likes, ipcRenderer, container, idkey = 'bskyid', containerid) {
|
|
/** @type {Element} */
|
|
let card;
|
|
const cardId = (post?.reply?.root?.uri || post.post.uri)?.trim();
|
|
|
|
// if the card exists, use it; otherwise, create a new card
|
|
if (a.has(cardId)) {
|
|
card = a.get(cardId);
|
|
statArr[0]++;
|
|
}
|
|
else {
|
|
card = document.createElement('div');
|
|
card.classList.add('post-card');
|
|
card.dataset[`${idkey}`] = cardId;
|
|
card.onclick = (e) => {
|
|
if (e.target !== card && !e.target.classList.contains('post-text')) return;
|
|
window.location.href = `../HTML/post.html?id=${encodeURI(card.dataset[`${idkey}`])}`;
|
|
}
|
|
statArr[1]++;
|
|
}
|
|
|
|
// handle repost reason if it hasn't been added to this card
|
|
if (post.reason && post.reason.by && !card.querySelector('.repost-section')) {
|
|
const aname = post.reason.by.displayName || formatStr(post.reason.by.handle);
|
|
const repostSection = document.createElement('div');
|
|
repostSection.classList.add('repost-section');
|
|
|
|
const repostAvatar = document.createElement('img');
|
|
repostAvatar.src = post.reason.by.avatar;
|
|
repostAvatar.alt = `${aname}'s avatar`;
|
|
repostAvatar.classList.add('card-avatar', 'repost-avatar');
|
|
repostAvatar.loading = 'lazy';
|
|
|
|
const repostInfo = document.createElement('div');
|
|
repostInfo.classList.add('repost-info');
|
|
|
|
const repostName = document.createElement('h2');
|
|
repostName.innerHTML = aname;
|
|
repostName.classList.add('author-name');
|
|
|
|
const repostHandle = document.createElement('p');
|
|
repostHandle.innerHTML = `${formatStr('@' + post.reason.by.handle)} reposted`;
|
|
repostHandle.classList.add('author-handle');
|
|
|
|
repostInfo.appendChild(repostName);
|
|
repostInfo.appendChild(repostHandle);
|
|
repostSection.appendChild(repostAvatar);
|
|
repostSection.appendChild(repostInfo);
|
|
|
|
card.dataset.ismypost = post.post.author.did === post.reason.by.did;
|
|
card.dataset.reposturi = post.post.viewer.repost;
|
|
card.prepend(repostSection);
|
|
}
|
|
|
|
// handle reply if it hasn't been added to this card
|
|
if (post.reply && post.reply.root && !card.querySelector('.original-post')) {
|
|
const originalPost = document.createElement('div');
|
|
originalPost.classList.add('original-post');
|
|
|
|
const repaname = post.reply.root.author.displayName || formatStr(post.reply.root.author?.handle);
|
|
// add the original author and text
|
|
const originalAuthor = document.createElement('p');
|
|
originalAuthor.innerHTML = `Replying to ${repaname}`;
|
|
originalAuthor.classList.add('original-author');
|
|
originalPost.appendChild(originalAuthor);
|
|
|
|
const originalText = document.createElement('p');
|
|
originalText.innerHTML = formatStr(post.reply.root.record.text) || 'Image reply';
|
|
originalText.classList.add('original-text');
|
|
originalPost.appendChild(originalText);
|
|
|
|
// add the original image if present
|
|
if (post.reply.root.embed?.images?.length > 0) {
|
|
const originalImage = document.createElement('img');
|
|
originalImage.loading = 'lazy';
|
|
originalImage.src = post.reply.root.embed.images[0].thumb;
|
|
originalImage.alt = post.reply.root.embed.images[0].alt || 'Original post image';
|
|
originalImage.classList.add('original-image');
|
|
originalPost.appendChild(originalImage);
|
|
}
|
|
|
|
card.appendChild(originalPost);
|
|
|
|
// add the section for "what I was replying to" if grandparentAuthor exists
|
|
if (post.reply.grandparentAuthor) {
|
|
const parentPost = document.createElement('div');
|
|
parentPost.classList.add('parent-post');
|
|
|
|
const spacingEl = document.createElement('p');
|
|
spacingEl.className = 'convcont';
|
|
spacingEl.textContent = '.....';
|
|
|
|
const parentAuthor = document.createElement('p');
|
|
const paraname = post.reply.parent.author.displayName || formatStr(post.reply.parent.author.handle);
|
|
parentAuthor.innerHTML = `${paraname}`;
|
|
parentAuthor.classList.add('original-author');
|
|
|
|
parentPost.append(spacingEl, parentAuthor);
|
|
|
|
const parentText = document.createElement('p');
|
|
parentText.innerHTML = formatStr(post.reply.parent.record.text) || 'Image reply';
|
|
parentText.classList.add('original-text');
|
|
parentPost.appendChild(parentText);
|
|
|
|
if (post.reply.parent.embed && post.reply.parent.embed.images && post.reply.parent.embed.images.length > 0) {
|
|
const parentImage = document.createElement('img');
|
|
parentImage.loading = 'lazy';
|
|
parentImage.src = post.reply.parent.embed.images[0].thumb;
|
|
parentImage.alt = post.reply.parent.embed.images[0].alt || 'Parent post image';
|
|
parentImage.classList.add('original-image');
|
|
parentPost.appendChild(parentImage);
|
|
}
|
|
|
|
card.appendChild(parentPost);
|
|
}
|
|
}
|
|
|
|
// author info section for the main post
|
|
if (!card.querySelector('.author-section')) {
|
|
const aname = post.post.author.displayName || formatStr(post.post.author.handle);
|
|
const authorSection = document.createElement('div');
|
|
authorSection.classList.add('author-section');
|
|
|
|
const avatar = document.createElement('img');
|
|
avatar.src = post.post.author.avatar;
|
|
avatar.alt = `${aname}'s avatar`;
|
|
avatar.classList.add('card-avatar');
|
|
avatar.loading = 'lazy';
|
|
|
|
const authorInfo = document.createElement('div');
|
|
authorInfo.classList.add('author-info');
|
|
|
|
const displayName = document.createElement('h2');
|
|
displayName.innerHTML = aname;
|
|
displayName.classList.add('author-name');
|
|
|
|
const handle = document.createElement('p');
|
|
handle.innerHTML = `${formatStr('@' + post.post.author.handle)}`;
|
|
handle.classList.add('author-handle');
|
|
|
|
authorInfo.appendChild(displayName);
|
|
authorInfo.appendChild(handle);
|
|
authorSection.appendChild(avatar);
|
|
authorSection.appendChild(authorInfo);
|
|
|
|
card.appendChild(authorSection);
|
|
}
|
|
|
|
// main post text content
|
|
if (!card.querySelector('.post-text')) {
|
|
const textContent = document.createElement('p');
|
|
textContent.innerHTML = formatStr(post.post.record.text);
|
|
textContent.classList.add('post-text');
|
|
card.appendChild(textContent);
|
|
}
|
|
|
|
// handle video embed
|
|
if (post.post.embed && post.post.embed.$type === 'app.bsky.embed.video#view' && !card.querySelector('.post-video')) {
|
|
const videoContainer = createVideoEl(), videoPlayer = videoContainer.querySelector('video');
|
|
|
|
videoPlayer.classList.add('post-video');
|
|
videoPlayer.width = post.post.embed.aspectRatio?.width;
|
|
videoPlayer.height = post.post.embed.aspectRatio?.height;
|
|
videoContainer.appendChild(videoPlayer);
|
|
card.appendChild(videoContainer);
|
|
videoPlayer.src = '../assets/video-loading.mp4';
|
|
videoPlayer.dataset.src = post.post.embed.playlist;
|
|
videoPlayer.poster = post.post.embed.thumbnail;
|
|
}
|
|
|
|
// main post image (if it exists and hasn't been added)
|
|
if (post.post.embed && post.post.embed.images && post.post.embed.images.length > 0 && !card.querySelector('.post-image')) {
|
|
const repeatimg = card.querySelector('.original-image')?.src === post.post.embed.images[0].thumb;
|
|
if (!repeatimg) {
|
|
const imageContainer = document.createElement('div');
|
|
imageContainer.classList.add('image-container');
|
|
|
|
const postImage = document.createElement('img');
|
|
postImage.src = post.post.embed.images[0].thumb;
|
|
postImage.alt = post.post.embed.images[0].alt || 'Embedded image';
|
|
postImage.classList.add('post-image');
|
|
postImage.loading = 'lazy';
|
|
|
|
imageContainer.appendChild(postImage);
|
|
card.appendChild(imageContainer);
|
|
}
|
|
}
|
|
|
|
if (post.post.embed && post.post.embed.$type === 'app.bsky.embed.external#view') {
|
|
const embedContainer = document.createElement('div'),
|
|
embed = post.post.embed.external;
|
|
|
|
embedContainer.classList.add('external-embed-container');
|
|
|
|
// thumbnail (if exists)
|
|
if (embed.thumb) {
|
|
const thumbnail = document.createElement('img');
|
|
thumbnail.classList.add('external-embed-thumb');
|
|
|
|
if (embed.uri.match(/\.gif(?:\?.*|$)/)) thumbnail.src = embed.uri
|
|
else thumbnail.src = embed.thumb;
|
|
|
|
thumbnail.alt = `${embed.title} thumbnail`;
|
|
embedContainer.appendChild(thumbnail);
|
|
}
|
|
|
|
// this is an image
|
|
if (embed.description.startsWith('ALT:') && embed.title === embed.description.substring(4).trim()) {
|
|
const thumbnail = embedContainer.querySelector('.external-embed-thumb');
|
|
thumbnail.alt = embed.description.substring(4).trim();
|
|
}
|
|
else {
|
|
// title
|
|
const titleElement = document.createElement('h3');
|
|
titleElement.classList.add('external-embed-title');
|
|
titleElement.textContent = embed.title;
|
|
|
|
// description
|
|
const descriptionElement = document.createElement('p');
|
|
descriptionElement.classList.add('external-embed-description');
|
|
descriptionElement.textContent = embed.description;
|
|
|
|
// link
|
|
const linkElement = document.createElement('a');
|
|
linkElement.classList.add('external-embed-link');
|
|
linkElement.href = embed.uri;
|
|
linkElement.target = '_blank';
|
|
linkElement.rel = 'noopener noreferrer'; // improves security (apparently)
|
|
linkElement.textContent = 'Visit';
|
|
|
|
embedContainer.appendChild(titleElement);
|
|
embedContainer.appendChild(descriptionElement);
|
|
embedContainer.appendChild(linkElement);
|
|
}
|
|
|
|
card.appendChild(embedContainer);
|
|
}
|
|
|
|
// interaction counts
|
|
if (!card.querySelector('.interaction-counts')) {
|
|
const counts = document.createElement('div');
|
|
counts.classList.add('interaction-counts');
|
|
counts.textContent = `💬 ${post.post.replyCount} 🔄 ${post.post.repostCount} ❤️ ${post.post.likeCount}`;
|
|
card.appendChild(counts);
|
|
}
|
|
|
|
// add the card to the container if it's a new card
|
|
if (!a.has(cardId)) {
|
|
const lurl = likes?.find(o => (o.posturi === cardId));
|
|
if (lurl) card.dataset.likeuri = lurl.likeuri;
|
|
card.appendChild(createButtonEls(card, ipcRenderer, idkey, containerid));
|
|
container.appendChild(card);
|
|
a.set(cardId, card);
|
|
}
|
|
}
|
|
|
|
|
|
/**
|
|
* @param {*} posts
|
|
* @param {*} likes
|
|
* @param {*} pinnedPost
|
|
* @param {*} ipcRenderer
|
|
*/
|
|
module.exports = function renderPosts(posts, likes, pinnedPost, ipcRenderer, idkey = 'bskyid', containerid = 'posts') {
|
|
let container;
|
|
/** @type {Map<String, Element>} */
|
|
let a;
|
|
if (document.querySelector(`#${containerid}container`)) {
|
|
container = document.querySelector(`#${containerid}container`);
|
|
a = new Map(Array.from(container.querySelectorAll('.post-card')).map(o => ([o.dataset[`${idkey}`], o])));
|
|
}
|
|
else {
|
|
container = document.createElement('div');
|
|
container.classList.add('cards-container');
|
|
container.id = `${containerid}container`;
|
|
a = new Map();
|
|
}
|
|
|
|
statArr[0] = 0;
|
|
statArr[1] = 0;
|
|
|
|
for (const post of posts) {
|
|
try {
|
|
renderPostSingle(
|
|
post,
|
|
a,
|
|
likes?.map(o => ({ posturi: o.post.uri, likeuri: o.post.viewer?.like })),
|
|
ipcRenderer,
|
|
container,
|
|
idkey,
|
|
containerid
|
|
);
|
|
}
|
|
catch (err) {
|
|
console.error(err);
|
|
}
|
|
}
|
|
|
|
console.info(`added ${statArr[1]} and updated ${statArr[0]} posts in "${containerid}"!`);
|
|
|
|
// const postids = Array.from(document.querySelectorAll(`[data-${idkey}]`)).map(o => o.dataset[`${idkey} `]);
|
|
// console.log('duplicate ids', postids);
|
|
|
|
// "force" garbage collection
|
|
// delete a;
|
|
a.clear();
|
|
a = null;
|
|
|
|
if (pinnedPost) {
|
|
console.log("PINNED", posts.find(p => p.post.uri === pinnedPost.uri));
|
|
|
|
const pinnedcard = container.querySelector(`[data-${idkey}="${pinnedPost.uri}"]`);
|
|
if (pinnedcard) {
|
|
const pinnedLabel = document.createElement('div');
|
|
pinnedLabel.classList.add('pinned-label');
|
|
pinnedLabel.textContent = '📌 Pinned'; // optionally add an emoji/icon
|
|
pinnedcard?.prepend(pinnedLabel); // place it at the top of the pinned card
|
|
pinnedcard?.classList.add('pinned-card');
|
|
container.prepend(pinnedcard); // move it to be first
|
|
}
|
|
}
|
|
|
|
// append container to the document body or a specific section
|
|
const postdiv = document.getElementById(containerid);
|
|
postdiv.querySelector('.placeholder')?.remove();
|
|
if (!document.querySelector(`#${containerid}container`)) {
|
|
postdiv.appendChild(container);
|
|
document.addEventListener('click', (e) => {
|
|
if (e.target.tagName === "VIDEO") zoomvid(e);
|
|
else if (e.target.tagName === "IMG" || e.target.classList.contains('overlay')) zoomimg(e);
|
|
});
|
|
}
|
|
}
|