Couple small star sample fixes (#670)

Resolves #119
slackhq · Jun 7, 2023 · d4085f0 · d4085f0
1 parent 3ff2438
commit d4085f0
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 25 deletions.
diff --git a/samples/star/src/main/kotlin/com/slack/circuit/star/petdetail/PetDetail.kt b/samples/star/src/main/kotlin/com/slack/circuit/star/petdetail/PetDetail.kt
@@ -23,6 +23,7 @@ import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
+import androidx.compose.runtime.movableContentOf
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.produceState
 import androidx.compose.runtime.remember
@@ -200,46 +201,52 @@ private fun UnknownAnimal(paddingValues: PaddingValues) {
 private fun ShowAnimal(
   state: PetDetailScreen.State.Success,
   padding: PaddingValues,
-) =
-  when (LocalConfiguration.current.orientation == Configuration.ORIENTATION_LANDSCAPE) {
-    true -> ShowAnimalLandscape(state, padding)
-    false -> ShowAnimalPortrait(state, padding)
+) {
+  val carouselContent = remember {
+    movableContentOf {
+      CircuitContent(
+        PetPhotoCarouselScreen(
+          name = state.name,
+          photoUrls = state.photoUrls,
+          photoUrlMemoryCacheKey = state.photoUrlMemoryCacheKey,
+        )
+      )
+    }
+  }
+  return when (LocalConfiguration.current.orientation == Configuration.ORIENTATION_LANDSCAPE) {
+    true -> ShowAnimalLandscape(state, padding, carouselContent)
+    false -> ShowAnimalPortrait(state, padding, carouselContent)
   }
+}
 
 @Composable
-private fun ShowAnimalLandscape(state: PetDetailScreen.State.Success, padding: PaddingValues) {
+private fun ShowAnimalLandscape(
+  state: PetDetailScreen.State.Success,
+  padding: PaddingValues,
+  carouselContent: @Composable () -> Unit,
+) {
   Row(
     modifier = Modifier.padding(padding),
     horizontalArrangement = spacedBy(16.dp),
   ) {
-    CircuitContent(
-      PetPhotoCarouselScreen(
-        name = state.name,
-        photoUrls = state.photoUrls,
-        photoUrlMemoryCacheKey = state.photoUrlMemoryCacheKey,
-      )
-    )
+    carouselContent()
     LazyColumn(verticalArrangement = spacedBy(16.dp)) { petDetailDescriptions(state) }
   }
 }
 
 @Composable
-private fun ShowAnimalPortrait(state: PetDetailScreen.State.Success, padding: PaddingValues) {
+private fun ShowAnimalPortrait(
+  state: PetDetailScreen.State.Success,
+  padding: PaddingValues,
+  carouselContent: @Composable () -> Unit,
+) {
   LazyColumn(
     modifier = Modifier.padding(padding).testTag(ANIMAL_CONTAINER_TAG),
     contentPadding = PaddingValues(16.dp),
     verticalArrangement = spacedBy(16.dp),
     horizontalAlignment = Alignment.CenterHorizontally,
   ) {
-    item {
-      CircuitContent(
-        PetPhotoCarouselScreen(
-          name = state.name,
-          photoUrls = state.photoUrls,
-          photoUrlMemoryCacheKey = state.photoUrlMemoryCacheKey,
-        )
-      )
-    }
+    item { carouselContent() }
     petDetailDescriptions(state)
   }
 }

diff --git a/samples/star/src/main/kotlin/com/slack/circuit/star/petdetail/PetPhotoCarousel.kt b/samples/star/src/main/kotlin/com/slack/circuit/star/petdetail/PetPhotoCarousel.kt
@@ -9,6 +9,7 @@ import androidx.compose.foundation.ExperimentalFoundationApi
 import androidx.compose.foundation.focusable
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.aspectRatio
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
@@ -167,7 +168,7 @@ internal fun PetPhotoCarousel(state: PetPhotoCarouselScreen.State, modifier: Mod
       pagerState = pagerState,
       photoUrls = photoUrls,
       name = name,
-      photoUrlMemoryCacheKey = photoUrlMemoryCacheKey
+      photoUrlMemoryCacheKey = photoUrlMemoryCacheKey,
     )
 
     HorizontalPagerIndicator(
@@ -187,24 +188,27 @@ private fun PagerState.calculateCurrentOffsetForPage(page: Int): Float {
   return (currentPage - page) + currentPageOffsetFraction
 }
 
+@Suppress("LongParameterList")
 @OptIn(ExperimentalFoundationApi::class)
 @Composable
 private fun PhotoPager(
   count: Int,
   pagerState: PagerState,
   photoUrls: ImmutableList<String>,
   name: String,
+  modifier: Modifier = Modifier,
   photoUrlMemoryCacheKey: String? = null,
 ) {
   HorizontalPager(
     pageCount = count,
     state = pagerState,
     key = photoUrls::get,
+    modifier = modifier,
     contentPadding = PaddingValues(16.dp),
   ) { page ->
     Card(
       modifier =
-        Modifier.graphicsLayer {
+        Modifier.aspectRatio(1f).graphicsLayer {
           // Calculate the absolute offset for the current page from the
           // scroll position. We use the absolute value which allows us to mirror
           // any effects for both directions
@@ -234,7 +238,7 @@ private fun PhotoPager(
             }
             .build(),
         contentDescription = name,
-        contentScale = ContentScale.FillWidth,
+        contentScale = ContentScale.Crop,
       )
     }
   }