From 4f7a9d514e04b6fd5d82ccdb2c55b5b9f97ed9df Mon Sep 17 00:00:00 2001
From: Max Nuding <max.nuding@icloud.com>
Date: Sun, 19 Feb 2023 13:41:03 +0100
Subject: [PATCH] Make delay after transition dynamic, increase for others

---
 index.html | 20 ++++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)
diff --git a/index.html b/index.html
index 164e056..acbc611 100644
--- a/index.html
+++ b/index.html
@@ -3,6 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="theme-color" content="#ffffff" />
+    <title>Fotogallerie</title>
     <script>
       const darkModePreference = window.matchMedia("(prefers-color-scheme: dark)");
       document.querySelector('head meta[name=theme-color]').content = darkModePreference ? '#000' : '#fff';
@@ -170,8 +171,8 @@
                 setTimeout(() => {
                   first.style.transitionDelay = window.showTimeSeconds + 's';
                   second.style.transitionDelay = window.showTimeSeconds + 's';
-                });
-              });
+                }, 50);
+              }, 50);
               break;
             case 'r': {
               window.shuffle = !window.shuffle;
@@ -240,12 +241,13 @@
           setTimeout(() => {
             document.getElementById('first').classList.add('left');
             document.getElementById('second').classList.remove('right');
-          });
+          }, 50);
           controls.elements['submit'].value = 'save';
           controls.elements['submit'].innerText = 'Speichern';
         });
 
         let remainingTransitions = document.querySelectorAll('img').length;
+        let delay = 20;
         addEventListener('transitionend', (event) => {
           if (event.target.tagName !== 'IMG') {
             return;
@@ -269,12 +271,17 @@
               leftElement.style.transitionDelay = window.showTimeSeconds + 's';
               // Wait until 'instant' is removed and transitionDelay applied
               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');
                 rightElement.classList.add('left');
                 loadNextPhoto(leftElement);
-              });
-            });
-          });
+              }, delay);
+            }, delay);
+          }, delay);
         });
       });
 
@@ -301,6 +308,7 @@
             console.error('Error fetching photo', data['error']);
           } else {
             document.getElementById('headline').innerText = `Zeige Album: ${data.album}`;
+            document.title = data.album;
             element.src = data.src;
             window.photoCount = data.count;
             window.displayed.push(offset);
