[Mobile]Fix video upload (#16331)

* Remove attributes.url usage * Do not update src with local url * Remove unnecessary state item and fix icon color * Fix unit-tests * Temp fix for the crashing side effect * Revert changes * Revert "Temp fix for the crashing side effect" This reverts commit 1acb437.
WordPress · Jul 9, 2019 · 7a03158 · 7a03158
1 parent 4912471
commit 7a03158
Showing 1 changed file with 12 additions and 15 deletions.
diff --git a/packages/block-library/src/video/edit.native.js b/packages/block-library/src/video/edit.native.js
@@ -49,7 +49,6 @@ class VideoEdit extends React.Component {
 
 		this.state = {
 			showSettings: false,
-			isMediaRequested: false,
 			videoContainerHeight: 0,
 		};
 
@@ -64,7 +63,7 @@ class VideoEdit extends React.Component {
 
 	componentDidMount() {
 		const { attributes } = this.props;
-		if ( attributes.id && attributes.url && ! isURL( attributes.src ) ) {
+		if ( attributes.id && ! isURL( attributes.src ) ) {
 			mediaUploadSync();
 		}
 	}
@@ -91,7 +90,6 @@ class VideoEdit extends React.Component {
 		if ( payload.mediaUrl ) {
 			setAttributes( { url: payload.mediaUrl } );
 		}
-
 		if ( ! this.state.isUploadInProgress ) {
 			this.setState( { isUploadInProgress: true } );
 		}
@@ -100,25 +98,24 @@ class VideoEdit extends React.Component {
 	finishMediaUploadWithSuccess( payload ) {
 		const { setAttributes } = this.props;
 		setAttributes( { src: payload.mediaUrl, id: payload.mediaServerId } );
-		this.setState( { isMediaRequested: false, isUploadInProgress: false } );
+		this.setState( { isUploadInProgress: false } );
 	}
 
 	finishMediaUploadWithFailure( payload ) {
 		const { setAttributes } = this.props;
 		setAttributes( { id: payload.mediaId } );
-		this.setState( { isMediaRequested: false, isUploadInProgress: false } );
+		this.setState( { isUploadInProgress: false } );
 	}
 
 	mediaUploadStateReset() {
 		const { setAttributes } = this.props;
 		setAttributes( { id: null, src: null } );
-		this.setState( { isMediaRequested: false, isUploadInProgress: false } );
+		this.setState( { isUploadInProgress: false } );
 	}
 
 	onSelectMediaUploadOption( mediaId, mediaUrl ) {
 		const { setAttributes } = this.props;
 		setAttributes( { id: mediaId, src: mediaUrl } );
-		this.setState( { isMediaRequested: true } );
 	}
 
 	onVideoContanerLayout( event ) {
@@ -129,18 +126,18 @@ class VideoEdit extends React.Component {
 		}
 	}
 
-	getIcon( isRetryIcon, isUploadInProgress ) {
+	getIcon( isRetryIcon, isMediaPlaceholder ) {
 		if ( isRetryIcon ) {
 			return <Icon icon={ SvgIconRetry } { ...style.icon } />;
 		}
 
-		return <Icon icon={ SvgIcon } { ...( isUploadInProgress ? style.iconUploading : style.icon ) } />;
+		return <Icon icon={ SvgIcon } { ...( ! isMediaPlaceholder ? style.iconUploading : style.icon ) } />;
 	}
 
 	render() {
 		const { attributes, isSelected, setAttributes } = this.props;
 		const { caption, id, src } = attributes;
-		const { isMediaRequested, videoContainerHeight } = this.state;
+		const { videoContainerHeight } = this.state;
 
 		const toolbarEditButton = (
 			<MediaUpload mediaType={ MEDIA_TYPE_VIDEO }
@@ -160,13 +157,13 @@ class VideoEdit extends React.Component {
 			</MediaUpload>
 		);
 
-		if ( ! isMediaRequested && ! src ) {
+		if ( ! id ) {
 			return (
 				<View style={ { flex: 1 } } >
 					<MediaPlaceholder
 						mediaType={ MEDIA_TYPE_VIDEO }
 						onSelectURL={ this.onSelectMediaUploadOption }
-						icon={ this.getIcon( false ) }
+						icon={ this.getIcon( false, true ) }
 						onFocus={ this.props.onFocus }
 					/>
 				</View>
@@ -193,8 +190,8 @@ class VideoEdit extends React.Component {
 						onUpdateMediaProgress={ this.updateMediaProgress }
 						onMediaUploadStateReset={ this.mediaUploadStateReset }
 						renderContent={ ( { isUploadInProgress, isUploadFailed, retryMessage } ) => {
-							const showVideo = src && ! isUploadInProgress && ! isUploadFailed;
-							const icon = this.getIcon( isUploadFailed, isUploadInProgress );
+							const showVideo = isURL( src ) && ! isUploadInProgress && ! isUploadFailed;
+							const icon = this.getIcon( isUploadFailed, false );
 							const styleIconContainer = isUploadFailed ? style.modalIconRetry : style.modalIcon;
 
 							const iconContainer = (
@@ -212,7 +209,7 @@ class VideoEdit extends React.Component {
 
 							return (
 								<View onLayout={ this.onVideoContanerLayout } style={ containerStyle }>
-									{ showVideo && isURL( src ) &&
+									{ showVideo &&
 										<View style={ style.videoContainer }>
 											<Video
 												isSelected={ isSelected }