Fixed manifest in merge

TomCasavant · Aug 30, 2024 · 399e2f2 · 399e2f2
2 parents b321ea3 + b09f8d1
commit 399e2f2
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 12 deletions.
diff --git a/content.js b/content.js
@@ -38,14 +38,40 @@ if (searchTerm) {
                             // Datetime
                             var datetime = document.createElement('p');
                             datetime.textContent = new Date(post.created_at).toLocaleString();
-                            datetime.className = 'duckducksocial-datetime'; 
+                            datetime.className = 'duckducksocial-datetime';
 
                             var postHref = document.createElement('a');
                             postHref.href = `https://${mastodonDomain}/@${post.account.acct}/${post.id}`;
                             postHref.appendChild(postDiv);
 
                             postDiv.appendChild(username);
                             postDiv.appendChild(content);
+							if (post.media_attachments && post.media_attachments.length > 0) {
+								var mediaContainer = document.createElement('div');
+								mediaContainer.className = 'duckducksocial-media-container';
+
+								post.media_attachments.forEach(function (media) {
+									var mediaElement;
+
+									if (media.type === 'image') {
+										mediaElement = document.createElement('img');
+										mediaElement.src = media.url;
+										mediaElement.alt = media.description || 'Photo from mastodon search results. No alt text available';
+										mediaElement.className = 'duckducksocial-media-image';
+									} else if (media.type === 'video' || media.type === 'gifv') {
+										mediaElement = document.createElement('video');
+										mediaElement.src = media.url;
+										mediaElement.controls = true;
+										mediaElement.className = 'duckducksocial-media-video';
+									}
+
+									if (mediaElement) {
+										mediaContainer.appendChild(mediaElement);
+									}
+								});
+
+								postDiv.appendChild(mediaContainer);
+							}
                             postDiv.appendChild(datetime);
 
                             div.appendChild(postHref);

diff --git a/manifest.json b/manifest.json
@@ -1,7 +1,7 @@
 {
 	"manifest_version": 2,
 	"name": "DuckDuckSocial",
-	"version": "0.0.4",
+	"version": "0.0.5",
 	"description": "Adds a scrollable list of posts from the social web that match your DuckDuckGo search. Mobile support requires API key",
 	"icons": {
 		"512": "icons/border-512.png"

diff --git a/styles.css b/styles.css
@@ -1,4 +1,3 @@
-/* Define CSS variables for light and dark modes */
 :root {
   --border-color-light: #ccc;
   --border-color-dark: #444;
@@ -37,11 +36,13 @@
   border-radius: 8px;
   box-shadow: 0 2px 8px var(--shadow-light);
   height: 15em;
-  width: 12.5em;
+  width: 12.5em; 
   background-color: var(--post-background-light);
   transition: transform 0.3s ease, box-shadow 0.3s ease;
   display: flex;
   flex-direction: column;
+  justify-content: space-between;
+  padding: 5px;
   overflow: hidden;
 }
 
@@ -52,30 +53,56 @@
 
 .duckducksocial-username {
   font-weight: bold;
-  margin: 3px;
+  margin: 0;
   color: var(--text-color-light);
   font-size: 11px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .duckducksocial-content {
-  margin: 0 10px 30px;
-  font-size: 14px;
+  font-size: 12px;
   color: var(--content-text-color-light);
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-box-orient: vertical;
-  -webkit-line-clamp: 7;
+  -webkit-line-clamp: 3;
+  margin: 3px 0;
+  flex-grow: 1; 
 }
 
 .duckducksocial-datetime {
-  position: absolute;
-  bottom: 10px;
-  right: 10px;
-  font-size: 12px;
+  font-size: 10px;
   color: var(--datetime-text-color-light);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin: 0;
+  align-self: flex-end;
 }
 
+.duckducksocial-media-container {
+  width: 100%;
+  max-height: 6em;
+  overflow: hidden;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-shrink: 0;
+  margin: 5px 0;
+}
+
+.duckducksocial-media-image,
+.duckducksocial-media-video {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+
 /* Dark mode styles */
 @media (prefers-color-scheme: dark) {