Kara YT Embed Fix

// ==UserScript==
// @name         Kara YT Embed Fix
// @namespace    karachan.org
// @version      0.11
// @description  Naprawia zepsute embedy na kara
// @downloadURL  https://gist.github.com/kotjea2137/274d94980cd6867c60bf57c6b2cc5cb8/raw
// @updateURL    https://gist.github.com/kotjea2137/274d94980cd6867c60bf57c6b2cc5cb8/raw
// @author       Anonymous
// @match        *://*.karachan.org/*
// @exclude      http://www.karachan.org/*/src/*
// @exclude      https://www.karachan.org/*/src/*
// @exclude      http://karachan.org/*/src/*
// @exclude      https://karachan.org/*/src/*
// @grant        none
// ==/UserScript==

(function () {
  "use strict";

  const embeds = document.querySelectorAll("iframe");

  const fetchVideoTitle = async (id) => {
    const body = await fetch(
      `https://youtube.com/oembed?url=https://www.youtube.com/watch?v=${id}&format=json`
    );

    if (body.status === 404) return "Film nie istnieje";
    if (body.status === 401) return "Nie można pobrać tytułu";

    const json = await body.json();

    return json.title;
  };

  const createThumbnail = (embed, newLink) => {
    const videoSuffix = embed.src.split("/").pop();

    const newDiv = document.createElement("div");
    newDiv.style.cssText = "position: relative;";

    const newImage = document.createElement("img");
    newImage.src = `https://i.ytimg.com/vi/${videoSuffix}/hqdefault.jpg`;
    newImage.style.cssText = "width:250px;height:250px;object-fit:cover;";

    newLink.appendChild(newImage);
    newDiv.appendChild(newLink);

    embed.parentNode.replaceChild(newDiv, embed);
    return newDiv;
  };

  const createTitle = async (embed) => {
    const title = await fetchVideoTitle(embed.src.split("/").pop());

    const newTitle = document.createElement("div");
    newTitle.style.cssText =
      "position: absolute;top: 10px;left: 10px;color: white;font-family: Arial, Helvetica, sans-serif;font-weight: bold;text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;";
    newTitle.innerHTML = title;

    return newTitle;
  };

  const createYoutubeIcon = () => {
    const youtubeIcon = document.createElement("img");
    youtubeIcon.src = `https://www.freeiconspng.com/uploads/white-youtube-logo-png-28.png`;
    youtubeIcon.style.cssText = "width:80px;height:60px;";

    return youtubeIcon;
  };

  const createYoutubeIconDiv = (newLink, youtubeIcon) => {
    const youtubeIconDiv = document.createElement("div");
    youtubeIconDiv.style.cssText = "position: absolute;top: 193px;left: 5px;";

    newLink.appendChild(youtubeIcon);
    youtubeIconDiv.appendChild(newLink);

    return youtubeIconDiv;
  };

  const createYoutubeLink = (embed) => {
    const videoSuffix = embed.src.split("/").pop();

    const newLink = document.createElement("a");
    newLink.href = `http://www.youtube.com/watch?v=${videoSuffix}`;
    newLink.target = "_blank";

    return newLink;
  };

  const loopThroughEmbeds = async (embeds) => {
    const thumbnailsArray = [];
    const ytIcon = createYoutubeIcon();

    for (const embed of embeds) {
      if (embed.src.includes("youtube")) {
        const ytLink = createYoutubeLink(embed);
        thumbnailsArray.push(createThumbnail(embed, ytLink));
      }
    }

    let embedCounter = 0;

    for (const embed of embeds) {
      if (embed.src.includes("youtube")) {
        const ytLink = createYoutubeLink(embed);
        thumbnailsArray[embedCounter].appendChild(await createTitle(embed));
        thumbnailsArray[embedCounter].appendChild(
          createYoutubeIconDiv(ytLink, ytIcon.cloneNode())
        );
        embedCounter++;
      }
    }
  };

  const observeIncomingEmbeds = () => {
    const threads = document.querySelector(".thread.reqCaptcha");
    const options = { childList: true };

    const callback = (mutations) => {
      for (const mutation of mutations) {
        if (mutation.type === "childList") {
          const incomingEmbeds =
            mutation.addedNodes[0].querySelectorAll("iframe");

          loopThroughEmbeds(incomingEmbeds);
        }
      }
    };

    const observer = new MutationObserver(callback);
    observer.observe(threads, options);
  };

  loopThroughEmbeds(embeds);
  observeIncomingEmbeds();
})();