From 3abb1d481838fefadad3da389bf823804be39245 Mon Sep 17 00:00:00 2001
From: sergystepanov <SergyStepanov@gmail.com>
Date: Wed, 28 Jul 2021 02:13:03 +0300
Subject: [PATCH] Use orientation-based video / canvas stretching (#335)

---
 web/css/main.css        | 3 +--
 web/index.html          | 2 +-
 web/js/stream/stream.js | 6 ++++++
 3 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/web/css/main.css b/web/css/main.css
index d0b2058f..237fc4b6 100644
--- a/web/css/main.css
+++ b/web/css/main.css
@@ -429,9 +429,8 @@ body {
 }
 
 .game-screen {
-    /*overflow: hidden;*/
     width: 100%;
-    /*height: 100%;*/
+    height: 100%;
     background-color: #222222;
     position: absolute;
     display: flex;
diff --git a/web/index.html b/web/index.html
index fbd2722a..273abf4b 100644
--- a/web/index.html
+++ b/web/index.html
@@ -124,7 +124,7 @@
 <script src="/static/js/env.js?v=5"></script>
 <script src="/static/js/input/input.js?v=3"></script>
 <script src="/static/js/gameList.js?v=3"></script>
-<script src="/static/js/stream/stream.js?v=1"></script>
+<script src="/static/js/stream/stream.js?v=2"></script>
 <script src="/static/js/room.js?v=3"></script>
 <script src="/static/js/stats/stats.js?v=1"></script>
 <script src="/static/js/network/ajax.js?v=3"></script>
diff --git a/web/js/stream/stream.js b/web/js/stream/stream.js
index 8ee5f6f7..9766236c 100644
--- a/web/js/stream/stream.js
+++ b/web/js/stream/stream.js
@@ -97,6 +97,12 @@ const stream = (() => {
                 canvas.style['image-rendering'] = 'pixelated';
                 canvas.classList.add('game-screen');
 
+                // stretch depending on the video orientation
+                // portrait -- vertically, landscape -- horizontally
+                const isPortrait = screen.videoWidth < screen.videoHeight;
+                canvas.style.width = isPortrait ? 'auto' : canvas.style.width;
+                canvas.style.height = isPortrait ? canvas.style.height : 'auto';
+
                 let surface = canvas.getContext('2d');
                 screen.parentNode.insertBefore(canvas, screen.nextSibling);
                 toggle(false)