From 3e2c23bb8e0df1b3cf74fec8a5fae1697d39c0e6 Mon Sep 17 00:00:00 2001
From: Owen LeJeune <owen@distillmobile.com>
Date: Mon, 7 Nov 2022 17:03:40 -0500
Subject: [PATCH] full size reviews card

---
 .../owenlejeune/tvtime/ui/components/Cards.kt |  31 +++
 .../tvtime/ui/components/Widgets.kt           |   3 +-
 .../tvtime/ui/screens/main/MediaDetailView.kt | 256 +++++++++---------
 app/src/main/res/values/strings.xml           |   2 +
 4 files changed, 158 insertions(+), 134 deletions(-)

diff --git a/app/src/main/java/com/owenlejeune/tvtime/ui/components/Cards.kt b/app/src/main/java/com/owenlejeune/tvtime/ui/components/Cards.kt
index dd60159..cd077d9 100644
--- a/app/src/main/java/com/owenlejeune/tvtime/ui/components/Cards.kt
+++ b/app/src/main/java/com/owenlejeune/tvtime/ui/components/Cards.kt
@@ -129,6 +129,37 @@ fun LazyListContentCard(
     }
 }
 
+@Composable
+fun ListContentCard(
+    modifier: Modifier = Modifier,
+    header: @Composable (() -> Unit)? = null,
+    footer: @Composable (() -> Unit)? = null,
+    backgroundColor: Color = MaterialTheme.colorScheme.surfaceVariant,
+    content: @Composable ColumnScope.() -> Unit
+) {
+    Card(
+        modifier = modifier,
+        shape = RoundedCornerShape(10.dp),
+        backgroundColor = backgroundColor,
+        elevation = 8.dp
+    ) {
+        Column(
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(12.dp),
+            verticalArrangement = Arrangement.spacedBy(8.dp)
+        ) {
+            header?.invoke()
+            Column(
+                content = content,
+                modifier = Modifier
+                    .fillMaxWidth()
+            )
+            footer?.invoke()
+        }
+    }
+}
+
 @Composable
 fun TwoLineImageTextCard(
     title: String,
diff --git a/app/src/main/java/com/owenlejeune/tvtime/ui/components/Widgets.kt b/app/src/main/java/com/owenlejeune/tvtime/ui/components/Widgets.kt
index a5ba5e9..b38f308 100644
--- a/app/src/main/java/com/owenlejeune/tvtime/ui/components/Widgets.kt
+++ b/app/src/main/java/com/owenlejeune/tvtime/ui/components/Widgets.kt
@@ -572,10 +572,11 @@ fun FullScreenThumbnailVideoPlayer(
     val context = LocalContext.current
 
     Column(
+        modifier = modifier,
         verticalArrangement = Arrangement.spacedBy(6.dp)
     ) {
         AsyncImage(
-            modifier = modifier
+            modifier = Modifier
                 .clickable(
                     onClick = {
                         val intent = Intent(Intent.ACTION_VIEW).apply {
diff --git a/app/src/main/java/com/owenlejeune/tvtime/ui/screens/main/MediaDetailView.kt b/app/src/main/java/com/owenlejeune/tvtime/ui/screens/main/MediaDetailView.kt
index ce2c3a5..2ac5773 100644
--- a/app/src/main/java/com/owenlejeune/tvtime/ui/screens/main/MediaDetailView.kt
+++ b/app/src/main/java/com/owenlejeune/tvtime/ui/screens/main/MediaDetailView.kt
@@ -848,7 +848,6 @@ private fun VideoGroup(results: List<Video>, type: Video.Type, title: String) {
     }
 }
 
-@OptIn(ExperimentalFoundationApi::class)
 @Composable
 private fun ReviewsCard(
     itemId: Int?,
@@ -862,145 +861,136 @@ private fun ReviewsCard(
         }
     }
 
-    val hasReviews = reviewsResponse.value?.results?.size?.let { it > 0 }
-    val m = if (hasReviews == true) {
-        modifier.height(400.dp)
-    } else {
-        modifier.height(200.dp)
-    }
+   ListContentCard(
+       modifier = modifier,
+       header = {
+           Column(
+               verticalArrangement = Arrangement.spacedBy(9.dp)
+           ) {
+               Text(
+                   text = stringResource(R.string.reviews_title),
+                   style = MaterialTheme.typography.titleLarge,
+                   color = MaterialTheme.colorScheme.onSurfaceVariant
+               )
 
-    LazyListContentCard(
-        modifier = m
-            .fillMaxWidth(),
-        header = {
-            Text(
-                text = "Reviews",
-                style = MaterialTheme.typography.titleLarge,
-                color = MaterialTheme.colorScheme.onSurfaceVariant
-            )
-        },
-        footer = {
-            if (SessionManager.currentSession?.isAuthorized == true) {
-                Row(
-                    modifier = Modifier
-                        .fillMaxWidth()
-                        .height(50.dp)
-                        .padding(top = 4.dp),
-                    horizontalArrangement = Arrangement.spacedBy(8.dp)
-                ) {
-                    var reviewTextState by remember { mutableStateOf("") }
+               if (SessionManager.currentSession?.isAuthorized == true) {
+                   Row(
+                       modifier = Modifier
+                           .fillMaxWidth()
+                           .height(50.dp)
+                           .padding(bottom = 4.dp),
+                       horizontalArrangement = Arrangement.spacedBy(8.dp)
+                   ) {
+                       var reviewTextState by remember { mutableStateOf("") }
 
-                    RoundedTextField(
-                        modifier = Modifier
-                            .height(40.dp)
-                            .align(Alignment.CenterVertically)
-                            .weight(1f),
-                        value = reviewTextState,
-                        onValueChange = { reviewTextState = it },
-                        placeHolder = "Add a review",
-                        backgroundColor = MaterialTheme.colorScheme.secondary,
-                        placeHolderTextColor = MaterialTheme.colorScheme.background,
-                        textColor = MaterialTheme.colorScheme.onSecondary
-                    )
+                       RoundedTextField(
+                           modifier = Modifier
+                               .height(40.dp)
+                               .align(Alignment.CenterVertically)
+                               .weight(1f),
+                           value = reviewTextState,
+                           onValueChange = { reviewTextState = it },
+                           placeHolder = stringResource(R.string.add_a_review_hint),
+                           backgroundColor = MaterialTheme.colorScheme.secondary,
+                           placeHolderTextColor = MaterialTheme.colorScheme.background,
+                           textColor = MaterialTheme.colorScheme.onSecondary
+                       )
 
-                    val context = LocalContext.current
-                    CircleBackgroundColorImage(
-                        modifier = Modifier
-                            .align(Alignment.CenterVertically)
-                            .clickable (
-                                onClick = {
-                                   Toast.makeText(context, "TODO", Toast.LENGTH_SHORT).show()
-                                }
-                            ),
-                        size = 40.dp,
-                        backgroundColor = MaterialTheme.colorScheme.tertiary,
-                        image = Icons.Filled.Send,
-                        colorFilter = ColorFilter.tint(color = MaterialTheme.colorScheme.surfaceVariant),
-                        contentDescription = ""
-                    )
-                }
-            }
-        }
-    ) {
-        val reviews = reviewsResponse.value?.results ?: emptyList()
-        if (reviews.isNotEmpty()) {
-            items(reviews.size) { i ->
-                val review = reviews[i]
+                       val context = LocalContext.current
+                       CircleBackgroundColorImage(
+                           modifier = Modifier
+                               .align(Alignment.CenterVertically)
+                               .clickable(
+                                   onClick = {
+                                       Toast.makeText(context, "TODO", Toast.LENGTH_SHORT).show()
+                                   }
+                               ),
+                           size = 40.dp,
+                           backgroundColor = MaterialTheme.colorScheme.tertiary,
+                           image = Icons.Filled.Send,
+                           colorFilter = ColorFilter.tint(color = MaterialTheme.colorScheme.surfaceVariant),
+                           contentDescription = ""
+                       )
+                   }
+               }
+           }
+       },
+   ) {
+       val reviews = reviewsResponse.value?.results ?: emptyList()
+       if (reviews.isNotEmpty()) {
+           reviews.reversed().forEach { review ->
+               Row(
+                   modifier = Modifier
+                       .fillMaxWidth()
+                       .padding(end = 16.dp),
+                   verticalAlignment = Alignment.Top,
+                   horizontalArrangement = Arrangement.spacedBy(16.dp)
+               ) {
+                   Column(
+                       verticalArrangement = Arrangement.spacedBy(8.dp),
+                       horizontalAlignment = Alignment.CenterHorizontally
+                   ) {
+                       AvatarImage(
+                           size = 50.dp,
+                           author = review.authorDetails
+                       )
 
-                Row(
-                    modifier = Modifier
-                        .fillMaxWidth()
-                        .padding(end = 16.dp),
-                    verticalAlignment = Alignment.Top,
-                    horizontalArrangement = Arrangement.spacedBy(16.dp)
-                ) {
-                    Column(
-                        verticalArrangement = Arrangement.spacedBy(8.dp),
-                        horizontalAlignment = Alignment.CenterHorizontally
-                    ) {
-                        AvatarImage(
-                            size = 50.dp,
-                            author = review.authorDetails
-                        )
+                       // todo - only show this for user's review
+                       CircleBackgroundColorImage(
+                           image = Icons.Filled.Delete,
+                           size = 30.dp,
+                           backgroundColor = MaterialTheme.colorScheme.error,
+                           contentDescription = "",
+                           imageSize = DpSize(width = 20.dp, height = 15.dp),
+                           colorFilter = ColorFilter.tint(MaterialTheme.colorScheme.surfaceVariant)
+                       )
+                   }
 
-                        // todo - only show this for user's review
-                        CircleBackgroundColorImage(
-                            image = Icons.Filled.Delete,
-                            size = 30.dp,
-                            backgroundColor = MaterialTheme.colorScheme.error,
-                            contentDescription = "",
-                            imageSize = DpSize(width = 20.dp, height = 15.dp),
-                            colorFilter = ColorFilter.tint(MaterialTheme.colorScheme.surfaceVariant)
-                        )
-                    }
+                   Column(
+                       verticalArrangement = Arrangement.spacedBy(4.dp)
+                   ) {
+                       Text(
+                           text = review.author,
+                           color = MaterialTheme.colorScheme.secondary,
+                           fontWeight = FontWeight.Bold
+                       )
 
-                    Column(
-                        verticalArrangement = Arrangement.spacedBy(4.dp)
-                    ) {
-                        Text(
-                            text = review.author,
-                            color = MaterialTheme.colorScheme.secondary,
-                            fontWeight = FontWeight.Bold
-                        )
+                       HtmlText(
+                           text = review.content,
+                           color = MaterialTheme.colorScheme.onSurfaceVariant
+                       )
 
-                        HtmlText(
-                            text = review.content,
-                            color = MaterialTheme.colorScheme.onSurfaceVariant
-                        )
-
-                        val createdAt = TmdbUtils.formatDate(review.createdAt)
-                        val updatedAt = TmdbUtils.formatDate(review.updatedAt)
-                        var timestamp = stringResource(id = R.string.created_at_label, createdAt)
-                        if (updatedAt != createdAt) {
-                            timestamp += "\n${stringResource(id = R.string.updated_at_label, updatedAt)}"
-                        }
-                        Text(
-                            text = timestamp,
-                            color = MaterialTheme.colorScheme.onSurfaceVariant,
-                            fontSize = 12.sp
-                        )
-                    }
-                }
-                Divider(
-                    color = MaterialTheme.colorScheme.secondary,
-                    modifier = Modifier.padding(horizontal = 50.dp, vertical = 6.dp)
-                )
-            }
-        } else {
-            item {
-                Text(
-                    modifier = Modifier
-                        .fillMaxWidth()
-                        .wrapContentHeight()
-                        .padding(horizontal = 24.dp, vertical = 22.dp),
-                    text = stringResource(R.string.no_reviews_label),
-                    color = MaterialTheme.colorScheme.tertiary,
-                    textAlign = TextAlign.Center,
-                    style = MaterialTheme.typography.headlineMedium
-                )
-            }
-        }
-    }
+                       val createdAt = TmdbUtils.formatDate(review.createdAt)
+                       val updatedAt = TmdbUtils.formatDate(review.updatedAt)
+                       var timestamp = stringResource(id = R.string.created_at_label, createdAt)
+                       if (updatedAt != createdAt) {
+                           timestamp += "\n${stringResource(id = R.string.updated_at_label, updatedAt)}"
+                       }
+                       Text(
+                           text = timestamp,
+                           color = MaterialTheme.colorScheme.onSurfaceVariant,
+                           fontSize = 12.sp
+                       )
+                   }
+               }
+               Divider(
+                   color = MaterialTheme.colorScheme.secondary,
+                   modifier = Modifier.padding(horizontal = 50.dp, vertical = 6.dp)
+               )
+           }
+       } else {
+           Text(
+               modifier = Modifier
+                   .fillMaxWidth()
+                   .wrapContentHeight()
+                   .padding(horizontal = 24.dp, vertical = 22.dp),
+               text = stringResource(R.string.no_reviews_label),
+               color = MaterialTheme.colorScheme.tertiary,
+               textAlign = TextAlign.Center,
+               style = MaterialTheme.typography.headlineMedium
+           )
+       }
+   }
 }
 
 private fun fetchMediaItem(id: Int, service: DetailService, mediaItem: MutableState<DetailedItem?>) {
diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml
index c719820..cd527a9 100644
--- a/app/src/main/res/values/strings.xml
+++ b/app/src/main/res/values/strings.xml
@@ -153,4 +153,6 @@
     <string name="popular_today_header">Popular Today</string>
     <string name="preference_show_poster_titles_title">Show Poster Titles</string>
     <string name="preference_show_poster_titles_subtitle">Show titles on home screen posters</string>
+    <string name="reviews_title">Reviews</string>
+    <string name="add_a_review_hint">Add a review</string>
 </resources>
\ No newline at end of file