diff --git a/content.js b/content.js index 3b35232..7463e85 100644 --- a/content.js +++ b/content.js @@ -38,7 +38,7 @@ 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}`; @@ -46,6 +46,32 @@ if (searchTerm) { 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 index 95b87ee..d4c5245 100644 --- 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 index f3e677d..6c82b0e 100644 --- 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) {