From 9814cc2f81068781e028700923861b7f67c5d48e Mon Sep 17 00:00:00 2001
From: Davide Alberani <da@erlug.linux.it>
Date: Fri, 1 Nov 2019 21:25:12 +0100
Subject: [PATCH] resize and center elements

---
 static/css/sb.css | 19 ++++++++-----------
 static/index.html |  2 +-
 static/js/sb.js   |  7 +++++++
 3 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/static/css/sb.css b/static/css/sb.css
index 9e528d9..29e5ad0 100644
--- a/static/css/sb.css
+++ b/static/css/sb.css
@@ -1,8 +1,10 @@
 #canvas-container {
     min-width: 640px;
     min-height: 480px;
+    width: 800px;
+    height: auto;
     position: relative;
-    display: none;
+    margin: 0 auto;
 }
 
 #header {
@@ -10,18 +12,20 @@
 }
 
 #sb-video {
+    z-index: 100;
     position: absolute;
+    width: 100%;
+    height: auto;
     top: 0px;
     left: 0px;
-    z-index: 100;
 }
 
 #sb-canvas {
+    z-index: 1000;
     position: absolute;
+    background-color: rgba(0, 0, 0, 0);
     top: 0px;
     left: 0px;
-    background-color: rgba(0, 0, 0, 0);
-    z-index: 1000;
 }
 
 #sb-message {
@@ -29,10 +33,3 @@
     z-index: 10000;
 }
 
-#sb-countdown {
-    min-width: 20px;
-}
-
-.btn {
-    margin-right: 10px;
-}
diff --git a/static/index.html b/static/index.html
index 70da083..1c7f77e 100644
--- a/static/index.html
+++ b/static/index.html
@@ -36,7 +36,7 @@
 
             <div class="row center-align">
                 <div id="canvas-container">
-                    <video id="sb-video" autoplay="true" muted="muted"></video>
+                    <video id="sb-video" autoplay muted></video>
                     <canvas id="sb-canvas"></canvas>
                 </div>
             </div>
diff --git a/static/js/sb.js b/static/js/sb.js
index 88eb405..ee19271 100644
--- a/static/js/sb.js
+++ b/static/js/sb.js
@@ -99,6 +99,7 @@ function runCamera(stream) {
         video.play();
     };
     video.srcObject = stream;
+    resizeCanvas(video, 'sb-canvas');
 }
 
 
@@ -306,3 +307,9 @@ function initCamera() {
     });
 }
 
+
+function resizeCanvas(el, canvasID) {
+    var canvas = document.getElementById(canvasID);
+    canvas.width = el.offsetWidth;
+    canvas.height = el.offsetHeighth;
+}