[RNMobile] Add metadata property to MediaInfo (#48994)

* Add metadata to MediaInfo (iOS) * Add metadata to MediaInfo (Android) * Add example metadata in demo app
WordPress · Mar 21, 2023 · c286242 · c286242 · github-actions · Mar 21, 2023
1 parent 04c579c
commit c286242
Show file tree

Hide file tree

Showing 7 changed files with 46 additions and 11 deletions.
diff --git a/packages/react-native-aztec/android/build.gradle b/packages/react-native-aztec/android/build.gradle
@@ -7,7 +7,7 @@ buildscript {
         robolectricVersion = '3.5.1'
         jUnitVersion = '4.12'
         jSoupVersion = '1.10.3'
-        wordpressUtilsVersion = '2.3.0'
+        wordpressUtilsVersion = '3.3.0'
         espressoVersion = '3.0.1'
         aztecVersion = 'v1.6.3'
     }

diff --git a/packages/react-native-bridge/android/react-native-bridge/build.gradle b/packages/react-native-bridge/android/react-native-bridge/build.gradle
@@ -60,7 +60,7 @@ dependencies {
     // For animated GIF support
     implementation 'com.facebook.fresco:animated-gif:2.0.0'
     implementation 'com.google.android.material:material:1.2.1'
-    implementation "org.wordpress:utils:2.3.0"
+    implementation "org.wordpress:utils:3.3.0"
 
     testImplementation "junit:junit:4.13"
 

diff --git a/...ct-native-bridge/src/main/java/org/wordpress/mobile/ReactNativeGutenbergBridge/RNMedia.kt b/...ct-native-bridge/src/main/java/org/wordpress/mobile/ReactNativeGutenbergBridge/RNMedia.kt
@@ -9,5 +9,6 @@ interface RNMedia {
     val caption: String
     val title: String
     val alt: String
+    val metadata: WritableMap
     fun toMap(): WritableMap
 }
diff --git a/...dge/android/react-native-bridge/src/main/java/org/wordpress/mobile/WPAndroidGlue/Media.kt b/...dge/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()
 ) : RNMedia {
     override fun toMap(): WritableMap = WritableNativeMap().apply {
         putInt("id", id)
@@ -24,6 +25,7 @@ data class Media(
         putString("caption", caption)
         putString("title", title)
         putString("alt", alt)
+        putMap("metadata", metadata)
     }
 
     companion object {
@@ -58,9 +60,11 @@ data class Media(
             mimeType: String?,
             caption: String?,
             title: String?,
+            alt: String?,
+            metadata: WritableNativeMap = WritableNativeMap()
         ): Media {
             val type = convertToType(mimeType)
-            return Media(id, url, type, caption ?: "", title ?: "")
+            return Media(id, url, type, caption ?: "", title ?: "", alt ?: "", metadata)
         }
     }
 }
diff --git a/packages/react-native-bridge/ios/GutenbergBridgeDelegate.swift b/packages/react-native-bridge/ios/GutenbergBridgeDelegate.swift
@@ -5,15 +5,34 @@ public struct MediaInfo: Encodable {
     public let title: String?
     public let caption: String?
     public let alt: String?
+    public let metadata: Encodable
 
-    public init(id: Int32?, url: String?, type: String?, caption: String? = nil, title: String? = nil, alt: String? = nil) {
+    private enum CodingKeys: String, CodingKey {
+        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) {
         self.id = id
         self.url = url
         self.type = type
         self.caption = caption
         self.title = title
         self.alt = alt
+        self.metadata = metadata ?? [:] as [String: String]
     }
+
+    public func encode (to encoder: Encoder) throws
+    {
+        var container = encoder.container (keyedBy: CodingKeys.self)
+        try container.encode (id, forKey: .id)
+        try container.encode (url, forKey: .url)
+        try container.encode (type, forKey: .type)
+        try container.encode (title, forKey: .title)
+        try container.encode (caption, forKey: .caption)
+        try container.encode (alt, forKey: .alt)
+        var metadataContainer = container.nestedUnkeyedContainer(forKey: .metadata)
+        try metadata.encode(to: metadataContainer.superEncoder())
+     }
 }
 
 /// Definition of capabilities to enable in the Block Editor

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
@@ -17,6 +17,7 @@
 import com.facebook.react.ReactInstanceManager;
 import com.facebook.react.bridge.Arguments;
 import com.facebook.react.bridge.ReadableMap;
+import com.facebook.react.bridge.WritableNativeMap;
 import com.reactnativecommunity.clipboard.ClipboardPackage;
 import com.reactnativecommunity.slider.ReactSliderPackage;
 import com.brentvatne.react.ReactVideoPackage;
@@ -44,6 +45,7 @@
 import com.swmansion.rnscreens.RNScreensPackage;
 import com.th3rdwave.safeareacontext.SafeAreaContextPackage;
 import org.reactnative.maskedview.RNCMaskedViewPackage;
+import org.wordpress.mobile.WPAndroidGlue.Media;
 import org.wordpress.mobile.WPAndroidGlue.MediaOption;
 
 import java.lang.reflect.InvocationTargetException;
@@ -82,20 +84,27 @@ public void requestMediaPickFromDeviceLibrary(MediaSelectedCallback mediaSelecte
             @Override
             public void requestMediaPickFromMediaLibrary(MediaSelectedCallback mediaSelectedCallback, Boolean allowMultipleSelection, MediaType mediaType) {
                 List<RNMedia> rnMediaList = new ArrayList<>();
+                WritableNativeMap emptyMetadata = new WritableNativeMap();
 
                 switch (mediaType) {
                     case IMAGE:
-                        rnMediaList.add(createRNMediaUsingMimeType(1, "https://cldup.com/cXyG__fTLN.jpg", "image", "Mountain", "", "A snow-capped mountain top in a cloudy sky with red-leafed trees in the foreground"));
+                        Media image = new Media(1, "https://cldup.com/cXyG__fTLN.jpg", "image", "Mountain", "", "A snow-capped mountain top in a cloudy sky with red-leafed trees in the foreground", emptyMetadata);
+                        rnMediaList.add(image);
                         break;
                     case VIDEO:
-                        rnMediaList.add(createRNMediaUsingMimeType(2, "https://i.cloudup.com/YtZFJbuQCE.mov", "video", "Cloudup", ""));
+                        WritableNativeMap metadata = new WritableNativeMap();
+                        metadata.putString("extraID", "AbCdE");
+                        Media video = new Media(2, "https://i.cloudup.com/YtZFJbuQCE.mov", "video", "Cloudup", "", "", metadata);
+                        rnMediaList.add(video);
                         break;
                     case ANY:
                     case OTHER:
-                        rnMediaList.add(createRNMediaUsingMimeType(3, "https://wordpress.org/latest.zip", "zip", "WordPress latest version", "WordPress.zip"));
+                        Media other = new Media(3, "https://wordpress.org/latest.zip", "zip", "WordPress latest version", "WordPress.zip", "", emptyMetadata);
+                        rnMediaList.add(other);
                         break;
                     case AUDIO:
-                        rnMediaList.add(createRNMediaUsingMimeType(5, "https://cldup.com/59IrU0WJtq.mp3", "audio", "Summer presto", ""));
+                        Media audio = new Media(5, "https://cldup.com/59IrU0WJtq.mp3", "audio", "Summer presto", "", "", emptyMetadata);
+                        rnMediaList.add(audio);
                         break;
                 }
                 mediaSelectedCallback.onMediaFileSelected(rnMediaList);
@@ -147,7 +156,8 @@ public void getOtherMediaPickerOptions(OtherMediaOptionsReceivedCallback otherMe
             public void requestMediaPickFrom(String mediaSource, MediaSelectedCallback mediaSelectedCallback, Boolean allowMultipleSelection) {
                 if (mediaSource.equals("1")) {
                     List<RNMedia> rnMediaList = new ArrayList<>();
-                    rnMediaList.add(createRNMediaUsingMimeType(1, "https://grad.illinois.edu/sites/default/files/pdfs/cvsamples.pdf", "other", "","cvsamples.pdf"));
+                    Media pdf = new Media(1, "https://grad.illinois.edu/sites/default/files/pdfs/cvsamples.pdf", "other", "","cvsamples.pdf", "", new WritableNativeMap());
+                    rnMediaList.add(pdf);
                     mediaSelectedCallback.onMediaFileSelected(rnMediaList);
                 }
             }

diff --git a/packages/react-native-editor/ios/GutenbergDemo/GutenbergViewController.swift b/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"]
+                    callback([MediaInfo(id: 2, url: "https://i.cloudup.com/YtZFJbuQCE.mov", type: "video", caption: "Cloudup", metadata: metadata)])
                 }
             case .other, .any:
                  callback([MediaInfo(id: 3, url: "https://wordpress.org/latest.zip", type: "zip", caption: "WordPress latest version", title: "WordPress.zip")])