andi34 · andi34 · Jan 19, 2022 · Jan 16, 2022 · Jan 16, 2022 · Jan 16, 2022
diff --git a/config/config.inc.php b/config/config.inc.php
@@ -298,6 +298,7 @@
 // U S E R   I N T E R F A C E
 // possible style values: "classic", "modern", "custom"
 $config['ui']['style'] = 'modern';
+$config['ui']['shutter_animation'] = true;
 $config['button']['show_fs'] = false;
 $config['button']['homescreen'] = true;
 $config['ui']['result_buttons'] = true;

diff --git a/index.php b/index.php
@@ -85,6 +85,8 @@
 
 <video id="video--preview" autoplay playsinline></video>
 <body class="deselect">
+<div id="blocker"></div>
+<div id="aperture"></div>
 	<div id="wrapper">
 		<?php include('template/' . $config['ui']['style'] . '.template.php'); ?>
 

diff --git a/lib/configsetup.inc.php b/lib/configsetup.inc.php
@@ -1752,6 +1752,12 @@
             ],
             'value' => $config['ui']['style'],
         ],
+        'ui_shutter_animation' => [
+            'view' => 'basic',
+            'type' => 'checkbox',
+            'name' => 'ui[shutter_animation]',
+            'value' => $config['ui']['shutter_animation'],
+        ],
         'button_show_fs' => [
             'view' => 'basic',
             'type' => 'checkbox',

diff --git a/livechroma.php b/livechroma.php
@@ -65,6 +65,8 @@
 		<?php endif; ?>
 	</head>
 <body>
+<div id="blocker"></div>
+<div id="aperture"></div>
 	<div class="chromawrapper">
 	<div class="rotarygroup" id="start">
 		<div class="top-bar">

diff --git a/resources/lang/en.json b/resources/lang/en.json
@@ -449,6 +449,7 @@
   "manual:userinterface:ui_font_size": "Enter the default font size used for the Photobooth interface.",
   "manual:userinterface:ui_result_buttons": "If enabled, post-processing buttons will be visible on the on result screen. If disabled the whole button bar will be hidden.",
   "manual:userinterface:ui_rounded_corners": "If enabled, the Photobooth UI uses smooth rounded edges.",
+  "manual:userinterface:ui_shutter_animation": "If enabled, a shutter animation will be visible while taking a picture.",
   "manual:userinterface:ui_style": "Choose a start page styling. To use custom styling please create and use \"/template/custom.template.php\" and \"/resources/css/custom_style.css\", if one of these files is not readable we will fallback to default theme.",
   "manual:version:check_version": "This will check online against the Github repository for the latest Photobooth version.",
   "manual:version:updater_button": "This will check if Photobooth can be updated and perform the update. Only works on Linux if Photobooth was installed via git.",
@@ -638,6 +639,7 @@
   "userinterface:ui_font_size": "Default font size",
   "userinterface:ui_result_buttons": "Show button bar on result screen",
   "userinterface:ui_rounded_corners": "Rounded corners",
+  "userinterface:ui_shutter_animation": "Shutter animation",
   "userinterface:ui_style": "Styling",
   "using_latest_version": "You are using the latest version of photobooth.",
   "version": "Version",

diff --git a/src/js/core.js b/src/js/core.js
@@ -23,6 +23,8 @@ const photoBooth = (function () {
         resultInner = $('.resultInner'),
         spinner = $('.spinner'),
         sendMail = $('.send-mail'),
+        blocker = $('#blocker'),
+        aperture = $('#aperture'),
         idVideoView = $('#video--view'),
         idVideoPreview = $('#video--preview'),
         idVideoSensor = $('#video--sensor'),
@@ -262,6 +264,32 @@ const photoBooth = (function () {
         }
     };
 
+    api.shutter = {
+        start: function () {
+            blocker.fadeTo(500, 1);
+        },
+        stop: function () {
+            aperture.show();
+            aperture.animate(
+                {
+                    width: 0,
+                    'padding-bottom': 0
+                },
+                500,
+                function () {
+                    blocker.css('opacity', '0');
+                    blocker.hide();
+                }
+            );
+            aperture.fadeTo(1000, 0, function () {
+                aperture.css('opacity', '1');
+                aperture.css('width', '150%');
+                aperture.css('padding-bottom', '150%');
+                aperture.hide();
+            });
+        }
+    };
+
     api.showResultInner = function (flag) {
         if (flag) {
             resultInner.addClass('show');
@@ -425,6 +453,9 @@ const photoBooth = (function () {
     };
 
     api.callTakePicApi = function (data, retry = 0) {
+        if (config.ui.shutter_animation) {
+            api.shutter.start();
+        }
         startTime = new Date().getTime();
         jQuery
             .post('api/takePic.php', data)
@@ -433,6 +464,9 @@ const photoBooth = (function () {
                 totalTime = endTime - startTime;
                 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');

diff --git a/src/sass/classic_live_chromakeying.scss b/src/sass/classic_live_chromakeying.scss
@@ -125,6 +125,31 @@
   }
 }
 
+#blocker {
+  position: absolute;
+  display: none;
+  width: 100%;
+  height: 100%;
+  z-index: 1499;
+  background-color: #ffffff;
+  opacity: 0;
+}
+
+#aperture {
+  box-sizing: content-box;
+  display: none;
+  width: 150%;
+  padding-bottom: 150%;
+  height: 0;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  z-index: 1500;
+  transform: translate(-50%, -50%);
+  border: solid 2000px #000000;
+  border-radius: 50%;
+}
+
 #video--view {
   top: 0;
   left: 0;

diff --git a/src/sass/classic_style.scss b/src/sass/classic_style.scss
@@ -10,6 +10,31 @@
 @import 'partials/ribbon';
 @import 'vendor/photoswipe';
 
+#blocker {
+  position: absolute;
+  display: none;
+  width: 100%;
+  height: 100%;
+  z-index: 1499;
+  background-color: #ffffff;
+  opacity: 0;
+}
+
+#aperture {
+  box-sizing: content-box;
+  display: none;
+  width: 150%;
+  padding-bottom: 150%;
+  height: 0;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  z-index: 1500;
+  transform: translate(-50%, -50%);
+  border: solid 2000px #000000;
+  border-radius: 50%;
+}
+
 #wrapper {
   display: none;
   position: relative;