[RNMobile] Add metadata property to `MediaInfo` #48994

fluiddot · 2023-03-10T15:42:17Z

What?

Add metadata property to MediaInfo class.

Why?

This new parameter will allow the editor's host to pass extra parameters of media items to blocks.

How?

Added the parameter on native files of the editor. The new parameter shouldn't impact the apps as a default value is defined.

Testing Instructions

Build and open the demo app.
Connect the demo app with the local Metro server.
Apply the following patch file:

diff --git forkSrcPrefix/packages/block-library/src/video/edit.native.js forkDstPrefix/packages/block-library/src/video/edit.native.js
index 99225ba5d5c569d19a158f5b1a203c68aa353c33..194c116ae81ad01c7430fc5a3dbd3bb9878f490b 100644
--- forkSrcPrefix/packages/block-library/src/video/edit.native.js
+++ forkDstPrefix/packages/block-library/src/video/edit.native.js
@@ -154,9 +154,10 @@ class VideoEdit extends Component {
 		this.setState( { isUploadInProgress: false } );
 	}
 
-	onSelectMediaUploadOption( { id, url } ) {
+	onSelectMediaUploadOption( { id, url, metadata } ) {
 		const { setAttributes } = this.props;
 		setAttributes( { id, src: url } );
+		console.log( { metadata } );
 	}
 
 	onSelectURL( url ) {

Add a Video block.
Select "WordPress Media Library" option.
Check the logs and observe that the metadata object was printed with the following data: {"metadata": {"extraID": "AbCdE"}}.

Testing Instructions for Keyboard

N/A

Screenshots or screencast

N/A

fluiddot · 2023-03-14T18:03:20Z

...bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/WPAndroidGlue/Media.kt

        ): Media {
            val type = convertToType(mimeType)
-            return Media(id, url, type, caption ?: "", title ?: "")
+            return Media(id, url, type, caption ?: "", title ?: "", alt ?: "", metadata)


We can replace this function because it was only used in the demo app and it has been updated in this PR. The function above is the one used in the Android app but remains unmodified.

fluiddot · 2023-03-14T18:04:01Z

packages/react-native-bridge/ios/GutenbergBridgeDelegate.swift

+        case id, url, type, title, caption, alt, metadata
+    }
+
+    public init(id: Int32?, url: String?, type: String?, caption: String? = nil, title: String? = nil, alt: String? = nil, metadata: Encodable? = nil) {


This change shouldn't impact the iOS app as we set a default value for the new parameter metadata.

fluiddot · 2023-03-14T18:04:28Z

...bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/WPAndroidGlue/Media.kt

@@ -15,7 +15,8 @@ data class Media(
    override val type: String,
    override val caption: String = "",
    override val title: String = "",
-    override val alt: String = ""
+    override val alt: String = "",
+    override val metadata: WritableMap = WritableNativeMap()


This change shouldn't impact the Android app as we set a default value for the new parameter metadata.

fluiddot · 2023-03-15T11:09:02Z

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

+                        WritableNativeMap metadata = new WritableNativeMap();
+                        metadata.putString("extraID", "AbCdE");


This metadata is used for testing purposes only.

fluiddot · 2023-03-15T11:09:07Z

packages/react-native-editor/ios/GutenbergDemo/GutenbergViewController.swift

@@ -97,7 +97,8 @@ extension GutenbergViewController: GutenbergBridgeDelegate {
                    callback([MediaInfo(id: 2, url: "https://i.cloudup.com/YtZFJbuQCE.mov", type: "video"),
                              MediaInfo(id: 4, url: "https://i.cloudup.com/YtZFJbuQCE.mov", type: "video")])
                } else {
-                    callback([MediaInfo(id: 2, url: "https://i.cloudup.com/YtZFJbuQCE.mov", type: "video", caption: "Cloudup")])
+                    let metadata = ["extraID": "AbCdE"]


This metadata is used for testing purposes only.

SiobhyB

LGTM! :) I confirmed that the logging worked as expected following the testing steps.

fluiddot added the Mobile App - i.e. Android or iOS Native mobile impl of the block editor. (Note: used in scripts, ping mobile folks to change) label Mar 10, 2023

fluiddot self-assigned this Mar 10, 2023

fluiddot force-pushed the rnmobile/add-media-info-metadata branch 2 times, most recently from 75d9a7e to 788daa0 Compare March 14, 2023 17:55

fluiddot commented Mar 14, 2023

View reviewed changes

fluiddot marked this pull request as ready for review March 14, 2023 18:09

fluiddot added the Mobile App - Automation Label used to initiate Mobile App PR Automation label Mar 14, 2023

wpmobilebot mentioned this pull request Mar 14, 2023

[RNMobile] Add metadata property to MediaInfo wordpress-mobile/gutenberg-mobile#5558

Merged

fluiddot added 2 commits March 15, 2023 11:55

Add metadata to MediaInfo (iOS)

96d8eac

Add metadata to MediaInfo (Android)

bcf173d

fluiddot force-pushed the rnmobile/add-media-info-metadata branch from 788daa0 to bcf173d Compare March 15, 2023 10:55

Add example metadata in demo app

0386da8

fluiddot commented Mar 15, 2023

View reviewed changes

fluiddot mentioned this pull request Mar 15, 2023

[RNMobile] Fix inserting item from media library Automattic/jetpack#29476

Merged

3 tasks

fluiddot requested review from jhnstn and SiobhyB March 15, 2023 12:52

SiobhyB approved these changes Mar 16, 2023

View reviewed changes

fluiddot merged commit c286242 into trunk Mar 21, 2023

fluiddot deleted the rnmobile/add-media-info-metadata branch March 21, 2023 12:17

github-actions bot added this to the Gutenberg 15.5 milestone Mar 21, 2023

twstokes mentioned this pull request Mar 22, 2023

Native Mobile current focus areas #38407

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[RNMobile] Add metadata property to `MediaInfo` #48994

[RNMobile] Add metadata property to `MediaInfo` #48994

fluiddot commented Mar 10, 2023 •

edited

Loading

fluiddot Mar 14, 2023 •

edited

Loading

fluiddot Mar 14, 2023

fluiddot Mar 14, 2023

fluiddot Mar 15, 2023

fluiddot Mar 15, 2023

SiobhyB left a comment

		WritableNativeMap metadata = new WritableNativeMap();
		metadata.putString("extraID", "AbCdE");

[RNMobile] Add metadata property to MediaInfo #48994

[RNMobile] Add metadata property to MediaInfo #48994

Conversation

fluiddot commented Mar 10, 2023 • edited Loading

What?

Why?

How?

Testing Instructions

Testing Instructions for Keyboard

Screenshots or screencast

fluiddot Mar 14, 2023 • edited Loading

Choose a reason for hiding this comment

fluiddot Mar 14, 2023

Choose a reason for hiding this comment

fluiddot Mar 14, 2023

Choose a reason for hiding this comment

fluiddot Mar 15, 2023

Choose a reason for hiding this comment

fluiddot Mar 15, 2023

Choose a reason for hiding this comment

SiobhyB left a comment

Choose a reason for hiding this comment

[RNMobile] Add metadata property to `MediaInfo` #48994

[RNMobile] Add metadata property to `MediaInfo` #48994

fluiddot commented Mar 10, 2023 •

edited

Loading

fluiddot Mar 14, 2023 •

edited

Loading