Let API shrink images

Author: LaurentTreguier

app/src/main/kotlin/app/fyreplace/fyreplace/ui/screens/SettingsScreen.kt

@@ -45,10 +45,12 @@ fun SettingsScreen(viewModel: SettingsViewModel = hiltViewModel()) {
             .verticalScroll(rememberScrollState())
     ) {
         val currentUser by viewModel.currentUser.collectAsStateWithLifecycle()
+        val isLoadingAvatar by viewModel.isLoadingAvatar.collectAsStateWithLifecycle()
 
         Section(stringResource(R.string.settings_profile_header)) {
             AvatarListItem(
                 user = currentUser,
+                isLoading = isLoadingAvatar,
                 onUpdateAvatar = viewModel::updateAvatar,
                 onRemoveAvatar = viewModel::removeAvatar
             )

app/src/main/kotlin/app/fyreplace/fyreplace/ui/views/settings/AvatarListItem.kt

@@ -9,6 +9,7 @@ import androidx.compose.foundation.layout.size
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.outlined.Delete
 import androidx.compose.material.icons.outlined.Upload
+import androidx.compose.material3.CircularProgressIndicator
 import androidx.compose.material3.DropdownMenu
 import androidx.compose.material3.DropdownMenuItem
 import androidx.compose.material3.Icon
@@ -19,16 +20,19 @@ import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draganddrop.mimeTypes
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.hapticfeedback.HapticFeedbackType
 import androidx.compose.ui.platform.LocalHapticFeedback
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import app.fyreplace.api.data.User
 import app.fyreplace.fyreplace.R
 import app.fyreplace.fyreplace.extensions.activity
+import app.fyreplace.fyreplace.fakes.placeholder
 import app.fyreplace.fyreplace.ui.views.Avatar
 import java.io.File
 import java.time.format.DateTimeFormatter
@@ -38,6 +42,7 @@ import java.time.format.FormatStyle
 @Composable
 fun AvatarListItem(
     user: User?,
+    isLoading: Boolean,
     onUpdateAvatar: (File) -> Unit,
     onRemoveAvatar: () -> Unit
 ) {
@@ -79,7 +84,20 @@ fun AvatarListItem(
                     }
                 )
             },
-            leadingContent = { Avatar(user = user, modifier = Modifier.size(56.dp)) },
+            leadingContent = {
+                val modifier = Modifier.size(56.dp)
+
+                if (isLoading) {
+                    Box(
+                        contentAlignment = Alignment.Center,
+                        modifier = modifier
+                    ) {
+                        CircularProgressIndicator()
+                    }
+                } else {
+                    Avatar(user = user, modifier = modifier)
+                }
+            },
             modifier = Modifier.combinedClickable(
                 onClick = ::selectImage,
                 onLongClick = {
@@ -112,3 +130,25 @@ fun AvatarListItem(
         }
     }
 }
+
+@Preview
+@Composable
+fun AvatarListItemPreview() {
+    AvatarListItem(
+        user = User.placeholder,
+        isLoading = false,
+        onUpdateAvatar = {},
+        onRemoveAvatar = {}
+    )
+}
+
+@Preview
+@Composable
+fun AvatarListItemLoadingPreview() {
+    AvatarListItem(
+        user = User.placeholder,
+        isLoading = true,
+        onUpdateAvatar = {},
+        onRemoveAvatar = {}
+    )
+}

app/src/main/kotlin/app/fyreplace/fyreplace/viewmodels/screens/SettingsViewModel.kt

@@ -30,6 +30,8 @@ class SettingsViewModel @Inject constructor(
 ) : ApiViewModelBase(eventBus, storeResolver) {
     val currentUser: StateFlow<User?> =
         state.getStateFlow(::currentUser.name, null)
+    val isLoadingAvatar: StateFlow<Boolean> =
+        state.getStateFlow(::isLoadingAvatar.name, false)
 
     init {
         viewModelScope.launch {
@@ -46,6 +48,8 @@ class SettingsViewModel @Inject constructor(
     }
 
     fun updateAvatar(file: File) = call(apiResolver::users) {
+        state[::isLoadingAvatar.name] = true
+
         val avatar = setCurrentUserAvatar(file).failWith {
             when (it.code) {
                 413 -> Event.Failure(
@@ -60,9 +64,13 @@ class SettingsViewModel @Inject constructor(
 
                 else -> Event.Failure()
             }
-        } ?: return@call
+        }
 
-        state[::currentUser.name] = currentUser.value?.copy(avatar = avatar)
+        state[::isLoadingAvatar.name] = false
+
+        if (avatar != null) {
+            state[::currentUser.name] = currentUser.value?.copy(avatar = avatar)
+        }
     }
 
     fun removeAvatar() = call(apiResolver::users) {

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

@@ -28,9 +28,9 @@
     <string name="settings_about_privacy_policy">Privacy policy</string>
     <string name="settings_about_source_code">Source code</string>
     <string name="settings_error_413_title">File too large</string>
-    <string name="settings_error_413_message">This file is too heavy; please select a file under 1M.</string>
+    <string name="settings_error_413_message">Uploaded files can only go up to 10M.</string>
     <string name="settings_error_415_title">Unsupported file format</string>
-    <string name="settings_error_415_message">This file you have selected is not supported.</string>
+    <string name="settings_error_415_message">The type of file you have selected is not supported.</string>
 
     <string name="account_environment_main">Production server</string>
     <string name="account_environment_dev">Testing server</string>