From 885c294443b52694e89f7323019f919abbeca9e5 Mon Sep 17 00:00:00 2001
From: Michael Neuendorf <michael@neuendorf-online.de>
Date: Sun, 29 Mar 2020 13:05:13 +0200
Subject: [PATCH] Remove toggling of torch, as it's not working and add resize
 of video to fit in viewport hieght

---
 public/css/grocy.css                       |  7 ++++++
 public/viewjs/components/barcodescanner.js | 25 ++++++++++++++++------
 2 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/public/css/grocy.css b/public/css/grocy.css
index 2be88364..957bdf13 100644
--- a/public/css/grocy.css
+++ b/public/css/grocy.css
@@ -260,8 +260,15 @@ input::-webkit-inner-spin-button {
 }
 
 /* Barcodescanner Quagga */
+#barcodescanner-container {
+	max-height: 90vw;
+}
+#livestream-container {
+	max-height: 100%;
+}
 #barcodescanner-livestream video {
 	width: 100%;
+
 }
 #barcodescanner-livestream canvas {
 	width: 100%;
diff --git a/public/viewjs/components/barcodescanner.js b/public/viewjs/components/barcodescanner.js
index 6e4936f4..855eba8e 100644
--- a/public/viewjs/components/barcodescanner.js
+++ b/public/viewjs/components/barcodescanner.js
@@ -11,12 +11,26 @@ Grocy.Components.BarcodeScanner.CheckCapabilities = function()
 	var canTorch = typeof capabilities.torch === 'boolean' && capabilities.torch
 	var node = document.querySelector('.torch');
 	if (node) {
-		node.style.display = canTorch ? 'block' : 'none';
+		node.style.display = canTorch ? 'inline-block' : 'none';
+	}
+
+	// Reduce the height of the video, if it's heigher than then the viewport
+	var bc = document.getElementById('barcodescanner-container');
+	if (bc) {
+		var bcAspectRatio = bc.offsetWidth / bc.offsetHeight;
+		var settings = track.getSettings();
+		if (bcAspectRatio > settings.aspectRatio) {
+			var v = document.querySelector('#barcodescanner-livestream video')
+			if (v) {
+				var c = document.querySelector('#barcodescanner-livestream canvas')
+				var newWidth = v.clientWidth / bcAspectRatio * settings.aspectRatio + 'px';
+				v.style.width = newWidth;
+				c.style.width = newWidth;
+			}
+		}
 	}
 }
 
-Grocy.Components.BarcodeScanner.TorchState = false;
-
 Grocy.Components.BarcodeScanner.StartScanning = function()
 {
 	Grocy.Components.BarcodeScanner.DecodedCodesCount = 0;
@@ -28,8 +42,6 @@ Grocy.Components.BarcodeScanner.StartScanning = function()
 			type: "LiveStream",
 			target: document.querySelector("#barcodescanner-livestream"),
 			constraints: {
-				// width: 436,
-				// height: 327,
 				facingMode: "environment"
 			}
 		},
@@ -180,11 +192,10 @@ $(document).on("click", "#barcodescanner-start-button", function(e)
 				className: 'btn-warning responsive-button torch',
 				callback: function()
 				{
-					Grocy.Components.BarcodeScanner.TorchState = !Grocy.Components.BarcodeScanner.TorchState;
 					Quagga.CameraAccess.getActiveTrack().applyConstraints({ 
 						advanced: [
 							{ 
-								torch: Grocy.Components.BarcodeScanner.TorchState 
+								torch: true
 							}
 						]
 					});