Makes it possible to embed images/videos on Buganizer instead of downloading them

buganizer-embed-media.user.js

// ==UserScript==
// @name        Buganizer Embed Media
// @namespace   rebane
// @match       https://issuetracker.google.com/issues/*
// @match       https://issues.chromium.org/issues/*
// @grant       none
// @version     1.1
// @author      Rebane
// @description Makes it possible to embed images/videos on Buganizer instead of downloading them (2024-02-06)
// ==/UserScript==

function getMediaElement(elementType, src) {
  const mediaElement = document.createElement(elementType);
  mediaElement.classList.add("userscript-embedded-media");
  mediaElement.src = src;
  mediaElement.style.display = "block";
  mediaElement.style.maxWidth = "100%";
  mediaElement.style.border = "1px solid #de7ef8";
  if (elementType == "video") mediaElement.controls = true;
  return mediaElement;
}

function addEmbedLinks() {
  const attachmentLinks = document.querySelectorAll(".bv2-issue-attachment-link");
  if (!attachmentLinks.length) return false;
  attachmentLinks.forEach((attachmentLink) => {
    if (attachmentLink.innerText.trim() != 'Download') return;
    const mediaURL = attachmentLink.querySelector("a").href.replace("?download=true", "?download=false");
    const filename = attachmentLink.parentElement.parentElement.querySelector(".bv2-issue-attachment-filename").innerText;
    const extension  = filename.split(".").at(-1).toLowerCase();

    const isText = ["html", "js", "log", "txt"].includes(extension);
    const isVideo = ["mp4", "webm", "mkv"].includes(extension);
    const isImage = ["png", "jpg", "gif", "webp", "avif"].includes(extension);

    if (isText || extension == "svg") return;

    const embedLink = document.createElement("a");
    embedLink.classList.add("bv2-issue-attachment-link");
    embedLink.innerText = "Embed";
    embedLink.href = "#";
    embedLink.onclick = () => {
      const embeddedMedia = attachmentLink.parentElement.querySelectorAll(".userscript-embedded-media");
      if (embeddedMedia.length) {
        embedLink.innerText = "Embed";
        embeddedMedia.forEach(e => e.remove());
        return false;
      }
      embedLink.innerText = "Hide";
      const mediaElement = getMediaElement((isVideo ? "video" : "img"), mediaURL);
      if (!isImage && !isVideo) {
        mediaElement.onerror = () => {
          const videoElement = getMediaElement("video", mediaURL);
          attachmentLink.parentElement.appendChild(videoElement);
          mediaElement.remove();
        }
      }
      attachmentLink.parentElement.appendChild(mediaElement);
      return false;
    }
    attachmentLink.parentElement.appendChild(embedLink);
  });
  return true;
}

function tryAddEmbedLinks() {
  if (addEmbedLinks()) return;
  setTimeout(addEmbedLinks, 2000);
}

window.addEventListener("load", tryAddEmbedLinks);