Gallery screen

The Video Editor SDK includes the built-in gallery functionality where the user can pick any video or image and use it while making a video.

info

The Gallery screen is integrated by default.

Integration

To connect the Banuba Gallery screen and its functionality you need to add the dependency below to the Podfile:

banuba_sdk_version = '1.37.0'

pod 'BanubaVideoEditorGallerySDK', banuba_sdk_version #optional

If you are using Swift Package Manager, please, visit the SPM integration page.

Customizations

The gallery is used in the app when you want to select a photo or video stored on your phone. Implement GalleryConfiguration and set it to VideoEditorConfig.combinedGalleryConfiguration to customize the gallery screen.

Implement a custom gallery

Please, follow these steps to integrate your gallery into the SDK:

Step 1

Implement custom UIViewController inherited from GalleryViewController:

@objc open class GalleryViewController: UIViewController {
    open weak var delegate: GalleryViewControllerDelegate?
    open var configuration: GalleryConfiguration?
    open var selectionBehaviour: GallerySelectionBehaviour?
    /// Setups new album at gallery
    open func useAlbum(_ albumModel: AlbumModel) {}
    /// Cancel current export
    open func cancelExport() {}
    /// Retry export failed items
    open func retryExport() {}
}

• delegate- use this property to notify the Video Editor SDK about the user's actions in the custom gallery.

  Below there is a list of possible actions:

  // MARK: - GalleryViewControllerDelegate
  @objc public protocol GalleryViewControllerDelegate: AnyObject {
      /// Tells delegate object about starting asynchronous operations at the gallery.
      /// BanubaVideoEditorSDK showing full-screen spinner by this event. It can help to prevent unnecessary actions from a user.
      func galleryViewController(_ controller: GalleryViewController, didStartExportWith progressHandler: ProgressHandler)
      /// Tells delegate object about finishing asynchronous operations at the gallery
      func galleryViewController(_ controller: GalleryViewController, didEndExportWith error: Error?, hideProgressViewCompletion: @escaping () -> Void)
      /// Tells delegate object about the closing gallery.
      func galleryViewControllerDidClose(_ controller: GalleryViewController)
      /// Tells delegate object about completion picking gallery items.
      func galleryViewControllerDone(
          _ controller: GalleryViewController,
          withGalleryItems items: [GalleryItem]
      )
      /// Tells delegate object that he should present message.
      /// In BanubaVideoEditorSDK it presents popup message.
      func galleryViewController(
          _ controller: GalleryViewController,
          presentMessage message: String
      )
  }

• configuration - contains the UI configuration. All the details you can find here;

• selectionBehaviour - contains the gallery settings.

  /// Setups gallery selection behaviour
  @objc public class GallerySelectionBehaviour: NSObject {
      /// Maximum possible selected gallery items quantity which can select a user.
      public let maximumSelectedCount: Int
      /// Setups already selected items quantity if gallery open as a picker at trimmer sceen or other cases.
      /// Use this field to control maximum selection items.
      public let selectedItemsCount: Int?
      /// Setups picker mode if isMultiselectModeEnabled is false.
      /// Otherwise, multiselection mode enabled.
      public let isMultiselectModeEnabled: Bool
      /// Setups gallery video duration fetched from user gallery supported by BanubaVideoEditorSDK.
      /// By default is 3.0
      public let minimumGalleryVideoDuration: TimeInterval
      /// Setups allowed media types which user can select in gallery
      public let allowedMediaTypes: [GalleryMediaType]
  }
  
  @objc public enum GalleryMediaType: Int, CaseIterable {
      case video
      case photo
  }

GalleryItem is a protocol to which your items should conform in order to pass the gallery selection result to BanubaVideoEditorSDK:

@objc public protocol GalleryItem: NSObjectProtocol {
    /// Video representation url asset
    var urlAsset: AVURLAsset? { get }
    /// Preview for gallery item
    var preview: UIImage? { get set }
    /// GalleryItem duration
    var duration: TimeInterval { get }
    /// Type can be video, photo or unknown
    var type: GalleryItemType { get }
      
    /// Requests preview for displaying in gallery list
    func requestPreview(
        size: CGSize,
        handler: @escaping (UIImage?) -> Void
    )
    /// Requests photo with desired size
    func requestPhoto(
        size: CGSize,
        progressHandler: ((Double) -> (Bool))?,
        handler: @escaping (UIImage?, Error?) -> Void
    )
    /// Requests video url asset
    func requestAVURLAsset(
        progressHandler:((Double) -> (Bool))?,
        handler: @escaping (AVURLAsset?, Error?) -> Void
    )
    /// Requests video player item
    func requestAVPlayerItem(
      progressHandler: ((Double) -> (Bool))?,
      handler: @escaping (AVPlayerItem?, Error?) -> Void
    )
}

Step 2

Implement custom UIViewController inherited from AlbumsViewController:

@objc open class AlbumsViewController: UIViewController {
    open weak var delegate: AlbumsViewControllerDelegate?
    open var configuration: AlbumsConfiguration?
    open var selectedAlbum: AlbumModel?
}

• delegate - notifies BanubaVideoEditorSDK about actions that happen in Albums. These are the possible actions:

@objc public protocol AlbumsViewControllerDelegate: AnyObject {
    /// Tells delegate object about selection the new album
    func albumsViewController(_ controller: AlbumsViewController, didSelect album: AlbumModel)
    // Tells delegate object about close action
    func albumsViewControllerDidClose(_ controller: AlbumsViewController)
}

• configuration - a simple configuration with the TextButtonConfiguration and BackButtonConfiguration configurations;
• selectedAlbum - an entity which contains information about the currently selected album:

@objc public protocol AlbumModel {
    /// Album name
    var name: String? { get set }
    /// Album preview
    var preview: UIImage? { get set }
    /// Assosiated asset collection with album
    var assetCollection: PHAssetCollection { get }
}

Step 3

Provide your custom gallery to BanubaVideoEditorSDK. Please, follow these steps:

• create your own viewControllerFactory that conforms to GalleryViewControllerFactory:

@objc public protocol GalleryViewControllerFactory: NSObjectProtocol {
    /// Creates GalleryViewController
    func makeGalleryViewController(
        withConfiguration configuration: GalleryConfiguration,
        selectionBehaviour: GallerySelectionBehaviour
    ) -> GalleryViewController
}

class MyGalleryViewControllerFactory: NSObject, GalleryViewControllerFactory {
    func makeGalleryViewController(
        withConfiguration configuration: BanubaUtilities.GalleryConfiguration,
        albumsConfiguration: BanubaUtilities.AlbumsConfiguration,
        selectionBehaviour: BanubaUtilities.GallerySelectionBehaviour
    ) -> BanubaUtilities.GalleryViewController {
      let controller = UIStoryboard(
      name: String(describing: UIViewController.self),
      bundle: Bundle(for: UIViewController.self)
      ).instantiateInitialViewController() as! UIViewController
      return controller
    }
}

• paste your factory to the BanubaVideoEditor init:

/// Example video editor view controller factory
class ViewControllerFactory: ExternalViewControllerFactory {
    var musicEditorFactory: MusicEditorExternalViewControllerFactory?
    var countdownTimerViewFactory: CountdownTimerViewFactory?
    var exposureViewFactory: AnimatableViewFactory?
    
    //MARK: - ExternalViewControllerFactory protocols variale
    var galleryViewControllerFactory: GalleryViewControllerFactory?
}
...
let viewControllerFactory = ViewControllerFactory()
// Paste your custom factory to externalViewControllerFactory
viewControllerFactory.galleryViewControllerFactory = MyGalleryViewControllersFactory()
            
videoEditorSDK = BanubaVideoEditor(
    token: token,
    configuration: config,
    externalViewControllerFactory: viewControllerFactory
)