Media upload change thumb on progress (#13764)

* Allow progress call to update the thumbnail image.

* If we already have a subscription don’t go it again.

* Fix bottomsheet event removal.

packages/block-library/src/image/edit.native.js

@@ -67,6 +67,7 @@ class ImageEdit extends React.Component {
 		this.removeMediaUploadListener = this.removeMediaUploadListener.bind( this );
 		this.finishMediaUploadWithSuccess = this.finishMediaUploadWithSuccess.bind( this );
 		this.finishMediaUploadWithFailure = this.finishMediaUploadWithFailure.bind( this );
+		this.updateMediaProgress = this.updateMediaProgress.bind( this );
 		this.updateAlt = this.updateAlt.bind( this );
 		this.updateImageURL = this.updateImageURL.bind( this );
 		this.onSetLinkDestination = this.onSetLinkDestination.bind( this );
@@ -106,7 +107,7 @@ class ImageEdit extends React.Component {
 
 		switch ( payload.state ) {
 			case MEDIA_UPLOAD_STATE_UPLOADING:
-				this.setState( { progress: payload.progress, isUploadInProgress: true, isUploadFailed: false } );
+				this.updateMediaProgress( payload );
 				break;
 			case MEDIA_UPLOAD_STATE_SUCCEEDED:
 				this.finishMediaUploadWithSuccess( payload );
@@ -120,6 +121,14 @@ class ImageEdit extends React.Component {
 		}
 	}
 
+	updateMediaProgress( payload ) {
+		const { setAttributes } = this.props;
+		this.setState( { progress: payload.progress, isUploadInProgress: true, isUploadFailed: false } );
+		if ( payload.mediaUrl !== undefined ) {
+			setAttributes( { url: payload.mediaUrl } );
+		}
+	}
+
 	finishMediaUploadWithSuccess( payload ) {
 		const { setAttributes } = this.props;
 
@@ -144,6 +153,10 @@ class ImageEdit extends React.Component {
 	}
 
 	addMediaUploadListener() {
+		//if we already have a subscription not worth doing it again
+		if ( this.subscriptionParentMediaUpload ) {
+			return;
+		}
 		this.subscriptionParentMediaUpload = subscribeMediaUpload( ( payload ) => {
 			this.mediaUpload( payload );
 		} );

packages/editor/src/components/mobile/bottom-sheet/index.native.js

@@ -30,14 +30,19 @@ class BottomSheet extends Component {
 	}
 
 	componentDidMount() {
-		SafeArea.addEventListener( 'safeAreaInsetsForRootViewDidChange', this.onSafeAreaInsetsUpdate );
+		this.eventSubscription = SafeArea.addEventListener( 'safeAreaInsetsForRootViewDidChange', this.onSafeAreaInsetsUpdate );
 	}
 
 	componentWillUnmount() {
+		this.eventSubscription.remove();
+		this.eventSubscription = null;
 		SafeArea.removeEventListener( 'safeAreaInsetsForRootViewDidChange', this.onSafeAreaInsetsUpdate );
 	}
 
 	onSafeAreaInsetsUpdate( result ) {
+		if ( this.eventSubscription === null ) {
+			return;
+		}
 		const { safeAreaInsets } = result;
 		if ( this.state.safeAreaBottomInset !== safeAreaInsets.bottom ) {
 			this.setState( { safeAreaBottomInset: safeAreaInsets.bottom } );