From b18fc2896968f70dbe52a265e88bfbac70a3eef5 Mon Sep 17 00:00:00 2001 From: etoledom Date: Wed, 25 Nov 2020 20:50:06 +0100 Subject: [PATCH] [RNMobile] Adding WPMediaLibrary source to File block (#26960) * Adding WPMediaLibrary source for File block * Implemented Android side of WPMediaLibrary source for File block * There's now a direct WP MediaPicker action for the ALL allowed type * set the value of "other" for the OTHER enum. * Update packages/react-native-editor/ios/GutenbergDemo/GutenbergViewController.swift Co-authored-by: Paul Von Schrottky * Changing MEDIA_TYPE_ALL to MEDIA_TYPE_ANY * When MEDIA_TYPE_ANY is passed the default device icon is shown. * Added a pickerTitle for the any type that represents the File block. * Change media picker option title to "Choose from device" Co-authored-by: Joel Dean Co-authored-by: Paul Von Schrottky --- .../src/components/index.native.js | 1 + .../components/media-upload/index.native.js | 10 ++++++++-- packages/block-library/src/file/edit.native.js | 5 +++-- .../GutenbergBridgeJS2Parent.java | 1 + .../WPAndroidGlue/WPAndroidGlueCode.java | 3 +++ .../react-native-bridge/ios/Gutenberg.swift | 1 + .../java/com/gutenberg/MainApplication.java | 18 +++++++++++++----- .../ios/DocumentsMediaSource.swift | 8 +++++--- .../GutenbergViewController.swift | 9 ++++++--- 9 files changed, 41 insertions(+), 15 deletions(-) diff --git a/packages/block-editor/src/components/index.native.js b/packages/block-editor/src/components/index.native.js index 2245d16a1511b..29a3b085c09ba 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_ANY, } from './media-upload'; export { default as MediaUploadProgress } from './media-upload-progress'; export { default as BlockMediaUpdateProgress } from './block-media-update-progress'; 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 d413171cd114b..d3fabd7423853 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_ANY = 'any'; export const OPTION_TAKE_VIDEO = __( 'Take a Video' ); export const OPTION_TAKE_PHOTO = __( 'Take a Photo' ); @@ -86,7 +87,7 @@ export class MediaUpload extends React.Component { id: mediaSources.siteMediaLibrary, value: mediaSources.siteMediaLibrary, label: __( 'WordPress Media Library' ), - types: [ MEDIA_TYPE_IMAGE, MEDIA_TYPE_VIDEO ], + types: [ MEDIA_TYPE_IMAGE, MEDIA_TYPE_VIDEO, MEDIA_TYPE_ANY ], icon: wordpress, mediaLibrary: true, }; @@ -129,8 +130,9 @@ 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 isAnyType = isOneType && allowedTypes.includes( MEDIA_TYPE_ANY ); - if ( isImage || ! isOneType ) { + if ( isImage || ! isOneType || isAnyType ) { return image; } else if ( isVideo ) { return video; @@ -164,6 +166,8 @@ 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 isAnyType = isOneType && allowedTypes.includes( MEDIA_TYPE_ANY ); + const isImageOrVideo = allowedTypes.length === 2 && allowedTypes.includes( MEDIA_TYPE_IMAGE ) && @@ -190,6 +194,8 @@ export class MediaUpload extends React.Component { } else { pickerTitle = __( 'Choose image or video' ); } + } else if ( isAnyType ) { + pickerTitle = __( 'Choose file' ); } const getMediaOptions = () => ( diff --git a/packages/block-library/src/file/edit.native.js b/packages/block-library/src/file/edit.native.js index 9f175111f0aea..df1c77a22000c 100644 --- a/packages/block-library/src/file/edit.native.js +++ b/packages/block-library/src/file/edit.native.js @@ -16,6 +16,7 @@ import { BlockControls, MediaUpload, InspectorControls, + MEDIA_TYPE_ANY, } from '@wordpress/block-editor'; import { ToolbarButton, @@ -414,14 +415,14 @@ export class FileEdit extends Component { } } onSelect={ this.onSelectFile } onFocus={ this.props.onFocus } - allowedTypes={ [ 'other' ] } + allowedTypes={ [ MEDIA_TYPE_ANY ] } /> ); } return ( { diff --git a/packages/react-native-bridge/android/src/main/java/org/wordpress/mobile/ReactNativeGutenbergBridge/GutenbergBridgeJS2Parent.java b/packages/react-native-bridge/android/src/main/java/org/wordpress/mobile/ReactNativeGutenbergBridge/GutenbergBridgeJS2Parent.java index cd9dcc79ed2b9..f912598e0f498 100644 --- a/packages/react-native-bridge/android/src/main/java/org/wordpress/mobile/ReactNativeGutenbergBridge/GutenbergBridgeJS2Parent.java +++ b/packages/react-native-bridge/android/src/main/java/org/wordpress/mobile/ReactNativeGutenbergBridge/GutenbergBridgeJS2Parent.java @@ -83,6 +83,7 @@ enum MediaType { VIDEO("video"), MEDIA("media"), AUDIO("audio"), + ANY("any"), OTHER("other"); String name; 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 637ce489ea604..b523510db89c4 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 @@ -138,6 +138,7 @@ public interface OnMediaLibraryButtonListener { void onMediaLibraryImageButtonClicked(boolean allowMultipleSelection); void onMediaLibraryVideoButtonClicked(boolean allowMultipleSelection); void onMediaLibraryMediaButtonClicked(boolean allowMultipleSelection); + void onMediaLibraryFileButtonClicked(boolean allowMultipleSelection); void onUploadPhotoButtonClicked(boolean allowMultipleSelection); void onCapturePhotoButtonClicked(); void onUploadVideoButtonClicked(boolean allowMultipleSelection); @@ -244,6 +245,8 @@ public void requestMediaPickFromMediaLibrary(MediaSelectedCallback mediaSelected mOnMediaLibraryButtonListener.onMediaLibraryVideoButtonClicked(allowMultipleSelection); } else if (mediaType == MediaType.MEDIA) { mOnMediaLibraryButtonListener.onMediaLibraryMediaButtonClicked(allowMultipleSelection); + } else if (mediaType == MediaType.ANY) { + mOnMediaLibraryButtonListener.onMediaLibraryFileButtonClicked(allowMultipleSelection); } } diff --git a/packages/react-native-bridge/ios/Gutenberg.swift b/packages/react-native-bridge/ios/Gutenberg.swift index 7a194e53e31a5..b52699d7ce921 100644 --- a/packages/react-native-bridge/ios/Gutenberg.swift +++ b/packages/react-native-bridge/ios/Gutenberg.swift @@ -258,6 +258,7 @@ extension Gutenberg { case video case audio case other + case any } } 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 3c5fa9517cb14..628feb8b8b6db 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 @@ -72,10 +72,18 @@ public void requestMediaPickFromDeviceLibrary(MediaSelectedCallback mediaSelecte @Override public void requestMediaPickFromMediaLibrary(MediaSelectedCallback mediaSelectedCallback, Boolean allowMultipleSelection, MediaType mediaType) { List rnMediaList = new ArrayList<>(); - if (mediaType == MediaType.IMAGE) { - rnMediaList.add(new Media(1, "https://cldup.com/cXyG__fTLN.jpg", "image", "Mountain","")); - } else if (mediaType == MediaType.VIDEO) { - rnMediaList.add(new Media(2, "https://i.cloudup.com/YtZFJbuQCE.mov", "video", "Cloudup","" )); + + switch (mediaType) { + case IMAGE: + rnMediaList.add(new Media(1, "https://cldup.com/cXyG__fTLN.jpg", "image", "Mountain", "")); + break; + case VIDEO: + rnMediaList.add(new Media(2, "https://i.cloudup.com/YtZFJbuQCE.mov", "video", "Cloudup", "")); + case ANY: + case OTHER: + rnMediaList.add(new Media(3, "https://wordpress.org/latest.zip", "zip", "WordPress latest version", "WordPress.zip")); + break; + } mediaSelectedCallback.onMediaFileSelected(rnMediaList); } @@ -111,7 +119,7 @@ public void editorDidAutosave() { @Override public void getOtherMediaPickerOptions(OtherMediaOptionsReceivedCallback otherMediaOptionsReceivedCallback, MediaType mediaType) { - if (mediaType == MediaType.OTHER) { + if (mediaType == MediaType.ANY) { ArrayList mediaOptions = new ArrayList<>(); mediaOptions.add(new MediaOption("1", "Choose from device")); otherMediaOptionsReceivedCallback.onOtherMediaOptionsReceived(mediaOptions); diff --git a/packages/react-native-editor/ios/DocumentsMediaSource.swift b/packages/react-native-editor/ios/DocumentsMediaSource.swift index 5e352ea9b68c6..5914cf65e0134 100644 --- a/packages/react-native-editor/ios/DocumentsMediaSource.swift +++ b/packages/react-native-editor/ios/DocumentsMediaSource.swift @@ -65,8 +65,10 @@ extension Gutenberg.MediaType { return String(kUTTypeMovie) case .audio: return String(kUTTypeAudio) - case .other: - return String(kUTTypeItem) - } + case .any: + return String(kUTTypeItem) + case .other: + return nil + } } } diff --git a/packages/react-native-editor/ios/GutenbergDemo/GutenbergViewController.swift b/packages/react-native-editor/ios/GutenbergDemo/GutenbergViewController.swift index 3f393e60b329d..bb1ee8618f2e9 100644 --- a/packages/react-native-editor/ios/GutenbergDemo/GutenbergViewController.swift +++ b/packages/react-native-editor/ios/GutenbergDemo/GutenbergViewController.swift @@ -100,6 +100,8 @@ extension GutenbergViewController: GutenbergBridgeDelegate { } else { callback([MediaInfo(id: 2, url: "https://i.cloudup.com/YtZFJbuQCE.mov", type: "video", caption: "Cloudup")]) } + case .other, .any: + callback([MediaInfo(id: 1, url: "https://wordpress.org/latest.zip", type: "zip", caption: "WordPress latest version", title: "WordPress.zip")]) default: break } @@ -110,7 +112,7 @@ extension GutenbergViewController: GutenbergBridgeDelegate { print("Gutenberg did request a device media picker, opening the camera picker") pickAndUpload(from: .camera, filter: currentFilter, callback: callback) - case .filesApp: + case .filesApp, .otherApps: pickAndUploadFromFilesApp(filter: currentFilter, callback: callback) default: break } @@ -311,12 +313,13 @@ extension GutenbergViewController: GutenbergBridgeDataSource { } func gutenbergMediaSources() -> [Gutenberg.MediaSource] { - return [.filesApp] + return [.filesApp, .otherApps] } } extension Gutenberg.MediaSource { - static let filesApp = Gutenberg.MediaSource(id: "files-app", label: "Pick a file", types: [.image, .video, .audio, .other]) + static let filesApp = Gutenberg.MediaSource(id: "files-app", label: "Choose from device", types: [.any]) + static let otherApps = Gutenberg.MediaSource(id: "other-apps", label: "Other Apps", types: [.image, .video, .audio, .other]) } //MARK: - Navigation bar