[Mobile] Video block ui/ux enhancements

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

@@ -7,7 +7,6 @@ import { View, Text, TouchableWithoutFeedback } from 'react-native';
  * WordPress dependencies
  */
 import { __, sprintf } from '@wordpress/i18n';
-import { Dashicon } from '@wordpress/components';
 import { MediaUpload, MEDIA_TYPE_IMAGE, MEDIA_TYPE_VIDEO } from '@wordpress/block-editor';
 
 /**
@@ -31,21 +30,12 @@ function MediaPlaceholder( props ) {
 		}
 	}
 
-	let placeholderIcon = icon;
-	if ( placeholderIcon === undefined ) {
-		if ( isImage ) {
-			placeholderIcon = 'format-image';
-		} else if ( isVideo ) {
-			placeholderIcon = 'format-video';
-		}
-	}
-
 	let instructions = labels.instructions;
 	if ( instructions === undefined ) {
 		if ( isImage ) {
-			instructions = __( 'CHOOSE IMAGE' );
+			instructions = __( 'ADD IMAGE' );
 		} else if ( isVideo ) {
-			instructions = __( 'CHOOSE VIDEO' );
+			instructions = __( 'ADD VIDEO' );
 		}
 	}
 
@@ -70,11 +60,16 @@ function MediaPlaceholder( props ) {
 						) }
 						accessibilityRole={ 'button' }
 						accessibilityHint={ accessibilityHint }
-						onPress={ open }
+						onPress={ ( event ) => {
+							props.onFocus( event );
+							open();
+						} }
 					>
 						<View style={ styles.emptyStateContainer }>
 							{ getMediaOptions() }
-							<Dashicon icon={ placeholderIcon } />
+							<View style={ styles.modalIcon }>
+								{ icon }
+							</View>
 							<Text style={ styles.emptyStateTitle }>
 								{ placeholderTitle }
 							</Text>

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

@@ -4,7 +4,7 @@
 	flex-direction: column;
 	align-items: center;
 	justify-content: center;
-	background-color: #e9eff3;
+	background-color: $gray-light;
 	padding-left: 12;
 	padding-right: 12;
 	padding-top: 12;
@@ -21,7 +21,15 @@
 
 .emptyStateDescription {
 	text-align: center;
-	color: #0087be;
+	color: $blue-wordpress;
 	font-size: 14;
 	font-weight: 500;
 }
+
+.modalIcon {
+	width: 24px;
+	height: 24px;
+	justify-content: center;
+	align-items: center;
+	fill: $gray-dark;
+}

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

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import React from 'react';
-import { View, ImageBackground, Text, TouchableWithoutFeedback } from 'react-native';
+import { View, ImageBackground, Text, TouchableWithoutFeedback, Dimensions } from 'react-native';
 import {
 	requestMediaImport,
 	mediaUploadSync,
@@ -17,7 +17,6 @@ import { isEmpty } from 'lodash';
 import {
 	Toolbar,
 	ToolbarButton,
-	Dashicon,
 } from '@wordpress/components';
 import {
 	MediaPlaceholder,
@@ -37,10 +36,15 @@ import { doAction, hasAction } from '@wordpress/hooks';
  */
 import styles from './styles.scss';
 import MediaUploadProgress from './media-upload-progress';
+import SvgIcon from './icon';
+import SvgIconRetry from './icon-retry';
 
 const LINK_DESTINATION_CUSTOM = 'custom';
 const LINK_DESTINATION_NONE = 'none';
 
+// Default Image ratio 4:3
+const IMAGE_ASPECT_RATIO = 4 / 3;
+
 class ImageEdit extends React.Component {
 	constructor( props ) {
 		super( props );
@@ -187,6 +191,14 @@ class ImageEdit extends React.Component {
 		}
 	}
 
+	getIcon( isRetryIcon ) {
+		if ( isRetryIcon ) {
+			return <SvgIconRetry fill={ styles.iconRetry.fill } />;
+		}
+
+		return <SvgIcon fill={ styles.icon.fill } />;
+	}
+
 	render() {
 		const { attributes, isSelected, setAttributes } = this.props;
 		const { url, caption, height, width, alt, href, id } = attributes;
@@ -256,11 +268,15 @@ class ImageEdit extends React.Component {
 					<MediaPlaceholder
 						mediaType={ MEDIA_TYPE_IMAGE }
 						onSelectURL={ this.onSelectMediaUploadOption }
+						icon={ this.getIcon( false ) }
+						onFocus={ this.props.onFocus }
 					/>
 				</View>
 			);
 		}
 
+		const imageContainerHeight = Dimensions.get( 'window' ).width / IMAGE_ASPECT_RATIO;
+
 		return (
 			<TouchableWithoutFeedback
 				accessible={ ! isSelected }
@@ -298,12 +314,20 @@ class ImageEdit extends React.Component {
 						onFinishMediaUploadWithSuccess={ this.finishMediaUploadWithSuccess }
 						onFinishMediaUploadWithFailure={ this.finishMediaUploadWithFailure }
 						onMediaUploadStateReset={ this.mediaUploadStateReset }
-						renderContent={ ( { isUploadInProgress, isUploadFailed, finalWidth, finalHeight, imageWidthWithinContainer, retryIconName, retryMessage } ) => {
+						renderContent={ ( { isUploadInProgress, isUploadFailed, finalWidth, finalHeight, imageWidthWithinContainer, retryMessage } ) => {
 							const opacity = isUploadInProgress ? 0.3 : 1;
+							const icon = this.getIcon( isUploadFailed );
+
+							const iconContainer = (
+								<View style={ styles.modalIcon }>
+									{ icon }
+								</View>
+							);
+
 							return (
 								<View style={ { flex: 1 } } >
-									{ ! imageWidthWithinContainer && <View style={ styles.imageContainer } >
-										<Dashicon icon={ 'format-image' } size={ 300 } />
+									{ ! imageWidthWithinContainer && <View style={ [ styles.imageContainer, { height: imageContainerHeight } ] } >
+										{ this.getIcon( false ) }
 									</View> }
 									<ImageBackground
 										style={ { width: finalWidth, height: finalHeight, opacity } }
@@ -314,8 +338,8 @@ class ImageEdit extends React.Component {
 										accessibilityLabel={ alt }
 									>
 										{ isUploadFailed &&
-											<View style={ styles.imageContainer } >
-												<Dashicon icon={ retryIconName } ariaPressed={ 'dashicon-active' } />
+											<View style={ [ styles.imageContainer, { flex: 1, backgroundColor: 'rgba(0, 0, 0, 0.5)' } ] } >
+												{ iconContainer }
 												<Text style={ styles.uploadFailedText }>{ retryMessage }</Text>
 											</View>
 										}

packages/block-library/src/image/icon-retry.js

@@ -0,0 +1,10 @@
+/**
+ * WordPress dependencies
+ */
+import { Path, SVG } from '@wordpress/components';
+
+function svg( props ) {
+	return <SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" { ...props }><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>;
+}
+
+export default svg;

packages/block-library/src/image/icon.js

@@ -3,4 +3,8 @@
  */
 import { Path, SVG } from '@wordpress/components';
 
-export default <SVG viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><Path d="M0,0h24v24H0V0z" fill="none" /><Path d="m19 5v14h-14v-14h14m0-2h-14c-1.1 0-2 0.9-2 2v14c0 1.1 0.9 2 2 2h14c1.1 0 2-0.9 2-2v-14c0-1.1-0.9-2-2-2z" /><Path d="m14.14 11.86l-3 3.87-2.14-2.59-3 3.86h12l-3.86-5.14z" /></SVG>;
+function svg( props ) {
+	return <SVG viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" { ...props }><Path d="M0,0h24v24H0V0z" fill="none" /><Path d="m19 5v14h-14v-14h14m0-2h-14c-1.1 0-2 0.9-2 2v14c0 1.1 0.9 2 2 2h14c1.1 0 2-0.9 2-2v-14c0-1.1-0.9-2-2-2z" /><Path d="m14.14 11.86l-3 3.87-2.14-2.59-3 3.86h12l-3.86-5.14z" /></SVG>;
+}
+
+export default svg;

packages/block-library/src/image/media-upload-progress.native.js

@@ -19,6 +19,7 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import ImageSize from './image-size';
+import styles from './styles.scss';
 
 const MEDIA_UPLOAD_STATE_UPLOADING = 1;
 const MEDIA_UPLOAD_STATE_SUCCEEDED = 2;
@@ -118,11 +119,10 @@ class MediaUploadProgress extends React.Component {
 		const { isUploadInProgress, isUploadFailed } = this.state;
 		const showSpinner = this.state.isUploadInProgress;
 		const progress = this.state.progress * 100;
-		const retryIconName = 'image-rotate';
 		const retryMessage = __( 'Failed to insert media.\nPlease tap for options.' );
 
 		return (
-			<View style={ { flex: 1 } }>
+			<View style={ styles.mediaUploadProgress }>
 				{ showSpinner && <Spinner progress={ progress } /> }
 				{ coverUrl &&
 					<ImageSize src={ coverUrl } >
@@ -147,7 +147,6 @@ class MediaUploadProgress extends React.Component {
 								finalWidth,
 								finalHeight,
 								imageWidthWithinContainer,
-								retryIconName,
 								retryMessage,
 							} ) );
 						} }
@@ -156,7 +155,6 @@ class MediaUploadProgress extends React.Component {
 				{ ! coverUrl && this.props.renderContent( {
 					isUploadInProgress,
 					isUploadFailed,
-					retryIconName,
 					retryMessage,
 				} ) }
 			</View>

packages/block-library/src/image/styles.native.scss

@@ -1,9 +1,9 @@
 // @format
 
 .imageContainer {
-	flex: 1;
 	justify-content: center;
 	align-items: center;
+	background-color: $gray-lighten-30;
 }
 
 .uploadFailedText {
@@ -21,3 +21,23 @@
 .clearSettingsButton {
 	color: $alert-red;
 }
+
+.mediaUploadProgress {
+	flex: 1;
+	background-color: $gray-lighten-30;
+}
+
+.modalIcon {
+	width: 80px;
+	height: 80px;
+	justify-content: center;
+	align-items: center;
+}
+
+.iconRetry {
+	fill: #fff;
+}
+
+.icon {
+	fill: $gray-dark;
+}

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

@@ -19,7 +19,6 @@ import {
 import {
 	Toolbar,
 	ToolbarButton,
-	Dashicon,
 } from '@wordpress/components';
 import {
 	MediaPlaceholder,
@@ -38,6 +37,8 @@ import { doAction, hasAction } from '@wordpress/hooks';
  */
 import MediaUploadProgress from '../image/media-upload-progress';
 import style from './style.scss';
+import SvgIcon from './icon';
+import SvgIconRetry from './icon-retry';
 
 const VIDEO_ASPECT_RATIO = 1.7;
 
@@ -127,6 +128,14 @@ class VideoEdit extends React.Component {
 		}
 	}
 
+	getIcon( isRetryIcon ) {
+		if ( isRetryIcon ) {
+			return <SvgIconRetry fill={ style.icon.fill } />;
+		}
+
+		return <SvgIcon fill={ style.icon.fill } />;
+	}
+
 	render() {
 		const { attributes, isSelected, setAttributes } = this.props;
 		const { caption, id, src } = attributes;
@@ -156,6 +165,8 @@ class VideoEdit extends React.Component {
 					<MediaPlaceholder
 						mediaType={ MEDIA_TYPE_VIDEO }
 						onSelectURL={ this.onSelectMediaUploadOption }
+						icon={ this.getIcon( false ) }
+						onFocus={ this.props.onFocus }
 					/>
 				</View>
 			);
@@ -180,29 +191,37 @@ class VideoEdit extends React.Component {
 						onFinishMediaUploadWithFailure={ this.finishMediaUploadWithFailure }
 						onUpdateMediaProgress={ this.updateMediaProgress }
 						onMediaUploadStateReset={ this.mediaUploadStateReset }
-						renderContent={ ( { isUploadInProgress, isUploadFailed, retryIconName, retryMessage } ) => {
-							const opacity = ( isUploadInProgress || isUploadFailed ) ? 0.3 : 1;
+						renderContent={ ( { isUploadInProgress, isUploadFailed, retryMessage } ) => {
 							const showVideo = src && ! isUploadInProgress && ! isUploadFailed;
-							const iconName = isUploadFailed ? retryIconName : 'format-video';
+							const icon = this.getIcon( isUploadFailed );
+
+							const iconContainer = (
+								<View style={ style.modalIcon }>
+									{ icon }
+								</View>
+							);
 
 							const videoStyle = {
 								height: videoContainerHeight,
 								...style.video,
 							};
 
+							const containerStyle = showVideo && isSelected ? style.containerFocused : style.container;
+
 							return (
-								<View onLayout={ this.onVideoContanerLayout } style={ { flex: 1 } }>
-									{ showVideo &&
+								<View onLayout={ this.onVideoContanerLayout } style={ containerStyle }>
+									{ showVideo && isURL( src ) &&
 										<Video
+											isSelected={ isSelected }
+											style={ [ videoStyle, { backgroundColor: 'black' } ] }
 											source={ { uri: src } }
-											style={ videoStyle }
 											paused={ true }
 											muted={ true }
 										/>
 									}
 									{ ! showVideo &&
-										<View style={ { ...videoStyle, ...style.placeholder, opacity } }>
-											{ videoContainerHeight > 0 && <Dashicon icon={ iconName } size={ 80 } style={ style.placeholderIcon } /> }
+										<View style={ { ...videoStyle, ...style.placeholder } }>
+											{ videoContainerHeight > 0 && iconContainer }
 											{ isUploadFailed && <Text style={ style.uploadFailedText }>{ retryMessage }</Text> }
 										</View>
 									}

packages/block-library/src/video/icon-retry.js

@@ -0,0 +1,10 @@
+/**
+ * WordPress dependencies
+ */
+import { Path, SVG } from '@wordpress/components';
+
+function svg( props ) {
+	return <SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" { ...props }><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>;
+}
+
+export default svg;

packages/block-library/src/video/icon.js

@@ -3,4 +3,8 @@
  */
 import { Path, SVG } from '@wordpress/components';
 
-export default <SVG viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><Path fill="none" d="M0 0h24v24H0V0z" /><Path d="M4 6.47L5.76 10H20v8H4V6.47M22 4h-4l2 4h-3l-2-4h-2l2 4h-3l-2-4H8l2 4H7L5 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4z" /></SVG>;
+function svg( props ) {
+	return <SVG viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" { ...props }><Path fill="none" d="M0 0h24v24H0V0z" /><Path d="M4 6.47L5.76 10H20v8H4V6.47M22 4h-4l2 4h-3l-2-4h-2l2 4h-3l-2-4H8l2 4H7L5 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4z" /></SVG>;
+}
+
+export default svg;