diff --git a/resources/lang/en.json b/resources/lang/en.json index 00b19d519..62217d38c 100644 --- a/resources/lang/en.json +++ b/resources/lang/en.json @@ -305,7 +305,7 @@ "manual:general:download_thumbs": "If enabled, thumbnails will be used at download (if exist) instead the full sized image.", "manual:general:picture_preview_before_processing": "If enabled, images are preloaded and shown during filter processing.", "manual:general:picture_retry_on_error": "Set how often the system will try to take a picture in the event of an error. 0 = disabled.", - "manual:general:picture_retry_timeout": "Set a time after which the photo recording will be tried again (countdown). \"Retry taking a picture\" needs to be set to a value > 0.", + "manual:general:picture_retry_timeout": "Set a time after which the photo recording will be tried again. A notification is visible for defined time. Countdown will be used as defined for picture / next collage image. \"Retry taking a picture\" needs to be set to a value > 0.", "manual:general:picture_thumb_size": "Choose thumbnail size: XS = max 360px, S = max 540px, M = max 900px, L = max 1080px, XL = max 1260px", "manual:general:picture_time_to_live": "Choose a time between 1 and 90 seconds. Your picture is visible for that time on the result screen after taking it.", "manual:general:start_screen_subtitle": "Enter the subtitle visible on startpage.", diff --git a/src/js/core.js b/src/js/core.js index f424de617..02f2b3edd 100644 --- a/src/js/core.js +++ b/src/js/core.js @@ -18,11 +18,15 @@ const photoBooth = (function () { triggerCollage = $('.triggerCollage'), printBtn = $('.printbtn'), deleteBtn = $('.deletebtn'), + qrBtn = $('.qrbtn'), qrCodeModal = $('#qrCode'), counter = $('#counter'), resultInner = $('.resultInner'), spinner = $('.spinner'), sendMail = $('.send-mail'), + mailMessageForm = $('#mail-form-message'), + mailImageForm = $('#mail-form-image'), + mailSendForm = $('#send-mail-form'), blocker = $('#blocker'), aperture = $('#aperture'), idVideoView = $('#video--view'), @@ -38,7 +42,11 @@ const photoBooth = (function () { }, videoView = idVideoView.get(0), videoPreview = idVideoPreview.get(0), - videoSensor = document.querySelector('#video--sensor'); + videoSensor = document.querySelector('#video--sensor'), + cheeseTime = config.picture.no_cheese ? 0 : config.picture.cheese_time, + timeToLive = config.picture.time_to_live * 1000, + continuousCollageTime = config.collage.continuous_time * 1000, + retryTimeout = config.picture.retry_timeout * 1000; const PhotoStyle = { PHOTO: 'photo', @@ -51,6 +59,7 @@ const photoBooth = (function () { COUNTDOWN: 3 }, PreviewMode = { + NONE: 'none', DEVICE: 'device_cam', URL: 'url', GPHOTO: 'gphoto' @@ -79,34 +88,38 @@ const photoBooth = (function () { photoboothTools.console.log('Timeout for auto reload cleared.'); if (!takingPic) { - photoboothTools.console.logDev( - 'Timeout for auto reload set to', - config.picture.time_to_live * 1000, - ' seconds.' - ); + photoboothTools.console.logDev('Timeout for auto reload set to', timeToLive, ' milliseconds.'); timeOut = setTimeout(function () { photoboothTools.reloadPage(); - }, config.picture.time_to_live * 1000); + }, timeToLive); } }; api.reset = function () { + loader.css('background', config.colors.background_countdown); + loader.css('background-color', config.colors.background_countdown); loader.removeClass('open'); loader.removeClass('error'); - photoboothTools.modal.empty('#qrCode'); - $('.qrbtn').removeClass('active').attr('style', ''); loading.text(''); - gallery.removeClass('gallery--open'); - gallery.find('.gallery__inner').hide(); spinner.hide(); + photoboothTools.modal.empty('#qrCode'); + qrBtn.removeClass('active').attr('style', ''); + api.resetMailForm(); sendMail.hide(); + gallery.removeClass('gallery--open'); + gallery.find('.gallery__inner').hide(); + if (config.preview.flipHorizontal) { + if (!idVideoView.hasClass('flip-horizontal')) { + idVideoView.addClass('flip-horizontal'); + } + if (!idVideoPreview.hasClass('flip-horizontal')) { + idVideoPreview.addClass('flip-horizontal'); + } + } idVideoView.hide(); idVideoPreview.hide(); idVideoSensor.hide(); ipcamView.hide(); - api.resetMailForm(); - loader.css('background', config.colors.background_countdown); - loader.css('background-color', config.colors.background_countdown); }; api.init = function () { @@ -117,8 +130,9 @@ const photoBooth = (function () { resultPage.hide(); startPage.addClass('open'); if ( - config.preview.asBackground || - (config.preview.mode === PreviewMode.GPHOTO.valueOf() && !config.preview.gphoto_bsm) + config.preview.asBackground && + (config.preview.mode === PreviewMode.DEVICE.valueOf() || + (config.preview.mode === PreviewMode.GPHOTO.valueOf() && !config.preview.gphoto_bsm)) ) { api.startVideo(CameraDisplayMode.BACKGROUND); } @@ -155,11 +169,6 @@ const photoBooth = (function () { return; } - if (config.preview.flipHorizontal) { - idVideoView.addClass('flip-horizontal'); - idVideoPreview.addClass('flip-horizontal'); - } - getMedia .call(navigator.mediaDevices, webcamConstraints) .then(function (stream) { @@ -181,7 +190,7 @@ const photoBooth = (function () { retry += 1; setTimeout(function () { api.getAndDisplayMedia(mode, retry); - }, retry * 1000); + }, retryTimeout); } }); }; @@ -202,9 +211,10 @@ const photoBooth = (function () { }); }; - api.startVideo = function (mode) { + api.startVideo = function (mode, retry = 0) { if (config.preview.asBackground) { api.stopVideo(CameraDisplayMode.BACKGROUND); + wrapper.css('background-color', config.colors.panel); } if (!navigator.mediaDevices) { @@ -222,17 +232,62 @@ const photoBooth = (function () { api.getAndDisplayMedia(CameraDisplayMode.BACKGROUND); break; case CameraDisplayMode.COUNTDOWN: - if (config.preview.mode === PreviewMode.GPHOTO.valueOf() && config.preview.gphoto_bsm) { - api.startWebcam(); + switch (config.preview.mode) { + case PreviewMode.NONE.valueOf(): + photoboothTools.console.logDev('Preview at countdown disabled.'); + break; + case PreviewMode.DEVICE.valueOf(): + photoboothTools.console.logDev('Preview at countdown from device cam.'); + api.getAndDisplayMedia(CameraDisplayMode.COUNTDOWN); + break; + case PreviewMode.GPHOTO.valueOf(): + photoboothTools.console.logDev('Preview at countdown from gphoto.'); + if ( + config.preview.gphoto_bsm || + (!config.preview.gphoto_bsm && retry > 0) || + nextCollageNumber > 0 + ) { + api.startWebcam(); + } + api.getAndDisplayMedia(CameraDisplayMode.COUNTDOWN); + break; + case PreviewMode.URL.valueOf(): + photoboothTools.console.logDev('Preview at countdown from URL.'); + ipcamView.show(); + ipcamView.addClass('streaming'); + break; + default: + photoboothTools.console.log('Call for unexpected preview mode.'); + break; } - api.getAndDisplayMedia(CameraDisplayMode.COUNTDOWN); break; default: - photoboothTools.console.log('Call for unexpected video mode'); + photoboothTools.console.log('Call for unexpected video mode.'); break; } }; + api.stopPreviewAndCaptureFromVideo = function () { + if ( + config.preview.mode === PreviewMode.DEVICE.valueOf() || + config.preview.mode === PreviewMode.GPHOTO.valueOf() + ) { + if (config.preview.camTakesPic && !config.dev.demo_images) { + videoSensor.width = videoView.videoWidth; + videoSensor.height = videoView.videoHeight; + videoSensor.getContext('2d').drawImage(videoView, 0, 0); + } + if (config.preview.mode === PreviewMode.DEVICE.valueOf()) { + api.stopVideo(CameraDisplayMode.COUNTDOWN); + } else if (config.preview.mode === PreviewMode.GPHOTO.valueOf()) { + api.stopPreviewVideo(); + } + } else if (config.preview.mode === PreviewMode.URL.valueOf()) { + ipcamView.removeClass('streaming'); + ipcamView.hide(); + } + }; + api.stopVideo = function (mode) { if (api.stream) { api.stream.getTracks()[0].stop(); @@ -315,30 +370,24 @@ const photoBooth = (function () { }); }; - api.thrill = function (photoStyle) { + api.thrill = function (photoStyle, retry = 0) { api.closeNav(); api.reset(); api.closeGallery(); api.showResultInner(false); remoteBuzzerClient.inProgress(true); - takingPic = true; + photoboothTools.console.logDev('Taking picture in progress: ' + takingPic); if (api.isTimeOutPending()) { api.resetTimeOut(); } - photoboothTools.console.logDev('Taking photo: ' + takingPic); - if (config.pre_photo.cmd) { api.shellCommand('pre-command'); } - if (config.preview.asBackground) { - wrapper.css('background-color', config.colors.panel); - } - if (currentCollageFile && nextCollageNumber) { photoStyle = PhotoStyle.COLLAGE; } @@ -347,15 +396,9 @@ const photoBooth = (function () { photoStyle = PhotoStyle.CHROMA; } - if ( - config.preview.mode === PreviewMode.DEVICE.valueOf() || - config.preview.mode === PreviewMode.GPHOTO.valueOf() - ) { - api.startVideo(CameraDisplayMode.COUNTDOWN); - } else if (config.preview.mode === PreviewMode.URL.valueOf()) { - ipcamView.show(); - ipcamView.addClass('streaming'); - } + photoboothTools.console.log('PhotoStyle: ', photoStyle); + + api.startVideo(CameraDisplayMode.COUNTDOWN, retry); loader.addClass('open'); @@ -363,74 +406,47 @@ const photoBooth = (function () { if (config.get_request.countdown) { api.getRequest(photoStyle); } - api.cheese(photoStyle); - }); - }; - - api.cheese = function (photoStyle, retry = 0) { - photoboothTools.console.logDev('Photostyle: ' + photoStyle); - - counter.empty(); - cheese.empty(); - - if (config.picture.no_cheese) { - photoboothTools.console.log('Cheese is disabled.'); - } else if (photoStyle === PhotoStyle.PHOTO || photoStyle === PhotoStyle.CHROMA) { - cheese.text(photoboothTools.getTranslation('cheese')); - } else { - cheese.text(photoboothTools.getTranslation('cheeseCollage')); - $('

') - .text(`${nextCollageNumber + 1} / ${config.collage.limit}`) - .appendTo('.cheese'); - } - - if (retry <= 0) { - if (config.preview.mode === PreviewMode.GPHOTO.valueOf() && !config.picture.no_cheese) { - api.stopPreviewVideo(); - } if ( - config.preview.mode === PreviewMode.DEVICE.valueOf() && + (config.preview.mode === PreviewMode.DEVICE.valueOf() || + config.preview.mode === PreviewMode.GPHOTO.valueOf()) && config.preview.camTakesPic && !api.stream && !config.dev.demo_images ) { - photoboothTools.console.log('No preview by device cam available!'); - api.errorPic({ error: 'No preview by device cam available!' }); - } else if (config.picture.no_cheese) { - api.takePic(photoStyle); } else { + if (config.picture.no_cheese) { + photoboothTools.console.log('Cheese is disabled.'); + } else { + api.cheese(photoStyle); + } setTimeout(() => { - api.takePic(photoStyle); - }, config.picture.cheese_time); + api.takePic(photoStyle, retry); + }, cheeseTime); } - } + }); }; - api.takePic = function (photoStyle) { - photoboothTools.console.log('Take Picture:', photoStyle); + api.cheese = function (photoStyle) { + cheese.empty(); + + if (photoStyle === PhotoStyle.PHOTO || photoStyle === PhotoStyle.CHROMA) { + cheese.text(photoboothTools.getTranslation('cheese')); + } else { + cheese.text(photoboothTools.getTranslation('cheeseCollage')); + $('

') + .text(`${nextCollageNumber + 1} / ${config.collage.limit}`) + .appendTo('.cheese'); + } + }; + api.takePic = function (photoStyle, retry) { remoteBuzzerClient.inProgress(true); - if ( - config.preview.mode === PreviewMode.DEVICE.valueOf() || - config.preview.mode === PreviewMode.GPHOTO.valueOf() - ) { - if (config.preview.camTakesPic && !config.dev.demo_images) { - videoSensor.width = videoView.videoWidth; - videoSensor.height = videoView.videoHeight; - videoSensor.getContext('2d').drawImage(videoView, 0, 0); - } - if (config.preview.mode === PreviewMode.DEVICE.valueOf()) { - api.stopVideo(CameraDisplayMode.COUNTDOWN); - } - } else if (config.preview.mode === PreviewMode.URL.valueOf()) { - ipcamView.removeClass('streaming'); - ipcamView.hide(); - } + api.stopPreviewAndCaptureFromVideo(); const data = { filter: imgFilter, @@ -449,7 +465,8 @@ const photoBooth = (function () { loader.css('background', config.colors.panel); loader.css('background-color', config.colors.panel); - api.callTakePicApi(data); + + api.callTakePicApi(data, retry); }; api.callTakePicApi = function (data, retry = 0) { @@ -462,16 +479,12 @@ const photoBooth = (function () { .done(function (result) { endTime = new Date().getTime(); totalTime = endTime - startTime; - photoboothTools.console.log('took ' + data.style, result); + photoboothTools.console.log('Took ' + data.style, result); photoboothTools.console.logDev('Taking picture took ' + totalTime + 'ms'); if (config.ui.shutter_animation) { api.shutter.stop(); } cheese.empty(); - if (config.preview.flipHorizontal) { - idVideoView.removeClass('flip-horizontal'); - idVideoPreview.removeClass('flip-horizontal'); - } imgFilter = config.filters.defaults; $('#mySidenav .activeSidenavBtn').removeClass('activeSidenavBtn'); @@ -490,19 +503,9 @@ const photoBooth = (function () { config.picture.retry_on_error ) ); - api.startCountdown(config.picture.retry_timeout, counter, () => { - loading.empty(); - - if (config.picture.no_cheese) { - photoboothTools.console.log('Cheese is disabled.'); - api.callTakePicApi(data, retry); - } else { - api.cheese(data.style, retry); - setTimeout(() => { - api.callTakePicApi(data, retry); - }, config.picture.cheese_time); - } - }); + setTimeout(() => { + api.thrill(data.style, retry); + }, retryTimeout); } else { api.errorPic(result); } @@ -540,7 +543,7 @@ const photoBooth = (function () { imageUrl = ''; loaderImage.css('display', 'none'); api.thrill(PhotoStyle.COLLAGE); - }, config.collage.continuous_time * 1000); + }, continuousCollageTime); } else { currentCollageFile = ''; nextCollageNumber = 0; @@ -549,7 +552,7 @@ const photoBooth = (function () { imageUrl = ''; loaderImage.css('display', 'none'); api.processPic(data.style, result); - }, config.collage.continuous_time * 1000); + }, continuousCollageTime); } } else { // collage with interruption @@ -655,12 +658,13 @@ const photoBooth = (function () { idVideoSensor.hide(); loader.addClass('error'); loading.append($('

').text(photoboothTools.getTranslation('error'))); + photoboothTools.console.log('An error occurred:', data.error); if (config.dev.error_messages) { loading.append($('

').text(data.error)); } takingPic = false; remoteBuzzerClient.inProgress(false); - photoboothTools.console.logDev('Taking photo: ' + takingPic); + photoboothTools.console.logDev('Taking picture in progress: ' + takingPic); if (config.dev.reload_on_error) { loading.append($('

').text(photoboothTools.getTranslation('auto_reload'))); setTimeout(function () { @@ -724,8 +728,6 @@ const photoBooth = (function () { } }, error: (jqXHR, textStatus) => { - photoboothTools.console.log('An error occurred', textStatus); - api.errorPic({ error: 'Request failed: ' + textStatus }); @@ -744,7 +746,7 @@ const photoBooth = (function () { preloadImage.onload = function () { $('body').attr('data-main-image', filename); - photoboothTools.console.log(config.foldersRoot.keying + '/' + filename); + photoboothTools.console.log('Chroma image: ' + config.foldersRoot.keying + '/' + filename); const chromaimage = config.foldersRoot.keying + '/' + filename; loader.hide(); @@ -756,9 +758,9 @@ const photoBooth = (function () { takingPic = false; remoteBuzzerClient.inProgress(false); + photoboothTools.console.logDev('Taking picture in progress: ' + takingPic); api.resetTimeOut(); - photoboothTools.console.logDev('Taking photo: ' + takingPic); }; api.renderPic = function (filename, files) { @@ -821,7 +823,7 @@ const photoBooth = (function () { } else { photoboothTools.console.log('Error while deleting ' + file); if (data.error) { - photoboothTools.console.log(data.error); + photoboothTools.console.log('Error: ' + data.error); } setTimeout(function () { photoboothTools.reloadPage(); @@ -869,11 +871,10 @@ const photoBooth = (function () { takingPic = false; remoteBuzzerClient.inProgress(false); + photoboothTools.console.logDev('Taking picture in progress: ' + takingPic); api.resetTimeOut(); - photoboothTools.console.logDev('Taking photo: ' + takingPic); - if (config.preview.mode === PreviewMode.GPHOTO.valueOf() && !config.preview.gphoto_bsm) { api.startVideo(CameraDisplayMode.INIT); } @@ -954,8 +955,8 @@ const photoBooth = (function () { }; api.resetMailForm = function () { - $('#send-mail-form').trigger('reset'); - $('#mail-form-message').html(''); + mailSendForm.trigger('reset'); + mailMessageForm.html(''); }; api.getRequest = function (photoStyle) { @@ -985,10 +986,11 @@ const photoBooth = (function () { window.setTimeout(() => element.addClass('tick'), 50); window.setTimeout(timerFunction, 1000); } else { + element.empty(); cb(); } count++; - if (config.preview.mode === PreviewMode.GPHOTO.valueOf() && config.picture.no_cheese && count === stop) { + if (config.preview.mode === PreviewMode.GPHOTO.valueOf() && !config.preview.camTakesPic && count === stop) { api.stopPreviewVideo(); } } @@ -998,7 +1000,7 @@ const photoBooth = (function () { api.printImage = function (imageSrc, cb) { if (isPrinting) { - photoboothTools.console.log('Printing already: ' + isPrinting); + photoboothTools.console.log('Printing in progress: ' + isPrinting); } else { photoboothTools.modal.open('#print_mesg'); isPrinting = true; @@ -1074,7 +1076,7 @@ const photoBooth = (function () { }, success: (data) => { if (data.error) { - photoboothTools.console.log('Error while deleting image'); + photoboothTools.console.log('Error while deleting image!'); } cb(data); }, @@ -1096,7 +1098,7 @@ const photoBooth = (function () { }, success: (data) => { if (data.error) { - photoboothTools.console.log('Error while deleting image'); + photoboothTools.console.log('Error while deleting image!'); } }, error: (jqXHR, textStatus) => { @@ -1109,15 +1111,12 @@ const photoBooth = (function () { }; api.toggleMailDialog = function (img) { - const mail = $('.send-mail'); - - if (mail.hasClass('mail-active')) { + if (sendMail.hasClass('mail-active')) { api.resetMailForm(); - mail.removeClass('mail-active').fadeOut('fast'); + sendMail.removeClass('mail-active').fadeOut('fast'); } else { - $('#mail-form-image').val(img); - - mail.addClass('mail-active').fadeIn('fast'); + mailImageForm.val(img); + sendMail.addClass('mail-active').fadeIn('fast'); } }; @@ -1133,7 +1132,7 @@ const photoBooth = (function () { imgFilter = $(this).attr('id'); const result = {file: resultPage.attr('data-img')}; - photoboothTools.console.logDev('Applying filter', imgFilter, result); + photoboothTools.console.logDev('Applying filter: ' + imgFilter, result); api.processPic(imgFilter, result); @@ -1194,11 +1193,9 @@ const photoBooth = (function () { $('#send-mail-form').on('submit', function (e) { e.preventDefault(); - const message = $('#mail-form-message'); - message.empty(); - const form = $(this); + mailMessageForm.empty(); form.find('.btn').html(''); $.ajax({ @@ -1210,24 +1207,24 @@ const photoBooth = (function () { success: function (result) { if (result.success) { if (result.saved) { - message + mailMessageForm .fadeIn() .html( '' + photoboothTools.getTranslation('mailSaved') + '' ); } else { - message + mailMessageForm .fadeIn() .html( '' + photoboothTools.getTranslation('mailSent') + '' ); } } else { - message.fadeIn().html('' + result.error + ''); + mailMessageForm.fadeIn().html('' + result.error + ''); } }, error: function () { - message + mailMessageForm .fadeIn('fast') .html('' + photoboothTools.getTranslation('mailError') + ''); } @@ -1236,7 +1233,7 @@ const photoBooth = (function () { $('#send-mail-close').on('click', function () { api.resetMailForm(); - $('.send-mail').removeClass('mail-active').fadeOut('fast'); + sendMail.removeClass('mail-active').fadeOut('fast'); }); resultPage.on('click', function () { @@ -1310,7 +1307,7 @@ const photoBooth = (function () { if (triggerPic[0] || triggerCollage[0]) { if (config.picture.key && parseInt(config.picture.key, 10) === ev.keyCode) { if (takingPic) { - photoboothTools.console.logDev('Taking photo already in progress!'); + photoboothTools.console.logDev('Taking picture already in progress!'); } else { $('.closeGallery').trigger('click'); if (config.collage.enabled && config.collage.only) { @@ -1326,7 +1323,7 @@ const photoBooth = (function () { if (config.collage.key && parseInt(config.collage.key, 10) === ev.keyCode) { if (takingPic) { - photoboothTools.console.logDev('Taking photo already in progress!'); + photoboothTools.console.logDev('Taking picture already in progress!'); } else { $('.closeGallery').trigger('click'); if (config.collage.enabled) {