Skip to main content

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.

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
)