fixed image embeds in posts

CSS/compose.css

@@ -1,5 +1,5 @@
 /* overlay backdrop */
-#overlay {
+#overlay, .overlay {
     display: none;
     position: fixed;
     top: 0;
@@ -31,7 +31,7 @@
 }
 
 /* show popup and overlay */
-#new-post-form.show, #overlay.show {
+#new-post-form.show, #overlay.show, .overlay.show {
     display: block;
     opacity: 1;
 }

HTML/index.html

@@ -68,7 +68,7 @@
                 <i class="fa-solid fa-pen"></i>
             </button>
 
-            <div id="overlay"></div>
+            <div class="overlay"></div>
             <div id="new-post-form" aria-labelledby="new-post-label">
                 <form id="postForm">
                     <label id="new-post-label" for="postContent">New Post:</label>

JS/compose.cjs

@@ -1,5 +1,7 @@
 // set up the overlay and form toggling
 async function setup() {
+    if (document.querySelector('#overlay')) return;
+
     const composeButton = document.querySelector('#composebtn');
     const newPostForm = document.querySelector('#new-post-form');
     const overlay = document.createElement('div');

JS/posts.cjs

@@ -11,6 +11,7 @@ function zoomimg(e) {
 	zoomContainer.querySelector('img').src = src;
 	zoomContainer.classList.toggle('zoomed');
 	overlayEl.classList.toggle('hidden');
+	overlayEl.classList.toggle('show');
 	document.querySelector('.profile-container').classList.toggle('.noscroll');
 }
 
@@ -29,6 +30,7 @@ function zoomvid(e) {
 	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');
@@ -569,33 +571,43 @@ function renderPostSingle(post, a, likes, ipcRenderer, container, idkey = 'bskyi
 		if (embed.thumb) {
 			const thumbnail = document.createElement('img');
 			thumbnail.classList.add('external-embed-thumb');
-			thumbnail.src = embed.thumb;
+
+			if (embed.uri.match(/\.gif(?:\?.*|$)/)) thumbnail.src = embed.uri
+			else thumbnail.src = embed.thumb;
+
 			thumbnail.alt = `${embed.title} thumbnail`;
 			embedContainer.appendChild(thumbnail);
 		}
 
-		// title
-		const titleElement = document.createElement('h3');
-		titleElement.classList.add('external-embed-title');
-		titleElement.textContent = embed.title;
+		// 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;
+			// 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'; // opens in a new tab
-		linkElement.rel = 'noopener noreferrer'; // improves security
-		linkElement.textContent = 'Visit';
+			// link
+			const linkElement = document.createElement('a');
+			linkElement.classList.add('external-embed-link');
+			linkElement.href = embed.uri;
+			linkElement.target = '_blank'; // opens in a new tab
+			linkElement.rel = 'noopener noreferrer'; // improves security
+			linkElement.textContent = 'Visit';
 
-		// append elements to the container
-		embedContainer.appendChild(titleElement);
-		embedContainer.appendChild(descriptionElement);
-		embedContainer.appendChild(linkElement);
+			// append elements to the container
+			embedContainer.appendChild(titleElement);
+			embedContainer.appendChild(descriptionElement);
+			embedContainer.appendChild(linkElement);
+		}
 
 		card.appendChild(embedContainer);
 	}