userscripts/DuckDuckGo Images Slideshow.user.js

// ==UserScript==
// @name         DuckDuckGo Images Slideshow
// @namespace    https://bullercodeworks.com
// @version      0.1
// @description  Takes a DuckDuckGo Images page and turns it into a slideshow.
// @author       You
// @match        https://duckduckgo.com/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
    var init = function() {
        var tab = document.querySelector('.js-zci-link--images');
        if(!tab.classList.contains('is-active')) {
            tab.click();
        }
        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);
        running = true;
        showImage(0);
    }
    var allimages = document.querySelectorAll('img');
    var timer;
    var running = false;
    var paused = false;
    var lb = document.createElement('div');
    var lbimg = document.createElement('img');
    var imgcount=allimages.length;
    var currimg=0;
    var slideshowLi = document.createElement('li');
    slideshowLi.classList.add('zcm__item');
    var slideshowA = document.createElement('a');
    slideshowA.classList.add('zcm__link');
    slideshowA.classList.add('js-zci-link');
    slideshowA.innerText="Slideshow";
    slideshowA.href='#';
    slideshowLi.appendChild(slideshowA);
    slideshowA.onclick = init;
    document.getElementById('duckbar_static').appendChild(slideshowLi);

    function updateImages() {
        var testimages = document.querySelectorAll('img');
        var testcount = testimages.length;
        if(testcount > imgcount) {
            console.log("Image Count Changed:"+testcount+" > "+imgcount);
            imgcount = testcount;
            allimages = testimages;
        }
    }
    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].scrollIntoView();
        console.log("Showing Image "+idx+" :: "+allimages[idx]);
        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%'
        }
        lbimg.src = allimages[idx].src;
        timer = setTimeout(() => showImage(++idx), 3000);
    }
    function goto(){
        clearTimeout(timer);
        var resp = parseInt(prompt("GOTO:", currimg));
        if(resp != NaN) {
            doGoto(resp)
        } else {
            alert("Not a Number: "+resp)
        }
    }
    var lastScroll = 0;
    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("resume");
            showImage(currimg);
        } else {
            console.log("pause");
            clearTimeout(timer);
        }
        paused = !paused;
    }
    function rewind() {
        console.log("rewind");
        clearTimeout(timer);
        currimg = currimg-1;
        showImage(currimg);
    }
    function fastforward() {
        console.log("fast forward");
        clearTimeout(timer);
        currimg = currimg+1;
        showImage(currimg);
    }
    document.addEventListener('keyup',(e)=>{
        if(!running) { return; }
        switch(e.code) {
            case 'Space':
                pause();
                return true;
            case 'ArrowLeft':
                rewind();
                return true;
            case 'ArrowRight':
                fastforward();
                return true;
            case 'KeyG':
                goto();
                return true;
            case 'Escape':
                clearTimeout(timer);
                running = false;
                lb.remove();
        }
    });
})();