Show spinner when poster is updating

Automattic · Feb 22, 2017 · 1baf577 · 1baf577
1 parent a5855b8
commit 1baf577
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 4 deletions.
diff --git a/client/blocks/video-editor/index.jsx b/client/blocks/video-editor/index.jsx
@@ -10,6 +10,7 @@ import classNames from 'classnames';
 /**
  * Internal dependencies
  */
+import Spinner from 'components/spinner';
 import Notice from 'components/notice';
 import DetailPreviewVideo from 'post-editor/media-modal/detail/detail-preview-video';
 import VideoEditorButtons from './video-editor-buttons';
@@ -20,6 +21,7 @@ import {
 } from 'state/ui/editor/video-editor/actions';
 import {
 	isVideoEditorPosterUpdated,
+	isVideoEditorPosterUpdating,
 	isVideoEditorVideoLoaded,
 	videoEditorHasPosterUpdateError,
 	videoEditorHasScriptLoadError,
@@ -41,6 +43,7 @@ class VideoEditor extends Component {
 		hasPosterUpdateError: PropTypes.bool,
 		hasScriptLoadError: PropTypes.bool,
 		isPosterUpdated: PropTypes.bool,
+		isPosterUpdating: PropTypes.bool,
 		isVideoLoaded: PropTypes.bool,
 	};
 
@@ -141,6 +144,7 @@ class VideoEditor extends Component {
 			className,
 			hasPosterUpdateError,
 			hasScriptLoadError,
+			isPosterUpdating,
 			isVideoLoaded,
 			media,
 			onCancel,
@@ -169,6 +173,7 @@ class VideoEditor extends Component {
 								item={ media }
 								onPause={ this.handlePause }
 							/>
+							{ isPosterUpdating && <Spinner /> }
 						</div>
 						<span className="video-editor__text">
 							{ translate( 'Select a frame to use as the thumbnail image or upload your own.' ) }
@@ -193,6 +198,7 @@ export default connect(
 			hasPosterUpdateError: videoEditorHasPosterUpdateError( state ),
 			hasScriptLoadError: videoEditorHasScriptLoadError( state ),
 			isPosterUpdated: isVideoEditorPosterUpdated( state ),
+			isPosterUpdating: isVideoEditorPosterUpdating( state ),
 			isVideoLoaded: isVideoEditorVideoLoaded( state ),
 		};
 	},

diff --git a/client/blocks/video-editor/style.scss b/client/blocks/video-editor/style.scss
@@ -28,13 +28,9 @@
 
 .video-editor__preview-wrapper .spinner,
 .video-editor__preview {
-	display: flex;
-	align-items: center;
 	position: absolute;
 		top: 50%;
 		left: 50%;
-	height: 100%;
-	width: 100%;
 	max-height: 100%;
 	max-width: 100%;
 	transform: translate( -50%, -50% );
@@ -44,6 +40,13 @@
 	}
 }
 
+.video-editor__preview {
+	display: flex;
+	align-items: center;
+	height: 100%;
+	width: 100%;
+}
+
 .video-editor__text {
 	color: $white;
 	text-align: center;

diff --git a/client/state/ui/editor/video-editor/reducer.js b/client/state/ui/editor/video-editor/reducer.js
@@ -35,6 +35,28 @@ const videoIsLoading = ( state = true, action ) => {
 	return state;
 };
 
+/**
+ * Tracks poster updating state.
+ *
+ * @param  {Object} state  Current state
+ * @param  {Object} action Action object
+ * @return {Object}        Updated state
+ */
+const posterIsUpdating = ( state = false, action ) => {
+	switch ( action.type ) {
+		case VIDEO_EDITOR_POSTER_UPDATE:
+			return true;
+
+		case VIDEO_EDITOR_POSTER_UPDATE_SUCCESS:
+		case VIDEO_EDITOR_POSTER_UPDATE_FAILURE:
+		case VIDEO_EDITOR_STATE_RESET:
+		case VIDEO_EDITOR_STATE_RESET_POSTER:
+			return false;
+	}
+
+	return state;
+};
+
 /**
  * Tracks poster updated state.
  *
@@ -100,6 +122,7 @@ const hasScriptLoadError = ( state = false, action ) => {
 export default combineReducers( {
 	hasPosterUpdateError,
 	hasScriptLoadError,
+	posterIsUpdating,
 	posterIsUpdated,
 	videoIsLoading,
 } );
diff --git a/client/state/ui/editor/video-editor/selectors.js b/client/state/ui/editor/video-editor/selectors.js
@@ -9,6 +9,17 @@ export function isVideoEditorVideoLoaded( state ) {
 	return ! state.ui.editor.videoEditor.videoIsLoading;
 }
 
+/**
+ * Returns true if the poster is updating.
+ *
+ * @param  {Object}  state Global state tree
+ * @return {Boolean} true if the poster is updating.
+ *
+ */
+export function isVideoEditorPosterUpdating( state ) {
+	return state.ui.editor.videoEditor.posterIsUpdating;
+}
+
 /**
  * Returns true if the poster has been updated.
  *