Skip to content

Commit

Permalink
[RNMobile] Adding WPMediaLibrary source to File block (#26960)
Browse files Browse the repository at this point in the history 
* 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 <[email protected]>

* 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 <[email protected]>
Co-authored-by: Paul Von Schrottky <[email protected]>
  • Loading branch information
@etoledom @jd-alexander @guarani
3 people authored Nov 25, 2020
1 parent 6f55369 commit b18fc28
Show file tree
Hide file tree
Showing 9 changed files with 41 additions and 15 deletions.
1 change: 1 addition & 0 deletions packages/block-editor/src/components/index.native.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
10 changes: 8 additions & 2 deletions packages/block-editor/src/components/media-upload/index.native.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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' );
Expand Down Expand Up @@ -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,
};
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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 ) &&
Expand All @@ -190,6 +194,8 @@ export class MediaUpload extends React.Component {
} else {
pickerTitle = __( 'Choose image or video' );
}
} else if ( isAnyType ) {
pickerTitle = __( 'Choose file' );
}

const getMediaOptions = () => (
Expand Down
5 changes: 3 additions & 2 deletions packages/block-library/src/file/edit.native.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import {
BlockControls,
MediaUpload,
InspectorControls,
MEDIA_TYPE_ANY,
} from '@wordpress/block-editor';
import {
ToolbarButton,
Expand Down Expand Up @@ -414,14 +415,14 @@ export class FileEdit extends Component {
} }
onSelect={ this.onSelectFile }
onFocus={ this.props.onFocus }
allowedTypes={ [ 'other' ] }
allowedTypes={ [ MEDIA_TYPE_ANY ] }
/>
);
}

return (
<MediaUpload
allowedTypes={ [ 'other' ] }
allowedTypes={ [ MEDIA_TYPE_ANY ] }
isReplacingMedia={ true }
onSelect={ this.onSelectFile }
render={ ( { open, getMediaOptions } ) => {
Expand Down
1 change: 1 addition & 0 deletions ...c/main/java/org/wordpress/mobile/ReactNativeGutenbergBridge/GutenbergBridgeJS2Parent.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,6 +83,7 @@ enum MediaType {
VIDEO("video"),
MEDIA("media"),
AUDIO("audio"),
ANY("any"),
OTHER("other");

String name;
Expand Down
3 changes: 3 additions & 0 deletions ...ve-bridge/android/src/main/java/org/wordpress/mobile/WPAndroidGlue/WPAndroidGlueCode.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -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);
}
}

Expand Down
1 change: 1 addition & 0 deletions packages/react-native-bridge/ios/Gutenberg.swift
View file
Original file line number Diff line number Diff line change
Expand Up @@ -258,6 +258,7 @@ extension Gutenberg {
case video
case audio
case other
case any
}
}

Expand Down
18 changes: 13 additions & 5 deletions packages/react-native-editor/android/app/src/main/java/com/gutenberg/MainApplication.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,10 +72,18 @@ public void requestMediaPickFromDeviceLibrary(MediaSelectedCallback mediaSelecte
@Override
public void requestMediaPickFromMediaLibrary(MediaSelectedCallback mediaSelectedCallback, Boolean allowMultipleSelection, MediaType mediaType) {
List<RNMedia> 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);
}
Expand Down Expand Up @@ -111,7 +119,7 @@ public void editorDidAutosave() {

@Override
public void getOtherMediaPickerOptions(OtherMediaOptionsReceivedCallback otherMediaOptionsReceivedCallback, MediaType mediaType) {
if (mediaType == MediaType.OTHER) {
if (mediaType == MediaType.ANY) {
ArrayList<MediaOption> mediaOptions = new ArrayList<>();
mediaOptions.add(new MediaOption("1", "Choose from device"));
otherMediaOptionsReceivedCallback.onOtherMediaOptionsReceived(mediaOptions);
Expand Down
8 changes: 5 additions & 3 deletions packages/react-native-editor/ios/DocumentsMediaSource.swift
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
}
}
}
9 changes: 6 additions & 3 deletions packages/react-native-editor/ios/GutenbergDemo/GutenbergViewController.swift
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
}
Expand All @@ -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
}
Expand Down Expand Up @@ -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
Expand Down

0 comments on commit b18fc28

Please sign in to comment.