Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[RNMobile] Adding WPMediaLibrary source to File block #26960

Merged
merged 9 commits into from
Nov 25, 2020
Merged

[RNMobile] Adding WPMediaLibrary source to File block #26960

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
8c2cb69
Adding WPMediaLibrary source for File block
etoledom Nov 13, 2020
963396b
Implemented Android side of WPMediaLibrary source for File block
jd-alexander Nov 17, 2020
27ad72c
There's now a direct WP MediaPicker action for the ALL allowed type
jd-alexander Nov 18, 2020
6785a7e
set the value of "other" for the OTHER enum.
jd-alexander Nov 19, 2020
2d3ee1e
Update packages/react-native-editor/ios/GutenbergDemo/GutenbergViewCo…
etoledom Nov 19, 2020
db52e2a
Changing MEDIA_TYPE_ALL to MEDIA_TYPE_ANY
etoledom Nov 19, 2020
3d17fc7
When MEDIA_TYPE_ANY is passed the default device icon is shown.
jd-alexander Nov 24, 2020
5c104ce
Added a pickerTitle for the any type that represents the File block.
jd-alexander Nov 24, 2020
a932bfa
Change media picker option title to "Choose from device"
etoledom Nov 25, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/block-editor/src/components/index.native.js
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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