☰

e621 Thumbnail Enhancer 2

Resizes thumbnails on e621.net and replaces them with hi-rez version. Modified for the new site design sometime around 2020-03-06

// ==UserScript==
// @name         e621 Thumbnail Enhancer 2
// @version      2.2
// @description  Resizes thumbnails on e621.net and replaces them with hi-rez version. Modified for the new site design sometime around 2020-03-06
// @author       justrunmyscripts
// @include      *://*e621.net*
// @grant        GM.xmlHttpRequest
// @namespace    https://sleazyfork.org/en/users/96703-justrunmyscripts
// @run-at       document-end
// ==/UserScript==


// original script creator https://greasyfork.org/de/users/398891
// to edit the size of the thumbnails, change the PICTURE_SIZE variable under

try {

  let PICTURE_SIZE = 24; // this number is in vw units (percent of screen width!)

  let postContainerIdentifier;
  const path = window.location.pathname;
  switch(true) {
    // case '/explore/posts/popular' === path:
    //   postContainerIdentifier = '#a-popular';
    //   break;
    // case /\/pools\/.*/.test(path):
    //   postContainerIdentifier = '#c-pools section:last-child';
    //   PICTURE_SIZE = 46;
    //   break;
    // case '/favorites' === path:
    //   postContainerIdentifier = '#posts .posts-container';
    //   break;
    default:
      postContainerIdentifier = '#posts .posts-container';
      break;
  }

  let sty =document.createElement("style");
  sty.innerHTML=[
    ""
    ,".thumbEnh_cont {"
    ,"    display: flex;"
    ,"    flex-flow: row wrap;"
    ,"    justify-content: space-between;"
    ,"    gap: 10px;"
    ,"}"
    ,".thumbEnh_cont img.thumbEnh_img {"
    ,"    max-height: 100%;"
    ,"    max-width: 100%;"
    ,"}"
    ,".thumbEnh_cont video.thumbEnh_video {"
    ,"    height: 100%;"
    ,"    width: 100%;"
    ,"}"
    ,".thumbEnh_cont article.thumbnail {"
    ,`    width: ${PICTURE_SIZE}vw !important;`
    ,`    max-width: unset;`
    ,"}"
    ,"article.thumbnail a {"
    ,"    max-width: fit-content;"
    ,"    max-height: fit-content;"
    ,"}"
  ].join("");
  document.head.appendChild(sty);


  /* Replace image thumbnails with higher resolution */
  class ImageFetcher {
    constructor (originalArticle) {
      this.parentArticle = originalArticle;
      this.originalImage = originalArticle.querySelector('img');
      this.origSrc = this.originalImage.src;
      this.originalImage.className = "thumbEnh_img";

      if (this.isWebm()) {
      	this.replaceImageWithVideo();
      }
      else if (this.isGif()){
        this.originalImage.src = this.getOrigFileURL();
      }
      else if (this.hasLargeFile()){
        this.originalImage.src = this.getLargeFileURL();
        this.originalImage.addEventListener('error', (() => {
        	this.originalImage.src = this.getOrigFileURL();
        }).bind(this));
      } else {
        this.originalImage.src = this.getOrigFileURL();
      }
    }

    hasLargeFile() {
      return !!this.getLargeFileURL();
    }

    isGif() {
      return !!this.getOrigFileURL().endsWith('.gif');
    }

    isWebm() {
      return !!this.getOrigFileURL().endsWith('.webm');
    }

    getLargeFileURL() {
      return this.parentArticle.getAttribute('data-large-url');
    }

    getOrigFileURL() {
      return this.parentArticle.getAttribute('data-file-url');
    }

    replaceImageWithVideo() {
      const video = document.createElement('video');
      video.setAttribute('controls', true);
      video.setAttribute('class', 'thumbEnh_video');
      video.setAttribute('src', this.getOrigFileURL());

    	const parent = this.originalImage.parentNode;
      parent.replaceChild(video, this.originalImage)
    }
  }

  const main = () => {
    let contDiv = document.querySelector(postContainerIdentifier);
    contDiv.className = "thumbEnh_cont";

    let arts = document.querySelectorAll('article.thumbnail');
    for (art of arts) {
      new ImageFetcher(art);
    }

    // remove extra sources, since we're just using the "high rez" version anyways!
    let sources = document.querySelectorAll('article.thumbnail source');
    for (source of sources) {
      let parent = source.parentNode;
      parent.removeChild(source);
    }
  };

  main();

} catch (e) {
  // due to the way greasemonkey 'traps' errors, it kinda hides where the problem is!
  // this is an attempt at "fixing" that
  console.error(e);
}