fix(ui): Make AudioRecordingStatus more responsive for landscape mode

Signed-off-by: Myzel394 <50424412+Myzel394@users.noreply.github.com>

app/src/main/java/app/myzel394/alibi/ui/components/RecorderScreen/molecules/RecordingControl.kt

@@ -1,8 +1,11 @@
 package app.myzel394.alibi.ui.components.RecorderScreen.molecules
 
+import android.content.res.Configuration
 import androidx.compose.animation.core.animateFloatAsState
 import androidx.compose.animation.core.tween
+import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.runtime.Composable
@@ -14,6 +17,8 @@ import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.alpha
+import androidx.compose.ui.platform.LocalConfiguration
+import androidx.compose.ui.unit.dp
 import app.myzel394.alibi.ui.components.RecorderScreen.atoms.DeleteButton
 import app.myzel394.alibi.ui.components.RecorderScreen.atoms.PauseResumeButton
 import app.myzel394.alibi.ui.components.RecorderScreen.atoms.SaveButton
@@ -23,6 +28,7 @@ import kotlinx.coroutines.delay
 
 @Composable
 fun RecordingControl(
+    modifier: Modifier = Modifier,
     initialDelay: Long = 0L,
     isPaused: Boolean,
     recordingTime: Long,
@@ -30,6 +36,7 @@ fun RecordingControl(
     onPauseResume: () -> Unit,
     onSave: () -> Unit,
 ) {
+    val orientation = LocalConfiguration.current.orientation
     val animateIn = rememberInitialRecordingAnimation(recordingTime)
 
     var deleteButtonAlphaIsIn by rememberSaveable {
@@ -85,38 +92,87 @@ fun RecordingControl(
         }
     }
 
-    Row(
-        verticalAlignment = Alignment.CenterVertically,
-    ) {
-        Box(
-            modifier = Modifier
-                .fillMaxWidth()
-                .weight(1f)
-                .alpha(deleteButtonAlpha),
-            contentAlignment = Alignment.Center,
-        ) {
-            DeleteButton(onDelete = onDelete)
+    when (orientation) {
+        Configuration.ORIENTATION_LANDSCAPE -> {
+            Column(
+                horizontalAlignment = Alignment.CenterHorizontally,
+                verticalArrangement = Arrangement.spacedBy(16.dp),
+                modifier = modifier,
+            ) {
+                Box(
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .alpha(saveButtonAlpha),
+                    contentAlignment = Alignment.Center,
+                ) {
+                    SaveButton(
+                        onSave = onSave,
+                        modifier = Modifier.fillMaxWidth(),
+                    )
+                }
+
+                Box(
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .alpha(pauseButtonAlpha),
+                    contentAlignment = Alignment.Center,
+                ) {
+                    PauseResumeButton(
+                        isPaused = isPaused,
+                        onChange = onPauseResume,
+                    )
+                }
+
+                Box(
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .alpha(deleteButtonAlpha),
+                    contentAlignment = Alignment.Center,
+                ) {
+                    DeleteButton(
+                        onDelete = onDelete,
+                        modifier = Modifier.fillMaxWidth(),
+                    )
+                }
+            }
         }
 
-        Box(
-            contentAlignment = Alignment.Center,
-            modifier = Modifier
-                .alpha(pauseButtonAlpha),
-        ) {
-            PauseResumeButton(
-                isPaused = isPaused,
-                onChange = onPauseResume,
-            )
-        }
+        else -> {
+            Row(
+                verticalAlignment = Alignment.CenterVertically,
+                modifier = modifier,
+            ) {
+                Box(
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .weight(1f)
+                        .alpha(deleteButtonAlpha),
+                    contentAlignment = Alignment.Center,
+                ) {
+                    DeleteButton(onDelete = onDelete)
+                }
 
-        Box(
-            modifier = Modifier
-                .fillMaxWidth()
-                .weight(1f)
-                .alpha(saveButtonAlpha),
-            contentAlignment = Alignment.Center,
-        ) {
-            SaveButton(onSave = onSave)
+                Box(
+                    contentAlignment = Alignment.Center,
+                    modifier = Modifier
+                        .alpha(pauseButtonAlpha),
+                ) {
+                    PauseResumeButton(
+                        isPaused = isPaused,
+                        onChange = onPauseResume,
+                    )
+                }
+
+                Box(
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .weight(1f)
+                        .alpha(saveButtonAlpha),
+                    contentAlignment = Alignment.Center,
+                ) {
+                    SaveButton(onSave = onSave)
+                }
+            }
         }
     }
 }

app/src/main/java/app/myzel394/alibi/ui/components/RecorderScreen/molecules/RecordingStatus.kt

@@ -40,6 +40,7 @@ fun RecordingStatus(
     progress: Float,
     recordingStart: LocalDateTime,
     maxDuration: Long,
+    progressModifier: Modifier = Modifier.width(300.dp),
 ) {
     val animateIn = rememberInitialRecordingAnimation(recordingTime)
 
@@ -73,9 +74,8 @@ fun RecordingStatus(
             )
         ) {
             LinearProgressIndicator(
-                progress = progress,
-                modifier = Modifier
-                    .width(300.dp)
+                progress = { progress },
+                modifier = progressModifier,
             )
         }
 

app/src/main/java/app/myzel394/alibi/ui/components/RecorderScreen/organisms/AudioRecordingStatus.kt

@@ -1,9 +1,12 @@
 package app.myzel394.alibi.ui.components.RecorderScreen.organisms
 
+import android.content.res.Configuration
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.widthIn
 import androidx.compose.material3.HorizontalDivider
@@ -16,6 +19,7 @@ import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.platform.LocalConfiguration
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.unit.dp
 import app.myzel394.alibi.ui.components.RecorderScreen.atoms.RealtimeAudioVisualizer
@@ -33,6 +37,7 @@ fun AudioRecordingStatus(
     audioRecorder: AudioRecorderModel,
 ) {
     val context = LocalContext.current
+    val configuration = LocalConfiguration.current.orientation
 
     val scope = rememberCoroutineScope()
 
@@ -62,47 +67,104 @@ fun AudioRecordingStatus(
                 .weight(1f),
         )
 
-        RecordingStatus(
-            recordingTime = audioRecorder.recordingTime,
-            progress = audioRecorder.progress,
-            recordingStart = audioRecorder.recordingStart,
-            maxDuration = audioRecorder.settings!!.maxDuration,
-        )
+        when (configuration) {
+            Configuration.ORIENTATION_LANDSCAPE -> {
+                Row(
+                    verticalAlignment = Alignment.CenterVertically,
+                    horizontalArrangement = Arrangement.SpaceEvenly,
+                ) {
+                    Column(
+                        verticalArrangement = Arrangement
+                            .spacedBy(16.dp),
+                        horizontalAlignment = Alignment.CenterHorizontally,
+                        modifier = Modifier.weight(3f),
+                    ) {
+                        RecordingStatus(
+                            recordingTime = audioRecorder.recordingTime,
+                            progress = audioRecorder.progress,
+                            recordingStart = audioRecorder.recordingStart,
+                            maxDuration = audioRecorder.settings!!.maxDuration,
+                            progressModifier = Modifier.fillMaxWidth(.9f),
+                        )
 
-        Column(
-            verticalArrangement = Arrangement
-                .spacedBy(32.dp),
-            horizontalAlignment = Alignment.CenterHorizontally,
-        ) {
-            MicrophoneStatus(audioRecorder)
-
-            HorizontalDivider()
-
-            RecordingControl(
-                isPaused = audioRecorder.isPaused,
-                recordingTime = audioRecorder.recordingTime,
-                onDelete = {
-                    scope.launch {
-                        runCatching {
-                            audioRecorder.stopRecording(context)
-                        }
-                        runCatching {
-                            audioRecorder.destroyService(context)
-                        }
-                        audioRecorder.batchesFolder!!.deleteRecordings()
+                        MicrophoneStatus(audioRecorder)
                     }
-                },
-                onPauseResume = {
-                    if (audioRecorder.isPaused) {
-                        audioRecorder.resumeRecording()
-                    } else {
-                        audioRecorder.pauseRecording()
-                    }
-                },
-                onSave = {
-                    audioRecorder.onRecordingSave(false)
+
+                    RecordingControl(
+                        modifier = Modifier
+                            .weight(1f)
+                            .fillMaxWidth(),
+                        isPaused = audioRecorder.isPaused,
+                        recordingTime = audioRecorder.recordingTime,
+                        onDelete = {
+                            scope.launch {
+                                runCatching {
+                                    audioRecorder.stopRecording(context)
+                                }
+                                runCatching {
+                                    audioRecorder.destroyService(context)
+                                }
+                                audioRecorder.batchesFolder!!.deleteRecordings()
+                            }
+                        },
+                        onPauseResume = {
+                            if (audioRecorder.isPaused) {
+                                audioRecorder.resumeRecording()
+                            } else {
+                                audioRecorder.pauseRecording()
+                            }
+                        },
+                        onSave = {
+                            audioRecorder.onRecordingSave(false)
+                        }
+                    )
                 }
-            )
+            }
+
+            else -> {
+                RecordingStatus(
+                    recordingTime = audioRecorder.recordingTime,
+                    progress = audioRecorder.progress,
+                    recordingStart = audioRecorder.recordingStart,
+                    maxDuration = audioRecorder.settings!!.maxDuration,
+                )
+
+                Column(
+                    verticalArrangement = Arrangement
+                        .spacedBy(32.dp),
+                    horizontalAlignment = Alignment.CenterHorizontally,
+                ) {
+                    MicrophoneStatus(audioRecorder)
+
+                    HorizontalDivider()
+
+                    RecordingControl(
+                        isPaused = audioRecorder.isPaused,
+                        recordingTime = audioRecorder.recordingTime,
+                        onDelete = {
+                            scope.launch {
+                                runCatching {
+                                    audioRecorder.stopRecording(context)
+                                }
+                                runCatching {
+                                    audioRecorder.destroyService(context)
+                                }
+                                audioRecorder.batchesFolder!!.deleteRecordings()
+                            }
+                        },
+                        onPauseResume = {
+                            if (audioRecorder.isPaused) {
+                                audioRecorder.resumeRecording()
+                            } else {
+                                audioRecorder.pauseRecording()
+                            }
+                        },
+                        onSave = {
+                            audioRecorder.onRecordingSave(false)
+                        }
+                    )
+                }
+            }
         }
     }
 }