From 1536a691902ed37bf32325da9cbcbb43a6e51dac Mon Sep 17 00:00:00 2001 From: Andreas Blaesius Date: Sat, 19 Dec 2020 19:46:53 +0100 Subject: [PATCH] optimize canvas size on chroma keying and live keying Change-Id: I1ece90a1cebe0df45c53d78f4e0218494529daad --- chromakeying.php | 2 +- livechroma.php | 2 +- src/js/chromakeying.js | 1 + src/js/livechroma.js | 1 + src/sass/chromakeying.scss | 5 ++++- src/sass/live_chromakeying.scss | 20 ++++++++++++++++---- 6 files changed, 24 insertions(+), 7 deletions(-) diff --git a/chromakeying.php b/chromakeying.php index 62cecd57e..a13dceb28 100644 --- a/chromakeying.php +++ b/chromakeying.php @@ -53,7 +53,7 @@
-
+
diff --git a/livechroma.php b/livechroma.php index 58b5e50d1..11b64e0ed 100644 --- a/livechroma.php +++ b/livechroma.php @@ -49,7 +49,7 @@
-
+
diff --git a/src/js/chromakeying.js b/src/js/chromakeying.js index 4390ab118..33403a20e 100644 --- a/src/js/chromakeying.js +++ b/src/js/chromakeying.js @@ -323,4 +323,5 @@ $(document).ready(function () { $('#mainCanvas').css('height', canvasHeight - diff + 'px'); } + $('.canvasWrapper').removeClass('initial'); }); diff --git a/src/js/livechroma.js b/src/js/livechroma.js index f183e57b5..240c4b190 100644 --- a/src/js/livechroma.js +++ b/src/js/livechroma.js @@ -250,6 +250,7 @@ function saveImage(cb) { } $('.backgroundPreview').on('click', function () { + $('.canvasWrapper').removeClass('initial'); if ($('.chroma-control-bar').is(':hidden')) { $('.chroma-control-bar').show(); $('.chromaNote').empty(); diff --git a/src/sass/chromakeying.scss b/src/sass/chromakeying.scss index b562196ea..1abd4609b 100644 --- a/src/sass/chromakeying.scss +++ b/src/sass/chromakeying.scss @@ -21,15 +21,18 @@ } .canvasWrapper { - width: 1000px; display: inline-block; max-width: 100%; background-color: green; border: 4px solid $borderColor; + &.initial { + width: 1000px; + } } #mainCanvas { display: block; + max-height: 650px; max-width: 100%; } diff --git a/src/sass/live_chromakeying.scss b/src/sass/live_chromakeying.scss index f67360626..7721c319a 100644 --- a/src/sass/live_chromakeying.scss +++ b/src/sass/live_chromakeying.scss @@ -196,10 +196,12 @@ position: absolute; top: 40px; right: 0; - width: 950px; - max-width: 100%; + max-width: 950px; max-height: 100%; border: 4px solid $borderColor; + &.initial { + width: 950px; + } } .takeChroma, @@ -260,6 +262,10 @@ bottom: 0; width: 250px; } + + #mainCanvas { + max-height: 100%; + } } @media (max-height: 740px) and (orientation: landscape) { @@ -273,13 +279,19 @@ @media (max-width: 1200px) and (orientation: landscape) { .canvasWrapper, .chromaNote { - width: 750px; + max-width: 750px; + &.initial { + width: 750px; + } } } @media (max-width: 1000px) and (orientation: landscape) { .canvasWrapper, .chromaNote { - width: 650px; + max-width: 650px; + &.initial { + width: 650px; + } } }