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

Add pause indicator

Browse Source
This commit is contained in:
Max Nuding 2023-02-19 15:10:20 +01:00
parent 4f7a9d514e
commit b7fb64e5bd
Signed by: phlaym
GPG Key ID: A06651BAB6777237
1 changed files with 33 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
index.html
View File

@ -14,12 +14,14 @@
--background: #fff;
--border-light: #999;
--border-dark: #000;
--overlay-background: #ffffff47;
}
.dark {
--foreground: #fff;
--background: #000;
--border-dark: #999;
--border-light: #fff;
--overlay-background: #00000066;
}
body {
overflow-x: hidden;
@ -97,6 +99,21 @@
.hidden {
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>
<script>
document.addEventListener('DOMContentLoaded', () => {
@ -149,6 +166,7 @@
leftElement.classList.add('left');
rightElement.classList.remove('right');
window.isPaused = false;
document.getElementById('pauseIndicator').classList.add('hidden');
} else {
const { left: leftElement, right: rightElement} = getImagePositions();
leftElement.style.transitionDelay = '0s';
@ -156,6 +174,13 @@
leftElement.classList.remove('left');
rightElement.classList.add('right');
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;
case 'ArrowRight':
@ -230,6 +255,7 @@
document.getElementById('first').style.transitionDelay = window.showTimeSeconds + 's';
document.getElementById('second').style.transitionDelay = window.showTimeSeconds + 's';
//document.getElementById('pauseIndicator').style.top = '';
if (controls.elements['submit'].value === 'save') {
return;
@ -257,8 +283,11 @@
return;
}
remainingTransitions = document.querySelectorAll('img').length;
const leftElement = document.querySelector('.left');
const rightElement = document.querySelector('img:not([class~=left])');
let leftElement = document.querySelector('.left');
let rightElement = document.querySelector('img:not([class~=left])');
if (leftElement === null) {
return;
}
leftElement.classList.add('instant');
leftElement.style.transitionDelay = '0s';
// Wait until 'instant' and transitionDelay are applied
@ -325,7 +354,7 @@
const second = document.getElementById('second');
let leftElement, rightElement;
if (first.className.includes('left')) {
if (first.className.includes('left') || second.className.includes('right')) {
leftElement = first;
rightElement = second;
} else {
@ -382,6 +411,7 @@
</script>
</head>
<body>
<div id="pauseIndicator" class="hidden">&#x23F8;</div>
<form id="controls">
<h3 id="headline">Zeige Album: </h3>
<label for="random">Zufällig</label>