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

Compare commits

base: phlaym:v0.0.3
Branches Tags
phlaym:main
phlaym:v0.0.5
phlaym:v0.0.4
phlaym:v0.0.3
phlaym:v0.0.2
phlaym:v0.0.1
...
compare: phlaym:main
Branches Tags
phlaym:main
phlaym:v0.0.5
phlaym:v0.0.4
phlaym:v0.0.3
phlaym:v0.0.2
phlaym:v0.0.1

2 Commits
v0.0.3 ... main

Author SHA1 Message Date
Max Nuding
b7fb64e5bd
Add pause indicator 2023-02-19 15:10:20 +01:00
Max Nuding
4f7a9d514e
Make delay after transition dynamic, increase for others 2023-02-19 13:41:03 +01:00
1 changed files with 47 additions and 9 deletions
Show Stats Expand all files Collapse all files

56
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';
@ -13,12 +14,14 @@
--background: #fff; --background: #fff;
--border-light: #999; --border-light: #999;
--border-dark: #000; --border-dark: #000;
--overlay-background: #ffffff47;
} }
.dark { .dark {
--foreground: #fff; --foreground: #fff;
--background: #000; --background: #000;
--border-dark: #999; --border-dark: #999;
--border-light: #fff; --border-light: #fff;
--overlay-background: #00000066;
} }
body { body {
overflow-x: hidden; overflow-x: hidden;
@ -96,6 +99,21 @@
.hidden { .hidden {
display: none; display: none;
} }
#pauseIndicator {
position: absolute;
left: 0;
top: 0;
z-index: 1;
font-size: xx-large;
font-size: xxx-large;
background-color: var(--overlay-background);
height: 1.5em;
width: 1.5em;
text-align: center;
vertical-align: baseline;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
</style> </style>
<script> <script>
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {
@ -148,6 +166,7 @@
leftElement.classList.add('left'); leftElement.classList.add('left');
rightElement.classList.remove('right'); rightElement.classList.remove('right');
window.isPaused = false; window.isPaused = false;
document.getElementById('pauseIndicator').classList.add('hidden');
} else { } else {
const { left: leftElement, right: rightElement} = getImagePositions(); const { left: leftElement, right: rightElement} = getImagePositions();
leftElement.style.transitionDelay = '0s'; leftElement.style.transitionDelay = '0s';
@ -155,6 +174,13 @@
leftElement.classList.remove('left'); leftElement.classList.remove('left');
rightElement.classList.add('right'); rightElement.classList.add('right');
window.isPaused = true; window.isPaused = true;
const pauseIndicator = document.getElementById('pauseIndicator');
const imageRect = getImagePositions().left.getBoundingClientRect();
pauseIndicator.style.top = imageRect.top + 'px';
pauseIndicator.style.left = imageRect.left + 'px';
document.getElementById('pauseIndicator').classList.remove('hidden');
} }
break; break;
case 'ArrowRight': case 'ArrowRight':
@ -170,8 +196,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;
@ -229,6 +255,7 @@
document.getElementById('first').style.transitionDelay = window.showTimeSeconds + 's'; document.getElementById('first').style.transitionDelay = window.showTimeSeconds + 's';
document.getElementById('second').style.transitionDelay = window.showTimeSeconds + 's'; document.getElementById('second').style.transitionDelay = window.showTimeSeconds + 's';
//document.getElementById('pauseIndicator').style.top = '';
if (controls.elements['submit'].value === 'save') { if (controls.elements['submit'].value === 'save') {
return; return;
@ -240,12 +267,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;
@ -255,8 +283,11 @@
return; return;
} }
remainingTransitions = document.querySelectorAll('img').length; remainingTransitions = document.querySelectorAll('img').length;
const leftElement = document.querySelector('.left'); let leftElement = document.querySelector('.left');
const rightElement = document.querySelector('img:not([class~=left])'); let rightElement = document.querySelector('img:not([class~=left])');
if (leftElement === null) {
return;
}
leftElement.classList.add('instant'); leftElement.classList.add('instant');
leftElement.style.transitionDelay = '0s'; leftElement.style.transitionDelay = '0s';
// Wait until 'instant' and transitionDelay are applied // Wait until 'instant' and transitionDelay are applied
@ -269,12 +300,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 +337,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);
@ -317,7 +354,7 @@
const second = document.getElementById('second'); const second = document.getElementById('second');
let leftElement, rightElement; let leftElement, rightElement;
if (first.className.includes('left')) { if (first.className.includes('left') || second.className.includes('right')) {
leftElement = first; leftElement = first;
rightElement = second; rightElement = second;
} else { } else {
@ -374,6 +411,7 @@
</script> </script>
</head> </head>
<body> <body>
<div id="pauseIndicator" class="hidden">&#x23F8;</div>
<form id="controls"> <form id="controls">
<h3 id="headline">Zeige Album: </h3> <h3 id="headline">Zeige Album: </h3>
<label for="random">Zufällig</label> <label for="random">Zufällig</label>