@imgly/editor-react-native 1.80.0-rc.1 → 1.81.0-rc.0

package/android/src/main/kotlin/ly/img/editor/configuration/memories/widget/VideoControlPanel.kt

@@ -0,0 +1,180 @@
+package ly.img.editor.configuration.memories.widget
+
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.material.ripple.rememberRipple
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.Icon
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import ly.img.editor.configuration.memories.iconPack.Fullscreen
+import ly.img.editor.configuration.memories.iconPack.Pause
+import ly.img.editor.configuration.memories.iconPack.PlayArrow
+import ly.img.editor.configuration.memories.iconPack.RepeatOff
+import ly.img.editor.configuration.memories.iconPack.RepeatOn
+import ly.img.editor.configuration.memories.iconPack.SkipPrevious
+import ly.img.editor.configuration.memories.iconPack.VolumeUp
+import ly.img.editor.core.iconpack.IconPack
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun VideoControlPanel(
+    isPlaying: Boolean,
+    isLooping: Boolean,
+    onPlayPauseClick: () -> Unit,
+    onRestartClick: () -> Unit,
+    onLoopClick: () -> Unit,
+    onVolumeClick: () -> Unit,
+    onFullscreenClick: () -> Unit,
+    modifier: Modifier = Modifier,
+) {
+    Column(
+        modifier = modifier.fillMaxWidth(),
+    ) {
+        Box(
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(horizontal = 12.dp, vertical = 0.dp),
+        ) {
+            // Left: Volume button (where the time used to be)
+            Icon(
+                imageVector = IconPack.VolumeUp,
+                contentDescription = "Volume",
+                tint = MaterialTheme.colorScheme.onBackground,
+                modifier = Modifier
+                    .align(Alignment.CenterStart)
+                    .size(32.dp)
+                    .clickable(
+                        interactionSource = remember { MutableInteractionSource() },
+                        indication = rememberRipple(
+                            bounded = false,
+                            radius = 20.dp,
+                        ),
+                    ) { onVolumeClick() }
+                    .padding(vertical = 4.dp),
+            )
+
+            // Center: Play controls
+            Box(
+                modifier = Modifier.align(Alignment.Center),
+                contentAlignment = Alignment.Center,
+            ) {
+                Row(
+                    horizontalArrangement = Arrangement.spacedBy(4.dp),
+                    verticalAlignment = Alignment.CenterVertically,
+                ) {
+                    // Restart button
+                    Icon(
+                        imageVector = IconPack.SkipPrevious,
+                        contentDescription = "Restart",
+                        tint = MaterialTheme.colorScheme.onBackground,
+                        modifier = Modifier
+                            .size(48.dp)
+                            .clickable(
+                                interactionSource = remember { MutableInteractionSource() },
+                                indication = rememberRipple(
+                                    bounded = false,
+                                    radius = 28.dp,
+                                ),
+                            ) { onRestartClick() }
+                            .padding(vertical = 8.dp),
+                    )
+
+                    // Play/Pause button
+                    Icon(
+                        imageVector = if (isPlaying) {
+                            IconPack.Pause
+                        } else {
+                            IconPack.PlayArrow
+                        },
+                        contentDescription = if (isPlaying) "Pause" else "Play",
+                        tint = MaterialTheme.colorScheme.onBackground,
+                        modifier = Modifier
+                            .size(48.dp)
+                            .clickable(
+                                interactionSource = remember { MutableInteractionSource() },
+                                indication = rememberRipple(
+                                    bounded = false,
+                                    radius = 28.dp,
+                                ),
+                            ) { onPlayPauseClick() }
+                            .padding(vertical = 8.dp),
+                    )
+
+                    // Loop button
+                    Icon(
+                        imageVector = if (isLooping) IconPack.RepeatOn else IconPack.RepeatOff,
+                        contentDescription = if (isLooping) "Disable Loop" else "Enable Loop",
+                        tint = if (isLooping) {
+                            MaterialTheme.colorScheme.primary
+                        } else {
+                            MaterialTheme.colorScheme.onBackground
+                        },
+                        modifier = Modifier
+                            .size(48.dp)
+                            .clickable(
+                                interactionSource = remember { MutableInteractionSource() },
+                                indication = rememberRipple(
+                                    bounded = false,
+                                    radius = 28.dp,
+                                ),
+                            ) { onLoopClick() }
+                            .padding(vertical = 8.dp),
+                    )
+                }
+            }
+
+            // Right: Fullscreen button (moved from the top navigation bar)
+            Icon(
+                imageVector = IconPack.Fullscreen,
+                contentDescription = "Fullscreen",
+                tint = MaterialTheme.colorScheme.onBackground,
+                modifier = Modifier
+                    .align(Alignment.CenterEnd)
+                    .size(32.dp)
+                    .clickable(
+                        interactionSource = remember { MutableInteractionSource() },
+                        indication = rememberRipple(
+                            bounded = false,
+                            radius = 20.dp,
+                        ),
+                    ) { onFullscreenClick() }
+                    .padding(vertical = 4.dp),
+            )
+        }
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+fun VideoControlPanelPreview() {
+    var isPlaying by remember { mutableStateOf(false) }
+    var isLooping by remember { mutableStateOf(true) }
+
+    MaterialTheme {
+        VideoControlPanel(
+            isPlaying = isPlaying,
+            isLooping = isLooping,
+            onPlayPauseClick = { isPlaying = !isPlaying },
+            onRestartClick = { isPlaying = false },
+            onLoopClick = { isLooping = !isLooping },
+            onVolumeClick = { /* Volume control */ },
+            onFullscreenClick = { /* Enter fullscreen */ },
+        )
+    }
+}

package/android/src/main/kotlin/ly/img/editor/configuration/memories/widget/VideoThumbnail.kt

@@ -0,0 +1,110 @@
+package ly.img.editor.configuration.memories.widget
+
+import android.content.Context
+import android.graphics.Bitmap
+import android.media.MediaMetadataRetriever
+import android.net.Uri
+import android.os.Build
+import android.util.LruCache
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.produceState
+import androidx.compose.ui.platform.LocalContext
+import kotlinx.coroutines.Dispatchers
+import kotlinx.coroutines.withContext
+import java.io.File
+import java.io.FileOutputStream
+import java.util.concurrent.ConcurrentHashMap
+
+private const val ANDROID_ASSET_PREFIX = "file:///android_asset/"
+
+// Small process-wide cache so scrolling / recomposition doesn't re-decode, and the grid and the
+// timeline strip share frames for the same video.
+private val thumbnailCache = LruCache<String, Bitmap>(16)
+
+/**
+ * Returns a single still frame from the middle of the video at [url] for use as a thumbnail, or
+ * null while it is still being decoded. Uses the platform [MediaMetadataRetriever] (no extra
+ * dependency) off the main thread, and caches the result by URL.
+ *
+ * Handles `content://` (picked media), `file://`, and bundled `file:///android_asset/...` URIs.
+ */
+@Composable
+fun rememberVideoThumbnail(
+    url: String,
+    targetPx: Int = 256,
+): Bitmap? {
+    val context = LocalContext.current
+    return produceState<Bitmap?>(initialValue = thumbnailCache.get(url), key1 = url) {
+        if (value != null) return@produceState
+        value = withContext(Dispatchers.IO) {
+            extractMiddleFrame(context, url, targetPx)?.also { thumbnailCache.put(url, it) }
+        }
+    }.value
+}
+
+// Cache of already-written thumbnail files (video URL -> file:// URI) so a repeated request reuses
+// the PNG on disk instead of decoding another frame. Concurrent because several thumbnail requests
+// run on Dispatchers.IO threads at once.
+private val thumbnailFileCache = ConcurrentHashMap<String, String>()
+
+/**
+ * Extract the middle frame of the video at [url], write it to a PNG in the app cache, and return its
+ * `file://` URI (suitable for an engine image fill), or null if a frame can't be decoded. Cached by
+ * URL. Runs its decode + write off the main thread.
+ */
+suspend fun videoThumbnailFileUri(
+    context: Context,
+    url: String,
+    targetPx: Int = 512,
+): String? {
+    thumbnailFileCache[url]?.let { cached ->
+        if (Uri.parse(cached).path?.let { File(it).exists() } == true) return cached
+    }
+    return withContext(Dispatchers.IO) {
+        val bitmap = extractMiddleFrame(context, url, targetPx) ?: return@withContext null
+        try {
+            val dir = File(context.cacheDir, "burst_thumbs").apply { mkdirs() }
+            val file = File(dir, "thumb_${url.hashCode()}.png")
+            FileOutputStream(file).use { bitmap.compress(Bitmap.CompressFormat.PNG, 90, it) }
+            Uri.fromFile(file).toString().also { thumbnailFileCache[url] = it }
+        } catch (e: Exception) {
+            null
+        }
+    }
+}
+
+private fun extractMiddleFrame(
+    context: Context,
+    url: String,
+    targetPx: Int,
+): Bitmap? {
+    val retriever = MediaMetadataRetriever()
+    return try {
+        if (url.startsWith(ANDROID_ASSET_PREFIX)) {
+            // Bundled assets aren't real files: open via an asset file descriptor.
+            context.assets.openFd(url.removePrefix(ANDROID_ASSET_PREFIX)).use { afd ->
+                retriever.setDataSource(afd.fileDescriptor, afd.startOffset, afd.length)
+            }
+        } else {
+            retriever.setDataSource(context, Uri.parse(url))
+        }
+        val durationMs = retriever.extractMetadata(MediaMetadataRetriever.METADATA_KEY_DURATION)?.toLongOrNull() ?: 0L
+        val middleUs = (durationMs / 2) * 1000
+        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O_MR1) {
+            // Decode straight to a small bitmap to keep memory low.
+            retriever.getScaledFrameAtTime(
+                middleUs,
+                MediaMetadataRetriever.OPTION_CLOSEST_SYNC,
+                targetPx,
+                targetPx,
+            )
+        } else {
+            retriever.getFrameAtTime(middleUs, MediaMetadataRetriever.OPTION_CLOSEST_SYNC)
+        }
+    } catch (e: Exception) {
+        null
+    } finally {
+        runCatching { retriever.release() }
+    }
+}

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

@@ -110,13 +110,6 @@ suspend fun VideoConfigurationBuilder.onLoadAssetSources() {
         }
     }
 
-    // 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 = "ly.img.image.upload",

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

@@ -27,6 +27,7 @@ import ly.img.editor.core.component.rememberSplit
 import ly.img.editor.core.component.rememberTextBackground
 import ly.img.editor.core.component.rememberTextOnPath
 import ly.img.editor.core.component.rememberTextPresets
+import ly.img.editor.core.component.rememberTransition
 import ly.img.editor.core.component.rememberVoiceover
 import ly.img.editor.core.component.rememberVolume
 
@@ -50,6 +51,7 @@ fun VideoConfigurationBuilder.rememberInspectorBar() = InspectorBar.remember {
             add { InspectorBar.Button.rememberClipSpeed() } // Video
             add { InspectorBar.Button.rememberCrop() } // Video, Image
             add { InspectorBar.Button.rememberAnimations() } // Video, Image, Sticker, Shape, Text
+            add { InspectorBar.Button.rememberTransition() } // Video, Image
             add { InspectorBar.Button.rememberAdjustments() } // Video, Image
             add { InspectorBar.Button.rememberFilter() } // Video, Image
             add { InspectorBar.Button.rememberEffect() } // Video, Image

package/ios/StarterKits/Video/callbacks/OnCreate+Video.swift

@@ -93,7 +93,7 @@ public extension VideoEditorConfiguration {
       "ly.img.sticker", "ly.img.vector.shape", "ly.img.filter", "ly.img.color.palette",
       "ly.img.effect", "ly.img.blur", "ly.img.typeface", "ly.img.crop.presets",
       "ly.img.page.presets", "ly.img.text", "ly.img.text.styles", "ly.img.text.curves", "ly.img.text.components",
-      "ly.img.image", "ly.img.video", "ly.img.audio",
+      "ly.img.image", "ly.img.video", "ly.img.audio", "ly.img.caption.presets",
     ]
     try await withThrowingTaskGroup(of: String.self) { group in
       for id in sourceIDs {

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

@@ -19,6 +19,7 @@ extension VideoEditorConfiguration {
         Dock.Buttons.overlaysLibrary() // Video overlays
         Dock.Buttons.textLibrary() // Text tools
         Dock.Buttons.stickersAndShapesLibrary() // Stickers and shapes
+        Dock.Buttons.captions() // Caption creation, import and styling
         Dock.Buttons.audioLibrary() // Audio tracks
         Dock.Buttons.voiceover() // Voice recording
         Dock.Buttons.resize() // Aspect ratio and canvas size

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

@@ -8,6 +8,10 @@ extension VideoEditorConfiguration {
     InspectorBar.Configuration { builder in
       // highlight-starter-kit-inspector-bar
       builder.items { _ in
+        // Caption-only buttons, kept at the start so a caption selection leads with them.
+        InspectorBar.Buttons.editCaptions()
+        InspectorBar.Buttons.captionStyle()
+
         InspectorBar.Buttons.replace()
 
         InspectorBar.Buttons.editText()

package/package.json

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