Initial GUI embed (#1869)

- `/preview/editor` will load GUI with an empty project
- `/preview/:id/editor` will load GUI with a project from the projects server (not local data)
- passes intl object to GUI
- `/preview/:id` with show the project page with an embedded player
- `/preview/:id/fullscreen` will load the project page with the player in fullscreen mode.

* Note that we needed to Increase memory for the build to avoid running out of heap space, and build time increases by about 2 minutes

Makefile

@@ -1,10 +1,10 @@
 ESLINT=./node_modules/.bin/eslint
-NODE=node
+NODE= NODE_OPTIONS=--max_old_space_size=8000 node
 SASSLINT=./node_modules/.bin/sass-lint -v
 S3CMD=s3cmd sync -P --delete-removed --add-header=Cache-Control:no-cache,public,max-age=3600
 TAP=./node_modules/.bin/tap
-WATCH=./node_modules/.bin/watch
+WATCH= NODE_OPTIONS=--max_old_space_size=8000 ./node_modules/.bin/watch
-WEBPACK=./node_modules/.bin/webpack
+WEBPACK= NODE_OPTIONS=--max_old_space_size=8000 ./node_modules/.bin/webpack
 
 # ------------------------------------
 

package.json

@@ -94,6 +94,7 @@
     "redux-thunk": "2.0.1",
     "sass-lint": "1.5.1",
     "sass-loader": "6.0.6",
+    "scratch-gui": "0.1.0-prerelease.20180427201459",
     "scratchr2_translations": "git://github.com/LLK/scratchr2_translations.git#master",
     "slick-carousel": "1.6.0",
     "source-map-support": "0.3.2",

src/routes.json

@@ -193,7 +193,7 @@
     },
     {
         "name": "preview",
-        "pattern": "^/preview/?(\\d+)?/?$",
+        "pattern": "^/preview/(*)/?$",
         "routeAlias": "/preview/?$",
         "view": "preview/preview",
         "title": "Scratch 3.0 Preview"

src/views/preview/presentation.jsx

@@ -6,12 +6,14 @@ const React = require('react');
 const Formsy = require('formsy-react').default;
 const classNames = require('classnames');
 
+const GUI = require('scratch-gui').default;
+const IntlGUI = injectIntl(GUI);
+
 const sessionActions = require('../../redux/session.js');
 const decorateText = require('../../lib/decorate-text.jsx');
 const FlexRow = require('../../components/flex-row/flex-row.jsx');
 const Avatar = require('../../components/avatar/avatar.jsx');
 const CappedNumber = require('../../components/cappednumber/cappednumber.jsx');
-const placeholder = require('./gui-placeholder.png');
 const ShareBanner = require('../../components/share-banner/share-banner.jsx');
 const ThumbnailColumn = require('../../components/thumbnailcolumn/thumbnailcolumn.jsx');
 const InplaceInput = require('../../components/forms/inplace-input.jsx');
@@ -25,8 +27,10 @@ const PreviewPresentation = props => {
         faved,
         favoriteCount,
         intl,
+        isFullScreen,
         loved,
         loveCount,
+        projectId,
         projectInfo,
         remixes,
         sessionStatus,
@@ -34,6 +38,7 @@ const PreviewPresentation = props => {
         user,
         onFavoriteClicked,
         onLoveClicked,
+        onSeeInside,
         onUpdate
         // ...otherProps TBD
     } = props;
@@ -93,15 +98,23 @@ const PreviewPresentation = props => {
                                         Remix
                                     </button>
                                 }
-                                <button className="button see-inside-button">
+                                <button
+                                    className="button see-inside-button"
+                                    onClick={onSeeInside}
+                                >
                                     See Inside
                                 </button>
                             </div>
                         </FlexRow>
                         <FlexRow className="preview-row">
-                            <div className="placeholder">
+                            <IntlGUI
-                                <img src={placeholder} />
+                                isPlayerOnly
-                            </div>
+                                basePath="/"
+                                className="guiPlayer"
+                                isFullScreen={isFullScreen}
+                                previewInfoVisible="false"
+                                projectId={projectId}
+                            />
                             <FlexRow className="project-notes">
                                 {shareDate && (
                                     <div className="share-date">
@@ -286,11 +299,14 @@ PreviewPresentation.propTypes = {
     faved: PropTypes.bool,
     favoriteCount: PropTypes.number,
     intl: intlShape,
+    isFullScreen: PropTypes.bool,
     loveCount: PropTypes.number,
     loved: PropTypes.bool,
     onFavoriteClicked: PropTypes.func,
     onLoveClicked: PropTypes.func,
+    onSeeInside: PropTypes.func,
     onUpdate: PropTypes.func,
+    projectId: PropTypes.number,
     projectInfo: PropTypes.shape({
         id: PropTypes.number,
         title: PropTypes.string,

src/views/preview/preview.jsx

@@ -2,6 +2,7 @@ const bindAll = require('lodash.bindall');
 const React = require('react');
 const PropTypes = require('prop-types');
 const connect = require('react-redux').connect;
+const injectIntl = require('react-intl').injectIntl;
 const Page = require('../../components/page/www/page.jsx');
 const render = require('../../lib/render.jsx');
 
@@ -9,6 +10,8 @@ const PreviewPresentation = require('./presentation.jsx');
 
 const sessionActions = require('../../redux/session.js');
 const previewActions = require('../../redux/preview.js');
+const GUI = require('scratch-gui').default;
+const IntlGUI = injectIntl(GUI);
 
 class Preview extends React.Component {
     constructor (props) {
@@ -17,36 +20,28 @@ class Preview extends React.Component {
             'handleFavoriteToggle',
             'handleLoveToggle',
             'handlePermissions',
+            'handleSeeInside',
             'handleUpdate',
             'initCounts'
         ]);
-        this.state = {
+        this.state = this.initState();
-            editable: false,
-            favoriteCount: 0,
-            loveCount: 0
-        };
     }
     componentDidUpdate (prevProps) {
-        let pathname = window.location.pathname.toLowerCase();
-        if (pathname[pathname.length - 1] === '/') {
-            pathname = pathname.substring(0, pathname.length - 1);
-        }
-        const path = pathname.split('/');
-        const projectId = path[path.length - 1];
         if (this.props.sessionStatus !== prevProps.sessionStatus &&
-            this.props.sessionStatus === sessionActions.Status.FETCHED) {
+            this.props.sessionStatus === sessionActions.Status.FETCHED &&
+            this.state.projectId) {
             if (this.props.user) {
                 const username = this.props.user.username;
                 const token = this.props.user.token;
-                this.props.getProjectInfo(projectId, token);
+                this.props.getProjectInfo(this.state.projectId, token);
-                this.props.getRemixes(projectId, token);
+                this.props.getRemixes(this.state.projectId, token);
-                this.props.getStudios(projectId, token);
+                this.props.getStudios(this.state.projectId, token);
-                this.props.getFavedStatus(projectId, username, token);
+                this.props.getFavedStatus(this.state.projectId, username, token);
-                this.props.getLovedStatus(projectId, username, token);
+                this.props.getLovedStatus(this.state.projectId, username, token);
             } else {
-                this.props.getProjectInfo(projectId);
+                this.props.getProjectInfo(this.state.projectId);
-                this.props.getRemixes(projectId);
+                this.props.getRemixes(this.state.projectId);
-                this.props.getStudios(projectId);
+                this.props.getStudios(this.state.projectId);
             }
             
         }
@@ -58,6 +53,33 @@ class Preview extends React.Component {
             }
         }
     }
+    initState () {
+        let pathname = window.location.pathname.toLowerCase();
+        const params = {
+            editable: false,
+            favoriteCount: 0,
+            inEditor: false,
+            isFullScreen: false,
+            loveCount: 0,
+            projectId: null
+        };
+        if (pathname[pathname.length - 1] === '/') {
+            pathname = pathname.substring(0, pathname.length - 1);
+        }
+        const path = pathname.split('/');
+        if (path[path.length - 1] === 'editor' || path[path.length - 1] === 'preview') {
+            params.inEditor = true;
+            path.pop();
+        }
+        if (path[path.length - 1] === 'fullscreen') {
+            params.isFullScreen = true;
+            path.pop();
+        }
+        if (/^\d+$/.test(path[path.length - 1])) {
+            params.projectId = path.pop();
+        }
+        return params;
+    }
     handleFavoriteToggle () {
         this.props.setFavedStatus(
             !this.props.faved,
@@ -98,6 +120,10 @@ class Preview extends React.Component {
             this.setState({editable: true});
         }
     }
+    handleSeeInside () {
+        this.setState({inEditor: true});
+        history.pushState({}, document.title, `/preview/${this.state.projectId}/editor`);
+    }
     handleUpdate (jsonData) {
         this.props.updateProject(
             this.props.projectInfo.id,
@@ -114,14 +140,24 @@ class Preview extends React.Component {
     }
     render () {
         return (
+            this.state.inEditor ?
+                <IntlGUI
+                    basePath="/"
+                    className="gui"
+                    isPlayerOnly={false}
+                    projectId={this.state.projectId}
+                /> :
+                <Page>
                     <PreviewPresentation
                         comments={this.props.comments}
                         creditInfo={this.props.credit}
                         editable={this.state.editable}
                         faved={this.props.faved}
                         favoriteCount={this.state.favoriteCount}
+                        isFullScreen={this.state.isFullScreen}
                         loveCount={this.state.loveCount}
                         loved={this.props.loved}
+                        projectId={this.state.projectId}
                         projectInfo={this.props.projectInfo}
                         remixes={this.props.remixes}
                         sessionStatus={this.props.sessionStatus}
@@ -129,8 +165,10 @@ class Preview extends React.Component {
                         user={this.props.user}
                         onFavoriteClicked={this.handleFavoriteToggle}
                         onLoveClicked={this.handleLoveToggle}
+                        onSeeInside={this.handleSeeInside}
                         onUpdate={this.handleUpdate}
                     />
+                </Page>
         );
     }
 }
@@ -268,7 +306,7 @@ const ConnectedPreview = connect(
 )(Preview);
 
 render(
-    <Page><ConnectedPreview /></Page>,
+    <ConnectedPreview />,
     document.getElementById('app'),
     {preview: previewActions.previewReducer}
 );

src/views/preview/preview.scss

@@ -1,21 +1,21 @@
 @import "../../colors";
 @import "../../frameless";
 
-html,
-body,
-#app,
-.gui {
-    margin: 0;
-    width: 100%;
-    height: 100%;
-}
-
 /* override view padding for share banner */
 #view {
     padding: 0 0 20px 0;
 }
 
-.gui * { box-sizing: border-box; }
+.gui {
+    position: absolute;
+    top: 0;
+    z-index: 11;
+    margin: 0;
+    width: 100%;
+    height: 100%;
+}
+
+// .gui * { box-sizing: border-box; }
 
 .preview {
 
@@ -162,15 +162,11 @@ body,
         align-items: flex-start;
     }
 
-    .placeholder {
+    .guiPlayer {
         display: inline-block;
         width: 480px;
     }
 
-    .placeholder img {
-        width: 100%;
-    }
-
     .project-notes {
         width: 45%;
         height: 404px;

webpack.config.js

@@ -142,7 +142,21 @@ module.exports = {
         new CopyWebpackPlugin([
             {from: 'static'},
             {from: 'intl', to: 'js'}
-        ])
+        ]),
+        new CopyWebpackPlugin([{
+            from: 'node_modules/scratch-gui/dist/static/blocks-media',
+            to: 'static/blocks-media'
+        }]),
+        new CopyWebpackPlugin([{
+            from: 'node_modules/scratch-gui/dist/extension-worker.js'
+        }]),
+        new CopyWebpackPlugin([{
+            from: 'node_modules/scratch-gui/dist/extension-worker.js.map'
+        }]),
+        new CopyWebpackPlugin([{
+            from: 'node_modules/scratch-gui/dist/static/assets',
+            to: 'static/assets'
+        }])
     ])
         .concat(process.env.NODE_ENV === 'production' ? [
             new webpack.optimize.UglifyJsPlugin({