// ==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() { console.log("Starting Slideshow"); 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 addSlideshowButton = function() { if(document.getElementById('slideshow_button') == null) { var slideshowLi = document.createElement('li'); var slideshowA = document.createElement('a'); slideshowLi.id = "slideshow_button"; slideshowLi.classList.add('zcm__item'); 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); } } var currimg=0; var allimages = document.querySelectorAll('img'); var timer; var imageTime = 3000; var running = false; var paused = false; var imgcount=allimages.length; var lb = document.createElement('div'); var lbimg = document.createElement('img'); var lastScroll = 0; var tab = document.querySelector('.js-zci-link--images'); if(tab == null) { return; } // Need that tab if(tab.classList.contains('is-active')) { addSlideshowButton(); } tab.addEventListener('click', addSlideshowButton); 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), imageTime); } 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("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 'KeyT': promptTime(); return true; case 'KeyG': goto(); return true; case 'Escape': clearTimeout(timer); running = false; lb.remove(); } }); })();