expo-orb 0.1.0 → 0.2.0

package/README.md

@@ -8,7 +8,7 @@ Inspired by and iOS implementation from [metasidd/Orb](https://github.com/metasi
 
 | iOS | Android |
 |:---:|:-------:|
-| ![iOS Demo](https://raw.githubusercontent.com/enso-works/expo-orb/main/docs/demo-ios.gif) | ![Android Demo](https://raw.githubusercontent.com/enso-works/expo-orb/main/docs/demo-android.gif) |
+| ![iOS Demo](https://raw.githubusercontent.com/enso-works/expo-orb-animation/main/docs/demo-ios.gif) | ![Android Demo](https://raw.githubusercontent.com/enso-works/expo-orb-animation/main/docs/demo-android.gif) |
 
 ## Features
 

package/android/src/main/java/expo/modules/breathing/BreathingConfiguration.kt

@@ -0,0 +1,20 @@
+package expo.modules.breathing
+
+import androidx.compose.ui.graphics.Color
+
+data class BreathingConfiguration(
+    val blobColors: List<Color> = listOf(
+        Color(0xFF66B3E6),  // Light blue
+        Color(0xFF4D80CC),  // Medium blue
+        Color(0xFF804DB3)   // Purple
+    ),
+    val innerBlobColor: Color = Color.White.copy(alpha = 0.3f),
+    val progressRingColor: Color = Color.White.copy(alpha = 0.5f),
+    val textColor: Color = Color.White,
+    val showProgressRing: Boolean = true,
+    val showTextCue: Boolean = true,
+    val showInnerBlob: Boolean = true,
+    val showShadow: Boolean = true,
+    val pointCount: Int = 28,
+    val wobbleIntensity: Double = 1.0
+)

package/android/src/main/java/expo/modules/breathing/BreathingExerciseView.kt

@@ -0,0 +1,247 @@
+package expo.modules.breathing
+
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.aspectRatio
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableLongStateOf
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.runtime.withFrameNanos
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.drawBehind
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.unit.dp
+import kotlin.math.min
+import kotlin.random.Random
+
+@Composable
+fun BreathingExerciseView(
+    config: BreathingConfiguration,
+    modifier: Modifier = Modifier
+) {
+    // Frame-based animation state
+    var frameTime by remember { mutableLongStateOf(System.nanoTime()) }
+
+    // Continuous animation loop
+    LaunchedEffect(Unit) {
+        while (true) {
+            withFrameNanos { currentTime ->
+                frameTime = currentTime
+            }
+        }
+    }
+
+    // Initialize wobble offsets if needed
+    val state = BreathingSharedState
+    if (state.wobbleOffsets.size != config.pointCount) {
+        state.wobbleOffsets = MutableList(config.pointCount) { 0.0 }
+        state.wobbleTargets = MutableList(config.pointCount) { 0.0 }
+    }
+
+    // Update animation state
+    val animationState = updateAnimationState(frameTime, config)
+
+    Box(
+        modifier = modifier
+            .aspectRatio(1f),
+        contentAlignment = Alignment.Center
+    ) {
+        // Progress ring (behind blob)
+        if (config.showProgressRing) {
+            ProgressRingView(
+                progress = animationState.phaseProgress,
+                color = config.progressRingColor,
+                lineWidth = 8f,
+                modifier = Modifier
+                    .fillMaxSize(0.95f)
+            )
+        }
+
+        // Main morphing blob with shadow
+        Box(
+            modifier = Modifier
+                .fillMaxSize()
+                .then(
+                    if (config.showShadow) {
+                        Modifier.drawBehind {
+                            // Simple shadow approximation
+                            drawCircle(
+                                color = config.blobColors.firstOrNull()?.copy(alpha = 0.3f) ?: Color.Transparent,
+                                radius = size.minDimension / 2 * animationState.scale.toFloat() * 0.7f,
+                                center = center.copy(y = center.y + 8.dp.toPx())
+                            )
+                        }
+                    } else Modifier
+                ),
+            contentAlignment = Alignment.Center
+        ) {
+            MorphingBlobView(
+                baseRadius = animationState.scale.toFloat() * 0.7f,
+                pointCount = config.pointCount,
+                offsets = animationState.wobbleOffsets,
+                colors = config.blobColors,
+                innerColor = config.innerBlobColor,
+                showInnerBlob = config.showInnerBlob,
+                modifier = Modifier.fillMaxSize()
+            )
+        }
+
+        // Text cue
+        if (config.showTextCue) {
+            BreathingTextCue(
+                text = animationState.label,
+                color = config.textColor
+            )
+        }
+    }
+}
+
+private data class AnimationState(
+    val scale: Double,
+    val wobbleOffsets: List<Double>,
+    val phaseProgress: Double,
+    val label: String
+)
+
+private fun updateAnimationState(
+    frameTime: Long,
+    config: BreathingConfiguration
+): AnimationState {
+    val state = BreathingSharedState
+
+    // Handle different states
+    return when (state.state) {
+        BreathingExerciseState.STOPPED, BreathingExerciseState.COMPLETE -> {
+            AnimationState(
+                scale = 1.0,
+                wobbleOffsets = List(config.pointCount) { 0.0 },
+                phaseProgress = 0.0,
+                label = ""
+            )
+        }
+
+        BreathingExerciseState.PAUSED -> {
+            AnimationState(
+                scale = state.currentScale,
+                wobbleOffsets = state.wobbleOffsets.toList(),
+                phaseProgress = state.phaseProgress,
+                label = state.currentLabel
+            )
+        }
+
+        BreathingExerciseState.RUNNING -> {
+            // Update phase timing
+            updatePhaseState(frameTime)
+
+            // Interpolate scale toward target
+            val dt = (frameTime - state.lastWobbleUpdate) / 1_000_000_000.0
+            state.lastWobbleUpdate = frameTime
+
+            // Smooth scale interpolation
+            val scaleFactor = min(1.0, dt * 3.0)
+            state.currentScale = state.currentScale + (state.targetScale - state.currentScale) * scaleFactor
+
+            // Update wobble animation
+            updateWobble(frameTime, config)
+
+            AnimationState(
+                scale = state.currentScale,
+                wobbleOffsets = state.wobbleOffsets.toList(),
+                phaseProgress = state.phaseProgress,
+                label = state.currentLabel
+            )
+        }
+    }
+}
+
+private fun updatePhaseState(frameTime: Long) {
+    val state = BreathingSharedState
+    if (state.phases.isEmpty()) return
+
+    val currentPhaseConfig = state.phases[state.currentPhaseIndex]
+    val elapsed = (frameTime - state.phaseStartTime) / 1_000_000_000.0
+    val duration = currentPhaseConfig.duration
+
+    // Calculate progress through current phase
+    state.phaseProgress = min(1.0, elapsed / duration)
+
+    // Check if phase is complete
+    if (elapsed >= duration) {
+        // Move to next phase
+        state.currentPhaseIndex = (state.currentPhaseIndex + 1) % state.phases.size
+
+        // Check if we completed a cycle
+        if (state.currentPhaseIndex == 0) {
+            state.currentCycle += 1
+
+            // Check if exercise is complete
+            val totalCycles = state.totalCycles
+            if (totalCycles != null && state.currentCycle >= totalCycles) {
+                state.state = BreathingExerciseState.COMPLETE
+                state.totalDuration = (frameTime - state.exerciseStartTime) / 1_000_000_000.0
+                state.onExerciseComplete?.invoke(state.currentCycle, state.totalDuration)
+                return
+            }
+        }
+
+        // Start new phase
+        state.phaseStartTime = frameTime
+        val newPhaseConfig = state.phases[state.currentPhaseIndex]
+        state.currentPhase = newPhaseConfig.phase
+        state.currentLabel = newPhaseConfig.label
+        state.targetScale = newPhaseConfig.targetScale
+        state.phaseProgress = 0.0
+
+        // Update wobble intensity based on phase
+        state.wobbleIntensity = when (newPhaseConfig.phase) {
+            BreathPhase.INHALE, BreathPhase.EXHALE -> 1.0
+            BreathPhase.HOLD_IN, BreathPhase.HOLD_OUT -> 0.3
+            BreathPhase.IDLE -> 0.5
+        }
+
+        // Fire phase change callback
+        state.onPhaseChange?.invoke(
+            newPhaseConfig.phase,
+            newPhaseConfig.label,
+            state.currentPhaseIndex,
+            state.currentCycle
+        )
+    }
+}
+
+private fun updateWobble(frameTime: Long, config: BreathingConfiguration) {
+    val state = BreathingSharedState
+    val wobbleUpdateInterval = 0.8  // New targets every 0.8 seconds
+
+    // Ensure arrays are sized correctly
+    if (state.wobbleOffsets.size != config.pointCount) {
+        state.wobbleOffsets = MutableList(config.pointCount) { 0.0 }
+        state.wobbleTargets = MutableList(config.pointCount) { 0.0 }
+    }
+
+    // Check if we need new random targets
+    val timeSinceLastTarget = (frameTime - state.lastWobbleTargetUpdate) / 1_000_000_000.0
+    if (timeSinceLastTarget > wobbleUpdateInterval || state.wobbleTargets.all { it == 0.0 }) {
+        state.lastWobbleTargetUpdate = frameTime
+        val intensity = state.wobbleIntensity * config.wobbleIntensity
+        val maxOffset = 0.08 * intensity  // Max 8% radius variation at full intensity
+
+        for (i in 0 until config.pointCount) {
+            state.wobbleTargets[i] = Random.nextDouble(-maxOffset, maxOffset)
+        }
+    }
+
+    // Interpolate offsets toward targets
+    val interpolationSpeed = 4.0
+    val dt = (frameTime - state.lastWobbleUpdate) / 1_000_000_000.0
+    val factor = min(1.0, dt * interpolationSpeed)
+
+    for (i in 0 until min(state.wobbleOffsets.size, state.wobbleTargets.size)) {
+        state.wobbleOffsets[i] = state.wobbleOffsets[i] + (state.wobbleTargets[i] - state.wobbleOffsets[i]) * factor
+    }
+}

package/android/src/main/java/expo/modules/breathing/BreathingSharedState.kt

@@ -0,0 +1,104 @@
+package expo.modules.breathing
+
+enum class BreathPhase(val value: String) {
+    INHALE("inhale"),
+    HOLD_IN("holdIn"),
+    EXHALE("exhale"),
+    HOLD_OUT("holdOut"),
+    IDLE("idle")
+}
+
+enum class BreathingExerciseState {
+    STOPPED,
+    RUNNING,
+    PAUSED,
+    COMPLETE
+}
+
+data class BreathPhaseConfig(
+    val phase: BreathPhase,
+    val duration: Double,  // seconds
+    val targetScale: Double,
+    val label: String
+)
+
+object BreathingSharedState {
+    // Pattern configuration
+    @Volatile
+    var phases: List<BreathPhaseConfig> = emptyList()
+
+    @Volatile
+    var totalCycles: Int? = null  // null = infinite
+
+    // Current state
+    @Volatile
+    var state: BreathingExerciseState = BreathingExerciseState.STOPPED
+
+    @Volatile
+    var currentPhaseIndex: Int = 0
+
+    @Volatile
+    var currentCycle: Int = 0
+
+    @Volatile
+    var phaseStartTime: Long = System.nanoTime()
+
+    @Volatile
+    var pauseTime: Long? = null
+
+    // Animation values
+    @Volatile
+    var currentScale: Double = 1.0
+
+    @Volatile
+    var targetScale: Double = 1.0
+
+    @Volatile
+    var currentPhase: BreathPhase = BreathPhase.IDLE
+
+    @Volatile
+    var currentLabel: String = ""
+
+    @Volatile
+    var phaseProgress: Double = 0.0
+
+    // Wobble animation
+    @Volatile
+    var wobbleIntensity: Double = 1.0
+
+    @Volatile
+    var wobbleOffsets: MutableList<Double> = mutableListOf()
+
+    @Volatile
+    var wobbleTargets: MutableList<Double> = mutableListOf()
+
+    @Volatile
+    var lastWobbleUpdate: Long = System.nanoTime()
+
+    @Volatile
+    var lastWobbleTargetUpdate: Long = System.nanoTime()
+
+    // Exercise tracking
+    @Volatile
+    var exerciseStartTime: Long = System.nanoTime()
+
+    @Volatile
+    var totalDuration: Double = 0.0
+
+    // Callbacks
+    var onPhaseChange: ((BreathPhase, String, Int, Int) -> Unit)? = null
+    var onExerciseComplete: ((Int, Double) -> Unit)? = null
+
+    fun reset() {
+        state = BreathingExerciseState.STOPPED
+        currentPhaseIndex = 0
+        currentCycle = 0
+        currentScale = 1.0
+        targetScale = 1.0
+        currentPhase = BreathPhase.IDLE
+        currentLabel = ""
+        phaseProgress = 0.0
+        wobbleIntensity = 1.0
+        pauseTime = null
+    }
+}

package/android/src/main/java/expo/modules/breathing/BreathingTextCue.kt

@@ -0,0 +1,41 @@
+package expo.modules.breathing
+
+import androidx.compose.animation.AnimatedContent
+import androidx.compose.animation.fadeIn
+import androidx.compose.animation.fadeOut
+import androidx.compose.animation.togetherWith
+import androidx.compose.foundation.layout.Box
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.unit.sp
+
+@Composable
+fun BreathingTextCue(
+    text: String,
+    color: Color,
+    modifier: Modifier = Modifier
+) {
+    Box(
+        modifier = modifier,
+        contentAlignment = Alignment.Center
+    ) {
+        AnimatedContent(
+            targetState = text,
+            transitionSpec = {
+                fadeIn() togetherWith fadeOut()
+            },
+            label = "BreathingTextCue"
+        ) { currentText ->
+            Text(
+                text = currentText,
+                color = color,
+                fontSize = 24.sp,
+                fontWeight = FontWeight.Medium
+            )
+        }
+    }
+}

package/android/src/main/java/expo/modules/breathing/ExpoBreathingExerciseModule.kt

@@ -0,0 +1,156 @@
+package expo.modules.breathing
+
+import android.graphics.Color as AndroidColor
+import expo.modules.kotlin.modules.Module
+import expo.modules.kotlin.modules.ModuleDefinition
+
+class ExpoBreathingExerciseModule : Module() {
+    override fun definition() = ModuleDefinition {
+        Name("ExpoBreathingExercise")
+
+        Events("onPhaseChange", "onExerciseComplete")
+
+        Function("startBreathingExercise") { pattern: Map<String, Any?> ->
+            startExercise(pattern)
+        }
+
+        Function("stopBreathingExercise") {
+            BreathingSharedState.reset()
+        }
+
+        Function("pauseBreathingExercise") {
+            val state = BreathingSharedState
+            if (state.state == BreathingExerciseState.RUNNING) {
+                state.state = BreathingExerciseState.PAUSED
+                state.pauseTime = System.nanoTime()
+            }
+        }
+
+        Function("resumeBreathingExercise") {
+            val state = BreathingSharedState
+            val pauseTime = state.pauseTime
+            if (state.state == BreathingExerciseState.PAUSED && pauseTime != null) {
+                val pauseDuration = System.nanoTime() - pauseTime
+                state.phaseStartTime += pauseDuration
+                state.exerciseStartTime += pauseDuration
+                state.state = BreathingExerciseState.RUNNING
+                state.pauseTime = null
+            }
+        }
+
+        View(ExpoBreathingExerciseView::class) {
+            Events("onPhaseChange", "onExerciseComplete")
+
+            Prop("blobColors") { view: ExpoBreathingExerciseView, colors: List<Any> ->
+                val parsedColors = colors.map { parseColor(it) }
+                view.setBlobColors(parsedColors)
+            }
+
+            Prop("innerBlobColor") { view: ExpoBreathingExerciseView, color: Any ->
+                view.setInnerBlobColor(parseColor(color))
+            }
+
+            Prop("progressRingColor") { view: ExpoBreathingExerciseView, color: Any ->
+                view.setProgressRingColor(parseColor(color))
+            }
+
+            Prop("textColor") { view: ExpoBreathingExerciseView, color: Any ->
+                view.setTextColor(parseColor(color))
+            }
+
+            Prop("showProgressRing") { view: ExpoBreathingExerciseView, value: Boolean ->
+                view.setShowProgressRing(value)
+            }
+
+            Prop("showTextCue") { view: ExpoBreathingExerciseView, value: Boolean ->
+                view.setShowTextCue(value)
+            }
+
+            Prop("showInnerBlob") { view: ExpoBreathingExerciseView, value: Boolean ->
+                view.setShowInnerBlob(value)
+            }
+
+            Prop("showShadow") { view: ExpoBreathingExerciseView, value: Boolean ->
+                view.setShowShadow(value)
+            }
+
+            Prop("pointCount") { view: ExpoBreathingExerciseView, value: Int ->
+                view.setPointCount(value)
+            }
+
+            Prop("wobbleIntensity") { view: ExpoBreathingExerciseView, value: Double ->
+                view.setWobbleIntensity(value)
+            }
+        }
+    }
+
+    private fun startExercise(pattern: Map<String, Any?>) {
+        val state = BreathingSharedState
+        state.reset()
+
+        // Parse phases
+        @Suppress("UNCHECKED_CAST")
+        val phasesArray = pattern["phases"] as? List<Map<String, Any?>> ?: return
+
+        val phases = phasesArray.mapNotNull { phaseDict ->
+            val phaseString = phaseDict["phase"] as? String ?: return@mapNotNull null
+            val duration = (phaseDict["duration"] as? Number)?.toDouble() ?: return@mapNotNull null
+            val targetScale = (phaseDict["targetScale"] as? Number)?.toDouble() ?: return@mapNotNull null
+            val label = phaseDict["label"] as? String ?: return@mapNotNull null
+
+            val phase = when (phaseString) {
+                "inhale" -> BreathPhase.INHALE
+                "holdIn" -> BreathPhase.HOLD_IN
+                "exhale" -> BreathPhase.EXHALE
+                "holdOut" -> BreathPhase.HOLD_OUT
+                else -> return@mapNotNull null
+            }
+
+            BreathPhaseConfig(
+                phase = phase,
+                duration = duration / 1000.0,  // Convert ms to seconds
+                targetScale = targetScale,
+                label = label
+            )
+        }
+
+        if (phases.isEmpty()) return
+
+        // Parse cycles
+        state.totalCycles = (pattern["cycles"] as? Number)?.toInt()
+
+        // Setup state
+        state.phases = phases
+        state.currentPhaseIndex = 0
+        state.currentCycle = 0
+        state.phaseStartTime = System.nanoTime()
+        state.exerciseStartTime = System.nanoTime()
+
+        // Set initial phase values
+        val firstPhase = phases[0]
+        state.currentPhase = firstPhase.phase
+        state.currentLabel = firstPhase.label
+        state.targetScale = firstPhase.targetScale
+        state.currentScale = 1.0
+        state.phaseProgress = 0.0
+
+        // Set initial wobble intensity
+        state.wobbleIntensity = when (firstPhase.phase) {
+            BreathPhase.INHALE, BreathPhase.EXHALE -> 1.0
+            BreathPhase.HOLD_IN, BreathPhase.HOLD_OUT -> 0.3
+            BreathPhase.IDLE -> 0.5
+        }
+
+        state.state = BreathingExerciseState.RUNNING
+    }
+
+    private fun parseColor(value: Any): Int {
+        return when (value) {
+            is String -> AndroidColor.parseColor(value)
+            is Int -> value
+            is Double -> value.toInt()
+            is Long -> value.toInt()
+            else -> AndroidColor.WHITE
+        }
+    }
+}

package/android/src/main/java/expo/modules/breathing/ExpoBreathingExerciseView.kt

@@ -0,0 +1,123 @@
+package expo.modules.breathing
+
+import android.content.Context
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.padding
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.platform.ComposeView
+import androidx.compose.ui.unit.dp
+import expo.modules.kotlin.AppContext
+import expo.modules.kotlin.views.ExpoView
+
+class ExpoBreathingExerciseView(context: Context, appContext: AppContext) : ExpoView(context, appContext) {
+
+    // Mutable state for configuration
+    private var config by mutableStateOf(BreathingConfiguration())
+
+    private val onPhaseChange by EventDispatcher()
+    private val onExerciseComplete by EventDispatcher()
+
+    private val composeView = ComposeView(context).apply {
+        setContent {
+            BreathingExerciseViewContent()
+        }
+    }
+
+    init {
+        // Allow effects to render outside view bounds
+        clipChildren = false
+        clipToPadding = false
+        composeView.clipChildren = false
+        composeView.clipToPadding = false
+        addView(composeView, LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT))
+
+        // Setup callbacks
+        setupCallbacks()
+    }
+
+    private fun setupCallbacks() {
+        BreathingSharedState.onPhaseChange = { phase, label, phaseIndex, cycle ->
+            onPhaseChange(
+                mapOf(
+                    "phase" to phase.value,
+                    "label" to label,
+                    "phaseIndex" to phaseIndex,
+                    "cycle" to cycle
+                )
+            )
+        }
+
+        BreathingSharedState.onExerciseComplete = { totalCycles, totalDuration ->
+            onExerciseComplete(
+                mapOf(
+                    "totalCycles" to totalCycles,
+                    "totalDuration" to totalDuration
+                )
+            )
+        }
+    }
+
+    @Composable
+    private fun BreathingExerciseViewContent() {
+        Box(
+            modifier = Modifier
+                .fillMaxSize()
+                .padding(24.dp),
+            contentAlignment = Alignment.Center
+        ) {
+            BreathingExerciseView(
+                config = config,
+                modifier = Modifier.fillMaxSize()
+            )
+        }
+    }
+
+    fun setBlobColors(colors: List<Int>) {
+        config = config.copy(
+            blobColors = colors.map { Color(it) }
+        )
+    }
+
+    fun setInnerBlobColor(color: Int) {
+        config = config.copy(innerBlobColor = Color(color))
+    }
+
+    fun setProgressRingColor(color: Int) {
+        config = config.copy(progressRingColor = Color(color))
+    }
+
+    fun setTextColor(color: Int) {
+        config = config.copy(textColor = Color(color))
+    }
+
+    fun setShowProgressRing(value: Boolean) {
+        config = config.copy(showProgressRing = value)
+    }
+
+    fun setShowTextCue(value: Boolean) {
+        config = config.copy(showTextCue = value)
+    }
+
+    fun setShowInnerBlob(value: Boolean) {
+        config = config.copy(showInnerBlob = value)
+    }
+
+    fun setShowShadow(value: Boolean) {
+        config = config.copy(showShadow = value)
+    }
+
+    fun setPointCount(value: Int) {
+        config = config.copy(pointCount = maxOf(6, value))
+    }
+
+    fun setWobbleIntensity(value: Double) {
+        config = config.copy(wobbleIntensity = value.coerceIn(0.0, 1.0))
+    }
+}