refactor: fine tune page transitions

zyrouge · Nov 11, 2024 · 444c563 · 444c563
1 parent 64d1745
commit 444c563
Show file tree

Hide file tree

Showing 6 changed files with 68 additions and 47 deletions.
diff --git 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
@@ -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 <T> asTween(delayMillis: Int = 0, easing: Easing = FastOutSlowInEasing) =
         tween<T>(milliseconds, delayMillis, easing)
 }
 
-data class ScaleTransition(val enterScale: Float, val exitScale: Float) {
+class ScaleTransition(val enterScale: Float, val exitScale: Float) {
     fun enterTransition(
-        animationSpec: FiniteAnimationSpec<Float> = defaultAnimationSpec(),
-    ) = scaleIn(animationSpec, enterScale) + fadeIn()
+        fadeAnimationSpec: FiniteAnimationSpec<Float> = defaultAnimationSpec(),
+        scaleAnimationSpec: FiniteAnimationSpec<Float> = defaultAnimationSpec(),
+    ) = fadeIn(fadeAnimationSpec) + scaleIn(scaleAnimationSpec, enterScale)
 
     fun exitTransition(
-        animationSpec: FiniteAnimationSpec<Float> = defaultAnimationSpec(),
-    ) = scaleOut(animationSpec, exitScale) + fadeOut()
+        fadeAnimationSpec: FiniteAnimationSpec<Float> = defaultAnimationSpec(),
+        scaleAnimationSpec: FiniteAnimationSpec<Float> = 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<IntOffset> = defaultAnimationSpec(),
-    ) = slideIn(animationSpec) { enterOffset(it) } + fadeIn()
+        fadeAnimationSpec: FiniteAnimationSpec<Float> = defaultAnimationSpec(),
+        slideAnimationSpec: FiniteAnimationSpec<IntOffset> = defaultAnimationSpec(),
+    ) = fadeIn(fadeAnimationSpec) + slideIn(slideAnimationSpec) { enterOffset(it) }
 
     fun exitTransition(
-        animationSpec: FiniteAnimationSpec<IntOffset> = defaultAnimationSpec(),
-    ) = slideOut(animationSpec) { exitOffset(it) } + fadeOut()
+        fadeAnimationSpec: FiniteAnimationSpec<Float> = defaultAnimationSpec(),
+        slideAnimationSpec: FiniteAnimationSpec<IntOffset> = 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
@@ -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<HomeViewRoute>(
-                    enterTransition = { FadeTransition.enterTransition() },
+                    popEnterTransition = {
+                        when {
+                            initialState.destination.isRoute<NowPlayingViewRoute>() -> FadeTransition.enterTransition()
+                            initialState.destination.isRoute<SearchViewRoute>() -> FadeTransition.enterTransition()
+                            else -> SlideTransition.slideRight.enterTransition()
+                        }
+                    },
+                    popExitTransition = { SlideTransition.slideRight.exitTransition() },
+                    enterTransition = { SlideTransition.slideLeft.enterTransition() },
+                    exitTransition = {
+                        when {
+                            targetState.destination.isRoute<NowPlayingViewRoute>() -> ScaleTransition.scaleDown.exitTransition()
+                            targetState.destination.isRoute<SearchViewRoute>() -> ScaleTransition.scaleDown.exitTransition()
+                            else -> SlideTransition.slideLeft.exitTransition()
+                        }
+                    },
                 ) {
                     HomeView(context)
                 }
@@ -68,13 +86,13 @@ fun BaseView(symphony: Symphony, activity: MainActivity) {
                 }
                 composable<ArtistViewRoute>(
                     enterTransition = { SlideTransition.slideLeft.enterTransition() },
-                    exitTransition = { FadeTransition.exitTransition() },
+                    exitTransition = { SlideTransition.slideRight.exitTransition() },
                 ) { backStackEntry ->
                     ArtistView(context, backStackEntry.toRoute())
                 }
                 composable<AlbumViewRoute>(
                     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<AlbumArtistViewRoute>(
                     enterTransition = { SlideTransition.slideLeft.enterTransition() },
-                    exitTransition = { FadeTransition.exitTransition() },
+                    exitTransition = { SlideTransition.slideRight.exitTransition() },
                 ) { backStackEntry ->
                     AlbumArtistView(context, backStackEntry.toRoute())
                 }
                 composable<GenreViewRoute>(
                     enterTransition = { SlideTransition.slideLeft.enterTransition() },
-                    exitTransition = { FadeTransition.exitTransition() },
+                    exitTransition = { SlideTransition.slideRight.exitTransition() },
                 ) { backStackEntry ->
                     GenreView(context, backStackEntry.toRoute())
                 }
                 composable<PlaylistViewRoute>(
                     enterTransition = { SlideTransition.slideLeft.enterTransition() },
-                    exitTransition = { FadeTransition.exitTransition() },
+                    exitTransition = { SlideTransition.slideRight.exitTransition() },
                 ) { backStackEntry ->
                     PlaylistView(context, backStackEntry.toRoute())
                 }
@@ -109,54 +127,60 @@ fun BaseView(symphony: Symphony, activity: MainActivity) {
                     LyricsView(context)
                 }
                 composable<SettingsViewRoute>(
-                    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<AppearanceSettingsViewRoute>(
-                    enterTransition = { ScaleTransition.scaleDown.enterTransition() },
-                    exitTransition = { ScaleTransition.scaleUp.exitTransition() },
+                    enterTransition = { SlideTransition.slideLeft.enterTransition() },
+                    exitTransition = { SlideTransition.slideRight.exitTransition() },
                 ) {
                     AppearanceSettingsView(context)
                 }
                 composable<GrooveSettingsViewRoute>(
-                    enterTransition = { ScaleTransition.scaleDown.enterTransition() },
-                    exitTransition = { ScaleTransition.scaleUp.exitTransition() },
+                    enterTransition = { SlideTransition.slideLeft.enterTransition() },
+                    exitTransition = { SlideTransition.slideRight.exitTransition() },
                 ) { backStackEntry ->
                     GrooveSettingsView(context, backStackEntry.toRoute())
                 }
                 composable<HomePageSettingsViewRoute>(
-                    enterTransition = { ScaleTransition.scaleDown.enterTransition() },
-                    exitTransition = { ScaleTransition.scaleUp.exitTransition() },
+                    enterTransition = { SlideTransition.slideLeft.enterTransition() },
+                    exitTransition = { SlideTransition.slideRight.exitTransition() },
                 ) {
                     HomePageSettingsView(context)
                 }
                 composable<MiniPlayerSettingsViewRoute>(
-                    enterTransition = { ScaleTransition.scaleDown.enterTransition() },
-                    exitTransition = { ScaleTransition.scaleUp.exitTransition() },
+                    enterTransition = { SlideTransition.slideLeft.enterTransition() },
+                    exitTransition = { SlideTransition.slideRight.exitTransition() },
                 ) {
                     MiniPlayerSettingsView(context)
                 }
                 composable<NowPlayingSettingsViewRoute>(
-                    enterTransition = { ScaleTransition.scaleDown.enterTransition() },
-                    exitTransition = { ScaleTransition.scaleUp.exitTransition() },
+                    enterTransition = { SlideTransition.slideLeft.enterTransition() },
+                    exitTransition = { SlideTransition.slideRight.exitTransition() },
                 ) {
                     NowPlayingSettingsView(context)
                 }
                 composable<PlayerSettingsViewRoute>(
-                    enterTransition = { ScaleTransition.scaleDown.enterTransition() },
-                    exitTransition = { ScaleTransition.scaleUp.exitTransition() },
+                    enterTransition = { SlideTransition.slideLeft.enterTransition() },
+                    exitTransition = { SlideTransition.slideRight.exitTransition() },
                 ) {
                     PlayerSettingsView(context)
                 }
                 composable<UpdateSettingsViewRoute>(
-                    enterTransition = { ScaleTransition.scaleDown.enterTransition() },
-                    exitTransition = { ScaleTransition.scaleUp.exitTransition() },
+                    enterTransition = { SlideTransition.slideLeft.enterTransition() },
+                    exitTransition = { SlideTransition.slideRight.exitTransition() },
                 ) {
                     UpdateSettingsView(context)
                 }
             }
         }
     }
 }
+
+@OptIn(ExperimentalSerializationApi::class)
+private inline fun <reified T> NavDestination.isRoute() =
+    route?.contains(serializer<T>().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
@@ -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
@@ -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
@@ -241,5 +241,4 @@ MinimumBitrate = "Minimum bitrate"
 MaximumBitrate = "Maximum bitrate"
 Date = "Date"
 TotalSamples = "Total samples"
-HomePage = "Home page"
-NowPlayingPage = "Now playing page"
+Home = "Home"