collage: allow to retake a single picture

api/deleteTmpPhoto.php

@@ -0,0 +1,40 @@
+<?php
+header('Content-Type: application/json');
+
+require_once '../lib/config.php';
+
+if (empty($_POST['file'])) {
+    die(
+        json_encode([
+            'error' => 'No file provided',
+        ])
+    );
+}
+
+$file = $_POST['file'];
+$filePathTmp = $config['foldersAbs']['tmp'] . DIRECTORY_SEPARATOR . $file;
+
+// Only jpg/jpeg are supported
+$imginfo = getimagesize($filePathTmp);
+$mimetype = $imginfo['mime'];
+if ($mimetype != 'image/jpg' && $mimetype != 'image/jpeg') {
+    die(
+        json_encode([
+            'error' => 'The source file type ' . $mimetype . ' is not supported',
+        ])
+    );
+}
+
+if (is_readable($filePathTmp)) {
+    if (!unlink($filePathTmp)) {
+        die(
+            json_encode([
+                'error' => 'Could not delete tmp file',
+            ])
+        );
+    }
+}
+
+echo json_encode([
+    'success' => true,
+]);

api/takePic.php

@@ -104,15 +104,20 @@ function takePicture($filename) {
         );
     }
 
+    $basecollage = substr($file, 0, -4);
+    $collage_name = $basecollage . '-' . date('Ymd_His') . '.jpg';
+
     $basename = substr($filename_tmp, 0, -4);
     $filename = $basename . '-' . $number . '.jpg';
 
     takePicture($filename);
+    copy($filename, $config['foldersAbs']['tmp'] . DIRECTORY_SEPARATOR . $collage_name);
 
     die(
         json_encode([
             'success' => 'collage',
             'file' => $file,
+            'collage_file' => $collage_name,
             'current' => $number,
             'limit' => $config['collage']['limit'],
         ])

index.php

@@ -94,6 +94,7 @@
 					<canvas id="video--sensor"></canvas>
 				</div>
 				<div class="cheese"></div>
+				<div class="loaderImage"></div>
 				<div class="loading"></div>
 			</div>
 		</div>

resources/lang/en.json

@@ -385,6 +385,7 @@
   "print:textonprint_locationy": "Y Coordinate",
   "print:textonprint_rotation": "Text rotation",
   "printing": "Started printing! Please wait...",
+  "processPhoto": "Process Collage",
   "qr": "QR Code",
   "qrHelp": "To download the picture to your smartphone, connect to the WiFi:",
   "really_delete": "Really reset according to your settings? This cannot be undone!",
@@ -401,6 +402,7 @@
   "reset:reset_remove_config": "Delete personal configuration (my.config.inc.php)",
   "reset:reset_remove_images": "Delete images",
   "reset:reset_remove_mailtxt": "Delete e-mail addresses database",
+  "retakePhoto": "Retake",
   "save": "Save",
   "saveerror": "Error!",
   "saving": "Saving ...",

src/js/core.js

@@ -463,7 +463,7 @@ const photoBooth = (function () {
 
                 if (result.error) {
                     api.errorPic(result);
-                } else if (result.success === 'collage' && result.current + 1 < result.limit) {
+                } else if (result.success === 'collage') {
                     currentCollageFile = result.file;
                     nextCollageNumber = result.current + 1;
 
@@ -472,19 +472,73 @@ const photoBooth = (function () {
                     $('#video--sensor').hide();
 
                     if (config.collage.continuous) {
-                        setTimeout(() => {
-                            api.thrill('collage');
-                        }, 1000);
+                        if (result.current + 1 < result.limit) {
+                            setTimeout(() => {
+                                api.thrill('collage');
+                            }, 1000);
+                        } else {
+                            currentCollageFile = '';
+                            nextCollageNumber = 0;
+
+                            api.processPic(data.style, result);
+                        }
                     } else {
+                        let imageUrl = config.foldersRoot.tmp + '/' + result.collage_file;
+                        const preloadImage = new Image();
+                        const picdate = Date.now;
+                        preloadImage.onload = () => {
+                            $('.loaderImage').css({
+                                'background-image': `url(${imageUrl}?filter=${imgFilter})`
+                            });
+                            $('.loaderImage').attr('data-img', picdate);
+                        };
+
+                        preloadImage.src = imageUrl;
+
+                        $('.loaderImage').show();
                         if (config.remotebuzzer.enabled) {
                             ioClient.emit('photobooth-socket', 'collage-wait-for-next');
                         }
 
-                        $('<a class="btn" href="#">' + api.getTranslation('nextPhoto') + '</a>')
+                        if (result.current + 1 < result.limit) {
+                            $('<a class="btn" href="#">' + api.getTranslation('nextPhoto') + '</a>')
+                                .appendTo('.loading')
+                                .click((ev) => {
+                                    ev.preventDefault();
+                                    $('.loaderImage').css('background-image', 'none');
+                                    imageUrl = '';
+                                    $('.loaderImage').css('display', 'none');
+                                    api.deleteTmpImage(result.collage_file);
+                                    api.thrill('collage');
+                                });
+                        } else {
+                            $('<a class="btn" href="#">' + api.getTranslation('processPhoto') + '</a>')
+                                .appendTo('.loading')
+                                .click((ev) => {
+                                    ev.preventDefault();
+                                    $('.loaderImage').css('background-image', 'none');
+                                    imageUrl = '';
+                                    $('.loaderImage').css('display', 'none');
+                                    api.deleteTmpImage(result.collage_file);
+                                    currentCollageFile = '';
+                                    nextCollageNumber = 0;
+
+                                    api.processPic(data.style, result);
+                                });
+                        }
+                        $(
+                            '<a class="btn" style="margin-left:2px" href="#">' +
+                                api.getTranslation('retakePhoto') +
+                                '</a>'
+                        )
                             .appendTo('.loading')
                             .click((ev) => {
                                 ev.preventDefault();
-
+                                $('.loaderImage').css('background-image', 'none');
+                                imageUrl = '';
+                                $('.loaderImage').css('display', 'none');
+                                api.deleteTmpImage(result.collage_file);
+                                nextCollageNumber = result.current;
                                 api.thrill('collage');
                             });
                         const abortmsg = api.getTranslation('abort');
@@ -885,6 +939,27 @@ const photoBooth = (function () {
         });
     };
 
+    api.deleteTmpImage = function (imageName) {
+        $.ajax({
+            url: 'api/deleteTmpPhoto.php',
+            method: 'POST',
+            data: {
+                file: imageName
+            },
+            success: (data) => {
+                if (data.error) {
+                    console.log('Error while deleting image');
+                }
+            },
+            error: (jqXHR, textStatus) => {
+                console.log('Error while deleting image: ', textStatus);
+                setTimeout(function () {
+                    api.reloadPage();
+                }, 5000);
+            }
+        });
+    };
+
     api.toggleMailDialog = function (img) {
         const mail = $('.send-mail');
 

src/sass/classic_style.scss

@@ -167,7 +167,28 @@
   width: 100%;
 }
 
+.loaderImage {
+  display: none;
+  width: 90%;
+  height: 90%;
+  position: absolute;
+  top: 40%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 101;
+  background: center center no-repeat;
+  background-size: contain;
+  @media (max-width: 767px) {
+    width: 80%;
+    height: 80%;
+  }
+}
+
 .loading {
+  position: absolute;
+  bottom: 1.5em;
+  left: 0;
+  z-index: 102;
   font-size: 3.125em;
   text-align: center;
   width: 100%;
@@ -179,6 +200,10 @@
   .btn {
     font-size: 0.4em;
   }
+
+  @media (max-width: 767px) {
+    bottom: 0.5em;
+  }
 }
 
 .error {