fix: Improve responsive design

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

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

@@ -35,12 +35,13 @@ fun BigButton(
     description: String? = null,
     onClick: () -> Unit,
     onLongClick: () -> Unit = {},
+    isBig: Boolean? = null,
 ) {
     val orientation = LocalConfiguration.current.orientation
 
     BoxWithConstraints {
-        val isLarge =
+        val isLarge = if (isBig == null)
-            maxWidth > 250.dp && maxHeight > 600.dp && orientation == Configuration.ORIENTATION_PORTRAIT
+            maxWidth > 250.dp && maxHeight > 600.dp && orientation == Configuration.ORIENTATION_PORTRAIT else isBig
 
         Column(
             modifier = Modifier

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

@@ -18,6 +18,7 @@ import app.myzel394.alibi.ui.components.atoms.VisualDensity
 
 @Composable
 fun LowStorageInfo(
+    modifier: Modifier = Modifier.padding(horizontal = 16.dp, vertical = 4.dp),
     appSettings: AppSettings,
 ) {
     val context = LocalContext.current
@@ -36,9 +37,7 @@ fun LowStorageInfo(
     println("LowStorageInfo: availableBytes: $availableBytes, requiredBytes: $requiredBytes, isLowOnStorage: $isLowOnStorage")
 
     if (isLowOnStorage)
-        Box(
+        Box(modifier = modifier) {
-            modifier = Modifier.padding(horizontal = 16.dp, vertical = 4.dp)
-        ) {
             BoxWithConstraints {
                 val isLarge = maxHeight > 600.dp;
 

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

@@ -22,6 +22,7 @@ import app.myzel394.alibi.ui.models.AudioRecorderModel
 fun AudioRecordingStart(
     audioRecorder: AudioRecorderModel,
     appSettings: AppSettings,
+    useLargeButtons: Boolean? = null,
 ) {
     val context = LocalContext.current
 
@@ -59,6 +60,7 @@ fun AudioRecordingStart(
                 label = stringResource(R.string.ui_audioRecorder_action_start_label),
                 icon = Icons.Default.Mic,
                 onClick = triggerRecordAudio,
+                isBig = useLargeButtons,
             )
         }
     }

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

@@ -27,6 +27,7 @@ fun VideoRecordingStart(
     onHideAudioRecording: () -> Unit,
     onShowAudioRecording: () -> Unit,
     showPreview: Boolean,
+    useLargeButtons: Boolean? = null,
 ) {
     val context = LocalContext.current
 
@@ -87,6 +88,7 @@ fun VideoRecordingStart(
                     showSheet = true
                 }
             },
+            isBig = useLargeButtons,
         )
     }
 }

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

@@ -3,6 +3,7 @@ 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.BoxWithConstraints
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
@@ -100,24 +101,47 @@ fun StartRecording(
         )
     }
 
-    Column(
+    BoxWithConstraints {
-        modifier = Modifier
+        val isLargeDisplay =
-            .fillMaxSize()
+            maxWidth > 250.dp && maxHeight > 600.dp && orientation == Configuration.ORIENTATION_PORTRAIT
-            .padding(bottom = if (orientation == Configuration.ORIENTATION_PORTRAIT) 0.dp else 16.dp),
+
-        verticalArrangement = Arrangement.SpaceBetween,
+        Column(
-        horizontalAlignment = Alignment.CenterHorizontally,
+            modifier = Modifier
-    ) {
+                .fillMaxSize()
-        when (orientation) {
+                .padding(bottom = if (orientation == Configuration.ORIENTATION_PORTRAIT) 0.dp else 16.dp),
-            Configuration.ORIENTATION_LANDSCAPE -> {
+            verticalArrangement = Arrangement.SpaceBetween,
-                Row(
+            horizontalAlignment = Alignment.CenterHorizontally,
-                    modifier = Modifier.fillMaxWidth(),
+        ) {
-                    horizontalArrangement = Arrangement.SpaceEvenly,
+            when (orientation) {
-                    verticalAlignment = Alignment.CenterVertically,
+                Configuration.ORIENTATION_LANDSCAPE -> {
-                ) {
+                    Row(
+                        modifier = Modifier.fillMaxWidth(),
+                        horizontalArrangement = Arrangement.SpaceEvenly,
+                        verticalAlignment = Alignment.CenterVertically,
+                    ) {
+                        if (showAudioRecorder)
+                            AudioRecordingStart(
+                                audioRecorder = audioRecorder,
+                                appSettings = appSettings,
+                            )
+                        VideoRecordingStart(
+                            videoRecorder = videoRecorder,
+                            appSettings = appSettings,
+                            onHideAudioRecording = onHideTopBar,
+                            onShowAudioRecording = onShowTopBar,
+                            showPreview = !showAudioRecorder,
+                        )
+                    }
+                }
+
+                else -> {
+                    Spacer(modifier = Modifier.weight(1f))
+
                     if (showAudioRecorder)
                         AudioRecordingStart(
                             audioRecorder = audioRecorder,
                             appSettings = appSettings,
+                            useLargeButtons = isLargeDisplay,
                         )
                     VideoRecordingStart(
                         videoRecorder = videoRecorder,
@@ -125,95 +149,86 @@ fun StartRecording(
                         onHideAudioRecording = onHideTopBar,
                         onShowAudioRecording = onShowTopBar,
                         showPreview = !showAudioRecorder,
+                        useLargeButtons = isLargeDisplay,
                     )
                 }
             }
 
-            else -> {
-                Spacer(modifier = Modifier.weight(1f))
 
-                if (showAudioRecorder)
+            val forceUpdate = rememberForceUpdateOnLifeCycleChange()
-                    AudioRecordingStart(
+            Column(
-                        audioRecorder = audioRecorder,
+                modifier = Modifier
-                        appSettings = appSettings,
+                    .weight(1f)
+                    .then(forceUpdate),
+                verticalArrangement = Arrangement.Bottom,
+            ) {
+                if (appSettings.lastRecording?.hasRecordingsAvailable(context) == true) {
+                    val label = stringResource(
+                        R.string.ui_recorder_action_saveOldRecording_label,
+                        DateTimeFormatter.ofLocalizedDate(FormatStyle.FULL)
+                            .format(appSettings.lastRecording.recordingStart),
                     )
-                VideoRecordingStart(
+                    TextButton(
-                    videoRecorder = videoRecorder,
-                    appSettings = appSettings,
-                    onHideAudioRecording = onHideTopBar,
-                    onShowAudioRecording = onShowTopBar,
-                    showPreview = !showAudioRecorder,
-                )
-            }
-        }
-
-
-        val forceUpdate = rememberForceUpdateOnLifeCycleChange()
-        Column(
-            modifier = Modifier
-                .weight(1f)
-                .then(forceUpdate),
-            verticalArrangement = Arrangement.Bottom,
-        ) {
-            if (appSettings.lastRecording?.hasRecordingsAvailable(context) == true) {
-                val label = stringResource(
-                    R.string.ui_recorder_action_saveOldRecording_label,
-                    DateTimeFormatter.ofLocalizedDate(FormatStyle.FULL)
-                        .format(appSettings.lastRecording.recordingStart),
-                )
-                TextButton(
-                    modifier = Modifier
-                        .fillMaxWidth()
-                        .requiredWidthIn(max = BIG_PRIMARY_BUTTON_MAX_WIDTH)
-                        .height(BIG_PRIMARY_BUTTON_SIZE)
-                        .semantics {
-                            contentDescription = label
-                        },
-                    onClick = onSaveLastRecording,
-                    contentPadding = ButtonDefaults.TextButtonWithIconContentPadding,
-                ) {
-                    Icon(
-                        Icons.Default.Save,
-                        contentDescription = null,
-                        modifier = Modifier.size(ButtonDefaults.IconSize),
-                    )
-                    Spacer(modifier = Modifier.width(ButtonDefaults.IconSpacing))
-                    Text(label)
-                }
-            } else {
-                Row(
-                    verticalAlignment = Alignment.CenterVertically,
-                ) {
-                    Image(
-                        painter = painterResource(R.drawable.launcher_monochrome_noopacity),
-                        contentDescription = null,
-                        colorFilter = ColorFilter.tint(MaterialTheme.colorScheme.onSurfaceVariant),
                         modifier = Modifier
-                            .size(ButtonDefaults.IconSize)
+                            .fillMaxWidth()
-                    )
+                            .requiredWidthIn(max = BIG_PRIMARY_BUTTON_MAX_WIDTH)
+                            .height(BIG_PRIMARY_BUTTON_SIZE)
+                            .semantics {
+                                contentDescription = label
+                            },
+                        onClick = onSaveLastRecording,
+                        contentPadding = ButtonDefaults.TextButtonWithIconContentPadding,
+                    ) {
+                        Icon(
+                            Icons.Default.Save,
+                            contentDescription = null,
+                            modifier = Modifier.size(ButtonDefaults.IconSize),
+                        )
+                        Spacer(modifier = Modifier.width(ButtonDefaults.IconSpacing))
+                        Text(label)
+                    }
+                } else {
+                    Row(
+                        verticalAlignment = Alignment.CenterVertically,
+                    ) {
+                        Image(
+                            painter = painterResource(R.drawable.launcher_monochrome_noopacity),
+                            contentDescription = null,
+                            colorFilter = ColorFilter.tint(MaterialTheme.colorScheme.onSurfaceVariant),
+                            modifier = Modifier
+                                .size(ButtonDefaults.IconSize)
+                        )
 
-                    Spacer(modifier = Modifier.width(ButtonDefaults.IconSpacing))
+                        Spacer(modifier = Modifier.width(ButtonDefaults.IconSpacing))
 
-                    ClickableText(
+                        ClickableText(
-                        text = annotatedDescription,
+                            text = annotatedDescription,
-                        onClick = { textIndex ->
+                            onClick = { textIndex ->
-                            if (annotatedDescription.getStringAnnotations(textIndex, textIndex)
+                                if (annotatedDescription.getStringAnnotations(textIndex, textIndex)
-                                    .firstOrNull()?.tag == "minutes"
+                                        .firstOrNull()?.tag == "minutes"
-                            ) {
+                                ) {
-                                showQuickMaxDurationSelector = true
+                                    showQuickMaxDurationSelector = true
-                            }
+                                }
-                        },
+                            },
-                        modifier = Modifier
+                            modifier = Modifier
-                            .widthIn(max = 300.dp)
+                                .widthIn(max = 300.dp)
-                            .fillMaxWidth(),
+                                .fillMaxWidth(),
-                        style = MaterialTheme.typography.bodySmall.copy(
+                            style = MaterialTheme.typography.bodySmall.copy(
-                            color = MaterialTheme.colorScheme.onSurfaceVariant,
+                                color = MaterialTheme.colorScheme.onSurfaceVariant,
-                        ),
+                            ),
-                    )
+                        )
+                    }
                 }
             }
-        }
 
-        LowStorageInfo(appSettings = appSettings)
+            LowStorageInfo(
+                modifier = if (isLargeDisplay) Modifier
+                    .padding(16.dp)
+                    .widthIn(max = 400.dp) else Modifier
+                    .fillMaxWidth()
+                    .padding(4.dp),
+                appSettings = appSettings
+            )
+        }
     }
 }