@imgly/editor-react-native 1.82.1 → 1.83.0-rc.1

package/android/build.gradle

@@ -22,8 +22,27 @@ def isNewArchitectureEnabled() {
     return rootProject.hasProperty("newArchEnabled") && rootProject.getProperty("newArchEnabled") == "true"
 }
 
+// React Native modules are built with the host application's AGP. AGP 9 can
+// supply Kotlin itself, while older AGP versions require the Kotlin Gradle
+// Plugin.
+def isBuiltInKotlinEnabled() {
+    def agpMajor = com.android.Version.ANDROID_GRADLE_PLUGIN_VERSION.tokenize('.')[0].toInteger()
+    if (agpMajor < 9) {
+        return false
+    }
+
+    def propertyValue = providers.gradleProperty('android.builtInKotlin').orNull
+    return propertyValue == null || propertyValue.toBoolean()
+}
+
 def getKotlinVersion() {
-    return project.plugins.findPlugin("kotlin-android")?.class?.package?.implementationVersion
+    def kotlinAndroidPlugin = project.plugins.findPlugin("kotlin-android")
+    if (kotlinAndroidPlugin) {
+        return kotlinAndroidPlugin.class.package.implementationVersion
+    }
+
+    // AGP 9 supplies Kotlin 2+ when built-in Kotlin is enabled.
+    return isBuiltInKotlinEnabled() ? "2.0.0" : null
 }
 
 def isKotlin2OrHigher() {
@@ -94,7 +113,9 @@ def getKotlinCompilerExtensionVersion() {
 
 apply plugin: 'com.android.library'
 apply plugin: 'com.facebook.react'
-apply plugin: 'org.jetbrains.kotlin.android'
+if (!isBuiltInKotlinEnabled()) {
+    apply plugin: 'org.jetbrains.kotlin.android'
+}
 
 // This module builds only the presets EditorBuilder exposes.
 ext.starterKitsInclude = ["apparel", "design", "photo", "postcard", "video"]
@@ -109,21 +130,25 @@ if (isKotlin2OrHigher()) {
 }
 
 android {
-    compileSdkVersion safeExtGet('compileSdkVersion', 34)
+    compileSdkVersion safeExtGet('compileSdkVersion', 37)
 
     namespace "ly.img.editor.reactnative.module"
 
     defaultConfig {
         minSdk = 24
+        aarMetadata {
+            // AGP 9 defaults this to compileSdk; declare the consumer requirement separately.
+            minCompileSdk = 34
+        }
         buildConfigField("boolean", "IS_NEW_ARCHITECTURE_ENABLED", isNewArchitectureEnabled().toString())
     }
 
     sourceSets {
         main {
             if (isNewArchitectureEnabled()) {
-                java.srcDirs += ['src/newarch']
+                kotlin.srcDirs += ['src/newarch']
             } else {
-                java.srcDirs += ['src/oldarch']
+                kotlin.srcDirs += ['src/oldarch']
             }
         }
     }
@@ -132,7 +157,7 @@ android {
         compose true
     }
 
-    if (!isKotlin2OrHigher()) {
+    if (!isKotlin2OrHigher() && !isBuiltInKotlinEnabled()) {
         def composeVersion = getKotlinCompilerExtensionVersion()
         composeOptions {
             kotlinCompilerExtensionVersion = composeVersion
@@ -146,7 +171,7 @@ repositories {
 }
 
 dependencies {
-    api "ly.img:editor:1.82.1"
+    api "ly.img:editor:1.83.0-rc.1"
 
     implementation "androidx.activity:activity-ktx:1.9.0"
     implementation "androidx.appcompat:appcompat:1.7.1"

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

@@ -1,8 +1,8 @@
 package ly.img.editor.configuration.video.component
 
 import androidx.compose.runtime.Composable
+import ly.img.editor.configuration.video.VideoConfigurationBuilder
 import ly.img.editor.core.component.Timeline
-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
@@ -10,4 +10,4 @@ import ly.img.editor.core.component.remember
  * Implementation shows [Timeline] in the bottom panel.
  */
 @Composable
-fun rememberBottomPanel() = Timeline.remember()
+fun VideoConfigurationBuilder.rememberBottomPanel() = rememberTimeline()

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

@@ -0,0 +1,44 @@
+package ly.img.editor.configuration.video.component
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import ly.img.editor.configuration.video.VideoConfigurationBuilder
+import ly.img.editor.core.component.Timeline
+import ly.img.editor.core.component.remember
+import ly.img.editor.core.component.rememberAddAudio
+import ly.img.editor.core.component.rememberAddClip
+import ly.img.editor.core.component.rememberLoop
+import ly.img.editor.core.component.rememberPlayPause
+import ly.img.editor.core.component.rememberTimecode
+import ly.img.editor.core.component.rememberToggleExpanded
+
+/**
+ * The configuration of the timeline of the video editor.
+ *
+ * The [Timeline] component renders tracks alone, so this starter kit declares the header and the
+ * two lane buttons.
+ */
+@Composable
+fun VideoConfigurationBuilder.rememberTimeline() = Timeline.remember {
+    // highlight-starter-kit-timeline-header
+    headerListBuilder = {
+        Timeline.HeaderListBuilder.remember {
+            aligned(alignment = Alignment.Start) {
+                add { Timeline.Label.rememberTimecode() }
+            }
+            aligned(alignment = Alignment.CenterHorizontally) {
+                add { Timeline.Button.rememberPlayPause() }
+            }
+            aligned(alignment = Alignment.End) {
+                add { Timeline.Button.rememberLoop() }
+                add { Timeline.Button.rememberToggleExpanded() }
+            }
+        }
+    }
+    // highlight-starter-kit-timeline-header
+
+    // highlight-starter-kit-timeline-lane-buttons
+    addClipButton = { Timeline.Button.rememberAddClip() }
+    addAudioButton = { Timeline.Button.rememberAddAudio() }
+    // highlight-starter-kit-timeline-lane-buttons
+}

package/ios/IMGLYEditorModule.swift

@@ -69,7 +69,10 @@ import UIKit
       }
       // Remove the handler to prevent multiple invokations.
       self?.currentResultHandler = nil
-      self?.presentationController?.presentingViewController?.dismiss(animated: true)
+      // Release the editor, otherwise it stays alive and keeps playing until the next openEditor.
+      let controller = self?.presentationController
+      self?.presentationController = nil
+      controller?.presentingViewController?.dismiss(animated: true)
     }
 
     presentationController = builder(settings, preset, metadata) { [weak self] result in

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

@@ -8,9 +8,43 @@ extension VideoEditorConfiguration {
     BottomPanel.Configuration { builder in
       // highlight-starter-kit-bottom-panel
       builder.content { context in
-        DefaultTimelineComponent(context: context)
+        Timeline(context: context, configuration: .videoStarterKit)
       }
       // highlight-starter-kit-bottom-panel
     }
   }
 }
+
+// MARK: - Timeline
+
+private extension Timeline.Configuration {
+  /// The `Timeline` renders its tracks alone, so this starter kit declares the header and the two
+  /// lane buttons.
+  static var videoStarterKit: Timeline.Configuration {
+    Timeline.Configuration { builder in
+      // highlight-starter-kit-timeline-header
+      // The spacers are explicit, so inserting an item is predictable: put it before or after a
+      // `Timeline.Spacer` to choose which edge it hugs.
+      builder.header { _ in
+        Timeline.ItemGroup(placement: .leading) {
+          Timeline.Labels.timecode()
+          Timeline.Spacer()
+        }
+        Timeline.ItemGroup(placement: .center) {
+          Timeline.Buttons.playPause()
+        }
+        Timeline.ItemGroup(placement: .trailing) {
+          Timeline.Buttons.loop()
+          Timeline.Spacer()
+          Timeline.Buttons.toggleExpanded()
+        }
+      }
+      // highlight-starter-kit-timeline-header
+
+      // highlight-starter-kit-timeline-lane-buttons
+      builder.addClip = Timeline.Buttons.addClip()
+      builder.addAudio = Timeline.Buttons.addAudio()
+      // highlight-starter-kit-timeline-lane-buttons
+    }
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@imgly/editor-react-native",
-  "version": "1.82.1",
+  "version": "1.83.0-rc.1",
   "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.82.1/assets';
+    'https://cdn.img.ly/packages/imgly/cesdk-react-native/1.83.0-rc.1/assets';
 
   /**
    * Unique ID tied to your application's user.