From 481db33d23a146f8ebf09a7d3661ed64bf28fa67 Mon Sep 17 00:00:00 2001
From: Josiah Neuberger <josiah@wikimylife.org>
Date: Sun, 7 Jan 2018 15:03:46 -0500
Subject: [PATCH] center/size stage-header controls in the same way as stage in
 fullscreen

---
 src/components/stage-header/stage-header.css |  1 +
 src/components/stage-header/stage-header.jsx |  7 +++-
 src/components/stage/stage.jsx               | 21 +++--------
 src/lib/screen-utils.js                      | 39 ++++++++++++++++++++
 4 files changed, 52 insertions(+), 16 deletions(-)
 create mode 100644 src/lib/screen-utils.js

diff --git a/src/components/stage-header/stage-header.css b/src/components/stage-header/stage-header.css
index 6c83cbcca..614852308 100644
--- a/src/components/stage-header/stage-header.css
+++ b/src/components/stage-header/stage-header.css
@@ -16,6 +16,7 @@
 
 .stage-menu-wrapper {
     display: flex;
+    margin: auto;
     justify-content: space-between;
     flex-shrink: 0;
     align-items: center;
diff --git a/src/components/stage-header/stage-header.jsx b/src/components/stage-header/stage-header.jsx
index 4da2397bf..0528740c6 100644
--- a/src/components/stage-header/stage-header.jsx
+++ b/src/components/stage-header/stage-header.jsx
@@ -8,6 +8,7 @@ import Box from '../box/box.jsx';
 import Button from '../button/button.jsx';
 import {ComingSoonTooltip} from '../coming-soon/coming-soon.jsx';
 import Controls from '../../containers/controls.jsx';
+import {getStageSize} from '../../lib/screen-utils.js';
 
 import fullScreenIcon from './icon--fullscreen.svg';
 import largeStageIcon from './icon--large-stage.svg';
@@ -49,11 +50,15 @@ const StageHeaderComponent = function (props) {
     } = props;
 
     let header = null;
+    const stageSize = getStageSize(isFullScreen);
 
     if (isFullScreen) {
         header = (
             <Box className={styles.stageHeaderWrapperOverlay}>
-                <Box className={styles.stageMenuWrapper}>
+                <Box
+                    className={styles.stageMenuWrapper}
+                    style={{width: stageSize.width}}
+                >
                     <Controls vm={vm} />
                     <Button
                         className={styles.stageButton}
diff --git a/src/components/stage/stage.jsx b/src/components/stage/stage.jsx
index c8777a263..f79bd3d77 100644
--- a/src/components/stage/stage.jsx
+++ b/src/components/stage/stage.jsx
@@ -6,6 +6,7 @@ import Box from '../box/box.jsx';
 import Loupe from '../loupe/loupe.jsx';
 import MonitorList from '../../containers/monitor-list.jsx';
 import Question from '../../containers/question.jsx';
+import {getStageSize} from '../../lib/screen-utils.js';
 import styles from './stage.css';
 
 const StageComponent = props => {
@@ -22,18 +23,8 @@ const StageComponent = props => {
         ...boxProps
     } = props;
 
-    let heightCorrectedAspect = height;
-    let widthCorrectedAspect = width;
-    const spacingBorderAdjustment = 9;
-    const stageMenuHeightAdjustment = 40;
-    if (isFullScreen) {
-        heightCorrectedAspect = window.innerHeight - stageMenuHeightAdjustment - spacingBorderAdjustment;
-        widthCorrectedAspect = heightCorrectedAspect + (heightCorrectedAspect / 3);
-        if (widthCorrectedAspect > window.innerWidth) {
-            widthCorrectedAspect = window.innerWidth;
-            heightCorrectedAspect = widthCorrectedAspect * .75;
-        }
-    }
+    const stageSize = getStageSize(isFullScreen, height, width);
+    
     return (
         <div>
             <Box
@@ -50,8 +41,8 @@ const StageComponent = props => {
                     )}
                     componentRef={canvasRef}
                     element="canvas"
-                    height={heightCorrectedAspect}
-                    width={widthCorrectedAspect}
+                    height={stageSize.height}
+                    width={stageSize.width}
                     {...boxProps}
                 />
                 <Box className={styles.monitorWrapper}>
@@ -71,7 +62,7 @@ const StageComponent = props => {
                     >
                         <div
                             className={styles.questionWrapper}
-                            style={{width: widthCorrectedAspect}}
+                            style={{width: stageSize.width}}
                         >
                             <Question
                                 question={question}
diff --git a/src/lib/screen-utils.js b/src/lib/screen-utils.js
new file mode 100644
index 000000000..866014913
--- /dev/null
+++ b/src/lib/screen-utils.js
@@ -0,0 +1,39 @@
+const STAGE_SIZE_DEFAULTS = {
+    heightSmall: 360,
+    widthSmall: 480,
+    spacingBorderAdjustment: 9,
+    menuHeightAdjustment: 40
+};
+
+const getStageSize = (
+    isFullScreen = false,
+    height = STAGE_SIZE_DEFAULTS.heightSmall,
+    width = STAGE_SIZE_DEFAULTS.widthSmall) => {
+
+    const stageSize = {
+        heightDefault: height,
+        widthDefault: width,
+        height: height,
+        width: width
+    };
+
+    if (isFullScreen) {
+        stageSize.height = window.innerHeight -
+                           STAGE_SIZE_DEFAULTS.menuHeightAdjustment -
+                           STAGE_SIZE_DEFAULTS.spacingBorderAdjustment;
+
+        stageSize.width = stageSize.height + (stageSize.height / 3);
+
+        if (stageSize.width > window.innerWidth) {
+            stageSize.width = window.innerWidth;
+            stageSize.height = stageSize.width * .75;
+        }
+    }
+
+    return stageSize;
+};
+
+export {
+    getStageSize,
+    STAGE_SIZE_DEFAULTS
+};