Merge pull request #3885 from paulkaplan/fix-start-frame

Hide entire frame unless the VM has not started

src/components/stage/stage.jsx

@@ -20,6 +20,7 @@ const StageComponent = props => {
         dragRef,
         isColorPicking,
         isFullScreen,
+        isStarted,
         colorInfo,
         micIndicator,
         question,
@@ -72,11 +73,13 @@ const StageComponent = props => {
                         stageWidth={stageDimensions.width}
                     />
                 </Box>
-                <Box className={styles.greenFlagOverlayWrapper}>
-                    <GreenFlagOverlay
-                        className={styles.greenFlagOverlay}
-                    />
-                </Box>
+                {isStarted ? null : (
+                    <Box className={styles.greenFlagOverlayWrapper}>
+                        <GreenFlagOverlay
+                            className={styles.greenFlagOverlay}
+                        />
+                    </Box>
+                )}
                 {isColorPicking && colorInfo ? (
                     <Box className={styles.colorPickerWrapper}>
                         <Loupe colorInfo={colorInfo} />
@@ -131,6 +134,7 @@ StageComponent.propTypes = {
     dragRef: PropTypes.func,
     isColorPicking: PropTypes.bool,
     isFullScreen: PropTypes.bool.isRequired,
+    isStarted: PropTypes.bool,
     micIndicator: PropTypes.bool,
     onDeactivateColorPicker: PropTypes.func,
     onDoubleClick: PropTypes.func,

src/containers/stage.jsx

@@ -82,7 +82,8 @@ class Stage extends React.Component {
             this.state.colorInfo !== nextState.colorInfo ||
             this.props.isFullScreen !== nextProps.isFullScreen ||
             this.state.question !== nextState.question ||
-            this.props.micIndicator !== nextProps.micIndicator;
+            this.props.micIndicator !== nextProps.micIndicator ||
+            this.props.isStarted !== nextProps.isStarted;
     }
     componentDidUpdate (prevProps) {
         if (this.props.isColorPicking && !prevProps.isColorPicking) {
@@ -410,6 +411,7 @@ Stage.defaultProps = {
 const mapStateToProps = state => ({
     isColorPicking: state.scratchGui.colorPicker.active,
     isFullScreen: state.scratchGui.mode.isFullScreen,
+    isStarted: state.scratchGui.vmStatus.started,
     micIndicator: state.scratchGui.micIndicator,
     // Do not use editor drag style in fullscreen or player mode.
     useEditorDragStyle: !(state.scratchGui.mode.isFullScreen || state.scratchGui.mode.isPlayerOnly)