doodstream-big-images.js

// ==UserScript==
// @name         Big images
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        https://doodstream.com/search
// @icon         https://www.google.com/s2/favicons?sz=64&domain=doodstream.com
// @grant        none
// ==/UserScript==

(function () {
  "use strict";

  const CUSTOM_CSS = `
.buttons-modal {
position: fixed;
display: flex;
gap: 1rem;
top: 0rem;
left: 40%;
/* background-color: white; */
border-radius: 1rem;
/* padding: 0.25rem; */
z-index: 99999;
scale: 0.7;

}

.search-files ul:not(.pagination) li .icon {
     width: auto;
     height: auto;
}
.search-files ul:not(.pagination) li .icon img {
     width: auto;
     height: 500px;
     object-fit: unset;
}
.pagination {
    z-index: 99999;
    position: fixed;
    top: 0;
    left: 60vw;
    background: gray;
    padding: 0.5rem;
}

 /* tailwind */
 .grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
 }
`;

  let cssEl = document.createElement("style");
  cssEl.textContent = CUSTOM_CSS;
  document.head.append(cssEl);

  function updateThumbnails(imgType) {
    // thumb, splash
    // * load the previous mode from localstorage
    if (!imgType) {
      imgType = localStorage.getItem("thumb_mode");
    } else {
      localStorage.setItem("thumb_mode", imgType);
    }

    console.log("replacing img src with high quality " + imgType);
    let searchFilesEl = document.querySelector(".search-files").children[1];
    searchFilesEl.querySelectorAll("img").forEach((img) => {
      let urlParts = img.src.split("/");
      let domain = urlParts[2];
      let imgName = urlParts[4];
      //   img.setAttribute("data-trigger", "updateThumbnails"); // * not reliable as internal script doesnt clear it
      img.src = `http://${domain}/${imgType}/${imgName}`;
    });
  }

  let divEl = document.createElement("div");
  divEl.classList.add("buttons-modal");

  let btnEl = document.createElement("button");
  //document.body.append(btnEl)
  btnEl.innerHTML = "HD Thumbs";
  btnEl.className = "btn btn-primary";
  btnEl.addEventListener("click", () => updateThumbnails("thumb"));

  let btnEl2 = document.createElement("button");
  btnEl2.innerHTML = "Splash";
  btnEl2.style.left = "10rem";
  btnEl2.className = "btn btn-primary";
  btnEl2.addEventListener("click", () => updateThumbnails("splash"));

  divEl.append(btnEl);
  divEl.append(btnEl2);
  document.body.append(divEl);

  const searchInputEl = document.querySelector(".search-videos > input");
  searchInputEl.value = "avengers";
  const event = new Event("input");
  searchInputEl.dispatchEvent(event);

  function getContainerEl() {
    return document.querySelector(".the_box > ul");
  }

  function getTheBoxEl() {
    return document.querySelector(".the_box");
  }

  function sleep(ms) {
    return new Promise((resolve) => setTimeout(resolve, ms));
  }

  function applyGridClass() {
    console.log("Applying grid class");
    let containerEl = getContainerEl();
    containerEl.classList.add("grid");
    containerEl.setAttribute("data-trigger", "applyGridClass");
    containerEl.children.forEach((item) => (item.style.width = "45vw"));
  }

  async function onDomUpdate(mutList, observer) {
    console.log("DOM UPDATED");
    console.log(mutList);

    // * detect if grid class triggered it
    // if (mutList[0].attributeName == "class") {
    //   console.log("@@ grid class triggered it");
    //   return;
    // }

    // * detect if script triggers
    let triggerer = mutList[0]?.target?.dataset?.trigger;
    if (triggerer) {
      console.log("@@ update by ", triggerer);
      return;
    }

    if (mutList[0]?.target?.currentSrc?.includes("http://")) {
      console.log("@@update by updateThumbnails");
      return;
    }

    await sleep(200);
    applyGridClass();
    updateThumbnails();
  }

  var observer = new MutationObserver(onDomUpdate);
  window.onload = async () => {
    await sleep(1000);
    observer.observe(getTheBoxEl(), {
      attributes: true,
      childList: true,
      subtree: true,
    });
    applyGridClass();
    updateThumbnails();
  };
})();