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

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

app/src/main/java/app/myzel394/alibi/ui/Constants.kt

@@ -4,6 +4,7 @@ import android.os.Build
 import androidx.compose.ui.unit.dp
 
 val BIG_PRIMARY_BUTTON_SIZE = 64.dp
+val BIG_PRIMARY_BUTTON_MAX_WIDTH = 450.dp
 
 val SHEET_BOTTOM_OFFSET = 24.dp
 val MAX_AMPLITUDE = 20000

app/src/main/java/app/myzel394/alibi/ui/components/RecorderScreen/atoms/BigButton.kt

@@ -1,6 +1,6 @@
 package app.myzel394.alibi.ui.components.RecorderScreen.atoms
 
-import android.Manifest
+import android.content.res.Configuration
 import androidx.compose.foundation.ExperimentalFoundationApi
 import androidx.compose.foundation.combinedClickable
 import androidx.compose.foundation.interaction.MutableInteractionSource
@@ -11,10 +11,7 @@ import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.shape.CircleShape
-import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.filled.Mic
 import androidx.compose.material.ripple.rememberRipple
-import androidx.compose.material3.Button
 import androidx.compose.material3.ButtonDefaults
 import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
@@ -25,12 +22,10 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.vector.ImageVector
-import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.platform.LocalConfiguration
 import androidx.compose.ui.semantics.contentDescription
 import androidx.compose.ui.semantics.semantics
 import androidx.compose.ui.unit.dp
-import app.myzel394.alibi.R
-import app.myzel394.alibi.ui.utils.PermissionHelper
 
 @OptIn(ExperimentalFoundationApi::class)
 @Composable
@@ -41,8 +36,10 @@ fun BigButton(
     onClick: () -> Unit,
     onLongClick: () -> Unit = {},
 ) {
+    val orientation = LocalConfiguration.current.orientation
+
     BoxWithConstraints {
-        val isLarge = maxWidth > 500.dp
+        val isLarge = maxWidth > 500.dp && orientation == Configuration.ORIENTATION_PORTRAIT
 
         Column(
             modifier = Modifier

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

@@ -1,5 +1,6 @@
 package app.myzel394.alibi.ui.components.RecorderScreen.organisms
 
+import android.content.res.Configuration
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
@@ -9,13 +10,13 @@ import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.requiredWidthIn
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.layout.widthIn
 import androidx.compose.foundation.text.ClickableText
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Save
-import androidx.compose.material3.Button
 import androidx.compose.material3.ButtonDefaults
 import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
@@ -29,6 +30,7 @@ import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.ColorFilter
+import androidx.compose.ui.platform.LocalConfiguration
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
@@ -40,6 +42,7 @@ import androidx.compose.ui.text.withStyle
 import androidx.compose.ui.unit.dp
 import app.myzel394.alibi.R
 import app.myzel394.alibi.db.AppSettings
+import app.myzel394.alibi.ui.BIG_PRIMARY_BUTTON_MAX_WIDTH
 import app.myzel394.alibi.ui.BIG_PRIMARY_BUTTON_SIZE
 import app.myzel394.alibi.ui.components.RecorderScreen.molecules.AudioRecordingStart
 import app.myzel394.alibi.ui.components.RecorderScreen.molecules.QuickMaxDurationSelector
@@ -64,6 +67,7 @@ fun StartRecording(
     showAudioRecorder: Boolean,
 ) {
     val context = LocalContext.current
+    val orientation = LocalConfiguration.current.orientation
 
     val label = stringResource(
         R.string.ui_recorder_action_start_description_2,
@@ -98,24 +102,50 @@ fun StartRecording(
     Column(
         modifier = Modifier
             .fillMaxSize()
-            .padding(bottom = 32.dp),
+            .padding(bottom = if (orientation == Configuration.ORIENTATION_PORTRAIT) 32.dp else 16.dp),
         verticalArrangement = Arrangement.SpaceBetween,
         horizontalAlignment = Alignment.CenterHorizontally,
     ) {
         Spacer(modifier = Modifier.weight(1f))
 
-        if (showAudioRecorder)
+        when (orientation) {
-            AudioRecordingStart(
+            Configuration.ORIENTATION_LANDSCAPE -> {
-                audioRecorder = audioRecorder,
+                Row(
-                appSettings = appSettings,
+                    modifier = Modifier.fillMaxWidth(),
-            )
+                    horizontalArrangement = Arrangement.SpaceEvenly,
-        VideoRecordingStart(
+                    verticalAlignment = Alignment.CenterVertically,
-            videoRecorder = videoRecorder,
+                ) {
-            appSettings = appSettings,
+                    if (showAudioRecorder)
-            onHideAudioRecording = onHideTopBar,
+                        AudioRecordingStart(
-            onShowAudioRecording = onShowTopBar,
+                            audioRecorder = audioRecorder,
-            showPreview = !showAudioRecorder,
+                            appSettings = appSettings,
-        )
+                        )
+                    VideoRecordingStart(
+                        videoRecorder = videoRecorder,
+                        appSettings = appSettings,
+                        onHideAudioRecording = onHideTopBar,
+                        onShowAudioRecording = onShowTopBar,
+                        showPreview = !showAudioRecorder,
+                    )
+                }
+            }
+
+            else -> {
+                if (showAudioRecorder)
+                    AudioRecordingStart(
+                        audioRecorder = audioRecorder,
+                        appSettings = appSettings,
+                    )
+                VideoRecordingStart(
+                    videoRecorder = videoRecorder,
+                    appSettings = appSettings,
+                    onHideAudioRecording = onHideTopBar,
+                    onShowAudioRecording = onShowTopBar,
+                    showPreview = !showAudioRecorder,
+                )
+            }
+        }
+
 
         val forceUpdate = rememberForceUpdateOnLifeCycleChange()
         Column(
@@ -133,6 +163,7 @@ fun StartRecording(
                 TextButton(
                     modifier = Modifier
                         .fillMaxWidth()
+                        .requiredWidthIn(max = BIG_PRIMARY_BUTTON_MAX_WIDTH)
                         .height(BIG_PRIMARY_BUTTON_SIZE)
                         .semantics {
                             contentDescription = label