Merge pull request #2656 from chrisgarrity/issue/2628-remix-loading-project

Don’t allow remixing if the project is not loaded

src/views/preview/presentation.jsx

@@ -70,6 +70,7 @@ const PreviewPresentation = ({
     isFullScreen,
     isLoggedIn,
     isNewScratcher,
+    isProjectLoaded,
     isRemixing,
     isScratcher,
     isShared,
@@ -91,6 +92,7 @@ const PreviewPresentation = ({
     onLoadMoreReplies,
     onLoveClicked,
     onOpenAdminPanel,
+    onProjectLoaded,
     onRemix,
     onRemixing,
     onReportClicked,
@@ -251,10 +253,11 @@ const PreviewPresentation = ({
                                             className={classNames([
                                                 'remix-button',
                                                 {
-                                                    remixing: isRemixing,
+                                                    disabled: isRemixing || !isProjectLoaded,
-                                                    spin: isRemixing
+                                                    remixing: isRemixing
                                                 }
                                             ])}
+                                            disabled={isRemixing || !isProjectLoaded}
                                             title={intl.formatMessage({id: 'project.remixButton.altText'})}
                                             onClick={onRemix}
                                         >
@@ -302,6 +305,7 @@ const PreviewPresentation = ({
                                     projectHost={projectHost}
                                     projectId={projectId}
                                     onGreenFlag={onGreenFlag}
+                                    onProjectLoaded={onProjectLoaded}
                                     onRemixing={onRemixing}
                                     onUpdateProjectId={onUpdateProjectId}
                                     onUpdateProjectThumbnail={onUpdateProjectThumbnail}
@@ -626,6 +630,7 @@ PreviewPresentation.propTypes = {
     isFullScreen: PropTypes.bool,
     isLoggedIn: PropTypes.bool,
     isNewScratcher: PropTypes.bool,
+    isProjectLoaded: PropTypes.bool,
     isRemixing: PropTypes.bool,
     isScratcher: PropTypes.bool,
     isShared: PropTypes.bool,
@@ -650,6 +655,7 @@ PreviewPresentation.propTypes = {
     onLoadMoreReplies: PropTypes.func,
     onLoveClicked: PropTypes.func,
     onOpenAdminPanel: PropTypes.func,
+    onProjectLoaded: PropTypes.func,
     onRemix: PropTypes.func,
     onRemixing: PropTypes.func,
     onReportClicked: PropTypes.func.isRequired,

src/views/preview/preview.scss

@@ -283,9 +283,11 @@ $stage-width: 480px;
             background-image: url("/svgs/project/remix-white.svg");
         }
     }
+    .remix-button.disabled {
+        opacity: .6;
+    }
 
     .remix-button.remixing {
-        opacity: .6;
 
         &:before {
             animation-name: remix-intro, remix-spin;

src/views/preview/project-view.jsx

@@ -75,6 +75,7 @@ class Preview extends React.Component {
             'handleAddToStudioClick',
             'handleAddToStudioClose',
             'handleGreenFlag',
+            'handleProjectLoaded',
             'handleRemix',
             'handleSeeAllComments',
             'handleSeeInside',
@@ -109,6 +110,7 @@ class Preview extends React.Component {
             clientLoved: false,
             extensions: [],
             favoriteCount: 0,
+            isProjectLoaded: false,
             isRemixing: false,
             invalidProject: parts.length === 1,
             justRemixed: false,
@@ -383,6 +385,11 @@ class Preview extends React.Component {
             this.props.setFullScreen(fullScreen);
         }
     }
+    handleProjectLoaded () {
+        // Currently project view only needs to know when the project becomes loaded. It
+        // does not currently handle (or need to handle) the case where a project becomes unloaded.
+        this.setState({isProjectLoaded: true});
+    }
     pushHistory (push) {
         // update URI to match mode
         const idPath = this.state.projectId ? `${this.state.projectId}/` : '';
@@ -617,6 +624,7 @@ class Preview extends React.Component {
                             isFullScreen={this.state.isFullScreen}
                             isLoggedIn={this.props.isLoggedIn}
                             isNewScratcher={this.props.isNewScratcher}
+                            isProjectLoaded={this.state.isProjectLoaded}
                             isRemixing={this.state.isRemixing}
                             isScratcher={this.props.isScratcher}
                             isShared={this.props.isShared}
@@ -653,6 +661,7 @@ class Preview extends React.Component {
                             onLoadMoreReplies={this.handleLoadMoreReplies}
                             onLoveClicked={this.handleLoveToggle}
                             onOpenAdminPanel={this.handleOpenAdminPanel}
+                            onProjectLoaded={this.handleProjectLoaded}
                             onRemix={this.handleRemix}
                             onRemixing={this.handleIsRemixing}
                             onReportClicked={this.handleReportClick}
@@ -698,6 +707,7 @@ class Preview extends React.Component {
                             onGreenFlag={this.handleGreenFlag}
                             onLogOut={this.props.handleLogOut}
                             onOpenRegistration={this.props.handleOpenRegistration}
+                            onProjectLoaded={this.handleProjectLoaded}
                             onRemixing={this.handleIsRemixing}
                             onSetLanguage={this.handleSetLanguage}
                             onShare={this.handleShare}