From d2e75b77fa43c4bf0f2fe278c73a0a79cc8851c2 Mon Sep 17 00:00:00 2001
From: Davide Alberani <da@erlug.linux.it>
Date: Sat, 1 Dec 2018 11:59:20 +0100
Subject: [PATCH] improve size of video

---
 README.md         |  4 ++++
 static/css/sb.css | 21 ++++++++-------------
 static/index.html |  6 +++---
 static/js/sb.js   | 12 +++++++++---
 4 files changed, 24 insertions(+), 19 deletions(-)

diff --git a/README.md b/README.md
index 490c08f..1b056b8 100644
--- a/README.md
+++ b/README.md
@@ -4,6 +4,10 @@ A work-in-progress project for 35C3 (from an idea by itec)
 
 Still not much to see here: the UI still sucks and very little feedback is given.
 
+# Requirements
+
+* Python 3
+* Mastodon.py: https://github.com/halcy/Mastodon.py
 
 # Run
 
diff --git a/static/css/sb.css b/static/css/sb.css
index 9a19065..d7bf39c 100644
--- a/static/css/sb.css
+++ b/static/css/sb.css
@@ -1,4 +1,6 @@
 #canvas-container {
+    min-width: 640px;
+    min-height: 480px;
     position: relative;
     display: none;
 }
@@ -8,15 +10,13 @@
 }
 
 #sb-video {
-    width: 640px;
-    height: 480px;
-    position: relative;
+    position: absolute;
+    top: 0px;
+    left: 0px;
     z-index: 100;
 }
 
 #sb-canvas {
-    width: 640px;
-    height: 480px;
     position: absolute;
     top: 0px;
     left: 0px;
@@ -26,14 +26,9 @@
 
 #sb-message {
     visibility: hidden;
-}
-
-/*
-#sb-message-text {
-    position: absolute;
-    left: 10px;
-    bottom: 20px;
     z-index: 10000;
 }
-*/
 
+.btn {
+    margin-right: 10px;
+}
diff --git a/static/index.html b/static/index.html
index 3785e32..9c4e59a 100644
--- a/static/index.html
+++ b/static/index.html
@@ -32,13 +32,13 @@
             </div>
 
             <div class="row">
+                <div id="sb-message">
+                    <span id="sb-message-text">will be gone in few seconds!</span>
+                </div>
                 <div id="canvas-container">
                     <video id="sb-video" autoplay="true" muted="muted"></video>
                     <canvas id="sb-canvas"></canvas>
                 </div>
-                <div id="sb-message">
-                    <span id="sb-message-text">will be gone in few seconds!</span>
-                </div>
             </div>
         </div>
     </body>
diff --git a/static/js/sb.js b/static/js/sb.js
index 85139e5..f554363 100644
--- a/static/js/sb.js
+++ b/static/js/sb.js
@@ -52,7 +52,8 @@ var countdown = {
 function runCamera(stream) {
     console.log("initialize the camera");
     var video = document.querySelector("#sb-video");
-    video.width = video.offsetWidth;
+    var container = document.querySelector("#canvas-container");
+    container.width = video.videoWidth;
     video.onloadedmetadata = function() {
         video.play();
     };
@@ -134,8 +135,12 @@ function takePhoto() {
     document.querySelector("#sb-message").style.visibility = "visible";
     var video = document.querySelector("#sb-video");
     var canvas = document.querySelector("#sb-canvas");
+    var context = canvas.getContext("2d");
+    canvas.width = video.offsetWidth;
+    canvas.height = video.offsetHeight;
+ 
+    /*
     var tmpCanvas = document.createElement("canvas");
-
     tmpCanvas.width = video.offsetWidth;
     tmpCanvas.height = video.offsetHeight;
 
@@ -146,10 +151,11 @@ function takePhoto() {
     canvas.width = canvas.offsetWidth;
     canvas.height = canvas.offsetHeight;
     canvas.style.height = parseInt(canvas.offsetWidth * tmpRatio);
-    var context = canvas.getContext("2d");
     var scale = canvas.width / tmpCanvas.width;
     context.scale(scale, scale);
     context.drawImage(tmpCanvas, 0, 0);
+    */
+    context.drawImage(video, 0, 0, video.offsetWidth, video.offsetHeight);
     document.querySelector("#send-photo-btn").classList.remove("disabled");
     document.querySelector("#cancel-photo-btn").classList.remove("disabled");
     countdown.start(5, cancelPhoto, updateSendCountdown);