diff --git a/packages/block-editor/src/components/media-upload-progress/index.native.js b/packages/block-editor/src/components/media-upload-progress/index.native.js index 18856fb596606..ca13038a2795e 100644 --- a/packages/block-editor/src/components/media-upload-progress/index.native.js +++ b/packages/block-editor/src/components/media-upload-progress/index.native.js @@ -123,7 +123,11 @@ export class MediaUploadProgress extends React.Component { return ( - { showSpinner && } + { showSpinner && + + + + } { coverUrl && { ( sizes ) => { diff --git a/packages/block-editor/src/components/media-upload-progress/styles.native.scss b/packages/block-editor/src/components/media-upload-progress/styles.native.scss index 5dea1caaf5aef..9924af03a33c4 100644 --- a/packages/block-editor/src/components/media-upload-progress/styles.native.scss +++ b/packages/block-editor/src/components/media-upload-progress/styles.native.scss @@ -1,4 +1,7 @@ .mediaUploadProgress { flex: 1; +} + +.progressBar { background-color: $gray-lighten-30; } diff --git a/packages/block-library/src/media-text/media-container.native.js b/packages/block-library/src/media-text/media-container.native.js index afb0c1c9fb84b..234d823589645 100644 --- a/packages/block-library/src/media-text/media-container.native.js +++ b/packages/block-library/src/media-text/media-container.native.js @@ -1,7 +1,7 @@ /** * External dependencies */ -import { Dimensions, View, ImageBackground, Text, TouchableWithoutFeedback } from 'react-native'; +import { Dimensions, View, ImageBackground, Text, TouchableWithoutFeedback, Platform } from 'react-native'; import { requestMediaImport, mediaUploadSync, @@ -42,7 +42,8 @@ import SvgIconRetry from './icon-retry'; /** * Constants */ -const ALLOWED_MEDIA_TYPES = [ MEDIA_TYPE_IMAGE, MEDIA_TYPE_VIDEO ]; +// For Android it will only work with the first element of the array (images) +const ALLOWED_MEDIA_TYPES = [ MEDIA_TYPE_IMAGE, ...( Platform.OS === 'ios' ? [ MEDIA_TYPE_VIDEO ] : [] ) ]; // Default Video ratio 16:9 const VIDEO_ASPECT_RATIO = 16 / 9; @@ -68,10 +69,10 @@ class MediaContainer extends Component { if ( mediaId && mediaUrl && ! isURL( mediaUrl ) ) { if ( mediaUrl.indexOf( 'file:' ) === 0 ) { - requestMediaImport( mediaUrl, ( id, url ) => { + requestMediaImport( mediaUrl, ( id, url, type ) => { if ( url ) { onSelectMedia( { - media_type: 'image', // video | image + media_type: type || 'image', // image fallback for android id, url, } ); @@ -89,11 +90,11 @@ class MediaContainer extends Component { } onSelectMediaUploadOption( params ) { - const { id, url } = params; + const { id, url, type } = params; const { onSelectMedia } = this.props; onSelectMedia( { - media_type: 'image', // video | image + media_type: type || 'image', // image fallback for android id, url, } ); @@ -244,10 +245,10 @@ class MediaContainer extends Component { let mediaElement = null; switch ( mediaType ) { - case 'image': + case MEDIA_TYPE_IMAGE: mediaElement = this.renderImage( params, openMediaOptions ); break; - case 'video': + case MEDIA_TYPE_VIDEO: mediaElement = this.renderVideo( params, openMediaOptions ); break; } @@ -270,7 +271,8 @@ class MediaContainer extends Component { } render() { - const { mediaUrl, mediaId } = this.props; + const { mediaUrl, mediaId, mediaType } = this.props; + const coverUrl = mediaType === MEDIA_TYPE_IMAGE ? mediaUrl : null; if ( mediaUrl ) { return ( @@ -284,7 +286,7 @@ class MediaContainer extends Component { { this.renderToolbarEditButton( open ) }