diff --git a/android/feature/talking-kotlin-episode/src/main/java/io/github/reactivecircus/kstreamlined/android/feature/talkingkotlinepisode/TalkingKotlinEpisodeScreen.kt b/android/feature/talking-kotlin-episode/src/main/java/io/github/reactivecircus/kstreamlined/android/feature/talkingkotlinepisode/TalkingKotlinEpisodeScreen.kt index b76fd2eb..5076c847 100644 --- a/android/feature/talking-kotlin-episode/src/main/java/io/github/reactivecircus/kstreamlined/android/feature/talkingkotlinepisode/TalkingKotlinEpisodeScreen.kt +++ b/android/feature/talking-kotlin-episode/src/main/java/io/github/reactivecircus/kstreamlined/android/feature/talkingkotlinepisode/TalkingKotlinEpisodeScreen.kt @@ -1,10 +1,6 @@ package io.github.reactivecircus.kstreamlined.android.feature.talkingkotlinepisode -import androidx.compose.animation.AnimatedContent import androidx.compose.animation.AnimatedVisibility -import androidx.compose.animation.fadeIn -import androidx.compose.animation.fadeOut -import androidx.compose.animation.togetherWith import androidx.compose.foundation.background import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Box @@ -198,29 +194,26 @@ private fun ContentUi( } } item { - Text( - text = "${episode.displayablePublishTime} • ${episode.duration}", - style = KSTheme.typography.labelMedium, - modifier = Modifier.padding(vertical = 8.dp), - color = KSTheme.colorScheme.onBackgroundVariant, - textAlign = TextAlign.Center, - ) - Text( - text = episode.title, - style = KSTheme.typography.titleLarge, - modifier = Modifier.padding(horizontal = 24.dp), - textAlign = TextAlign.Center, - ) - AnimatedContent( - targetState = isPlaying, - modifier = Modifier.padding(top = 8.dp), - transitionSpec = { fadeIn() togetherWith fadeOut() }, - contentAlignment = Alignment.Center, - label = "isPlaying", - ) { playing -> + Column( + horizontalAlignment = Alignment.CenterHorizontally, + ) { + Text( + text = "${episode.displayablePublishTime} • ${episode.duration}", + style = KSTheme.typography.labelMedium, + modifier = Modifier.padding(vertical = 8.dp), + color = KSTheme.colorScheme.onBackgroundVariant, + textAlign = TextAlign.Center, + ) + Text( + text = episode.title, + style = KSTheme.typography.titleLarge, + modifier = Modifier.padding(horizontal = 24.dp), + textAlign = TextAlign.Center, + ) PlayPauseButton( - isPlaying = playing, + isPlaying = isPlaying, onPlayPauseButtonClick = onPlayPauseButtonClick, + modifier = Modifier.padding(top = 8.dp), ) } } diff --git a/android/feature/talking-kotlin-episode/src/main/java/io/github/reactivecircus/kstreamlined/android/feature/talkingkotlinepisode/component/PlayPauseButton.kt b/android/feature/talking-kotlin-episode/src/main/java/io/github/reactivecircus/kstreamlined/android/feature/talkingkotlinepisode/component/PlayPauseButton.kt index d89ef317..44d9f24b 100644 --- a/android/feature/talking-kotlin-episode/src/main/java/io/github/reactivecircus/kstreamlined/android/feature/talkingkotlinepisode/component/PlayPauseButton.kt +++ b/android/feature/talking-kotlin-episode/src/main/java/io/github/reactivecircus/kstreamlined/android/feature/talkingkotlinepisode/component/PlayPauseButton.kt @@ -1,5 +1,11 @@ package io.github.reactivecircus.kstreamlined.android.feature.talkingkotlinepisode.component +import androidx.compose.animation.AnimatedContent +import androidx.compose.animation.fadeIn +import androidx.compose.animation.fadeOut +import androidx.compose.animation.scaleIn +import androidx.compose.animation.scaleOut +import androidx.compose.animation.togetherWith import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.padding @@ -34,27 +40,26 @@ internal fun PlayPauseButton( verticalAlignment = Alignment.CenterVertically, horizontalArrangement = Arrangement.spacedBy(8.dp), ) { - if (isPlaying) { + AnimatedContent( + targetState = isPlaying, + transitionSpec = { scaleIn() togetherWith scaleOut() }, + contentAlignment = Alignment.Center, + label = "isPlaying", + ) { playing -> Icon( - KSIcons.Pause, - contentDescription = null, - ) - Text( - text = stringResource( - id = R.string.pause - ), - style = KSTheme.typography.labelLarge.copy( - fontWeight = FontWeight.ExtraBold - ), - ) - } else { - Icon( - KSIcons.PlayArrow, + if (playing) KSIcons.Pause else KSIcons.PlayArrow, contentDescription = null, ) + } + AnimatedContent( + targetState = isPlaying, + transitionSpec = { fadeIn() togetherWith fadeOut() }, + contentAlignment = Alignment.Center, + label = "isPlaying", + ) { playing -> Text( text = stringResource( - id = R.string.play + id = if (playing) R.string.pause else R.string.play ), style = KSTheme.typography.labelLarge.copy( fontWeight = FontWeight.ExtraBold diff --git a/android/feature/talking-kotlin-episode/src/main/java/io/github/reactivecircus/kstreamlined/android/feature/talkingkotlinepisode/component/PodcastPlayer.kt b/android/feature/talking-kotlin-episode/src/main/java/io/github/reactivecircus/kstreamlined/android/feature/talkingkotlinepisode/component/PodcastPlayer.kt index 229bfada..dbf396c5 100644 --- a/android/feature/talking-kotlin-episode/src/main/java/io/github/reactivecircus/kstreamlined/android/feature/talkingkotlinepisode/component/PodcastPlayer.kt +++ b/android/feature/talking-kotlin-episode/src/main/java/io/github/reactivecircus/kstreamlined/android/feature/talkingkotlinepisode/component/PodcastPlayer.kt @@ -1,8 +1,8 @@ package io.github.reactivecircus.kstreamlined.android.feature.talkingkotlinepisode.component import androidx.compose.animation.AnimatedContent -import androidx.compose.animation.fadeIn -import androidx.compose.animation.fadeOut +import androidx.compose.animation.scaleIn +import androidx.compose.animation.scaleOut import androidx.compose.animation.togetherWith import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Column @@ -110,27 +110,15 @@ internal fun PodcastPlayer( AnimatedContent( targetState = isPlaying, modifier = Modifier.padding(end = 8.dp), - transitionSpec = { fadeIn() togetherWith fadeOut() }, + transitionSpec = { scaleIn() togetherWith scaleOut() }, contentAlignment = Alignment.Center, label = "isPlaying", ) { playing -> - when (playing) { - true -> { - LargeIconButton( - KSIcons.Pause, - contentDescription = null, - onClick = onPlayPauseButtonClick, - ) - } - - false -> { - LargeIconButton( - KSIcons.PlayArrow, - contentDescription = null, - onClick = onPlayPauseButtonClick, - ) - } - } + LargeIconButton( + if (playing) KSIcons.Pause else KSIcons.PlayArrow, + contentDescription = null, + onClick = onPlayPauseButtonClick, + ) } } }