From a8142a34fddbddde03b2d5646ba879d864f59b05 Mon Sep 17 00:00:00 2001 From: Brian Buller Date: Mon, 10 Jul 2023 16:52:57 +0000 Subject: [PATCH] Update 'DuckDuckGo Images Slideshow.user.js' --- DuckDuckGo Images Slideshow.user.js | 109 ++++++++++++++++++++-------- 1 file changed, 77 insertions(+), 32 deletions(-) diff --git a/DuckDuckGo Images Slideshow.user.js b/DuckDuckGo Images Slideshow.user.js index 2dca45a..ac40802 100644 --- a/DuckDuckGo Images Slideshow.user.js +++ b/DuckDuckGo Images Slideshow.user.js @@ -1,9 +1,9 @@ // ==UserScript== // @name DuckDuckGo Images Slideshow // @namespace https://bullercodeworks.com -// @version 0.1 +// @version 0.4 // @description Takes a DuckDuckGo Images page and turns it into a slideshow. -// @author You +// @author brian@bullercodeworks.com // @match https://duckduckgo.com/* // @grant none // ==/UserScript== @@ -12,7 +12,6 @@ 'use strict'; var init = function() { - console.log("Starting Slideshow"); lb.style.textAlign = 'center'; lb.style.height = '100%'; lb.style.width = '100%'; @@ -24,6 +23,12 @@ 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); } @@ -44,17 +49,19 @@ } } + //var allImagesCache = []; var currimg=0; - var allimages = document.querySelectorAll('img'); + var allimages = document.querySelectorAll('img.tile--img__img'); var timer; - var imageTime = 3000; + 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'); var tab = document.querySelector('.js-zci-link--images'); if(tab == null) { return; } // Need that tab @@ -62,16 +69,29 @@ tab.addEventListener('click', addSlideshowButton); function updateImages() { - var testimages = document.querySelectorAll('img'); + var testimages = document.querySelectorAll('img.tile--img__img'); var testcount = testimages.length; if(testcount > imgcount) { - console.log("Image Count Changed:"+testcount+" > "+imgcount); - imgcount = testcount; + 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); @@ -83,8 +103,9 @@ timer = setTimeout(() => showImage(++idx), 100); return; } + allimages[idx].click(); allimages[idx].scrollIntoView(); - console.log("Showing Image "+idx+" :: "+allimages[idx]); + lbimg.src = allimages[idx].src; var useHeight=allimages[idx].height > allimages[idx].width; if(useHeight){ lbimg.style.height = '100%'; @@ -93,10 +114,29 @@ lbimg.style.height = ''; lbimg.style.width = '100%' } - lbimg.src = allimages[idx].src; - timer = setTimeout(() => showImage(++idx), imageTime); + 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); @@ -105,7 +145,6 @@ showImage(currimg); } - function goto(){ clearTimeout(timer); var resp = parseInt(prompt("GOTO:", currimg)); @@ -116,7 +155,6 @@ } } - function doGoto(num) { updateImages(); if(num > imgcount) { @@ -134,57 +172,64 @@ } } - function pause(){ if(paused){ - console.log("resume"); + console.log("Resuming Slideshow"); showImage(currimg); } else { - console.log("pause"); + console.log("Pausing Slideshow"); clearTimeout(timer); } paused = !paused; } - function rewind() { - console.log("rewind"); + console.log("Rewinding Slideshow"); clearTimeout(timer); currimg = currimg-1; showImage(currimg); } - function fastforward() { - console.log("fast forward"); + console.log("Fast Forwarding Slideshow"); clearTimeout(timer); currimg = currimg+1; showImage(currimg); } - - document.addEventListener('keyup',(e)=>{ + document.addEventListener('keydown',(e)=>{ if(!running) { return; } + var stopProp = false; switch(e.code) { case 'Space': pause(); - return true; - case 'ArrowLeft': + stopProp = true; + break; + case 'KeyH': rewind(); - return true; - case 'ArrowRight': + stopProp = true; + break; + case 'KeyL': fastforward(); - return true; + stopProp = true; + break; case 'KeyT': promptTime(); - return true; + stopProp = true; + break; case 'KeyG': goto(); - return true; + stopProp = true; + break; case 'Escape': clearTimeout(timer); running = false; lb.remove(); + stopProp = true; } + if(stopProp) { + e.stopPropagation(); + } + return stopProp; }); })(); \ No newline at end of file