preview: choose to flip the preview along the X or Y axis

Change-Id: Iecac804dd2d5d5240f83f3e8b7332982de99df06
PhotoboothProject · Jul 10, 2022 · 6918a72 · 6918a72
1 parent 546e013
commit 6918a72
Show file tree

Hide file tree

Showing 12 changed files with 23 additions and 28 deletions.
diff --git a/config/config.inc.php b/config/config.inc.php
@@ -163,7 +163,8 @@
 $config['preview']['gphoto_bsm'] = true;
 $config['preview']['stop_time'] = '2';
 $config['preview']['camTakesPic'] = false;
-$config['preview']['flipHorizontal'] = true;
+// possibile flip values: off, flip-horizontal, flip-vertical
+$config['preview']['flip'] = 'off';
 // possible rotation values: '0deg', '90deg', -90deg', '180deg', '45deg', '-45deg'
 $config['preview']['rotation'] = '0deg';
 $config['preview']['url'] = null;

diff --git a/index.php b/index.php
@@ -80,7 +80,7 @@
 	<?php endif; ?>
 </head>
 
-<video id="video--preview" autoplay playsinline></video>
+<video id="video--preview" class="<?php echo $config['preview']['flip']; ?>" autoplay playsinline></video>
 <body class="deselect">
 <div id="blocker"></div>
 <div id="aperture"></div>
@@ -111,7 +111,7 @@
 
 				<div id="ipcam--view"></div>
 
-				<video id="video--view" autoplay></video>
+				<video id="video--view" class="<?php echo $config['preview']['flip']; ?>" autoplay></video>
 
 				<div id="counter">
 					<canvas id="video--sensor"></canvas>

diff --git a/lib/configsetup.inc.php b/lib/configsetup.inc.php
@@ -1032,10 +1032,16 @@
             'name' => 'preview[camTakesPic]',
             'value' => $config['preview']['camTakesPic'],
         ],
-        'preview_flipHorizontal' => [
-            'type' => 'checkbox',
-            'name' => 'preview[flipHorizontal]',
-            'value' => $config['preview']['flipHorizontal'],
+        'preview_flip' => [
+            'view' => 'advanced',
+            'type' => 'select',
+            'name' => 'preview[flip]',
+            'placeholder' => $defaultConfig['preview']['flip'],
+            'options' => [
+                'off' => 'off',
+                'flip-horizontal' => 'horizontal',
+                'flip-vertical' => 'vertical',
+            ],
         ],
         'preview_rotation' => [
             'type' => 'select',

diff --git a/livechroma.php b/livechroma.php
@@ -91,7 +91,7 @@
 
 				<div id="ipcam--view"></div>
 
-				<video id="video--view" autoplay playsinline></video>
+				<video id="video--view" class="<?php echo $config['preview']['flip']; ?>" autoplay playsinline></video>
 
 				<div id="counter">
 					<canvas id="video--sensor"></canvas>

diff --git a/resources/lang/de.json b/resources/lang/de.json
@@ -386,7 +386,6 @@
   "manual:preview:preview_asBackground": "Wenn diese Option aktiviert ist, wird ein Stream von Ihrer Gerätekamera als Hintergrund auf dem Startbildschirm verwendet.",
   "manual:preview:preview_camTakesPic": "Wenn diese Option aktiviert ist, wird ein Bild von der Gerätekamera aufgenommen, anstatt den Befehl \"Bild aufnehmen\" auszuführen. Bitte beachten Sie, dass die Auflösung des Bildes von der angegebenen Höhe und Breite abhängt, da dies wie ein Screenshot aufgenommen wird.",
   "manual:preview:preview_camera_mode": "Wählen Sie den Kameramodus Ihrer Gerätekamera (Kamera mit Blick nach vorne oder hinten). Wenn die gphoto2 Live-Vorschau verwendet wird dies hier auch verwendet. Dafür muss gphoto_bsm deaktiviert sein. Dies ist auf einem Raspberry Pi nicht empfohlen, da es eine größere Rechenleistung benötigt.",
-  "manual:preview:preview_flipHorizontal": "Wenn diese Option aktiviert ist, wird die Vorschau von der Gerätekamera horizontal gespiegelt.",
   "manual:preview:preview_gphoto_bsm": "Wenn aktiviert, wird gphoto2 Live-Vorschau gestartet, sobald ein Foto ausgelöst wird. Dies führt zu einer Verzögerung von ~3 Sekunden, bis die Vorschau beim Countdown sichtbar ist. Wenn deaktiviert, wird eine Vorschau im Hintergrund generiert, was einen hohen Akkuverbrauch und eine allgemeine Verlangsamung zur Folge hat. Die Kamera ist dauerhaft in Betrieb und kann unter Umständen durch Hitzeentwicklung Schaden nehmen.",
   "manual:preview:preview_mode": "Wählen Sie eine Vorschaumodus. Die Video-Vorschau während des Countdown ist standardmäßig deaktiviert, Sie können zwischen einer Vorschau aus Ihrer Gerätekamera oder einer Vorschau aus einer URL wählen. Bei der Vorschau durch die \"Gerätekamera\" wird immer die Kamera des Geräts verwendet, auf dem die Photobooth in einem Browser geöffnet wird (z. B. wird auf einem Tablet immer die Tablet-Kamera angezeigt, während auf einem Smartphone stattdessen immer die Smartphone-Kamera angezeigt wird)! Ein sicherer Ursprung oder eine Ausnahme ist zwingend erforderlich! Wie Sie eine Ausnahme definieren finden Sie <a href=\"https://medium.com/@Carmichaelize/enabling-the-microphone-camera-in-chrome-for-local-unsecure-origins-9c90c3149339\" target=\"_blank\">hier</a>.",
   "manual:preview:preview_rotation": "Wählen Sie diese Option, um die Vorschau von der URL zu drehen.",
@@ -502,7 +501,6 @@
   "preview:preview_asBackground": "Videostream als Hintergrund verwenden",
   "preview:preview_camTakesPic": "Gerätekamera zur Bildaufnahme verwenden",
   "preview:preview_camera_mode": "Kamerabildmodus",
-  "preview:preview_flipHorizontal": "Bild von der Gerätekamera horizontal spiegeln",
   "preview:preview_gphoto_bsm": "Energiesparmodus bei gphoto2 Live-Vorschau",
   "preview:preview_mode": "Vorschaumodus",
   "preview:preview_rotation": "Vorschau von URL drehen",

diff --git a/resources/lang/en.json b/resources/lang/en.json
@@ -393,7 +393,7 @@
   "manual:preview:preview_asBackground": "If enabled, a stream from your device cam is used as background on start screen.",
   "manual:preview:preview_camTakesPic": "If enabled, a picture is taken from device cam instead executing the \"Take picture command\". Please note that the resolution depends on the given hight and width because it's acts like taking a screenshot.",
   "manual:preview:preview_camera_mode": "Choose between front- or back facing camera mode of your device cam. If gphoto2 live preview is enabled it is used here, as well. gphoto_bsm has to be enabled, as well. This is not recommended for a Raspberry Pi as it requires faster hardware.",
-  "manual:preview:preview_flipHorizontal": "If enabled, preview from device cam is flipped horizontal.",
+  "manual:preview:preview_flip": "Choose to flip the preview from device cam.",
   "manual:preview:preview_gphoto_bsm": "If enabled, gphoto2 live preview is started once a photo get triggered. This results in a delay of ~3 seconds until the preview is visible at countdown. If disabled, a preview is generated in background which results in a high battery usage and also a general slowdown. Camera is always active which might generate some heat and damage the camera sensor.",
   "manual:preview:preview_mode": "Choose a live preview mode. By default live preview is disabled, you can choose between a preview at countdown by your device cam and a preview from a URL. Preview \"from device cam\" will always use the camera of the device where Photobooth get opened in a Browser (e.g. on a tablet it will always show the tablet camera while on a smartphone it will always show the smartphone camera instead)! A secure origin or exception is required! You can find out how to set an exception <a href=\"https://medium.com/@Carmichaelize/enabling-the-microphone-camera-in-chrome-for-local-unsecure-origins-9c90c3149339\"  target=\"_blank\">here</a>.",
   "manual:preview:preview_rotation": "Choose to rotate the preview from URL.",
@@ -522,7 +522,7 @@
   "preview:preview_asBackground": "Use video stream as background",
   "preview:preview_camTakesPic": "Device cam takes picture",
   "preview:preview_camera_mode": "Camera facing mode",
-  "preview:preview_flipHorizontal": "Flip image from device cam horizontally",
+  "preview:preview_flip": "Flip preview from device cam:",
   "preview:preview_gphoto_bsm": "Battery saving mode on gphoto2 live preview",
   "preview:preview_mode": "Preview mode",
   "preview:preview_rotation": "Rotate preview from URL",

diff --git a/resources/lang/es.json b/resources/lang/es.json
@@ -229,7 +229,6 @@
   "manual:pictures:picture_take_frame": "Si está activado, el marco definido se aplicará a su imagen después de tomarla.",
   "manual:preview:preview_asBackground": "Si está habilitado, una secuencia desde la cámara del dispositivo se utiliza como fondo en la pantalla de inicio.",
   "manual:preview:preview_camTakesPic": "Si está activada, se toma una imagen de la leva del dispositivo en lugar de ejecutar el \"El comando de tomar un foto\". Tenga en cuenta que la resolución depende de la altura y anchura dadas porque es actúa como tomar una captura de pantalla.",
-  "manual:preview:preview_flipHorizontal": "Si está activada, la vista previa desde la cámara del dispositivo se voltea horizontalmente.",
   "manual:preview:preview_mode": "Si está habilitado, se utiliza una vista previa de la cámara del dispositivo en la cuenta atrás. Vista previa por \"cámara del dispositivo\" siempre utilizará la cámara del dispositivo donde Photobooth se abren en un navegador (e.g. en una tableta siempre mostrará la cámara de la tableta mientras que en un teléfono inteligente siempre mostrará la cámara del teléfono inteligente en su lugar)! ¡Se requiere un origen o excepción seguro! Puede averiguar cómo establecer una excepción <a href=\"https://medium.com/@Carmichaelize/enabling-the-microphone-camera-in-chrome-for-local-unsecure-origins-9c90c3149339\"  target=\"_blank\">aquí</a>.",
   "manual:preview:preview_rotation": "Elija para rotar la vista previa desde la URL.",
   "manual:preview:preview_url": "Estilo CSS para usar un stream desde una URL para vista previa durante la cuenta regresiva. <p>Ejemplo: <code>url(../img/bg_bluegray.jpg)</code></p>",
@@ -296,7 +295,6 @@
   "preview": "Vista previa",
   "preview:preview_camTakesPic": "Cámara del dispositivo toma la foto",
   "preview:preview_camera_mode": "Modo de cara a cámara",
-  "preview:preview_flipHorizontal": "Voltear la imagen de la leva del dispositivo horizontalmente",
   "preview:preview_gphoto_bsm": "Modo de ahorro de batería en vista previa gphoto2",
   "preview:preview_mode": "Modo vista previa",
   "preview:preview_rotation": "Rotar la vista previa de URL",

diff --git a/resources/lang/fr.json b/resources/lang/fr.json
@@ -379,7 +379,6 @@
   "manual:preview:preview_asBackground": "Si activé, un flux vidéo provenant de la caméra est utilisé en arrière-plan sur l'écran d'accueil.",
   "manual:preview:preview_camTakesPic": "Si activé, une photo est prise à partir de la caméra de l'appareil au lieu d'exécuter la commande « Prendre une photo ». Veuillez noter que la résolution dépend de la hauteur et de la largeur spécifiées, car elle agit comme une capture d'écran.",
   "manual:preview:preview_camera_mode": "Choisissez entre le mode de caméra avant ou arrière de votre appareil. Si gphoto2 Live preview est activé, il est également utilisé ici. gphoto_bsm doit également être activé. Ce n'est pas recommandé pour un Raspberry Pi car il nécessite un matériel plus rapide.",
-  "manual:preview:preview_flipHorizontal": "Si activé, l'aperçu de l'appareil photo est retourné horizontalement.",
   "manual:preview:preview_gphoto_bsm": "Si activé, l'aperçu en direct de gphoto2 est démarré une fois qu'une photo est déclenchée. Cela se traduit par un délai de ~3 secondes jusqu'à ce que l'aperçu soit visible au compte à rebours. Si cette option est désactivée, un aperçu est généré en arrière-plan, ce qui se traduit par une utilisation élevée de la batterie et un ralentissement général. La caméra est toujours active, ce qui peut générer de la chaleur et endommager le capteur de caméra.",
   "manual:preview:preview_mode": "Choisissez un mode d'aperçu en direct. Par défaut, l'aperçu en direct est désactivé, vous pouvez choisir entre un aperçu au compte à rebours de votre appareil photo, d'une caméra ou d'une URL. Aperçu \"à partir de la caméra de l'appareil\" utilisera toujours la caméra de l'appareil où Photobooth est ouvert dans un navigateur (e. . sur une tablette, elle montrera toujours la caméra de la tablette, sur un smartphone, elle montrera toujours la caméra du smartphone à la place) ! Une source sécurisée ou une exception est requise ! Vous pouvez trouver comment définir une exception <a href=\"https://medium.com/@Carmichaelize/enabling-the-microphone-camera-in-chrome-for-local-unsecure-origins-9c90c3149339\"  target=\"_blank\">ici</a>.",
   "manual:preview:preview_rotation": "Choisissez de faire pivoter la prévisualisation depuis l'URL.",
@@ -504,7 +503,6 @@
   "preview:preview_asBackground": "Utiliser le flux vidéo comme arrière-plan",
   "preview:preview_camTakesPic": "L'appareil photo prend une photo",
   "preview:preview_camera_mode": "Mode d'affichage de l'appareil photo",
-  "preview:preview_flipHorizontal": "Retourner horizontalement l'image depuis la caméra",
   "preview:preview_gphoto_bsm": "Mode économie de batterie en mode aperçu en direct gphoto2",
   "preview:preview_mode": "Mode prévisualisation",
   "preview:preview_rotation": "Rotation de la prévisualisation depuis l'URL",

diff --git a/resources/lang/it.json b/resources/lang/it.json
@@ -339,7 +339,6 @@
   "manual:pictures:picture_take_frame": "Se abilitata, il frame scelto verrà applicato alla tua immagine dopo lo scatto.",
   "manual:preview:preview_asBackground": "Se abilitato, come sfondo sullo schermo di avvio verrà utilizzata la registrazione della webcam.",
   "manual:preview:preview_camTakesPic": "Se abilitata, una foto viene scattata dalla videocamera del dispositivo invece di eseguire lo \"Scatta foto\". Si prega di notare che la risoluzione dipende dall'altezza e dalla larghezza data perché si comporta come uno screenshot.",
-  "manual:preview:preview_flipHorizontal": "Se abilitata, l'anteprima dalla webcam è capovolta orizzontalmente.",
   "manual:preview:preview_mode": "Scegli una modalità di anteprima. Di default, l'anteprima live è disabilitata, è possibile scegliere tra un'anteprima al conto alla rovescia dalla webcam del dispositivo e un'anteprima da un URL. Anteprima \"dalla fotocamera del dispositivo\" utilizzerà sempre la fotocamera del dispositivo in cui Photobooth viene aperto in un browser (ed es. su un tablet mostrerà sempre la fotocamera del tablet mentre su uno smartphone mostrerà sempre la fotocamera dello smartphone)! È richiesta un'origine o un'eccezione sicura! Puoi scoprire come impostare un'eccezione <a href=\"https://medium.com/@Carmichaelize/enabling-the-microphone-camera-in-chrome-for-local-unsecure-origins-9c90c3149339\"  target=\"_blank\">qui</a>.",
   "manual:preview:preview_rotation": "Scegliere di ruotare l'anteprima dall'URL.",
   "manual:preview:preview_url": "Stile CSS da usare come preview durante il conto alla rovescia come URL. <p>Esempio: <code>url(../img/bg_bluegray.jpg)</code></p>",
@@ -420,7 +419,6 @@
   "preview": "Anteprima dal vivo",
   "preview:preview_camTakesPic": "La webcam del dispositivo scatta le foto",
   "preview:preview_camera_mode": "Modalità camera frontale",
-  "preview:preview_flipHorizontal": "Rifletti l'immagine dalla cam del dispositivo orizzontalmente",
   "preview:preview_gphoto_bsm": "Modalità risparmio batteria su gphoto2 in anteprima live",
   "preview:preview_mode": "Modalità anteprima",
   "preview:preview_rotation": "Ruota l'anteprima dall'URL",

diff --git a/resources/lang/pl.json b/resources/lang/pl.json
@@ -169,7 +169,6 @@
   "manual:pictures:picture_polaroid_rotation": "Wprowadź wartość, która ustawi stopnie obrotu obrazu po jego wykonaniu z efektem polaroid.",
   "manual:pictures:picture_rotation": "Wprowadź wartość, która ustawi stopnie obrotu obrazu po jego wykonaniu.",
   "manual:preview:preview_asBackground": "Jeśli włączone, jako tło na ekranie początkowym używany jest strumień z kamery urządzenia.",
-  "manual:preview:preview_flipHorizontal": "Jeśli włączone, podgląd z kamery urządzenia jest odbiciem lustrzanym.",
   "manual:print:button_show_cups": "Pokaż przycisk na stronie startowej, aby łatwo uzyskać dostęp do CUPS (Common Unix Printing System).",
   "manual:print:print_auto": "Jeśli włączone, zdjęcie zostanie wydrukowane natychmiast po wykonaniu.",
   "manual:print:print_auto_delay": "Wprowadź w milisekundach, opóźnienie automatycznego wydruku zdjęcia.",
@@ -213,7 +212,6 @@
   "pictures:picture_rotation": "Obróć zdjęcie po wykonaniu (w stopniach)",
   "pictures:picture_take_frame": "Zrób zdjęcie z ramką",
   "preview:preview_camTakesPic": "Kamerka urządzenia robi zdjęcie",
-  "preview:preview_flipHorizontal": "Odwróć obraz z kamery urządzenia w poziomie",
   "print": "Drukuj",
   "print:button_show_cups": "Pokaż przycisk CUPS",
   "print:print_auto": "Drukuj zdjęcie natychmiast po wykonaniu",

diff --git a/src/js/core.js b/src/js/core.js
@@ -112,14 +112,6 @@ const photoBooth = (function () {
         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();

diff --git a/src/sass/partials/_video_preview.scss b/src/sass/partials/_video_preview.scss
@@ -39,3 +39,9 @@
   transform: scaleX(-1);
   filter: FlipH;
 }
+
+.flip-vertical {
+  -webkit-transform: scaleY(-1);
+  transform: scaleY(-1);
+  filter: FlipV;
+}