brian/userscripts
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Update 'DuckDuckGo Images Slideshow.user.js'

Browse Source
This commit is contained in:
Brian Buller 2023-07-10 16:52:57 +00:00
parent bf629f95c5
commit a8142a34fd
1 changed files with 77 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

109
DuckDuckGo Images Slideshow.user.js
View File

@ -1,9 +1,9 @@
// ==UserScript== // ==UserScript==
// @name DuckDuckGo Images Slideshow // @name DuckDuckGo Images Slideshow
// @namespace https://bullercodeworks.com // @namespace https://bullercodeworks.com
// @version 0.1 // @version 0.4
// @description Takes a DuckDuckGo Images page and turns it into a slideshow. // @description Takes a DuckDuckGo Images page and turns it into a slideshow.
// @author You // @author brian@bullercodeworks.com
// @match https://duckduckgo.com/* // @match https://duckduckgo.com/*
// @grant none // @grant none
// ==/UserScript== // ==/UserScript==
@ -12,7 +12,6 @@
'use strict'; 'use strict';
var init = function() { var init = function() {
console.log("Starting Slideshow");
lb.style.textAlign = 'center'; lb.style.textAlign = 'center';
lb.style.height = '100%'; lb.style.height = '100%';
lb.style.width = '100%'; lb.style.width = '100%';
@ -24,6 +23,12 @@
document.body.prepend(lb); document.body.prepend(lb);
lbimg.style.objectFit = 'cover'; lbimg.style.objectFit = 'cover';
lb.append(lbimg); 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; running = true;
showImage(0); showImage(0);
} }
@ -44,17 +49,19 @@
} }
} }
//var allImagesCache = [];
var currimg=0; var currimg=0;
var allimages = document.querySelectorAll('img'); var allimages = document.querySelectorAll('img.tile--img__img');
var timer; var timer;
var imageTime = 3000; var imageTime = 5000;
var running = false; var running = false;
var paused = false; var paused = false;
var imgcount=allimages.length; var imgcount=allimages.length;
var lb = document.createElement('div'); var lb = document.createElement('div');
var lbimg = document.createElement('img'); var lbimg = document.createElement('img');
var imgCounter = document.createElement('span');
var lastScroll = 0; var lastScroll = 0;
var cacheimg = document.createElement('img');
var tab = document.querySelector('.js-zci-link--images'); var tab = document.querySelector('.js-zci-link--images');
if(tab == null) { return; } // Need that tab if(tab == null) { return; } // Need that tab
@ -62,16 +69,29 @@
tab.addEventListener('click', addSlideshowButton); tab.addEventListener('click', addSlideshowButton);
function updateImages() { function updateImages() {
var testimages = document.querySelectorAll('img'); var testimages = document.querySelectorAll('img.tile--img__img');
var testcount = testimages.length; var testcount = testimages.length;
if(testcount > imgcount) { if(testcount > imgcount) {
console.log("Image Count Changed:"+testcount+" > "+imgcount); console.log("Loading more images...");
imgcount = testcount;
allimages = testimages; 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){ function showImage(idx){
if(paused){ if(paused){
setTimeout(()=>showImage(idx),500); setTimeout(()=>showImage(idx),500);
@ -83,8 +103,9 @@
timer = setTimeout(() => showImage(++idx), 100); timer = setTimeout(() => showImage(++idx), 100);
return; return;
} }
allimages[idx].click();
allimages[idx].scrollIntoView(); allimages[idx].scrollIntoView();
console.log("Showing Image "+idx+" :: "+allimages[idx]); lbimg.src = allimages[idx].src;
var useHeight=allimages[idx].height > allimages[idx].width; var useHeight=allimages[idx].height > allimages[idx].width;
if(useHeight){ if(useHeight){
lbimg.style.height = '100%'; lbimg.style.height = '100%';
@ -93,10 +114,29 @@
lbimg.style.height = ''; lbimg.style.height = '';
lbimg.style.width = '100%' lbimg.style.width = '100%'
} }
lbimg.src = allimages[idx].src; imgCounter.innerText = "Image " + idx + " / " + imgcount;
timer = setTimeout(() => showImage(++idx), imageTime); // 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() { function promptTime() {
clearTimeout(timer); clearTimeout(timer);
@ -105,7 +145,6 @@
showImage(currimg); showImage(currimg);
} }
function goto(){ function goto(){
clearTimeout(timer); clearTimeout(timer);
var resp = parseInt(prompt("GOTO:", currimg)); var resp = parseInt(prompt("GOTO:", currimg));
@ -116,7 +155,6 @@
} }
} }
function doGoto(num) { function doGoto(num) {
updateImages(); updateImages();
if(num > imgcount) { if(num > imgcount) {
@ -134,57 +172,64 @@
} }
} }
function pause(){ function pause(){
if(paused){ if(paused){
console.log("resume"); console.log("Resuming Slideshow");
showImage(currimg); showImage(currimg);
} else { } else {
console.log("pause"); console.log("Pausing Slideshow");
clearTimeout(timer); clearTimeout(timer);
} }
paused = !paused; paused = !paused;
} }
function rewind() { function rewind() {
console.log("rewind"); console.log("Rewinding Slideshow");
clearTimeout(timer); clearTimeout(timer);
currimg = currimg-1; currimg = currimg-1;
showImage(currimg); showImage(currimg);
} }
function fastforward() { function fastforward() {
console.log("fast forward"); console.log("Fast Forwarding Slideshow");
clearTimeout(timer); clearTimeout(timer);
currimg = currimg+1; currimg = currimg+1;
showImage(currimg); showImage(currimg);
} }
document.addEventListener('keydown',(e)=>{
document.addEventListener('keyup',(e)=>{
if(!running) { return; } if(!running) { return; }
var stopProp = false;
switch(e.code) { switch(e.code) {
case 'Space': case 'Space':
pause(); pause();
return true; stopProp = true;
case 'ArrowLeft': break;
case 'KeyH':
rewind(); rewind();
return true; stopProp = true;
case 'ArrowRight': break;
case 'KeyL':
fastforward(); fastforward();
return true; stopProp = true;
break;
case 'KeyT': case 'KeyT':
promptTime(); promptTime();
return true; stopProp = true;
break;
case 'KeyG': case 'KeyG':
goto(); goto();
return true; stopProp = true;
break;
case 'Escape': case 'Escape':
clearTimeout(timer); clearTimeout(timer);
running = false; running = false;
lb.remove(); lb.remove();
stopProp = true;
} }
if(stopProp) {
e.stopPropagation();
}
return stopProp;
}); });
})(); })();