From 290ebaf28f78334c22cb81262a33d19166bd1546 Mon Sep 17 00:00:00 2001
From: Myzel394 <50424412+Myzel394@users.noreply.github.com>
Date: Mon, 7 Aug 2023 00:08:16 +0200
Subject: [PATCH] ui: Add animations

---
 .../molecules/RecordingStatus.kt              | 34 ++++++++++++++++---
 .../AudioRecorder/molecules/StartRecording.kt | 12 +++++++
 2 files changed, 41 insertions(+), 5 deletions(-)

diff --git a/app/src/main/java/app/myzel394/alibi/ui/components/AudioRecorder/molecules/RecordingStatus.kt b/app/src/main/java/app/myzel394/alibi/ui/components/AudioRecorder/molecules/RecordingStatus.kt
index 12dbab8..ab41188 100644
--- a/app/src/main/java/app/myzel394/alibi/ui/components/AudioRecorder/molecules/RecordingStatus.kt
+++ b/app/src/main/java/app/myzel394/alibi/ui/components/AudioRecorder/molecules/RecordingStatus.kt
@@ -1,5 +1,10 @@
 package app.myzel394.alibi.ui.components.AudioRecorder.molecules
 
+import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.animation.core.animateFloatAsState
+import androidx.compose.animation.core.tween
+import androidx.compose.animation.expandHorizontally
+import androidx.compose.animation.fadeIn
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
@@ -32,6 +37,7 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.graphicsLayer
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.semantics.contentDescription
@@ -71,6 +77,14 @@ fun RecordingStatus(
         }
     }
 
+    // Only show animation when the recording has just started
+    val recordingJustStarted = duration < 1
+    var progressVisible by remember { mutableStateOf(!recordingJustStarted) }
+    LaunchedEffect(Unit) {
+        progressVisible = true
+    }
+
+
     KeepScreenOn()
 
     Column(
@@ -105,11 +119,18 @@ fun RecordingStatus(
                 )
             }
             Spacer(modifier = Modifier.height(16.dp))
-            LinearProgressIndicator(
-                progress = progress,
-                modifier = Modifier
-                    .width(300.dp)
-            )
+            AnimatedVisibility(
+                visible = progressVisible,
+                enter = expandHorizontally(
+                    tween(1000)
+                )
+            ) {
+                LinearProgressIndicator(
+                    progress = progress,
+                    modifier = Modifier
+                        .width(300.dp)
+                )
+            }
             Spacer(modifier = Modifier.height(32.dp))
 
             var showDeleteDialog by remember { mutableStateOf(false) }
@@ -147,11 +168,14 @@ fun RecordingStatus(
             }
         }
         val label = stringResource(R.string.ui_audioRecorder_action_save_label)
+        
+        val alpha by animateFloatAsState(if (progressVisible) 1f else 0f, tween(1000))
         Button(
             modifier = Modifier
                 .padding(16.dp)
                 .fillMaxWidth()
                 .height(BIG_PRIMARY_BUTTON_SIZE)
+                .graphicsLayer(alpha = alpha)
                 .semantics {
                     contentDescription = label
                 },
diff --git a/app/src/main/java/app/myzel394/alibi/ui/components/AudioRecorder/molecules/StartRecording.kt b/app/src/main/java/app/myzel394/alibi/ui/components/AudioRecorder/molecules/StartRecording.kt
index 65ab34e..106c9d7 100644
--- a/app/src/main/java/app/myzel394/alibi/ui/components/AudioRecorder/molecules/StartRecording.kt
+++ b/app/src/main/java/app/myzel394/alibi/ui/components/AudioRecorder/molecules/StartRecording.kt
@@ -2,6 +2,11 @@ package app.myzel394.alibi.ui.components.AudioRecorder.molecules
 
 import android.Manifest
 import android.content.ServiceConnection
+import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.animation.animateContentSize
+import androidx.compose.animation.core.animateFloatAsState
+import androidx.compose.animation.core.tween
+import androidx.compose.animation.expandHorizontally
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Spacer
@@ -22,7 +27,13 @@ import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.collectAsState
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateListOf
+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.draw.clip
@@ -105,6 +116,7 @@ fun StartRecording(
             .data
             .collectAsState(initial = AppSettings.getDefaultInstance())
             .value
+
         Text(
             stringResource(R.string.ui_audioRecorder_action_start_description, settings.audioRecorderSettings.maxDuration / 1000 / 60),
             style = MaterialTheme.typography.bodySmall.copy(