@imgly/editor-react-native 1.74.0 → 1.76.0

package/android/build.gradle

@@ -143,7 +143,7 @@ repositories {
 }
 
 dependencies {
-    api "ly.img:editor:1.74.0"
+    api "ly.img:editor:1.76.0"
 
     implementation "androidx.activity:activity-ktx:1.9.0"
     implementation "androidx.appcompat:appcompat:1.7.1"

package/android/src/main/kotlin/ly/img/editor/configuration/apparel/ApparelConfigurationBuilder.kt

@@ -65,7 +65,7 @@ class ApparelConfigurationBuilder : BasicConfigurationBuilder() {
      * 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<*>>? = {
+    override var dock: ScopedProperty<EditorScope, EditorComponent<*>?>? = {
         rememberDock()
     }
 
@@ -73,7 +73,7 @@ class ApparelConfigurationBuilder : BasicConfigurationBuilder() {
      * 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<*>>? = {
+    override var navigationBar: ScopedProperty<EditorScope, EditorComponent<*>?>? = {
         rememberNavigationBar()
     }
 
@@ -82,7 +82,7 @@ class ApparelConfigurationBuilder : BasicConfigurationBuilder() {
      * bottom of the editor when a design block is selected.
      * Check parent class declaration for more details.
      */
-    override var inspectorBar: ScopedProperty<EditorScope, EditorComponent<*>>? = {
+    override var inspectorBar: ScopedProperty<EditorScope, EditorComponent<*>?>? = {
         rememberInspectorBar()
     }
 
@@ -91,7 +91,7 @@ class ApparelConfigurationBuilder : BasicConfigurationBuilder() {
      * the selected design block.
      * Check parent class declaration for more details.
      */
-    override var canvasMenu: ScopedProperty<EditorScope, EditorComponent<*>>? = {
+    override var canvasMenu: ScopedProperty<EditorScope, EditorComponent<*>?>? = {
         rememberCanvasMenu()
     }
 
@@ -100,7 +100,7 @@ class ApparelConfigurationBuilder : BasicConfigurationBuilder() {
      * overlay.
      * Check parent class declaration for more details.
      */
-    override var overlay: ScopedProperty<EditorScope, EditorComponent<*>>? = {
+    override var overlay: ScopedProperty<EditorScope, EditorComponent<*>?>? = {
         rememberOverlay()
     }
 

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

@@ -111,6 +111,7 @@ suspend fun ApparelConfigurationBuilder.onLoadAssetSources() {
             "image/heif",
             "image/svg+xml",
             "image/gif",
+            "image/apng",
             "image/bmp",
         ),
     )

package/android/src/main/kotlin/ly/img/editor/configuration/design/DesignConfigurationBuilder.kt

@@ -65,7 +65,7 @@ class DesignConfigurationBuilder : BasicConfigurationBuilder() {
      * 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<*>>? = {
+    override var dock: ScopedProperty<EditorScope, EditorComponent<*>?>? = {
         rememberDock()
     }
 
@@ -73,7 +73,7 @@ class DesignConfigurationBuilder : BasicConfigurationBuilder() {
      * 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<*>>? = {
+    override var navigationBar: ScopedProperty<EditorScope, EditorComponent<*>?>? = {
         rememberNavigationBar()
     }
 
@@ -82,7 +82,7 @@ class DesignConfigurationBuilder : BasicConfigurationBuilder() {
      * bottom of the editor when a design block is selected.
      * Check parent class declaration for more details.
      */
-    override var inspectorBar: ScopedProperty<EditorScope, EditorComponent<*>>? = {
+    override var inspectorBar: ScopedProperty<EditorScope, EditorComponent<*>?>? = {
         rememberInspectorBar()
     }
 
@@ -91,7 +91,7 @@ class DesignConfigurationBuilder : BasicConfigurationBuilder() {
      * the selected design block.
      * Check parent class declaration for more details.
      */
-    override var canvasMenu: ScopedProperty<EditorScope, EditorComponent<*>>? = {
+    override var canvasMenu: ScopedProperty<EditorScope, EditorComponent<*>?>? = {
         rememberCanvasMenu()
     }
 
@@ -100,7 +100,7 @@ class DesignConfigurationBuilder : BasicConfigurationBuilder() {
      * overlay.
      * Check parent class declaration for more details.
      */
-    override var overlay: ScopedProperty<EditorScope, EditorComponent<*>>? = {
+    override var overlay: ScopedProperty<EditorScope, EditorComponent<*>?>? = {
         rememberOverlay()
     }
 }

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

@@ -106,6 +106,7 @@ suspend fun DesignConfigurationBuilder.onLoadAssetSources() {
             "image/heif",
             "image/svg+xml",
             "image/gif",
+            "image/apng",
             "image/bmp",
         ),
     )

package/android/src/main/kotlin/ly/img/editor/configuration/photo/PhotoConfigurationBuilder.kt

@@ -65,7 +65,7 @@ class PhotoConfigurationBuilder : BasicConfigurationBuilder() {
      * 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<*>>? = {
+    override var dock: ScopedProperty<EditorScope, EditorComponent<*>?>? = {
         rememberDock()
     }
 
@@ -73,7 +73,7 @@ class PhotoConfigurationBuilder : BasicConfigurationBuilder() {
      * 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<*>>? = {
+    override var navigationBar: ScopedProperty<EditorScope, EditorComponent<*>?>? = {
         rememberNavigationBar()
     }
 
@@ -82,7 +82,7 @@ class PhotoConfigurationBuilder : BasicConfigurationBuilder() {
      * bottom of the editor when a design block is selected.
      * Check parent class declaration for more details.
      */
-    override var inspectorBar: ScopedProperty<EditorScope, EditorComponent<*>>? = {
+    override var inspectorBar: ScopedProperty<EditorScope, EditorComponent<*>?>? = {
         rememberInspectorBar()
     }
 
@@ -91,7 +91,7 @@ class PhotoConfigurationBuilder : BasicConfigurationBuilder() {
      * the selected design block.
      * Check parent class declaration for more details.
      */
-    override var canvasMenu: ScopedProperty<EditorScope, EditorComponent<*>>? = {
+    override var canvasMenu: ScopedProperty<EditorScope, EditorComponent<*>?>? = {
         rememberCanvasMenu()
     }
 
@@ -100,7 +100,7 @@ class PhotoConfigurationBuilder : BasicConfigurationBuilder() {
      * overlay.
      * Check parent class declaration for more details.
      */
-    override var overlay: ScopedProperty<EditorScope, EditorComponent<*>>? = {
+    override var overlay: ScopedProperty<EditorScope, EditorComponent<*>?>? = {
         rememberOverlay()
     }
 }

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

@@ -65,7 +65,7 @@ class PostcardConfigurationBuilder : BasicConfigurationBuilder() {
      * 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<*>>? = {
+    override var dock: ScopedProperty<EditorScope, EditorComponent<*>?>? = {
         rememberDock()
     }
 
@@ -73,7 +73,7 @@ class PostcardConfigurationBuilder : BasicConfigurationBuilder() {
      * 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<*>>? = {
+    override var navigationBar: ScopedProperty<EditorScope, EditorComponent<*>?>? = {
         rememberNavigationBar()
     }
 
@@ -82,7 +82,7 @@ class PostcardConfigurationBuilder : BasicConfigurationBuilder() {
      * bottom of the editor when a design block is selected.
      * Check parent class declaration for more details.
      */
-    override var inspectorBar: ScopedProperty<EditorScope, EditorComponent<*>>? = {
+    override var inspectorBar: ScopedProperty<EditorScope, EditorComponent<*>?>? = {
         rememberInspectorBar()
     }
 
@@ -91,7 +91,7 @@ class PostcardConfigurationBuilder : BasicConfigurationBuilder() {
      * the selected design block.
      * Check parent class declaration for more details.
      */
-    override var canvasMenu: ScopedProperty<EditorScope, EditorComponent<*>>? = {
+    override var canvasMenu: ScopedProperty<EditorScope, EditorComponent<*>?>? = {
         rememberCanvasMenu()
     }
 
@@ -100,7 +100,7 @@ class PostcardConfigurationBuilder : BasicConfigurationBuilder() {
      * overlay.
      * Check parent class declaration for more details.
      */
-    override var overlay: ScopedProperty<EditorScope, EditorComponent<*>>? = {
+    override var overlay: ScopedProperty<EditorScope, EditorComponent<*>?>? = {
         rememberOverlay()
     }
 }

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

@@ -103,6 +103,7 @@ suspend fun PostcardConfigurationBuilder.onLoadAssetSources() {
             "image/heif",
             "image/svg+xml",
             "image/gif",
+            "image/apng",
             "image/bmp",
         ),
     )

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

@@ -28,7 +28,7 @@ class VideoConfigurationBuilder : BasicConfigurationBuilder() {
      * Current export status of the editor.
      */
     var exportStatus: ExportStatus? by editorContext.mutableStateOf(
-        key = "ly.img.editor.configuration.video.state.exportStatus",
+        key = KEY_STATE_EXPORT_STATUS,
         initial = null,
     )
 
@@ -36,7 +36,7 @@ class VideoConfigurationBuilder : BasicConfigurationBuilder() {
      * Whether export cancellation confirmation dialog should be displayed.
      */
     var showCancelExportConfirmationDialog: Boolean by editorContext.mutableStateOf(
-        key = "ly.img.editor.configuration.video.state.showCancelExportConfirmationDialog",
+        key = KEY_STATE_SHOW_CANCEL_EXPORT_CONFIRMATION_DIALOG,
         initial = false,
     )
 
@@ -85,7 +85,7 @@ class VideoConfigurationBuilder : BasicConfigurationBuilder() {
      * 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<*>>? = {
+    override var dock: ScopedProperty<EditorScope, EditorComponent<*>?>? = {
         rememberDock()
     }
 
@@ -93,7 +93,7 @@ class VideoConfigurationBuilder : BasicConfigurationBuilder() {
      * 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<*>>? = {
+    override var navigationBar: ScopedProperty<EditorScope, EditorComponent<*>?>? = {
         rememberNavigationBar()
     }
 
@@ -102,7 +102,7 @@ class VideoConfigurationBuilder : BasicConfigurationBuilder() {
      * bottom of the editor when a design block is selected.
      * Check parent class declaration for more details.
      */
-    override var inspectorBar: ScopedProperty<EditorScope, EditorComponent<*>>? = {
+    override var inspectorBar: ScopedProperty<EditorScope, EditorComponent<*>?>? = {
         rememberInspectorBar()
     }
 
@@ -111,7 +111,7 @@ class VideoConfigurationBuilder : BasicConfigurationBuilder() {
      * the selected design block.
      * Check parent class declaration for more details.
      */
-    override var canvasMenu: ScopedProperty<EditorScope, EditorComponent<*>>? = {
+    override var canvasMenu: ScopedProperty<EditorScope, EditorComponent<*>?>? = {
         rememberCanvasMenu()
     }
 
@@ -120,7 +120,7 @@ class VideoConfigurationBuilder : BasicConfigurationBuilder() {
      * overlay.
      * Check parent class declaration for more details.
      */
-    override var bottomPanel: ScopedProperty<EditorScope, EditorComponent<*>>? = {
+    override var bottomPanel: ScopedProperty<EditorScope, EditorComponent<*>?>? = {
         rememberBottomPanel()
     }
 
@@ -129,7 +129,13 @@ class VideoConfigurationBuilder : BasicConfigurationBuilder() {
      * overlay.
      * Check parent class declaration for more details.
      */
-    override var overlay: ScopedProperty<EditorScope, EditorComponent<*>>? = {
+    override var overlay: ScopedProperty<EditorScope, EditorComponent<*>?>? = {
         rememberOverlay()
     }
+
+    companion object {
+        const val KEY_STATE_EXPORT_STATUS = "ly.img.editor.configuration.video.state.exportStatus"
+        const val KEY_STATE_SHOW_CANCEL_EXPORT_CONFIRMATION_DIALOG =
+            "ly.img.editor.configuration.video.state.showCancelExportConfirmationDialog"
+    }
 }

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

@@ -130,6 +130,7 @@ suspend fun VideoConfigurationBuilder.onLoadAssetSources() {
             "image/heif",
             "image/svg+xml",
             "image/gif",
+            "image/apng",
             "image/bmp",
         ),
     )

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

@@ -13,7 +13,6 @@ import ly.img.editor.core.component.EditorTrigger
 import ly.img.editor.core.component.remember
 import ly.img.editor.core.component.rememberAudiosLibrary
 import ly.img.editor.core.component.rememberOverlaysLibrary
-import ly.img.editor.core.component.rememberReorder
 import ly.img.editor.core.component.rememberResizeAll
 import ly.img.editor.core.component.rememberStickersAndShapesLibrary
 import ly.img.editor.core.component.rememberSystemCamera
@@ -64,7 +63,6 @@ fun VideoConfigurationBuilder.rememberDock() = Dock.remember {
             add { Dock.Button.rememberAudiosLibrary() }
             add { Dock.Button.rememberVoiceoverRecord() }
             add { Dock.Button.rememberResizeAll() }
-            add { Dock.Button.rememberReorder() }
         }
         // highlight-starter-kit-imgly-camera
     }

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

@@ -20,9 +20,6 @@ import ly.img.editor.core.component.rememberFillStroke
 import ly.img.editor.core.component.rememberFilter
 import ly.img.editor.core.component.rememberFormatText
 import ly.img.editor.core.component.rememberLayer
-import ly.img.editor.core.component.rememberMoveAsClip
-import ly.img.editor.core.component.rememberMoveAsOverlay
-import ly.img.editor.core.component.rememberReorder
 import ly.img.editor.core.component.rememberReplace
 import ly.img.editor.core.component.rememberSelectGroup
 import ly.img.editor.core.component.rememberShape
@@ -58,9 +55,6 @@ fun VideoConfigurationBuilder.rememberInspectorBar() = InspectorBar.remember {
             add { InspectorBar.Button.rememberEnterGroup() } // Group
             add { InspectorBar.Button.rememberLayer() } // Video, Image, Sticker, Shape, Text
             add { InspectorBar.Button.rememberSplit() } // Video, Image, Sticker, Shape, Text, Audio
-            add { InspectorBar.Button.rememberMoveAsClip() } // Video, Image, Sticker, Shape, Text
-            add { InspectorBar.Button.rememberMoveAsOverlay() } // Video, Image, Sticker, Shape, Text
-            add { InspectorBar.Button.rememberReorder() } // Video, Image, Sticker, Shape, Text
             add { InspectorBar.Button.rememberDuplicate() } // Video, Image, Sticker, Shape, Text
             add { InspectorBar.Button.rememberDelete() } // Video, Image, Sticker, Shape, Text
         }

package/android/src/main/kotlin/ly/img/editor/reactnative/module/builder/EditorBuilder.kt

@@ -37,6 +37,7 @@ import ly.img.engine.DesignBlock
 import ly.img.engine.DesignBlockType
 import ly.img.engine.Engine
 import ly.img.engine.FillType
+import ly.img.engine.MimeType
 import java.io.File
 import java.io.FileOutputStream
 import java.nio.ByteBuffer
@@ -131,6 +132,7 @@ class EditorBuilder {
                                     val result = EditorBuilderDefaults.getExportResult(
                                         scope = this@Editor,
                                         byteBuffer = it,
+                                        mimeType = MimeType.PNG,
                                     )
                                     result(Result.success(result))
                                 },
@@ -175,6 +177,7 @@ class EditorBuilder {
                                     val result = EditorBuilderDefaults.getExportResult(
                                         scope = this@Editor,
                                         byteBuffer = it,
+                                        mimeType = MimeType.PDF,
                                     )
                                     result(Result.success(result))
                                 },
@@ -219,6 +222,7 @@ class EditorBuilder {
                                     val result = EditorBuilderDefaults.getExportResult(
                                         scope = this@Editor,
                                         byteBuffer = it,
+                                        mimeType = MimeType.PDF,
                                     )
                                     result(Result.success(result))
                                 },
@@ -263,6 +267,7 @@ class EditorBuilder {
                                     val result = EditorBuilderDefaults.getExportResult(
                                         scope = this@Editor,
                                         byteBuffer = it,
+                                        mimeType = MimeType.PDF,
                                     )
                                     result(Result.success(result))
                                 },
@@ -307,6 +312,7 @@ class EditorBuilder {
                                     val result = EditorBuilderDefaults.getExportResult(
                                         scope = this@Editor,
                                         byteBuffer = it,
+                                        mimeType = MimeType.MP4,
                                     )
                                     exportStatus = null
                                     result(Result.success(result))
@@ -386,6 +392,7 @@ object EditorBuilderDefaults {
      *
      * @param scope the [EditorScope] of the editor.
      * @param byteBuffer the buffer that contains the exported data.
+     * @param mimeType the [MimeType] of the exported data, used to derive the artifact file extension.
      * @param thumbnailHeight the height of the generated thumbnail.
      * @return a new [EditorResult] that contains a uri to temporary file with [byteBuffer] content,
      * thumbnail and an exported scene string.
@@ -393,6 +400,7 @@ object EditorBuilderDefaults {
     suspend fun getExportResult(
         scope: EditorScope,
         byteBuffer: ByteBuffer,
+        mimeType: MimeType,
         thumbnailHeight: Int = 100,
     ) = scope.run {
         val scene = editorContext.engine.scene.get()
@@ -409,13 +417,14 @@ object EditorBuilderDefaults {
         val thumbnail = saveThumbnail(firstPage, editorContext.engine, thumbnailHeight)
         EditorResult(
             scene = sceneUri.toString(),
-            artifact = Uri.fromFile(byteBuffer.writeToFile()).toString(),
+            artifact = Uri.fromFile(byteBuffer.writeToFile(mimeType)).toString(),
             thumbnail = thumbnail.toString(),
         )
     }
 
-    private suspend fun ByteBuffer.writeToFile(): File = withContext(Dispatchers.IO) {
-        File.createTempFile(UUID.randomUUID().toString(), ".tmp").apply {
+    private suspend fun ByteBuffer.writeToFile(mimeType: MimeType): File = withContext(Dispatchers.IO) {
+        val extension = "." + mimeType.key.substringAfterLast('/')
+        File.createTempFile(UUID.randomUUID().toString(), extension).apply {
             outputStream().channel.write(this@writeToFile)
         }
     }

package/ios/StarterKits/Video/components/Dock+Video.swift

@@ -21,7 +21,6 @@ extension VideoEditorConfiguration {
         Dock.Buttons.stickersAndShapesLibrary() // Stickers and shapes
         Dock.Buttons.audioLibrary() // Audio tracks
         Dock.Buttons.voiceover() // Voice recording
-        Dock.Buttons.reorder() // Clip reordering
         Dock.Buttons.resize() // Aspect ratio and canvas size
       }
       // highlight-starter-kit-dock

package/ios/StarterKits/Video/components/InspectorBar+Video.swift

@@ -31,9 +31,6 @@ extension VideoEditorConfiguration {
 
         InspectorBar.Buttons.layer()
         InspectorBar.Buttons.split()
-        InspectorBar.Buttons.moveAsClip()
-        InspectorBar.Buttons.moveAsOverlay()
-        InspectorBar.Buttons.reorder()
         InspectorBar.Buttons.duplicate()
         InspectorBar.Buttons.delete()
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@imgly/editor-react-native",
-  "version": "1.74.0",
+  "version": "1.76.0",
   "description": "CreativeEditor SDK for React Native - enable photo, video and design editing for your users on iOS and Android.",
   "react-native": "index.js",
   "source": "index.js",

package/src/NativeIMGLYEditor.ts

@@ -96,7 +96,7 @@ export class EditorSettingsModel implements EditorSettings {
    * sources (stickers, filters, and more).
    */
   baseUri: string =
-    'https://cdn.img.ly/packages/imgly/cesdk-react-native/1.74.0/assets';
+    'https://cdn.img.ly/packages/imgly/cesdk-react-native/1.76.0/assets';
 
   /**
    * Unique ID tied to your application's user.