@imgly/editor-react-native 1.72.3 → 1.73.1

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

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

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

@@ -0,0 +1,45 @@
+@file:Suppress("UnusedReceiverParameter")
+
+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.CanvasMenu
+import ly.img.editor.core.component.EditorComponentId
+import ly.img.editor.core.component.remember
+import ly.img.editor.core.component.rememberBringForward
+import ly.img.editor.core.component.rememberDelete
+import ly.img.editor.core.component.rememberDuplicate
+import ly.img.editor.core.component.rememberSelectGroup
+import ly.img.editor.core.component.rememberSendBackward
+
+/**
+ * The configuration of the component that is displayed as horizontal list of items next to
+ * the selected design block.
+ */
+@Composable
+fun VideoConfigurationBuilder.rememberCanvasMenu() = CanvasMenu.remember {
+    listBuilder = {
+        CanvasMenu.ListBuilder.remember {
+            add { CanvasMenu.Button.rememberSelectGroup() }
+            if (editorContext.isSelectionInGroup) {
+                add {
+                    CanvasMenu.Divider.remember {
+                        id = { EditorComponentId("ly.img.component.canvasMenu.divider1") }
+                    }
+                }
+            }
+            add { CanvasMenu.Button.rememberBringForward() }
+            add { CanvasMenu.Button.rememberSendBackward() }
+            if (editorContext.canSelectionMove) {
+                add {
+                    CanvasMenu.Divider.remember {
+                        id = { EditorComponentId("ly.img.component.canvasMenu.divider2") }
+                    }
+                }
+            }
+            add { CanvasMenu.Button.rememberDuplicate() }
+            add { CanvasMenu.Button.rememberDelete() }
+        }
+    }
+}

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

@@ -0,0 +1,71 @@
+@file:Suppress("UnusedReceiverParameter", "UnusedFlow")
+@file:OptIn(ExperimentalCoroutinesApi::class)
+
+package ly.img.editor.configuration.video.component
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.remember
+import kotlinx.coroutines.ExperimentalCoroutinesApi
+import ly.img.editor.configuration.video.VideoConfigurationBuilder
+import ly.img.editor.core.component.Dock
+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
+import ly.img.editor.core.component.rememberSystemGallery
+import ly.img.editor.core.component.rememberTextLibrary
+import ly.img.editor.core.component.rememberVoiceoverRecord
+import ly.img.editor.core.iconpack.AddCameraBackground
+import ly.img.editor.core.iconpack.AddGalleryBackground
+import ly.img.editor.core.iconpack.IconPack
+
+/**
+ * The configuration of the component that is displayed as horizontal list of items at the bottom of the editor.
+ */
+@Composable
+fun VideoConfigurationBuilder.rememberDock() = Dock.remember {
+    scope = {
+        val activeSceneTrigger by EditorTrigger.remember {
+            editorContext.engine.scene.onActiveChanged()
+        }
+        // Update Dock whenever the active scene changes.
+        remember(this, activeSceneTrigger) {
+            Dock.Scope(parentScope = this)
+        }
+    }
+    horizontalArrangement = {
+        // All buttons should have equal size
+        Arrangement.SpaceEvenly
+    }
+    listBuilder = {
+        // highlight-starter-kit-imgly-camera
+        Dock.ListBuilder.remember {
+            add {
+                Dock.Button.rememberSystemGallery {
+                    vectorIcon = { IconPack.AddGalleryBackground }
+                }
+            }
+            add {
+                // As an alternative to the system camera we also provide our own camera tech accessible via [Dock.Button.rememberImglyCamera].
+                // In order to make it work the following dependency is required:
+                // implementation "ly.img:camera:<same version as editor>".
+                Dock.Button.rememberSystemCamera(captureVideo = { true }) {
+                    vectorIcon = { IconPack.AddCameraBackground }
+                }
+            }
+            add { Dock.Button.rememberOverlaysLibrary() }
+            add { Dock.Button.rememberTextLibrary() }
+            add { Dock.Button.rememberStickersAndShapesLibrary() }
+            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

@@ -0,0 +1,68 @@
+@file:Suppress("UnusedReceiverParameter")
+
+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.InspectorBar
+import ly.img.editor.core.component.remember
+import ly.img.editor.core.component.rememberAdjustments
+import ly.img.editor.core.component.rememberAnimations
+import ly.img.editor.core.component.rememberBlur
+import ly.img.editor.core.component.rememberClipSpeed
+import ly.img.editor.core.component.rememberCrop
+import ly.img.editor.core.component.rememberDelete
+import ly.img.editor.core.component.rememberDuplicate
+import ly.img.editor.core.component.rememberEditText
+import ly.img.editor.core.component.rememberEffect
+import ly.img.editor.core.component.rememberEnterGroup
+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
+import ly.img.editor.core.component.rememberSplit
+import ly.img.editor.core.component.rememberTextBackground
+import ly.img.editor.core.component.rememberVoiceover
+import ly.img.editor.core.component.rememberVolume
+
+/**
+ * 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.
+ */
+@Composable
+fun VideoConfigurationBuilder.rememberInspectorBar() = InspectorBar.remember {
+    listBuilder = {
+        InspectorBar.ListBuilder.remember {
+            add { InspectorBar.Button.rememberVoiceover() } // Voiceover Audio
+            add { InspectorBar.Button.rememberReplace() } // Video, Image, Sticker, Audio
+            add { InspectorBar.Button.rememberEditText() } // Text
+            add { InspectorBar.Button.rememberFormatText() } // Text
+            add { InspectorBar.Button.rememberFillStroke() } // Page, Video, Image, Shape, Text
+            add { InspectorBar.Button.rememberTextBackground() } // Text
+            add { InspectorBar.Button.rememberVolume() } // Video, Audio
+            add { InspectorBar.Button.rememberClipSpeed() } // Video
+            add { InspectorBar.Button.rememberCrop() } // Video, Image
+            add { InspectorBar.Button.rememberAnimations() } // Video, Image, Sticker, Shape, Text
+            add { InspectorBar.Button.rememberAdjustments() } // Video, Image
+            add { InspectorBar.Button.rememberFilter() } // Video, Image
+            add { InspectorBar.Button.rememberEffect() } // Video, Image
+            add { InspectorBar.Button.rememberBlur() } // Video, Image
+            add { InspectorBar.Button.rememberShape() } // Video, Image, Shape
+            add { InspectorBar.Button.rememberSelectGroup() } // Video, Image, Sticker, Shape, Text
+            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/configuration/video/component/NavigationBar.kt

@@ -0,0 +1,57 @@
+@file:Suppress("UnusedReceiverParameter")
+
+package ly.img.editor.configuration.video.component
+
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Alignment
+import ly.img.editor.configuration.video.VideoConfigurationBuilder
+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
+
+/**
+ * The configuration of the component that is displayed as horizontal list of items at the top of the editor.
+ */
+@Composable
+fun VideoConfigurationBuilder.rememberNavigationBar() = NavigationBar.remember {
+    scope = {
+        val activeSceneTrigger by EditorTrigger.remember {
+            editorContext.engine.scene.onActiveChanged()
+        }
+        val historyTrigger by EditorTrigger.remember(activeSceneTrigger) {
+            editorContext.engine.editor.onHistoryUpdated()
+        }
+        // Update NavigationBar whenever the active scene or editor history changes.
+        remember(this, historyTrigger) {
+            NavigationBar.Scope(parentScope = this)
+        }
+    }
+    listBuilder = {
+        NavigationBar.ListBuilder.remember {
+            aligned(alignment = Alignment.Start) {
+                add { NavigationBar.Button.rememberCloseEditor() }
+            }
+            aligned(alignment = Alignment.End) {
+                add { NavigationBar.Button.rememberUndo() }
+                add { NavigationBar.Button.rememberRedo() }
+                add {
+                    NavigationBar.Button.rememberExport {
+                        enabled = {
+                            // Show export button if the duration of scene is greater than 0
+                            remember(this) {
+                                editorContext.engine.scene.get()?.let {
+                                    editorContext.engine.block.getDuration(it) > 0
+                                } ?: false
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

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

@@ -0,0 +1,421 @@
+@file:Suppress("UnusedReceiverParameter")
+
+package ly.img.editor.configuration.video.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.progressSemantics
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.AlertDialog
+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.runtime.remember
+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.platform.LocalDensity
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.window.DialogProperties
+import ly.img.editor.configuration.video.VideoConfigurationBuilder
+import ly.img.editor.configuration.video.iconPack.CheckCircleOutline
+import ly.img.editor.configuration.video.iconPack.ErrorOutline
+import ly.img.editor.configuration.video.iconPack.IconPack
+import ly.img.editor.configuration.video.model.ExportStatus
+import ly.img.editor.core.R
+import ly.img.editor.core.component.EditorComponent
+import ly.img.editor.core.component.remember
+import ly.img.editor.core.event.EditorEvent
+import ly.img.editor.core.theme.LocalExtendedColorScheme
+
+/**
+ * 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 VideoConfigurationBuilder.rememberOverlay() = EditorComponent.remember {
+    decoration = {
+        // Other than the main overlay also display export related overlays
+        Overlay()
+        if (exportStatus != null) {
+            ExportOverlay()
+        }
+    }
+}
+
+/**
+ * The export related overlay composable.
+ *
+ * @param loading the export loading composable.
+ * @param success the export success composable.
+ * @param error the export error composable.
+ */
+@Composable
+fun VideoConfigurationBuilder.ExportOverlay(
+    loading: @Composable VideoConfigurationBuilder.(ExportStatus.Loading) -> Unit = {
+        ExportLoading(it)
+    },
+    success: @Composable VideoConfigurationBuilder.(ExportStatus.Success) -> Unit = {
+        ExportSuccess(it)
+    },
+    error: @Composable VideoConfigurationBuilder.(ExportStatus.Error) -> Unit = {
+        ExportError()
+    },
+) {
+    Box(
+        modifier = Modifier
+            .fillMaxSize()
+            .background(MaterialTheme.colorScheme.onSurface.copy(alpha = 0.32f))
+            .pointerInput(Unit) {
+                detectTapGestures {
+                    // do nothing
+                }
+            },
+    ) {
+        Surface(
+            modifier = Modifier
+                .fillMaxWidth()
+                .align(Alignment.BottomStart),
+            shape = RoundedCornerShape(
+                topStart = 28.0.dp,
+                topEnd = 28.0.dp,
+                bottomEnd = 0.0.dp,
+                bottomStart = 0.0.dp,
+            ),
+            shadowElevation = 16.dp,
+        ) {
+            Box(
+                Modifier
+                    .fillMaxWidth()
+                    .navigationBarsPadding()
+                    .padding(all = 16.dp),
+            ) {
+                val localExportStatus = exportStatus
+                when (localExportStatus) {
+                    is ExportStatus.Loading -> loading(localExportStatus)
+                    is ExportStatus.Success -> success(localExportStatus)
+                    is ExportStatus.Error -> error(localExportStatus)
+                    null -> {} // not possible
+                }
+            }
+        }
+    }
+}
+
+/**
+ * The export loading composable.
+ *
+ * @param status the current status of the export.
+ */
+@Composable
+fun VideoConfigurationBuilder.ExportLoading(status: ExportStatus.Loading) {
+    ExportOverlayContent(
+        title = stringResource(R.string.ly_img_editor_dialog_export_progress_title),
+        text = stringResource(R.string.ly_img_editor_dialog_export_progress_text),
+        button = stringResource(R.string.ly_img_editor_dialog_export_progress_button_dismiss),
+        buttonColor = MaterialTheme.colorScheme.error,
+        onClick = { showCancelExportConfirmationDialog = true },
+        centerContent = {
+            Box {
+                ExportProgressIndicator(progress = status.progress)
+                Text(
+                    text = "${(status.progress * 100).toInt()}%",
+                    style = MaterialTheme.typography.labelLarge,
+                    color = MaterialTheme.colorScheme.onSurface,
+                    modifier = Modifier.align(Alignment.Center),
+                )
+            }
+        },
+    )
+    if (showCancelExportConfirmationDialog) {
+        CancelExportConfirmationDialog()
+    }
+}
+
+/**
+ * The export success composable.
+ *
+ * @param status the current status of the export.
+ */
+@Composable
+fun VideoConfigurationBuilder.ExportSuccess(status: ExportStatus.Success) {
+    ExportOverlayContent(
+        title = stringResource(R.string.ly_img_editor_dialog_export_success_title),
+        text = stringResource(R.string.ly_img_editor_dialog_export_success_text),
+        button = stringResource(R.string.ly_img_editor_dialog_export_success_button_dismiss),
+        onClick = {
+            exportStatus = null
+            shareFile(file = status.file, mimeType = status.mimeType)
+        },
+        centerContent = {
+            Icon(
+                imageVector = IconPack.CheckCircleOutline,
+                contentDescription = null,
+                modifier = Modifier.size(144.dp),
+                tint = LocalExtendedColorScheme.current.green.color,
+            )
+        },
+    )
+}
+
+/**
+ * The error loading composable.
+ */
+@Composable
+fun VideoConfigurationBuilder.ExportError() {
+    ExportOverlayContent(
+        title = stringResource(R.string.ly_img_editor_dialog_export_error_title),
+        text = stringResource(R.string.ly_img_editor_dialog_export_error_text),
+        button = stringResource(R.string.ly_img_editor_dialog_export_error_button_dismiss),
+        onClick = { exportStatus = null },
+        centerContent = {
+            Icon(
+                imageVector = IconPack.ErrorOutline,
+                contentDescription = null,
+                modifier = Modifier.size(144.dp),
+                tint = MaterialTheme.colorScheme.error,
+            )
+        },
+    )
+}
+
+/**
+ * The confirmation dialog to cancel the export process.
+ */
+@Composable
+fun VideoConfigurationBuilder.CancelExportConfirmationDialog() {
+    AlertDialog(
+        icon = {
+            Icon(
+                imageVector = IconPack.ErrorOutline,
+                contentDescription = null,
+                tint = MaterialTheme.colorScheme.error,
+            )
+        },
+        title = {
+            Text(text = stringResource(R.string.ly_img_editor_dialog_export_cancel_title))
+        },
+        text = {
+            Text(text = stringResource(R.string.ly_img_editor_dialog_export_cancel_text))
+        },
+        confirmButton = {
+            TextButton(
+                onClick = {
+                    showCancelExportConfirmationDialog = false
+                    editorContext.eventHandler.send(EditorEvent.Export.Cancel())
+                },
+                colors = ButtonDefaults.textButtonColors(
+                    containerColor = MaterialTheme.colorScheme.errorContainer,
+                    contentColor = MaterialTheme.colorScheme.onErrorContainer,
+                ),
+            ) {
+                Text(stringResource(R.string.ly_img_editor_dialog_export_cancel_button_confirm))
+            }
+        },
+        dismissButton = {
+            TextButton(
+                onClick = {
+                    showCancelExportConfirmationDialog = false
+                },
+            ) {
+                Text(stringResource(R.string.ly_img_editor_dialog_export_cancel_button_dismiss))
+            }
+        },
+        onDismissRequest = {
+            showCancelExportConfirmationDialog = false
+        },
+        properties = DialogProperties(dismissOnBackPress = false, dismissOnClickOutside = false),
+    )
+}
+
+/**
+ * Generic export overlay content that should be used by all the states of the [ExportStatus].
+ *
+ * @param modifier the modifier.
+ * @param title the title of the export state.
+ * @param text the title of the export state.
+ * @param button the action button of the export state.
+ */
+@Composable
+fun VideoConfigurationBuilder.ExportOverlayContent(
+    modifier: Modifier = Modifier.fillMaxWidth(),
+    title: String,
+    text: String,
+    button: String,
+    buttonColor: Color = MaterialTheme.colorScheme.primary,
+    onClick: () -> Unit,
+    centerContent: @Composable () -> Unit,
+) {
+    Column(
+        modifier = modifier,
+        verticalArrangement = Arrangement.Center,
+        horizontalAlignment = Alignment.CenterHorizontally,
+    ) {
+        Spacer(modifier = Modifier.height(24.dp))
+        centerContent()
+        Spacer(modifier = Modifier.height(24.dp))
+        Text(
+            text = title,
+            style = MaterialTheme.typography.headlineSmall,
+            color = MaterialTheme.colorScheme.onSurface,
+            textAlign = TextAlign.Center,
+        )
+        Spacer(modifier = Modifier.height(4.dp))
+        Text(
+            text = text,
+            style = MaterialTheme.typography.bodyMedium,
+            color = MaterialTheme.colorScheme.onSurfaceVariant,
+            textAlign = TextAlign.Center,
+        )
+        Spacer(modifier = Modifier.height(24.dp))
+        TextButton(
+            onClick = onClick,
+            colors = ButtonDefaults.textButtonColors(
+                contentColor = buttonColor,
+            ),
+        ) {
+            Text(button)
+        }
+    }
+}
+
+/**
+ * Circular export progress indicator.
+ *
+ * @param progress the progress of the export, between 0F and 1F.
+ * @param fillColor the fill color of the circle.
+ * @param gradientColor the gradient color of the circle.
+ * @param strokeWidth the stroke width of the circle.
+ * @param strokeWidth the size (width/height) of the circle.
+ */
+@Composable
+fun VideoConfigurationBuilder.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(
+        targetValue = progress,
+        animationSpec = ProgressIndicatorDefaults.ProgressAnimationSpec,
+    )
+
+    val stroke = with(LocalDensity.current) {
+        Stroke(width = strokeWidth.toPx(), cap = StrokeCap.Round)
+    }
+
+    val transition = rememberInfiniteTransition()
+    val rotationAngle by transition.animateFloat(
+        initialValue = 0f,
+        targetValue = 360f,
+        animationSpec = infiniteRepeatable(
+            animation = tween(1500, easing = LinearEasing),
+        ),
+        label = "Gradient Rotation",
+    )
+
+    val sweepGradient = remember(gradientColor) {
+        Brush.sweepGradient(
+            colorStops = listOf(
+                0.02f to Color.Transparent,
+                0.5f to gradientColor.copy(alpha = 0.24f),
+                1f to Color.Transparent,
+            ).toTypedArray(),
+        )
+    }
+
+    Canvas(
+        modifier = Modifier
+            .progressSemantics(animatedProgress)
+            .size(size - strokeWidth * 2),
+    ) {
+        drawSweepGradientCircularIndicator(
+            rotationAngle = rotationAngle,
+            stroke = stroke,
+            gradientBrush = sweepGradient,
+        )
+
+        drawCircularIndicator(
+            startAngle = 270f,
+            sweep = animatedProgress * 360f,
+            color = fillColor,
+            stroke = stroke,
+        )
+    }
+}
+
+private fun DrawScope.drawSweepGradientCircularIndicator(
+    rotationAngle: Float,
+    stroke: Stroke,
+    gradientBrush: Brush,
+) {
+    rotate(-180f + rotationAngle) {
+        val diameterOffset = stroke.width / 2
+        val arcDimen = size.width - 2 * diameterOffset
+        drawArc(
+            brush = gradientBrush,
+            startAngle = 0f,
+            sweepAngle = 180f,
+            useCenter = false,
+            topLeft = Offset(diameterOffset, diameterOffset),
+            style = stroke,
+            size = Size(arcDimen, arcDimen),
+        )
+    }
+}
+
+private fun DrawScope.drawCircularIndicator(
+    startAngle: Float,
+    sweep: Float,
+    color: Color,
+    stroke: Stroke,
+) {
+    // To draw this circle we need a rect with edges that line up with the midpoint of the stroke.
+    // To do this we need to remove half the stroke width from the total diameter for both sides.
+    val diameterOffset = stroke.width / 2
+    val arcDimen = size.width - 2 * diameterOffset
+    drawArc(
+        color = color,
+        startAngle = startAngle,
+        sweepAngle = sweep,
+        useCenter = false,
+        topLeft = Offset(diameterOffset, diameterOffset),
+        size = Size(arcDimen, arcDimen),
+        style = stroke,
+    )
+}