Merge pull request #2408 from benjiwheeler/remix-cues

Remix button progress spinner & banner message showing that user has remixed

src/views/preview/l10n.json

@@ -17,7 +17,10 @@
     "project.share.sharedShort": "Your project is now shared.",
     "project.share.shareButton": "Share",
     "project.seeInsideButton": "See inside",
+    "project.remix.justRemixed": "\"{title}\" was successfully remixed. Add a sprite, add a costume, make a change to make it your own!",
     "project.remixButton": "Remix",
+    "project.remixButton.altText": "Save a copy of this project and add your own ideas.",
+    "project.remixButton.remixing": "Remixing...",
     "project.remixes": "Remixes",
     "project.inviteToRemix": "Invite user to remix",
     "project.instructionsLabel": "Instructions",

src/views/preview/presentation.jsx

@@ -68,8 +68,10 @@ const PreviewPresentation = ({
     isFullScreen,
     isLoggedIn,
     isNewScratcher,
+    isRemixing,
     isScratcher,
     isShared,
+    justRemixed,
     justShared,
     loveCount,
     loved,
@@ -86,6 +88,7 @@ const PreviewPresentation = ({
     onLoveClicked,
     onOpenAdminPanel,
     onRemix,
+    onRemixing,
     onReportClicked,
     onReportClose,
     onReportComment,
@@ -141,6 +144,18 @@ const PreviewPresentation = ({
                 message={embedCensorMessage(visibilityInfo.message)}
             />);
         }
+    } else if (justRemixed) {
+        banner = (
+            <Banner
+                className="banner-success"
+                message={
+                    <FormattedMessage
+                        id="project.remix.justRemixed"
+                        values={{title: projectInfo.title}}
+                    />
+                }
+            />
+        );
     } else if (canShare) {
         if (isShared && justShared) { // if was shared a while ago, don't show any share banner
             if (isNewScratcher) {
@@ -228,10 +243,22 @@ const PreviewPresentation = ({
                                 <div className="project-buttons">
                                     {canRemix &&
                                         <Button
-                                            className="button remix-button"
+                                            alt={intl.formatMessage({id: 'project.remixButton.altText'})}
+                                            className={classNames([
+                                                'remix-button',
+                                                {
+                                                    remixing: isRemixing,
+                                                    spin: isRemixing
+                                                }
+                                            ])}
+                                            title={intl.formatMessage({id: 'project.remixButton.altText'})}
                                             onClick={onRemix}
                                         >
-                                            <FormattedMessage id="project.remixButton" />
+                                            {isRemixing ? (
+                                                <FormattedMessage id="project.remixButton.remixing" />
+                                            ) : (
+                                                <FormattedMessage id="project.remixButton" />
+                                            )}
                                         </Button>
                                     }
                                     <Button
@@ -260,6 +287,7 @@ const PreviewPresentation = ({
                                     previewInfoVisible="false"
                                     projectHost={projectHost}
                                     projectId={projectId}
+                                    onRemixing={onRemixing}
                                     onUpdateProjectId={onUpdateProjectId}
                                 />
                             </div>
@@ -573,8 +601,10 @@ PreviewPresentation.propTypes = {
     isFullScreen: PropTypes.bool,
     isLoggedIn: PropTypes.bool,
     isNewScratcher: PropTypes.bool,
+    isRemixing: PropTypes.bool,
     isScratcher: PropTypes.bool,
     isShared: PropTypes.bool,
+    justRemixed: PropTypes.bool,
     justShared: PropTypes.bool,
     loveCount: PropTypes.number,
     loved: PropTypes.bool,
@@ -594,6 +624,7 @@ PreviewPresentation.propTypes = {
     onLoveClicked: PropTypes.func,
     onOpenAdminPanel: PropTypes.func,
     onRemix: PropTypes.func,
+    onRemixing: PropTypes.func,
     onReportClicked: PropTypes.func.isRequired,
     onReportClose: PropTypes.func.isRequired,
     onReportComment: PropTypes.func.isRequired,

src/views/preview/preview.scss

@@ -270,6 +270,52 @@ $stage-width: 480px;
         }
     }
 
+    .remix-button.remixing {
+        opacity: .6;
+
+        &:before {
+            animation-name: remix-intro, remix-spin;
+            animation-duration: .25s, .75s;
+            animation-timing-function: cubic-bezier(.3, -3, .6, 3), ease-out;
+            animation-delay: 0s, .25s;
+            animation-iteration-count: 1, infinite;
+            animation-direction: normal;
+            width: 1.25rem;
+            height: 1.25rem;
+            -webkit-animation-name: intro, spin;
+            -webkit-animation-duration: .25s, .75s;
+            -webkit-animation-iteration-count: 1, infinite;
+            -webkit-animation-delay: 0s, .25s;
+            -webkit-animation-timing-function: cubic-bezier(.3, -3, .6, 3), ease-out;
+            transform-origin: center;
+        }
+        @keyframes remix-intro {
+            0% {
+                transform: scale(0);
+                opacity: 0;
+                -webkit-transform: scale(0);
+            }
+
+            100% {
+                transform: scale(1);
+                opacity: 1;
+                -webkit-transform: scale(1);
+            }
+        }
+
+        @keyframes remix-spin {
+            0% {
+                transform: rotate(0);
+                -webkit-transform: rotate(0);
+            }
+
+            100% {
+                transform: rotate(359deg);
+                -webkit-transform: rotate(359deg);
+            }
+        }
+    }
+
     .see-inside-button {
 
         &:before {

src/views/preview/project-view.jsx

@@ -50,6 +50,7 @@ class Preview extends React.Component {
             'handleMessage',
             'handlePopState',
             'handleCloseAdminPanel',
+            'handleIsRemixing',
             'handleOpenAdminPanel',
             'handleReportClick',
             'handleReportClose',
@@ -90,7 +91,9 @@ class Preview extends React.Component {
             adminPanelOpen: adminPanelOpen || false,
             extensions: [],
             favoriteCount: 0,
+            isRemixing: false,
             invalidProject: parts.length === 1,
+            justRemixed: false,
             justShared: false,
             loveCount: 0,
             modInfo: {
@@ -114,11 +117,20 @@ class Preview extends React.Component {
             (this.state.projectId !== prevState.projectId))) {
             this.fetchCommunityData();
             this.getProjectData(this.state.projectId);
-            this.setState({justShared: false}); // eslint-disable-line react/no-did-update-set-state
+            if (this.state.justShared) {
+                this.setState({ // eslint-disable-line react/no-did-update-set-state
+                    justShared: false
+                });
+            }
         }
         if (this.state.projectId === '0' && this.state.projectId !== prevState.projectId) {
             this.props.resetProject();
-            this.setState({justShared: false}); // eslint-disable-line react/no-did-update-set-state
+            if (this.state.justRemixed || this.state.justShared) {
+                this.setState({ // eslint-disable-line react/no-did-update-set-state
+                    justRemixed: false,
+                    justShared: false
+                });
+            }
         }
         if (this.props.projectInfo.id !== prevProps.projectInfo.id) {
             if (typeof this.props.projectInfo.id === 'undefined') {
@@ -265,6 +277,17 @@ class Preview extends React.Component {
             this.props.user.token
         );
     }
+    handleIsRemixing (isRemixing) {
+        if (this.state.isRemixing !== isRemixing) {
+            this.setState({isRemixing: isRemixing});
+            if (isRemixing === false) { // just finished remixing
+                this.setState({
+                    justRemixed: true,
+                    justShared: false
+                });
+            }
+        }
+    }
     handleAddComment (comment, topLevelCommentId) {
         this.props.handleAddComment(comment, topLevelCommentId);
     }
@@ -405,14 +428,22 @@ class Preview extends React.Component {
     }
     handleSeeInside () {
         this.props.setPlayer(false);
-        this.setState({justShared: false});
+        if (this.state.justRemixed || this.state.justShared) {
+            this.setState({
+                justRemixed: false,
+                justShared: false
+            });
+        }
     }
     handleShare () {
         this.props.shareProject(
             this.props.projectInfo.id,
             this.props.user.token
         );
-        this.setState({justShared: true});
+        this.setState({
+            justRemixed: false,
+            justShared: true
+        });
     }
     handleUpdate (jsonData) {
         this.props.updateProject(
@@ -439,7 +470,9 @@ class Preview extends React.Component {
             if (projectId === '0') {
                 newUrl = `/${parts[0]}/editor`;
             } else {
-                newUrl = `/${parts[0]}/${projectId}/editor`;
+                let modePath = '';
+                if (!this.props.playerMode) modePath = '/editor';
+                newUrl = `/${parts[0]}/${projectId}${modePath}`;
             }
             history.pushState(
                 {projectId: projectId},
@@ -524,8 +557,10 @@ class Preview extends React.Component {
                         isFullScreen={this.state.isFullScreen}
                         isLoggedIn={this.props.isLoggedIn}
                         isNewScratcher={this.props.isNewScratcher}
+                        isRemixing={this.state.isRemixing}
                         isScratcher={this.props.isScratcher}
                         isShared={this.props.isShared}
+                        justRemixed={this.state.justRemixed}
                         justShared={this.state.justShared}
                         loveCount={this.state.loveCount}
                         loved={this.props.loved}
@@ -555,6 +590,7 @@ class Preview extends React.Component {
                         onLoveClicked={this.handleLoveToggle}
                         onOpenAdminPanel={this.handleOpenAdminPanel}
                         onRemix={this.handleRemix}
+                        onRemixing={this.handleIsRemixing}
                         onReportClicked={this.handleReportClick}
                         onReportClose={this.handleReportClose}
                         onReportComment={this.handleReportComment}
@@ -595,6 +631,7 @@ class Preview extends React.Component {
                         renderLogin={this.renderLogin}
                         onLogOut={this.props.handleLogOut}
                         onOpenRegistration={this.props.handleOpenRegistration}
+                        onRemixing={this.handleIsRemixing}
                         onSetLanguage={this.handleSetLanguage}
                         onShare={this.handleShare}
                         onToggleLoginOpen={this.props.handleToggleLoginOpen}