diff --git a/src/views/preview/presentation.jsx b/src/views/preview/presentation.jsx index fdccd6c16..45cc94a59 100644 --- a/src/views/preview/presentation.jsx +++ b/src/views/preview/presentation.jsx @@ -70,6 +70,7 @@ const PreviewPresentation = ({ isFullScreen, isLoggedIn, isNewScratcher, + isProjectLoaded, isRemixing, isScratcher, isShared, @@ -90,6 +91,7 @@ const PreviewPresentation = ({ onLoadMore, onLoveClicked, onOpenAdminPanel, + onProjectLoaded, onRemix, onRemixing, onReportClicked, @@ -250,10 +252,11 @@ const PreviewPresentation = ({ className={classNames([ 'remix-button', { - remixing: isRemixing, - spin: isRemixing + disabled: isRemixing || !isProjectLoaded, + remixing: isRemixing } ])} + disabled={isRemixing || !isProjectLoaded} title={intl.formatMessage({id: 'project.remixButton.altText'})} onClick={onRemix} > @@ -301,6 +304,7 @@ const PreviewPresentation = ({ projectHost={projectHost} projectId={projectId} onGreenFlag={onGreenFlag} + onProjectLoaded={onProjectLoaded} onRemixing={onRemixing} onUpdateProjectId={onUpdateProjectId} onUpdateProjectThumbnail={onUpdateProjectThumbnail} @@ -623,6 +627,7 @@ PreviewPresentation.propTypes = { isFullScreen: PropTypes.bool, isLoggedIn: PropTypes.bool, isNewScratcher: PropTypes.bool, + isProjectLoaded: PropTypes.bool, isRemixing: PropTypes.bool, isScratcher: PropTypes.bool, isShared: PropTypes.bool, @@ -646,6 +651,7 @@ PreviewPresentation.propTypes = { onLoadMore: PropTypes.func, onLoveClicked: PropTypes.func, onOpenAdminPanel: PropTypes.func, + onProjectLoaded: PropTypes.func, onRemix: PropTypes.func, onRemixing: PropTypes.func, onReportClicked: PropTypes.func.isRequired, diff --git a/src/views/preview/preview.scss b/src/views/preview/preview.scss index 9a6fce550..7a108a33a 100644 --- a/src/views/preview/preview.scss +++ b/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; diff --git a/src/views/preview/project-view.jsx b/src/views/preview/project-view.jsx index c6ed64a96..f7270d80b 100644 --- a/src/views/preview/project-view.jsx +++ b/src/views/preview/project-view.jsx @@ -74,6 +74,7 @@ class Preview extends React.Component { 'handleAddToStudioClick', 'handleAddToStudioClose', 'handleGreenFlag', + 'handleProjectLoaded', 'handleRemix', 'handleSeeAllComments', 'handleSeeInside', @@ -108,6 +109,7 @@ class Preview extends React.Component { clientLoved: false, extensions: [], favoriteCount: 0, + isProjectLoaded: false, isRemixing: false, invalidProject: parts.length === 1, justRemixed: false, @@ -382,6 +384,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}/` : ''; @@ -611,6 +618,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} @@ -646,6 +654,7 @@ class Preview extends React.Component { onLoadMore={this.handleLoadMore} onLoveClicked={this.handleLoveToggle} onOpenAdminPanel={this.handleOpenAdminPanel} + onProjectLoaded={this.handleProjectLoaded} onRemix={this.handleRemix} onRemixing={this.handleIsRemixing} onReportClicked={this.handleReportClick} @@ -691,6 +700,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}