[Jetcaster] Update to Compose alpha07 snapshot (#278)

- Migrated to Accompanist's Insets library
- Migrated over to content alpha

Jetcaster/app/build.gradle

@@ -109,6 +109,8 @@ dependencies {
 
     implementation Libs.Accompanist.coil
 
+    implementation Libs.Accompanist.insets
+
     implementation Libs.OkHttp.okhttp
     implementation Libs.OkHttp.logging
 

Jetcaster/app/src/main/java/com/example/jetcaster/ui/MainActivity.kt

@@ -21,7 +21,7 @@ import androidx.activity.ComponentActivity
 import androidx.compose.ui.platform.setContent
 import androidx.core.view.WindowCompat
 import com.example.jetcaster.ui.theme.JetcasterTheme
-import com.example.jetcaster.util.ProvideDisplayInsets
+import dev.chrisbanes.accompanist.insets.ProvideWindowInsets
 
 class MainActivity : ComponentActivity() {
     override fun onCreate(savedInstanceState: Bundle?) {
@@ -32,7 +32,7 @@ class MainActivity : ComponentActivity() {
 
         setContent {
             JetcasterTheme {
-                ProvideDisplayInsets {
+                ProvideWindowInsets {
                     JetcasterApp()
                 }
             }

Jetcaster/app/src/main/java/com/example/jetcaster/ui/home/Home.kt

@@ -17,7 +17,6 @@
 package com.example.jetcaster.ui.home
 
 import androidx.compose.foundation.Image
-import androidx.compose.foundation.Text
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
@@ -33,22 +32,24 @@ import androidx.compose.foundation.layout.preferredHeight
 import androidx.compose.foundation.layout.preferredHeightIn
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.material.AmbientEmphasisLevels
+import androidx.compose.material.AmbientContentAlpha
+import androidx.compose.material.ContentAlpha
 import androidx.compose.material.Icon
 import androidx.compose.material.IconButton
 import androidx.compose.material.MaterialTheme
-import androidx.compose.material.ProvideEmphasis
 import androidx.compose.material.Surface
 import androidx.compose.material.Tab
 import androidx.compose.material.TabConstants.defaultTabIndicatorOffset
 import androidx.compose.material.TabPosition
 import androidx.compose.material.TabRow
+import androidx.compose.material.Text
 import androidx.compose.material.TopAppBar
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.AccountCircle
 import androidx.compose.material.icons.filled.Search
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.LaunchedTask
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.Providers
 import androidx.compose.runtime.collectAsState
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.remember
@@ -76,9 +77,9 @@ import com.example.jetcaster.util.ToggleFollowPodcastIconButton
 import com.example.jetcaster.util.constrastAgainst
 import com.example.jetcaster.util.quantityStringResource
 import com.example.jetcaster.util.rememberDominantColorState
-import com.example.jetcaster.util.statusBarsHeight
 import com.example.jetcaster.util.verticalGradientScrim
 import dev.chrisbanes.accompanist.coil.CoilImage
+import dev.chrisbanes.accompanist.insets.statusBarsHeight
 import java.time.Duration
 import java.time.LocalDateTime
 import java.time.OffsetDateTime
@@ -119,7 +120,7 @@ fun HomeAppBar(
         },
         backgroundColor = backgroundColor,
         actions = {
-            ProvideEmphasis(AmbientEmphasisLevels.current.medium) {
+            Providers(AmbientContentAlpha provides ContentAlpha.medium) {
                 IconButton(
                     onClick = { /* TODO: Open search */ },
                     icon = { Icon(Icons.Filled.Search) }
@@ -170,7 +171,7 @@ fun HomeContent(
 
             // When the selected image url changes, call updateColorsFromImageUrl() or reset()
             if (selectedImageUrl != null) {
-                LaunchedTask(selectedImageUrl) {
+                LaunchedEffect(selectedImageUrl) {
                     dominantColorState.updateColorsFromImageUrl(selectedImageUrl)
                 }
             } else {
@@ -338,17 +339,15 @@ private fun FollowedPodcastCarouselItem(
                 )
             }
 
-            ProvideEmphasis(AmbientEmphasisLevels.current.high) {
-                ToggleFollowPodcastIconButton(
-                    onClick = onUnfollowedClick,
-                    isFollowed = true, /* All podcasts are followed in this feed */
-                    modifier = Modifier.align(Alignment.BottomEnd)
-                )
-            }
+            ToggleFollowPodcastIconButton(
+                onClick = onUnfollowedClick,
+                isFollowed = true, /* All podcasts are followed in this feed */
+                modifier = Modifier.align(Alignment.BottomEnd)
+            )
         }
 
         if (lastEpisodeDate != null) {
-            ProvideEmphasis(AmbientEmphasisLevels.current.medium) {
+            Providers(AmbientContentAlpha provides ContentAlpha.medium) {
                 Text(
                     text = lastUpdated(lastEpisodeDate),
                     style = MaterialTheme.typography.caption,

Jetcaster/app/src/main/java/com/example/jetcaster/ui/home/category/PodcastCategory.kt

@@ -16,9 +16,7 @@
 
 package com.example.jetcaster.ui.home.category
 
-import androidx.compose.foundation.AmbientContentColor
 import androidx.compose.foundation.Image
-import androidx.compose.foundation.Text
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
@@ -32,21 +30,23 @@ import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.preferredSize
 import androidx.compose.foundation.layout.preferredWidth
-import androidx.compose.foundation.lazy.ExperimentalLazyDsl
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.LazyRowForIndexed
-import androidx.compose.material.AmbientEmphasisLevels
+import androidx.compose.material.AmbientContentAlpha
+import androidx.compose.material.AmbientContentColor
+import androidx.compose.material.ContentAlpha
 import androidx.compose.material.Divider
 import androidx.compose.material.Icon
 import androidx.compose.material.IconButton
 import androidx.compose.material.MaterialTheme
-import androidx.compose.material.ProvideEmphasis
+import androidx.compose.material.Text
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.MoreVert
 import androidx.compose.material.icons.filled.PlaylistAdd
 import androidx.compose.material.icons.rounded.PlayCircleFilled
 import androidx.compose.material.ripple.RippleIndication
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.Providers
 import androidx.compose.runtime.collectAsState
 import androidx.compose.runtime.getValue
 import androidx.compose.ui.Alignment
@@ -73,7 +73,6 @@ import dev.chrisbanes.accompanist.coil.CoilImage
 import java.time.format.DateTimeFormatter
 import java.time.format.FormatStyle
 
-@OptIn(ExperimentalLazyDsl::class)
 @Composable
 fun PodcastCategory(
     categoryId: Long,
@@ -166,29 +165,27 @@ fun EpisodeListItem(
             )
         }
 
-        ProvideEmphasis(AmbientEmphasisLevels.current.high) {
-            Text(
-                text = episode.title,
-                maxLines = 2,
-                style = MaterialTheme.typography.subtitle1,
-                modifier = Modifier.constrainAs(episodeTitle) {
-                    linkTo(
-                        start = parent.start,
-                        end = image.start,
-                        startMargin = Keyline1,
-                        endMargin = 16.dp,
-                        bias = 0f
-                    )
-                    top.linkTo(parent.top, 16.dp)
+        Text(
+            text = episode.title,
+            maxLines = 2,
+            style = MaterialTheme.typography.subtitle1,
+            modifier = Modifier.constrainAs(episodeTitle) {
+                linkTo(
+                    start = parent.start,
+                    end = image.start,
+                    startMargin = Keyline1,
+                    endMargin = 16.dp,
+                    bias = 0f
+                )
+                top.linkTo(parent.top, 16.dp)
 
-                    width = Dimension.preferredWrapContent
-                }
-            )
-        }
+                width = Dimension.preferredWrapContent
+            }
+        )
 
         val titleImageBarrier = createBottomBarrier(podcastTitle, image)
 
-        ProvideEmphasis(AmbientEmphasisLevels.current.medium) {
+        Providers(AmbientContentAlpha provides ContentAlpha.medium) {
             Text(
                 text = podcast.title,
                 maxLines = 2,
@@ -208,25 +205,23 @@ fun EpisodeListItem(
             )
         }
 
-        ProvideEmphasis(AmbientEmphasisLevels.current.high) {
-            Image(
-                asset = Icons.Rounded.PlayCircleFilled,
-                contentScale = ContentScale.Fit,
-                colorFilter = ColorFilter.tint(AmbientContentColor.current),
-                modifier = Modifier
-                    .clickable(indication = RippleIndication(bounded = false, radius = 24.dp)) {
-                        /* TODO */
-                    }
-                    .preferredSize(36.dp)
-                    .constrainAs(playIcon) {
-                        start.linkTo(parent.start, Keyline1)
-                        top.linkTo(titleImageBarrier, margin = 16.dp)
-                        bottom.linkTo(parent.bottom, 16.dp)
-                    }
-            )
-        }
+        Image(
+            asset = Icons.Rounded.PlayCircleFilled,
+            contentScale = ContentScale.Fit,
+            colorFilter = ColorFilter.tint(AmbientContentColor.current),
+            modifier = Modifier
+                .clickable(indication = RippleIndication(bounded = false, radius = 24.dp)) {
+                    /* TODO */
+                }
+                .preferredSize(36.dp)
+                .constrainAs(playIcon) {
+                    start.linkTo(parent.start, Keyline1)
+                    top.linkTo(titleImageBarrier, margin = 16.dp)
+                    bottom.linkTo(parent.bottom, 16.dp)
+                }
+        )
 
-        ProvideEmphasis(AmbientEmphasisLevels.current.medium) {
+        Providers(AmbientContentAlpha provides ContentAlpha.medium) {
             Text(
                 text = when {
                     episode.duration != null -> {
@@ -326,24 +321,20 @@ private fun TopPodcastRowItem(
                 )
             }
 
-            ProvideEmphasis(AmbientEmphasisLevels.current.high) {
-                ToggleFollowPodcastIconButton(
-                    onClick = onToggleFollowClicked,
-                    isFollowed = isFollowed,
-                    modifier = Modifier.align(Alignment.BottomEnd)
-                )
-            }
-        }
-
-        ProvideEmphasis(AmbientEmphasisLevels.current.high) {
-            Text(
-                text = podcastTitle,
-                style = MaterialTheme.typography.body2,
-                maxLines = 2,
-                overflow = TextOverflow.Ellipsis,
-                modifier = Modifier.padding(top = 8.dp).fillMaxWidth()
+            ToggleFollowPodcastIconButton(
+                onClick = onToggleFollowClicked,
+                isFollowed = isFollowed,
+                modifier = Modifier.align(Alignment.BottomEnd)
             )
         }
+
+        Text(
+            text = podcastTitle,
+            style = MaterialTheme.typography.body2,
+            maxLines = 2,
+            overflow = TextOverflow.Ellipsis,
+            modifier = Modifier.padding(top = 8.dp).fillMaxWidth()
+        )
     }
 }
 

Jetcaster/app/src/main/java/com/example/jetcaster/ui/home/discover/Discover.kt

@@ -22,8 +22,6 @@ import androidx.compose.animation.core.LinearOutSlowInEasing
 import androidx.compose.animation.core.TransitionDefinition
 import androidx.compose.animation.core.transitionDefinition
 import androidx.compose.animation.core.tween
-import androidx.compose.foundation.Text
-import androidx.compose.foundation.contentColor
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
@@ -35,6 +33,7 @@ import androidx.compose.material.ScrollableTabRow
 import androidx.compose.material.Surface
 import androidx.compose.material.Tab
 import androidx.compose.material.TabPosition
+import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.collectAsState
 import androidx.compose.runtime.emptyContent

Jetcaster/app/src/main/java/com/example/jetcaster/util/Buttons.kt

@@ -17,10 +17,10 @@
 package com.example.jetcaster.util
 
 import androidx.compose.animation.animate
-import androidx.compose.foundation.AmbientContentColor
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.padding
-import androidx.compose.material.AmbientEmphasisLevels
+import androidx.compose.material.AmbientContentColor
+import androidx.compose.material.ContentAlpha
 import androidx.compose.material.Icon
 import androidx.compose.material.IconButton
 import androidx.compose.material.MaterialTheme
@@ -52,7 +52,7 @@ fun ToggleFollowPodcastIconButton(
             tint = animate(
                 when {
                     isFollowed -> AmbientContentColor.current
-                    else -> AmbientEmphasisLevels.current.high.applyEmphasis(Color.Black)
+                    else -> Color.Black.copy(alpha = ContentAlpha.high)
                 }
             ),
             modifier = Modifier