feat: support diffrent collage video preview size (#1309)

* fixes #902 support different collage video preview size
* add i18n keys

Author: reloxx13

assets/js/preview.js

@@ -30,14 +30,6 @@ const photoboothPreview = (function () {
             DEVICE: 'device_cam',
             URL: 'url'
         },
-        webcamConstraints = {
-            audio: false,
-            video: {
-                width: config.preview.videoWidth,
-                height: config.preview.videoHeight,
-                facingMode: config.preview.camera_mode
-            }
-        },
         api = {};
 
     let pid,
@@ -84,6 +76,30 @@ const photoboothPreview = (function () {
             return;
         }
 
+        const videoWidthDefault = config.preview.videoWidth;
+        const videoHeightDefault = config.preview.videoHeight;
+        let videoWidth = videoWidthDefault;
+        let videoHeight = videoHeightDefault;
+
+        // Support diffrent preview video sizes for collage mode
+        if (photoBooth.photoStyle === 'collage') {
+            if (config.preview.videoWidth_collage > 0) {
+                videoWidth = config.preview.videoWidth_collage;
+            }
+            if (config.preview.videoHeight_collage > 0) {
+                videoHeight = config.preview.videoHeight_collage;
+            }
+        }
+
+        const webcamConstraints = {
+            audio: false,
+            video: {
+                width: videoWidth,
+                height: videoHeight,
+                facingMode: config.preview.camera_mode
+            }
+        };
+
         getMedia
             .call(navigator.mediaDevices, webcamConstraints)
             .then(function (stream) {

lib/configsetup.inc.php

@@ -1479,6 +1479,20 @@
             'placeholder' => $defaultConfig['preview']['videoHeight'],
             'value' => $config['preview']['videoHeight'],
         ],
+        'preview_videoWidth_collage'  => [
+            'view'        => 'expert',
+            'type'        => 'number',
+            'name'        => 'preview[videoWidth_collage]',
+            'placeholder' => $defaultConfig['preview']['videoWidth_collage'],
+            'value'       => $config['preview']['videoWidth_collage'],
+        ],
+        'preview_videoHeight_collage' => [
+            'view'        => 'expert',
+            'type'        => 'number',
+            'name'        => 'preview[videoHeight_collage]',
+            'placeholder' => $defaultConfig['preview']['videoHeight_collage'],
+            'value'       => $config['preview']['videoHeight_collage'],
+        ],
         'preview_camera_mode' => [
             'type' => 'select',
             'name' => 'preview[camera_mode]',

resources/lang/en.json

@@ -562,6 +562,8 @@
   "manual:preview:preview_url_delay": "Define a time to delay the visibility of the preview from URL. This might be needed if the preview URL is not ready early enough.",
   "manual:preview:preview_videoHeight": "Enter a value which is used as height for preview by device cam.",
   "manual:preview:preview_videoWidth": "Enter a value which is used as width for preview by device cam.",
+    "manual:preview:preview_videoHeight_collage": "Enter a value which is used as height for preview by device cam while taking a collage.",
+    "manual:preview:preview_videoWidth_collage": "Enter a value which is used as width for preview by device cam while taking a collage.",
   "manual:print:button_show_cups": "Show a button on startpage to easily access CUPS (Common Unix Printing System).",
   "manual:print:button_show_printUnlock": "Show a button on start page to unlock print once print got locked.",
   "manual:print:max_multiple_prints": "If greater than 1 a dialog will appear showing the user how many copies to print. This settings define the maximum number of copies can be printed each time the button is pressed.",
@@ -782,6 +784,8 @@
   "preview:preview_url_delay": "Delay visibility of preview from URL",
   "preview:preview_videoHeight": "Device cam picture height",
   "preview:preview_videoWidth": "Device cam picture width",
+    "preview:preview_videoHeight_collage": "Device cam picture height while taking a collage",
+    "preview:preview_videoWidth_collage": "Device cam picture width while taking a collage",
   "previewTest": "Preview test",
   "previous_element": "Previous",
   "print": "Print",

src/Configuration/PhotoboothConfiguration.php

@@ -601,6 +601,24 @@ protected function addPreview(): NodeDefinition
                     ->end()
                 ->integerNode('videoHeight')
                     ->defaultValue(720)
+            ->beforeNormalization()
+            ->ifString()
+            ->then(function (string $value): int {
+                return intval($value);
+            })
+            ->end()
+            ->end()
+            ->integerNode('videoWidth_collage')
+            ->defaultValue(1280)
+            ->beforeNormalization()
+            ->ifString()
+            ->then(function (string $value): int {
+                return intval($value);
+            })
+            ->end()
+            ->end()
+            ->integerNode('videoHeight_collage')
+            ->defaultValue(720)
                     ->beforeNormalization()
                         ->ifString()
                         ->then(function (string $value): int { return intval($value); })