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

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

@@ -0,0 +1,151 @@
+package ly.img.editor.configuration.memories.component
+
+import androidx.compose.animation.core.tween
+import androidx.compose.animation.expandVertically
+import androidx.compose.animation.fadeIn
+import androidx.compose.animation.fadeOut
+import androidx.compose.animation.shrinkVertically
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.defaultMinSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.collectAsState
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
+import kotlinx.coroutines.delay
+import ly.img.editor.configuration.memories.MemoriesViewModel
+import ly.img.editor.configuration.memories.scene.findTracks
+import ly.img.editor.configuration.memories.scene.readTimelineImages
+import ly.img.editor.configuration.memories.scene.readTitleClearTime
+import ly.img.editor.configuration.memories.sheet.createVolumeSheetType
+import ly.img.editor.configuration.memories.widget.ImageTimelineStrip
+import ly.img.editor.configuration.memories.widget.VideoControlPanel
+import ly.img.editor.configuration.memories.widget.buildStripItems
+import ly.img.editor.core.EditorScope
+import ly.img.editor.core.component.EditorComponent
+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.event.EditorEvent
+import ly.img.editor.core.state.EditorViewMode
+import ly.img.editor.core.theme.surface1
+
+fun bottomPanelConfiguration(viewModel: MemoriesViewModel): @Composable (EditorScope.() -> EditorComponent<*>) =
+    @Composable {
+        val isPlaying by viewModel.isPlaying.collectAsState()
+        val shouldHideUIForPreview by viewModel.shouldHideUIForPreview.collectAsState()
+        val isLooping by viewModel.isLooping.collectAsState()
+        val volume by viewModel.volume.collectAsState()
+
+        EditorComponent.remember {
+            scope = {
+                val historyTrigger by EditorTrigger.remember {
+                    editorContext.engine.editor.onHistoryUpdated()
+                }
+                remember(this, historyTrigger) {
+                    NavigationBar.Scope(parentScope = this)
+                }
+            }
+            enterTransition = {
+                expandVertically(animationSpec = tween(200)) + fadeIn()
+            }
+            exitTransition = {
+                shrinkVertically(animationSpec = tween(200)) + fadeOut()
+            }
+            visible = {
+                val state by editorContext.state.collectAsState()
+                (state.viewMode !is EditorViewMode.Preview) && !shouldHideUIForPreview
+            }
+            decoration = {
+                Box(
+                    modifier = Modifier
+                        .defaultMinSize(minHeight = 1.dp)
+                        .background(
+                            MaterialTheme.colorScheme.surface1.copy(alpha = 0.95f),
+                        ),
+                ) {
+                    val page = editorContext.engine.scene.getCurrentPage() ?: return@Box
+                    val engine = editorContext.engine
+
+                    // Current playback time, polled to drive the timeline strip cursor.
+                    var currentTime by remember { mutableStateOf(0.0) }
+
+                    LaunchedEffect(Unit) {
+                        while (true) {
+                            currentTime = engine.block.getPlaybackTime(page)
+                            delay(100) // Update every 100ms for smoother display
+                        }
+                    }
+
+                    Column(modifier = Modifier.fillMaxWidth()) {
+                        // The strip reads its items straight from the engine tracks and rebuilds
+                        // itself on every history change (apply, undo, redo) — see ImageTimelineStrip.
+                        ImageTimelineStrip(
+                            engine = engine,
+                            buildItems = {
+                                val tracks = findTracks(engine, page)
+                                if (tracks != null) {
+                                    val images = readTimelineImages(engine, tracks)
+                                    val titleClearTime = readTitleClearTime(engine, page, tracks)
+                                    buildStripItems(images, titleClearTime)
+                                } else {
+                                    emptyList()
+                                }
+                            },
+                            currentTime = currentTime,
+                            onSeekToTime = { time ->
+                                engine.block.setPlaybackTime(page, time)
+                            },
+                        )
+
+                        VideoControlPanel(
+                            isPlaying = isPlaying,
+                            isLooping = isLooping,
+                            onPlayPauseClick = {
+                                viewModel.setPlaying(!isPlaying)
+                                engine.block.setPlaying(
+                                    block = page,
+                                    enabled = !isPlaying,
+                                )
+                            },
+                            onRestartClick = {
+                                engine.block.setPlaybackTime(page, 0.0)
+                                engine.block.setPlaying(page, false)
+                                viewModel.setPlaying(false)
+                            },
+                            onLoopClick = {
+                                viewModel.toggleLoop()
+                            },
+                            onVolumeClick = {
+                                editorContext.eventHandler.send(
+                                    EditorEvent.Sheet.Open(
+                                        createVolumeSheetType(
+                                            initialVolume = volume,
+                                            onVolumeChange = { newVolume ->
+                                                viewModel.setVolume(newVolume)
+                                            },
+                                        ),
+                                    ),
+                                )
+                            },
+                            onFullscreenClick = {
+                                // Enter preview/fullscreen and start playing (the bottom panel is only
+                                // visible outside preview, so this always enters).
+                                viewModel.togglePreviewMode()
+                                engine.block.setPlaying(page, true)
+                                viewModel.setPlaying(true)
+                            },
+                        )
+                    }
+                }
+            }
+        }
+    }

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

@@ -0,0 +1,145 @@
+package ly.img.editor.configuration.memories.component
+
+import androidx.compose.animation.core.tween
+import androidx.compose.animation.expandVertically
+import androidx.compose.animation.fadeIn
+import androidx.compose.animation.fadeOut
+import androidx.compose.animation.shrinkVertically
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.collectAsState
+import androidx.compose.runtime.getValue
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.shadow
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.unit.dp
+import ly.img.editor.configuration.memories.MemoriesViewModel
+import ly.img.editor.configuration.memories.iconPack.Audiotrack
+import ly.img.editor.configuration.memories.iconPack.Image
+import ly.img.editor.configuration.memories.iconPack.Style
+import ly.img.editor.configuration.memories.sheet.createFilterStylesSheetType
+import ly.img.editor.core.EditorScope
+import ly.img.editor.core.component.Dock
+import ly.img.editor.core.component.EditorComponent
+import ly.img.editor.core.component.EditorComponentId
+import ly.img.editor.core.component.remember
+import ly.img.editor.core.event.EditorEvent
+import ly.img.editor.core.iconpack.IconPack
+import ly.img.editor.core.library.LibraryCategory
+import ly.img.editor.core.sheet.SheetType
+import ly.img.editor.core.state.EditorViewMode
+import ly.img.editor.core.theme.surface1
+import ly.img.editor.core.theme.surface3
+
+fun dockConfiguration(viewModel: MemoriesViewModel): @Composable (EditorScope.() -> EditorComponent<*>) = dock@{
+    val showImageGrid by viewModel.showImageGrid.collectAsState()
+    val shouldHideUIForPreview by viewModel.shouldHideUIForPreview.collectAsState()
+
+    Dock.remember {
+        enterTransition = {
+            expandVertically(animationSpec = tween(200)) + fadeIn()
+        }
+        exitTransition = {
+            shrinkVertically(animationSpec = tween(200)) + fadeOut()
+        }
+        decoration = { content ->
+            val state by editorContext.state.collectAsState()
+            Box(
+                modifier = Modifier
+                    .background(
+                        MaterialTheme.colorScheme.surface1.copy(alpha = 0.95f),
+                    )
+                    .padding(8.dp)
+                    .padding(horizontal = 32.dp)
+                    .shadow(
+                        elevation = 3.dp,
+                        shape = CircleShape,
+                        spotColor = Color.Black.copy(alpha = .6f),
+                    )
+                    .background(
+                        MaterialTheme.colorScheme.surface3.copy(alpha = 0.95f),
+                        shape = CircleShape,
+                    ),
+            ) {
+                content()
+            }
+        }
+        horizontalArrangement = { Arrangement.SpaceEvenly }
+        visible = {
+            val state by editorContext.state.collectAsState()
+            (state.viewMode !is EditorViewMode.Preview) && !shouldHideUIForPreview
+        }
+        listBuilder = {
+            Dock.ListBuilder.remember {
+                // Media (image + video) library button
+                add {
+                    Dock.Button.remember {
+                        id = { EditorComponentId("ly.img.images") }
+                        vectorIcon = { IconPack.Image }
+                        textString = { "Media" }
+                        onClick = {
+                            if (showImageGrid) {
+                                // Already open → treat as cancel
+                                viewModel.cancelOverlay()
+                            } else {
+                                // Seed the editable grid from the tracks (source of truth)
+                                viewModel.openImageGridFromTracks(editorContext)
+                            }
+                        }
+                    }
+                }
+
+                // Styles button
+                add {
+                    Dock.Button.remember {
+                        id = { EditorComponentId("ly.img.styles") }
+                        vectorIcon = { IconPack.Style }
+                        textString = { "Styles" }
+                        onClick = {
+                            editorContext.eventHandler.send(
+                                EditorEvent.Sheet.Open(
+                                    createFilterStylesSheetType(
+                                        thumbnails = viewModel.styleThumbnails.value,
+                                        // Preselect the currently-applied style on reopen.
+                                        initialSelectedId = viewModel.activeStyleId,
+                                    ) { style ->
+                                        viewModel.applyStyle(editorContext, style.id)
+                                    },
+                                ),
+                            )
+                        }
+                    }
+                }
+
+                // Audio library button
+                add {
+                    Dock.Button.remember {
+                        id = { EditorComponentId("ly.img.audio") }
+                        vectorIcon = { IconPack.Audiotrack }
+                        textString = { "Audio" }
+                        onClick = {
+                            // Open the SDK's built-in audio library
+                            editorContext.eventHandler.send(
+                                EditorEvent.Sheet.Open(
+                                    SheetType.LibraryAdd(
+                                        libraryCategory = LibraryCategory.Audio,
+                                    ),
+                                ),
+                            )
+                            editorContext.engine.scene.getCurrentPage()?.let { page ->
+                                editorContext.engine.block.setPlaying(page, false)
+                                // Keep the ViewModel in sync, else the next play/pause needs a double tap.
+                                viewModel.setPlaying(false)
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

package/android/src/main/kotlin/ly/img/editor/configuration/memories/component/ExportOverlay.kt

@@ -0,0 +1,229 @@
+package ly.img.editor.configuration.memories.component
+
+import androidx.compose.animation.core.LinearEasing
+import androidx.compose.animation.core.animateFloat
+import androidx.compose.animation.core.animateFloatAsState
+import androidx.compose.animation.core.infiniteRepeatable
+import androidx.compose.animation.core.rememberInfiniteTransition
+import androidx.compose.animation.core.tween
+import androidx.compose.foundation.Canvas
+import androidx.compose.foundation.background
+import androidx.compose.foundation.gestures.detectTapGestures
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.navigationBarsPadding
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.ButtonDefaults
+import androidx.compose.material3.Icon
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.ProgressIndicatorDefaults
+import androidx.compose.material3.Surface
+import androidx.compose.material3.Text
+import androidx.compose.material3.TextButton
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.geometry.Offset
+import androidx.compose.ui.geometry.Size
+import androidx.compose.ui.graphics.Brush
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.StrokeCap
+import androidx.compose.ui.graphics.drawscope.DrawScope
+import androidx.compose.ui.graphics.drawscope.Stroke
+import androidx.compose.ui.graphics.drawscope.rotate
+import androidx.compose.ui.input.pointer.pointerInput
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+import ly.img.editor.configuration.memories.MemoriesConfiguration
+import ly.img.editor.configuration.memories.iconPack.CheckCircle
+import ly.img.editor.configuration.memories.iconPack.Info
+import ly.img.editor.configuration.memories.model.ExportStatus
+import ly.img.editor.core.event.EditorEvent
+import ly.img.editor.core.iconpack.IconPack
+
+/** A bottom sheet over the editor showing export progress, then a share button (or an error). */
+@Composable
+fun MemoriesConfiguration.ExportOverlay() {
+    val status = exportStatus ?: return
+    Box(
+        modifier = Modifier
+            .fillMaxSize()
+            .background(MaterialTheme.colorScheme.onSurface.copy(alpha = 0.32f))
+            .pointerInput(Unit) { detectTapGestures { } },
+    ) {
+        Surface(
+            modifier = Modifier.fillMaxWidth().align(Alignment.BottomStart),
+            shape = RoundedCornerShape(topStart = 28.dp, topEnd = 28.dp),
+            shadowElevation = 16.dp,
+        ) {
+            Box(Modifier.fillMaxWidth().navigationBarsPadding().padding(16.dp)) {
+                when (status) {
+                    is ExportStatus.Loading -> ExportLoading(status)
+                    is ExportStatus.Success -> ExportContent(
+                        center = { ExportIcon(IconPack.CheckCircle, MaterialTheme.colorScheme.primary) },
+                        title = "Ready to share",
+                        text = "Your memory has been exported.",
+                        button = "Share",
+                        onClick = {
+                            exportStatus = null
+                            shareFile(file = status.file, mimeType = status.mimeType)
+                        },
+                    )
+                    is ExportStatus.Error -> ExportContent(
+                        center = { ExportIcon(IconPack.Info, MaterialTheme.colorScheme.error) },
+                        title = "Export failed",
+                        text = "Something went wrong while exporting.",
+                        button = "Dismiss",
+                        onClick = { exportStatus = null },
+                    )
+                }
+            }
+        }
+    }
+}
+
+@Composable
+private fun MemoriesConfiguration.ExportLoading(status: ExportStatus.Loading) {
+    ExportContent(
+        center = {
+            Box(contentAlignment = Alignment.Center) {
+                ExportProgressIndicator(progress = status.progress)
+                Text(
+                    text = "${(status.progress * 100).toInt()}%",
+                    style = MaterialTheme.typography.labelLarge,
+                    color = MaterialTheme.colorScheme.onSurface,
+                )
+            }
+        },
+        title = "Exporting",
+        text = "Creating your video memory.",
+        button = "Cancel",
+        buttonColor = MaterialTheme.colorScheme.error,
+        onClick = { editorContext.eventHandler.send(EditorEvent.Export.Cancel()) },
+    )
+}
+
+@Composable
+private fun ExportIcon(
+    icon: androidx.compose.ui.graphics.vector.ImageVector,
+    tint: Color,
+) {
+    Icon(imageVector = icon, contentDescription = null, modifier = Modifier.size(144.dp), tint = tint)
+}
+
+@Composable
+private fun ExportContent(
+    center: @Composable () -> Unit,
+    title: String,
+    text: String,
+    button: String,
+    buttonColor: Color = MaterialTheme.colorScheme.primary,
+    onClick: () -> Unit,
+) {
+    Column(
+        modifier = Modifier.fillMaxWidth(),
+        horizontalAlignment = Alignment.CenterHorizontally,
+        verticalArrangement = Arrangement.Center,
+    ) {
+        Spacer(Modifier.height(24.dp))
+        center()
+        Spacer(Modifier.height(24.dp))
+        Text(
+            title,
+            style = MaterialTheme.typography.headlineSmall,
+            color = MaterialTheme.colorScheme.onSurface,
+            textAlign = TextAlign.Center,
+        )
+        Spacer(Modifier.height(4.dp))
+        Text(
+            text,
+            style = MaterialTheme.typography.bodyMedium,
+            color = MaterialTheme.colorScheme.onSurfaceVariant,
+            textAlign = TextAlign.Center,
+        )
+        Spacer(Modifier.height(24.dp))
+        TextButton(onClick = onClick, colors = ButtonDefaults.textButtonColors(contentColor = buttonColor)) {
+            Text(button)
+        }
+    }
+}
+
+/** A ring that fills with [progress] (0..1), with a softly rotating gradient backdrop. */
+@Composable
+private fun ExportProgressIndicator(
+    progress: Float,
+    fillColor: Color = MaterialTheme.colorScheme.onSurfaceVariant,
+    gradientColor: Color = MaterialTheme.colorScheme.onSurface,
+    strokeWidth: Dp = 8.dp,
+    size: Dp = 144.dp,
+) {
+    val animatedProgress by animateFloatAsState(progress, ProgressIndicatorDefaults.ProgressAnimationSpec, label = "progress")
+    val rotation by rememberInfiniteTransition(label = "ring").animateFloat(
+        initialValue = 0f,
+        targetValue = 360f,
+        animationSpec = infiniteRepeatable(tween(1500, easing = LinearEasing)),
+        label = "rotation",
+    )
+    val gradient = Brush.sweepGradient(
+        0.02f to Color.Transparent,
+        0.5f to gradientColor.copy(alpha = 0.24f),
+        1f to Color.Transparent,
+    )
+
+    Canvas(Modifier.size(size - strokeWidth * 2)) {
+        val stroke = Stroke(width = strokeWidth.toPx(), cap = StrokeCap.Round)
+        rotate(-180f + rotation) { arc(gradient = gradient, startAngle = 0f, sweep = 180f, stroke = stroke) }
+        arc(color = fillColor, startAngle = 270f, sweep = animatedProgress * 360f, stroke = stroke)
+    }
+}
+
+private fun DrawScope.arc(
+    color: Color,
+    startAngle: Float,
+    sweep: Float,
+    stroke: Stroke,
+) {
+    val inset = stroke.width / 2
+    drawArc(
+        color,
+        startAngle,
+        sweep,
+        useCenter = false,
+        topLeft = Offset(inset, inset),
+        size = Size(
+            size.width - 2 * inset,
+            size.height - 2 * inset,
+        ),
+        style = stroke,
+    )
+}
+
+private fun DrawScope.arc(
+    gradient: Brush,
+    startAngle: Float,
+    sweep: Float,
+    stroke: Stroke,
+) {
+    val inset = stroke.width / 2
+    drawArc(
+        gradient,
+        startAngle,
+        sweep,
+        useCenter = false,
+        topLeft = Offset(inset, inset),
+        size = Size(
+            size.width - 2 * inset,
+            size.height - 2 * inset,
+        ),
+        style = stroke,
+    )
+}

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

@@ -0,0 +1,80 @@
+package ly.img.editor.configuration.memories.component
+
+import androidx.compose.animation.core.tween
+import androidx.compose.animation.fadeIn
+import androidx.compose.animation.fadeOut
+import androidx.compose.animation.slideInVertically
+import androidx.compose.animation.slideOutVertically
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.material3.MaterialTheme
+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.Modifier
+import ly.img.editor.configuration.memories.MemoriesViewModel
+import ly.img.editor.core.EditorScope
+import ly.img.editor.core.component.EditorComponent
+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.rememberRedo
+import ly.img.editor.core.component.rememberUndo
+import ly.img.editor.core.theme.surface3
+
+fun navigationBarConfiguration(viewModel: MemoriesViewModel): @Composable (EditorScope.() -> EditorComponent<*>) = {
+    val isPreviewMode by viewModel.isPreviewMode.collectAsState()
+    val shouldHideUIForPreview by viewModel.shouldHideUIForPreview.collectAsState()
+
+    NavigationBar.remember {
+        scope = {
+            val historyTrigger by EditorTrigger.remember {
+                editorContext.engine.editor.onHistoryUpdated()
+            }
+            remember(this, historyTrigger) {
+                NavigationBar.Scope(parentScope = this)
+            }
+        }
+        visible = { !shouldHideUIForPreview }
+        enterTransition = {
+            slideInVertically(
+                animationSpec = tween(100),
+                initialOffsetY = { -it },
+            ) + fadeIn(tween(100))
+        }
+        exitTransition = {
+            slideOutVertically(
+                animationSpec = tween(100),
+                targetOffsetY = { -it },
+            ) + fadeOut(tween(100))
+        }
+        decoration = { content ->
+            Box(
+                modifier = Modifier
+                    .background(
+                        color = MaterialTheme.colorScheme.surface3.copy(alpha = 0.95f),
+                    ),
+            ) {
+                content()
+            }
+        }
+        listBuilder = {
+            NavigationBar.ListBuilder.remember {
+                this.aligned(Alignment.Start) {
+                    add { NavigationBar.Button.rememberCloseEditor {} }
+                }
+                this.aligned(Alignment.CenterHorizontally) {
+                    add { NavigationBar.Button.rememberUndo {} }
+                    add { NavigationBar.Button.rememberRedo {} }
+                }
+                this.aligned(Alignment.End) {
+                    add { NavigationBar.Button.rememberExport() }
+                }
+            }
+        }
+    }
+}