Fix height of audio recording animation (closes #135)

you-apps · Jun 7, 2023 · f3afc13 · f3afc13
1 parent c8c51e3
commit f3afc13
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 31 deletions.
diff --git a/.idea/misc.xml b/.idea/misc.xml
diff --git a/app/src/main/java/com/bnyro/recorder/ui/components/AudioVisualizer.kt b/app/src/main/java/com/bnyro/recorder/ui/components/AudioVisualizer.kt
@@ -16,20 +16,22 @@ fun AudioVisualizer(
     modifier: Modifier = Modifier
 ) {
     val viewModel: RecorderModel = viewModel()
-    val maxAmplitude = 3000
+    val maxAmplitude = 7000
     val primary = MaterialTheme.colorScheme.primary
+    // set the maximum amplitude to avoid overflows
+    val amplitudes = viewModel.recordedAmplitudes.map { if (it <= maxAmplitude) it else maxAmplitude }
     Canvas(modifier = modifier) {
-        val height = this.size.height / 2
+        val height = this.size.height / 2f
         val width = this.size.width
 
         translate(width, height) {
-            viewModel.recordedAmplitudes.forEachIndexed { index, amplitude ->
+            amplitudes.forEachIndexed { index, amplitude ->
                 val boxHeight = height * (amplitude.toFloat() / maxAmplitude)
                 drawRoundRect(
                     color = primary,
                     topLeft = Offset(
                         30f * (index - viewModel.recordedAmplitudes.size),
-                        -boxHeight / 2
+                        -boxHeight / 2f
                     ),
                     size = Size(15f, boxHeight),
                     cornerRadius = CornerRadius(3f, 3f)

diff --git a/...bnyro/recorder/ui/screens/RecorderView.kt → ...yro/recorder/ui/screens/RecorderScreen.kt b/...bnyro/recorder/ui/screens/RecorderView.kt → ...yro/recorder/ui/screens/RecorderScreen.kt
@@ -9,7 +9,7 @@ import android.text.format.DateUtils
 import androidx.activity.compose.rememberLauncherForActivityResult
 import androidx.activity.result.contract.ActivityResultContracts
 import androidx.compose.animation.AnimatedVisibility
-import androidx.compose.foundation.layout.Box
+import androidx.compose.animation.Crossfade
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
@@ -28,7 +28,6 @@ import androidx.compose.material.icons.filled.Settings
 import androidx.compose.material.icons.filled.Stop
 import androidx.compose.material.icons.filled.VideoLibrary
 import androidx.compose.material.icons.filled.Videocam
-import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.FloatingActionButton
 import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
@@ -55,7 +54,6 @@ import com.bnyro.recorder.ui.components.AudioVisualizer
 import com.bnyro.recorder.ui.components.SettingsBottomSheet
 import com.bnyro.recorder.ui.models.RecorderModel
 
-@OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun RecorderView(
     initialRecorder: Recorder
@@ -113,36 +111,39 @@ fun RecorderView(
     }
 
     Scaffold { pV ->
-        Box(
+        Column(
             modifier = Modifier
                 .fillMaxSize()
-                .padding(pV)
+                .padding(pV),
+            horizontalAlignment = Alignment.CenterHorizontally
         ) {
-            if (recorderModel.recordedAmplitudes.isNotEmpty()) {
-                AudioVisualizer(
-                    modifier = Modifier
-                        .fillMaxSize()
-                        .padding(bottom = 80.dp)
-                )
-            } else {
-                Text(
-                    modifier = Modifier
-                        .align(Alignment.TopCenter)
-                        .padding(
-                            top = if (orientation == Configuration.ORIENTATION_LANDSCAPE) 50.dp else 200.dp
+            Crossfade(
+                modifier = Modifier.weight(1f),
+                targetState = recorderModel.recordedAmplitudes
+            ) {
+                when (it.isEmpty()) {
+                    true -> Text(
+                        modifier = Modifier
+                            .padding(
+                                top = if (orientation == Configuration.ORIENTATION_LANDSCAPE) 50.dp else 200.dp
+                            ),
+                        text = stringResource(
+                            if (recordScreenMode) R.string.record_screen else R.string.record_sound
                         ),
-                    text = stringResource(
-                        if (recordScreenMode) R.string.record_screen else R.string.record_sound
-                    ),
-                    fontSize = MaterialTheme.typography.headlineLarge.fontSize,
-                    fontWeight = MaterialTheme.typography.headlineLarge.fontWeight
-                )
+                        fontSize = MaterialTheme.typography.headlineLarge.fontSize,
+                        fontWeight = MaterialTheme.typography.headlineLarge.fontWeight
+                    )
+                    false -> AudioVisualizer(
+                        modifier = Modifier
+                            .fillMaxSize()
+                            .padding(top = 20.dp)
+                    )
+                }
             }
 
             Column(
                 modifier = Modifier
                     .fillMaxWidth()
-                    .align(Alignment.BottomCenter)
                     .padding(bottom = 25.dp),
                 horizontalAlignment = Alignment.CenterHorizontally
             ) {

diff --git a/app/src/main/java/com/bnyro/recorder/ui/theme/Theme.kt b/app/src/main/java/com/bnyro/recorder/ui/theme/Theme.kt
@@ -34,7 +34,7 @@ private val LightColorScheme = lightColorScheme(
     onTertiary = Color.White,
     onBackground = Color(0xFF1C1B1F),
     onSurface = Color(0xFF1C1B1F),
-    */
+     */
 )
 
 @Composable

diff --git a/app/src/main/java/com/bnyro/recorder/ui/theme/Type.kt b/app/src/main/java/com/bnyro/recorder/ui/theme/Type.kt
@@ -30,5 +30,5 @@ val Typography = Typography(
         lineHeight = 16.sp,
         letterSpacing = 0.5.sp
     )
-    */
+     */
 )