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}