diff --git a/src/components/stage/stage.jsx b/src/components/stage/stage.jsx index 6d81443f8..f87a39b79 100644 --- a/src/components/stage/stage.jsx +++ b/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} /> - - - + {isStarted ? null : ( + + + + )} {isColorPicking && 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, diff --git a/src/containers/stage.jsx b/src/containers/stage.jsx index 077006fcc..94d4f092f 100644 --- a/src/containers/stage.jsx +++ b/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)