public/chatclient/preview.js

export function createAttachmentPreviewController() {
  const root = document.querySelector("#attachment-preview");
  const body = document.querySelector("#attachment-preview-body");
  const title = document.querySelector("#attachment-preview-title");
  const closeButton = document.querySelector("#attachment-preview-close");

  closeButton.addEventListener("click", close);
  root.addEventListener("click", (event) => {
    if (event.target instanceof HTMLElement && event.target.hasAttribute("data-close-preview")) {
      close();
    }
  });

  document.addEventListener("keydown", (event) => {
    if (event.key === "Escape" && !root.hidden) {
      close();
    }
  });

  return { open, close };

  function open(attachment) {
    title.textContent = attachment.name;
    body.innerHTML = "";
    body.appendChild(renderPreview(attachment));
    root.hidden = false;
  }

  function close() {
    root.hidden = true;
    body.innerHTML = "";
  }
}

function renderPreview(attachment) {
  if (attachment.kind === "image") {
    const image = document.createElement("img");
    image.src = attachment.previewUrl;
    image.alt = attachment.name;
    image.className = "attachment-preview__image";
    return image;
  }

  const wrap = document.createElement("div");
  wrap.className = "attachment-preview__audio-wrap";

  const audio = document.createElement("audio");
  audio.controls = true;
  audio.src = attachment.previewUrl;
  audio.className = "attachment-preview__audio";
  wrap.appendChild(audio);
  return wrap;
}