From 444c5634dde6d289ddd691835db08e7e1c4cd2e6 Mon Sep 17 00:00:00 2001 From: Zyrouge Date: Tue, 12 Nov 2024 01:50:21 +0530 Subject: [PATCH] refactor: fine tune page transitions --- .phrasey/schema.toml | 5 +- .../symphony/ui/helpers/Transitions.kt | 33 ++++----- .../github/zyrouge/symphony/ui/view/Base.kt | 68 +++++++++++++------ .../zyrouge/symphony/ui/view/Settings.kt | 4 +- .../ui/view/settings/HomePageSettingsView.kt | 2 +- i18n/en.toml | 3 +- 6 files changed, 68 insertions(+), 47 deletions(-) diff --git a/.phrasey/schema.toml b/.phrasey/schema.toml index 8ee0d489..4aa9aab7 100644 --- a/.phrasey/schema.toml +++ b/.phrasey/schema.toml @@ -722,7 +722,4 @@ name = "Date" name = "TotalSamples" [[keys]] -name = "HomePage" - -[[keys]] -name = "NowPlayingPage" +name = "Home" diff --git a/app/src/main/java/io/github/zyrouge/symphony/ui/helpers/Transitions.kt b/app/src/main/java/io/github/zyrouge/symphony/ui/helpers/Transitions.kt index bd694a09..10903011 100644 --- a/app/src/main/java/io/github/zyrouge/symphony/ui/helpers/Transitions.kt +++ b/app/src/main/java/io/github/zyrouge/symphony/ui/helpers/Transitions.kt @@ -14,22 +14,24 @@ import androidx.compose.ui.unit.IntOffset import androidx.compose.ui.unit.IntSize sealed class TransitionDurations(val milliseconds: Int) { - data object Fast : TransitionDurations(150) - data object Normal : TransitionDurations(300) - data object Slow : TransitionDurations(500) + data object Fast : TransitionDurations(200) + data object Normal : TransitionDurations(400) + data object Slow : TransitionDurations(600) fun asTween(delayMillis: Int = 0, easing: Easing = FastOutSlowInEasing) = tween(milliseconds, delayMillis, easing) } -data class ScaleTransition(val enterScale: Float, val exitScale: Float) { +class ScaleTransition(val enterScale: Float, val exitScale: Float) { fun enterTransition( - animationSpec: FiniteAnimationSpec = defaultAnimationSpec(), - ) = scaleIn(animationSpec, enterScale) + fadeIn() + fadeAnimationSpec: FiniteAnimationSpec = defaultAnimationSpec(), + scaleAnimationSpec: FiniteAnimationSpec = defaultAnimationSpec(), + ) = fadeIn(fadeAnimationSpec) + scaleIn(scaleAnimationSpec, enterScale) fun exitTransition( - animationSpec: FiniteAnimationSpec = defaultAnimationSpec(), - ) = scaleOut(animationSpec, exitScale) + fadeOut() + fadeAnimationSpec: FiniteAnimationSpec = defaultAnimationSpec(), + scaleAnimationSpec: FiniteAnimationSpec = defaultAnimationSpec(), + ) = fadeOut(fadeAnimationSpec) + scaleOut(scaleAnimationSpec, exitScale) companion object { private const val ShrinkScale = 0.95f @@ -44,17 +46,16 @@ data class ScaleTransition(val enterScale: Float, val exitScale: Float) { private typealias CalcOffsetFn = (IntSize) -> IntOffset -data class SlideTransition( - val enterOffset: CalcOffsetFn, - val exitOffset: CalcOffsetFn, -) { +class SlideTransition(val enterOffset: CalcOffsetFn, val exitOffset: CalcOffsetFn) { fun enterTransition( - animationSpec: FiniteAnimationSpec = defaultAnimationSpec(), - ) = slideIn(animationSpec) { enterOffset(it) } + fadeIn() + fadeAnimationSpec: FiniteAnimationSpec = defaultAnimationSpec(), + slideAnimationSpec: FiniteAnimationSpec = defaultAnimationSpec(), + ) = fadeIn(fadeAnimationSpec) + slideIn(slideAnimationSpec) { enterOffset(it) } fun exitTransition( - animationSpec: FiniteAnimationSpec = defaultAnimationSpec(), - ) = slideOut(animationSpec) { exitOffset(it) } + fadeOut() + fadeAnimationSpec: FiniteAnimationSpec = defaultAnimationSpec(), + slideAnimationSpec: FiniteAnimationSpec = defaultAnimationSpec(), + ) = slideOut(slideAnimationSpec) { exitOffset(it) } + fadeOut(fadeAnimationSpec) companion object { private val slideUpOffset: CalcOffsetFn = { IntOffset(0, calculateOffset(-it.height)) } diff --git a/app/src/main/java/io/github/zyrouge/symphony/ui/view/Base.kt b/app/src/main/java/io/github/zyrouge/symphony/ui/view/Base.kt index 59fde821..79345c5d 100644 --- a/app/src/main/java/io/github/zyrouge/symphony/ui/view/Base.kt +++ b/app/src/main/java/io/github/zyrouge/symphony/ui/view/Base.kt @@ -4,6 +4,7 @@ import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Surface import androidx.compose.runtime.Composable import androidx.compose.runtime.remember +import androidx.navigation.NavDestination import androidx.navigation.compose.NavHost import androidx.navigation.compose.composable import androidx.navigation.compose.rememberNavController @@ -29,6 +30,8 @@ import io.github.zyrouge.symphony.ui.view.settings.PlayerSettingsView import io.github.zyrouge.symphony.ui.view.settings.PlayerSettingsViewRoute import io.github.zyrouge.symphony.ui.view.settings.UpdateSettingsView import io.github.zyrouge.symphony.ui.view.settings.UpdateSettingsViewRoute +import kotlinx.serialization.ExperimentalSerializationApi +import kotlinx.serialization.serializer @Composable fun BaseView(symphony: Symphony, activity: MainActivity) { @@ -48,7 +51,22 @@ fun BaseView(symphony: Symphony, activity: MainActivity) { startDestination = HomeViewRoute, ) { composable( - enterTransition = { FadeTransition.enterTransition() }, + popEnterTransition = { + when { + initialState.destination.isRoute() -> FadeTransition.enterTransition() + initialState.destination.isRoute() -> FadeTransition.enterTransition() + else -> SlideTransition.slideRight.enterTransition() + } + }, + popExitTransition = { SlideTransition.slideRight.exitTransition() }, + enterTransition = { SlideTransition.slideLeft.enterTransition() }, + exitTransition = { + when { + targetState.destination.isRoute() -> ScaleTransition.scaleDown.exitTransition() + targetState.destination.isRoute() -> ScaleTransition.scaleDown.exitTransition() + else -> SlideTransition.slideLeft.exitTransition() + } + }, ) { HomeView(context) } @@ -68,13 +86,13 @@ fun BaseView(symphony: Symphony, activity: MainActivity) { } composable( enterTransition = { SlideTransition.slideLeft.enterTransition() }, - exitTransition = { FadeTransition.exitTransition() }, + exitTransition = { SlideTransition.slideRight.exitTransition() }, ) { backStackEntry -> ArtistView(context, backStackEntry.toRoute()) } composable( enterTransition = { SlideTransition.slideLeft.enterTransition() }, - exitTransition = { FadeTransition.exitTransition() }, + exitTransition = { SlideTransition.slideRight.exitTransition() }, ) { backStackEntry -> AlbumView(context, backStackEntry.toRoute()) } @@ -86,19 +104,19 @@ fun BaseView(symphony: Symphony, activity: MainActivity) { } composable( enterTransition = { SlideTransition.slideLeft.enterTransition() }, - exitTransition = { FadeTransition.exitTransition() }, + exitTransition = { SlideTransition.slideRight.exitTransition() }, ) { backStackEntry -> AlbumArtistView(context, backStackEntry.toRoute()) } composable( enterTransition = { SlideTransition.slideLeft.enterTransition() }, - exitTransition = { FadeTransition.exitTransition() }, + exitTransition = { SlideTransition.slideRight.exitTransition() }, ) { backStackEntry -> GenreView(context, backStackEntry.toRoute()) } composable( enterTransition = { SlideTransition.slideLeft.enterTransition() }, - exitTransition = { FadeTransition.exitTransition() }, + exitTransition = { SlideTransition.slideRight.exitTransition() }, ) { backStackEntry -> PlaylistView(context, backStackEntry.toRoute()) } @@ -109,50 +127,52 @@ fun BaseView(symphony: Symphony, activity: MainActivity) { LyricsView(context) } composable( - enterTransition = { ScaleTransition.scaleDown.enterTransition() }, - exitTransition = { ScaleTransition.scaleUp.exitTransition() }, + popEnterTransition = { SlideTransition.slideRight.enterTransition() }, + popExitTransition = { SlideTransition.slideRight.exitTransition() }, + enterTransition = { SlideTransition.slideLeft.enterTransition() }, + exitTransition = { SlideTransition.slideLeft.exitTransition() }, ) { backStackEntry -> SettingsView(context, backStackEntry.toRoute()) } composable( - enterTransition = { ScaleTransition.scaleDown.enterTransition() }, - exitTransition = { ScaleTransition.scaleUp.exitTransition() }, + enterTransition = { SlideTransition.slideLeft.enterTransition() }, + exitTransition = { SlideTransition.slideRight.exitTransition() }, ) { AppearanceSettingsView(context) } composable( - enterTransition = { ScaleTransition.scaleDown.enterTransition() }, - exitTransition = { ScaleTransition.scaleUp.exitTransition() }, + enterTransition = { SlideTransition.slideLeft.enterTransition() }, + exitTransition = { SlideTransition.slideRight.exitTransition() }, ) { backStackEntry -> GrooveSettingsView(context, backStackEntry.toRoute()) } composable( - enterTransition = { ScaleTransition.scaleDown.enterTransition() }, - exitTransition = { ScaleTransition.scaleUp.exitTransition() }, + enterTransition = { SlideTransition.slideLeft.enterTransition() }, + exitTransition = { SlideTransition.slideRight.exitTransition() }, ) { HomePageSettingsView(context) } composable( - enterTransition = { ScaleTransition.scaleDown.enterTransition() }, - exitTransition = { ScaleTransition.scaleUp.exitTransition() }, + enterTransition = { SlideTransition.slideLeft.enterTransition() }, + exitTransition = { SlideTransition.slideRight.exitTransition() }, ) { MiniPlayerSettingsView(context) } composable( - enterTransition = { ScaleTransition.scaleDown.enterTransition() }, - exitTransition = { ScaleTransition.scaleUp.exitTransition() }, + enterTransition = { SlideTransition.slideLeft.enterTransition() }, + exitTransition = { SlideTransition.slideRight.exitTransition() }, ) { NowPlayingSettingsView(context) } composable( - enterTransition = { ScaleTransition.scaleDown.enterTransition() }, - exitTransition = { ScaleTransition.scaleUp.exitTransition() }, + enterTransition = { SlideTransition.slideLeft.enterTransition() }, + exitTransition = { SlideTransition.slideRight.exitTransition() }, ) { PlayerSettingsView(context) } composable( - enterTransition = { ScaleTransition.scaleDown.enterTransition() }, - exitTransition = { ScaleTransition.scaleUp.exitTransition() }, + enterTransition = { SlideTransition.slideLeft.enterTransition() }, + exitTransition = { SlideTransition.slideRight.exitTransition() }, ) { UpdateSettingsView(context) } @@ -160,3 +180,7 @@ fun BaseView(symphony: Symphony, activity: MainActivity) { } } } + +@OptIn(ExperimentalSerializationApi::class) +private inline fun NavDestination.isRoute() = + route?.contains(serializer().descriptor.serialName) == true diff --git a/app/src/main/java/io/github/zyrouge/symphony/ui/view/Settings.kt b/app/src/main/java/io/github/zyrouge/symphony/ui/view/Settings.kt index 8afb3876..fa9cd184 100644 --- a/app/src/main/java/io/github/zyrouge/symphony/ui/view/Settings.kt +++ b/app/src/main/java/io/github/zyrouge/symphony/ui/view/Settings.kt @@ -225,7 +225,7 @@ fun SettingsView(context: ViewContext, route: SettingsViewRoute) { Icon(Icons.Filled.Home, null) }, title = { - Text(context.symphony.t.HomePage) + Text(context.symphony.t.Home) }, onClick = { context.navController.navigate(HomePageSettingsViewRoute) @@ -249,7 +249,7 @@ fun SettingsView(context: ViewContext, route: SettingsViewRoute) { Icon(Icons.Filled.MusicNote, null) }, title = { - Text(context.symphony.t.NowPlayingPage) + Text(context.symphony.t.NowPlaying) }, onClick = { context.navController.navigate(NowPlayingSettingsViewRoute) diff --git a/app/src/main/java/io/github/zyrouge/symphony/ui/view/settings/HomePageSettingsView.kt b/app/src/main/java/io/github/zyrouge/symphony/ui/view/settings/HomePageSettingsView.kt index 5187acea..41eb4ee3 100644 --- a/app/src/main/java/io/github/zyrouge/symphony/ui/view/settings/HomePageSettingsView.kt +++ b/app/src/main/java/io/github/zyrouge/symphony/ui/view/settings/HomePageSettingsView.kt @@ -154,7 +154,7 @@ fun HomePageSettingsView(context: ViewContext) { ) } } - SettingsSideHeading(context.symphony.t.Interface) + SettingsSideHeading(context.symphony.t.Home) SettingsMultiOptionTile( context, icon = { diff --git a/i18n/en.toml b/i18n/en.toml index e16b7492..baf96c10 100644 --- a/i18n/en.toml +++ b/i18n/en.toml @@ -241,5 +241,4 @@ MinimumBitrate = "Minimum bitrate" MaximumBitrate = "Maximum bitrate" Date = "Date" TotalSamples = "Total samples" -HomePage = "Home page" -NowPlayingPage = "Now playing page" +Home = "Home"