refactor: migrate to compose navigation from voyager

Author: abdallahmehiz

app/build.gradle.kts

@@ -10,6 +10,7 @@ plugins {
   alias(libs.plugins.room)
   alias(libs.plugins.detekt)
   alias(libs.plugins.about.libraries)
+  alias(libs.plugins.kotlinx.serialization)
 }
 
 android {
@@ -47,6 +48,7 @@ android {
         getDefaultProguardFile("proguard-android-optimize.txt"),
         "proguard-rules.pro",
       )
+      signingConfig = signingConfigs.getByName("debug")
     }
     create("preview") {
       initWith(getByName("release"))
@@ -113,6 +115,7 @@ dependencies {
   implementation(libs.androidx.material3.android)
   implementation(libs.androidx.ui.tooling.preview)
   debugImplementation(libs.androidx.ui.tooling)
+  implementation(libs.navigation.compose)
   implementation(libs.androidx.appcompat)
   implementation(libs.androidx.compose.constraintlayout)
   implementation(libs.androidx.material3.icons.extended)
@@ -127,7 +130,6 @@ dependencies {
   implementation(libs.bundles.koin)
 
   implementation(libs.seeker)
-  implementation(libs.bundles.voyager)
   implementation(libs.compose.prefs)
   implementation(libs.bundles.about.libs)
   implementation(libs.simple.icons)
@@ -141,6 +143,7 @@ dependencies {
   detektPlugins(libs.detekt.formatter)
 
   implementation(libs.kotlinx.immutable.collections)
+  implementation(libs.kotlinx.serialization.json)
   implementation(libs.truetype.parser)
   implementation(libs.fsaf)
 }

app/src/main/AndroidManifest.xml

@@ -9,6 +9,7 @@
         android:allowBackup="true"
         android:appCategory="video"
         android:dataExtractionRules="@xml/data_extraction_rules"
+        android:enableOnBackInvokedCallback="true"
         android:fullBackupContent="@xml/backup_rules"
         android:icon="@mipmap/ic_launcher"
         android:label="@string/app_name"

app/src/main/java/live/mehiz/mpvkt/MainActivity.kt

@@ -5,17 +5,41 @@ import androidx.activity.ComponentActivity
 import androidx.activity.SystemBarStyle
 import androidx.activity.compose.setContent
 import androidx.activity.enableEdgeToEdge
+import androidx.compose.animation.core.tween
+import androidx.compose.animation.fadeIn
+import androidx.compose.animation.fadeOut
+import androidx.compose.animation.scaleIn
+import androidx.compose.animation.scaleOut
+import androidx.compose.animation.slideIn
+import androidx.compose.animation.slideOut
 import androidx.compose.foundation.isSystemInDarkTheme
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.runtime.getValue
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.TransformOrigin
 import androidx.compose.ui.graphics.toArgb
-import cafe.adriel.voyager.navigator.Navigator
-import cafe.adriel.voyager.transitions.SlideTransition
+import androidx.compose.ui.unit.IntOffset
+import androidx.navigation.compose.NavHost
+import androidx.navigation.compose.composable
+import androidx.navigation.compose.rememberNavController
+import androidx.navigation.toRoute
 import live.mehiz.mpvkt.preferences.AppearancePreferences
 import live.mehiz.mpvkt.preferences.preference.collectAsState
+import live.mehiz.mpvkt.ui.home.FilePickerScreen
 import live.mehiz.mpvkt.ui.home.HomeScreen
+import live.mehiz.mpvkt.ui.preferences.AboutScreen
+import live.mehiz.mpvkt.ui.preferences.AdvancedPreferencesScreen
+import live.mehiz.mpvkt.ui.preferences.AppearancePreferencesScreen
+import live.mehiz.mpvkt.ui.preferences.AudioPreferencesScreen
+import live.mehiz.mpvkt.ui.preferences.DecoderPreferencesScreen
+import live.mehiz.mpvkt.ui.preferences.GesturePreferencesScreen
+import live.mehiz.mpvkt.ui.preferences.PlayerPreferencesScreen
+import live.mehiz.mpvkt.ui.preferences.PreferencesScreen
+import live.mehiz.mpvkt.ui.preferences.SubtitlesPreferencesScreen
 import live.mehiz.mpvkt.ui.theme.DarkMode
 import live.mehiz.mpvkt.ui.theme.MpvKtTheme
+import live.mehiz.mpvkt.ui.utils.LocalNavController
 import org.koin.android.ext.android.inject
 
 class MainActivity : ComponentActivity() {
@@ -29,11 +53,48 @@ class MainActivity : ComponentActivity() {
       enableEdgeToEdge(
         SystemBarStyle.auto(
           lightScrim = Color.White.toArgb(),
-          darkScrim = Color.White.toArgb()
+          darkScrim = Color.White.toArgb(),
         ) { dark == DarkMode.Dark || (dark == DarkMode.System && isSystemInDarkTheme) },
       )
-      MpvKtTheme {
-        Navigator(HomeScreen) { SlideTransition(it) }
+      MpvKtTheme { Navigator() }
+    }
+  }
+
+  @Composable
+  fun Navigator() {
+    CompositionLocalProvider(LocalNavController provides rememberNavController()) {
+      NavHost(
+        LocalNavController.current,
+        startDestination = HomeScreen,
+        enterTransition = {
+          fadeIn(animationSpec = tween(220)) +
+            slideIn(animationSpec = tween(220)) { IntOffset(it.width / 2, 0) }
+        },
+        exitTransition = {
+          fadeOut(animationSpec = tween(220)) +
+            slideOut(animationSpec = tween(220)) { IntOffset(-it.width / 2, 0) }
+        },
+        popEnterTransition = {
+          fadeIn(animationSpec = tween(220)) +
+            scaleIn(animationSpec = tween(220, delayMillis = 30), initialScale = .9f, TransformOrigin(-1f, .5f))
+        },
+        popExitTransition = {
+          fadeOut(animationSpec = tween(220)) +
+            scaleOut(animationSpec = tween(220, delayMillis = 30), targetScale = .9f, TransformOrigin(-1f, .5f))
+        },
+      ) {
+        composable<HomeScreen> { HomeScreen.Content() }
+        composable<FilePickerScreen> { it.toRoute<FilePickerScreen>().Content() }
+
+        composable<AboutScreen> { AboutScreen.Content() }
+        composable<AdvancedPreferencesScreen> { AdvancedPreferencesScreen.Content() }
+        composable<AppearancePreferencesScreen> { AppearancePreferencesScreen.Content() }
+        composable<AudioPreferencesScreen> { AudioPreferencesScreen.Content() }
+        composable<DecoderPreferencesScreen> { DecoderPreferencesScreen.Content() }
+        composable<GesturePreferencesScreen> { DecoderPreferencesScreen.Content() }
+        composable<PlayerPreferencesScreen> { PlayerPreferencesScreen.Content() }
+        composable<PreferencesScreen> { PreferencesScreen.Content() }
+        composable<SubtitlesPreferencesScreen> { SubtitlesPreferencesScreen.Content() }
       }
     }
   }

app/src/main/java/live/mehiz/mpvkt/presentation/Screen.kt

@@ -1,8 +1,8 @@
 package live.mehiz.mpvkt.presentation
 
-import cafe.adriel.voyager.core.screen.Screen
-import cafe.adriel.voyager.core.screen.uniqueScreenKey
+import androidx.compose.runtime.Composable
 
-abstract class Screen : Screen {
-  final override val key = uniqueScreenKey
+interface Screen {
+  @Composable
+  fun Content()
 }

app/src/main/java/live/mehiz/mpvkt/ui/custombuttons/CustomButtonsScreen.kt

@@ -4,8 +4,6 @@ import androidx.compose.runtime.Composable
 import androidx.compose.runtime.collectAsState
 import androidx.compose.runtime.getValue
 import androidx.compose.ui.platform.LocalUriHandler
-import cafe.adriel.voyager.navigator.LocalNavigator
-import cafe.adriel.voyager.navigator.currentOrThrow
 import kotlinx.collections.immutable.toImmutableList
 import live.mehiz.mpvkt.database.entities.CustomButtonEntity
 import live.mehiz.mpvkt.preferences.PlayerPreferences
@@ -15,13 +13,14 @@ import live.mehiz.mpvkt.presentation.custombuttons.CustomButtonsScreen
 import live.mehiz.mpvkt.presentation.custombuttons.components.CustomButtonAddDialog
 import live.mehiz.mpvkt.presentation.custombuttons.components.CustomButtonDeleteDialog
 import live.mehiz.mpvkt.presentation.custombuttons.components.CustomButtonEditDialog
+import live.mehiz.mpvkt.ui.utils.LocalNavController
 import org.koin.compose.koinInject
 import org.koin.compose.viewmodel.koinViewModel
 
-object CustomButtonsScreen : Screen() {
+object CustomButtonsScreen : Screen {
   @Composable
   override fun Content() {
-    val navigator = LocalNavigator.currentOrThrow
+    val navigator = LocalNavController.current
     val uriHandler = LocalUriHandler.current
     val viewModel = koinViewModel<CustomButtonsScreenViewModel>()
     val playerPreferences = koinInject<PlayerPreferences>()
@@ -40,7 +39,7 @@ object CustomButtonsScreen : Screen() {
       onClickMoveUp = viewModel::moveUp,
       onClickMoveDown = viewModel::moveDown,
       onClickFaq = { uriHandler.openUri(CUSTOM_BUTTONS_DOC_URL) },
-      onNavigateBack = navigator::pop,
+      onNavigateBack = navigator::popBackStack,
     )
 
     when (dialog) {

app/src/main/java/live/mehiz/mpvkt/ui/home/FilePickerScreen.kt

@@ -40,18 +40,18 @@ import androidx.compose.ui.res.pluralStringResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
 import androidx.core.net.toUri
-import cafe.adriel.voyager.navigator.LocalNavigator
-import cafe.adriel.voyager.navigator.currentOrThrow
 import com.github.k1rakishou.fsaf.FileManager
 import com.github.k1rakishou.fsaf.file.AbstractFile
 import `is`.xyz.mpv.Utils
+import kotlinx.serialization.Serializable
 import live.mehiz.mpvkt.R
 import live.mehiz.mpvkt.presentation.Screen
 import live.mehiz.mpvkt.ui.player.audioExtensions
 import live.mehiz.mpvkt.ui.player.imageExtensions
 import live.mehiz.mpvkt.ui.player.videoExtensions
 import live.mehiz.mpvkt.ui.theme.spacing
 import live.mehiz.mpvkt.ui.utils.FilesComparator
+import live.mehiz.mpvkt.ui.utils.LocalNavController
 import org.koin.compose.koinInject
 import java.lang.Long.signum
 import java.text.StringCharacterIterator
@@ -60,20 +60,26 @@ import java.time.ZoneId
 import java.time.format.DateTimeFormatter
 import kotlin.math.abs
 
-data class FilePickerScreen(val uri: String) : Screen() {
+@Serializable
+data class FilePickerScreen(val uri: String) : Screen {
 
   @OptIn(ExperimentalMaterial3Api::class)
   @Composable
   override fun Content() {
-    val navigator = LocalNavigator.currentOrThrow
+    val navigator = LocalNavController.current
     val fileManager = koinInject<FileManager>()
     val context = LocalContext.current
     Scaffold(
       topBar = {
         TopAppBar(
           title = { Text(text = stringResource(id = R.string.home_pick_file)) },
           navigationIcon = {
-            IconButton(onClick = { navigator.replaceAll(HomeScreen) }) {
+            IconButton(
+              onClick = {
+                navigator.navigate(HomeScreen)
+                navigator.clearBackStack<HomeScreen>()
+              },
+            ) {
               Icon(Icons.AutoMirrored.Default.ArrowBack, null)
             }
           },
@@ -87,7 +93,7 @@ data class FilePickerScreen(val uri: String) : Screen() {
             HomeScreen.playFile(newFile.getFullPath(), context)
             return@FilePicker
           }
-          navigator.push(FilePickerScreen(newFile.getFullPath()))
+          navigator.navigate(FilePickerScreen(newFile.getFullPath()))
         },
         modifier = Modifier
           .fillMaxSize()
@@ -102,7 +108,7 @@ data class FilePickerScreen(val uri: String) : Screen() {
     modifier: Modifier = Modifier,
     onNavigate: (AbstractFile) -> Unit,
   ) {
-    val navigator = LocalNavigator.currentOrThrow
+    val navigator = LocalNavController.current
     val fileManager = koinInject<FileManager>()
     val fileList = fileManager.listFiles(directory).filterNot {
       !Utils.MEDIA_EXTENSIONS.contains(fileManager.getName(it).substringAfterLast('.')) &&
@@ -116,7 +122,7 @@ data class FilePickerScreen(val uri: String) : Screen() {
           isDirectory = true,
           lastModified = null,
           length = 0L,
-          onClick = { navigator.pop() },
+          onClick = { navigator.popBackStack() },
           modifier = Modifier.background(MaterialTheme.colorScheme.surfaceContainerLow),
         )
       }

app/src/main/java/live/mehiz/mpvkt/ui/home/HomeScreen.kt

@@ -37,28 +37,29 @@ import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.core.net.toUri
-import cafe.adriel.voyager.navigator.LocalNavigator
-import cafe.adriel.voyager.navigator.currentOrThrow
 import com.github.k1rakishou.fsaf.FileManager
 import `is`.xyz.mpv.Utils.PROTOCOLS
+import kotlinx.serialization.Serializable
 import live.mehiz.mpvkt.R
 import live.mehiz.mpvkt.presentation.Screen
 import live.mehiz.mpvkt.ui.player.PlayerActivity
 import live.mehiz.mpvkt.ui.preferences.PreferencesScreen
 import live.mehiz.mpvkt.ui.theme.spacing
+import live.mehiz.mpvkt.ui.utils.LocalNavController
 
-object HomeScreen : Screen() {
+@Serializable
+object HomeScreen : Screen {
   @OptIn(ExperimentalMaterial3Api::class)
   @Composable
   override fun Content() {
     val context = LocalContext.current
-    val navigator = LocalNavigator.currentOrThrow
+    val navigator = LocalNavController.current
     Scaffold(
       topBar = {
         TopAppBar(
           title = { Text(text = stringResource(id = R.string.app_name)) },
           actions = {
-            IconButton(onClick = { navigator.push(PreferencesScreen) }) {
+            IconButton(onClick = { navigator.navigate(PreferencesScreen) }) {
               Icon(Icons.Default.Settings, null)
             }
           },
@@ -130,7 +131,7 @@ object HomeScreen : Screen() {
           ActivityResultContracts.OpenDocumentTree(),
         ) {
           if (it == null) return@rememberLauncherForActivityResult
-          navigator.push(FilePickerScreen(fileManager.fromUri(it)!!.getFullPath()))
+          navigator.navigate(FilePickerScreen(fileManager.fromUri(it)!!.getFullPath()))
         }
         OutlinedButton(onClick = { directoryPicker.launch(null) }) {
           Row(

app/src/main/java/live/mehiz/mpvkt/ui/player/controls/PlayerControls.kt

@@ -57,7 +57,6 @@ import androidx.compose.ui.unit.LayoutDirection
 import androidx.compose.ui.unit.dp
 import androidx.constraintlayout.compose.ConstraintLayout
 import androidx.constraintlayout.compose.Dimension
-import cafe.adriel.voyager.navigator.currentOrThrow
 import `is`.xyz.mpv.MPVLib
 import `is`.xyz.mpv.Utils
 import kotlinx.collections.immutable.toImmutableList
@@ -493,7 +492,7 @@ fun PlayerControls(
             end.linkTo(seekbar.end)
           },
         ) {
-          val activity = LocalActivity.currentOrThrow as PlayerActivity
+          val activity = LocalActivity.current!! as PlayerActivity
           BottomRightPlayerControls(
             customButton = customButton,
             customButtonTitle = customButtonTitle,

app/src/main/java/live/mehiz/mpvkt/ui/preferences/AboutScreen.kt

@@ -30,32 +30,33 @@ import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.AnnotatedString
 import androidx.compose.ui.unit.dp
 import androidx.core.net.toUri
-import cafe.adriel.voyager.navigator.LocalNavigator
-import cafe.adriel.voyager.navigator.currentOrThrow
 import com.mikepenz.aboutlibraries.ui.compose.m3.LibrariesContainer
 import compose.icons.SimpleIcons
 import compose.icons.simpleicons.Github
+import kotlinx.serialization.Serializable
 import live.mehiz.mpvkt.BuildConfig
 import live.mehiz.mpvkt.R
 import live.mehiz.mpvkt.presentation.Screen
 import live.mehiz.mpvkt.presentation.crash.CrashActivity.Companion.collectDeviceInfo
 import live.mehiz.mpvkt.ui.theme.spacing
+import live.mehiz.mpvkt.ui.utils.LocalNavController
 import me.zhanghai.compose.preference.Preference
 import me.zhanghai.compose.preference.ProvidePreferenceLocals
 
-object AboutScreen : Screen() {
+@Serializable
+object AboutScreen : Screen {
   @OptIn(ExperimentalMaterial3Api::class)
   @Composable
   override fun Content() {
     val context = LocalContext.current
     val clipboard = LocalClipboardManager.current
-    val navigator = LocalNavigator.currentOrThrow
+    val navigator = LocalNavController.current
     Scaffold(
       topBar = {
         TopAppBar(
           title = { Text(text = stringResource(id = R.string.pref_about_title)) },
           navigationIcon = {
-            IconButton(onClick = { navigator.pop() }) {
+            IconButton(onClick = navigator::popBackStack) {
               Icon(imageVector = Icons.AutoMirrored.Default.ArrowBack, contentDescription = null)
             }
           },
@@ -102,7 +103,7 @@ object AboutScreen : Screen() {
           )
           Preference(
             title = { Text(text = stringResource(id = R.string.pref_about_oss_libraries)) },
-            onClick = { navigator.push(LibrariesScreen) },
+            onClick = { navigator.navigate(LibrariesScreen) },
           )
           Preference(
             title = { Text(text = stringResource(id = R.string.pref_about_privacy_policy)) },
@@ -135,17 +136,17 @@ object AboutScreen : Screen() {
   }
 }
 
-object LibrariesScreen : Screen() {
+object LibrariesScreen : Screen {
   @OptIn(ExperimentalMaterial3Api::class)
   @Composable
   override fun Content() {
-    val navigator = LocalNavigator.currentOrThrow
+    val navigator = LocalNavController.current
     Scaffold(
       topBar = {
         TopAppBar(
           title = { Text(text = stringResource(R.string.pref_about_oss_libraries)) },
           navigationIcon = {
-            IconButton(onClick = navigator::pop) {
+            IconButton(onClick = navigator::popBackStack) {
               Icon(imageVector = Icons.AutoMirrored.Default.ArrowBack, contentDescription = null)
             }
           },