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; --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;
@ -97,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', () => {
@ -149,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';
@ -156,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':
@ -230,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;
@ -257,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
@ -325,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 {
@ -382,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>