[RNMobile] Media & Text - Media picker buttons functionality

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

@@ -23,6 +23,7 @@ export { default as URLInput } from './url-input';
 export { default as BlockInvalidWarning } from './block-list/block-invalid-warning';
 export { default as Caption } from './caption';
 export { BottomSheetSettings, BlockSettingsButton } from './block-settings';
+export { default as VideoPlayer, VIDEO_ASPECT_RATIO } from './video-player';
 
 // Content Related Components
 export { default as BlockList } from './block-list';

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

@@ -52,6 +52,8 @@ function MediaPlaceholder( props ) {
 			instructions = __( 'ADD IMAGE' );
 		} else if ( isVideo ) {
 			instructions = __( 'ADD VIDEO' );
+		} else {
+			instructions = __( 'ADD IMAGE OR VIDEO' );
 		}
 	}
 

packages/block-editor/src/components/media-placeholder/styles.native.scss

@@ -19,6 +19,10 @@
 	background-color: $background-dark-secondary;
 }
 
+.emptyStateContainerDark {
+	background-color: $background-dark-secondary;
+}
+
 .emptyStateTitle {
 	text-align: center;
 	margin-top: 8;

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

@@ -123,7 +123,11 @@ export class MediaUploadProgress extends React.Component {
 
 		return (
 			<View style={ styles.mediaUploadProgress }>
-				{ showSpinner && <Spinner progress={ progress } /> }
+				{ showSpinner &&
+					<View style={ styles.progressBar }>
+						<Spinner progress={ progress } />
+					</View>
+				}
 				{ coverUrl &&
 					<ImageSize src={ coverUrl } >
 						{ ( sizes ) => {

packages/block-editor/src/components/media-upload-progress/styles.native.scss

@@ -1,4 +1,7 @@
 .mediaUploadProgress {
 	flex: 1;
+}
+
+.progressBar {
 	background-color: $gray-lighten-30;
 }

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

@@ -85,7 +85,7 @@ export class MediaUpload extends React.Component {
 	onPickerSelect( requestFunction ) {
 		const { allowedTypes = [], onSelect, multiple = false } = this.props;
 		requestFunction( allowedTypes, multiple, ( media ) => {
-			if ( ( multiple && media ) || media.id ) {
+			if ( ( multiple && media ) || ( media && media.id ) ) {
 				onSelect( media );
 			}
 		} );

packages/block-library/src/video/video-player.native.js → packages/block-editor/src/components/video-player/index.native.js

@@ -14,9 +14,12 @@ import { default as VideoPlayer } from 'react-native-video';
 /**
  * Internal dependencies
  */
-import styles from './video-player.scss';
+import styles from './styles.scss';
 import PlayIcon from './gridicon-play';
 
+// Default Video ratio 16:9
+export const VIDEO_ASPECT_RATIO = 16 / 9;
+
 class Video extends Component {
 	constructor() {
 		super( ...arguments );

packages/block-library/src/media-text/edit.native.js

@@ -41,6 +41,7 @@ class MediaTextEdit extends Component {
 		super( ...arguments );
 
 		this.onSelectMedia = this.onSelectMedia.bind( this );
+		this.onMediaUpdate = this.onMediaUpdate.bind( this );
 		this.onWidthChange = this.onWidthChange.bind( this );
 		this.commitWidthChange = this.commitWidthChange.bind( this );
 		this.state = {
@@ -66,7 +67,7 @@ class MediaTextEdit extends Component {
 			mediaType = media.type;
 		}
 
-		if ( mediaType === 'image' ) {
+		if ( mediaType === 'image' && media.sizes ) {
 			// Try the "large" size URL, falling back to the "full" size URL below.
 			src = get( media, [ 'sizes', 'large', 'url' ] ) || get( media, [ 'media_details', 'sizes', 'large', 'source_url' ] );
 		}
@@ -81,6 +82,15 @@ class MediaTextEdit extends Component {
 		} );
 	}
 
+	onMediaUpdate( media ) {
+		const { setAttributes } = this.props;
+
+		setAttributes( {
+			mediaId: media.id,
+			mediaUrl: media.url,
+		} );
+	}
+
 	onWidthChange( width ) {
 		this.setState( {
 			mediaWidth: applyWidthConstraints( width ),
@@ -99,16 +109,17 @@ class MediaTextEdit extends Component {
 	}
 
 	renderMediaArea() {
-		const { attributes } = this.props;
+		const { attributes, isSelected } = this.props;
 		const { mediaAlt, mediaId, mediaPosition, mediaType, mediaUrl, mediaWidth, imageFill, focalPoint } = attributes;
 
 		return (
 			<MediaContainer
 				onSelectMedia={ this.onSelectMedia }
+				onMediaUpdate={ this.onMediaUpdate }
 				onWidthChange={ this.onWidthChange }
 				commitWidthChange={ this.commitWidthChange }
 				onFocus={ this.props.onFocus }
-				{ ...{ mediaAlt, mediaId, mediaType, mediaUrl, mediaPosition, mediaWidth, imageFill, focalPoint } }
+				{ ...{ mediaAlt, mediaId, mediaType, mediaUrl, mediaPosition, mediaWidth, imageFill, focalPoint, isSelected } }
 			/>
 		);
 	}

packages/block-library/src/media-text/icon-retry.native.js

@@ -0,0 +1,6 @@
+/**
+ * WordPress dependencies
+ */
+import { Path, SVG } from '@wordpress/components';
+
+export default <SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><Path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z" /><Path d="M0 0h24v24H0z" fill={ 'none' } /></SVG>;