Merge pull request andi34#260 from EccoB/GalleryAutoRefresh

Implemented continous check for new pictures in gallery.php

gallery.php

@@ -3,6 +3,16 @@
 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;
 ?>
@@ -88,6 +98,7 @@
 	<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/lang/<?php echo $config['language']; ?>.js"></script>
+	<script type="text/javascript" src="resources/js/gallery_updatecheck.js"></script>
 	<script>
 		$(function() {
 			let reloadElement = $('<a class="gallery__reload">');

lib/db.php

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

resources/js/core.js

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

resources/js/gallery_updatecheck.js

@@ -0,0 +1,43 @@
+/*
+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
+
+*/
+
+var lastDBSize=-1;		 //Size of the DB - is used to determine changes
+var interval = 1000 * 5; // Interval, the page is checked (/ms)
+var ajaxurl="gallery.php?status"; //URL to request for changes
+
+/*
+This function will be called if there are new pictures
+*/
+function dbUpdated(){
+	console.log("DB is updated - refreshing");
+	//location.reload(true); //Alternative
+	photoBooth.reloadPage();
+}
+
+
+var checkForUpdates = function() {
+	if(photoBooth.isTimeOutPending())
+		return;	//If there is user interaction, do not check for updates
+	$.getJSON({url: ajaxurl, success:
+	  function(result){
+		var currentDBSize=result['dbsize'];
+		if(lastDBSize!=currentDBSize && lastDBSize !=-1){
+			dbUpdated();
+		}
+		lastDBSize=currentDBSize;
+    }});
+};
+setInterval(checkForUpdates, interval);