[RNMobile] Audio Block: Add from URL

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

@@ -49,6 +49,7 @@ function MediaPlaceholder( props ) {
 		backgroundColor,
 		hideContent,
 		autoOpenMediaUpload,
+		onSelectURL,
 	} = props;
 
 	// use ref to keep media array current for callbacks during rerenders
@@ -156,6 +157,7 @@ function MediaPlaceholder( props ) {
 			<MediaUpload
 				allowedTypes={ allowedTypes }
 				onSelect={ setMedia }
+				onSelectURL={ onSelectURL }
 				__experimentalOnlyMediaLibrary={
 					__experimentalOnlyMediaLibrary
 				}

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

@@ -5,6 +5,8 @@ import { Platform } from 'react-native';
 
 import { delay } from 'lodash';
 
+import prompt from 'react-native-prompt-android';
+
 /**
  * WordPress dependencies
  */
@@ -22,6 +24,7 @@ import {
 	image,
 	wordpress,
 	mobile,
+	globe,
 } from '@wordpress/icons';
 
 export const MEDIA_TYPE_IMAGE = 'image';
@@ -111,11 +114,20 @@ export class MediaUpload extends Component {
 			mediaLibrary: true,
 		};
 
+		const urlSource = {
+			id: 'URL',
+			value: 'URL',
+			label: __( 'Insert from URL' ),
+			types: [ MEDIA_TYPE_AUDIO ],
+			icon: globe,
+		};
+
 		const internalSources = [
 			deviceLibrarySource,
 			cameraImageSource,
 			cameraVideoSource,
 			siteLibrarySource,
+			urlSource,
 		];
 
 		return internalSources.concat( this.state.otherMediaOptions );
@@ -166,7 +178,34 @@ export class MediaUpload extends Component {
 	}
 
 	onPickerSelect( value ) {
-		const { allowedTypes = [], onSelect, multiple = false } = this.props;
+		const {
+			allowedTypes = [],
+			onSelect,
+			onSelectURL,
+			multiple = false,
+		} = this.props;
+
+		if ( value === 'URL' ) {
+			prompt(
+				__( 'Type a URL' ), // title
+				undefined, // message
+				[
+					{
+						text: __( 'Cancel' ),
+						style: 'cancel',
+					},
+					{
+						text: __( 'Apply' ),
+						onPress: onSelectURL,
+					},
+				], // buttons
+				'plain-text', // type
+				undefined, // defaultValue
+				'url' // keyboardType
+			);
+			return;
+		}
+
 		const mediaSource = this.getAllSources()
 			.filter( ( source ) => source.value === value )
 			.shift();

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

@@ -31,6 +31,7 @@ import { audio as icon, replace } from '@wordpress/icons';
 import { useState } from '@wordpress/element';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { store as noticesStore } from '@wordpress/notices';
+import { isURL } from '@wordpress/url';
 
 /**
  * Internal dependencies
@@ -75,8 +76,14 @@ function AudioEdit( {
 		};
 	}
 
-	function onSelectURL() {
-		// TODO: Set up add audio from URL flow
+	function onSelectURL( newSrc ) {
+		if ( newSrc !== src ) {
+			if ( isURL( newSrc ) ) {
+				setAttributes( { src: newSrc, id: undefined } );
+			} else {
+				createErrorNotice( __( 'Invalid URL. Audio file not found.' ) );
+			}
+		}
 	}
 
 	function onSelectAudio( media ) {
@@ -136,7 +143,6 @@ function AudioEdit( {
 		return (
 			<MediaUploadProgress
 				mediaId={ id }
-				onUpdateMediaProgress={ this.updateMediaProgress }
 				onFinishMediaUploadWithSuccess={ onFileChange }
 				onFinishMediaUploadWithFailure={ onError }
 				onMediaUploadStateReset={ onFileChange }
@@ -211,6 +217,7 @@ function AudioEdit( {
 					allowedTypes={ ALLOWED_MEDIA_TYPES }
 					isReplacingMedia={ true }
 					onSelect={ onSelectAudio }
+					onSelectURL={ onSelectURL }
 					render={ ( { open, getMediaOptions } ) => {
 						return getBlockUI( open, getMediaOptions );
 					} }

packages/components/src/mobile/audio-player/index.native.js

@@ -128,9 +128,15 @@ function Player( {
 
 	if ( src ) {
 		const decodedURI = safeDecodeURI( src );
-		const fileName = decodedURI.split( '/' ).pop();
+		const fileName = decodedURI
+			.split( '#' )
+			.shift()
+			.split( '?' )
+			.shift()
+			.split( '/' )
+			.pop();
 		const parts = fileName.split( '.' );
-		extension = parts.pop().toUpperCase();
+		extension = parts.length === 2 ? parts.pop().toUpperCase() + ' ' : '';
 		title = parts.join( '.' );
 	}
 
@@ -144,7 +150,7 @@ function Player( {
 		return (
 			extension +
 			// translators: displays audio file extension. e.g. MP3 audio file
-			__( ' audio file' )
+			__( 'audio file' )
 		);
 	};
 

packages/react-native-bridge/android/react-native-bridge/build.gradle

@@ -90,6 +90,7 @@ dependencies {
         implementation "com.github.wordpress-mobile:react-native-screens:${readHashedVersion('../../../react-native-editor/package.json', 'react-native-screens', 'dependencies')}"
         implementation "com.github.wordpress-mobile:react-native-safe-area-context:${readHashedVersion('../../../react-native-editor/package.json', 'react-native-safe-area-context', 'dependencies')}"
         implementation "com.github.wordpress-mobile:react-native-reanimated:${readHashedVersion('../../../react-native-editor/package.json', 'react-native-reanimated', 'dependencies')}"
+        implementation "com.github.wordpress-mobile:react-native-prompt-android:${readHashedVersion('../../../react-native-editor/package.json', 'react-native-prompt-android', 'dependencies')}"
         runtimeOnly "org.wordpress-mobile:hermes-release-mirror:0.61.5"
    } else {
         api 'com.facebook.react:react-native:+'
@@ -104,6 +105,7 @@ dependencies {
         api project(':react-native-screens')
         api project(':react-native-safe-area-context')
         api project(':react-native-reanimated')
+        api project(':react-native-prompt-android')
         debugRuntimeOnly "org.wordpress-mobile:hermes-debug-mirror:0.61.5"
         releaseRuntimeOnly "org.wordpress-mobile:hermes-release-mirror:0.61.5"
    }

packages/react-native-bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/WPAndroidGlue/WPAndroidGlueCode.java

@@ -64,6 +64,7 @@
 import java.util.concurrent.CountDownLatch;
 import java.util.concurrent.TimeUnit;
 
+import im.shimo.react.prompt.RNPromptPackage;
 import okhttp3.OkHttpClient;
 
 
@@ -488,6 +489,7 @@ public void requestFocalPointPickerTooltipShown(FocalPointPickerTooltipShownCall
                 new SafeAreaContextPackage(),
                 new RNCMaskedViewPackage(),
                 new ReanimatedPackage(),
+                new RNPromptPackage(),
                 mRnReactNativeGutenbergBridgePackage);
     }
 

packages/react-native-bridge/android/settings.gradle

@@ -28,4 +28,6 @@ include ':react-native-safe-area-context'
 project(':react-native-safe-area-context').projectDir = new File(rootProject.projectDir, '../../../node_modules/react-native-safe-area-context/android')
 include ':react-native-reanimated'
 project(':react-native-reanimated').projectDir = new File(rootProject.projectDir, '../../../node_modules/react-native-reanimated/android')
+include ':react-native-prompt-android'
+project(':react-native-prompt-android').projectDir = new File(rootProject.projectDir, '../../../node_modules/react-native-prompt-android/android')
 

packages/react-native-editor/CHANGELOG.md

@@ -11,6 +11,8 @@ For each user feature we should also add a importance categorization label  to i
 
 ## Unreleased
 
+-   [*] Audio block: Add Insert from URL functionality. [#27817]
+
 ## 1.53.0
 
 -   [*] Bottom-sheet: Add custom header [#30291]
@@ -19,7 +21,6 @@ For each user feature we should also add a importance categorization label  to i
 -   [***] Add reusable blocks to the inserter menu. [#28495]
 -   [*] The BottomSheet Cell component now supports the help prop so that a hint can be supplied to all Cell based components. [#30885]
 
-
 ## 1.52.2
 
 -   [*] Disabled featured image banner on iOS. [#31681]

packages/react-native-editor/android/app/src/main/java/com/gutenberg/MainApplication.java

@@ -43,6 +43,8 @@
 import java.util.List;
 import java.util.ArrayList;
 
+import im.shimo.react.prompt.RNPromptPackage;
+
 public class MainApplication extends Application implements ReactApplication, GutenbergBridgeInterface {
 
     private static final String TAG = "MainApplication";
@@ -258,6 +260,7 @@ protected List<ReactPackage> getPackages() {
                         new ReanimatedPackage(),
                         new SafeAreaContextPackage(),
                         new RNScreensPackage(),
+                        new RNPromptPackage(),
                         mRnReactNativeGutenbergBridgePackage);
             }
 

packages/react-native-editor/package.json

@@ -66,6 +66,7 @@
 		"react-native-keyboard-aware-scroll-view": "git+https://github.com/wordpress-mobile/react-native-keyboard-aware-scroll-view.git#gb-v0.8.8",
 		"react-native-linear-gradient": "git+https://github.com/wordpress-mobile/react-native-linear-gradient.git#52bf43077171cff8714ce3e0155f3ebb7f55bc37",
 		"react-native-modal": "^6.5.0",
+		"react-native-prompt-android": "git+https://github.com/wordpress-mobile/react-native-prompt-android.git#aba780c0bacddca76bff2c470a6c1d1d760b0b55",
 		"react-native-reanimated": "git+https://github.com/wordpress-mobile/react-native-reanimated.git#ed48f510fba751cd75da7629e92276166766be91",
 		"react-native-safe-area": "^0.5.0",
 		"react-native-safe-area-context": "git+https://github.com/wordpress-mobile/react-native-safe-area-context.git#1e3c0d34f31b59fb79f71ec0b4c39c513f684871",