Manage see inside/community from wrapper

And implement toggle on player playground

src/components/gui/gui.jsx

@@ -72,6 +72,7 @@ const GUIComponent = props => {
         onActivateTab,
         onRequestCloseBackdropLibrary,
         onRequestCloseCostumeLibrary,
+        onSeeCommunity,
         previewInfoVisible,
         targetIsStage,
         soundsTabVisible,
@@ -141,7 +142,10 @@ const GUIComponent = props => {
                         onRequestClose={onRequestCloseBackdropLibrary}
                     />
                 ) : null}
-                <MenuBar enableCommunity={enableCommunity} />
+                <MenuBar
+                    enableCommunity={enableCommunity}
+                    onSeeCommunity={onSeeCommunity}
+                />
                 <Box className={styles.bodyWrapper}>
                     <Box className={styles.flexWrapper}>
                         <Box className={styles.editorWrapper}>
@@ -285,6 +289,7 @@ GUIComponent.propTypes = {
     onExtensionButtonClick: PropTypes.func,
     onRequestCloseBackdropLibrary: PropTypes.func,
     onRequestCloseCostumeLibrary: PropTypes.func,
+    onSeeCommunity: PropTypes.func,
     onTabSelect: PropTypes.func,
     previewInfoVisible: PropTypes.bool,
     soundsTabVisible: PropTypes.bool,

src/containers/gui.jsx

@@ -99,6 +99,7 @@ GUI.propTypes = {
     fetchingProject: PropTypes.bool,
     importInfoVisible: PropTypes.bool,
     loadingStateVisible: PropTypes.bool,
+    onSeeCommunity: PropTypes.func,
     previewInfoVisible: PropTypes.bool,
     projectData: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
     vm: PropTypes.instanceOf(VM)

src/playground/player.jsx

@@ -1,3 +1,4 @@
+import classNames from 'classnames';
 import React from 'react';
 import ReactDOM from 'react-dom';
 
@@ -13,14 +14,41 @@ if (process.env.NODE_ENV === 'production' && typeof window === 'object') {
 }
 
 import styles from './player.css';
-const Player = () => (
-    <Box className={styles.stageOnly}>
-        <WrappedGui
-            isPlayerOnly
-            isFullScreen={false}
-        />
-    </Box>
-);
+
+class Player extends React.Component {
+    constructor (props) {
+        super(props);
+        this.handleSeeInside = this.handleSeeInside.bind(this);
+        this.handleSeeCommunity = this.handleSeeCommunity.bind(this);
+        this.state = {
+            isPlayerOnly: true
+        };
+    }
+    handleSeeInside () {
+        this.setState({isPlayerOnly: false});
+    }
+    handleSeeCommunity () {
+        this.setState({isPlayerOnly: true});
+    }
+    render () {
+        return (
+            <Box
+                className={classNames({
+                    [styles.stageOnly]: this.state.isPlayerOnly
+                })}
+            >
+                {this.state.isPlayerOnly && (
+                    <button onClick={this.handleSeeInside}>{'See inside'}</button>
+                )}
+                <WrappedGui
+                    enableCommunity
+                    isPlayerOnly={this.state.isPlayerOnly}
+                    onSeeCommunity={this.handleSeeCommunity}
+                />
+            </Box>
+        );
+    }
+}
 
 const appTarget = document.createElement('div');
 document.body.appendChild(appTarget);