4chan gallerification w/ the g key

4changal.user.js

// ==UserScript==
// @name         4changal
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  turns 4chan pages into galleries
// @author       Meshiest
// @match        https://boards.4chan.org/*/thread/*
// @grant        none
// @updateurl    https://gist.github.com/Meshiest/9d56bc34a3ee3b127e93bb2680ed14e8/raw/4changal.user.js
// ==/UserScript==

(function() {

  let s;
  const init=()=>{
    const l = Array.from(document.querySelectorAll(".fileThumb")).map(a=>a.href);
    const g = l.length;
    let a = 0;
    const w=(a,i)=>a.endsWith('webm')
      ?`<video ${typeof i==='undefined'?'controls loop autoplay':''} id="i${i}" src="${a}" type="video/webm"></video>`
      :`<img id="i${i}" src="${a}">`
    document.body.innerHTML=`<style>
    #g{
      position:fixed !important;
      top:0;left:0;height: 100vh;width:100vw;margin:0;padding:0;
      display:flex;align-items:stretch;
    }
    #i{
      position: relative:
      display:flex;
      align-items:stretch;
      flex:1;
    }
    #i img, #i video {
      flex:1;
      width: 100%;
      height: 100%;
    }
    #i img{
      object-fit: contain;
    }
    #t{
      position: fixed;
      top: 0;
      right: 0;
      width: 100px;
      height: 100%;
      overflow: hidden;
    }
    #t img, #t video {
      display: block;
      width: 100px;
      height: 100px;
    }
    #t img {
      object-fit: cover;
    }
    </style><div id="x"></div>
    <div id="g">
      <div id="i"></div>
      <div id="t">${l.map(w).join('')}</div>
    </div>`

    s=(b)=>{
      a+=b+g;
      a%=g;
      x.innerHTML=`<style>#i${a}{border:5px solid black;}</style>`;
      i.innerHTML=w(l[a]);
      document.querySelector('#i'+a).scrollIntoView({block: 'center'});
    }
    s(0);
  };

  document.onkeydown = function (e){
    e=e||window.event;
    if(e.keyCode==37) s&&s(-1);
    else if(e.keyCode==39) s&&s(1)
    else if(e.keyCode==71) s||init()
  };

})();