From 0519567b7d5e3d4cfbfd13714f6d0873c3c48fdd Mon Sep 17 00:00:00 2001 From: eToledo Date: Tue, 1 Dec 2020 09:56:07 +0100 Subject: [PATCH 01/12] Basics of Audio block working --- .../block-library/src/audio/edit.native.js | 203 ++++++++++++++++++ packages/block-library/src/index.native.js | 1 + 2 files changed, 204 insertions(+) create mode 100644 packages/block-library/src/audio/edit.native.js diff --git a/packages/block-library/src/audio/edit.native.js b/packages/block-library/src/audio/edit.native.js new file mode 100644 index 00000000000000..3d32215d07f802 --- /dev/null +++ b/packages/block-library/src/audio/edit.native.js @@ -0,0 +1,203 @@ +/** + * External dependencies + */ +import { Text } from 'react-native'; + +/** + * WordPress dependencies + */ +import { View } from '@wordpress/primitives'; +import { getBlobByURL, isBlobURL } from '@wordpress/blob'; +import { + PanelBody, + SelectControl, + ToggleControl, + withNotices, +} from '@wordpress/components'; +import { + BlockControls, + BlockIcon, + InspectorControls, + MediaPlaceholder, + RichText, +} from '@wordpress/block-editor'; +import { useEffect } from '@wordpress/element'; +import { __ } from '@wordpress/i18n'; +import { useSelect } from '@wordpress/data'; +import { audio as icon } from '@wordpress/icons'; +import { createBlock } from '@wordpress/blocks'; + +/** + * Internal dependencies + */ +import { createUpgradedEmbedBlock } from '../embed/util'; + +const ALLOWED_MEDIA_TYPES = [ 'audio' ]; + +function AudioEdit( { + attributes, + noticeOperations, + setAttributes, + onReplace, + isSelected, + noticeUI, + insertBlocksAfter, + onFocus, +} ) { + const { id, autoplay, caption, loop, preload, src } = attributes; + const mediaUpload = useSelect( ( select ) => { + const { getSettings } = select( 'core/block-editor' ); + return getSettings().mediaUpload; + }, [] ); + + useEffect( () => { + if ( ! id && isBlobURL( src ) ) { + const file = getBlobByURL( src ); + + if ( file ) { + mediaUpload( { + filesList: [ file ], + onFileChange: ( [ { id: mediaId, url } ] ) => { + setAttributes( { id: mediaId, src: url } ); + }, + onError: ( e ) => { + setAttributes( { src: undefined, id: undefined } ); + noticeOperations.createErrorNotice( e ); + }, + allowedTypes: ALLOWED_MEDIA_TYPES, + } ); + } + } + }, [] ); + + function toggleAttribute( attribute ) { + return ( newValue ) => { + setAttributes( { [ attribute ]: newValue } ); + }; + } + + function onSelectURL( newSrc ) { + // Set the block's src from the edit component's state, and switch off + // the editing UI. + if ( newSrc !== src ) { + // Check if there's an embed block that handles this URL. + const embedBlock = createUpgradedEmbedBlock( { + attributes: { url: newSrc }, + } ); + if ( undefined !== embedBlock ) { + onReplace( embedBlock ); + return; + } + setAttributes( { src: newSrc, id: undefined } ); + } + } + + function onUploadError( message ) { + noticeOperations.removeAllNotices(); + noticeOperations.createErrorNotice( message ); + } + + function getAutoplayHelp( checked ) { + return checked + ? __( + 'Note: Autoplaying audio may cause usability issues for some visitors.' + ) + : null; + } + + // const { setAttributes, isSelected, noticeUI } = this.props; + function onSelectAudio( media ) { + if ( ! media || ! media.url ) { + // in this case there was an error and we should continue in the editing state + // previous attributes should be removed because they may be temporary blob urls + setAttributes( { src: undefined, id: undefined } ); + return; + } + // sets the block's attribute and updates the edit component from the + // selected media, then switches off the editing UI + setAttributes( { src: media.url, id: media.id } ); + } + + if ( ! src ) { + return ( + + } + onSelect={ onSelectAudio } + onSelectURL={ onSelectURL } + accept="audio/*" + allowedTypes={ ALLOWED_MEDIA_TYPES } + value={ attributes } + notices={ noticeUI } + onError={ onUploadError } + onFocus={ onFocus } + /> + + ); + } + + return ( + <> + { /* + + */ } + + + + + + setAttributes( { + preload: value || undefined, + } ) + } + options={ [ + { value: '', label: __( 'Browser default' ) }, + { value: 'auto', label: __( 'Auto' ) }, + { value: 'metadata', label: __( 'Metadata' ) }, + { value: 'none', label: __( 'None' ) }, + ] } + /> + + + + ⏯ Audio Player goes here + { ( ! RichText.isEmpty( caption ) || isSelected ) && ( + + setAttributes( { caption: value } ) + } + inlineToolbar + __unstableOnSplitAtEnd={ () => + insertBlocksAfter( createBlock( 'core/paragraph' ) ) + } + /> + ) } + + + ); +} +export default withNotices( AudioEdit ); diff --git a/packages/block-library/src/index.native.js b/packages/block-library/src/index.native.js index 23f13a448337db..25ba95141f7ded 100644 --- a/packages/block-library/src/index.native.js +++ b/packages/block-library/src/index.native.js @@ -224,6 +224,7 @@ export const registerCoreBlocks = () => { socialLinks, pullquote, file, + devOnly( audio ), ].forEach( registerBlock ); registerBlockVariations( socialLink ); From 690224d019a427e4d082baded4230366dd848135 Mon Sep 17 00:00:00 2001 From: eToledo Date: Tue, 1 Dec 2020 10:00:59 +0100 Subject: [PATCH 02/12] Add audio support to MediaUpload --- .../block-editor/src/components/index.native.js | 1 + .../components/media-placeholder/index.native.js | 8 ++++++++ .../src/components/media-upload/index.native.js | 13 +++++++++++++ 3 files changed, 22 insertions(+) diff --git a/packages/block-editor/src/components/index.native.js b/packages/block-editor/src/components/index.native.js index 81ca7273118cd4..a0095e566c0345 100644 --- a/packages/block-editor/src/components/index.native.js +++ b/packages/block-editor/src/components/index.native.js @@ -26,6 +26,7 @@ export { default as MediaUpload, MEDIA_TYPE_IMAGE, MEDIA_TYPE_VIDEO, + MEDIA_TYPE_AUDIO, MEDIA_TYPE_ANY, } from './media-upload'; export { default as MediaUploadProgress } from './media-upload-progress'; diff --git a/packages/block-editor/src/components/media-placeholder/index.native.js b/packages/block-editor/src/components/media-placeholder/index.native.js index 715f5ec2ceeb47..1193b8a4122d4e 100644 --- a/packages/block-editor/src/components/media-placeholder/index.native.js +++ b/packages/block-editor/src/components/media-placeholder/index.native.js @@ -12,6 +12,7 @@ import { MediaUpload, MEDIA_TYPE_IMAGE, MEDIA_TYPE_VIDEO, + MEDIA_TYPE_AUDIO, } from '@wordpress/block-editor'; import { withPreferredColorScheme } from '@wordpress/compose'; import { useRef } from '@wordpress/element'; @@ -65,6 +66,7 @@ function MediaPlaceholder( props ) { const isOneType = allowedTypes.length === 1; const isImage = isOneType && allowedTypes.includes( MEDIA_TYPE_IMAGE ); const isVideo = isOneType && allowedTypes.includes( MEDIA_TYPE_VIDEO ); + const isAudio = isOneType && allowedTypes.includes( MEDIA_TYPE_AUDIO ); let placeholderTitle = labels.title; if ( placeholderTitle === undefined ) { @@ -73,6 +75,8 @@ function MediaPlaceholder( props ) { placeholderTitle = __( 'Image' ); } else if ( isVideo ) { placeholderTitle = __( 'Video' ); + } else if ( isAudio ) { + placeholderTitle = __( 'Audio' ); } } @@ -82,6 +86,8 @@ function MediaPlaceholder( props ) { instructions = __( 'ADD IMAGE' ); } else if ( isVideo ) { instructions = __( 'ADD VIDEO' ); + } else if ( isAudio ) { + instructions = __( 'ADD AUDIO' ); } else { instructions = __( 'ADD IMAGE OR VIDEO' ); } @@ -92,6 +98,8 @@ function MediaPlaceholder( props ) { accessibilityHint = __( 'Double tap to select an image' ); } else if ( isVideo ) { accessibilityHint = __( 'Double tap to select a video' ); + } else if ( isAudio ) { + accessibilityHint = __( 'Double tap to select an audio file' ); } const emptyStateTitleStyle = getStylesFromColorScheme( diff --git a/packages/block-editor/src/components/media-upload/index.native.js b/packages/block-editor/src/components/media-upload/index.native.js index 1147289c8d6b1b..1e015167268d7f 100644 --- a/packages/block-editor/src/components/media-upload/index.native.js +++ b/packages/block-editor/src/components/media-upload/index.native.js @@ -23,6 +23,7 @@ import { export const MEDIA_TYPE_IMAGE = 'image'; export const MEDIA_TYPE_VIDEO = 'video'; +export const MEDIA_TYPE_AUDIO = 'audio'; export const MEDIA_TYPE_ANY = 'any'; export const OPTION_TAKE_VIDEO = __( 'Take a Video' ); @@ -155,6 +156,7 @@ export class MediaUpload extends React.Component { const isOneType = allowedTypes.length === 1; const isImage = isOneType && allowedTypes.includes( MEDIA_TYPE_IMAGE ); const isVideo = isOneType && allowedTypes.includes( MEDIA_TYPE_VIDEO ); + const isAudio = isOneType && allowedTypes.includes( MEDIA_TYPE_AUDIO ); const isAnyType = isOneType && allowedTypes.includes( MEDIA_TYPE_ANY ); const isImageOrVideo = @@ -183,8 +185,19 @@ export class MediaUpload extends React.Component { } else { pickerTitle = __( 'Choose image or video' ); } + } else if ( isAudio ) { + if ( isReplacingMedia ) { + pickerTitle = __( 'Replace audio' ); + } else { + pickerTitle = __( 'Choose audio' ); + } } else if ( isAnyType ) { pickerTitle = __( 'Choose file' ); + if ( isReplacingMedia ) { + pickerTitle = __( 'Replace file' ); + } else { + pickerTitle = __( 'Choose file' ); + } } const getMediaOptions = () => ( From b7965fd5b06c5d820cff82a437c8936e4cf4736e Mon Sep 17 00:00:00 2001 From: eToledo Date: Tue, 1 Dec 2020 10:31:31 +0100 Subject: [PATCH 03/12] Add handling of file uploads and replace --- .../block-library/src/audio/edit.native.js | 158 ++++++++++-------- 1 file changed, 84 insertions(+), 74 deletions(-) diff --git a/packages/block-library/src/audio/edit.native.js b/packages/block-library/src/audio/edit.native.js index 3d32215d07f802..ea27f41ee253cf 100644 --- a/packages/block-library/src/audio/edit.native.js +++ b/packages/block-library/src/audio/edit.native.js @@ -7,68 +7,48 @@ import { Text } from 'react-native'; * WordPress dependencies */ import { View } from '@wordpress/primitives'; -import { getBlobByURL, isBlobURL } from '@wordpress/blob'; import { PanelBody, SelectControl, ToggleControl, withNotices, + ToolbarButton, + ToolbarGroup, } from '@wordpress/components'; import { BlockControls, BlockIcon, InspectorControls, MediaPlaceholder, + MediaUpload, + MediaUploadProgress, RichText, } from '@wordpress/block-editor'; -import { useEffect } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; -import { useSelect } from '@wordpress/data'; -import { audio as icon } from '@wordpress/icons'; +import { audio as icon, replace } from '@wordpress/icons'; import { createBlock } from '@wordpress/blocks'; -/** - * Internal dependencies - */ -import { createUpgradedEmbedBlock } from '../embed/util'; - const ALLOWED_MEDIA_TYPES = [ 'audio' ]; function AudioEdit( { attributes, noticeOperations, setAttributes, - onReplace, isSelected, noticeUI, insertBlocksAfter, onFocus, } ) { const { id, autoplay, caption, loop, preload, src } = attributes; - const mediaUpload = useSelect( ( select ) => { - const { getSettings } = select( 'core/block-editor' ); - return getSettings().mediaUpload; - }, [] ); - useEffect( () => { - if ( ! id && isBlobURL( src ) ) { - const file = getBlobByURL( src ); + const onFileChange = ( { mediaId, mediaUrl } ) => { + setAttributes( { id: mediaId, src: mediaUrl } ); + }; - if ( file ) { - mediaUpload( { - filesList: [ file ], - onFileChange: ( [ { id: mediaId, url } ] ) => { - setAttributes( { id: mediaId, src: url } ); - }, - onError: ( e ) => { - setAttributes( { src: undefined, id: undefined } ); - noticeOperations.createErrorNotice( e ); - }, - allowedTypes: ALLOWED_MEDIA_TYPES, - } ); - } - } - }, [] ); + const onError = () => { + // TODO: Set up error state + setAttributes( { src: undefined, id: undefined } ); + }; function toggleAttribute( attribute ) { return ( newValue ) => { @@ -76,20 +56,8 @@ function AudioEdit( { }; } - function onSelectURL( newSrc ) { - // Set the block's src from the edit component's state, and switch off - // the editing UI. - if ( newSrc !== src ) { - // Check if there's an embed block that handles this URL. - const embedBlock = createUpgradedEmbedBlock( { - attributes: { url: newSrc }, - } ); - if ( undefined !== embedBlock ) { - onReplace( embedBlock ); - return; - } - setAttributes( { src: newSrc, id: undefined } ); - } + function onSelectURL() { + // TODO: Set up add audio from URL flow } function onUploadError( message ) { @@ -136,19 +104,70 @@ function AudioEdit( { ); } + function getBlockControls( open ) { + return ( + + + + + + ); + } + + function getBlockUI( open, getMediaOptions ) { + return ( + { + return ( + + { getBlockControls( open ) } + { getMediaOptions() } + + ⏯ Audio Player goes here.{ ' ' } + { isUploadInProgress && 'Uploading...' } + { isUploadFailed && 'ERROR' } + + { ( ! RichText.isEmpty( caption ) || + isSelected ) && ( + + setAttributes( { caption: value } ) + } + inlineToolbar + __unstableOnSplitAtEnd={ () => + insertBlocksAfter( + createBlock( 'core/paragraph' ) + ) + } + /> + ) } + + ); + } } + /> + ); + } + return ( <> - { /* - - */ } - - ⏯ Audio Player goes here - { ( ! RichText.isEmpty( caption ) || isSelected ) && ( - - setAttributes( { caption: value } ) - } - inlineToolbar - __unstableOnSplitAtEnd={ () => - insertBlocksAfter( createBlock( 'core/paragraph' ) ) - } - /> - ) } - + { + return getBlockUI( open, getMediaOptions ); + } } + /> ); } From f2ccb183b61d3c96bdbb4d80ba685cef4ffaadc6 Mon Sep 17 00:00:00 2001 From: eToledo Date: Tue, 1 Dec 2020 11:48:27 +0100 Subject: [PATCH 04/12] WPMediaLibrary support for Audio block --- .../src/components/media-upload/index.native.js | 7 ++++++- packages/block-library/src/audio/edit.native.js | 12 +++--------- .../ios/GutenbergDemo/GutenbergViewController.swift | 4 ++-- 3 files changed, 11 insertions(+), 12 deletions(-) diff --git a/packages/block-editor/src/components/media-upload/index.native.js b/packages/block-editor/src/components/media-upload/index.native.js index 1e015167268d7f..86db9ecb0e1116 100644 --- a/packages/block-editor/src/components/media-upload/index.native.js +++ b/packages/block-editor/src/components/media-upload/index.native.js @@ -88,7 +88,12 @@ export class MediaUpload extends React.Component { id: mediaSources.siteMediaLibrary, value: mediaSources.siteMediaLibrary, label: __( 'WordPress Media Library' ), - types: [ MEDIA_TYPE_IMAGE, MEDIA_TYPE_VIDEO, MEDIA_TYPE_ANY ], + types: [ + MEDIA_TYPE_IMAGE, + MEDIA_TYPE_VIDEO, + MEDIA_TYPE_AUDIO, + MEDIA_TYPE_ANY, + ], icon: wordpress, mediaLibrary: true, }; diff --git a/packages/block-library/src/audio/edit.native.js b/packages/block-library/src/audio/edit.native.js index ea27f41ee253cf..2e2b2b7ac86020 100644 --- a/packages/block-library/src/audio/edit.native.js +++ b/packages/block-library/src/audio/edit.native.js @@ -123,15 +123,9 @@ function AudioEdit( { { return ( diff --git a/packages/react-native-editor/ios/GutenbergDemo/GutenbergViewController.swift b/packages/react-native-editor/ios/GutenbergDemo/GutenbergViewController.swift index 06ba6a6704bb32..9eef7370bbaa27 100644 --- a/packages/react-native-editor/ios/GutenbergDemo/GutenbergViewController.swift +++ b/packages/react-native-editor/ios/GutenbergDemo/GutenbergViewController.swift @@ -102,8 +102,8 @@ extension GutenbergViewController: GutenbergBridgeDelegate { } case .other, .any: callback([MediaInfo(id: 3, url: "https://wordpress.org/latest.zip", type: "zip", caption: "WordPress latest version", title: "WordPress.zip")]) - default: - break + case .audio: + callback([MediaInfo(id: 5, url: "https://cldup.com/59IrU0WJtq.mp3", type: "audio", caption: "Summer presto")]) } case .deviceLibrary: print("Gutenberg did request a device media picker, opening the device picker") From 2a02b83e2bfcf933382a1ad086a55fa8f96e2497 Mon Sep 17 00:00:00 2001 From: eToledo Date: Tue, 1 Dec 2020 15:50:47 +0100 Subject: [PATCH 05/12] Avoid removing media info on error state --- packages/block-library/src/audio/edit.native.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/audio/edit.native.js b/packages/block-library/src/audio/edit.native.js index 2e2b2b7ac86020..f6d5e13efa93ba 100644 --- a/packages/block-library/src/audio/edit.native.js +++ b/packages/block-library/src/audio/edit.native.js @@ -47,7 +47,7 @@ function AudioEdit( { const onError = () => { // TODO: Set up error state - setAttributes( { src: undefined, id: undefined } ); + onUploadError( __( "Error" ) ); }; function toggleAttribute( attribute ) { From 276b07dbfb48f3b7e1f7e57cfe572fa05754916c Mon Sep 17 00:00:00 2001 From: eToledo Date: Tue, 1 Dec 2020 15:51:47 +0100 Subject: [PATCH 06/12] Linting --- packages/block-library/src/audio/edit.native.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/audio/edit.native.js b/packages/block-library/src/audio/edit.native.js index f6d5e13efa93ba..f0ea2aaf000807 100644 --- a/packages/block-library/src/audio/edit.native.js +++ b/packages/block-library/src/audio/edit.native.js @@ -47,7 +47,7 @@ function AudioEdit( { const onError = () => { // TODO: Set up error state - onUploadError( __( "Error" ) ); + onUploadError( __( 'Error' ) ); }; function toggleAttribute( attribute ) { From 8a8b5500eff983e6e5fc0989166b7799de11721d Mon Sep 17 00:00:00 2001 From: Joel Dean Date: Wed, 9 Dec 2020 14:35:17 -0500 Subject: [PATCH 07/12] Added an AUDIO file to the test requestMediaPickFromMediaLibrary func --- .../app/src/main/java/com/gutenberg/MainApplication.java | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/react-native-editor/android/app/src/main/java/com/gutenberg/MainApplication.java b/packages/react-native-editor/android/app/src/main/java/com/gutenberg/MainApplication.java index 628feb8b8b6dbb..35e5e4d5b810d2 100644 --- a/packages/react-native-editor/android/app/src/main/java/com/gutenberg/MainApplication.java +++ b/packages/react-native-editor/android/app/src/main/java/com/gutenberg/MainApplication.java @@ -79,11 +79,14 @@ public void requestMediaPickFromMediaLibrary(MediaSelectedCallback mediaSelected break; case VIDEO: rnMediaList.add(new Media(2, "https://i.cloudup.com/YtZFJbuQCE.mov", "video", "Cloudup", "")); + break; case ANY: case OTHER: rnMediaList.add(new Media(3, "https://wordpress.org/latest.zip", "zip", "WordPress latest version", "WordPress.zip")); break; - + case AUDIO: + rnMediaList.add(new Media(4, "https://cldup.com/59IrU0WJtq.mp3", "audio", "Summer presto", "")); + break; } mediaSelectedCallback.onMediaFileSelected(rnMediaList); } From 9e03e632c3b5eaecb87e20815989d73abab45ebc Mon Sep 17 00:00:00 2001 From: Joel Dean Date: Wed, 9 Dec 2020 14:37:05 -0500 Subject: [PATCH 08/12] Fixed typo in ToolbarButton of Audio Block. --- packages/block-library/src/audio/edit.native.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/audio/edit.native.js b/packages/block-library/src/audio/edit.native.js index f0ea2aaf000807..75ca2cf952d9c0 100644 --- a/packages/block-library/src/audio/edit.native.js +++ b/packages/block-library/src/audio/edit.native.js @@ -109,7 +109,7 @@ function AudioEdit( { From 349aa19ec0624a4ab8f729baead737928befb92c Mon Sep 17 00:00:00 2001 From: Joel Dean Date: Wed, 9 Dec 2020 14:38:06 -0500 Subject: [PATCH 09/12] Removed auto help behavior present on web that's not used on mobile. --- packages/block-library/src/audio/edit.native.js | 9 --------- 1 file changed, 9 deletions(-) diff --git a/packages/block-library/src/audio/edit.native.js b/packages/block-library/src/audio/edit.native.js index 75ca2cf952d9c0..d8ee2f45f8b654 100644 --- a/packages/block-library/src/audio/edit.native.js +++ b/packages/block-library/src/audio/edit.native.js @@ -65,14 +65,6 @@ function AudioEdit( { noticeOperations.createErrorNotice( message ); } - function getAutoplayHelp( checked ) { - return checked - ? __( - 'Note: Autoplaying audio may cause usability issues for some visitors.' - ) - : null; - } - // const { setAttributes, isSelected, noticeUI } = this.props; function onSelectAudio( media ) { if ( ! media || ! media.url ) { @@ -168,7 +160,6 @@ function AudioEdit( { label={ __( 'Autoplay' ) } onChange={ toggleAttribute( 'autoplay' ) } checked={ autoplay } - help={ getAutoplayHelp } /> Date: Wed, 16 Dec 2020 00:46:29 -0500 Subject: [PATCH 10/12] [Android] Wired the click of the Audio Media Library button. --- .../WPAndroidGlue/WPAndroidGlueCode.java | 27 +++++++++++++------ 1 file changed, 19 insertions(+), 8 deletions(-) diff --git a/packages/react-native-bridge/android/src/main/java/org/wordpress/mobile/WPAndroidGlue/WPAndroidGlueCode.java b/packages/react-native-bridge/android/src/main/java/org/wordpress/mobile/WPAndroidGlue/WPAndroidGlueCode.java index 9c1de6ab757722..1c4246f8c05b7a 100644 --- a/packages/react-native-bridge/android/src/main/java/org/wordpress/mobile/WPAndroidGlue/WPAndroidGlueCode.java +++ b/packages/react-native-bridge/android/src/main/java/org/wordpress/mobile/WPAndroidGlue/WPAndroidGlueCode.java @@ -139,6 +139,7 @@ public interface OnMediaLibraryButtonListener { void onMediaLibraryVideoButtonClicked(boolean allowMultipleSelection); void onMediaLibraryMediaButtonClicked(boolean allowMultipleSelection); void onMediaLibraryFileButtonClicked(boolean allowMultipleSelection); + void onMediaLibraryAudioButtonClicked(boolean allowMultipleSelection); void onUploadPhotoButtonClicked(boolean allowMultipleSelection); void onCapturePhotoButtonClicked(); void onUploadVideoButtonClicked(boolean allowMultipleSelection); @@ -239,14 +240,24 @@ public void requestMediaPickFromMediaLibrary(MediaSelectedCallback mediaSelected mMediaPickedByUserOnBlock = true; mAppendsMultipleSelectedToSiblingBlocks = !allowMultipleSelection; mMediaSelectedCallback = mediaSelectedCallback; - if (mediaType == MediaType.IMAGE) { - mOnMediaLibraryButtonListener.onMediaLibraryImageButtonClicked(allowMultipleSelection); - } else if (mediaType == MediaType.VIDEO) { - mOnMediaLibraryButtonListener.onMediaLibraryVideoButtonClicked(allowMultipleSelection); - } else if (mediaType == MediaType.MEDIA) { - mOnMediaLibraryButtonListener.onMediaLibraryMediaButtonClicked(allowMultipleSelection); - } else if (mediaType == MediaType.ANY) { - mOnMediaLibraryButtonListener.onMediaLibraryFileButtonClicked(allowMultipleSelection); + switch (mediaType) { + case IMAGE: + mOnMediaLibraryButtonListener.onMediaLibraryImageButtonClicked(allowMultipleSelection); + break; + case VIDEO: + mOnMediaLibraryButtonListener.onMediaLibraryVideoButtonClicked(allowMultipleSelection); + break; + case MEDIA: + mOnMediaLibraryButtonListener.onMediaLibraryMediaButtonClicked(allowMultipleSelection); + break; + case AUDIO: + mOnMediaLibraryButtonListener.onMediaLibraryAudioButtonClicked(allowMultipleSelection); + break; + case ANY: + mOnMediaLibraryButtonListener.onMediaLibraryFileButtonClicked(allowMultipleSelection); + break; + case OTHER: + break; } } From a18b8ac741873f56e0313ef6547985d686f7b6c0 Mon Sep 17 00:00:00 2001 From: Joel Dean Date: Wed, 16 Dec 2020 01:54:55 -0500 Subject: [PATCH 11/12] Added Audio media options for choosing audio file locally. --- .../WPAndroidGlue/WPAndroidGlueCode.java | 22 ++++++++++++++----- 1 file changed, 16 insertions(+), 6 deletions(-) diff --git a/packages/react-native-bridge/android/src/main/java/org/wordpress/mobile/WPAndroidGlue/WPAndroidGlueCode.java b/packages/react-native-bridge/android/src/main/java/org/wordpress/mobile/WPAndroidGlue/WPAndroidGlueCode.java index 1c4246f8c05b7a..b1d5ba57ea0920 100644 --- a/packages/react-native-bridge/android/src/main/java/org/wordpress/mobile/WPAndroidGlue/WPAndroidGlueCode.java +++ b/packages/react-native-bridge/android/src/main/java/org/wordpress/mobile/WPAndroidGlue/WPAndroidGlueCode.java @@ -150,6 +150,7 @@ public interface OnMediaLibraryButtonListener { void onCancelUploadForMediaDueToDeletedBlock(int mediaId); ArrayList onGetOtherMediaImageOptions(); ArrayList onGetOtherMediaFileOptions(); + ArrayList onGetOtherMediaAudioFileOptions(); void onOtherMediaButtonClicked(String mediaSource, boolean allowMultipleSelection); } @@ -364,12 +365,21 @@ public void editorDidEmitLog(String message, LogLevel logLevel) { @Override public void getOtherMediaPickerOptions(OtherMediaOptionsReceivedCallback otherMediaOptionsReceivedCallback, MediaType mediaType) { - if (mediaType == MediaType.IMAGE || mediaType == MediaType.MEDIA) { - ArrayList otherMediaImageOptions = mOnMediaLibraryButtonListener.onGetOtherMediaImageOptions(); - otherMediaOptionsReceivedCallback.onOtherMediaOptionsReceived(otherMediaImageOptions); - } else if (mediaType == MediaType.ANY) { - ArrayList otherMediaFileOptions = mOnMediaLibraryButtonListener.onGetOtherMediaFileOptions(); - otherMediaOptionsReceivedCallback.onOtherMediaOptionsReceived(otherMediaFileOptions); + switch (mediaType){ + case IMAGE: + case MEDIA: + ArrayList otherMediaImageOptions = mOnMediaLibraryButtonListener.onGetOtherMediaImageOptions(); + otherMediaOptionsReceivedCallback.onOtherMediaOptionsReceived(otherMediaImageOptions); + break; + case ANY: + ArrayList otherMediaFileOptions = mOnMediaLibraryButtonListener.onGetOtherMediaFileOptions(); + otherMediaOptionsReceivedCallback.onOtherMediaOptionsReceived(otherMediaFileOptions); + break; + case AUDIO: + ArrayList otherMediaAudioFileOptions = mOnMediaLibraryButtonListener.onGetOtherMediaAudioFileOptions(); + otherMediaOptionsReceivedCallback.onOtherMediaOptionsReceived(otherMediaAudioFileOptions); + break; + } } From af6cb99426a3471113315aa2b6a2cdcb8d1bfb3c Mon Sep 17 00:00:00 2001 From: Ceyhun Ozugur Date: Thu, 17 Dec 2020 09:54:05 +0100 Subject: [PATCH 12/12] [RNMobile] Audio Block: Proper caption field (#27689) --- .../block-library/src/audio/edit.native.js | 148 ++++++++++-------- 1 file changed, 85 insertions(+), 63 deletions(-) diff --git a/packages/block-library/src/audio/edit.native.js b/packages/block-library/src/audio/edit.native.js index d8ee2f45f8b654..3e66485f936991 100644 --- a/packages/block-library/src/audio/edit.native.js +++ b/packages/block-library/src/audio/edit.native.js @@ -1,7 +1,8 @@ /** * External dependencies */ -import { Text } from 'react-native'; +import { Text, TouchableWithoutFeedback } from 'react-native'; +import { isEmpty } from 'lodash'; /** * WordPress dependencies @@ -16,17 +17,17 @@ import { ToolbarGroup, } from '@wordpress/components'; import { + BlockCaption, BlockControls, BlockIcon, InspectorControls, MediaPlaceholder, MediaUpload, MediaUploadProgress, - RichText, } from '@wordpress/block-editor'; -import { __ } from '@wordpress/i18n'; +import { __, sprintf } from '@wordpress/i18n'; import { audio as icon, replace } from '@wordpress/icons'; -import { createBlock } from '@wordpress/blocks'; +import { useState } from '@wordpress/element'; const ALLOWED_MEDIA_TYPES = [ 'audio' ]; @@ -38,8 +39,12 @@ function AudioEdit( { noticeUI, insertBlocksAfter, onFocus, + onBlur, + clientId, } ) { - const { id, autoplay, caption, loop, preload, src } = attributes; + const { id, autoplay, loop, preload, src } = attributes; + + const [ isCaptionSelected, setIsCaptionSelected ] = useState( false ); const onFileChange = ( { mediaId, mediaUrl } ) => { setAttributes( { id: mediaId, src: mediaUrl } ); @@ -78,6 +83,16 @@ function AudioEdit( { setAttributes( { src: media.url, id: media.id } ); } + function onAudioPress() { + setIsCaptionSelected( false ); + } + + function onFocusCaption() { + if ( ! isCaptionSelected ) { + setIsCaptionSelected( true ); + } + } + if ( ! src ) { return ( @@ -121,30 +136,13 @@ function AudioEdit( { renderContent={ ( { isUploadInProgress, isUploadFailed } ) => { return ( - { getBlockControls( open ) } + { ! isCaptionSelected && getBlockControls( open ) } { getMediaOptions() } ⏯ Audio Player goes here.{ ' ' } { isUploadInProgress && 'Uploading...' } { isUploadFailed && 'ERROR' } - { ( ! RichText.isEmpty( caption ) || - isSelected ) && ( - - setAttributes( { caption: value } ) - } - inlineToolbar - __unstableOnSplitAtEnd={ () => - insertBlocksAfter( - createBlock( 'core/paragraph' ) - ) - } - /> - ) } ); } } @@ -153,46 +151,70 @@ function AudioEdit( { } return ( - <> - - - - - - setAttributes( { - preload: value || undefined, - } ) - } - options={ [ - { value: '', label: __( 'Browser default' ) }, - { value: 'auto', label: __( 'Auto' ) }, - { value: 'metadata', label: __( 'Metadata' ) }, - { value: 'none', label: __( 'None' ) }, - ] } - /> - - - { - return getBlockUI( open, getMediaOptions ); - } } - /> - + + + + + + + + setAttributes( { + preload: value || undefined, + } ) + } + options={ [ + { value: '', label: __( 'Browser default' ) }, + { value: 'auto', label: __( 'Auto' ) }, + { value: 'metadata', label: __( 'Metadata' ) }, + { value: 'none', label: __( 'None' ) }, + ] } + /> + + + { + return getBlockUI( open, getMediaOptions ); + } } + /> + + isEmpty( caption ) + ? /* translators: accessibility text. Empty Audio caption. */ + __( 'Audio caption. Empty' ) + : sprintf( + /* translators: accessibility text. %s: Audio caption. */ + __( 'Audio caption. %s' ), + caption + ) + } + clientId={ clientId } + isSelected={ isCaptionSelected } + onFocus={ onFocusCaption } + onBlur={ onBlur } + insertBlocksAfter={ insertBlocksAfter } + /> + + ); } export default withNotices( AudioEdit );