[iOS] Implement client-defined media options.

ios/gutenberg/GutenbergViewController.swift

@@ -64,8 +64,8 @@ extension GutenbergViewController: GutenbergBridgeDelegate {
         print("↳ HTML: \(html)")
     }
 
-    func gutenbergDidRequestMedia(from source: MediaPickerSource, filter: [MediaFilter]?, allowMultipleSelection: Bool, with callback: @escaping MediaPickerDidPickMediaCallback) {
-        guard let currentFilter = filter?.first else {
+    func gutenbergDidRequestMedia(from source: Gutenberg.MediaSource, filter: [Gutenberg.MediaType], allowMultipleSelection: Bool, with callback: @escaping MediaPickerDidPickMediaCallback) {
+        guard let currentFilter = filter.first else {
             return
         }
         switch source {
@@ -95,6 +95,7 @@ extension GutenbergViewController: GutenbergBridgeDelegate {
         case .deviceCamera:
             print("Gutenberg did request a device media picker, opening the camera picker")
             pickAndUpload(from: .camera, filter: currentFilter, callback: callback)
+        default: break
         }
     }
 
@@ -103,7 +104,7 @@ extension GutenbergViewController: GutenbergBridgeDelegate {
         callback(MediaInfo(id: id, url: url.absoluteString, type: "image"))
     }
 
-    func pickAndUpload(from source: UIImagePickerController.SourceType, filter: MediaFilter, callback: @escaping MediaPickerDidPickMediaCallback) {
+    func pickAndUpload(from source: UIImagePickerController.SourceType, filter: Gutenberg.MediaType, callback: @escaping MediaPickerDidPickMediaCallback) {
         mediaPickCoordinator = MediaPickCoordinator(presenter: self, filter: filter, callback: { (url) in
             guard let url = url, let mediaID = self.mediaUploadCoordinator.upload(url: url) else {
                 callback([MediaInfo(id: nil, url: nil, type: nil)])

ios/gutenberg/MediaPickCoordinator.swift

@@ -8,10 +8,10 @@ class MediaPickCoordinator: NSObject, UIImagePickerControllerDelegate, UINavigat
 
   private let presenter: UIViewController
   private let callback: (URL?) -> Void
-  private let filter: MediaFilter
+  private let filter: Gutenberg.MediaType
 
   init(presenter: UIViewController,
-       filter: MediaFilter,
+       filter: Gutenberg.MediaType,
        callback: @escaping (URL?) -> Void) {
       self.presenter = presenter
       self.callback = callback

react-native-gutenberg-bridge/ios/Gutenberg.swift

@@ -71,6 +71,7 @@ public class Gutenberg: NSObject {
         self.dataSource = dataSource
         self.extraModules = extraModules
         super.init()
+        bridgeModule.dataSource = dataSource
         logThreshold = isPackagerRunning ? .trace : .error
     }
 
@@ -162,5 +163,41 @@ extension Gutenberg {
     public enum MediaType: String {
         case image
         case video
+        case audio
+        case other
+    }
+}
+
+extension Gutenberg.MediaType {
+    init(fromJSString rawValue: String) {
+        self = Gutenberg.MediaType(rawValue: rawValue) ?? .other
+    }
+}
+
+extension Gutenberg {
+    public struct MediaSource: Hashable {
+        /// The label string that will be shown to the user.
+        let label: String
+
+        /// A unique identifier of this media source option.
+        let id: String
+
+        /// The types of media this source can provide.
+        let types: Set<MediaType>
+
+        var jsRepresentation: [String: String] {
+            return [
+                "label": label,
+                "value": id,
+            ]
+        }
+    }
+}
+
+public extension Gutenberg.MediaSource {
+    public init(id: String, label: String, types: [Gutenberg.MediaType]) {
+        self.id = id
+        self.label = label
+        self.types = Set(types)
     }
 }

react-native-gutenberg-bridge/ios/GutenbergBridgeDataSource.swift

@@ -30,4 +30,13 @@ public protocol GutenbergBridgeDataSource: class {
     ///
     /// - Returns: Gutenberg related localization key value pairs for the current locale.
     func gutenbergTranslations() -> [String : [String]]?
+
+    /// Asks the delegate for a list of Media Sources to show on the Media Source Picker.
+    func gutenbergMediaSources() -> [Gutenberg.MediaSource]
+}
+
+public extension GutenbergBridgeDataSource {
+    func gutenbergMediaSources() -> [Gutenberg.MediaSource] {
+        return []
+    }
 }

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

@@ -11,20 +11,23 @@ public struct MediaInfo {
 }
 
 public typealias MediaPickerDidPickMediaCallback = (_ media: [MediaInfo]?) -> Void
-
 public typealias MediaImportCallback = (_ media: MediaInfo?) -> Void
 
-public enum MediaPickerSource: String {
-    case mediaLibrary = "SITE_MEDIA_LIBRARY"
-    case deviceLibrary = "DEVICE_MEDIA_LIBRARY"
-    case deviceCamera = "DEVICE_CAMERA"
-}
-
-public enum MediaFilter: String {
-    case image
-    case video
-    case audio
-    case other
+/// Declare internal Media Sources.
+/// Label and Type are not relevant since they are delcared on the JS side.
+/// Hopefully soon, this will need to be declared on the client side.
+extension Gutenberg.MediaSource {
+    public static let mediaLibrary = Gutenberg.MediaSource(id: "SITE_MEDIA_LIBRARY", label: "", types: [.image, .video])
+    public static let deviceLibrary = Gutenberg.MediaSource(id: "DEVICE_MEDIA_LIBRARY", label: "", types: [.image, .video])
+    public static let deviceCamera = Gutenberg.MediaSource(id: "DEVICE_CAMERA", label: "", types: [.image, .video])
+
+    static var registeredInternalSources: [Gutenberg.MediaSource] {
+        return [
+            .deviceCamera,
+            .deviceLibrary,
+            .mediaLibrary,
+        ]
+    }
 }
 
 /// Ref. https://github.com/facebook/react-native/blob/master/Libraries/polyfills/console.js#L376
@@ -77,7 +80,7 @@ public protocol GutenbergBridgeDelegate: class {
     ///     - source: the source from where the picker will get the media
     ///     - callback: A callback block to be called with an array of upload mediaIdentifiers and a placeholder images file url, use nil on both parameters to signal that the action was canceled.
     ///
-    func gutenbergDidRequestMedia(from source: MediaPickerSource, filter: [MediaFilter]?, allowMultipleSelection: Bool, with callback: @escaping MediaPickerDidPickMediaCallback)
+    func gutenbergDidRequestMedia(from source: Gutenberg.MediaSource, filter: [Gutenberg.MediaType], allowMultipleSelection: Bool, with callback: @escaping MediaPickerDidPickMediaCallback)
 
     /// Tells the delegate that gutenberg JS requested the import of media item based on the provided URL
     ///

react-native-gutenberg-bridge/ios/RNReactNativeGutenbergBridge.swift

@@ -1,8 +1,10 @@
 @objc (RNReactNativeGutenbergBridge)
 public class RNReactNativeGutenbergBridge: RCTEventEmitter {
     weak var delegate: GutenbergBridgeDelegate?
+    weak var dataSource: GutenbergBridgeDataSource?
     private var isJSLoading = true
     private var hasObservers = false
+
     // MARK: - Messaging methods
 
     @objc
@@ -14,13 +16,9 @@ public class RNReactNativeGutenbergBridge: RCTEventEmitter {
 
     @objc
     func requestMediaPickFrom(_ source: String, filter: [String]?, allowMultipleSelection: Bool, callback: @escaping RCTResponseSenderBlock) {
-        let mediaSource: MediaPickerSource = MediaPickerSource(rawValue: source) ?? .deviceLibrary
-        let mediaFilter: [MediaFilter]? = filter?.map({
-            if let type = MediaFilter(rawValue: $0) {
-                return type
-            }
-            return MediaFilter.other
-        })
+        let mediaSource = getMediaSource(withId: source)
+        let mediaFilter = getMediaTypes(from: filter)
+
         DispatchQueue.main.async {
             self.delegate?.gutenbergDidRequestMedia(from: mediaSource, filter: mediaFilter, allowMultipleSelection: allowMultipleSelection, with: { media in
                 guard let media = media else {
@@ -45,15 +43,25 @@ public class RNReactNativeGutenbergBridge: RCTEventEmitter {
             })
         }
     }
-    
+
     @objc
     func requestOtherMediaPickFrom(_ source: String, allowMultipleSelection: Bool, callback: @escaping RCTResponseSenderBlock) {
-        //TODO implement me
+        requestMediaPickFrom(source, filter: nil, allowMultipleSelection: allowMultipleSelection, callback: callback)
     }
-    
+
     @objc
     func getOtherMediaOptions(_ filter: [String]?, callback: @escaping RCTResponseSenderBlock) {
-        //TODO implement me
+        guard let dataSource = dataSource else {
+            return callback([])
+        }
+
+        let mediaSources = dataSource.gutenbergMediaSources()
+        let allowedTypes = getMediaTypes(from: filter)
+        let filteredSources = mediaSources.filter {
+            return $0.types.intersection(allowedTypes).isEmpty == false
+        }
+        let jsMediaSources = filteredSources.map { $0.jsRepresentation }
+        callback([jsMediaSources])
     }
 
     @objc
@@ -194,13 +202,21 @@ extension RNReactNativeGutenbergBridge {
 // MARK: - Helpers
 
 extension RNReactNativeGutenbergBridge {
-
     func optionalArray(from optionalString: String?) -> [String]? {
         guard let string = optionalString else {
             return nil
         }
         return [string]
     }
+
+    private func getMediaSource(withId mediaSourceID: String) -> Gutenberg.MediaSource {
+        let allMediaSources = Gutenberg.MediaSource.registeredInternalSources + (dataSource?.gutenbergMediaSources() ?? [])
+        return allMediaSources.first{ $0.id == mediaSourceID } ?? .deviceLibrary
+    }
+
+    private func getMediaTypes(from jsMediaTypes: [String]?) -> [Gutenberg.MediaType] {
+        return (jsMediaTypes ?? []).map { Gutenberg.MediaType(fromJSString: $0) }
+    }
 }
 
 extension RNReactNativeGutenbergBridge {