Configure Asset Library

In this example, we will show you how to customize the asset library for the mobile editor. The example is based on the Design Editor, however, it is exactly the same for all the other solutions.

Explore a full code sample on GitHub.

View on GitHub

Modifiers#

After initializing an editor SwiftUI view you can apply any SwiftUI modifier to customize it like for any other SwiftUI view. All public Swift extensions of existing types provided by IMG.LY, e.g., for the SwiftUI View protocol, are exposed in a separate .imgly property namespace. The asset library configuration to customize the editor is no exception to this rule and is implemented as a SwiftUI modifier.

assetLibrary - the asset library UI definition used by the editor. The result of the trailing closure needs to conform to the AssetLibrary protocol. By default, the predefined DefaultAssetLibrary is used.

Custom Asset Source#

To use custom asset sources in the asset library UI, the custom asset source must be first added to the engine. In addition to creating or loading a scene, registering the asset sources should be done in the onCreate callback. In this example, the OnCreate.loadScene default implementation is used and afterward, the custom UnsplashAssetSource is added.

Default Asset Library#

The DefaultAssetLibrary is a predefined AssetLibrary intended to quickly customize some parts of the default asset library without implementing a complete AssetLibrary from scratch. It can be initialized with a custom selection and ordering of the available tabs. In this example, we reverse the ordering and exclude the elements and uploads tab.

Asset Library Builder#

The content of some of the tabs can be changed with modifiers that are defined on the DefaultAssetLibrary type and expect a trailing @AssetLibraryBuilder closure similar to regular SwiftUI @ViewBuilder closures. These type-bound modifiers are videos, audio, images, shapes, and stickers. The elements tab will then be generated with these definitions. In this example, we reuse the DefaultAssetLibrary.images default implementation and add a new AssetLibrarySource for the previously added UnsplashAssetSource which will add a new "Unsplash" section to the asset library UI.

Custom Asset Library#

If the DefaultAssetLibrary is not customizable enough for your use case you can create your own custom AssetLibrary.

In this example, we did exactly that by creating the CustomAssetLibrary. It resembles the above customized DefaultAssetLibrary with the added UnsplashAssetSource but without the custom tab configuration which is not needed as you control every section, layout, and grouping.

As used above for customizing the DefaultAssetLibrary with its modifiers, the @AssetLibraryBuilder concept is the foundation to quickly create any asset library hierarchy. It behaves and feels like the regular SwiftUI @ViewBuilder syntax. You compose your asset library out of AssetLibrarySources that can be organized in named AssetLibraryGroups. There are different flavors of these two for each asset type which define the used asset preview and section styling.

To compose a SwiftUI view for any AssetLibraryBuilder result you use an AssetLibraryTab which can be added to your view hierarchy. In this example, we reuse the labels defined in the DefaultAssetLibrary but you can also use your own SwiftUI Label or any other view. The argument of the label closure just forwards the title that was used to initialize the AssetLibraryTab so that you don't have to type it twice.

Asset Library `body` View#

Finally, multiple AssetLibraryTabs are ready to be used in a SwiftUI TabView environment. Use an AssetLibraryMoreTab if you have more than five tabs to workaround various SwiftUI TabView shortcomings. Editor solutions with a floating "+" action button (FAB) show this AssetLibrary.body View.

Asset Library Tab Views#

In addition to its View.body, the AssetLibrary protocol requires to define elementsTab, videosTab, audioTab, imagesTab, textTab, shapesTab, and stickersTab Views. These are used when displaying isolated asset libraries just for the corresponding asset type, e.g., for replacing an asset.

For the video editor solution, it is also required to define clipsTab, overlaysTab, and stickersAndShapesTab Views. These composed libraries are used as entry points instead of the FAB.


import IMGLYDesignEditor
import SwiftUI

struct DefaultAssetLibraryEditorSolution: View {
  let settings = EngineSettings(license: secrets.licenseKey,
                                userID: "<your unique user id>")

  @MainActor
  var editor: some View {
    DesignEditor(settings)
      .imgly.onCreate { engine in
        try await OnCreate.loadScene(from: DesignEditor.defaultScene)(engine)
        try engine.asset.addSource(UnsplashAssetSource(host: secrets.unsplashHost))
      }
      .imgly.assetLibrary {
        DefaultAssetLibrary(
          tabs: DefaultAssetLibrary.Tab.allCases.reversed().filter { tab in
            tab != .elements && tab != .uploads
          }
        )
        .images {
          AssetLibrarySource.image(.title("Unsplash"), source: .init(id: UnsplashAssetSource.id))
          DefaultAssetLibrary.images
        }
      }
  }

  @State private var isPresented = false

  var body: some View {
    Button("Use the Editor") {
      isPresented = true
    }
    .fullScreenCover(isPresented: $isPresented) {
      ModalEditor {
        editor
      }
    }
  }
}