add video & audio type

mastodon-api.js

@@ -83,7 +83,19 @@ export const getData = async (url, token) => {
       toot.account.display_name = toot.account.display_name.replaceAll(/:\w+:/g, '').trim() || toot.account.username;
       const regexTag = new RegExp('(?<=rel="tag")', 'g'); // Look for tag links
       toot.content = toot.content.replaceAll(regexTag, ' target="_blank"'); // Open tag links in new tab
-      const attachments = toot.media_attachments.filter(el => el.type == "image").map(el => `<img src="${el.preview_url}" title="${el.description}"/>`);
+      const attachments = toot.media_attachments.filter(el => ["image", "video", "audio"].includes(el.type)).map(el => {
+        switch (el.type) {
+          case "image":
+            return `<img src="${el.preview_url}" title="${el.description}"/>`
+            case "video":
+            return `<video controls src="${el.remote_url}" poster="${el.preview_url}" title="${el.description}" preload="none" role="button" tabindex="0" width="${el.meta.small.width}" height="${el.meta.small.height}" volume="1"/>`
+            case "audio":
+            return `<audio controls src="${el.remote_url}" poster="${el.preview_remote_url}" title="${el.description}" preload="none" role="button" tabindex="0" width="${el.meta.small.width}" height="${el.meta.small.height}" volume="1"/>`
+          default:
+            console.info("Type not prepared…", el.type);
+            break;
+        }
+      });
       attachments.length && attachments.unshift('<div class="attachments">') && attachments.push('</div>');
       newsFeedEl.innerHTML += htmlToot(toot, attachments);
     });

style.scss

@@ -135,7 +135,7 @@ button {
     overflow: scroll;
     align-items: center;
     column-gap: 1em;
-    img {
+    img, video, audio {
       max-width: 380px;
       max-height: 380px;
       margin: auto;