Add uploading state to video block (#30837)

WordPress · Apr 15, 2021 · 9e6ee0a · 9e6ee0a
1 parent 483a9db
commit 9e6ee0a
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 1 deletion.
diff --git a/packages/block-library/src/video/edit.js b/packages/block-library/src/video/edit.js
@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
@@ -7,6 +12,7 @@ import {
 	Button,
 	Disabled,
 	PanelBody,
+	Spinner,
 	withNotices,
 } from '@wordpress/components';
 import {
@@ -43,6 +49,7 @@ function VideoEdit( {
 	isSelected,
 	noticeUI,
 	attributes,
+	className,
 	setAttributes,
 	insertBlocksAfter,
 	onReplace,
@@ -52,6 +59,7 @@ function VideoEdit( {
 	const videoPlayer = useRef();
 	const posterImageButton = useRef();
 	const { id, caption, controls, poster, src, tracks } = attributes;
+	const isTemporaryVideo = ! id && isBlobURL( src );
 	const mediaUpload = useSelect(
 		( select ) => select( blockEditorStore ).getSettings().mediaUpload
 	);
@@ -113,7 +121,13 @@ function VideoEdit( {
 		noticeOperations.createErrorNotice( message );
 	}
 
-	const blockProps = useBlockProps();
+	const classes = classnames( className, {
+		'is-transient': isTemporaryVideo,
+	} );
+
+	const blockProps = useBlockProps( {
+		className: classes,
+	} );
 
 	if ( ! src ) {
 		return (
@@ -235,6 +249,7 @@ function VideoEdit( {
 						<Tracks tracks={ tracks } />
 					</video>
 				</Disabled>
+				{ isTemporaryVideo && <Spinner /> }
 				{ ( ! RichText.isEmpty( caption ) || isSelected ) && (
 					<RichText
 						tagName="figcaption"

diff --git a/packages/block-library/src/video/editor.scss b/packages/block-library/src/video/editor.scss
@@ -2,6 +2,23 @@
 	text-align: center;
 }
 
+.wp-block-video {
+	position: relative;
+
+	&.is-transient video {
+		opacity: 0.3;
+	}
+
+	// Shown while video is being uploaded
+	.components-spinner {
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		margin-top: -9px;
+		margin-left: -9px;
+	}
+}
+
 .editor-video-poster-control {
 	.components-base-control__label {
 		display: block;