From 8c563eb294a50aeb72de571b7555de95f31a83fd Mon Sep 17 00:00:00 2001
From: Chris Banes <chris@banes.me>
Date: Mon, 1 Jun 2020 17:44:58 +0100
Subject: [PATCH] Tidy up related Compose UI

---
 .../tivi/common/compose/CollectionScroller.kt | 54 ++++++++++++++++++
 .../showdetails/details/view/ShowDetails.kt   | 56 +++++++++----------
 2 files changed, 80 insertions(+), 30 deletions(-)
 create mode 100644 common-ui-compose/src/main/java/app/tivi/common/compose/CollectionScroller.kt

diff --git a/common-ui-compose/src/main/java/app/tivi/common/compose/CollectionScroller.kt b/common-ui-compose/src/main/java/app/tivi/common/compose/CollectionScroller.kt
new file mode 100644
index 0000000000..7811bb2035
--- /dev/null
+++ b/common-ui-compose/src/main/java/app/tivi/common/compose/CollectionScroller.kt
@@ -0,0 +1,54 @@
+/*
+ * Copyright 2020 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package app.tivi.common.compose
+
+import androidx.compose.Composable
+import androidx.ui.core.Modifier
+import androidx.ui.foundation.HorizontalScroller
+import androidx.ui.layout.RowScope
+import androidx.ui.layout.Spacer
+import androidx.ui.layout.preferredWidth
+import androidx.ui.unit.Dp
+import androidx.ui.unit.dp
+
+@Composable
+fun <T> HorizontalCollectionScroller(
+    items: List<T>,
+    startEndSpacing: Dp = 16.dp,
+    childSpacing: Dp = 4.dp,
+    modifier: Modifier = Modifier,
+    children: @Composable RowScope.(item: T) -> Unit
+) {
+    HorizontalScroller(modifier = modifier) {
+        items.forEachIndexed { index, item ->
+            if (index == 0) {
+                // First item, so lets add the starting margin
+                Spacer(modifier = Modifier.preferredWidth(startEndSpacing))
+            }
+
+            children(item)
+
+            if (index < items.lastIndex) {
+                // Add a spacer if there are still more items to add
+                Spacer(modifier = Modifier.preferredWidth(childSpacing))
+            } else {
+                // Last item, so lets add the end margin
+                Spacer(modifier = Modifier.preferredWidth(startEndSpacing))
+            }
+        }
+    }
+}
diff --git a/ui-showdetails-view/src/main/java/app/tivi/showdetails/details/view/ShowDetails.kt b/ui-showdetails-view/src/main/java/app/tivi/showdetails/details/view/ShowDetails.kt
index 8a30ad09fb..83378eb104 100644
--- a/ui-showdetails-view/src/main/java/app/tivi/showdetails/details/view/ShowDetails.kt
+++ b/ui-showdetails-view/src/main/java/app/tivi/showdetails/details/view/ShowDetails.kt
@@ -43,7 +43,6 @@ import androidx.ui.core.onPositioned
 import androidx.ui.core.positionInRoot
 import androidx.ui.core.setContent
 import androidx.ui.foundation.Box
-import androidx.ui.foundation.HorizontalScroller
 import androidx.ui.foundation.Icon
 import androidx.ui.foundation.ScrollerPosition
 import androidx.ui.foundation.Text
@@ -102,6 +101,7 @@ import androidx.ui.unit.IntPx
 import androidx.ui.unit.dp
 import app.tivi.common.compose.AutoSizedCircularProgressIndicator
 import app.tivi.common.compose.ExpandingText
+import app.tivi.common.compose.HorizontalCollectionScroller
 import app.tivi.common.compose.InsetsAmbient
 import app.tivi.common.compose.PopupMenu
 import app.tivi.common.compose.PopupMenuItem
@@ -585,36 +585,32 @@ private fun RelatedShows(
 ) {
     // TODO: ideally we would use AdapterList here, but it only works for vertical lists, not
     // horizontal
-    HorizontalScroller(modifier = modifier.padding(vertical = 8.dp)) {
-        Row(modifier.padding(horizontal = 16.dp)) {
-            related.forEachIndexed { index, relatedEntry ->
-                Card(
-                    Modifier.aspectRatio(2 / 3f)
-                        .preferredWidth(64.dp)
-                        .clickable { actioner(OpenShowDetails(relatedEntry.show.id)) }
-                ) {
-                    Stack {
-                        ProvideEmphasis(EmphasisAmbient.current.medium) {
-                            Text(
-                                text = relatedEntry.show.title ?: "No title",
-                                style = MaterialTheme.typography.caption,
-                                modifier = Modifier.padding(4.dp)
-                                    .gravity(Alignment.CenterStart)
-                            )
-                        }
-                        val poster = relatedEntry.images.findHighestRatedPoster()
-                        if (poster != null) {
-                            CoilImageWithCrossfade(
-                                poster,
-                                modifier = Modifier.fillMaxSize()
-                            )
-                        }
-                    }
+    HorizontalCollectionScroller(
+        items = related,
+        modifier = modifier
+    ) { item ->
+        Card(
+            modifier = Modifier.padding(vertical = 8.dp)
+                .preferredWidth(64.dp)
+                .aspectRatio(2 / 3f)
+        ) {
+            Stack(
+                Modifier.clickable { actioner(OpenShowDetails(item.show.id)) }
+            ) {
+                ProvideEmphasis(EmphasisAmbient.current.medium) {
+                    Text(
+                        text = item.show.title ?: "No title",
+                        style = MaterialTheme.typography.caption,
+                        modifier = Modifier.padding(4.dp)
+                            .gravity(Alignment.CenterStart)
+                    )
                 }
-
-                if (index + 1 < related.size) {
-                    // Add a spacer if there are still more items to add
-                    Spacer(modifier = Modifier.preferredWidth(4.dp))
+                val poster = item.images.findHighestRatedPoster()
+                if (poster != null) {
+                    CoilImageWithCrossfade(
+                        poster,
+                        modifier = Modifier.fillMaxSize()
+                    )
                 }
             }
         }