Add pause indicator

composer.lock

@@ -0,0 +1,202 @@
+{
+    "_readme": [
+        "This file locks the dependencies of your project to a known state",
+        "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
+        "This file is @generated automatically"
+    ],
+    "content-hash": "9c1f409919e0313a1dae929c5af48954",
+    "packages": [
+        {
+            "name": "monolog/monolog",
+            "version": "3.3.1",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/Seldaek/monolog.git",
+                "reference": "9b5daeaffce5b926cac47923798bba91059e60e2"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/Seldaek/monolog/zipball/9b5daeaffce5b926cac47923798bba91059e60e2",
+                "reference": "9b5daeaffce5b926cac47923798bba91059e60e2",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=8.1",
+                "psr/log": "^2.0 || ^3.0"
+            },
+            "provide": {
+                "psr/log-implementation": "3.0.0"
+            },
+            "require-dev": {
+                "aws/aws-sdk-php": "^3.0",
+                "doctrine/couchdb": "~1.0@dev",
+                "elasticsearch/elasticsearch": "^7 || ^8",
+                "ext-json": "*",
+                "graylog2/gelf-php": "^1.4.2 || ^2@dev",
+                "guzzlehttp/guzzle": "^7.4.5",
+                "guzzlehttp/psr7": "^2.2",
+                "mongodb/mongodb": "^1.8",
+                "php-amqplib/php-amqplib": "~2.4 || ^3",
+                "phpstan/phpstan": "^1.9",
+                "phpstan/phpstan-deprecation-rules": "^1.0",
+                "phpstan/phpstan-strict-rules": "^1.4",
+                "phpunit/phpunit": "^9.5.26",
+                "predis/predis": "^1.1 || ^2",
+                "ruflin/elastica": "^7",
+                "symfony/mailer": "^5.4 || ^6",
+                "symfony/mime": "^5.4 || ^6"
+            },
+            "suggest": {
+                "aws/aws-sdk-php": "Allow sending log messages to AWS services like DynamoDB",
+                "doctrine/couchdb": "Allow sending log messages to a CouchDB server",
+                "elasticsearch/elasticsearch": "Allow sending log messages to an Elasticsearch server via official client",
+                "ext-amqp": "Allow sending log messages to an AMQP server (1.0+ required)",
+                "ext-curl": "Required to send log messages using the IFTTTHandler, the LogglyHandler, the SendGridHandler, the SlackWebhookHandler or the TelegramBotHandler",
+                "ext-mbstring": "Allow to work properly with unicode symbols",
+                "ext-mongodb": "Allow sending log messages to a MongoDB server (via driver)",
+                "ext-openssl": "Required to send log messages using SSL",
+                "ext-sockets": "Allow sending log messages to a Syslog server (via UDP driver)",
+                "graylog2/gelf-php": "Allow sending log messages to a GrayLog2 server",
+                "mongodb/mongodb": "Allow sending log messages to a MongoDB server (via library)",
+                "php-amqplib/php-amqplib": "Allow sending log messages to an AMQP server using php-amqplib",
+                "rollbar/rollbar": "Allow sending log messages to Rollbar",
+                "ruflin/elastica": "Allow sending log messages to an Elastic Search server"
+            },
+            "type": "library",
+            "extra": {
+                "branch-alias": {
+                    "dev-main": "3.x-dev"
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "Monolog\\": "src/Monolog"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Jordi Boggiano",
+                    "email": "j.boggiano@seld.be",
+                    "homepage": "https://seld.be"
+                }
+            ],
+            "description": "Sends your logs to files, sockets, inboxes, databases and various web services",
+            "homepage": "https://github.com/Seldaek/monolog",
+            "keywords": [
+                "log",
+                "logging",
+                "psr-3"
+            ],
+            "support": {
+                "issues": "https://github.com/Seldaek/monolog/issues",
+                "source": "https://github.com/Seldaek/monolog/tree/3.3.1"
+            },
+            "funding": [
+                {
+                    "url": "https://github.com/Seldaek",
+                    "type": "github"
+                },
+                {
+                    "url": "https://tidelift.com/funding/github/packagist/monolog/monolog",
+                    "type": "tidelift"
+                }
+            ],
+            "time": "2023-02-06T13:46:10+00:00"
+        },
+        {
+            "name": "phlaym/photoprism-api",
+            "version": "dev-main",
+            "source": {
+                "type": "git",
+                "url": "https://phlaym.net/git/phlaym/photoprism-api.git",
+                "reference": "6fde23d5511f276b9689bed941905be88a127f31"
+            },
+            "require": {
+                "monolog/monolog": "^3.3",
+                "php": "^7.2 || ^8.0"
+            },
+            "default-branch": true,
+            "type": "library",
+            "autoload": {
+                "psr-4": {
+                    "Phlaym\\PhotoprismApi\\": "src/"
+                }
+            },
+            "authors": [
+                {
+                    "name": "Max Nuding",
+                    "email": "max.nuding@icloud.com"
+                }
+            ],
+            "description": "An API for interacting with PhotoPrism",
+            "time": "2023-02-19T08:43:49+00:00"
+        },
+        {
+            "name": "psr/log",
+            "version": "3.0.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/php-fig/log.git",
+                "reference": "fe5ea303b0887d5caefd3d431c3e61ad47037001"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/php-fig/log/zipball/fe5ea303b0887d5caefd3d431c3e61ad47037001",
+                "reference": "fe5ea303b0887d5caefd3d431c3e61ad47037001",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=8.0.0"
+            },
+            "type": "library",
+            "extra": {
+                "branch-alias": {
+                    "dev-master": "3.x-dev"
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "Psr\\Log\\": "src"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "PHP-FIG",
+                    "homepage": "https://www.php-fig.org/"
+                }
+            ],
+            "description": "Common interface for logging libraries",
+            "homepage": "https://github.com/php-fig/log",
+            "keywords": [
+                "log",
+                "psr",
+                "psr-3"
+            ],
+            "support": {
+                "source": "https://github.com/php-fig/log/tree/3.0.0"
+            },
+            "time": "2021-07-14T16:46:02+00:00"
+        }
+    ],
+    "packages-dev": [],
+    "aliases": [],
+    "minimum-stability": "stable",
+    "stability-flags": {
+        "phlaym/photoprism-api": 20
+    },
+    "prefer-stable": false,
+    "prefer-lowest": false,
+    "platform": {
+        "php": "^8.0"
+    },
+    "platform-dev": [],
+    "plugin-api-version": "2.3.0"
+}

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';
@@ -13,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;
@@ -96,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', () => {
@@ -148,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';
@@ -155,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':
@@ -170,8 +196,8 @@
                 setTimeout(() => {
                   first.style.transitionDelay = window.showTimeSeconds + 's';
                   second.style.transitionDelay = window.showTimeSeconds + 's';
-                });
-              });
+                }, 50);
+              }, 50);
               break;
             case 'r': {
               window.shuffle = !window.shuffle;
@@ -229,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;
@@ -240,12 +267,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;
@@ -255,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
@@ -269,12 +300,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 +337,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);
@@ -317,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 {
@@ -374,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>

update.sh

@@ -7,13 +7,15 @@ if [[ $SUCCESS != 0 ]]
 then
   CURRENT='v0.0.0'
 fi
-if [[ $LATEST_RELEASE < $CURRENT ]]
+if [[ $LATEST_RELEASE == $CURRENT || $LATEST_RELEASE < $CURRENT ]]
 then
     echo "New version ${LATEST_RELEASE} is up to date with currently installed ${CURRENT}"
     exit
 fi
 
-echo "New version ${LATEST_RELEASE} detected, updating from ${CURRENT}"
-wget "https://phlaym.net/git/phlaym/photoprism-slideshow/archive/${LATEST_RELEASE}.tar.gz" -O release.tar.gz
-
-tar xvf release.tar.gz
+echo "New version '${LATEST_RELEASE}' detected, updating from '${CURRENT}'"
+sudo -u www-data wget "https://phlaym.net/git/phlaym/photoprism-slideshow/archive/${LATEST_RELEASE}.tar.gz" -O release.tar.gz
+sudo -u www-data tar xvf release.tar.gz --strip-components=1
+sudo -u www-data composer install
+sudo -u www-data rm release.tar.gz
+echo $LATEST_RELEASE > version.txt