Improve details screen (#394)

Author: LordRaydenMK

app/src/main/java/io/github/lordraydenmk/themoviedbapp/movies/data/MovieDto.kt

@@ -7,6 +7,9 @@ import kotlinx.serialization.Serializable
 data class MovieDto(
     val id: Long,
     val title: String,
+    val overview: String,
+    @SerialName("vote_average")
+    val voteAverage: Float,
     @SerialName("poster_path")
     val posterPath: String,
 )

app/src/main/java/io/github/lordraydenmk/themoviedbapp/movies/data/movies.kt

@@ -25,6 +25,8 @@ suspend fun TheMovieDbService.movieDetails(id: MovieId): MovieDetails {
 private fun MovieDto.toDomain(): Movie = Movie.create(
     id = id,
     name = title,
+    overview = overview,
+    voteAverage = voteAverage,
     posterPath = posterPath,
 )
 

app/src/main/java/io/github/lordraydenmk/themoviedbapp/movies/domain/Movie.kt

@@ -8,6 +8,8 @@ typealias MovieId = Long
 data class Movie(
     val id: MovieId,
     val name: String,
+    val overview: String,
+    val voteAverage: Float,
     val thumbnail: HttpUrl,
 ) {
 
@@ -16,10 +18,14 @@ data class Movie(
         fun create(
             id: Long,
             name: String,
+            overview: String,
+            voteAverage: Float,
             posterPath: String,
         ): Movie = Movie(
             id = id,
             name = name,
+            overview = overview,
+            voteAverage = voteAverage,
             thumbnail = "https://image.tmdb.org/t/p/w500$posterPath".toHttpUrl(),
         )
     }

app/src/main/java/io/github/lordraydenmk/themoviedbapp/movies/moviedetails/MovieDetailsScreen.kt

@@ -1,30 +1,43 @@
 package io.github.lordraydenmk.themoviedbapp.movies.moviedetails
 
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.aspectRatio
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.statusBarsPadding
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.verticalScroll
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.automirrored.filled.ArrowBack
+import androidx.compose.material3.CircularProgressIndicator
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.material3.TopAppBar
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 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.platform.testTag
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import coil3.compose.AsyncImage
 import io.github.lordraydenmk.themoviedbapp.movies.domain.MovieId
 import io.github.lordraydenmk.themoviedbapp.movies.ui.common.MovieLoading
 import io.github.lordraydenmk.themoviedbapp.movies.ui.common.MovieProblem
 import kotlinx.coroutines.channels.Channel
 import kotlinx.coroutines.flow.Flow
+import okhttp3.HttpUrl.Companion.toHttpUrl
 
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable
@@ -69,18 +82,67 @@ private fun MovieDetailsAppBar(
 @Composable
 fun MovieContent(content: Content) {
     Column(
-        horizontalAlignment = Alignment.CenterHorizontally,
         modifier = Modifier
             .fillMaxSize()
-            .testTag("MovieDetailsContent")
+            .verticalScroll(rememberScrollState())
+            .padding(16.dp)
+            .testTag("MovieDetailsContent"),
+        horizontalAlignment = Alignment.CenterHorizontally,
+        verticalArrangement = Arrangement.spacedBy(16.dp)
     ) {
         AsyncImage(
             model = content.movie.thumbnail.toString(),
             contentScale = ContentScale.Crop,
             contentDescription = content.movie.name,
             modifier = Modifier
-                .aspectRatio(1f)
-                .fillMaxWidth()
+                .fillMaxWidth(0.8f)
+                .aspectRatio(2f / 3f)
+                .clip(MaterialTheme.shapes.medium)
+        )
+
+        Text(
+            text = content.movie.name,
+            style = MaterialTheme.typography.headlineLarge,
+            textAlign = TextAlign.Center
+        )
+        Text(
+            text = content.movie.overview,
+            style = MaterialTheme.typography.bodyLarge
+        )
+        RatingIndicator(
+            voteAverage = content.movie.voteAverage,
+            modifier = Modifier.align(Alignment.End)
+        )
+    }
+}
+
+@Composable
+private fun RatingIndicator(voteAverage: VoteAverage, modifier: Modifier = Modifier) {
+    Box(
+        contentAlignment = Alignment.Center,
+        modifier = modifier.size(64.dp)
+    ) {
+        CircularProgressIndicator(
+            progress = { voteAverage.progress },
+            modifier = Modifier.fillMaxSize(),
+            strokeWidth = 4.dp,
+            trackColor = MaterialTheme.colorScheme.surfaceVariant,
+        )
+        Text(
+            text = voteAverage.text,
+            style = MaterialTheme.typography.labelLarge,
         )
     }
-}
+}
+
+@Preview
+@Composable
+private fun MovieDetailsPreview() {
+    val movie = MovieDetailsViewEntity(
+        "Awesome Moview",
+        "This is some awesome moview overview. Bla bla bka",
+        VoteAverage(0.745f, "7.5"),
+        "https://image.tmdb.org/t/p/w500".toHttpUrl(),
+    )
+    MovieContent(Content(movie))
+}

app/src/main/java/io/github/lordraydenmk/themoviedbapp/movies/moviedetails/MovieDetailsViewState.kt

@@ -5,9 +5,13 @@ import okhttp3.HttpUrl
 
 data class MovieDetailsViewEntity(
     val name: String,
+    val overview: String,
+    val voteAverage: VoteAverage,
     val thumbnail: HttpUrl,
 )
 
+data class VoteAverage(val progress: Float, val text: String)
+
 sealed class MovieDetailsViewState {
 
     val title: String
@@ -18,4 +22,4 @@ object Loading : MovieDetailsViewState()
 
 data class Content(val movie: MovieDetailsViewEntity) : MovieDetailsViewState()
 
-data class Problem(val stringId: TextRes) : MovieDetailsViewState()
+data class Problem(val stringId: TextRes) : MovieDetailsViewState()

app/src/main/java/io/github/lordraydenmk/themoviedbapp/movies/moviedetails/movieDetails.kt

@@ -58,8 +58,15 @@ private fun Throwable.toProblem(): Problem = when (this) {
     else -> throw this
 }
 
-private fun Movie.toViewEntity(): MovieDetailsViewEntity =
-    MovieDetailsViewEntity(
+private fun Movie.toViewEntity(): MovieDetailsViewEntity {
+    val voteAverageData = VoteAverage(
+        progress = voteAverage / 10f,
+        text = "%.1f".format(voteAverage)
+    )
+    return MovieDetailsViewEntity(
         name = name,
+        overview = overview,
+        voteAverage = voteAverageData,
         thumbnail = thumbnail,
     )
+}

app/src/paparazzi/kotlin/io/github/lordraydenmk/themoviedbapp/movies/moviedetails/MovieDetailsScreenTest.kt

@@ -55,7 +55,12 @@ class MovieDetailsScreenTest {
     @Test
     fun contentState() {
         val url = "http://i.annihil.us/u/prod/marvel/i/mg/c/e0/535fecbbb9784.jpg".toHttpUrl()
-        val viewState = Content(MovieDetailsViewEntity("Hulk", url))
+        val viewState = Content(MovieDetailsViewEntity(
+            "Hulk",
+            "Movie overview",
+            VoteAverage(0.745f, "7.5"),
+            url
+        ))
 
         paparazzi.snapshot {
             MovieDetailsScreen(emptyFlow(), viewState, movieId = 0, actions = Channel())

app/src/test/java/io/github/lordraydenmk/themoviedbapp/movies/data/MovieKtTest.kt

@@ -25,6 +25,8 @@ class MovieKtTest {
         val hulkDto = MovieDto(
             42,
             "Hulk",
+            "Movie overview",
+            7.45f,
             "/poster.jpg",
         )
         val service = testMovieDbService(listOf(hulkDto))
@@ -33,6 +35,8 @@ class MovieKtTest {
         val hulk = Movie(
             42,
             "Hulk",
+            "Movie overview",
+            7.45f,
             "https://image.tmdb.org/t/p/w500/poster.jpg".toHttpUrl(),
         )
         service.popularMovies() shouldBe PopularMovies(listOf(hulk))
@@ -70,6 +74,8 @@ class MovieKtTest {
         val hulkDto = MovieDto(
             42,
             "Hulk",
+            "Movie overview",
+            7.45f,
             "/poster.jpg",
         )
         val service = testMovieDbService(listOf(hulkDto))
@@ -78,6 +84,8 @@ class MovieKtTest {
         val hulk = Movie(
             42,
             "Hulk",
+            "Movie overview",
+            7.45f,
             "https://image.tmdb.org/t/p/w500/poster.jpg".toHttpUrl(),
         )
         service.movieDetails(42) shouldBe MovieDetails(hulk)

app/src/test/java/io/github/lordraydenmk/themoviedbapp/movies/domain/MovieTest.kt

@@ -8,11 +8,19 @@ class MovieTest {
 
     @Test
     fun `create valid movie`() {
-        val actual = Movie.create(42, "Ant Man", "/poster.jpg")
+        val actual = Movie.create(
+            42,
+            "Ant Man",
+            "Movie overview",
+            7.45f,
+            "/poster.jpg"
+        )
 
         actual shouldBe Movie(
             42,
             "Ant Man",
+            "Movie overview",
+            7.45f,
             "https://image.tmdb.org/t/p/w500/poster.jpg".toHttpUrl(),
         )
     }

app/src/test/java/io/github/lordraydenmk/themoviedbapp/movies/moviedetails/MovieDetailsKtTest.kt

@@ -22,11 +22,15 @@ class MovieDetailsKtTest {
     fun movieDto(
         id: Long,
         name: String,
+        overview: String,
+        voteAverage: Float,
         thumbnailPath: String,
     ): MovieDto =
         MovieDto(
             id,
             name,
+            overview,
+            voteAverage,
             thumbnailPath,
         )
 
@@ -39,7 +43,13 @@ class MovieDetailsKtTest {
 
     @Test
     fun `FirstLoad - service with success - Movie`() = runTest {
-        val hulkDto = movieDto(42, "Hulk", "/poster.jpg")
+        val hulkDto = movieDto(
+            42,
+            "Hulk",
+            "Movie overview",
+            7.45f,
+            "/poster.jpg"
+        )
         val service = testMovieDbService(listOf(hulkDto))
 
         val viewModel = TestViewModel<MovieDetailsViewState, MovieDetailsEffect>()
@@ -50,6 +60,8 @@ class MovieDetailsKtTest {
 
             val hulk = MovieDetailsViewEntity(
                 "Hulk",
+                "Movie overview",
+                VoteAverage(0.745f, "7.4"),
                 "https://image.tmdb.org/t/p/w500/poster.jpg".toHttpUrl(),
             )
             viewModel.viewState.test {
@@ -80,7 +92,13 @@ class MovieDetailsKtTest {
 
     @Test
     fun `Action Up - NavigateUp Effect`() = runTest {
-        val hulkDto = movieDto(42, "Hulk", "/poster.jpg")
+        val hulkDto = movieDto(
+            42,
+            "Hulk",
+            "Movie overview",
+            7.45f,
+            "/poster.jpg"
+        )
         val viewModel = TestViewModel<MovieDetailsViewState, MovieDetailsEffect>()
         val module = module(testMovieDbService(listOf(hulkDto)), viewModel)