userscripts/DuckDuckGo Images Slideshow.user.js

// ==UserScript==
// @name         DuckDuckGo Images Slideshow
// @namespace    https://bullercodeworks.com
// @version      1.0.0
// @description  Takes a DuckDuckGo Images page and adds a button to run through all of the pictures as a slideshow.
// @author       brian@bullercodeworks.com
// @match        https://duckduckgo.com/*
// @grant        none
// ==/UserScript==

(function() {
  'use strict';

  var init = function() {
    lb.style.textAlign = 'center';
    lb.style.height = '100%';
    lb.style.width = '100%';
    lb.style.position = 'fixed';
    lb.style.top = '0px';
    lb.style.left = '0px';
    lb.style.zIndex = '99999';
    lb.style.backgroundColor = 'rgba(0, 0, 0, 0.85)';
    document.body.prepend(lb);
    lbimg.style.objectFit = 'cover';
    lb.append(lbimg);
    imgCounter.style.backgroundColor = 'rgba(0, 0, 0, 0.85)';
    imgCounter.style.color = 'white';
    imgCounter.style.position = 'fixed';
    imgCounter.style.top = '0px';
    imgCounter.style.left = '0px';
    lb.append(imgCounter);
    running = true;
    showImage(0);
  }

  var addSlideshowButton = function() {
    if(document.getElementById('slideshow-button') == null) {
      var ssBtnDiv = document.createElement('div');
      var ssBtnA = document.createElement('a');
      ssBtnDiv.id = 'slideshow-button';
      ssBtnDiv.classList.add('dropdown');
      ssBtnA.innerText='Slideshow';
      ssBtnA.href='#';
      ssBtnDiv.appendChild(ssBtnA);
      ssBtnA.onclick = init;
      document.querySelector('.metabar__dropdowns').appendChild(ssBtnDiv);
    }
  }
  var removeSlideshowButton = function() {
    var ssBtn = document.getElementById('slideshow-button');
    if(ssBtn != null) {
      ssBtn.parent.delete(ssBtn);
    }
  }
  var checkAndSetSlideshowButton = function() {
    if(window.location.toString().includes('iax=images')) {
      addSlideshowButton();
      clearInterval(btnChecker);
    } else {
      removeSlideshowButton();
    }
  }

  var currimg=0;
  var allimages = document.querySelectorAll('img.tile--img__img');
  var timer;
  var imageTime = 5000;
  var running = false;
  var paused = false;
  var imgcount=allimages.length;
  var lb = document.createElement('div');
  var lbimg = document.createElement('img');
  var imgCounter = document.createElement('span');
  var lastScroll = 0;
  var cacheimg = document.createElement('img');

  function updateImages() {
    var testimages = document.querySelectorAll('img.tile--img__img');
    var testcount = testimages.length;
    if(testcount > imgcount) {
      console.log("Loading more images...");
      allimages = testimages;
      imgcount = testcount;
    }
  }
  function loadDetailPaneImage(i) {
    var detailPanes = document.querySelectorAll('.detail__pane');
    console.log(detailPanes);
    var detailPane = detailPanes[1];
    if(detailPanes.length == 2) detailPane = detailPanes[0];
    console.log(detailPane);
    allimages[i] = detailPane.querySelector('img.detail__media__img-highres');
  }

  function getImageHDSource(idx) {
    return allimages[idx].attributes.getNamedItem('data-src').nodeValue.split("&")[0];
  }
  function cacheImage(idx) {
    cacheimg.src = getImageHDSource(idx);
  }
  function showImage(idx){
    if(paused){
      setTimeout(()=>showImage(idx),500);
      return;
    }
    updateImages();
    currimg = idx;
    if(typeof allimages[idx] == 'undefined' || allimages[idx].src == "") {
      timer = setTimeout(() => showImage(++idx), 100);
      return;
    }
    allimages[idx].click();
    allimages[idx].scrollIntoView();
    lbimg.src = allimages[idx].src;
    var useHeight=allimages[idx].height > allimages[idx].width;
    if(useHeight){
      lbimg.style.height = '100%';
      lbimg.style.width = '';
    } else {
      lbimg.style.height = '';
      lbimg.style.width = '100%'
    }
    imgCounter.innerText = "Image " + idx + " / " + imgcount;
    // Load HD Version
    setTimeout(()=>loadOrigImg(idx), 100);
  }
  function loadOrigImg(idx) {
    var detailPanes = document.querySelectorAll('.detail__pane');
    if(detailPanes.length == 0) {
      console.log('No detail panes');
      return;
    }
    var detailPane = detailPanes[1];
    if(detailPanes.length == 2) detailPane = detailPanes[0];
    var imgsrc = detailPane.querySelector('img.detail__media__img-highres').src;
    var newImg = new Image;
    newImg.onload = function() {
      lbimg.src = this.src;
      timer = setTimeout(() => showImage(++idx), imageTime);
    }
    newImg.onerror=function() {
      timer = setTimeout(() => showImage(++idx), imageTime);
    }
    newImg.src = imgsrc
  }

  function promptTime() {
    clearTimeout(timer);
    var resp = parseFloat(prompt("Image Time (in seconds):", imageTime/1000));
    imageTime = resp * 1000;
    showImage(currimg);
  }

  function goto(){
    clearTimeout(timer);
    var resp = parseInt(prompt("GOTO:", currimg));
    if(resp != NaN) {
      doGoto(resp)
    } else {
      alert("Not a Number: "+resp)
    }
  }

  function doGoto(num) {
    updateImages();
    if(num > imgcount) {
      if(window.scrollY == lastScroll) {
        alert("Looks like there aren't that many images.");
        return;
      } else {
        window.scrollTo(0,document.body.scrollHeight);
        lastScroll = window.scrollY;
        setTimeout(()=>doGoto(num), 2000)
      }
    }
    if(num != NaN) {
      showImage(num);
    }
  }

  function pause(){
    if(paused){
      console.log("Resuming Slideshow");
      showImage(currimg);
    } else {
      console.log("Pausing Slideshow");
      clearTimeout(timer);
    }
    paused = !paused;
  }

  function rewind() {
    console.log("Rewinding Slideshow");
    clearTimeout(timer);
    currimg = currimg-1;
    showImage(currimg);
  }

  function fastforward() {
    console.log("Fast Forwarding Slideshow");
    clearTimeout(timer);
    currimg = currimg+1;
    showImage(currimg);
  }

  document.addEventListener('keydown',(e)=>{
    if(!running) { return; }
    var stopProp = false;
    switch(e.code) {
      case 'Space':
        pause();
        stopProp = true;
        break;
      case 'KeyH':
        rewind();
        stopProp = true;
        break;
      case 'KeyL':
        fastforward();
        stopProp = true;
        break;
      case 'KeyT':
        promptTime();
        stopProp = true;
        break;
      case 'KeyG':
        goto();
        stopProp = true;
        break;
      case 'Escape':
        clearTimeout(timer);
        running = false;
        lb.remove();
        stopProp = true;
    }
    if(stopProp) {
      e.stopPropagation();
    }
    return stopProp;
  });

  var btnChecker = setInterval(checkAndSetSlideshowButton, 500);
})();