phlaym/photoprism-slideshow
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 5 Wiki Activity

Make delay after transition dynamic, increase for others

Browse Source
This commit is contained in:
Max Nuding 2023-02-19 13:41:03 +01:00
parent fa2ac4b801
commit 4f7a9d514e
Signed by: phlaym
GPG Key ID: A06651BAB6777237
1 changed files with 14 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
index.html
View File

@ -3,6 +3,7 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="theme-color" content="#ffffff" /> <meta name="theme-color" content="#ffffff" />
<title>Fotogallerie</title>
<script> <script>
const darkModePreference = window.matchMedia("(prefers-color-scheme: dark)"); const darkModePreference = window.matchMedia("(prefers-color-scheme: dark)");
document.querySelector('head meta[name=theme-color]').content = darkModePreference ? '#000' : '#fff'; document.querySelector('head meta[name=theme-color]').content = darkModePreference ? '#000' : '#fff';
@ -170,8 +171,8 @@
setTimeout(() => { setTimeout(() => {
first.style.transitionDelay = window.showTimeSeconds + 's'; first.style.transitionDelay = window.showTimeSeconds + 's';
second.style.transitionDelay = window.showTimeSeconds + 's'; second.style.transitionDelay = window.showTimeSeconds + 's';
}); }, 50);
}); }, 50);
break; break;
case 'r': { case 'r': {
window.shuffle = !window.shuffle; window.shuffle = !window.shuffle;
@ -240,12 +241,13 @@
setTimeout(() => { setTimeout(() => {
document.getElementById('first').classList.add('left'); document.getElementById('first').classList.add('left');
document.getElementById('second').classList.remove('right'); document.getElementById('second').classList.remove('right');
}); }, 50);
controls.elements['submit'].value = 'save'; controls.elements['submit'].value = 'save';
controls.elements['submit'].innerText = 'Speichern'; controls.elements['submit'].innerText = 'Speichern';
}); });
let remainingTransitions = document.querySelectorAll('img').length; let remainingTransitions = document.querySelectorAll('img').length;
let delay = 20;
addEventListener('transitionend', (event) => { addEventListener('transitionend', (event) => {
if (event.target.tagName !== 'IMG') { if (event.target.tagName !== 'IMG') {
return; return;
@ -269,12 +271,17 @@
leftElement.style.transitionDelay = window.showTimeSeconds + 's'; leftElement.style.transitionDelay = window.showTimeSeconds + 's';
// Wait until 'instant' is removed and transitionDelay applied // Wait until 'instant' is removed and transitionDelay applied
setTimeout(() => { setTimeout(() => {
// Check if the element is in the right place.
// If not, our client is too slow and needs an additional delay
if (getComputedStyle(leftElement).translate !== '200%') {
delay = Math.max(Math.floor(delay * 1.1), delay + 10);
}
leftElement.classList.remove('right'); leftElement.classList.remove('right');
rightElement.classList.add('left'); rightElement.classList.add('left');
loadNextPhoto(leftElement); loadNextPhoto(leftElement);
}); }, delay);
}); }, delay);
}); }, delay);
}); });
}); });
@ -301,6 +308,7 @@
console.error('Error fetching photo', data['error']); console.error('Error fetching photo', data['error']);
} else { } else {
document.getElementById('headline').innerText = `Zeige Album: ${data.album}`; document.getElementById('headline').innerText = `Zeige Album: ${data.album}`;
document.title = data.album;
element.src = data.src; element.src = data.src;
window.photoCount = data.count; window.photoCount = data.count;
window.displayed.push(offset); window.displayed.push(offset);