[Mobile] - Media & Text: Allow media to be selected and render focal point

packages/block-editor/src/components/index.native.js

@@ -28,7 +28,6 @@ export {
 	MEDIA_TYPE_VIDEO,
 } from './media-upload';
 export { default as MediaUploadProgress } from './media-upload-progress';
-export { default as MediaEdit } from './media-edit';
 export { default as URLInput } from './url-input';
 export { default as BlockInvalidWarning } from './block-list/block-invalid-warning';
 export { default as BlockCaption } from './block-caption';

packages/block-editor/src/components/media-upload-progress/README.md

@@ -13,17 +13,13 @@ import {
 	MediaUploadProgress,
 } from '@wordpress/block-editor';
 
-function MediaProgress( { height, width, url, id } ) {
+function MediaProgress( { url, id } ) {
 	return (
 		<MediaUploadProgress
-			height={ height }
-			width={ width }
-			coverUrl={ url }
 			mediaId={ id }
-			renderContent={ ( { isUploadFailed, finalWidth, finalHeight, retryMessage } ) => {
+			renderContent={ ( { isUploadFailed, retryMessage } ) => {
 				return (
 					<ImageBackground
-						style={ { width: finalWidth, height: finalHeight } }
 						resizeMethod="scale"
 						source={ { uri: url } }
 					>
@@ -50,14 +46,6 @@ A media ID that identifies the current upload.
 - Required: Yes
 - Platform: Mobile
 
-### coverUrl
-
-By passing an image url, it'll calculate the right size depending on the container of the component maintaining its aspect ratio, it'll pass these values through `renderContent`.
-
-- Type: `String`
-- Required: No
-- Platform: Mobile
-
 ### renderContent
 
 Content to be rendered along with the progress bar, usually the thumbnail of the media being uploaded.
@@ -68,31 +56,8 @@ Content to be rendered along with the progress bar, usually the thumbnail of the
 
 It passes an object containing the following properties:
 
-**With** `coverUrl` as a parameter:
-
-`{ isUploadInProgress, isUploadFailed, finalWidth, finalHeight, imageWidthWithinContainer, retryMessage }`
-
-**Without** `coverUrl` as a parameter:
-
 `{ isUploadInProgress, isUploadFailed, retryMessage }`
 
-
-### width
-
-Forces the final width to be returned in `finalWidth`
-
-- Type: `Number`
-- Required: No
-- Platform: Mobile
-
-### height
-
-Forces the final height to be returned in `finalHeight`
-
-- Type: `Number`
-- Required: No
-- Platform: Mobile
-
 ### onUpdateMediaProgress
 
 Callback called when the progress of the upload is updated.

packages/block-editor/src/components/media-upload-progress/index.native.js

@@ -14,7 +14,6 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import ImageSize from './image-size';
 import styles from './styles.scss';
 
 export const MEDIA_UPLOAD_STATE_UPLOADING = 1;
@@ -117,12 +116,7 @@ export class MediaUploadProgress extends React.Component {
 	}
 
 	render() {
-		const {
-			coverUrl,
-			width,
-			height,
-			renderContent = () => {},
-		} = this.props;
+		const { renderContent = () => {} } = this.props;
 		const { isUploadInProgress, isUploadFailed } = this.state;
 		const showSpinner = this.state.isUploadInProgress;
 		const progress = this.state.progress * 100;
@@ -138,46 +132,11 @@ export class MediaUploadProgress extends React.Component {
 						<Spinner progress={ progress } />
 					</View>
 				) }
-				{ coverUrl && (
-					<ImageSize src={ coverUrl }>
-						{ ( sizes ) => {
-							const {
-								imageWidthWithinContainer,
-								imageHeightWithinContainer,
-							} = sizes;
-
-							let finalHeight = imageHeightWithinContainer;
-							if (
-								height > 0 &&
-								height < imageHeightWithinContainer
-							) {
-								finalHeight = height;
-							}
-
-							let finalWidth = imageWidthWithinContainer;
-							if (
-								width > 0 &&
-								width < imageWidthWithinContainer
-							) {
-								finalWidth = width;
-							}
-							return renderContent( {
-								isUploadInProgress,
-								isUploadFailed,
-								finalWidth,
-								finalHeight,
-								imageWidthWithinContainer,
-								retryMessage,
-							} );
-						} }
-					</ImageSize>
-				) }
-				{ ! coverUrl &&
-					renderContent( {
-						isUploadInProgress,
-						isUploadFailed,
-						retryMessage,
-					} ) }
+				{ renderContent( {
+					isUploadInProgress,
+					isUploadFailed,
+					retryMessage,
+				} ) }
 			</View>
 		);
 	}

packages/block-editor/src/components/media-upload-progress/test/index.native.js

@@ -22,9 +22,15 @@ jest.mock( 'react-native-gutenberg-bridge', () => {
 	const subscribeMediaUpload = ( callback ) => {
 		this.uploadCallBack = callback;
 	};
+	const mediaSources = {
+		deviceCamera: 'DEVICE_CAMERA',
+		deviceLibrary: 'DEVICE_MEDIA_LIBRARY',
+		siteMediaLibrary: 'SITE_MEDIA_LIBRARY',
+	};
 	return {
 		subscribeMediaUpload,
 		sendMediaUpload: callUploadCallback,
+		mediaSources,
 	};
 } );