[Compose] Upgrade to Alpha 11 (#1732)

Upgrades Compose to Alpha 11! I migrated some deprecated APIs, mostly related to effects. Also wrapped the player controls and toolbar in the AnimatedVisibility composable so toggling focus mode feels a little less jumpy.
airbnb · Jan 30, 2021 · 2ccdac0 · 2ccdac0
1 parent 5989f67
commit 2ccdac0
Show file tree

Hide file tree

Showing 13 changed files with 80 additions and 57 deletions.
diff --git a/build.gradle b/build.gradle
@@ -2,8 +2,8 @@ import org.ajoberstar.grgit.Grgit
 
 buildscript {
   ext {
-    composeVersion = '1.0.0-alpha10'
-    kotlinVersion = '1.4.21'
+    composeVersion = '1.0.0-alpha11'
+    kotlinVersion = '1.4.21-2'
     daggerVersion = '2.30.1'
   }
 
@@ -16,7 +16,7 @@ buildscript {
   }
   dependencies {
     classpath 'org.ajoberstar:grgit:1.9.3'
-    classpath 'com.android.tools.build:gradle:7.0.0-alpha04'
+    classpath 'com.android.tools.build:gradle:7.0.0-alpha05'
     classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlinVersion"
     classpath "org.jetbrains.kotlin:kotlin-android-extensions:$kotlinVersion"
     classpath 'org.ajoberstar:grgit:1.9.3'

diff --git a/gradle/wrapper/gradle-wrapper.properties b/gradle/wrapper/gradle-wrapper.properties
@@ -3,4 +3,4 @@ distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
 zipStoreBase=GRADLE_USER_HOME
 zipStorePath=wrapper/dists
-distributionUrl=https://services.gradle.org/distributions/gradle-6.8-rc-1-all.zip
+distributionUrl=https://services.gradle.org/distributions/gradle-6.8-all.zip
diff --git a/lottie-compose/src/main/java/com/airbnb/lottie/compose/LottieAnimation.kt b/lottie-compose/src/main/java/com/airbnb/lottie/compose/LottieAnimation.kt
@@ -9,7 +9,7 @@ import androidx.compose.runtime.SideEffect
 import androidx.compose.runtime.dispatch.withFrameNanos
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.onCommit
+import androidx.compose.runtime.DisposableEffect
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
@@ -34,7 +34,7 @@ import kotlin.math.floor
 fun rememberLottieComposition(spec: LottieAnimationSpec): LottieCompositionResult {
     val context = AmbientContext.current
     var result: LottieCompositionResult by remember { mutableStateOf(LottieCompositionResult.Loading) }
-    onCommit(spec) {
+    DisposableEffect(spec) {
         var isDisposed = false
         val task = when (spec) {
             is LottieAnimationSpec.RawRes -> LottieCompositionFactory.fromRawRes(context, spec.resId)

diff --git a/sample-compose/build.gradle b/sample-compose/build.gradle
@@ -65,7 +65,7 @@ dependencies {
   implementation "androidx.compose.material:material:$composeVersion"
   implementation "androidx.compose.material:material-icons-extended:$composeVersion"
   implementation "androidx.compose.ui:ui-tooling:$composeVersion"
-  implementation "androidx.navigation:navigation-compose:1.0.0-alpha05"
+  implementation "androidx.navigation:navigation-compose:1.0.0-alpha06"
   implementation 'androidx.lifecycle:lifecycle-runtime-ktx:2.3.0-rc01'
   implementation 'androidx.lifecycle:lifecycle-viewmodel-ktx:2.3.0-rc01'
 
@@ -83,7 +83,7 @@ dependencies {
 
   implementation 'com.squareup.retrofit2:retrofit:2.9.0'
   implementation 'com.squareup.retrofit2:converter-moshi:2.9.0'
-  implementation "dev.chrisbanes.accompanist:accompanist-coil:0.4.2"
+  implementation "dev.chrisbanes.accompanist:accompanist-coil:0.5.0"
   implementation 'com.airbnb.android:mvrx:2.0.0-beta3'
 
   testImplementation 'junit:junit:4.13.1'

diff --git a/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/ComposeActivity.kt b/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/ComposeActivity.kt
@@ -69,7 +69,12 @@ class ComposeActivity : AppCompatActivity() {
 
                             BottomNavItemData.values().forEach { item ->
                                 BottomNavigationItem(
-                                    icon = { Icon(vectorResource(item.iconRes)) },
+                                    icon = {
+                                        Icon(
+                                            imageVector = vectorResource(item.iconRes),
+                                            contentDescription = null
+                                        )
+                                    },
                                     label = { Text(stringResource(item.labelRes)) },
                                     selected = currentRoute == item.route.route,
                                     onClick = {

diff --git a/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/composables/AnimationRow.kt b/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/composables/AnimationRow.kt
@@ -39,7 +39,8 @@ fun AnimationRow(
                 modifier = Modifier
                     .padding(end = 16.dp)
                     .preferredSize(40.dp)
-                    .background(color = previewBackgroundColor)
+                    .background(color = previewBackgroundColor),
+                contentDescription = null
             )
             Text(
                 title,

diff --git a/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/lottiefiles/LottieFilesPage.kt b/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/lottiefiles/LottieFilesPage.kt
@@ -1,7 +1,8 @@
 package com.airbnb.lottie.sample.compose.lottiefiles
 
 import androidx.annotation.StringRes
-import androidx.compose.animation.core.animateAsState
+import androidx.compose.animation.core.animateDpAsState
+import androidx.compose.animation.core.animateFloatAsState
 import androidx.compose.animation.core.spring
 import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
@@ -74,8 +75,8 @@ fun LottieFilesTabBarTab(
 ) {
     val textWidth = remember { mutableStateOf(0) }
     val pxRatio = with(AmbientDensity.current) { 1.dp.toPx() }
-    val tabWidth by animateAsState(if (isSelected) (textWidth.value / pxRatio).dp else 0.dp, spring(), null)
-    val tabAlpha by animateAsState(if (isSelected) 1f else 0f)
+    val tabWidth by animateDpAsState(if (isSelected) (textWidth.value / pxRatio).dp else 0.dp)
+    val tabAlpha by animateFloatAsState(if (isSelected) 1f else 0f)
     Column(
         modifier = Modifier
             .clickable(onClick = onClick)

diff --git a/...ain/java/com/airbnb/lottie/sample/compose/lottiefiles/LottieFilesRecentsAndPopularPage.kt b/...ain/java/com/airbnb/lottie/sample/compose/lottiefiles/LottieFilesRecentsAndPopularPage.kt
@@ -6,18 +6,20 @@ import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.itemsIndexed
 import androidx.compose.material.FloatingActionButton
 import androidx.compose.material.Icon
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Repeat
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.onActive
-import androidx.compose.runtime.onCommit
+import androidx.compose.runtime.SideEffect
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
 import androidx.navigation.compose.navigate
+import com.airbnb.lottie.sample.compose.R
 import com.airbnb.lottie.sample.compose.Route
 import com.airbnb.lottie.sample.compose.api.AnimationDataV2
 import com.airbnb.lottie.sample.compose.api.LottieFilesApi
@@ -104,7 +106,7 @@ class LottieFilesRecentAndPopularViewModel @AssistedInject constructor(
 fun LottieFilesRecentAndPopularPage(mode: LottieFilesMode) {
     val (viewModel, state) = mavericksViewModelAndState<LottieFilesRecentAndPopularViewModel, LottieFilesRecentAndPopularState>()
     val navController = findNavController()
-    onCommit(mode) {
+    SideEffect {
         viewModel.setMode(mode)
     }
     LottieFilesRecentAndPopularPage(
@@ -135,9 +137,7 @@ fun LottieFilesRecentAndPopularPage(
             ) {
                 itemsIndexed(state.results) { index, result ->
                     if (index == state.results.size - 1) {
-                        onActive {
-                            fetchNextPage()
-                        }
+                        SideEffect(fetchNextPage)
                     }
                     AnimationRow(
                         title = result.title,
@@ -152,7 +152,11 @@ fun LottieFilesRecentAndPopularPage(
             FloatingActionButton(
                 onClick = fetchNextPage,
                 content = {
-                    Icon(Icons.Filled.Repeat, tint = Color.White)
+                    Icon(
+                        imageVector = Icons.Filled.Repeat,
+                        tint = Color.White,
+                        contentDescription = null
+                    )
                 },
                 modifier = Modifier
                     .align(Alignment.BottomCenter)

diff --git a/...mpose/src/main/java/com/airbnb/lottie/sample/compose/lottiefiles/LottieFilesSearchPage.kt b/...mpose/src/main/java/com/airbnb/lottie/sample/compose/lottiefiles/LottieFilesSearchPage.kt
@@ -6,6 +6,7 @@ import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.itemsIndexed
 import androidx.compose.material.FloatingActionButton
 import androidx.compose.material.Icon
 import androidx.compose.material.OutlinedTextField
@@ -14,7 +15,7 @@ import androidx.compose.material.Text
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Repeat
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.onActive
+import androidx.compose.runtime.SideEffect
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
@@ -147,9 +148,7 @@ fun LottieFilesSearchPage(
             ) {
                 itemsIndexed(state.results) { index, result ->
                     if (index == state.results.size - 1) {
-                        onActive {
-                            fetchNextPage()
-                        }
+                        SideEffect(fetchNextPage)
                     }
                     AnimationRow(
                         title = result.title,
@@ -164,7 +163,11 @@ fun LottieFilesSearchPage(
             FloatingActionButton(
                 onClick = fetchNextPage,
                 content = {
-                    Icon(Icons.Filled.Repeat, tint = Color.White)
+                    Icon(
+                        imageVector = Icons.Filled.Repeat,
+                        tint = Color.White,
+                        contentDescription = null
+                    )
                 },
                 modifier = Modifier
                     .align(Alignment.BottomCenter)

diff --git a/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/player/PlayerPage.kt b/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/player/PlayerPage.kt
@@ -1,11 +1,11 @@
 package com.airbnb.lottie.sample.compose.player
 
 import androidx.activity.OnBackPressedDispatcher
-import androidx.compose.foundation.ScrollableColumn
-import androidx.compose.foundation.ScrollableRow
-import androidx.compose.foundation.background
-import androidx.compose.foundation.border
-import androidx.compose.foundation.clickable
+import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.animation.ExperimentalAnimationApi
+import androidx.compose.animation.expandVertically
+import androidx.compose.animation.shrinkVertically
+import androidx.compose.foundation.*
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
@@ -18,6 +18,8 @@ import androidx.compose.foundation.layout.heightIn
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.preferredSize
 import androidx.compose.foundation.layout.preferredWidth
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.itemsIndexed
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.Icon
@@ -74,6 +76,7 @@ import com.airbnb.lottie.sample.compose.utils.maybeDrawBorder
 import kotlin.math.ceil
 import kotlin.math.roundToInt
 
+@OptIn(ExperimentalAnimationApi::class)
 @Composable
 fun PlayerPage(
     spec: LottieAnimationSpec,
@@ -105,12 +108,8 @@ fun PlayerPage(
         }
     }
 
-    onCommit(outlineMasksAndMattes.value) {
-        animationState.outlineMasksAndMattes = outlineMasksAndMattes.value
-    }
-    onCommit(applyOpacityToLayers.value) {
-        animationState.applyOpacityToLayers = applyOpacityToLayers.value
-    }
+    animationState.outlineMasksAndMattes = outlineMasksAndMattes.value
+    animationState.applyOpacityToLayers = applyOpacityToLayers.value
 
     Scaffold(
         scaffoldState = scaffoldState,
@@ -123,7 +122,10 @@ fun PlayerPage(
                     IconButton(
                         onClick = { backPressedDispatcher.onBackPressed() },
                     ) {
-                        Icon(Icons.Default.Close)
+                        Icon(
+                            Icons.Default.Close,
+                            contentDescription = null
+                        )
                     }
                 },
                 actions = {
@@ -134,6 +136,7 @@ fun PlayerPage(
                             Icon(
                                 Icons.Filled.Warning,
                                 tint = Color.Black,
+                                contentDescription = null
                             )
                         }
                     }
@@ -143,6 +146,7 @@ fun PlayerPage(
                         Icon(
                             Icons.Filled.RemoveRedEye,
                             tint = if (focusMode) Teal else Color.Black,
+                            contentDescription = null
                         )
                     }
                 }
@@ -188,7 +192,11 @@ fun PlayerPage(
                     onColorChanged = { backgroundColor = it }
                 )
             }
-            if (!focusMode) {
+            AnimatedVisibility(
+                visible = !focusMode,
+                enter = expandVertically(),
+                exit = shrinkVertically()
+            ) {
                 PlayerControlsRow(animationState, compositionResult())
                 Toolbar(
                     border = borderToolbar,
@@ -232,7 +240,11 @@ private fun PlayerControlsRow(
                 IconButton(
                     onClick = { animationState.toggleIsPlaying() },
                 ) {
-                    Icon(if (animationState.isPlaying) Icons.Filled.Pause else Icons.Filled.PlayArrow)
+                    Icon(
+                        if (animationState.isPlaying) Icons.Filled.Pause
+                        else Icons.Filled.PlayArrow,
+                        contentDescription = null
+                    )
                 }
                 Text(
                     "${animationState.frame}/${ceil(composition?.durationFrames ?: 0f).toInt()}\n${progressFormatted}/$totalTimeFormatted",
@@ -256,6 +268,7 @@ private fun PlayerControlsRow(
                 Icon(
                     Icons.Filled.Repeat,
                     tint = if (animationState.repeatCount > 0) Teal else Color.Black,
+                    contentDescription = null
                 )
             }
         }
@@ -364,12 +377,7 @@ private fun Toolbar(
     outlineMasksAndMattes: MutableState<Boolean>,
     applyOpacityToLayers: MutableState<Boolean>,
 ) {
-    ScrollableRow(
-        contentPadding = PaddingValues(start = 16.dp, top = 12.dp, end = 16.dp, bottom = 12.dp),
-        modifier = Modifier
-            .drawTopBorder()
-            .fillMaxWidth()
-    ) {
+    Row(Modifier.horizontalScroll(rememberScrollState())) {
         ToolbarChip(
             iconRes = R.drawable.ic_masks_and_mattes,
             label = stringResource(R.string.toolbar_item_masks),
@@ -424,8 +432,8 @@ fun WarningDialog(
                 contentAlignment = Alignment.TopCenter,
                 modifier = Modifier
             ) {
-                ScrollableColumn {
-                    warnings.forEachIndexed { i, warning ->
+                LazyColumn {
+                    itemsIndexed(warnings) { i, warning ->
                         Text(
                             warning,
                             fontSize = 8.sp,

diff --git a/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/player/ToolbarChip.kt b/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/player/ToolbarChip.kt
@@ -49,7 +49,8 @@ fun ToolbarChip(
                     vectorResource(iconRes),
                     tint = if (isActivated) Color.White else unActivatedColor,
                     modifier = Modifier
-                        .preferredSize(12.dp)
+                        .preferredSize(12.dp),
+                    contentDescription = null
                 )
                 Spacer(modifier = Modifier.preferredWidth(6.dp))
             }

diff --git a/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/preview/PreviewPage.kt b/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/preview/PreviewPage.kt
@@ -95,7 +95,8 @@ private fun PreviewRow(
                     vectorResource(iconRes),
                     modifier = Modifier
                         .align(Alignment.CenterVertically)
-                        .padding(16.dp)
+                        .padding(16.dp),
+                    contentDescription = null
                 )
                 Text(
                     stringResource(textRes),

diff --git a/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/showcase/ShowcasePage.kt b/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/showcase/ShowcasePage.kt
@@ -1,9 +1,9 @@
 package com.airbnb.lottie.sample.compose.showcase
 
-import androidx.compose.foundation.ScrollableColumn
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.items
 import androidx.compose.material.Divider
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
@@ -25,16 +25,15 @@ import com.airbnb.mvrx.Uninitialized
 fun ShowcasePage() {
     val (_, showcaseState) = mavericksViewModelAndState<ShowcaseViewModel, ShowcaseState>()
     val featuredAnimations = showcaseState.animations
-    val scrollState = rememberScrollState()
     val navController = findNavController()
     Box(
         modifier = Modifier.fillMaxSize()
     ) {
-        ScrollableColumn(
-            scrollState = scrollState
-        ) {
-            Marquee("Showcase")
-            featuredAnimations()?.data?.forEach { data ->
+        LazyColumn {
+            item {
+                Marquee("Showcase")
+            }
+            items(featuredAnimations()?.data.orEmpty()) { data ->
                 AnimationRow(
                     title = data.title,
                     previewUrl = data.preview_url ?: "",