Update project

Author: michaelbel

core/ui/src/commonMain/kotlin/org/michaelbel/movies/ui/compose/movie/MovieRow.kt

@@ -3,7 +3,11 @@ package org.michaelbel.movies.ui.compose.movie
 import androidx.compose.animation.AnimatedVisibility
 import androidx.compose.animation.fadeIn
 import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+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.material3.MaterialTheme
 import androidx.compose.material3.Text
@@ -12,13 +16,12 @@ 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.draw.clip
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.dp
-import androidx.constraintlayout.compose.ConstraintLayout
-import androidx.constraintlayout.compose.Dimension
 import coil3.compose.AsyncImage
 import coil3.compose.LocalPlatformContext
 import coil3.request.ImageRequest
@@ -42,64 +45,50 @@ internal fun MovieRow(
 ) {
     var isNoImageVisible by remember { mutableStateOf(false) }
 
-    ConstraintLayout(
+    Column(
         modifier = modifier
     ) {
-        val (image, noImageText, text) = createRefs()
-
-        AsyncImage(
-            model = ImageRequest.Builder(LocalPlatformContext.current)
-                .data(movie.backdropPath.formatBackdropImage)
-                .crossfade(true)
-                .build(),
-            contentDescription = MoviesContentDescriptionCommon.None,
-            modifier = Modifier.constrainAs(image) {
-                width = Dimension.fillToConstraints
-                height = Dimension.value(220.dp)
-                start.linkTo(parent.start)
-                top.linkTo(parent.top)
-                end.linkTo(parent.end)
-                bottom.linkTo(text.top)
-            },
-            onState = { state ->
-                isNoImageVisible = state.isErrorOrEmpty
-            },
-            contentScale = ContentScale.Crop
-        )
-
-        AnimatedVisibility(
-            visible = isNoImageVisible,
-            modifier = Modifier.constrainAs(noImageText) {
-                width = Dimension.wrapContent
-                height = Dimension.wrapContent
-                start.linkTo(parent.start)
-                top.linkTo(parent.top)
-                end.linkTo(parent.end)
-                bottom.linkTo(text.top)
-            },
-            enter = fadeIn()
+        Box(
+            modifier = Modifier
+                .fillMaxWidth()
+                .height(220.dp)
         ) {
-            Text(
-                text = stringResource(MoviesStrings.no_image),
-                style = MaterialTheme.typography.bodyLarge.copy(MaterialTheme.colorScheme.secondary)
+            AsyncImage(
+                model = ImageRequest.Builder(LocalPlatformContext.current)
+                    .data(movie.backdropPath.formatBackdropImage)
+                    .crossfade(true)
+                    .build(),
+                contentDescription = MoviesContentDescriptionCommon.None,
+                modifier = Modifier.fillMaxSize(),
+                onState = { state ->
+                    isNoImageVisible = state.isErrorOrEmpty
+                },
+                contentScale = ContentScale.Crop
             )
+
+            this@Column.AnimatedVisibility(
+                visible = isNoImageVisible,
+                enter = fadeIn(),
+                modifier = Modifier.align(Alignment.Center)
+            ) {
+                Text(
+                    text = stringResource(MoviesStrings.no_image),
+                    style = MaterialTheme.typography.bodyLarge.copy(MaterialTheme.colorScheme.secondary)
+                )
+            }
         }
 
         Text(
             text = movie.title,
-            modifier = Modifier.constrainAs(text) {
-                width = Dimension.fillToConstraints
-                height = Dimension.wrapContent
-                start.linkTo(parent.start, 16.dp)
-                top.linkTo(image.bottom, 16.dp)
-                end.linkTo(parent.end, 16.dp)
-                bottom.linkTo(parent.bottom, 16.dp)
-            },
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(16.dp),
             maxLines = maxLines,
             overflow = TextOverflow.Ellipsis,
             style = MaterialTheme.typography.bodyLarge.copy(MaterialTheme.colorScheme.onPrimaryContainer)
         )
     }
+
 }
 
 @Preview