Migrated to navigation
diff --git a/build.gradle b/build.gradle
index cb6383f..c4380b9 100644
--- a/build.gradle
+++ b/build.gradle
@@ -2,7 +2,7 @@
 
 buildscript {
   ext {
-    composeVersion = '1.0.0-alpha05'
+    composeVersion = '1.0.0-alpha06'
     kotlinVersion = '1.4.10'
     daggerVersion = '2.29.1'
   }
@@ -16,7 +16,7 @@
   }
   dependencies {
     classpath 'org.ajoberstar:grgit:1.9.3'
-    classpath 'com.android.tools.build:gradle:4.2.0-alpha14'
+    classpath 'com.android.tools.build:gradle:4.2.0-alpha15'
     classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlinVersion"
     classpath "org.jetbrains.kotlin:kotlin-android-extensions:$kotlinVersion"
     classpath 'org.ajoberstar:grgit:1.9.3'
diff --git a/sample-compose/build.gradle b/sample-compose/build.gradle
index 8a9b5d4..bcf8d44 100644
--- a/sample-compose/build.gradle
+++ b/sample-compose/build.gradle
@@ -64,14 +64,15 @@
   implementation "androidx.compose.material:material:$composeVersion"
   implementation "androidx.compose.material:material-icons-extended:$composeVersion"
   implementation "androidx.ui:ui-tooling:$composeVersion"
+  implementation "androidx.navigation:navigation-compose:1.0.0-alpha01"
   implementation 'androidx.lifecycle:lifecycle-runtime-ktx:2.3.0-beta01'
   implementation 'androidx.lifecycle:lifecycle-viewmodel-ktx:2.3.0-beta01'
 
   implementation "androidx.navigation:navigation-fragment-ktx:2.3.1"
   implementation "androidx.navigation:navigation-ui-ktx:2.3.1"
 
-  implementation 'org.jetbrains.kotlinx:kotlinx-coroutines-core:1.3.9'
-  implementation 'org.jetbrains.kotlinx:kotlinx-coroutines-android:1.3.9'
+  implementation 'org.jetbrains.kotlinx:kotlinx-coroutines-core:1.4.0'
+  implementation 'org.jetbrains.kotlinx:kotlinx-coroutines-android:1.4.0'
 
   implementation "com.google.dagger:dagger:$daggerVersion"
   kapt "com.google.dagger:dagger-compiler:$daggerVersion"
@@ -82,7 +83,7 @@
   implementation 'com.squareup.retrofit2:retrofit:2.9.0'
   implementation 'com.squareup.retrofit2:converter-moshi:2.9.0'
   implementation "dev.chrisbanes.accompanist:accompanist-coil:0.3.1"
-  implementation 'com.airbnb.android:mvrx:2.0.0-beta1'
+  implementation 'com.airbnb.android:mvrx:2.0.0-beta2'
 
   testImplementation 'junit:junit:4.13.1'
   androidTestImplementation 'androidx.test.ext:junit:1.1.2'
diff --git a/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/ComposeActivity.kt b/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/ComposeActivity.kt
index cc5005a..543c0c7 100644
--- a/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/ComposeActivity.kt
+++ b/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/ComposeActivity.kt
@@ -1,5 +1,124 @@
 package com.airbnb.lottie.sample.compose
 
+import android.os.Bundle
+import androidx.activity.ComponentActivity
+import androidx.annotation.DrawableRes
+import androidx.annotation.StringRes
 import androidx.appcompat.app.AppCompatActivity
+import androidx.compose.foundation.Text
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material.BottomNavigation
+import androidx.compose.material.BottomNavigationItem
+import androidx.compose.material.Icon
+import androidx.compose.material.Scaffold
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.Providers
+import androidx.compose.runtime.getValue
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.platform.ContextAmbient
+import androidx.compose.ui.platform.setContent
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.res.vectorResource
+import androidx.compose.ui.unit.dp
+import androidx.navigation.compose.KEY_ROUTE
+import androidx.navigation.compose.NavHost
+import androidx.navigation.compose.composable
+import androidx.navigation.compose.currentBackStackEntryAsState
+import androidx.navigation.compose.navigate
+import androidx.navigation.compose.rememberNavController
+import com.airbnb.lottie.compose.LottieAnimationSpec
+import com.airbnb.lottie.sample.compose.lottiefiles.LottieFilesPage
+import com.airbnb.lottie.sample.compose.player.PlayerPage
+import com.airbnb.lottie.sample.compose.preview.PreviewPage
+import com.airbnb.lottie.sample.compose.showcase.ShowcasePage
+import com.airbnb.lottie.sample.compose.ui.LottieTheme
+import com.airbnb.lottie.sample.compose.ui.Teal
+import com.airbnb.lottie.sample.compose.ui.toColorSafe
+import com.airbnb.lottie.sample.compose.utils.NavControllerAmbient
+import com.airbnb.lottie.sample.compose.utils.getBase64String
 
-class ComposeActivity : AppCompatActivity(R.layout.main_activity)
\ No newline at end of file
+class ComposeActivity : AppCompatActivity() {
+
+    override fun onCreate(savedInstanceState: Bundle?) {
+        super.onCreate(savedInstanceState)
+        setContent {
+            LottieScaffold()
+        }
+    }
+
+    @Composable
+    private fun LottieScaffold() {
+        val navController = rememberNavController()
+
+        Providers(
+            NavControllerAmbient provides navController,
+            BackPressedDispatcherAmbient provides (ContextAmbient.current as ComponentActivity).onBackPressedDispatcher
+        ) {
+            LottieTheme {
+                Scaffold(
+                    bottomBar = {
+                        BottomNavigation(
+                            backgroundColor = Color(0xFFF7F7F7),
+                            elevation = 8.dp,
+                            contentColor = Teal,
+                        ) {
+                            val navBackStackEntry by navController.currentBackStackEntryAsState()
+                            val currentRoute = navBackStackEntry?.arguments?.getString(KEY_ROUTE)
+
+                            BottomNavItemData.values().forEach { item ->
+                                BottomNavigationItem(
+                                    icon = { Icon(vectorResource(item.iconRes)) },
+                                    label = { Text(stringResource(item.labelRes)) },
+                                    selected = currentRoute == item.route.route,
+                                    onClick = {
+                                        if (currentRoute != item.route.route) {
+                                            navController.navigate(item.route.route)
+                                        }
+                                    },
+                                )
+                            }
+                        }
+                    }
+                ) { innerPadding ->
+                    Box(
+                        modifier = Modifier.padding(innerPadding)
+                    ) {
+                        NavHost(navController, startDestination = Route.Showcase.route) {
+                            composable(Route.Showcase.route, arguments = Route.Showcase.args) { ShowcasePage() }
+                            composable(Route.Preview.route, arguments = Route.Preview.args) { PreviewPage() }
+                            composable(Route.LottieFiles.route, arguments = Route.LottieFiles.args) { LottieFilesPage() }
+                            composable(Route.Learn.route, arguments = Route.Learn.args) { ShowcasePage() }
+                            composable(
+                                Route.Player.fullRoute,
+                                arguments = Route.Player.args
+                            ) { entry ->
+                                val arguments = entry.arguments ?: error("No arguments provided to ${Route.Player}")
+                                val spec = when {
+                                    arguments.containsKey("url") -> LottieAnimationSpec.Url(arguments.getBase64String("url") ?: error("url must be a string"))
+                                    arguments.containsKey("file") -> LottieAnimationSpec.File(arguments.getBase64String("file") ?: error("file must be a string"))
+                                    arguments.containsKey("asset") -> LottieAnimationSpec.Asset(arguments.getBase64String("asset") ?: error("asset must be a string"))
+                                    else -> error("You must specify a url, file, or asset")
+                                }
+                                val backgroundColor = when (arguments.containsKey("backgroundColor")) {
+                                    true -> arguments.getBase64String("backgroundColor").toColorSafe()
+                                    else -> null
+                                }
+                                PlayerPage(spec, backgroundColor)
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+
+    private enum class BottomNavItemData(val route: Route, @StringRes val iconRes: Int, @DrawableRes val labelRes: Int) {
+        Showcase(Route.Showcase, R.drawable.ic_showcase, R.string.bottom_tab_showcase),
+        Preview(Route.Preview, R.drawable.ic_device, R.string.bottom_tab_preview),
+        LottieFiles(Route.LottieFiles, R.drawable.ic_lottie_files, R.string.bottom_tab_lottie_files),
+        Learn(Route.Learn, R.drawable.ic_learn, R.string.bottom_tab_lottie_files),
+    }
+}
\ No newline at end of file
diff --git a/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/ComposeFragment.kt b/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/ComposeFragment.kt
deleted file mode 100644
index 4b19afc..0000000
--- a/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/ComposeFragment.kt
+++ /dev/null
@@ -1,113 +0,0 @@
-package com.airbnb.lottie.sample.compose
-
-import android.os.Bundle
-import android.view.LayoutInflater
-import android.view.View
-import android.view.ViewGroup
-import androidx.activity.ComponentActivity
-import androidx.annotation.DrawableRes
-import androidx.annotation.StringRes
-import androidx.compose.foundation.Icon
-import androidx.compose.foundation.Text
-import androidx.compose.foundation.clickable
-import androidx.compose.foundation.layout.*
-import androidx.compose.material.BottomAppBar
-import androidx.compose.material.Scaffold
-import androidx.compose.material.ripple.RippleIndication
-import androidx.compose.runtime.Composable
-import androidx.compose.runtime.Providers
-import androidx.compose.ui.Alignment
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.platform.ComposeView
-import androidx.compose.ui.platform.ContextAmbient
-import androidx.compose.ui.res.stringResource
-import androidx.compose.ui.res.vectorResource
-import androidx.compose.ui.text.TextStyle
-import androidx.compose.ui.unit.dp
-import androidx.compose.ui.unit.sp
-import androidx.fragment.app.Fragment
-import androidx.navigation.fragment.findNavController
-import com.airbnb.lottie.sample.compose.player.PlayerFragment
-import com.airbnb.lottie.sample.compose.ui.LottieTheme
-import com.airbnb.lottie.sample.compose.ui.Teal
-import com.airbnb.lottie.sample.compose.utils.NavControllerAmbient
-import com.airbnb.mvrx.asMavericksArgs
-
-abstract class ComposeFragment : Fragment() {
-    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
-        return ComposeView(requireContext()).apply {
-            setContent {
-                Providers(
-                    NavControllerAmbient provides findNavController(),
-                    BackPressedDispatcherAmbient provides (ContextAmbient.current as ComponentActivity).onBackPressedDispatcher
-                ) {
-                    LottieTheme {
-                        Scaffold(
-                            bottomBar = {
-                                BottomAppBar(
-                                    backgroundColor = Color(0xFFF7F7F7),
-                                    elevation = 8.dp,
-                                    contentColor = Teal,
-                                ) {
-                                    Row(
-                                        horizontalArrangement = Arrangement.SpaceAround,
-                                        modifier = Modifier.fillMaxWidth()
-                                    ) {
-                                        BottomBarButton(R.drawable.ic_showcase, R.string.bottom_tab_showcase) {
-                                            findNavController().navigate(R.id.showcase)
-                                        }
-
-                                        BottomBarButton(R.drawable.ic_lottie_files, R.string.bottom_tab_lottie_files) {
-                                            findNavController().navigate(R.id.lottie_files)
-                                        }
-                                        BottomBarButton(R.drawable.ic_device, R.string.bottom_tab_preview) {
-                                            // DO NOT SUBMIT
-                                            val args = PlayerFragment.Args.Url("https://assets4.lottiefiles.com/private_files/lf30_8xbh8fop.json")
-                                            findNavController().navigate(R.id.player, args.asMavericksArgs())
-//                                            findNavController().navigate(R.id.preview)
-                                        }
-                                        BottomBarButton(R.drawable.ic_learn, R.string.bottom_tab_learn) {
-                                        }
-                                    }
-                                }
-                            }
-                        ) { innerPadding ->
-                            Box(
-                                modifier = Modifier.padding(innerPadding)
-                            ) {
-                                root()
-                            }
-                        }
-                    }
-                }
-            }
-        }
-    }
-
-    @Composable
-    abstract fun root()
-
-
-    @Composable
-    private fun BottomBarButton(@DrawableRes iconRes: Int, @StringRes labelRes: Int, onClick: () -> Unit) {
-        Column(
-            modifier = Modifier
-                .clickable(
-                    onClick = onClick,
-                    indication = RippleIndication(bounded = false)
-                )
-                .padding(6.dp)
-        ) {
-            Icon(
-                vectorResource(iconRes),
-                modifier = Modifier
-                    .align(Alignment.CenterHorizontally)
-            )
-            Text(
-                stringResource(labelRes),
-                style = TextStyle(fontSize = 12.sp)
-            )
-        }
-    }
-}
diff --git a/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/Route.kt b/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/Route.kt
new file mode 100644
index 0000000..96bab82
--- /dev/null
+++ b/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/Route.kt
@@ -0,0 +1,51 @@
+package com.airbnb.lottie.sample.compose
+
+import android.util.Base64
+import androidx.navigation.compose.NamedNavArgument
+import androidx.navigation.compose.navArgument
+import java.net.URLEncoder
+
+sealed class Route(val route: String, val args: List<NamedNavArgument> = emptyList()) {
+    object Showcase : Route("showcase")
+
+    object Preview : Route("preview")
+
+    object LottieFiles : Route("lottiefiles")
+
+    object Learn : Route("learn")
+
+    object Player : Route(
+        "player",
+        listOf(
+            navArgument("url") {
+                androidx.navigation.NavType.StringType
+                nullable = true
+            },
+            navArgument("file") {
+                androidx.navigation.NavType.StringType
+                nullable = true
+            },
+            navArgument("asset") {
+                androidx.navigation.NavType.StringType
+                nullable = true
+            },
+            navArgument("backgroundColor") {
+                androidx.navigation.NavType.StringType
+                nullable = true
+            },
+        )
+    ) {
+        val fullRoute = "$route?url={url}&file={file}&asset={asset}&backgroundColor={backgroundColor}"
+
+        fun forUrl(url: String, backgroundColor: String?) = when (backgroundColor) {
+            null -> "${route}?url=${url.toBase64()}"
+            else -> "${route}?url=${url.toBase64()}&backgroundColor=${backgroundColor.toBase64()}"
+        }
+
+        fun forFile(file: String) = "${route}?file=$file"
+
+        fun forAsset(asset: String) = "${route}?asset=$asset"
+    }
+}
+
+private fun String.toBase64() = Base64.encodeToString(toByteArray(), Base64.NO_PADDING or Base64.NO_WRAP or Base64.URL_SAFE)
\ No newline at end of file
diff --git a/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/composables/AnimationRow.kt b/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/composables/AnimationRow.kt
index 86027d9..34ed88d 100644
--- a/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/composables/AnimationRow.kt
+++ b/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/composables/AnimationRow.kt
@@ -15,6 +15,7 @@
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
+import com.airbnb.lottie.sample.compose.utils.drawTopBorder
 import dev.chrisbanes.accompanist.coil.CoilImage
 
 @Composable
@@ -25,7 +26,8 @@
     onClick: () -> Unit
 ) {
     Surface(
-        modifier = Modifier.clickable(onClick = onClick)
+        modifier = Modifier
+            .clickable(onClick = onClick)
     ) {
         Row(
             verticalAlignment = Alignment.CenterVertically,
diff --git a/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/lottiefiles/LottieFilesPage.kt b/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/lottiefiles/LottieFilesPage.kt
index 6545d54..f6faeb1 100644
--- a/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/lottiefiles/LottieFilesPage.kt
+++ b/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/lottiefiles/LottieFilesPage.kt
@@ -15,18 +15,9 @@
 import androidx.compose.ui.platform.DensityAmbient
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
-import com.airbnb.lottie.sample.compose.ComposeFragment
 import com.airbnb.lottie.sample.compose.R
 import com.airbnb.lottie.sample.compose.composables.Marquee
 
-class LottieFilesFragment : ComposeFragment() {
-
-    @Composable
-    override fun root() {
-        LottieFilesPage()
-    }
-}
-
 enum class LottieFilesTab(@StringRes val stringRes: Int) {
     Recent(R.string.tab_recent),
     Popular(R.string.tab_popular),
diff --git a/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/lottiefiles/LottieFilesRecentsAndPopularPage.kt b/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/lottiefiles/LottieFilesRecentsAndPopularPage.kt
index 1630121..e0c223b 100644
--- a/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/lottiefiles/LottieFilesRecentsAndPopularPage.kt
+++ b/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/lottiefiles/LottieFilesRecentsAndPopularPage.kt
@@ -1,12 +1,12 @@
 package com.airbnb.lottie.sample.compose.lottiefiles
 
 import android.util.Log
-import androidx.compose.foundation.Icon
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.LazyColumnForIndexed
 import androidx.compose.material.FloatingActionButton
+import androidx.compose.material.Icon
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Repeat
 import androidx.compose.runtime.Composable
@@ -16,18 +16,17 @@
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.unit.dp
-import com.airbnb.lottie.sample.compose.R
+import androidx.navigation.compose.navigate
+import com.airbnb.lottie.sample.compose.Route
 import com.airbnb.lottie.sample.compose.api.AnimationDataV2
 import com.airbnb.lottie.sample.compose.api.LottieFilesApi
 import com.airbnb.lottie.sample.compose.composables.AnimationRow
 import com.airbnb.lottie.sample.compose.dagger.AssistedViewModelFactory
 import com.airbnb.lottie.sample.compose.dagger.DaggerMvRxViewModelFactory
-import com.airbnb.lottie.sample.compose.player.PlayerFragment
 import com.airbnb.lottie.sample.compose.utils.findNavController
 import com.airbnb.lottie.sample.compose.utils.mavericksViewModelAndState
 import com.airbnb.mvrx.MavericksState
 import com.airbnb.mvrx.MavericksViewModel
-import com.airbnb.mvrx.asMavericksArgs
 import com.squareup.inject.assisted.Assisted
 import com.squareup.inject.assisted.AssistedInject
 import kotlinx.coroutines.Dispatchers
@@ -108,9 +107,7 @@
         state,
         viewModel::fetchNextPage,
         onAnimationClicked = { data ->
-            Log.d("Gabe", data.file)
-            val args = PlayerFragment.Args.Url(data.file, backgroundColorStr = data.bg_color)
-            navController.navigate(R.id.player, args.asMavericksArgs())
+            navController.navigate(Route.Player.forUrl(data.file, backgroundColor = data.bg_color))
         }
     )
 }
diff --git a/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/lottiefiles/LottieFilesSearchPage.kt b/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/lottiefiles/LottieFilesSearchPage.kt
index 68b55a1..f0ca565 100644
--- a/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/lottiefiles/LottieFilesSearchPage.kt
+++ b/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/lottiefiles/LottieFilesSearchPage.kt
@@ -1,34 +1,36 @@
 package com.airbnb.lottie.sample.compose.lottiefiles
 
 import android.util.Log
-import androidx.compose.foundation.Icon
 import androidx.compose.foundation.Text
-import androidx.compose.foundation.layout.*
-import androidx.compose.foundation.lazy.LazyColumnFor
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.LazyColumnForIndexed
 import androidx.compose.material.FloatingActionButton
+import androidx.compose.material.Icon
 import androidx.compose.material.Surface
 import androidx.compose.material.TextField
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Repeat
-import androidx.compose.runtime.*
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.onActive
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.unit.dp
+import androidx.navigation.compose.navigate
 import androidx.ui.tooling.preview.Preview
-import com.airbnb.lottie.sample.compose.R
+import com.airbnb.lottie.sample.compose.Route
 import com.airbnb.lottie.sample.compose.api.AnimationDataV2
 import com.airbnb.lottie.sample.compose.api.LottieFilesApi
 import com.airbnb.lottie.sample.compose.composables.AnimationRow
 import com.airbnb.lottie.sample.compose.dagger.AssistedViewModelFactory
 import com.airbnb.lottie.sample.compose.dagger.DaggerMvRxViewModelFactory
-import com.airbnb.lottie.sample.compose.player.PlayerFragment
 import com.airbnb.lottie.sample.compose.utils.findNavController
 import com.airbnb.lottie.sample.compose.utils.mavericksViewModelAndState
 import com.airbnb.mvrx.MavericksState
 import com.airbnb.mvrx.MavericksViewModel
-import com.airbnb.mvrx.asMavericksArgs
 import com.squareup.inject.assisted.Assisted
 import com.squareup.inject.assisted.AssistedInject
 import kotlinx.coroutines.Dispatchers
@@ -115,8 +117,7 @@
         viewModel::setQuery,
         viewModel::fetchNextPage,
         onAnimationClicked = { data ->
-            val args = PlayerFragment.Args.Url(data.file, backgroundColorStr = data.bg_color)
-            navController.navigate(R.id.player, args.asMavericksArgs())
+            navController.navigate(Route.Player.forUrl(data.file, backgroundColor = data.bg_color))
         }
     )
 }
diff --git a/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/player/PlayerPage.kt b/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/player/PlayerPage.kt
index 27bfc84..2246bfb 100644
--- a/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/player/PlayerPage.kt
+++ b/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/player/PlayerPage.kt
@@ -1,21 +1,46 @@
 package com.airbnb.lottie.sample.compose.player
 
-import android.os.Parcelable
 import androidx.activity.OnBackPressedDispatcher
-import androidx.compose.foundation.Icon
 import androidx.compose.foundation.ScrollableColumn
 import androidx.compose.foundation.ScrollableRow
 import androidx.compose.foundation.Text
 import androidx.compose.foundation.background
 import androidx.compose.foundation.border
 import androidx.compose.foundation.clickable
-import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxHeight
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.heightIn
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.preferredSize
+import androidx.compose.foundation.layout.preferredWidth
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.material.*
+import androidx.compose.material.Icon
+import androidx.compose.material.IconButton
+import androidx.compose.material.Scaffold
+import androidx.compose.material.Surface
+import androidx.compose.material.TopAppBar
 import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.filled.*
-import androidx.compose.runtime.*
+import androidx.compose.material.icons.filled.Close
+import androidx.compose.material.icons.filled.Pause
+import androidx.compose.material.icons.filled.PlayArrow
+import androidx.compose.material.icons.filled.RemoveRedEye
+import androidx.compose.material.icons.filled.Repeat
+import androidx.compose.material.rememberScaffoldState
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedTask
+import androidx.compose.runtime.MutableState
+import androidx.compose.runtime.Providers
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
@@ -29,56 +54,26 @@
 import androidx.compose.ui.window.Dialog
 import androidx.ui.tooling.preview.Preview
 import com.airbnb.lottie.LottieComposition
-import com.airbnb.lottie.compose.*
+import com.airbnb.lottie.compose.LottieAnimation
+import com.airbnb.lottie.compose.LottieAnimationSpec
+import com.airbnb.lottie.compose.LottieAnimationState
+import com.airbnb.lottie.compose.LottieCompositionResult
+import com.airbnb.lottie.compose.rememberLottieAnimationState
+import com.airbnb.lottie.compose.rememberLottieComposition
 import com.airbnb.lottie.sample.compose.BackPressedDispatcherAmbient
-import com.airbnb.lottie.sample.compose.ComposeFragment
 import com.airbnb.lottie.sample.compose.R
 import com.airbnb.lottie.sample.compose.composables.DebouncedCircularProgressIndicator
 import com.airbnb.lottie.sample.compose.composables.SeekBar
 import com.airbnb.lottie.sample.compose.ui.Teal
-import com.airbnb.lottie.sample.compose.ui.toColorSafe
 import com.airbnb.lottie.sample.compose.utils.drawTopBorder
 import com.airbnb.lottie.sample.compose.utils.maybeBackground
 import com.airbnb.lottie.sample.compose.utils.maybeDrawBorder
 import com.airbnb.lottie.sample.compose.utils.quantityStringResource
-import com.airbnb.mvrx.args
-import kotlinx.android.parcel.Parcelize
 import kotlin.math.ceil
 import kotlin.math.roundToInt
 
-class PlayerFragment : ComposeFragment() {
-    private val args: Args by args()
-
-    @Composable
-    override fun root() {
-        val spec = when (val a = args) {
-            is Args.Url -> LottieAnimationSpec.Url(a.url)
-            is Args.File -> LottieAnimationSpec.File(a.fileName)
-            is Args.Asset -> LottieAnimationSpec.Asset(a.assetName)
-        }
-        val backgroundColor = when (val a = args) {
-            is Args.Url -> a.backgroundColorStr?.toColorSafe()
-            else -> null
-        }
-
-        PlayerPage(spec, backgroundColor)
-    }
-
-    sealed class Args : Parcelable {
-        /** colorStr is the value from the LottieFiles API. */
-        @Parcelize
-        class Url(val url: String, val backgroundColorStr: String? = null) : Args()
-
-        @Parcelize
-        class File(val fileName: String) : Args()
-
-        @Parcelize
-        class Asset(val assetName: String) : Args()
-    }
-}
-
 @Composable
-private fun PlayerPage(
+fun PlayerPage(
     spec: LottieAnimationSpec,
     animationBackgroundColor: Color? = null,
 ) {
diff --git a/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/preview/PreviewPage.kt b/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/preview/PreviewPage.kt
index 2001563..6b4e27f 100644
--- a/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/preview/PreviewPage.kt
+++ b/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/preview/PreviewPage.kt
@@ -2,15 +2,24 @@
 
 import androidx.annotation.DrawableRes
 import androidx.annotation.StringRes
-import androidx.compose.foundation.Icon
 import androidx.compose.foundation.Text
 import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
-import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.preferredHeight
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.Divider
+import androidx.compose.material.Icon
 import androidx.compose.material.Surface
-import androidx.compose.runtime.*
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
@@ -20,20 +29,12 @@
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.window.Dialog
 import androidx.ui.tooling.preview.Preview
-import com.airbnb.lottie.sample.compose.ComposeFragment
 import com.airbnb.lottie.sample.compose.R
+import com.airbnb.lottie.sample.compose.Route
 import com.airbnb.lottie.sample.compose.composables.Marquee
-import com.airbnb.lottie.sample.compose.player.PlayerFragment
 import com.airbnb.lottie.sample.compose.ui.LottieTheme
 import com.airbnb.lottie.sample.compose.utils.findNavController
-import com.airbnb.mvrx.asMavericksArgs
-
-class PreviewFragment : ComposeFragment() {
-    @Composable
-    override fun root() {
-        PreviewPage()
-    }
-}
+import androidx.navigation.compose.navigate
 
 @Composable
 fun PreviewPage() {
@@ -60,8 +61,7 @@
         showingAssetsDialog,
         onDismiss = { showingAssetsDialog = false },
         onAssetSelected = { assetName ->
-            val args = PlayerFragment.Args.Asset(assetName)
-            navController.navigate(R.id.player, args.asMavericksArgs())
+            navController.navigate(Route.Player.forAsset(assetName))
         }
     )
 }
@@ -108,9 +108,13 @@
         ?: emptyList()
     Dialog(onDismissRequest = onDismiss) {
         Surface(
-            shape = RoundedCornerShape(4.dp)
+            shape = RoundedCornerShape(4.dp),
+
         ) {
-            Column {
+            Column(
+                modifier = Modifier
+                    .padding(horizontal = 12.dp)
+            ) {
                 assets.forEach { asset ->
                     AssetRow(asset, onClick = {
                         onDismiss()
diff --git a/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/showcase/ShowcasePage.kt b/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/showcase/ShowcasePage.kt
index 35c7cd2..e0ea77f 100644
--- a/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/showcase/ShowcasePage.kt
+++ b/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/showcase/ShowcasePage.kt
@@ -9,27 +9,17 @@
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
+import androidx.navigation.compose.navigate
 import androidx.ui.tooling.preview.Preview
-import com.airbnb.lottie.sample.compose.ComposeFragment
-import com.airbnb.lottie.sample.compose.R
+import com.airbnb.lottie.sample.compose.Route
 import com.airbnb.lottie.sample.compose.composables.AnimationRow
 import com.airbnb.lottie.sample.compose.composables.Loader
 import com.airbnb.lottie.sample.compose.composables.Marquee
-import com.airbnb.lottie.sample.compose.player.PlayerFragment
 import com.airbnb.lottie.sample.compose.ui.LottieTheme
 import com.airbnb.lottie.sample.compose.utils.findNavController
 import com.airbnb.lottie.sample.compose.utils.mavericksViewModelAndState
 import com.airbnb.mvrx.Loading
 import com.airbnb.mvrx.Uninitialized
-import com.airbnb.mvrx.asMavericksArgs
-
-class ShowcaseFragment : ComposeFragment() {
-    @Composable
-    override fun root() {
-        ShowcasePage()
-    }
-}
-
 
 @Composable
 fun ShowcasePage() {
@@ -50,8 +40,7 @@
                     previewUrl = data.preview_url ?: "",
                     previewBackgroundColor = data.bgColor,
                 ) {
-                    val args = PlayerFragment.Args.Url(data.file, backgroundColorStr = data.bg_color)
-                    navController.navigate(R.id.player, args.asMavericksArgs())
+                    navController.navigate(Route.Player.forUrl(data.file, backgroundColor = data.bg_color))
                 }
                 Divider(color = Color.LightGray)
             }
diff --git a/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/utils/ComposeExtensions.kt b/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/utils/ComposeExtensions.kt
index 0779495..94947c9 100644
--- a/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/utils/ComposeExtensions.kt
+++ b/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/utils/ComposeExtensions.kt
@@ -41,4 +41,3 @@
         this
     }
 }
-
diff --git a/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/utils/NavigationExtensions.kt b/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/utils/NavigationExtensions.kt
index 3c4dbcc..e9ef66c 100644
--- a/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/utils/NavigationExtensions.kt
+++ b/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/utils/NavigationExtensions.kt
@@ -1,10 +1,16 @@
 package com.airbnb.lottie.sample.compose.utils
 
+import android.os.Bundle
+import android.util.Base64
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.staticAmbientOf
 import androidx.navigation.NavController
+import java.nio.charset.Charset
+import java.nio.charset.StandardCharsets
 
 val NavControllerAmbient = staticAmbientOf<NavController> { error("You must specify a NavController.") }
 
 @Composable
 fun findNavController() = NavControllerAmbient.current
+
+fun Bundle.getBase64String(key: String) = String(Base64.decode(getString(key), Base64.DEFAULT), StandardCharsets.UTF_8)
diff --git a/sample-compose/src/main/res/layout/main_activity.xml b/sample-compose/src/main/res/layout/main_activity.xml
deleted file mode 100644
index 2fe4bdd..0000000
--- a/sample-compose/src/main/res/layout/main_activity.xml
+++ /dev/null
@@ -1,14 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
-    xmlns:app="http://schemas.android.com/apk/res-auto"
-    android:layout_width="match_parent"
-    android:layout_height="match_parent">
-
-    <androidx.fragment.app.FragmentContainerView
-        android:id="@+id/nav_host_fragment"
-        android:name="androidx.navigation.fragment.NavHostFragment"
-        android:layout_width="match_parent"
-        android:layout_height="match_parent"
-        app:defaultNavHost="true"
-        app:navGraph="@navigation/nav_graph" />
-</FrameLayout>
\ No newline at end of file
diff --git a/sample-compose/src/main/res/navigation/nav_graph.xml b/sample-compose/src/main/res/navigation/nav_graph.xml
deleted file mode 100644
index 0160016..0000000
--- a/sample-compose/src/main/res/navigation/nav_graph.xml
+++ /dev/null
@@ -1,22 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<navigation xmlns:android="http://schemas.android.com/apk/res/android"
-    xmlns:app="http://schemas.android.com/apk/res-auto"
-    android:id="@+id/nav_graph"
-    app:startDestination="@id/showcase">
-    <fragment
-        android:id="@+id/player"
-        android:name="com.airbnb.lottie.sample.compose.player.PlayerFragment" />
-
-    <fragment
-        android:id="@+id/showcase"
-        android:name="com.airbnb.lottie.sample.compose.showcase.ShowcaseFragment" />
-
-    <fragment
-        android:id="@+id/lottie_files"
-        android:name="com.airbnb.lottie.sample.compose.lottiefiles.LottieFilesFragment" />
-
-    <fragment
-        android:id="@+id/preview"
-        android:name="com.airbnb.lottie.sample.compose.preview.PreviewFragment" />
-
-</navigation>
\ No newline at end of file