☰

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

질문, 리뷰하거나, 이 스크립트를 신고하세요. 
  1. // ==UserScript==
  2. // @name         e621 Thumbnail Enhancer 2
  3. // @version      2.1
  4. // @description  Resizes thumbnails on e621.net and replaces them with hi-rez version. Modified for the new site design sometime around 2020-03-06
  5. // @author       justrunmyscripts
  6. // @include      *://*e621.net*
  7. // @grant        GM.xmlHttpRequest
  8. // @namespace    https://sleazyfork.org/en/users/96703-justrunmyscripts
  9. // @run-at       document-end
  10. // ==/UserScript==
  11.  
  12.  
  13. // original script creator https://greasyfork.org/de/users/398891
  14. // to edit the size of the thumbnails, change the PICTURE_SIZE variable under
  15.  
  16. try {
  17.  
  18.   let PICTURE_SIZE = 24; // this number is in vw units (percent of screen width!)
  19.  
  20.   let postContainerIdentifier;
  21.   const path = window.location.pathname;
  22.   switch(true) {
  23.     // case '/explore/posts/popular' === path:
  24.     //   postContainerIdentifier = '#a-popular';
  25.     //   break;
  26.     // case /\/pools\/.*/.test(path):
  27.     //   postContainerIdentifier = '#c-pools section:last-child';
  28.     //   PICTURE_SIZE = 46;
  29.     //   break;
  30.     // case '/favorites' === path:
  31.     //   postContainerIdentifier = '#posts .posts-container';
  32.     //   break;
  33.     default:
  34.       postContainerIdentifier = '#posts .posts-container';
  35.       break;
  36.   }
  37.  
  38.   let sty =document.createElement("style");
  39.   sty.innerHTML=[
  40.     ""
  41.     ,".thumbEnh_cont {"
  42.     ,"    display: flex;"
  43.     ,"    flex-flow: row wrap;"
  44.     ,"    justify-content: space-between;"
  45.     ,"    gap: 10px;"
  46.     ,"}"
  47.     ,".thumbEnh_cont img.thumbEnh_img {"
  48.     ,"    max-height: 100%;"
  49.     ,"    max-width: 100%;"
  50.     ,"}"
  51.     ,".thumbEnh_cont video.thumbEnh_video {"
  52.     ,"    height: 100%;"
  53.     ,"    width: 100%;"
  54.     ,"}"
  55.     ,".thumbEnh_cont article.thumbnail {"
  56.     ,`    width: ${PICTURE_SIZE}vw !important;`
  57.     ,`    max-width: unset;`
  58.     ,"}"
  59.   ].join("");
  60.   document.head.appendChild(sty);
  61.  
  62.  
  63.   /* Replace image thumbnails with higher resolution */
  64.   class ImageFetcher {
  65.     constructor (originalArticle) {
  66.       this.parentArticle = originalArticle;
  67.       this.originalImage = originalArticle.querySelector('img');
  68.       this.origSrc = this.originalImage.src;
  69.       this.originalImage.className = "thumbEnh_img";
  70.  
  71.       if (this.isWebm()) {
  72.       	this.replaceImageWithVideo();
  73.       }
  74.       else if (this.isGif()){
  75.         this.originalImage.src = this.getOrigFileURL();
  76.       }
  77.       else if (this.hasLargeFile()){
  78.         this.originalImage.src = this.getLargeFileURL();
  79.         this.originalImage.addEventListener('error', (() => {
  80.         	this.originalImage.src = this.getOrigFileURL();
  81.         }).bind(this));
  82.       } else {
  83.         this.originalImage.src = this.getOrigFileURL();
  84.       }
  85.     }
  86.  
  87.     hasLargeFile() {
  88.       return !!this.getLargeFileURL();
  89.     }
  90.  
  91.     isGif() {
  92.       return !!this.getOrigFileURL().endsWith('.gif');
  93.     }
  94.  
  95.     isWebm() {
  96.       return !!this.getOrigFileURL().endsWith('.webm');
  97.     }
  98.  
  99.     getLargeFileURL() {
  100.       return this.parentArticle.getAttribute('data-large-url');
  101.     }
  102.  
  103.     getOrigFileURL() {
  104.       return this.parentArticle.getAttribute('data-file-url');
  105.     }
  106.  
  107.     replaceImageWithVideo() {
  108.       const video = document.createElement('video');
  109.       video.setAttribute('controls', true);
  110.       video.setAttribute('class', 'thumbEnh_video');
  111.       video.setAttribute('src', this.getOrigFileURL());
  112.  
  113.     	const parent = this.originalImage.parentNode;
  114.       parent.replaceChild(video, this.originalImage)
  115.     }
  116.   }
  117.  
  118.   const main = () => {
  119.     let contDiv = document.querySelector(postContainerIdentifier);
  120.     contDiv.className = "thumbEnh_cont";
  121.  
  122.     let arts = document.querySelectorAll('article.thumbnail');
  123.     for (art of arts) {
  124.       new ImageFetcher(art);
  125.     }
  126.  
  127.     // remove extra sources, since we're just using the "high rez" version anyways!
  128.     let sources = document.querySelectorAll('article.thumbnail source');
  129.     for (source of sources) {
  130.       let parent = source.parentNode;
  131.       parent.removeChild(source);
  132.     }
  133.   };
  134.  
  135.   main();
  136.  
  137. } catch (e) {
  138.   // due to the way greasemonkey 'traps' errors, it kinda hides where the problem is!
  139.   // this is an attempt at "fixing" that
  140.   console.error(e);
  141. }