Update to new transition APIs in Compose 1.0.0-alpha11 (#755)

* Fix method name suppression * Convert show details to transition v2 APIs * Update EpisodeDetails to transition v2 APIs * Tweak suppression on AccountUi * Refactor show details transition * Refactor SeasonWithEpisodesRow to be a composable * Try using lambdas for state reads * Turn debug back off * Address naming feedback
chrisbanes · Feb 8, 2021 · 8222db1 · 8222db1
1 parent f8adb7f
commit 8222db1
Show file tree

Hide file tree

Showing 10 changed files with 176 additions and 189 deletions.
diff --git a/common-ui-compose/src/main/java/app/tivi/common/compose/LazyList.kt b/common-ui-compose/src/main/java/app/tivi/common/compose/LazyList.kt
@@ -32,7 +32,7 @@ import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import app.tivi.common.compose.paging.LazyPagingItems
 
-fun LazyListScope.spacerItem(height: Dp) {
+fun LazyListScope.itemSpacer(height: Dp) {
     item {
         Spacer(Modifier.preferredHeight(height).fillParentMaxWidth())
     }
@@ -56,7 +56,7 @@ fun <T : Any> LazyListScope.itemsInGrid(
     }
 
     for (row in 0 until rows) {
-        if (row == 0) spacerItem(contentPadding.top)
+        if (row == 0) itemSpacer(contentPadding.top)
 
         item {
             Row(
@@ -78,9 +78,9 @@ fun <T : Any> LazyListScope.itemsInGrid(
         }
 
         if (row < rows - 1) {
-            spacerItem(verticalItemPadding)
+            itemSpacer(verticalItemPadding)
         } else {
-            spacerItem(contentPadding.bottom)
+            itemSpacer(contentPadding.bottom)
         }
     }
 }
@@ -103,7 +103,7 @@ fun <T> LazyListScope.itemsInGrid(
     }
 
     for (row in 0 until rows) {
-        if (row == 0) spacerItem(contentPadding.top)
+        if (row == 0) itemSpacer(contentPadding.top)
 
         item {
             Row(
@@ -125,9 +125,9 @@ fun <T> LazyListScope.itemsInGrid(
         }
 
         if (row < rows - 1) {
-            spacerItem(verticalItemPadding)
+            itemSpacer(verticalItemPadding)
         } else {
-            spacerItem(contentPadding.bottom)
+            itemSpacer(contentPadding.bottom)
         }
     }
 }
diff --git a/ui-account/src/main/java/app/tivi/account/AccountUi.kt b/ui-account/src/main/java/app/tivi/account/AccountUi.kt
@@ -14,15 +14,12 @@
  * limitations under the License.
  */
 
-@file:Suppress("DEPRECATION")
-
 package app.tivi.account
 
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.ExperimentalLayout
-import androidx.compose.foundation.layout.FlowMainAxisAlignment
 import androidx.compose.foundation.layout.FlowRow
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
@@ -86,7 +83,7 @@ fun AccountUi(
             ) {
                 @Suppress("DEPRECATION") // TODO: Migrate away from FlowRow
                 FlowRow(
-                    mainAxisAlignment = FlowMainAxisAlignment.End,
+                    mainAxisAlignment = androidx.compose.foundation.layout.FlowMainAxisAlignment.End,
                     mainAxisSpacing = 8.dp,
                     crossAxisSpacing = 4.dp,
                 ) {

diff --git a/ui-discover/src/main/java/app/tivi/home/discover/Discover.kt b/ui-discover/src/main/java/app/tivi/home/discover/Discover.kt
@@ -57,8 +57,8 @@ import app.tivi.common.compose.Carousel
 import app.tivi.common.compose.PosterCard
 import app.tivi.common.compose.RefreshButton
 import app.tivi.common.compose.UserProfileButton
+import app.tivi.common.compose.itemSpacer
 import app.tivi.common.compose.rememberMutableState
-import app.tivi.common.compose.spacerItem
 import app.tivi.data.entities.Episode
 import app.tivi.data.entities.Season
 import app.tivi.data.entities.TiviShow
@@ -83,7 +83,7 @@ fun Discover(
                     Spacer(Modifier.preferredHeight(height))
                 }
 
-                spacerItem(16.dp)
+                itemSpacer(16.dp)
 
                 state.nextEpisodeWithShowToWatched?.let { nextEpisodeToWatch ->
                     item {
@@ -106,7 +106,7 @@ fun Discover(
                         )
                     }
 
-                    spacerItem(16.dp)
+                    itemSpacer(16.dp)
                 }
 
                 item {
@@ -139,7 +139,7 @@ fun Discover(
                     )
                 }
 
-                spacerItem(16.dp)
+                itemSpacer(16.dp)
             }
 
             DiscoverAppBar(

diff --git a/ui-episodedetails/src/main/java/app/tivi/episodedetails/EpisodeDetails.kt b/ui-episodedetails/src/main/java/app/tivi/episodedetails/EpisodeDetails.kt
@@ -14,16 +14,10 @@
  * limitations under the License.
  */
 
-@file:Suppress("DEPRECATION") // Compose transition v1 APIs
-
 package app.tivi.episodedetails
 
-import androidx.compose.animation.ColorPropKey
+import androidx.compose.animation.animateColorAsState
 import androidx.compose.animation.core.FastOutLinearInEasing
-import androidx.compose.animation.core.transitionDefinition
-import androidx.compose.animation.core.tween
-import androidx.compose.animation.transition
-import androidx.compose.foundation.ScrollableColumn
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
@@ -36,7 +30,9 @@ import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.preferredHeight
 import androidx.compose.foundation.layout.preferredSizeIn
+import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.foundation.verticalScroll
 import androidx.compose.material.AmbientContentAlpha
 import androidx.compose.material.AmbientContentColor
 import androidx.compose.material.Button
@@ -61,12 +57,11 @@ import androidx.compose.material.icons.filled.Refresh
 import androidx.compose.material.icons.filled.Star
 import androidx.compose.material.rememberDismissState
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.Providers
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.key
-import androidx.compose.runtime.onCommit
 import androidx.compose.runtime.remember
-import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
@@ -102,7 +97,6 @@ import dev.chrisbanes.accompanist.coil.CoilImage
 import dev.chrisbanes.accompanist.insets.navigationBarsHeight
 import dev.chrisbanes.accompanist.insets.navigationBarsPadding
 import dev.chrisbanes.accompanist.insets.statusBarsPadding
-import kotlinx.coroutines.launch
 import org.threeten.bp.OffsetDateTime
 import kotlin.math.absoluteValue
 import kotlin.math.hypot
@@ -115,7 +109,7 @@ fun EpisodeDetails(
 ) {
     Box {
         Column {
-            Box {
+            Surface {
                 if (viewState.episode != null && viewState.season != null) {
                     Backdrop(
                         season = viewState.season,
@@ -133,7 +127,7 @@ fun EpisodeDetails(
                         .statusBarsPadding()
                 )
             }
-            ScrollableColumn {
+            Column(Modifier.verticalScroll(rememberScrollState())) {
                 Surface(elevation = 2.dp) {
                     Column {
                         val episode = viewState.episode
@@ -214,7 +208,6 @@ fun EpisodeDetails(
         }
 
         val snackbarHostState = remember { SnackbarHostState() }
-        val snackbarScope = rememberCoroutineScope()
 
         SnackbarHost(
             hostState = snackbarHostState,
@@ -231,11 +224,9 @@ fun EpisodeDetails(
                 .padding(start = 16.dp, end = 16.dp, bottom = 16.dp)
         )
 
-        onCommit(viewState.error) {
+        LaunchedEffect(viewState.error) {
             viewState.error?.let { error ->
-                snackbarScope.launch {
-                    snackbarHostState.showSnackbar(error.message)
-                }
+                snackbarHostState.showSnackbar(error.message)
             }
         }
     }
@@ -424,44 +415,17 @@ private fun EpisodeWatch(episodeWatchEntry: EpisodeWatchEntry) {
     }
 }
 
-private val color = ColorPropKey()
-
 @Composable
 private fun EpisodeWatchSwipeBackground(
     swipeProgress: Float,
     wouldCompleteOnRelease: Boolean = false
 ) {
     var iconCenter by rememberMutableState { Offset(0f, 0f) }
+    val maxRadius = hypot(iconCenter.x.toDouble(), iconCenter.y.toDouble())
 
-    val maxRadius = remember(iconCenter) {
-        hypot(iconCenter.x.toDouble(), iconCenter.y.toDouble())
-    }
-
-    // Note: can't reference these directly in transitionDefinition {} as
-    // it's not @Composable
     val secondary = MaterialTheme.colors.error.copy(alpha = 0.5f)
     val default = MaterialTheme.colors.onSurface.copy(alpha = 0.2f)
 
-    val transition = remember(secondary, default) {
-        transitionDefinition<Boolean> {
-            state(true) {
-                this[color] = secondary
-            }
-            state(false) {
-                this[color] = default
-            }
-
-            transition {
-                color using tween(durationMillis = 200)
-            }
-        }
-    }
-
-    val transitionState = transition(
-        definition = transition,
-        toState = wouldCompleteOnRelease
-    )
-
     Box(
         Modifier
             .fillMaxSize()
@@ -472,9 +436,18 @@ private fun EpisodeWatchSwipeBackground(
             modifier = Modifier
                 .fillMaxSize()
                 .drawGrowingCircle(
-                    color = transitionState[color],
+                    color = animateColorAsState(
+                        targetValue = when (wouldCompleteOnRelease) {
+                            true -> secondary
+                            false -> default
+                        }
+                    ).value,
                     center = iconCenter,
-                    radius = lerp(0f, maxRadius.toFloat(), FastOutLinearInEasing.transform(swipeProgress))
+                    radius = lerp(
+                        startValue = 0f,
+                        endValue = maxRadius.toFloat(),
+                        fraction = FastOutLinearInEasing.transform(swipeProgress)
+                    )
                 )
         )
 

diff --git a/ui-followed/src/main/java/app/tivi/home/followed/Followed.kt b/ui-followed/src/main/java/app/tivi/home/followed/Followed.kt
@@ -61,8 +61,8 @@ import app.tivi.common.compose.RefreshButton
 import app.tivi.common.compose.SearchTextField
 import app.tivi.common.compose.SortMenuPopup
 import app.tivi.common.compose.UserProfileButton
+import app.tivi.common.compose.itemSpacer
 import app.tivi.common.compose.rememberMutableState
-import app.tivi.common.compose.spacerItem
 import app.tivi.data.entities.ShowTmdbImage
 import app.tivi.data.entities.SortOption
 import app.tivi.data.entities.TiviShow
@@ -116,7 +116,7 @@ fun Followed(
                     }
                 }
 
-                spacerItem(16.dp)
+                itemSpacer(16.dp)
             }
 
             FollowedAppBar(

diff --git a/ui-popular/src/main/java/app/tivi/home/popular/Popular.kt b/ui-popular/src/main/java/app/tivi/home/popular/Popular.kt
@@ -51,10 +51,10 @@ import androidx.paging.LoadState
 import app.tivi.common.compose.AutoSizedCircularProgressIndicator
 import app.tivi.common.compose.PlaceholderPosterCard
 import app.tivi.common.compose.PosterCard
+import app.tivi.common.compose.itemSpacer
 import app.tivi.common.compose.itemsInGrid
 import app.tivi.common.compose.paging.LazyPagingItems
 import app.tivi.common.compose.rememberMutableState
-import app.tivi.common.compose.spacerItem
 import app.tivi.data.resultentities.PopularEntryWithShow
 import dev.chrisbanes.accompanist.insets.statusBarsPadding
 
@@ -101,7 +101,7 @@ fun Popular(
                     }
                 }
 
-                spacerItem(16.dp)
+                itemSpacer(16.dp)
             }
 
             PopularAppBar(

diff --git a/ui-recommended/src/main/java/app/tivi/home/recommended/Recommended.kt b/ui-recommended/src/main/java/app/tivi/home/recommended/Recommended.kt
@@ -51,10 +51,10 @@ import androidx.paging.LoadState
 import app.tivi.common.compose.AutoSizedCircularProgressIndicator
 import app.tivi.common.compose.PlaceholderPosterCard
 import app.tivi.common.compose.PosterCard
+import app.tivi.common.compose.itemSpacer
 import app.tivi.common.compose.itemsInGrid
 import app.tivi.common.compose.paging.LazyPagingItems
 import app.tivi.common.compose.rememberMutableState
-import app.tivi.common.compose.spacerItem
 import app.tivi.data.resultentities.RecommendedEntryWithShow
 import dev.chrisbanes.accompanist.insets.statusBarsPadding
 
@@ -101,7 +101,7 @@ fun Recommended(
                     }
                 }
 
-                spacerItem(16.dp)
+                itemSpacer(16.dp)
             }
 
             RecommendedAppBar(