@imgly/editor-react-native 1.73.0 → 1.74.0

package/android/src/main/kotlin/ly/img/editor/configuration/postcard/component/NavigationBar.kt

@@ -0,0 +1,76 @@
+@file:Suppress("UnusedReceiverParameter", "UnusedFlow")
+
+package ly.img.editor.configuration.postcard.component
+
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.collectAsState
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.res.stringResource
+import kotlinx.coroutines.flow.emptyFlow
+import kotlinx.coroutines.flow.map
+import ly.img.editor.configuration.postcard.PostcardConfigurationBuilder
+import ly.img.editor.configuration.postcard.ext.getCurrentPageIndex
+import ly.img.editor.core.R
+import ly.img.editor.core.component.EditorTrigger
+import ly.img.editor.core.component.NavigationBar
+import ly.img.editor.core.component.remember
+import ly.img.editor.core.component.rememberCloseEditor
+import ly.img.editor.core.component.rememberExport
+import ly.img.editor.core.component.rememberNextPage
+import ly.img.editor.core.component.rememberPreviousPage
+import ly.img.editor.core.component.rememberRedo
+import ly.img.editor.core.component.rememberTogglePreviewMode
+import ly.img.editor.core.component.rememberUndo
+import ly.img.engine.DesignBlockType
+
+/**
+ * The configuration of the component that is displayed as horizontal list of items at the top of the editor.
+ */
+@Composable
+fun PostcardConfigurationBuilder.rememberNavigationBar() = NavigationBar.remember {
+    scope = {
+        val activeSceneTrigger by EditorTrigger.remember {
+            editorContext.engine.scene.onActiveChanged()
+        }
+        val historyTrigger by EditorTrigger.remember(activeSceneTrigger) {
+            editorContext.engine.editor.onHistoryUpdated()
+        }
+        val pageIndex by remember(this, activeSceneTrigger) {
+            if (editorContext.engine.scene.get() == null) return@remember emptyFlow()
+            val stack = editorContext.engine.block.findByType(DesignBlockType.Stack).first()
+            editorContext.engine.event.subscribe(listOf(stack))
+                .map { editorContext.engine.getCurrentPageIndex() }
+        }.collectAsState(initial = 0)
+        // Update NavigationBar whenever the active scene, editor history or current page index changes
+        remember(this, pageIndex, historyTrigger) {
+            NavigationBar.Scope(parentScope = this)
+        }
+    }
+    listBuilder = {
+        NavigationBar.ListBuilder.remember {
+            aligned(alignment = Alignment.Start) {
+                add { NavigationBar.Button.rememberCloseEditor() }
+                add {
+                    NavigationBar.Button.rememberPreviousPage {
+                        textString = { stringResource(R.string.ly_img_editor_navigation_bar_button_design) }
+                    }
+                }
+            }
+            aligned(alignment = Alignment.CenterHorizontally) {
+                add { NavigationBar.Button.rememberUndo() }
+                add { NavigationBar.Button.rememberRedo() }
+                add { NavigationBar.Button.rememberTogglePreviewMode() }
+            }
+            aligned(alignment = Alignment.End) {
+                add {
+                    NavigationBar.Button.rememberNextPage {
+                        textString = { stringResource(R.string.ly_img_editor_navigation_bar_button_write) }
+                    }
+                }
+                add { NavigationBar.Button.rememberExport() }
+            }
+        }
+    }
+}

package/android/src/main/kotlin/ly/img/editor/configuration/postcard/component/Overlay.kt

@@ -0,0 +1,15 @@
+package ly.img.editor.configuration.postcard.component
+
+import androidx.compose.runtime.Composable
+import ly.img.editor.configuration.postcard.PostcardConfigurationBuilder
+import ly.img.editor.core.component.EditorComponent
+import ly.img.editor.core.component.remember
+
+/**
+ * The configuration of the component that is displayed over the editor. It is useful if you want to display a popup dialog or anything in the
+ * overlay.
+ */
+@Composable
+fun PostcardConfigurationBuilder.rememberOverlay() = EditorComponent.remember {
+    decoration = { Overlay() }
+}

package/android/src/main/kotlin/ly/img/editor/configuration/postcard/ext/Engine.kt

@@ -0,0 +1,107 @@
+package ly.img.editor.configuration.postcard.ext
+
+import androidx.compose.ui.graphics.Color
+import ly.img.editor.core.component.data.ConicalGradientFill
+import ly.img.editor.core.component.data.Fill
+import ly.img.editor.core.component.data.LinearGradientFill
+import ly.img.editor.core.component.data.RadialGradientFill
+import ly.img.editor.core.component.data.SolidFill
+import ly.img.engine.ColorSpace
+import ly.img.engine.DesignBlock
+import ly.img.engine.DesignBlockType
+import ly.img.engine.Engine
+import ly.img.engine.FillType
+import ly.img.engine.RGBAColor
+
+/**
+ * Returns current page index.
+ */
+internal fun Engine.getCurrentPageIndex() = scene.run { getPages().indexOf(getCurrentPage()) }
+
+/**
+ * Converts engine color into compose color.
+ */
+internal fun Engine.toComposeColor(color: ly.img.engine.Color): Color {
+    val rgbaEngineColor = color as? RGBAColor
+        ?: editor.convertColorToColorSpace(color, ColorSpace.SRGB) as RGBAColor
+    return Color(
+        red = rgbaEngineColor.r,
+        green = rgbaEngineColor.g,
+        blue = rgbaEngineColor.b,
+        alpha = rgbaEngineColor.a,
+    )
+}
+
+/**
+ * An extension function that returns [FillType] of the design block.
+ *
+ * @param designBlock the design block that is queried.
+ */
+internal fun Engine.getFillType(designBlock: DesignBlock): FillType? = if (!block.supportsFill(designBlock)) {
+    null
+} else {
+    FillType.Companion.get(block.getType(block.getFill(designBlock)))
+}
+
+/**
+ * An extension function that returns [Fill] of the design block.
+ *
+ * @param designBlock the design block that is queried.
+ */
+internal fun Engine.getFill(designBlock: DesignBlock): Fill? = if (!block.supportsFill(designBlock)) {
+    null
+} else {
+    when (getFillType(designBlock)) {
+        FillType.Color -> {
+            val rgbaColor = if (DesignBlockType.Companion.getOrNull(block.getType(designBlock)) == DesignBlockType.Text) {
+                block.getTextColors(designBlock).first()
+            } else {
+                block.getColor(designBlock, "fill/solid/color")
+            }
+            SolidFill(toComposeColor(rgbaColor))
+        }
+
+        FillType.LinearGradient -> {
+            val fill = block.getFill(designBlock)
+            LinearGradientFill(
+                startPointX = block.getFloat(fill, "fill/gradient/linear/startPointX"),
+                startPointY = block.getFloat(fill, "fill/gradient/linear/startPointY"),
+                endPointX = block.getFloat(fill, "fill/gradient/linear/endPointX"),
+                endPointY = block.getFloat(fill, "fill/gradient/linear/endPointY"),
+                colorStops = block.getGradientColorStops(fill, "fill/gradient/colors"),
+            )
+        }
+
+        FillType.RadialGradient -> {
+            val fill = block.getFill(designBlock)
+            RadialGradientFill(
+                centerX = block.getFloat(fill, "fill/gradient/radial/centerPointX"),
+                centerY = block.getFloat(fill, "fill/gradient/radial/centerPointY"),
+                radius = block.getFloat(fill, "fill/gradient/radial/radius"),
+                colorStops = block.getGradientColorStops(fill, "fill/gradient/colors"),
+            )
+        }
+
+        FillType.ConicalGradient -> {
+            val fill = block.getFill(designBlock)
+            ConicalGradientFill(
+                centerX = block.getFloat(fill, "fill/gradient/conical/centerPointX"),
+                centerY = block.getFloat(fill, "fill/gradient/conical/centerPointY"),
+                colorStops = block.getGradientColorStops(fill, "fill/gradient/colors"),
+            )
+        }
+
+        // Image fill and Video fill are not supported yet
+        else -> null
+    }
+}
+
+/**
+ * An extension function that returns stroke color of the design block.
+ *
+ * @param designBlock the design block that is queried.
+ */
+internal fun Engine.getStrokeColor(designBlock: DesignBlock): Color? {
+    if (!block.supportsStroke(designBlock)) return null
+    return toComposeColor(block.getColor(designBlock, "stroke/color"))
+}

package/android/src/main/kotlin/ly/img/editor/configuration/video/EditorActivity.kt

@@ -0,0 +1,37 @@
+// highlight-starter-kit-activity-full
+package ly.img.editor.configuration.video
+
+import android.os.Bundle
+import androidx.activity.ComponentActivity
+import androidx.activity.compose.setContent
+import androidx.activity.enableEdgeToEdge
+import ly.img.editor.Editor
+import ly.img.editor.core.configuration.EditorConfiguration
+import ly.img.editor.core.configuration.remember
+
+/**
+ * Encapsulated editor to be used in legacy activity navigation.
+ * Delete this file if you are using jetpack compose navigation.
+ */
+class EditorActivity : ComponentActivity() {
+    override fun onCreate(savedInstanceState: Bundle?) {
+        super.onCreate(savedInstanceState)
+        // This is required to remove the default action bar on top.
+        setTheme(android.R.style.Theme_Material_Light_NoActionBar)
+        // This is required, so that the editor is displayed full screen on relatively older devices.
+        enableEdgeToEdge()
+        setContent {
+            Editor(
+                license = null, // pass null or empty for evaluation mode with watermark
+                configuration = {
+                    EditorConfiguration.remember(::VideoConfigurationBuilder)
+                },
+                onClose = {
+                    // Finish the activity, potentially handle errors.
+                    finish()
+                },
+            )
+        }
+    }
+}
+// highlight-starter-kit-activity-full

package/android/src/main/kotlin/ly/img/editor/configuration/video/VideoConfigurationBuilder.kt

@@ -0,0 +1,135 @@
+package ly.img.editor.configuration.video
+
+import androidx.compose.runtime.Stable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.setValue
+import ly.img.editor.BasicConfigurationBuilder
+import ly.img.editor.configuration.video.callback.onCreate
+import ly.img.editor.configuration.video.callback.onExport
+import ly.img.editor.configuration.video.callback.onLoaded
+import ly.img.editor.configuration.video.component.rememberBottomPanel
+import ly.img.editor.configuration.video.component.rememberCanvasMenu
+import ly.img.editor.configuration.video.component.rememberDock
+import ly.img.editor.configuration.video.component.rememberInspectorBar
+import ly.img.editor.configuration.video.component.rememberNavigationBar
+import ly.img.editor.configuration.video.component.rememberOverlay
+import ly.img.editor.configuration.video.model.ExportStatus
+import ly.img.editor.core.EditorScope
+import ly.img.editor.core.ScopedProperty
+import ly.img.editor.core.component.EditorComponent
+import ly.img.editor.core.event.EditorEvent
+
+/**
+ * Configuration builder class for video editor starter kit.
+ */
+@Stable
+class VideoConfigurationBuilder : BasicConfigurationBuilder() {
+    /**
+     * Current export status of the editor.
+     */
+    var exportStatus: ExportStatus? by editorContext.mutableStateOf(
+        key = "ly.img.editor.configuration.video.state.exportStatus",
+        initial = null,
+    )
+
+    /**
+     * Whether export cancellation confirmation dialog should be displayed.
+     */
+    var showCancelExportConfirmationDialog: Boolean by editorContext.mutableStateOf(
+        key = "ly.img.editor.configuration.video.state.showCancelExportConfirmationDialog",
+        initial = false,
+    )
+
+    /**
+     * The callback that is invoked when the editor is created.
+     * Check parent class declaration for more details.
+     */
+    override var onCreate: (suspend EditorScope.() -> Unit)? = {
+        onCreate()
+    }
+
+    /**
+     * The callback that is invoked when the editor is loaded and ready to be used.
+     * Check parent class declaration for more details.
+     */
+    override var onLoaded: (suspend EditorScope.() -> Unit)? = {
+        onLoaded()
+    }
+
+    /**
+     * The callback that is invoked when the export button is clicked.
+     * Check parent class declaration for more details.
+     */
+    override var onExport: (suspend EditorScope.() -> Unit)? = {
+        onExport()
+    }
+
+    /**
+     * The callback that is invoked after [EditorEvent.OnClose] event is triggered or when the system back button is clicked
+     * and editor cannot handle the event internally.
+     * Check parent class declaration for more details.
+     */
+    override var onClose: (suspend EditorScope.() -> Unit)? = {
+        showConfirmationOrCloseEditor()
+    }
+
+    /**
+     * The callback that is invoked after the editor captures an error.
+     * Check parent class declaration for more details.
+     */
+    override var onError: (suspend EditorScope.(Throwable) -> Unit)? = {
+        error = it
+    }
+
+    /**
+     * The configuration of the component that is displayed as horizontal list of items at the bottom of the editor.
+     * Check parent class declaration for more details.
+     */
+    override var dock: ScopedProperty<EditorScope, EditorComponent<*>>? = {
+        rememberDock()
+    }
+
+    /**
+     * The configuration of the component that is displayed as horizontal list of items at the top of the editor.
+     * Check parent class declaration for more details.
+     */
+    override var navigationBar: ScopedProperty<EditorScope, EditorComponent<*>>? = {
+        rememberNavigationBar()
+    }
+
+    /**
+     * The configuration of the component that is displayed as horizontal list of items at the
+     * bottom of the editor when a design block is selected.
+     * Check parent class declaration for more details.
+     */
+    override var inspectorBar: ScopedProperty<EditorScope, EditorComponent<*>>? = {
+        rememberInspectorBar()
+    }
+
+    /**
+     * The configuration of the component that is displayed as horizontal list of items next to
+     * the selected design block.
+     * Check parent class declaration for more details.
+     */
+    override var canvasMenu: ScopedProperty<EditorScope, EditorComponent<*>>? = {
+        rememberCanvasMenu()
+    }
+
+    /**
+     * The configuration of the component that is displayed over the editor. It is useful if you want to display a popup dialog or anything in the
+     * overlay.
+     * Check parent class declaration for more details.
+     */
+    override var bottomPanel: ScopedProperty<EditorScope, EditorComponent<*>>? = {
+        rememberBottomPanel()
+    }
+
+    /**
+     * The configuration of the component that is displayed over the editor. It is useful if you want to display a popup dialog or anything in the
+     * overlay.
+     * Check parent class declaration for more details.
+     */
+    override var overlay: ScopedProperty<EditorScope, EditorComponent<*>>? = {
+        rememberOverlay()
+    }
+}

package/android/src/main/kotlin/ly/img/editor/configuration/video/callback/OnCreate.kt

@@ -0,0 +1,191 @@
+@file:OptIn(UnstableEditorApi::class)
+@file:Suppress("UnusedReceiverParameter")
+
+package ly.img.editor.configuration.video.callback
+
+import androidx.core.net.toUri
+import kotlinx.coroutines.coroutineScope
+import kotlinx.coroutines.launch
+import ly.img.editor.configuration.video.VideoConfigurationBuilder
+import ly.img.editor.core.UnstableEditorApi
+import ly.img.editor.core.library.data.AssetSourceType
+import ly.img.editor.core.library.data.SystemGalleryAssetSource
+import ly.img.editor.core.library.data.SystemGalleryPermission
+import ly.img.editor.core.library.data.TextAssetSource
+import ly.img.editor.core.library.data.TypefaceProvider
+import ly.img.engine.Color
+import ly.img.engine.DefaultAssetSource
+import ly.img.engine.DemoAssetSource
+import ly.img.engine.populateAssetSource
+
+/**
+ * The callback that is invoked when the editor is created.
+ */
+suspend fun VideoConfigurationBuilder.onCreate(
+    preCreateScene: suspend VideoConfigurationBuilder.() -> Unit = {
+        onPreCreateScene()
+    },
+    createScene: suspend VideoConfigurationBuilder.() -> Unit = {
+        onCreateScene()
+    },
+    loadAssetSources: suspend VideoConfigurationBuilder.() -> Unit = {
+        onLoadAssetSources()
+    },
+    postCreateScene: suspend VideoConfigurationBuilder.() -> Unit = {
+        onPostCreateScene()
+    },
+    finally: suspend VideoConfigurationBuilder.() -> Unit = {
+        onCreateFinally()
+    },
+) {
+    try {
+        preCreateScene()
+        createScene()
+        loadAssetSources()
+        postCreateScene()
+    } finally {
+        finally()
+    }
+}
+
+/**
+ * The callback that is invoked before the scene is created.
+ */
+fun VideoConfigurationBuilder.onPreCreateScene() {
+    showLoading = true
+    val engine = editorContext.engine
+    engine.editor.setSettingEnum(keypath = "touch/pinchAction", value = "Scale")
+    engine.editor.setSettingBoolean(
+        keypath = "controlGizmo/showRotateHandles",
+        value = false,
+    )
+    engine.editor.setSettingBoolean(
+        keypath = "controlGizmo/showScaleHandles",
+        value = false,
+    )
+    engine.editor.setSettingBoolean(keypath = "controlGizmo/showMoveHandles", value = false)
+    engine.editor.setSettingBoolean(keypath = "touch/singlePointPanning", value = false)
+    engine.editor.setSettingColor(
+        keypath = "page/innerBorderColor",
+        value = Color.fromRGBA(0.67f, 0.67f, 0.67f, 0.5f),
+    )
+}
+
+/**
+ * The callback that is responsible for creating the scene.
+ */
+// highlight-starter-kit-on-create-scene
+suspend fun VideoConfigurationBuilder.onCreateScene() {
+    getOrLoadScene(sceneUri = "file:///android_asset/scene/video.scene".toUri())
+}
+// highlight-starter-kit-on-create-scene
+
+/**
+ * The callback that loads all the required assets sources.
+ */
+// highlight-starter-kit-on-load-asset-sources
+suspend fun VideoConfigurationBuilder.onLoadAssetSources() {
+    // Load asset sources in parallel from content.json files
+    coroutineScope {
+        listOf(
+            DefaultAssetSource.STICKER.key,
+            DefaultAssetSource.VECTOR_PATH.key,
+            DefaultAssetSource.FILTER_LUT.key,
+            DefaultAssetSource.FILTER_DUO_TONE.key,
+            DefaultAssetSource.CROP_PRESETS.key,
+            DefaultAssetSource.PAGE_PRESETS.key,
+            DefaultAssetSource.EFFECT.key,
+            DefaultAssetSource.BLUR.key,
+            DefaultAssetSource.TYPEFACE.key,
+            DemoAssetSource.IMAGE.key,
+            DemoAssetSource.AUDIO.key,
+            DemoAssetSource.VIDEO.key,
+            DemoAssetSource.TEXT_COMPONENTS.key,
+        ).forEach { assetSource ->
+            launch {
+                val baseUri = editorContext.baseUri
+                editorContext.engine.populateAssetSource(
+                    id = assetSource,
+                    jsonUri = "$baseUri/$assetSource/content.json".toUri(),
+                    replaceBaseUri = baseUri,
+                )
+            }
+        }
+    }
+
+    // Required for animations
+    editorContext.engine.block.setMetadata(
+        block = requireNotNull(editorContext.engine.scene.get()),
+        key = "ly.img.defaultAssetSourcesBaseUri",
+        value = editorContext.baseUri.toString(),
+    )
+
+    // Load local asset sources
+    editorContext.engine.asset.addLocalSource(
+        sourceId = DemoAssetSource.IMAGE_UPLOAD.key,
+        supportedMimeTypes = listOf(
+            "image/jpeg",
+            "image/png",
+            "image/heic",
+            "image/heif",
+            "image/svg+xml",
+            "image/gif",
+            "image/bmp",
+        ),
+    )
+
+    editorContext.engine.asset.addLocalSource(
+        sourceId = DemoAssetSource.AUDIO_UPLOAD.key,
+        supportedMimeTypes = listOf(
+            "audio/x-m4a",
+            "audio/mp3",
+            "audio/mpeg",
+        ),
+    )
+    editorContext.engine.asset.addLocalSource(
+        sourceId = DemoAssetSource.VIDEO_UPLOAD.key,
+        supportedMimeTypes = listOf(
+            "video/mp4",
+        ),
+    )
+
+    // Register gallery asset sources
+    listOf(
+        AssetSourceType.GalleryAllVisuals,
+        AssetSourceType.GalleryImage,
+        AssetSourceType.GalleryVideo,
+    ).forEach { type ->
+        editorContext.engine.asset.addSource(
+            source = SystemGalleryAssetSource(
+                context = editorContext.engine.applicationContext,
+                type = type,
+            ),
+        )
+    }
+    SystemGalleryPermission.setMode(systemGalleryConfiguration)
+
+    // Register text asset source
+    TypefaceProvider().provideTypeface(
+        engine = editorContext.engine,
+        name = "Roboto",
+    )?.let {
+        val textAssetSource = TextAssetSource(engine = editorContext.engine, typeface = it)
+        editorContext.engine.asset.addSource(textAssetSource)
+    }
+}
+// highlight-starter-kit-on-load-asset-sources
+
+/**
+ * The callback that is invoked right after [onCreateScene], after the scene is created.
+ */
+fun VideoConfigurationBuilder.onPostCreateScene() {
+    // Do nothing
+}
+
+/**
+ * The callback that is invoked as the last step of [onCreate].
+ * It always runs, no matter success or failure on previous steps.
+ */
+fun VideoConfigurationBuilder.onCreateFinally() {
+    showLoading = false
+}

package/android/src/main/kotlin/ly/img/editor/configuration/video/callback/OnExport.kt

@@ -0,0 +1,98 @@
+package ly.img.editor.configuration.video.callback
+
+import kotlinx.coroutines.CancellationException
+import ly.img.editor.configuration.video.VideoConfigurationBuilder
+import ly.img.editor.configuration.video.model.ExportStatus
+import ly.img.engine.MimeType
+import java.nio.ByteBuffer
+
+/**
+ * The callback that is invoked when the export button is clicked.
+ */
+suspend fun VideoConfigurationBuilder.onExport(
+    preExport: suspend VideoConfigurationBuilder.() -> Unit = {
+        onPreExport()
+    },
+    exportByteBuffer: suspend VideoConfigurationBuilder.() -> ByteBuffer = {
+        onExportByteBuffer()
+    },
+    postExport: suspend VideoConfigurationBuilder.(ByteBuffer) -> Unit = {
+        onPostExport(it)
+    },
+    error: suspend VideoConfigurationBuilder.(Exception) -> Unit = {
+        onExportError(it)
+    },
+    finally: suspend VideoConfigurationBuilder.() -> Unit = {
+        onExportFinally()
+    },
+) {
+    try {
+        preExport()
+        val result = exportByteBuffer()
+        postExport(result)
+    } catch (exception: Exception) {
+        error(exception)
+    } finally {
+        finally()
+    }
+}
+
+/**
+ * The callback that is invoked before the export is started.
+ */
+fun VideoConfigurationBuilder.onPreExport() {
+    exportStatus = ExportStatus.Loading(progress = 0F)
+}
+
+/**
+ * The callback that exports the content of the editor into [ByteBuffer].
+ */
+// highlight-starter-kit-on-export-byte-buffer
+suspend fun VideoConfigurationBuilder.onExportByteBuffer(): ByteBuffer {
+    val targetDesignBlock = requireNotNull(editorContext.engine.scene.getCurrentPage())
+    return editorContext.engine.block.exportVideo(
+        block = targetDesignBlock,
+        timeOffset = 0.0,
+        duration = editorContext.engine.block.getDuration(targetDesignBlock),
+        mimeType = MimeType.MP4,
+        progressCallback = { progress ->
+            val lastExportStatus = exportStatus
+            val newProgress = progress.encodedFrames.toFloat() / progress.totalFrames
+            // Update export UI whenever the progress changes
+            if (lastExportStatus !is ExportStatus.Loading || newProgress >= lastExportStatus.progress + 0.01F) {
+                exportStatus = ExportStatus.Loading(progress = newProgress)
+            }
+        },
+    )
+}
+// highlight-starter-kit-on-export-byte-buffer
+
+/**
+ * The callback that is invoked after [onExportByteBuffer] and handles its output.
+ */
+// highlight-starter-kit-on-post-export
+suspend fun VideoConfigurationBuilder.onPostExport(byteBuffer: ByteBuffer) {
+    val file = writeToFile(byteBuffer = byteBuffer, mimeType = MimeType.MP4)
+    exportStatus = ExportStatus.Success(file = file, mimeType = MimeType.MP4)
+}
+// highlight-starter-kit-on-post-export
+
+/**
+ * The callback that is invoked in case any of the export functions throw an exception.
+ */
+fun VideoConfigurationBuilder.onExportError(error: Exception) {
+    if (error is CancellationException) {
+        exportStatus = null
+        throw error
+    } else {
+        exportStatus = ExportStatus.Error(exception = error)
+    }
+}
+
+/**
+ * The callback that is invoked as the last step of [onExportByteBuffer].
+ * It always runs, no matter success or failure on previous steps.
+ */
+fun VideoConfigurationBuilder.onExportFinally() {
+    showCancelExportConfirmationDialog = false
+}

package/android/src/main/kotlin/ly/img/editor/configuration/video/callback/OnLoaded.kt

@@ -0,0 +1,20 @@
+package ly.img.editor.configuration.video.callback
+
+import androidx.compose.ui.unit.dp
+import ly.img.editor.configuration.video.VideoConfigurationBuilder
+import ly.img.editor.core.component.data.Insets
+
+/**
+ * The callback that is invoked when the editor is loaded and ready to be used.
+ */
+suspend fun VideoConfigurationBuilder.onLoaded() {
+    observeEditorEditMode(
+        extraInsets = {
+            if (it == "Crop") {
+                Insets(value = 24.dp)
+            } else {
+                Insets(horizontal = 16.dp, vertical = 8.dp)
+            }
+        },
+    )
+}