Add error image when a image fails to load

presentation/src/commonMain/kotlin/ca/gosyer/jui/ui/manga/components/MangaMenu.kt

@@ -14,11 +14,12 @@ import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.IntrinsicSize
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.aspectRatio
 import androidx.compose.foundation.layout.defaultMinSize
 import androidx.compose.foundation.layout.fillMaxHeight
-import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.heightIn
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.lazy.LazyColumn
@@ -29,7 +30,6 @@ import androidx.compose.foundation.text.selection.SelectionContainer
 import androidx.compose.material.Card
 import androidx.compose.material.Checkbox
 import androidx.compose.material.MaterialTheme
-import androidx.compose.material.Surface
 import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.remember
@@ -46,6 +46,7 @@ import ca.gosyer.jui.data.models.Manga
 import ca.gosyer.jui.i18n.MR
 import ca.gosyer.jui.ui.base.dialog.getMaterialDialogProperties
 import ca.gosyer.jui.uicore.components.VerticalScrollbar
+import ca.gosyer.jui.uicore.components.mangaAspectRatio
 import ca.gosyer.jui.uicore.components.rememberScrollbarAdapter
 import ca.gosyer.jui.uicore.image.KamelImage
 import ca.gosyer.jui.uicore.resources.stringResource
@@ -58,15 +59,18 @@ import io.kamel.image.lazyPainterResource
 @Composable
 fun MangaItem(manga: Manga) {
     BoxWithConstraints(Modifier.padding(8.dp)) {
-        if (maxWidth > 600.dp) {
+        if (maxWidth > 720.dp) {
             Row {
                 Cover(manga, Modifier.width(300.dp))
                 Spacer(Modifier.width(16.dp))
                 MangaInfo(manga)
             }
         } else {
-            Column {
+            Column(horizontalAlignment = Alignment.CenterHorizontally) {
-                Cover(manga, Modifier.align(Alignment.CenterHorizontally))
+                Cover(
+                    manga,
+                    Modifier.heightIn(120.dp, 300.dp)
+                )
                 Spacer(Modifier.height(16.dp))
                 MangaInfo(manga)
             }
@@ -76,17 +80,16 @@ fun MangaItem(manga: Manga) {
 
 @Composable
 private fun Cover(manga: Manga, modifier: Modifier = Modifier) {
-    Surface(
+    KamelImage(
-        modifier = modifier then Modifier
+        resource = lazyPainterResource(manga, filterQuality = FilterQuality.Medium),
-            .padding(4.dp),
+        contentDescription = manga.title,
-        shape = RoundedCornerShape(4.dp)
+        modifier = modifier,
-    ) {
+        errorModifier = modifier then Modifier
-        KamelImage(
+            .aspectRatio(
-            lazyPainterResource(manga, filterQuality = FilterQuality.Medium),
+                ratio = mangaAspectRatio,
-            manga.title,
+                matchHeightConstraintsFirst = true
-            Modifier.fillMaxSize()
+            ),
-        )
+    )
-    }
 }
 
 @Composable

ui-core/src/commonMain/kotlin/ca/gosyer/jui/uicore/image/KamelImage.kt

@@ -8,24 +8,36 @@ package ca.gosyer.jui.uicore.image
 
 import androidx.compose.animation.core.FiniteAnimationSpec
 import androidx.compose.animation.core.tween
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.size
+import androidx.compose.material.Icon
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.rounded.BrokenImage
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.ColorFilter
 import androidx.compose.ui.graphics.DefaultAlpha
 import androidx.compose.ui.graphics.painter.Painter
 import androidx.compose.ui.layout.ContentScale
-import ca.gosyer.jui.uicore.components.ErrorScreen
+import androidx.compose.ui.unit.dp
 import ca.gosyer.jui.uicore.components.LoadingScreen
 import io.kamel.core.Resource
+import org.lighthousegames.logging.logging
 import io.kamel.image.KamelImage as BaseKamelImage
 
+private val log = logging()
+
 @Composable
 fun KamelImage(
     resource: Resource<Painter>,
     contentDescription: String?,
     modifier: Modifier = Modifier,
+    errorModifier: Modifier = modifier,
     alignment: Alignment = Alignment.Center,
     contentScale: ContentScale = ContentScale.Fit,
     alpha: Float = DefaultAlpha,
@@ -34,7 +46,21 @@ fun KamelImage(
         LoadingScreen(progress = it, modifier = modifier then Modifier.fillMaxSize())
     },
     onFailure: @Composable (Throwable) -> Unit = {
-        ErrorScreen(it.message, modifier = modifier then Modifier.fillMaxSize())
+        LaunchedEffect(it) {
+            log.warn(it) { "Error loading image" }
+        }
+        Box(
+            modifier = errorModifier then Modifier.fillMaxSize()
+                .background(Color(0x1F888888)),
+            contentAlignment = Alignment.Center
+        ) {
+            Icon(
+                Icons.Rounded.BrokenImage,
+                contentDescription = null,
+                tint = Color(0x1F888888),
+                modifier = Modifier.size(24.dp)
+            )
+        }
     },
     crossfade: Boolean = true,
     animationSpec: FiniteAnimationSpec<Float> = tween()