Present Video Editor using SwiftUI

View on GitHub

Since we are using UIKit in our example application we need to use an UIHostingController to present a SwiftUI View. The VideoEditorSwiftUIView defined below wraps the actual VideoEditor view to coordinate its dismissal with the presenting UIViewController. This process is not necessary for a pure SwiftUI application. You would use the VideoEditor view directly.

Create the video editor#

The custom VideoEditorSwiftUIView acts as the ContentView of a pure SwiftUI application. The VideoEditor is declared to be the only view and to be initialized with the provided video. The dismissAction is responsible to forward the events from the VideoEditor modifiers to the hosting UIViewController.

Handling events#

Using the onDidSave modifier allows us to register an event handler that is invoked when a user successfully exports an edited video. The result argument passed to the closure is of type VideoEditorResult and contains the URL of the exported video.

After performing some action with this video, such as uploading it or saving it, we call dismissAction to exit the editor.

Likewise, if the user taps the cancel button or an error was thrown we dismiss the editor in this example.

Next Steps#


import SwiftUI
import UIKit
import VideoEditorSDK

class ShowVideoEditorSwiftUISwift: Example {
  override func invokeExample() {
    // Create a `Video` from a URL to a video in the app bundle.
    let video = Video(url: Bundle.main.url(forResource: "Skater", withExtension: "mp4")!)

    // The steps below are not needed when integrating the SwiftUI `View`s in a SwiftUI
    // application. For SwiftUI, you can directly integrate the `VideoEditor` instead
    // of wrapping it inside another `View` - in this example the `VideoEditorSwiftUIView`.
    //
    // Create the `View` that hosts the video editor.
    var videoEditor = VideoEditorSwiftUIView(video: video)

    // Since we are using UIKit in this example, we need to pass a dismiss action for the
    // `View` being able to dismiss the presenting `UIViewController`.
    videoEditor.dismissAction = {
      self.presentingViewController?.dismiss(animated: true, completion: nil)
    }

    // Present the video editor via a `UIHostingController`.
    let hostingController = UIHostingController(rootView: videoEditor)
    hostingController.modalPresentationStyle = .fullScreen
    presentingViewController?.present(hostingController, animated: true, completion: nil)
  }
}

// A `View` that hosts the `VideoEditor` in order
// to use it in this `UIKit` example application.
struct VideoEditorSwiftUIView: View {
  // The action to dismiss the view.
  internal var dismissAction: (() -> Void)?

  // The video being edited.
  let video: Video

  var body: some View {
    VideoEditor(video: video)
      .onDidSave { result in
        // The user exported a new video successfully and the newly generated video is located at `result.output.url` of the returned `VideoEditorResult`. Dismissing the editor.
        print("Received video at \(result.output.url.absoluteString)")
        dismissAction?()
      }
      .onDidCancel {
        // The user tapped on the cancel button within the editor. Dismissing the editor.
        dismissAction?()
      }
      .onDidFail { error in
        // There was an error generating the video.
        print("Editor finished with error: \(error.localizedDescription)")
        // Dismissing the editor.
        dismissAction?()
      }
      // In order for the editor to fill out the whole screen it needs
      // to ignore the safe area.
      .ignoresSafeArea()
  }
}