feature (standalone gallery): continous check for new pictures

config/config.inc.php

@@ -127,6 +127,9 @@
 $config['gallery']['date_format'] = 'd.m.Y - G:i';
 $config['gallery_pictureTime'] = '3000';
 $config['gallery_bottom_bar'] = true;
+$config['gallery_db_check_enabled'] = true;
+$config['gallery_db_check_time'] = '10';
+
 // PhotoSwipe
 $config['pswp_clickToCloseNonZoomable'] = false;
 $config['pswp_closeOnScroll'] = false;

gallery.php

@@ -3,6 +3,15 @@
 require_once('lib/config.php');
 require_once('lib/db.php');
 
+// Check if there is a request for the status of the database
+if (isset($_GET['status'])){
+	// Request for DB-Status,
+	// Currently reports back the DB-Size to give the Client the ability
+	// to detect changes
+	$resp = array('dbsize'=>getDBSize());
+	exit(json_encode($resp));
+}
+
 $images = getImagesFromDB();
 $imagelist = ($config['newest_first'] === true) ? array_reverse($images) : $images;
 ?>
@@ -91,6 +100,9 @@
 	<script type="text/javascript" src="resources/js/theme.js"></script>
 	<script type="text/javascript" src="resources/js/core.js"></script>
 	<script type="text/javascript" src="resources/js/gallery.js"></script>
+	<?php if ($config['gallery_db_check_enabled']): ?>
+	<script type="text/javascript" src="resources/js/gallery_updatecheck.js"></script>
+	<?php endif; ?>
 	<script src="node_modules/@andreasremdt/simple-translator/dist/umd/translator.min.js"></script>
 	<script type="text/javascript" src="resources/js/i18n.js"></script>
 </body>

lib/configsetup.inc.php

@@ -818,6 +818,17 @@
 			'name' => 'gallery_pictureTime',
 			'value' => $config['gallery_pictureTime']
 		],
+		'gallery_db_check_enabled' => [
+			'type' => 'checkbox',
+			'name' => 'gallery_db_check_enabled',
+			'value' => $config['gallery_db_check_enabled']
+		],
+		'db_check_time' => [
+			'type' => 'input',
+			'placeholder' => $defaultConfig['gallery_db_check_time'],
+			'name' => 'gallery_db_check_time',
+			'value' => $config['gallery_db_check_time']
+		],
 		'pswp_clickToCloseNonZoomable' => [
 			'type' => 'checkbox',
 			'name' => 'pswp_clickToCloseNonZoomable',

lib/db.php

@@ -33,3 +33,10 @@ function isImageInDB($filename) {
 
 	return in_array($filename, $images);
 }
+
+function getDBSize(){
+	if(file_exists(DB_FILE)){
+		return (int) filesize(DB_FILE);
+	}
+	return 0;
+}

resources/lang/en.json

@@ -51,6 +51,8 @@
   "gallery": "Gallery",
   "gallery_bottom_bar": "Show button bar inside gallery on bottom",
   "gallery_date_format": "Date style",
+  "gallery_db_check_enabled": "Continuously check for new pictures in standalone gallery",
+  "gallery_db_check_time": "Interval at which the database is checked for new images (in seconds):",
   "gallery_no_image": "The gallery is still empty. Take some pictures!",
   "gallery_pictureTime": "Milliseconds an image is displayed at slideshow",
   "gallery_pswp_bgOpacity": "Background opacity",
@@ -144,6 +146,8 @@
   "manual_force_buzzer": "If enabled, the take picture and collage buttons disappear. You now get a button which tells to use a buzzer to take a picture or collage.",
   "manual_gallery_bottom_bar": "If enabled, the button bar is shown in the gallery below.",
   "manual_gallery_date_format": "Enter your date style.",
+  "manual_gallery_db_check_enabled": "If enabled, Photobooth continuously checks for new pictures in standalone gallery and reloads the page on inactivity (time of inactivity depends on \"Show image after capture:\" option).",
+  "manual_gallery_db_check_time": "Add the interval (in seconds) the database get checked for new images.",
   "manual_gallery_pictureTime": "Add a value which is used as milliseconds an image is displayed at slideshow inside the gallery.",
   "manual_gallery_pswp_bgOpacity": "Background opacity, low values make the background more transparent.",
   "manual_general_camera_mode": "Choose between front- or back facing camera mode of your device cam.",

src/js/core.js

@@ -57,6 +57,11 @@ const photoBooth = (function () {
         window.location.reload();
     };
 
+    // Returns true when timeOut is pending
+    api.isTimeOutPending = function () {
+        return typeof timeOut !== 'undefined';
+    };
+
     // timeOut function
     api.resetTimeOut = function () {
         clearTimeout(timeOut);

src/js/gallery_updatecheck.js

@@ -0,0 +1,55 @@
+/* globals photoBooth */
+/*
+ * This script checks for new pictures in regular intervals.
+ * If changes are detected, the page will automatically be reloaded.
+ *
+ * Needs:
+ * - jQuery
+ * - photoBooth Javascript
+ *
+ * Remarks:
+ * - Not made for highly demanded pages (as pages is requested regulary
+ *   and would pile up in high load with thausend of users)
+ * - Instead of reloading, adding the pictures directly would be an
+ *   improvement, but would need further changes in gallery-templates
+ *
+ */
+
+// Size of the DB - is used to determine changes
+let lastDBSize = -1;
+// Interval, the page is checked (/ms)
+const interval = 1000 * config.gallery_db_check_time;
+// URL to request for changes
+const ajaxurl = 'gallery.php?status';
+
+/*
+ * This function will be called if there are new pictures
+ */
+
+function dbUpdated() {
+    console.log('DB is updated - refreshing');
+    //location.reload(true); //Alternative
+    photoBooth.reloadPage();
+}
+
+const checkForUpdates = function () {
+    if (photoBooth.isTimeOutPending()) {
+        // If there is user interaction, do not check for updates
+        if (config.dev) {
+            console.log('Timeout pending, waiting to refresh the standalone gallery');
+        }
+
+        return;
+    }
+    $.getJSON({
+        url: ajaxurl,
+        success: function (result) {
+            const currentDBSize = result.dbsize;
+            if (lastDBSize != currentDBSize && lastDBSize != -1) {
+                dbUpdated();
+            }
+            lastDBSize = currentDBSize;
+        }
+    });
+};
+setInterval(checkForUpdates, interval);