Merge pull request #1882 from LLK/release/april-2018

[Develop] April 2018 Release
scratchfoundation · May 14, 2018 · 297b4c1 · 297b4c1
2 parents 65e7657 + 1cfc5a8
commit 297b4c1
Show file tree

Hide file tree

Showing 9 changed files with 124 additions and 65 deletions.
diff --git a/.tx/config b/.tx/config
@@ -138,4 +138,10 @@ type = KEYVALUEJSON
 file_filter = localizations/preview-faq/<lang>.json
 source_file = src/views/preview-faq/l10n.json
 source_lang = en
-type = KEYVALUEJSON
+type = KEYVALUEJSON
+
+[scratch-website.research-l10njson]
+file_filter = localizations/research/<lang>.json
+source_file = src/views/research/l10n.json
+source_lang = en
+type = KEYVALUEJSON
diff --git a/Makefile b/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
-WEBPACK=./node_modules/.bin/webpack
+WATCH= NODE_OPTIONS=--max_old_space_size=8000 ./node_modules/.bin/watch
+WEBPACK= NODE_OPTIONS=--max_old_space_size=8000 ./node_modules/.bin/webpack
 
 # ------------------------------------
 

diff --git a/bin/configure-fastly.js b/bin/configure-fastly.js
@@ -176,7 +176,7 @@ async.auto({
     if (err) throw new Error(err);
     if (process.env.FASTLY_ACTIVATE_CHANGES) {
         fastly.activateVersion(results.version, function (e, resp) {
-            if (err) throw new Error(e);
+            if (e) throw new Error(e);
             process.stdout.write('Successfully configured and activated version ' + resp.number + '\n');
             if (process.env.FASTLY_PURGE_ALL) {
                 fastly.purgeAll(FASTLY_SERVICE_ID, function (error) {

diff --git a/package.json b/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",

diff --git a/src/routes.json b/src/routes.json
@@ -193,7 +193,7 @@
     },
     {
         "name": "preview",
-        "pattern": "^/preview/?(\\d+)?/?$",
+        "pattern": "^/preview(/editor|(/\\d+(/editor|/fullscreen)?)?)?/?$",
         "routeAlias": "/preview/?$",
         "view": "preview/preview",
         "title": "Scratch 3.0 Preview"

diff --git a/src/views/preview/presentation.jsx b/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,15 +27,18 @@ const PreviewPresentation = props => {
         faved,
         favoriteCount,
         intl,
+        isFullScreen,
         loved,
         loveCount,
+        projectId,
         projectInfo,
         remixes,
         sessionStatus,
         studios,
         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">
-                                <img src={placeholder} />
-                            </div>
+                            <IntlGUI
+                                isPlayerOnly
+                                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,

diff --git a/src/views/preview/preview.jsx b/src/views/preview/preview.jsx
@@ -2,13 +2,16 @@ 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');
 
 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 = {
-            editable: false,
-            favoriteCount: 0,
-            loveCount: 0
-        };
+        this.state = this.initState();
     }
     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.getRemixes(projectId, token);
-                this.props.getStudios(projectId, token);
-                this.props.getFavedStatus(projectId, username, token);
-                this.props.getLovedStatus(projectId, username, token);
+                this.props.getProjectInfo(this.state.projectId, token);
+                this.props.getRemixes(this.state.projectId, token);
+                this.props.getStudios(this.state.projectId, token);
+                this.props.getFavedStatus(this.state.projectId, username, token);
+                this.props.getLovedStatus(this.state.projectId, username, token);
             } else {
-                this.props.getProjectInfo(projectId);
-                this.props.getRemixes(projectId);
-                this.props.getStudios(projectId);
+                this.props.getProjectInfo(this.state.projectId);
+                this.props.getRemixes(this.state.projectId);
+                this.props.getStudios(this.state.projectId);
             }
 
         }
@@ -58,6 +53,21 @@ class Preview extends React.Component {
             }
         }
     }
+    initState () {
+        const pathname = window.location.pathname.toLowerCase();
+        const parts = pathname.split('/').filter(Boolean);
+        // parts[0]: 'preview'
+        // parts[1]: either :id or 'editor'
+        // parts[2]: undefined if no :id, otherwise either 'editor' or 'fullscreen'
+        return {
+            editable: false,
+            favoriteCount: 0,
+            inEditor: parts.indexOf('editor') !== -1,
+            isFullScreen: parts.indexOf('fullscreen') !== -1,
+            loveCount: 0,
+            projectId: parts[1] === 'editor' ? null : parts[1]
+        };
+    }
     handleFavoriteToggle () {
         this.props.setFavedStatus(
             !this.props.faved,
@@ -98,6 +108,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,23 +128,35 @@ class Preview extends React.Component {
     }
     render () {
         return (
-            <PreviewPresentation
-                comments={this.props.comments}
-                creditInfo={this.props.credit}
-                editable={this.state.editable}
-                faved={this.props.faved}
-                favoriteCount={this.state.favoriteCount}
-                loveCount={this.state.loveCount}
-                loved={this.props.loved}
-                projectInfo={this.props.projectInfo}
-                remixes={this.props.remixes}
-                sessionStatus={this.props.sessionStatus}
-                studios={this.props.studios}
-                user={this.props.user}
-                onFavoriteClicked={this.handleFavoriteToggle}
-                onLoveClicked={this.handleLoveToggle}
-                onUpdate={this.handleUpdate}
-            />
+            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}
+                        studios={this.props.studios}
+                        user={this.props.user}
+                        onFavoriteClicked={this.handleFavoriteToggle}
+                        onLoveClicked={this.handleLoveToggle}
+                        onSeeInside={this.handleSeeInside}
+                        onUpdate={this.handleUpdate}
+                    />
+                </Page>
         );
     }
 }
@@ -268,7 +294,7 @@ const ConnectedPreview = connect(
 )(Preview);
 
 render(
-    <Page><ConnectedPreview /></Page>,
+    <ConnectedPreview />,
     document.getElementById('app'),
     {preview: previewActions.previewReducer}
 );
diff --git a/src/views/preview/preview.scss b/src/views/preview/preview.scss
@@ -1,24 +1,24 @@
 @import "../../colors";
 @import "../../frameless";
 
-html,
-body,
-#app,
+/* override view padding for share banner */
+#view {
+    padding: 0 0 20px 0;
+}
+
 .gui {
+    position: absolute;
+    top: 0;
+    z-index: 11;
     margin: 0;
     width: 100%;
     height: 100%;
 }
 
-/* override view padding for share banner */
-#view {
-    padding: 0 0 20px 0;
-}
-
-.gui * { box-sizing: border-box; }
+// .gui * { box-sizing: border-box; }
 
 .preview {
-    
+
     .project-title {
         font-size: 1.75rem;
         font-weight: 500;
@@ -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;

diff --git a/webpack.config.js b/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({