diff --git a/src/views/preview/l10n.json b/src/views/preview/l10n.json index 588486488..270d15aa1 100644 --- a/src/views/preview/l10n.json +++ b/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", diff --git a/src/views/preview/presentation.jsx b/src/views/preview/presentation.jsx index 8564b15e8..6de971652 100644 --- a/src/views/preview/presentation.jsx +++ b/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 && isNewScratcher) { + banner = ( + + } + /> + ); } 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 = ({
{canRemix && }
@@ -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, diff --git a/src/views/preview/preview.scss b/src/views/preview/preview.scss index d29a44dfa..5fdbeef21 100644 --- a/src/views/preview/preview.scss +++ b/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 { diff --git a/src/views/preview/project-view.jsx b/src/views/preview/project-view.jsx index 1b3274cb1..54656d8b5 100644 --- a/src/views/preview/project-view.jsx +++ b/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( @@ -524,8 +555,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 +588,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 +629,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}