From e4bda238b63ffeec44e0d371bfc0eec4bf6419a7 Mon Sep 17 00:00:00 2001
From: Josiah Neuberger <josiah@wikimylife.org>
Date: Wed, 20 Sep 2017 20:37:14 -0400
Subject: [PATCH] fixed aspect ratio when stage is zoomed fullscreen

---
 src/components/stage/stage.css | 16 ++++++++++++++--
 src/components/stage/stage.jsx | 13 ++++++++++---
 src/containers/stage.jsx       |  2 ++
 3 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/src/components/stage/stage.css b/src/components/stage/stage.css
index bcd69a17b..a773f8980 100644
--- a/src/components/stage/stage.css
+++ b/src/components/stage/stage.css
@@ -23,9 +23,21 @@
     left: 0;
     right: 0;
     bottom: 0;
-    width: 100% !important;
-    height: 100% !important;
     z-index: 999;
+    background-color: rgba(255, 255, 255, 1);
+}
+
+.stage-overlay-content {
+    outline: none;
+    margin: auto;
+    border: 3px solid rgb(126, 133, 151);
+    padding: 0;
+    border-radius: $space;
+
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
 .monitor-wrapper {
diff --git a/src/components/stage/stage.jsx b/src/components/stage/stage.jsx
index afb68e2d0..4055db163 100644
--- a/src/components/stage/stage.jsx
+++ b/src/components/stage/stage.jsx
@@ -1,3 +1,4 @@
+import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
 
@@ -13,6 +14,12 @@ const StageComponent = props => {
         width,
         ...boxProps
     } = props;
+    let heightCorrectedAspect = window.innerHeight - 40;
+    let widthCorrectedAspect = heightCorrectedAspect + (heightCorrectedAspect / 3);
+    if (widthCorrectedAspect > window.innerWidth) {
+        widthCorrectedAspect = window.innerWidth;
+        heightCorrectedAspect = widthCorrectedAspect * .75;
+    }
     return isZoomed === false ? (
         <Box className={styles.stageWrapper}>
             <Box
@@ -30,11 +37,11 @@ const StageComponent = props => {
     ) : (
         <Box className={styles.stageWrapperOverlay}>
             <Box
-                className={styles.stage}
+                className={classNames(styles.stage, styles.stageOverlayContent)}
                 componentRef={canvasRef}
                 element="canvas"
-                height={'100%'}
-                width={'100%'}
+                height={heightCorrectedAspect}
+                width={widthCorrectedAspect}
                 {...boxProps}
             />
             <Box className={styles.monitorWrapper}>
diff --git a/src/containers/stage.jsx b/src/containers/stage.jsx
index e80ece5aa..51a60fda7 100644
--- a/src/containers/stage.jsx
+++ b/src/containers/stage.jsx
@@ -212,7 +212,9 @@ class Stage extends React.Component {
         return (
             <StageComponent
                 canvasRef={this.setCanvas}
+                height={this.props.height}
                 isZoomed={this.state.isZoomed}
+                width={this.props.width}
                 onDoubleClick={this.handleDoubleClick}
                 {...props}
             />