Merge pull request #97 from Myzel394/improve-landing-page

Improve landing page

app/src/main/java/app/myzel394/alibi/db/AppSettings.kt

@@ -31,7 +31,7 @@ data class AppSettings(
 
     /// Recording information
     // 30 minutes
-    val maxDuration: Long = 30 * 60 * 1000L,
+    val maxDuration: Long = 15 * 60 * 1000L,
     // 60 seconds
     val intervalDuration: Long = 60 * 1000L,
 
@@ -308,14 +308,15 @@ data class AudioRecorderSettings(
     companion object {
         fun getDefaultInstance(): AudioRecorderSettings = AudioRecorderSettings()
         val EXAMPLE_MAX_DURATIONS = listOf(
+            1 * 60 * 1000L,
+            5 * 60 * 1000L,
             15 * 60 * 1000L,
             30 * 60 * 1000L,
             60 * 60 * 1000L,
-            2 * 60 * 60 * 1000L,
-            3 * 60 * 60 * 1000L,
         )
         val EXAMPLE_DURATION_TIMES = listOf(
             60 * 1000L,
+            60 * 2 * 1000L,
             60 * 5 * 1000L,
             60 * 10 * 1000L,
             60 * 15 * 1000L,

app/src/main/java/app/myzel394/alibi/helpers/BatchesFolder.kt

@@ -7,12 +7,14 @@ import android.content.Context
 import android.database.Cursor
 import android.net.Uri
 import android.os.Build
+import android.os.Environment
+import android.os.ParcelFileDescriptor
 import android.os.storage.StorageManager
 import android.provider.MediaStore
 import android.provider.MediaStore.Video.Media
+import android.system.Os
 import android.util.Log
 import androidx.annotation.RequiresApi
-import androidx.core.net.toFile
 import androidx.core.net.toUri
 import androidx.documentfile.provider.DocumentFile
 import app.myzel394.alibi.db.AppSettings
@@ -28,6 +30,7 @@ import java.time.LocalDateTime
 import java.time.format.DateTimeFormatter
 import kotlin.reflect.KFunction4
 
+
 abstract class BatchesFolder(
     open val context: Context,
     open val type: BatchType,
@@ -523,11 +526,46 @@ abstract class BatchesFolder(
     }
 
     fun getAvailableBytes(): Long? {
+        if (type == BatchType.CUSTOM) {
+            var fileDescriptor: ParcelFileDescriptor? = null
+
+            try {
+                fileDescriptor =
+                    context.contentResolver.openFileDescriptor(customFolder!!.uri, "r")!!
+                val stats = Os.fstatvfs(fileDescriptor.fileDescriptor)
+
+                val available = stats.f_bavail * stats.f_bsize
+
+                runCatching {
+                    fileDescriptor.close()
+                }
+
+                return available
+            } catch (e: Exception) {
+                runCatching {
+                    fileDescriptor?.close();
+                }
+
+                return null
+            }
+        }
+
         val storageManager = context.getSystemService(StorageManager::class.java) ?: return null
         val file = when (type) {
             BatchType.INTERNAL -> context.filesDir
-            BatchType.CUSTOM -> customFolder!!.uri.toFile()
+            BatchType.MEDIA ->
-            BatchType.MEDIA -> scopedMediaContentUri.toFile()
+                if (SUPPORTS_SCOPED_STORAGE)
+                    File(
+                        Environment.getExternalStoragePublicDirectory(VideoBatchesFolder.BASE_SCOPED_STORAGE_RELATIVE_PATH),
+                        Media.EXTERNAL_CONTENT_URI.toString(),
+                    )
+                else
+                    File(
+                        Environment.getExternalStoragePublicDirectory(VideoBatchesFolder.BASE_LEGACY_STORAGE_FOLDER),
+                        VideoBatchesFolder.MEDIA_RECORDINGS_SUBFOLDER,
+                    )
+
+            BatchType.CUSTOM -> throw IllegalArgumentException("This code should not be reachable")
         }
 
         return if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
@@ -545,8 +583,8 @@ abstract class BatchesFolder(
 
     companion object {
         fun requiredBytesForOneMinuteOfRecording(appSettings: AppSettings): Long {
-            // 250 MiB sounds like a good default
+            // 350 MiB sounds like a good default
-            return 250 * 1024 * 1024
+            return 350 * 1024 * 1024
         }
     }
 }

app/src/main/java/app/myzel394/alibi/services/VideoRecorderService.kt

@@ -191,17 +191,22 @@ class VideoRecorderService :
         videoCapture = buildVideoCapture(recorder)
 
         runOnMain {
-            camera = cameraProvider!!.bindToLifecycle(
+            try {
-                this,
+                camera = cameraProvider!!.bindToLifecycle(
-                selectedCamera,
+                    this,
-                videoCapture
+                    selectedCamera,
-            )
+                    videoCapture
-            cameraControl = CameraControl(camera!!).also {
+                )
-                it.init()
-            }
-            onCameraControlAvailable()
 
-            _cameraAvailableListener.complete(Unit)
+                cameraControl = CameraControl(camera!!).also {
+                    it.init()
+                }
+                onCameraControlAvailable()
+
+                _cameraAvailableListener.complete(Unit)
+            } catch (error: IllegalArgumentException) {
+                onError()
+            }
         }
     }
 

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

@@ -2,6 +2,7 @@ package app.myzel394.alibi.ui
 
 import android.os.Build
 import androidx.compose.ui.unit.dp
+import java.util.Base64
 
 val BIG_PRIMARY_BUTTON_SIZE = 64.dp
 val BIG_PRIMARY_BUTTON_MAX_WIDTH = 450.dp
@@ -63,3 +64,17 @@ val CRYPTO_DONATIONS = mapOf(
     "Litecoin" to "LZayhTosZ9ToRvcbeR1gEDgb76Z7ZA2drN",
     "Filecoin" to "f1j6pm3chzhgadpf6iwmtux33jb5gccj5arkg4dsq",
 )
+
+// Base64encoding these values so that bots can't easily scrape them.
+val b64d = Base64.getDecoder()
+val CONTACT_METHODS = mapOf<String, String>(
+    "E-Mail" to String(b64d.decode("Z2" + "9vZ2xlLXBsYX" + "k" + "uMjlrMWFAYWxlZWFzL" + "mNvbQo=")).trim(),
+    "GitHub" to String(
+        b64d.decode(
+            "aHR" +
+                    "0cHM6Ly9n" + "a" + "XRodWIuY29t" + "L015emVsMzk0L2NvbnRhY3QtbWUK"
+        )
+    ).trim(),
+    "Mastodon" to String(b64d.decode("T" + "X" + "l6Z" + "WwzOTRAbWFzdG9kb24uc29" + "jaWFsCg" + "==")).trim(),
+    "Reddit" to "https://reddit.com/u/Myzel394"
+)

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

@@ -14,6 +14,7 @@ import androidx.compose.runtime.DisposableEffect
 import androidx.compose.runtime.collectAsState
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalContext
+import androidx.core.content.ContextCompat
 import androidx.lifecycle.viewmodel.compose.viewModel
 import androidx.navigation.compose.NavHost
 import androidx.navigation.compose.composable
@@ -60,7 +61,15 @@ fun Navigation(
         startDestination = if (settings.hasSeenOnboarding) Screen.AudioRecorder.route else Screen.Welcome.route,
     ) {
         composable(Screen.Welcome.route) {
-            WelcomeScreen(onNavigateToAudioRecorderScreen = { navController.navigate(Screen.AudioRecorder.route) })
+            WelcomeScreen(
+                onNavigateToAudioRecorderScreen = {
+                    val mainHandler = ContextCompat.getMainExecutor(context)
+
+                    mainHandler.execute {
+                        navController.navigate(Screen.AudioRecorder.route)
+                    }
+                },
+            )
         }
         composable(
             Screen.AudioRecorder.route,

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

@@ -39,11 +39,12 @@ fun BigButton(
     val orientation = LocalConfiguration.current.orientation
 
     BoxWithConstraints {
-        val isLarge = maxWidth > 500.dp && orientation == Configuration.ORIENTATION_PORTRAIT
+        val isLarge =
+            maxWidth > 200.dp && maxHeight > 350.dp && orientation == Configuration.ORIENTATION_PORTRAIT
 
         Column(
             modifier = Modifier
-                .size(if (isLarge) 250.dp else 200.dp)
+                .size(if (isLarge) 250.dp else 190.dp)
                 .clip(CircleShape)
                 .semantics {
                     contentDescription = label

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

@@ -1,6 +1,7 @@
 package app.myzel394.alibi.ui.components.RecorderScreen.atoms
 
 import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.BoxWithConstraints
 import androidx.compose.foundation.layout.padding
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
@@ -13,6 +14,7 @@ import app.myzel394.alibi.helpers.BatchesFolder
 import app.myzel394.alibi.helpers.VideoBatchesFolder
 import app.myzel394.alibi.ui.components.atoms.MessageBox
 import app.myzel394.alibi.ui.components.atoms.MessageType
+import app.myzel394.alibi.ui.components.atoms.VisualDensity
 
 @Composable
 fun LowStorageInfo(
@@ -37,11 +39,16 @@ fun LowStorageInfo(
         Box(
             modifier = Modifier.padding(horizontal = 16.dp, vertical = 8.dp)
         ) {
-            MessageBox(
+            BoxWithConstraints {
-                type = MessageType.WARNING,
+                val isLarge = maxHeight > 600.dp;
-                message = if (appSettings.saveFolder == null)
+
-                    stringResource(R.string.ui_recorder_lowOnStorage_hintANDswitchSaveFolder)
+                MessageBox(
-                else stringResource(R.string.ui_recorder_lowOnStorage_hint)
+                    type = MessageType.WARNING,
-            )
+                    message = if (appSettings.saveFolder == null)
+                        stringResource(R.string.ui_recorder_lowOnStorage_hintANDswitchSaveFolder)
+                    else stringResource(R.string.ui_recorder_lowOnStorage_hint),
+                    density = if (isLarge) VisualDensity.COMFORTABLE else VisualDensity.COMPACT
+                )
+            }
         }
 }

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

@@ -3,8 +3,6 @@ package app.myzel394.alibi.ui.components.RecorderScreen.atoms
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Warning
 import androidx.compose.material3.AlertDialog
-import androidx.compose.material3.Button
-import androidx.compose.material3.ButtonDefaults
 import androidx.compose.material3.Icon
 import androidx.compose.material3.Text
 import androidx.compose.material3.TextButton
@@ -15,7 +13,6 @@ import app.myzel394.alibi.R
 @Composable
 fun RecorderErrorDialog(
     onClose: () -> Unit,
-    onSave: () -> Unit,
 ) {
     AlertDialog(
         onDismissRequest = onClose,
@@ -31,14 +28,9 @@ fun RecorderErrorDialog(
         text = {
             Text(stringResource(R.string.ui_recorder_error_recording_description))
         },
-        dismissButton = {
-            TextButton(onClick = onClose) {
-                Text(stringResource(R.string.dialog_close_cancel_label))
-            }
-        },
         confirmButton = {
-            TextButton(onClick = onSave) {
+            TextButton(onClick = onClose) {
-                Text(stringResource(R.string.ui_recorder_action_save_label))
+                Text(stringResource(R.string.dialog_close_neutral_label))
             }
         }
     )

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

@@ -1,17 +1,16 @@
 package app.myzel394.alibi.ui.components.RecorderScreen.atoms
 
+import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.height
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Memory
 import androidx.compose.material3.AlertDialog
+import androidx.compose.material3.CircularProgressIndicator
 import androidx.compose.material3.Icon
 import androidx.compose.material3.LinearProgressIndicator
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
-import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
 import app.myzel394.alibi.R
@@ -38,15 +37,18 @@ fun RecorderProcessingDialog(
         text = {
             Column(
                 horizontalAlignment = Alignment.CenterHorizontally,
+                verticalArrangement = Arrangement.spacedBy(32.dp),
             ) {
                 Text(
                     stringResource(R.string.ui_recorder_action_save_processing_dialog_description),
                 )
-                Spacer(modifier = Modifier.height(32.dp))
+                CircularProgressIndicator()
                 if (progress == null)
                     LinearProgressIndicator()
                 else
-                    LinearProgressIndicator(progress = progress)
+                    LinearProgressIndicator(
+                        progress = { progress },
+                    )
             }
         },
         confirmButton = {}

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

@@ -93,9 +93,16 @@ fun RecorderEventsHandler(
         recorder: RecorderModel
     ) {
         if (!settings.deleteRecordingsImmediately) {
+            val information = recorder.recorderService?.getRecordingInformation()
+
+            if (information == null) {
+                Log.e("RecorderEventsHandler", "Recording information is null")
+                return
+            }
+
             dataStore.updateData {
                 it.setLastRecording(
-                    recorder.recorderService!!.getRecordingInformation()
+                    information
                 )
             }
         }
@@ -247,6 +254,13 @@ fun RecorderEventsHandler(
             scope.launch {
                 saveAsLastRecording(audioRecorder as RecorderModel)
 
+                runCatching {
+                    audioRecorder.stopRecording(context)
+                }
+                runCatching {
+                    audioRecorder.destroyService(context)
+                }
+
                 showRecorderError = true
             }
         }
@@ -290,6 +304,13 @@ fun RecorderEventsHandler(
             scope.launch {
                 saveAsLastRecording(videoRecorder as RecorderModel)
 
+                runCatching {
+                    videoRecorder.stopRecording(context)
+                }
+                runCatching {
+                    videoRecorder.destroyService(context)
+                }
+
                 showRecorderError = true
             }
         }
@@ -324,8 +345,6 @@ fun RecorderEventsHandler(
             onClose = {
                 showRecorderError = false
             },
-            onSave = {
-            },
         )
 
     if (showBatchesInaccessibleError)

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

@@ -103,7 +103,7 @@ fun StartRecording(
     Column(
         modifier = Modifier
             .fillMaxSize()
-            .padding(bottom = if (orientation == Configuration.ORIENTATION_PORTRAIT) 32.dp else 16.dp),
+            .padding(bottom = if (orientation == Configuration.ORIENTATION_PORTRAIT) 0.dp else 16.dp),
         verticalArrangement = Arrangement.SpaceBetween,
         horizontalAlignment = Alignment.CenterHorizontally,
     ) {

app/src/main/java/app/myzel394/alibi/ui/components/SettingsScreen/Tiles/MaxDurationTile.kt

@@ -68,7 +68,7 @@ fun MaxDurationTile(
             timeFormat = DurationFormat.HH_MM,
             currentTime = settings.maxDuration / 1000,
             minTime = 60,
-            maxTime = 10 * 24 * 60 * 60,
+            maxTime = 23 * 60 * 60 + 59 * 60,
         )
     )
     SettingsTile(

app/src/main/java/app/myzel394/alibi/ui/components/SettingsScreen/Tiles/SaveFolderTile.kt

@@ -26,7 +26,6 @@ import androidx.compose.material.icons.filled.Folder
 import androidx.compose.material.icons.filled.Lock
 import androidx.compose.material.icons.filled.Mic
 import androidx.compose.material.icons.filled.PermMedia
-import androidx.compose.material.icons.filled.Warning
 import androidx.compose.material3.AlertDialog
 import androidx.compose.material3.Button
 import androidx.compose.material3.ButtonDefaults
@@ -435,8 +434,6 @@ fun SelectionSheet(
 ) {
     val context = LocalContext.current
 
-    var showCustomFolderWarning by remember { mutableStateOf(false) }
-
     val selectFolder = rememberFolderSelectorDialog { folder ->
         if (folder == null) {
             return@rememberFolderSelectorDialog
@@ -445,18 +442,6 @@ fun SelectionSheet(
         updateValue(folder.toString())
     }
 
-    if (showCustomFolderWarning) {
-        CustomFolderWarningDialog(
-            onDismiss = {
-                showCustomFolderWarning = false
-            },
-            onConfirm = {
-                showCustomFolderWarning = false
-                selectFolder()
-            },
-        )
-    }
-
     var showExternalPermissionRequired by remember { mutableStateOf(false) }
 
     if (showExternalPermissionRequired) {
@@ -523,9 +508,7 @@ fun SelectionSheet(
                 SelectionButton(
                     label = stringResource(R.string.ui_settings_option_saveFolder_action_custom_label),
                     icon = Icons.Default.Folder,
-                    onClick = {
+                    onClick = selectFolder,
-                        showCustomFolderWarning = true
-                    },
                 )
                 if (!SUPPORTS_SAVING_VIDEOS_IN_CUSTOM_FOLDERS) {
                     Column(
@@ -581,52 +564,6 @@ fun SelectionButton(
     }
 }
 
-@Composable
-fun CustomFolderWarningDialog(
-    onDismiss: () -> Unit,
-    onConfirm: () -> Unit,
-) {
-    val title = stringResource(R.string.ui_settings_option_saveFolder_warning_title)
-    val text = stringResource(R.string.ui_settings_option_saveFolder_warning_text)
-
-    AlertDialog(
-        icon = {
-            Icon(
-                Icons.Default.Warning,
-                contentDescription = null,
-            )
-        },
-        onDismissRequest = onDismiss,
-        title = {
-            Text(text = title)
-        },
-        text = {
-            Text(text = text)
-        },
-        confirmButton = {
-            Button(onClick = onConfirm) {
-                Text(
-                    text = stringResource(R.string.ui_settings_option_saveFolder_warning_action_confirm),
-                )
-            }
-        },
-        dismissButton = {
-            TextButton(
-                onClick = onDismiss,
-                contentPadding = ButtonDefaults.TextButtonWithIconContentPadding,
-            ) {
-                Icon(
-                    Icons.Default.Cancel,
-                    contentDescription = null,
-                    modifier = Modifier.size(ButtonDefaults.IconSize),
-                )
-                Spacer(modifier = Modifier.width(ButtonDefaults.IconSpacing))
-                Text(stringResource(R.string.dialog_close_cancel_label))
-            }
-        }
-    )
-}
-
 @Composable
 fun ExternalPermissionRequiredDialog(
     onDismiss: () -> Unit,

app/src/main/java/app/myzel394/alibi/ui/components/WelcomeScreen/atoms/MaxDurationSelector.kt

@@ -0,0 +1,196 @@
+package app.myzel394.alibi.ui.components.WelcomeScreen.atoms
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Edit
+import androidx.compose.material.icons.filled.Timer
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.Icon
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.RadioButton
+import androidx.compose.material3.Text
+import androidx.compose.material3.contentColorFor
+import androidx.compose.material3.minimumInteractiveComponentSize
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableLongStateOf
+import androidx.compose.runtime.rememberCoroutineScope
+import androidx.compose.runtime.saveable.rememberSaveable
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.platform.LocalContext
+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.dataStore
+import app.myzel394.alibi.ui.utils.IconResource
+import com.maxkeppeker.sheets.core.models.base.Header
+import com.maxkeppeker.sheets.core.models.base.IconSource
+import com.maxkeppeker.sheets.core.models.base.rememberUseCaseState
+import com.maxkeppeler.sheets.duration.DurationDialog
+import com.maxkeppeler.sheets.duration.models.DurationConfig
+import com.maxkeppeler.sheets.duration.models.DurationFormat
+import com.maxkeppeler.sheets.duration.models.DurationSelection
+import kotlinx.coroutines.launch
+
+const val MINUTES_1 = 1000 * 60 * 1L
+const val MINUTES_5 = 1000 * 60 * 5L
+const val MINUTES_15 = 1000 * 60 * 15L
+const val MINUTES_30 = 1000 * 60 * 30L
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun MaxDurationSelector(
+    modifier: Modifier = Modifier,
+) {
+    val OPTIONS = mapOf<Long, String>(
+        MINUTES_1 to stringResource(R.string.ui_welcome_timeSettings_values_1min),
+        MINUTES_5 to stringResource(R.string.ui_welcome_timeSettings_values_5min),
+        MINUTES_15 to stringResource(R.string.ui_welcome_timeSettings_values_15min),
+        MINUTES_30 to stringResource(R.string.ui_welcome_timeSettings_values_30min),
+    )
+
+    val scope = rememberCoroutineScope()
+    val dataStore = LocalContext.current.dataStore
+
+    var selectedDuration by rememberSaveable { mutableLongStateOf(MINUTES_15) };
+
+    // Make sure appSettings is updated properly
+    LaunchedEffect(selectedDuration) {
+        scope.launch {
+            dataStore.updateData {
+                it.setMaxDuration(selectedDuration)
+            }
+        }
+    }
+
+    Column(
+        modifier = Modifier
+            .fillMaxWidth()
+            .clip(MaterialTheme.shapes.medium)
+            .background(MaterialTheme.colorScheme.surfaceContainer)
+            .then(modifier),
+        verticalArrangement = Arrangement.Center,
+    ) {
+        for ((duration, label) in OPTIONS) {
+            val a11yLabel = stringResource(
+                R.string.a11y_selectValue,
+                label
+            )
+
+            Row(
+                verticalAlignment = Alignment.CenterVertically,
+                horizontalArrangement = Arrangement.spacedBy(8.dp),
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .clip(MaterialTheme.shapes.medium)
+                    .semantics {
+                        contentDescription = a11yLabel
+                    }
+                    .clickable {
+                        selectedDuration = duration
+                    }
+                    .padding(16.dp)
+            ) {
+                RadioButton(
+                    selected = selectedDuration == duration,
+                    onClick = { selectedDuration = duration },
+                )
+                Text(label)
+            }
+        }
+
+        let {
+            val showDialog = rememberUseCaseState()
+            val label = stringResource(R.string.ui_welcome_timeSettings_values_custom)
+            val selected = selectedDuration !in OPTIONS.keys
+
+            DurationDialog(
+                state = showDialog,
+                header = Header.Default(
+                    title = stringResource(R.string.ui_settings_option_maxDuration_title),
+                    icon = IconSource(
+                        painter = IconResource.fromImageVector(Icons.Default.Timer)
+                            .asPainterResource(),
+                        contentDescription = null,
+                    )
+                ),
+                selection = DurationSelection { newTimeInSeconds ->
+                    selectedDuration = newTimeInSeconds * 1000L
+                },
+                config = DurationConfig(
+                    timeFormat = DurationFormat.HH_MM,
+                    currentTime = selectedDuration / 1000,
+                    minTime = 60,
+                    maxTime = 23 * 60 * 60 + 60 * 59,
+                )
+            )
+            Row(
+                verticalAlignment = Alignment.CenterVertically,
+                horizontalArrangement = Arrangement.spacedBy(8.dp),
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .semantics {
+                        contentDescription = label
+                    }
+                    .clickable {
+                        showDialog.show()
+                    }
+                    .clip(MaterialTheme.shapes.medium)
+                    .padding(16.dp)
+            ) {
+                Icon(
+                    Icons.Default.Edit,
+                    contentDescription = null,
+                    modifier = Modifier
+                        .minimumInteractiveComponentSize()
+                        .padding(2.dp),
+                    tint = if (selected) MaterialTheme.colorScheme.primary else contentColorFor(
+                        MaterialTheme.colorScheme.surfaceContainer
+                    )
+                )
+                if (selected) {
+                    val totalMinutes = selectedDuration / 1000 / 60
+                    val minutes = totalMinutes % 60
+                    val hours = (totalMinutes / 60).toInt()
+
+                    Text(
+                        text = when (hours) {
+                            0 -> stringResource(
+                                R.string.ui_welcome_timeSettings_values_customFormat_mm,
+                                minutes
+                            )
+
+                            1 -> stringResource(
+                                R.string.ui_welcome_timeSettings_values_customFormat_h_mm,
+                                minutes
+                            )
+
+                            else -> stringResource(
+                                R.string.ui_welcome_timeSettings_values_customFormat_hh_mm,
+                                hours,
+                                minutes
+                            )
+                        },
+                        color = MaterialTheme.colorScheme.primary,
+                    )
+                } else {
+                    Text(
+                        text = stringResource(R.string.ui_welcome_timeSettings_values_custom),
+                    )
+                }
+            }
+        }
+    }
+}

app/src/main/java/app/myzel394/alibi/ui/components/WelcomeScreen/atoms/SaveFolderSelection.kt

@@ -0,0 +1,206 @@
+package app.myzel394.alibi.ui.components.WelcomeScreen.atoms
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+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.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.widthIn
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Folder
+import androidx.compose.material.icons.filled.Lock
+import androidx.compose.material.icons.filled.PermMedia
+import androidx.compose.material3.ButtonDefaults
+import androidx.compose.material3.Icon
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.RadioButton
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+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.RECORDER_MEDIA_SELECTED_VALUE
+import app.myzel394.alibi.ui.SUPPORTS_SAVING_VIDEOS_IN_CUSTOM_FOLDERS
+import app.myzel394.alibi.ui.components.atoms.MessageBox
+import app.myzel394.alibi.ui.components.atoms.MessageType
+import app.myzel394.alibi.ui.components.atoms.VisualDensity
+
+const val CUSTOM_FOLDER = "custom"
+
+@Composable
+fun SaveFolderSelection(
+    modifier: Modifier = Modifier,
+    saveFolder: String?,
+    isLowOnStorage: Boolean,
+    onSaveFolderChange: (String?) -> Unit,
+) {
+    @Composable
+    fun createModifier(a11yLabel: String, onClick: () -> Unit) =
+        Modifier
+            .fillMaxWidth()
+            .clip(MaterialTheme.shapes.medium)
+            .semantics {
+                contentDescription = a11yLabel
+            }
+            .clickable(onClick = onClick)
+            .padding(16.dp)
+            .padding(end = 8.dp)
+
+    Column(
+        verticalArrangement = Arrangement.spacedBy(16.dp),
+    ) {
+        Column(
+            modifier = Modifier
+                .fillMaxWidth()
+                .clip(MaterialTheme.shapes.medium)
+                .background(MaterialTheme.colorScheme.surfaceContainer)
+                .then(modifier),
+            verticalArrangement = Arrangement.Center,
+        ) {
+            let {
+                val label = stringResource(R.string.ui_welcome_saveFolder_values_internal)
+                val a11yLabel = stringResource(
+                    R.string.a11y_selectValue,
+                    label
+                )
+                val folder = null
+
+                Row(
+                    verticalAlignment = Alignment.CenterVertically,
+                    horizontalArrangement = Arrangement.SpaceBetween,
+                    modifier = createModifier(a11yLabel) {
+                        onSaveFolderChange(folder)
+                    },
+                ) {
+                    Row(
+                        verticalAlignment = Alignment.CenterVertically,
+                        horizontalArrangement = Arrangement.spacedBy(8.dp),
+                    ) {
+                        RadioButton(
+                            selected = saveFolder == folder,
+                            onClick = { onSaveFolderChange(folder) },
+                        )
+                        Text(label)
+                    }
+                    Icon(
+                        Icons.Default.Lock,
+                        contentDescription = null,
+                        modifier = Modifier
+                            .size(ButtonDefaults.IconSize)
+                    )
+                }
+            }
+            let {
+                val label = stringResource(R.string.ui_welcome_saveFolder_values_media)
+                val a11yLabel = stringResource(
+                    R.string.a11y_selectValue,
+                    label
+                )
+                val folder = RECORDER_MEDIA_SELECTED_VALUE
+
+                Row(
+                    verticalAlignment = Alignment.CenterVertically,
+                    horizontalArrangement = Arrangement.SpaceBetween,
+                    modifier = createModifier(a11yLabel) {
+                        onSaveFolderChange(folder)
+                    },
+                ) {
+                    Row(
+                        verticalAlignment = Alignment.CenterVertically,
+                        horizontalArrangement = Arrangement.spacedBy(8.dp),
+                    ) {
+                        RadioButton(
+                            selected = saveFolder == folder,
+                            onClick = { onSaveFolderChange(folder) },
+                        )
+                        Text(label)
+                    }
+                    Icon(
+                        Icons.Default.PermMedia,
+                        contentDescription = null,
+                        modifier = Modifier
+                            .size(ButtonDefaults.IconSize)
+                    )
+                }
+            }
+            let {
+                val label = stringResource(R.string.ui_welcome_saveFolder_values_custom)
+                val a11yLabel = stringResource(
+                    R.string.a11y_selectValue,
+                    label
+                )
+                val folder = CUSTOM_FOLDER
+
+                Column(
+                    horizontalAlignment = Alignment.Start,
+                ) {
+                    Row(
+                        verticalAlignment = Alignment.CenterVertically,
+                        horizontalArrangement = Arrangement.SpaceBetween,
+                        modifier = createModifier(a11yLabel) {
+                            onSaveFolderChange(folder)
+                        },
+                    ) {
+                        Row(
+                            verticalAlignment = Alignment.CenterVertically,
+                            horizontalArrangement = Arrangement.spacedBy(8.dp),
+                        ) {
+                            RadioButton(
+                                selected = saveFolder == folder,
+                                onClick = { onSaveFolderChange(folder) },
+                            )
+                            Text(label)
+                        }
+                        Icon(
+                            Icons.Default.Folder,
+                            contentDescription = null,
+                            modifier = Modifier
+                                .size(ButtonDefaults.IconSize)
+                        )
+                    }
+                    if (!SUPPORTS_SAVING_VIDEOS_IN_CUSTOM_FOLDERS) {
+                        Column(
+                            modifier = Modifier
+                                .padding(horizontal = 32.dp, vertical = 12.dp),
+                            horizontalAlignment = Alignment.CenterHorizontally,
+                            verticalArrangement = Arrangement.spacedBy(8.dp),
+                        ) {
+                            Text(
+                                stringResource(R.string.ui_settings_option_saveFolder_videoUnsupported),
+                                fontSize = MaterialTheme.typography.titleSmall.fontSize,
+                            )
+                            Text(
+                                stringResource(R.string.ui_minApiRequired, 8, 26),
+                                fontSize = MaterialTheme.typography.bodySmall.fontSize,
+                            )
+                        }
+                    }
+                }
+            }
+        }
+        if (isLowOnStorage && saveFolder == null)
+            MessageBox(
+                type = MessageType.ERROR,
+                message = stringResource(R.string.ui_welcome_saveFolder_externalRequired)
+            )
+        else
+            Box(
+                modifier = Modifier.widthIn(max = 400.dp)
+            ) {
+                MessageBox(
+                    type = MessageType.INFO,
+                    message = stringResource(R.string.ui_welcome_timeSettings_changeableHint),
+                    density = VisualDensity.DENSE,
+                )
+            }
+    }
+}

app/src/main/java/app/myzel394/alibi/ui/components/WelcomeScreen/pages/ExplanationPage.kt

@@ -1,4 +1,4 @@
-package app.myzel394.alibi.ui.components.WelcomeScreen.atoms
+package app.myzel394.alibi.ui.components.WelcomeScreen.pages
 
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column

app/src/main/java/app/myzel394/alibi/ui/components/WelcomeScreen/pages/MaxDurationSettingsPage.kt

@@ -0,0 +1,111 @@
+package app.myzel394.alibi.ui.components.WelcomeScreen.pages
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
+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.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.layout.widthIn
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.verticalScroll
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.AccessTime
+import androidx.compose.material.icons.filled.ChevronRight
+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.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.unit.dp
+import app.myzel394.alibi.R
+import app.myzel394.alibi.ui.BIG_PRIMARY_BUTTON_SIZE
+import app.myzel394.alibi.ui.components.WelcomeScreen.atoms.MaxDurationSelector
+import app.myzel394.alibi.ui.components.atoms.MessageBox
+import app.myzel394.alibi.ui.components.atoms.MessageType
+import app.myzel394.alibi.ui.components.atoms.VisualDensity
+
+@Composable
+fun MaxDurationSettingsPage(
+    onContinue: () -> Unit,
+) {
+    Column(
+        modifier = Modifier
+            .fillMaxSize()
+            .verticalScroll(rememberScrollState()),
+        verticalArrangement = Arrangement.SpaceBetween,
+        horizontalAlignment = Alignment.CenterHorizontally,
+    ) {
+        Spacer(modifier = Modifier.height(40.dp))
+        Column(
+            modifier = Modifier
+                .padding(horizontal = 32.dp),
+            verticalArrangement = Arrangement.Center,
+            horizontalAlignment = Alignment.CenterHorizontally,
+        ) {
+            Icon(
+                Icons.Default.AccessTime,
+                contentDescription = null,
+                tint = MaterialTheme.colorScheme.tertiary,
+                modifier = Modifier.size(128.dp),
+            )
+            Spacer(modifier = Modifier.height(32.dp))
+            Text(
+                stringResource(R.string.ui_welcome_timeSettings_title),
+                style = MaterialTheme.typography.titleLarge,
+            )
+            Spacer(modifier = Modifier.height(16.dp))
+            Text(
+                stringResource(R.string.ui_welcome_timeSettings_message),
+                fontStyle = MaterialTheme.typography.bodySmall.fontStyle,
+                fontSize = MaterialTheme.typography.bodySmall.fontSize,
+                color = MaterialTheme.typography.bodySmall.color,
+            )
+        }
+        Spacer(modifier = Modifier.height(40.dp))
+        Box(
+            modifier = Modifier
+                .widthIn(max = 400.dp)
+                .padding(horizontal = 16.dp)
+        ) {
+            MaxDurationSelector()
+        }
+        Spacer(modifier = Modifier.height(20.dp))
+        Box(
+            modifier = Modifier
+                .widthIn(max = 400.dp)
+                .padding(horizontal = 16.dp)
+        ) {
+            MessageBox(
+                type = MessageType.INFO,
+                message = stringResource(R.string.ui_welcome_timeSettings_changeableHint),
+                density = VisualDensity.DENSE,
+            )
+        }
+        Spacer(modifier = Modifier.height(40.dp))
+        Button(
+            onClick = { onContinue() },
+            modifier = Modifier
+                .padding(16.dp)
+                .fillMaxWidth()
+                .height(BIG_PRIMARY_BUTTON_SIZE),
+            contentPadding = ButtonDefaults.ButtonWithIconContentPadding,
+        ) {
+            Icon(
+                Icons.Default.ChevronRight,
+                contentDescription = null,
+                modifier = Modifier.size(ButtonDefaults.IconSize)
+            )
+            Spacer(modifier = Modifier.width(ButtonDefaults.IconSpacing))
+            Text(stringResource(R.string.continue_label))
+        }
+    }
+}

app/src/main/java/app/myzel394/alibi/ui/components/WelcomeScreen/pages/ReadyPage.kt

@@ -0,0 +1,78 @@
+package app.myzel394.alibi.ui.components.WelcomeScreen.pages
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
+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.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Celebration
+import androidx.compose.material.icons.filled.Check
+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.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.unit.dp
+import app.myzel394.alibi.R
+import app.myzel394.alibi.ui.BIG_PRIMARY_BUTTON_SIZE
+
+@Composable
+fun ReadyPage(
+    onContinue: () -> Unit,
+) {
+    Column(
+        modifier = Modifier.fillMaxSize(),
+        verticalArrangement = Arrangement.SpaceBetween,
+        horizontalAlignment = Alignment.CenterHorizontally,
+    ) {
+        Spacer(modifier = Modifier.weight(1f))
+        Column(
+            modifier = Modifier
+                .padding(horizontal = 32.dp),
+            verticalArrangement = Arrangement.Center,
+            horizontalAlignment = Alignment.CenterHorizontally,
+        ) {
+            Icon(
+                Icons.Default.Celebration,
+                contentDescription = null,
+                tint = MaterialTheme.colorScheme.tertiary,
+                modifier = Modifier.size(128.dp),
+            )
+            Spacer(modifier = Modifier.height(32.dp))
+            Text(
+                stringResource(R.string.ui_welcome_ready_title),
+                style = MaterialTheme.typography.titleLarge,
+            )
+            Spacer(modifier = Modifier.height(16.dp))
+            Text(
+                stringResource(R.string.ui_welcome_ready_message),
+            )
+        }
+        Spacer(modifier = Modifier.weight(1f))
+        Button(
+            onClick = onContinue,
+            modifier = Modifier
+                .padding(16.dp)
+                .fillMaxWidth()
+                .height(BIG_PRIMARY_BUTTON_SIZE),
+            contentPadding = ButtonDefaults.ButtonWithIconContentPadding,
+        ) {
+            Icon(
+                Icons.Default.Check,
+                contentDescription = null,
+                modifier = Modifier.size(ButtonDefaults.IconSize)
+            )
+            Spacer(modifier = Modifier.width(ButtonDefaults.IconSpacing))
+            Text(stringResource(R.string.ui_welcome_ready_start))
+        }
+    }
+}

app/src/main/java/app/myzel394/alibi/ui/components/WelcomeScreen/pages/ResponsibilityPage.kt

@@ -1,4 +1,4 @@
-package app.myzel394.alibi.ui.components.WelcomeScreen.atoms
+package app.myzel394.alibi.ui.components.WelcomeScreen.pages
 
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
@@ -10,7 +10,7 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
 import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.filled.Check
+import androidx.compose.material.icons.filled.ChevronRight
 import androidx.compose.material.icons.filled.Warning
 import androidx.compose.material3.Button
 import androidx.compose.material3.ButtonDefaults
@@ -59,7 +59,7 @@ fun ResponsibilityPage(
         }
         Spacer(modifier = Modifier.weight(1f))
         Button(
-            onClick = { onContinue() },
+            onClick = onContinue,
             modifier = Modifier
                 .padding(16.dp)
                 .fillMaxWidth()
@@ -67,12 +67,12 @@ fun ResponsibilityPage(
             contentPadding = ButtonDefaults.ButtonWithIconContentPadding,
         ) {
             Icon(
-                Icons.Default.Check,
+                Icons.Default.ChevronRight,
                 contentDescription = null,
                 modifier = Modifier.size(ButtonDefaults.IconSize)
             )
             Spacer(modifier = Modifier.width(ButtonDefaults.IconSpacing))
-            Text(stringResource(R.string.ui_welcome_start_label))
+            Text(stringResource(R.string.continue_label))
         }
     }
 }

app/src/main/java/app/myzel394/alibi/ui/components/WelcomeScreen/pages/SaveFolderPage.kt

@@ -0,0 +1,248 @@
+package app.myzel394.alibi.ui.components.WelcomeScreen.pages
+
+import android.Manifest
+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.Spacer
+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.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.layout.widthIn
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.verticalScroll
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.automirrored.filled.InsertDriveFile
+import androidx.compose.material.icons.filled.ChevronLeft
+import androidx.compose.material.icons.filled.ChevronRight
+import androidx.compose.material.icons.filled.Folder
+import androidx.compose.material3.AlertDialog
+import androidx.compose.material3.Button
+import androidx.compose.material3.ButtonDefaults
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.material3.TextButton
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.saveable.rememberSaveable
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.unit.dp
+import app.myzel394.alibi.R
+import app.myzel394.alibi.db.AppSettings
+import app.myzel394.alibi.helpers.BatchesFolder
+import app.myzel394.alibi.helpers.VideoBatchesFolder
+import app.myzel394.alibi.ui.BIG_PRIMARY_BUTTON_SIZE
+import app.myzel394.alibi.ui.RECORDER_MEDIA_SELECTED_VALUE
+import app.myzel394.alibi.ui.SUPPORTS_SCOPED_STORAGE
+import app.myzel394.alibi.ui.components.WelcomeScreen.atoms.SaveFolderSelection
+import app.myzel394.alibi.ui.components.atoms.PermissionRequester
+import app.myzel394.alibi.ui.utils.rememberFolderSelectorDialog
+
+@Composable
+fun SaveFolderPage(
+    onBack: () -> Unit,
+    onContinue: (saveFolder: String?) -> Unit,
+    appSettings: AppSettings,
+) {
+    var saveFolder by rememberSaveable { mutableStateOf<String?>(null) }
+
+    val context = LocalContext.current
+
+    val isLowOnStorage: Boolean = remember(appSettings.maxDuration) {
+        val availableBytes = VideoBatchesFolder.viaInternalFolder(context).getAvailableBytes()
+
+        if (availableBytes == null) {
+            return@remember false
+        }
+
+        val bytesPerMinute = BatchesFolder.requiredBytesForOneMinuteOfRecording(appSettings)
+        val requiredBytes = appSettings.maxDuration / 1000 / 60 * bytesPerMinute
+
+        // Allow for a 10% margin of error
+        availableBytes < requiredBytes
+    }
+
+    LaunchedEffect(isLowOnStorage, appSettings.maxDuration) {
+        if (isLowOnStorage) {
+            if (saveFolder == null) {
+                saveFolder = RECORDER_MEDIA_SELECTED_VALUE
+            }
+        } else {
+            saveFolder = null
+        }
+    }
+
+    Column(
+        modifier = Modifier
+            .fillMaxSize()
+            .verticalScroll(rememberScrollState()),
+        verticalArrangement = Arrangement.SpaceBetween,
+        horizontalAlignment = Alignment.CenterHorizontally,
+    ) {
+        Spacer(modifier = Modifier.height(40.dp))
+        Column(
+            modifier = Modifier
+                .padding(horizontal = 32.dp),
+            verticalArrangement = Arrangement.Center,
+            horizontalAlignment = Alignment.CenterHorizontally,
+        ) {
+            Icon(
+                Icons.AutoMirrored.Filled.InsertDriveFile,
+                contentDescription = null,
+                tint = MaterialTheme.colorScheme.tertiary,
+                modifier = Modifier.size(128.dp),
+            )
+            Spacer(modifier = Modifier.height(32.dp))
+            Text(
+                stringResource(R.string.ui_welcome_saveFolder_title),
+                style = MaterialTheme.typography.titleLarge,
+            )
+            Spacer(modifier = Modifier.height(16.dp))
+            Text(
+                stringResource(R.string.ui_welcome_saveFolder_message),
+                fontStyle = MaterialTheme.typography.bodySmall.fontStyle,
+                fontSize = MaterialTheme.typography.bodySmall.fontSize,
+                color = MaterialTheme.typography.bodySmall.color,
+            )
+        }
+        Spacer(modifier = Modifier.height(40.dp))
+        Box(
+            modifier = Modifier
+                .widthIn(max = 400.dp)
+                .padding(horizontal = 16.dp)
+        ) {
+            SaveFolderSelection(
+                saveFolder = saveFolder,
+                isLowOnStorage = isLowOnStorage,
+                onSaveFolderChange = { saveFolder = it },
+            )
+        }
+        Spacer(modifier = Modifier.height(40.dp))
+        Row(
+            verticalAlignment = Alignment.CenterVertically,
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(16.dp),
+            horizontalArrangement = Arrangement.spacedBy(16.dp),
+        ) {
+            IconButton(
+                onClick = onBack,
+                modifier = Modifier
+                    .size(BIG_PRIMARY_BUTTON_SIZE),
+            ) {
+                Icon(
+                    Icons.Default.ChevronLeft,
+                    contentDescription = null,
+                )
+            }
+            PermissionRequester(
+                permission = Manifest.permission.WRITE_EXTERNAL_STORAGE,
+                icon = Icons.AutoMirrored.Filled.InsertDriveFile,
+                onPermissionAvailable = { onContinue(saveFolder) },
+            ) { requestWritePermission ->
+                val selectFolder = rememberFolderSelectorDialog { folder ->
+                    if (folder == null) {
+                        return@rememberFolderSelectorDialog
+                    }
+
+                    onContinue(saveFolder)
+                }
+                var showCustomFolderHint by rememberSaveable { mutableStateOf(false) }
+
+                if (showCustomFolderHint) {
+                    _CustomFolderDialog(
+                        onAbort = { showCustomFolderHint = false },
+                        onOk = {
+                            showCustomFolderHint = false
+                            selectFolder()
+                        },
+                    )
+                }
+
+                Button(
+                    onClick = {
+                        when (saveFolder) {
+                            null -> onContinue(saveFolder)
+                            RECORDER_MEDIA_SELECTED_VALUE -> {
+                                if (SUPPORTS_SCOPED_STORAGE) {
+                                    onContinue(saveFolder)
+                                } else {
+                                    requestWritePermission()
+                                }
+                            }
+
+                            else -> {
+                                showCustomFolderHint = true
+                            }
+                        }
+                    },
+                    enabled = if (saveFolder == null) !isLowOnStorage else true,
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .height(BIG_PRIMARY_BUTTON_SIZE),
+                    contentPadding = ButtonDefaults.ButtonWithIconContentPadding,
+                ) {
+                    Icon(
+                        Icons.Default.ChevronRight,
+                        contentDescription = null,
+                        modifier = Modifier.size(ButtonDefaults.IconSize)
+                    )
+                    Spacer(modifier = Modifier.width(ButtonDefaults.IconSpacing))
+                    Text(stringResource(R.string.continue_label))
+                }
+            }
+        }
+    }
+}
+
+@Composable
+fun _CustomFolderDialog(
+    onAbort: () -> Unit,
+    onOk: () -> Unit,
+) {
+    AlertDialog(
+        onDismissRequest = onAbort,
+        icon = {
+            Icon(
+                Icons.Default.Folder,
+                contentDescription = null,
+            )
+        },
+        title = {
+            Text(stringResource(R.string.ui_welcome_saveFolder_customFolder_title))
+        },
+        text = {
+            Text(stringResource(R.string.ui_welcome_saveFolder_customFolder_message))
+        },
+        dismissButton = {
+            TextButton(
+                onClick = onAbort,
+                contentPadding = ButtonDefaults.TextButtonContentPadding,
+                colors = ButtonDefaults.textButtonColors(),
+            ) {
+                Text(stringResource(R.string.dialog_close_cancel_label))
+            }
+        },
+        confirmButton = {
+            Button(
+                onClick = onOk,
+            ) {
+                Text(stringResource(R.string.dialog_close_neutral_label))
+            }
+        }
+    )
+
+}

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

@@ -68,15 +68,15 @@ fun MessageBox(
             .clip(MaterialTheme.shapes.medium)
             .background(backgroundColor)
             .let {
-                if (density == VisualDensity.COMFORTABLE) {
+                when (density) {
-                    it.padding(horizontal = 8.dp, vertical = 16.dp)
+                    VisualDensity.COMFORTABLE -> it.padding(horizontal = 8.dp, vertical = 16.dp)
-                } else {
+                    VisualDensity.DENSE -> it.padding(8.dp)
-                    it.padding(8.dp)
+                    VisualDensity.COMPACT -> it.padding(8.dp)
                 }
             }
             .then(modifier)
     ) {
-        if (density == VisualDensity.COMFORTABLE) {
+        if (density == VisualDensity.COMFORTABLE || density == VisualDensity.DENSE) {
             Icon(
                 imageVector = when (type) {
                     MessageType.ERROR -> Icons.Default.Error
@@ -121,4 +121,5 @@ enum class MessageType {
 enum class VisualDensity {
     COMPACT,
     COMFORTABLE,
+    DENSE,
 }

app/src/main/java/app/myzel394/alibi/ui/screens/AboutScreen.kt

@@ -1,8 +1,12 @@
 package app.myzel394.alibi.ui.screens
 
+import android.content.ClipData
+import android.content.ClipboardManager
+import android.content.Context
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
+import androidx.compose.foundation.horizontalScroll
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
@@ -18,6 +22,7 @@ import androidx.compose.foundation.verticalScroll
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.automirrored.filled.ArrowBack
 import androidx.compose.material.icons.automirrored.filled.OpenInNew
+import androidx.compose.material.icons.filled.ContentCopy
 import androidx.compose.material3.ButtonDefaults
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Icon
@@ -34,6 +39,7 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.ColorFilter
 import androidx.compose.ui.input.nestedscroll.nestedScroll
+import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.platform.LocalUriHandler
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
@@ -43,6 +49,7 @@ import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
 import app.myzel394.alibi.BuildConfig
 import app.myzel394.alibi.R
+import app.myzel394.alibi.ui.CONTACT_METHODS
 import app.myzel394.alibi.ui.REPO_URL
 import app.myzel394.alibi.ui.TRANSLATION_HELP_URL
 import app.myzel394.alibi.ui.components.AboutScreen.atoms.DonationsTile
@@ -82,8 +89,8 @@ fun AboutScreen(
         Column(
             modifier = Modifier
                 .padding(padding)
-                .padding(horizontal = 32.dp)
+                .verticalScroll(rememberScrollState())
-                .verticalScroll(rememberScrollState()),
+                .padding(horizontal = 32.dp),
             verticalArrangement = Arrangement.spacedBy(48.dp),
             horizontalAlignment = Alignment.CenterHorizontally,
         ) {
@@ -125,7 +132,7 @@ fun AboutScreen(
                 )
                 Text(
                     stringResource(R.string.ui_about_contribute_message),
-                    style = MaterialTheme.typography.titleMedium,
+                    style = MaterialTheme.typography.bodySmall,
                 )
 
                 val githubLabel = stringResource(R.string.accessibility_open_in_browser, REPO_URL)
@@ -203,6 +210,54 @@ fun AboutScreen(
 
                 DonationsTile()
 
+                Text(
+                    stringResource(R.string.ui_about_support_title),
+                    style = MaterialTheme.typography.titleMedium,
+                )
+                Text(
+                    stringResource(R.string.ui_about_support_message),
+                    style = MaterialTheme.typography.bodySmall,
+                )
+                Column(
+                    verticalArrangement = Arrangement.spacedBy(8.dp)
+                ) {
+                    val clipboardManager =
+                        LocalContext.current.getSystemService(Context.CLIPBOARD_SERVICE) as ClipboardManager
+
+                    for (contact in CONTACT_METHODS) {
+                        val name = contact.key
+                        val uri = contact.value
+
+                        Row(
+                            modifier = Modifier
+                                .fillMaxWidth()
+                                .clip(MaterialTheme.shapes.medium)
+                                .clickable {
+                                    val clip = ClipData.newPlainText("text", uri)
+                                    clipboardManager.setPrimaryClip(clip)
+                                }
+                                .padding(16.dp)
+                                .horizontalScroll(rememberScrollState()),
+                            horizontalArrangement = Arrangement.spacedBy(8.dp),
+                            verticalAlignment = Alignment.CenterVertically,
+                        ) {
+                            Icon(
+                                Icons.Default.ContentCopy,
+                                contentDescription = null,
+                            )
+                            Text(
+                                name,
+                                style = MaterialTheme.typography.bodyMedium,
+                                fontWeight = FontWeight.Bold,
+                            )
+                            Text(
+                                uri,
+                                fontSize = MaterialTheme.typography.bodyMedium.fontSize.times(0.5),
+                            )
+                        }
+                    }
+                }
+
                 GPGKeyOverview()
             }
         }

app/src/main/java/app/myzel394/alibi/ui/screens/WelcomeScreen.kt

@@ -8,16 +8,17 @@ import androidx.compose.foundation.pager.HorizontalPager
 import androidx.compose.foundation.pager.rememberPagerState
 import androidx.compose.material3.Scaffold
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.collectAsState
 import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalContext
-import androidx.navigation.NavController
 import app.myzel394.alibi.dataStore
-import app.myzel394.alibi.ui.components.WelcomeScreen.atoms.ExplanationPage
+import app.myzel394.alibi.ui.components.WelcomeScreen.pages.ExplanationPage
-import app.myzel394.alibi.ui.components.WelcomeScreen.atoms.ResponsibilityPage
+import app.myzel394.alibi.ui.components.WelcomeScreen.pages.MaxDurationSettingsPage
-import app.myzel394.alibi.ui.enums.Screen
+import app.myzel394.alibi.ui.components.WelcomeScreen.pages.ReadyPage
+import app.myzel394.alibi.ui.components.WelcomeScreen.pages.ResponsibilityPage
+import app.myzel394.alibi.ui.components.WelcomeScreen.pages.SaveFolderPage
+import app.myzel394.alibi.ui.effects.rememberSettings
 import kotlinx.coroutines.launch
 
 @OptIn(ExperimentalFoundationApi::class)
@@ -27,41 +28,76 @@ fun WelcomeScreen(
 ) {
     val context = LocalContext.current
     val dataStore = context.dataStore
-    val settings = dataStore
+    val settings = rememberSettings()
-        .data
-        .collectAsState(initial = null)
-        .value ?: return
     val scope = rememberCoroutineScope()
     val pagerState = rememberPagerState(
         initialPage = 0,
         initialPageOffsetFraction = 0f,
-        pageCount = {2}
+        pageCount = { 5 }
     )
 
-    Scaffold() {padding ->
+    fun finishTutorial() {
+        scope.launch {
+            dataStore.updateData {
+                settings.setHasSeenOnboarding(true)
+            }
+            onNavigateToAudioRecorderScreen()
+        }
+    }
+
+    Scaffold() { padding ->
         Column(
             modifier = Modifier
                 .fillMaxSize()
                 .padding(padding),
+
             horizontalAlignment = Alignment.CenterHorizontally,
         ) {
-            HorizontalPager(state = pagerState) {position ->
+            HorizontalPager(
+                state = pagerState,
+            ) { position ->
                 when (position) {
                     0 -> ExplanationPage(
                         onContinue = {
                             scope.launch {
-                                pagerState.animateScrollToPage(2)
+                                pagerState.animateScrollToPage(1)
                             }
                         }
                     )
+
                     1 -> ResponsibilityPage {
                         scope.launch {
-                            dataStore.updateData {
+                            pagerState.animateScrollToPage(2)
-                                settings.setHasSeenOnboarding(true)
-                            }
-                            onNavigateToAudioRecorderScreen()
                         }
                     }
+
+                    2 -> MaxDurationSettingsPage {
+                        scope.launch {
+                            pagerState.animateScrollToPage(3)
+                        }
+                    }
+
+                    3 -> SaveFolderPage(
+                        onBack = {
+                            scope.launch {
+                                pagerState.animateScrollToPage(2)
+                            }
+                        },
+                        onContinue = { saveFolder ->
+                            scope.launch {
+                                dataStore.updateData {
+                                    settings.setSaveFolder(saveFolder)
+                                }
+
+                                pagerState.animateScrollToPage(4)
+                            }
+                        },
+                        appSettings = settings
+                    )
+
+                    4 -> ReadyPage {
+                        finishTutorial()
+                    }
                 }
             }
         }

app/src/main/res/values/strings.xml

@@ -11,6 +11,8 @@
     <string name="form_error_value_mustBeGreaterThan">Please enter a number greater than <xliff:g name="min">%s</xliff:g></string>
     <string name="form_value_selected">Selected: %s</string>
 
+    <string name="a11y_selectValue">Select %s</string>
+
     <string name="notificationChannels_recorder_name">Recorder</string>
     <string name="notificationChannels_recorder_description">Shows the current recording status</string>
 
@@ -37,7 +39,7 @@
     <string name="ui_recorder_action_start_description_3">\u0020at your request</string>
 
     <string name="ui_recorder_action_save_processing_dialog_title">Processing</string>
-    <string name="ui_recorder_action_save_processing_dialog_description">Processing your recording, do not close Alibi! You will automatically be prompted to save the file once it\'s ready</string>
+    <string name="ui_recorder_action_save_processing_dialog_description">Processing your recording, do not close Alibi! You will automatically be prompted to save the file once it\'s ready. This process may take a few minutes if your time frame is big. Once this is finished and you are asked to save the file, please do so and then wait until you see Alibi\'s main screen again.</string>
 
     <string name="ui_recorder_state_recording_description">Alibi keeps recording in the background</string>
 
@@ -78,7 +80,7 @@
     <string name="ui_recorder_state_paused_title">Recording paused</string>
     <string name="ui_recorder_state_paused_description">Alibi is paused</string>
     <string name="ui_recorder_error_recording_title">An error occurred</string>
-    <string name="ui_recorder_error_recording_description">Alibi encountered an error during recording. Would you like to try saving the recording?</string>
+    <string name="ui_recorder_error_recording_description">Alibi encountered an error during recording. Try using different settings or restart the app.</string>
     <string name="ui_settings_language_title">Language</string>
     <string name="ui_settings_language_update_label">Change</string>
     <string name="ui_audioRecorder_info_microphone_deviceMicrophone">Device Microphone</string>
@@ -195,4 +197,29 @@
     <string name="ui_recorder_action_saveCurrent_explanation">You can save the current ongoing recording by pressing and holding down on the save button. The recording will continue in the background.</string>
     <string name="ui_recorder_lowOnStorage_hint">You are low on storage. Alibi may not function properly. Please free up some space.</string>
     <string name="ui_recorder_lowOnStorage_hintANDswitchSaveFolder">You are low on storage. Alibi may not function properly. Please free up some space. Alternatively, change the batches folder to a different location in the settings.</string>
+    <string name="ui_welcome_timeSettings_title">How long should Alibi remember?</string>
+    <string name="ui_welcome_timeSettings_message">Alibi will continuously record and delete old recordings to make space for new ones. You decide how long Alibi should remember the past.</string>
+    <string name="ui_welcome_timeSettings_values_5min">5 Minutes</string>
+    <string name="ui_welcome_timeSettings_values_15min">15 minutes</string>
+    <string name="ui_welcome_timeSettings_values_30min">30 minutes</string>
+    <string name="ui_welcome_timeSettings_values_1hour">1 hour</string>
+    <string name="ui_welcome_timeSettings_changeableHint">You can change this anytime</string>
+    <string name="ui_welcome_saveFolder_title">Where should Alibi store the batches?</string>
+    <string name="ui_welcome_saveFolder_message">Select where you would like to let Alibi store the batches of the ongoing recordings. The internal folder is encrypted and only accessible by Alibi. This folder is recommended if you only want to record a small time frame. If you need a longer time frame, you will most likely need to select a different folder, as the internal storage is very limited.</string>
+    <string name="ui_welcome_saveFolder_values_internal">Internal Storage</string>
+    <string name="ui_welcome_saveFolder_values_custom">Custom Folder</string>
+    <string name="ui_welcome_saveFolder_values_media">Media Folder</string>
+    <string name="ui_welcome_saveFolder_externalRequired">Please select either the Media Folder or a Custom Folder. Alibi has not enough space to store the batches in the internal storage. Alternatively, go back one step and select a shorter duration.</string>
+    <string name="ui_welcome_saveFolder_customFolder_title">Select a Custom Folder</string>
+    <string name="ui_welcome_saveFolder_customFolder_message">You will now be asked to select a folder where Alibi should store the batches. Please select a folder where you have write access to.</string>
+    <string name="ui_welcome_timeSettings_values_custom">Custom Duration</string>
+    <string name="ui_welcome_timeSettings_values_customFormat_mm">%s minutes</string>
+    <string name="ui_welcome_timeSettings_values_customFormat_hh_mm">%s hour, %s minutes</string>
+    <string name="ui_welcome_timeSettings_values_customFormat_h_mm">1 hour, %s minutes</string>
+    <string name="ui_welcome_ready_title">You are ready!</string>
+    <string name="ui_welcome_ready_message">You are ready to start using Alibi! Go ahead and try it out!</string>
+    <string name="ui_welcome_ready_start">Start Alibi</string>
+    <string name="ui_about_support_title">Get Support</string>
+    <string name="ui_about_support_message">If you have any questions, feedback or face any issues, please don\'t hesitate to contact me. I\'m happy to help you! Below is a list of ways to get in touch with me:</string>
+    <string name="ui_welcome_timeSettings_values_1min">1 Minute</string>
 </resources>