From 878a9457e191b468ca8d38fb2f18e227ef864589 Mon Sep 17 00:00:00 2001
From: Valkryst <github@valkryst.com>
Date: Thu, 7 Dec 2023 13:17:46 -0400
Subject: [PATCH] Update `jellron-display` to resize to fill available space,
 with respect to the MediaStream's aspect ratio

---
 css/styles.css | 4 ++--
 js/camera.js   | 6 +++++-
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/css/styles.css b/css/styles.css
index 3693da9..43452d3 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -22,8 +22,8 @@ table, th, td {
 #jellron-display {
     margin: 0 auto;
 
-    height: 600px;
-    width: 800px;
+    height: 800px;
+    width: 50%;
 
     & > canvas, & > video {
         position: absolute;
diff --git a/js/camera.js b/js/camera.js
index 0bca072..716e805 100644
--- a/js/camera.js
+++ b/js/camera.js
@@ -121,7 +121,11 @@ export class Camera {
         }
 
         this.videoElement.srcObject = await this.getVideoInputDevice();
-        this.videoElement.height = this.jellronDisplay.scrollHeight;
+
+        const aspectRatio = await this.getMediaStreamWidth() / await this.getMediaStreamHeight();
+        this.videoElement.parentElement.style.aspectRatio = aspectRatio;
+        this.videoElement.style.aspectRatio = aspectRatio;
+
         this.videoElement.width = this.jellronDisplay.scrollWidth;
     }