fix: Make recorder start screen more adaptive

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

@@ -0,0 +1,86 @@
+package app.myzel394.alibi.ui.components.RecorderScreen.atoms
+
+import android.Manifest
+import androidx.compose.foundation.ExperimentalFoundationApi
+import androidx.compose.foundation.combinedClickable
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.BoxWithConstraints
+import androidx.compose.foundation.layout.Column
+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
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.remember
+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.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
+fun BigButton(
+    label: String,
+    icon: ImageVector,
+    description: String? = null,
+    onClick: () -> Unit,
+    onLongClick: () -> Unit = {},
+) {
+    BoxWithConstraints {
+        val isLarge = maxWidth > 500.dp
+
+        Column(
+            modifier = Modifier
+                .size(if (isLarge) 250.dp else 200.dp)
+                .clip(CircleShape)
+                .semantics {
+                    contentDescription = label
+                }
+                .combinedClickable(
+                    interactionSource = remember { MutableInteractionSource() },
+                    indication = rememberRipple(color = MaterialTheme.colorScheme.primary),
+                    onClick = onClick,
+                    onLongClick = onLongClick,
+                ),
+            horizontalAlignment = Alignment.CenterHorizontally,
+            verticalArrangement = Arrangement.Center,
+        ) {
+            Icon(
+                icon,
+                contentDescription = null,
+                modifier = Modifier
+                    .size(if (isLarge) 80.dp else 60.dp),
+                tint = MaterialTheme.colorScheme.primary,
+            )
+            Spacer(modifier = Modifier.height(ButtonDefaults.IconSpacing))
+            Text(
+                label,
+                style = MaterialTheme.typography.titleSmall,
+                color = MaterialTheme.colorScheme.primary,
+            )
+            if (description != null) {
+                Spacer(modifier = Modifier.height(ButtonDefaults.IconSpacing))
+                Text(
+                    description,
+                    style = MaterialTheme.typography.bodySmall,
+                    color = MaterialTheme.colorScheme.onSurfaceVariant,
+                )
+            }
+        }
+    }
+}

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

@@ -32,6 +32,7 @@ import androidx.compose.ui.unit.dp
 import app.myzel394.alibi.R
 import app.myzel394.alibi.db.AppSettings
 import app.myzel394.alibi.ui.SUPPORTS_SCOPED_STORAGE
+import app.myzel394.alibi.ui.components.RecorderScreen.atoms.BigButton
 import app.myzel394.alibi.ui.components.atoms.PermissionRequester
 import app.myzel394.alibi.ui.models.AudioRecorderModel
 import app.myzel394.alibi.ui.utils.PermissionHelper
@@ -77,34 +78,11 @@ fun AudioRecordingStart(
                 }
             }
         ) { triggerRecordAudio ->
-            val label = stringResource(R.string.ui_audioRecorder_action_start_label)
+            BigButton(
-
+                label = stringResource(R.string.ui_audioRecorder_action_start_label),
-            Button(
+                icon = Icons.Default.Mic,
                 onClick = triggerRecordAudio,
-                modifier = Modifier
-                    .semantics {
-                        contentDescription = label
-                    }
-                    .size(250.dp)
-                    .clip(shape = CircleShape),
-                colors = ButtonDefaults.outlinedButtonColors(),
-            ) {
-                Column(
-                    horizontalAlignment = Alignment.CenterHorizontally,
-                ) {
-                    Icon(
-                        Icons.Default.Mic,
-                        contentDescription = null,
-                        modifier = Modifier
-                            .size(80.dp),
-                    )
-                    Spacer(modifier = Modifier.height(ButtonDefaults.IconSpacing))
-                    Text(
-                        label,
-                        style = MaterialTheme.typography.titleSmall,
             )
         }
     }
 }
-    }
-}

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

@@ -8,6 +8,7 @@ import androidx.compose.foundation.gestures.awaitEachGesture
 import androidx.compose.foundation.gestures.detectTapGestures
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.BoxWithConstraints
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxHeight
@@ -16,7 +17,9 @@ import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.foundation.verticalScroll
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.CameraAlt
 import androidx.compose.material.icons.filled.Mic
@@ -113,10 +116,14 @@ fun VideoRecorderPreparationSheet(
                     cameraSelector = videoSettings.cameraSelector,
                 )
             } else {
+                BoxWithConstraints {
+                    val constraints = this
+
                     Column(
                         modifier = Modifier
                             .padding(horizontal = 16.dp)
-                        .padding(bottom = SHEET_BOTTOM_OFFSET, top = 24.dp),
+                            .padding(bottom = SHEET_BOTTOM_OFFSET, top = 24.dp)
+                            .verticalScroll(rememberScrollState()),
                         horizontalAlignment = Alignment.CenterHorizontally,
                         verticalArrangement = Arrangement.spacedBy(30.dp),
                     ) {
@@ -124,12 +131,14 @@ fun VideoRecorderPreparationSheet(
                             horizontalAlignment = Alignment.CenterHorizontally,
                             verticalArrangement = Arrangement.spacedBy(8.dp),
                         ) {
+                            if (constraints.maxHeight > 600.dp) {
                                 Icon(
                                     Icons.Default.CameraAlt,
                                     contentDescription = null,
                                     modifier = Modifier
                                         .size(80.dp),
                                 )
+                            }
                             Text(
                                 stringResource(R.string.ui_videoRecorder_action_start_settings_label),
                                 style = MaterialTheme.typography.labelLarge,
@@ -226,3 +235,4 @@ fun VideoRecorderPreparationSheet(
             }
         }
     }
+}

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

@@ -46,6 +46,7 @@ import app.myzel394.alibi.R
 import app.myzel394.alibi.db.AppSettings
 import app.myzel394.alibi.ui.BIG_PRIMARY_BUTTON_SIZE
 import app.myzel394.alibi.ui.SUPPORTS_SCOPED_STORAGE
+import app.myzel394.alibi.ui.components.RecorderScreen.atoms.BigButton
 import app.myzel394.alibi.ui.components.atoms.PermissionRequester
 import app.myzel394.alibi.ui.models.VideoRecorderModel
 import app.myzel394.alibi.ui.utils.PermissionHelper
@@ -87,29 +88,22 @@ fun VideoRecordingStart(
             showSheet = true
         }
     ) { triggerExternalStorage ->
-        PermissionRequester(
+        BigButton(
-            permission = Manifest.permission.CAMERA,
+            label = stringResource(R.string.ui_videoRecorder_action_start_label),
+            description = stringResource(R.string.ui_videoRecorder_action_configure_label),
             icon = Icons.Default.CameraAlt,
-            onPermissionAvailable = {
+            onLongClick = {
+                if (appSettings.requiresExternalStoragePermission(context)) {
+                    triggerExternalStorage()
+                    return@BigButton
+                }
+
                 showSheet = true
             },
-        ) { triggerCamera ->
-            val label = stringResource(R.string.ui_videoRecorder_action_start_label)
-
-            Column(
-                modifier = Modifier
-                    .size(250.dp)
-                    .clip(CircleShape)
-                    .semantics {
-                        contentDescription = label
-                    }
-                    .combinedClickable(
-                        interactionSource = remember { MutableInteractionSource() },
-                        indication = rememberRipple(color = MaterialTheme.colorScheme.primary),
             onClick = {
                 if (appSettings.requiresExternalStoragePermission(context)) {
                     triggerExternalStorage()
-                                return@combinedClickable
+                    return@BigButton
                 }
 
                 if (PermissionHelper.hasGranted(
@@ -125,33 +119,6 @@ fun VideoRecordingStart(
                     showSheet = true
                 }
             },
-                        onLongClick = {
-                            showSheet = true
-                        },
-                    ),
-                horizontalAlignment = Alignment.CenterHorizontally,
-                verticalArrangement = Arrangement.Center,
-            ) {
-                Icon(
-                    Icons.Default.CameraAlt,
-                    contentDescription = null,
-                    modifier = Modifier
-                        .size(80.dp),
-                    tint = MaterialTheme.colorScheme.primary,
-                )
-                Spacer(modifier = Modifier.height(ButtonDefaults.IconSpacing))
-                Text(
-                    label,
-                    style = MaterialTheme.typography.titleSmall,
-                    color = MaterialTheme.colorScheme.primary,
-                )
-                Spacer(modifier = Modifier.height(ButtonDefaults.IconSpacing))
-                Text(
-                    stringResource(R.string.ui_videoRecorder_action_configure_label),
-                    style = MaterialTheme.typography.bodySmall,
-                    color = MaterialTheme.colorScheme.onSurfaceVariant,
         )
     }
 }
-    }
-}