Improve navigation in the TV demo app

gradle/libs.versions.toml

@@ -40,6 +40,7 @@ accompanist-systemuicontroller = { module = "com.google.accompanist:accompanist-
 androidx-activity-compose = { module = "androidx.activity:activity-compose", version.ref = "activityCompose" }
 androidx-lifecycle-viewmodel-compose = { module = "androidx.lifecycle:lifecycle-viewmodel-compose", version.ref = "lifecycleViewmodelCompose" }
 androidx-navigation-common = { module = "androidx.navigation:navigation-common", version.ref = "navigation" }
+androidx-navigation-runtime = { module = "androidx.navigation:navigation-runtime", version.ref = "navigation" }
 androidx-navigation-compose = { module = "androidx.navigation:navigation-compose", version.ref = "navigation" }
 androidx-paging-common = { module = "androidx.paging:paging-common", version.ref = "paging" }
 androidx-paging-compose = { module = "androidx.paging:paging-compose", version.ref = "paging" }

pillarbox-demo-shared/build.gradle.kts

@@ -39,6 +39,7 @@ dependencies {
     implementation(platform(libs.androidx.compose.bom))
     implementation(libs.androidx.compose.material.icons.extended)
     implementation(libs.androidx.navigation.common)
+    implementation(libs.androidx.navigation.runtime)
     implementation(libs.androidx.paging.common)
     implementation(libs.srg.dataprovider.paging)
     implementation(libs.srg.dataprovider.retrofit)

pillarbox-demo-shared/src/main/java/ch/srgssr/pillarbox/demo/shared/ui/HomeDestination.kt

@@ -7,11 +7,12 @@ package ch.srgssr.pillarbox.demo.shared.ui
 import androidx.annotation.StringRes
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Home
-import androidx.compose.material.icons.filled.Info
 import androidx.compose.material.icons.filled.Movie
 import androidx.compose.material.icons.filled.Search
 import androidx.compose.material.icons.filled.ViewList
 import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.navigation.NavController
+import androidx.navigation.NavGraph.Companion.findStartDestination
 import ch.srgssr.pillarbox.demo.shared.R
 
 /**
@@ -41,13 +42,29 @@ sealed class HomeDestination(
      */
     data object Lists : HomeDestination(NavigationRoutes.homeLists, R.string.lists, Icons.Default.ViewList)
 
-    /**
-     * Info home page
-     */
-    data object Info : HomeDestination(NavigationRoutes.homeInformation, R.string.info, Icons.Default.Info)
-
     /**
      * Info home page
      */
     data object Search : HomeDestination(NavigationRoutes.searchHome, R.string.search, Icons.Default.Search)
 }
+
+/**
+ * Navigate as a top level destination.
+ *
+ * @param destination The [HomeDestination] to navigate to.
+ */
+fun NavController.navigate(destination: HomeDestination) {
+    navigate(destination.route) {
+        // Pop up to the start destination of the graph to
+        // avoid building up a large stack of destinations
+        // on the back stack as users select items
+        popUpTo(graph.findStartDestination().id) {
+            saveState = true
+        }
+        // Avoid multiple copies of the same destination when
+        // reselecting the same item
+        launchSingleTop = true
+        // Restore state when reselecting a previously selected item
+        restoreState = true
+    }
+}

pillarbox-demo-shared/src/main/java/ch/srgssr/pillarbox/demo/shared/ui/NavigationRoutes.kt

@@ -12,7 +12,6 @@ object NavigationRoutes {
     const val homeSamples = "home_samples"
     const val homeSample = "home_sample"
     const val homeShowcases = "home_showcases"
-    const val homeInformation = "home_information"
     const val showcaseList = "showcase_list"
     const val story = "story"
     const val simplePlayer = "simple_player"

pillarbox-demo-shared/src/main/res/values/strings.xml

@@ -4,7 +4,6 @@
   -->
 <resources xmlns:xliff="urn:oasis:names:tc:xliff:document:1.2">
     <string name="examples">Examples</string>
-    <string name="info">Information</string>
     <string name="lists">Lists</string>
     <string name="search">Search</string>
     <string name="showcases">Showcases</string>

pillarbox-demo-tv/src/main/java/ch/srgssr/pillarbox/demo/tv/MainActivity.kt

@@ -7,23 +7,27 @@ package ch.srgssr.pillarbox.demo.tv
 import android.os.Bundle
 import androidx.activity.ComponentActivity
 import androidx.activity.compose.setContent
-import androidx.compose.animation.AnimatedVisibility
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
 import androidx.compose.runtime.CompositionLocalProvider
+import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.focus.FocusRequester
+import androidx.compose.ui.focus.focusRequester
 import androidx.compose.ui.unit.dp
+import androidx.navigation.compose.currentBackStackEntryAsState
 import androidx.navigation.compose.rememberNavController
 import androidx.tv.material3.ExperimentalTvMaterial3Api
 import androidx.tv.material3.LocalContentColor
 import androidx.tv.material3.MaterialTheme
 import ch.srgssr.pillarbox.demo.shared.ui.HomeDestination
+import ch.srgssr.pillarbox.demo.shared.ui.navigate
 import ch.srgssr.pillarbox.demo.tv.ui.TVDemoNavigation
 import ch.srgssr.pillarbox.demo.tv.ui.TVDemoTopBar
 import ch.srgssr.pillarbox.demo.tv.ui.theme.PillarboxTheme
@@ -50,36 +54,35 @@ class MainActivity : ComponentActivity() {
                     CompositionLocalProvider(
                         LocalContentColor provides MaterialTheme.colorScheme.onSurface
                     ) {
-                        val destinations = listOf(HomeDestination.Examples, HomeDestination.Lists)
+                        val destinations = listOf(HomeDestination.Examples, HomeDestination.Lists, HomeDestination.Search)
                         val navController = rememberNavController()
-                        val startDestination by remember(destinations) { mutableStateOf(destinations[0]) }
+                        val focusRequester = remember { FocusRequester() }
 
+                        val startDestination by remember(destinations) { mutableStateOf(destinations[0]) }
                         var selectedDestination by remember { mutableStateOf(startDestination) }
+                        val currentBackStackEntry by navController.currentBackStackEntryAsState()
 
-                        navController.addOnDestinationChangedListener { _, destination, _ ->
-                            destinations.find { it.route == destination.route }
-                                ?.takeIf { it != selectedDestination }
-                                ?.let { selectedDestination = it }
-                        }
-
-                        AnimatedVisibility(visible = selectedDestination != HomeDestination.Search) {
-                            TVDemoTopBar(
-                                destinations = destinations,
-                                selectedDestination = selectedDestination,
-                                modifier = Modifier.padding(vertical = MaterialTheme.paddings.baseline),
-                                onDestinationClick = { destination ->
-                                    selectedDestination = destination
-
-                                    navController.navigate(destination.route)
-                                }
-                            )
-                        }
+                        TVDemoTopBar(
+                            destinations = destinations,
+                            currentNavDestination = currentBackStackEntry?.destination,
+                            modifier = Modifier
+                                .padding(vertical = MaterialTheme.paddings.baseline)
+                                .focusRequester(focusRequester),
+                            onDestinationClick = { destination ->
+                                selectedDestination = destination
+                                navController.navigate(destination)
+                            }
+                        )
 
                         TVDemoNavigation(
                             navController = navController,
                             startDestination = startDestination,
                             modifier = Modifier.fillMaxSize()
                         )
+
+                        LaunchedEffect(Unit) {
+                            focusRequester.requestFocus()
+                        }
                     }
                 }
             }

pillarbox-demo-tv/src/main/java/ch/srgssr/pillarbox/demo/tv/examples/Examples.kt

@@ -16,6 +16,8 @@ import androidx.compose.runtime.derivedStateOf
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableIntStateOf
 import androidx.compose.runtime.remember
+import androidx.compose.runtime.rememberCoroutineScope
+import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.ExperimentalComposeUiApi
@@ -38,6 +40,7 @@ import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
+import androidx.navigation.NavHostController
 import androidx.navigation.NavType
 import androidx.navigation.compose.NavHost
 import androidx.navigation.compose.composable
@@ -46,6 +49,7 @@ import androidx.navigation.navArgument
 import androidx.tv.foundation.lazy.grid.TvGridCells
 import androidx.tv.foundation.lazy.grid.TvLazyVerticalGrid
 import androidx.tv.foundation.lazy.grid.itemsIndexed
+import androidx.tv.foundation.lazy.grid.rememberTvLazyGridState
 import androidx.tv.material3.Card
 import androidx.tv.material3.ExperimentalTvMaterial3Api
 import androidx.tv.material3.MaterialTheme
@@ -55,6 +59,7 @@ import ch.srgssr.pillarbox.demo.shared.data.Playlist
 import ch.srgssr.pillarbox.demo.shared.ui.NavigationRoutes
 import ch.srgssr.pillarbox.demo.tv.ui.theme.PillarboxTheme
 import ch.srgssr.pillarbox.demo.tv.ui.theme.paddings
+import kotlinx.coroutines.launch
 
 /**
  * Examples home
@@ -79,8 +84,9 @@ fun ExamplesHome(
     ) {
         composable(NavigationRoutes.homeSamples) {
             ExamplesSection(
-                modifier = modifier,
                 items = playlists,
+                focusFirstItem = false,
+                navController = navController,
                 onItemClick = { index, _ ->
                     navController.navigate("${NavigationRoutes.homeSample}/$index")
                 }
@@ -114,6 +120,8 @@ fun ExamplesHome(
             ExamplesSection(
                 title = playlist.title,
                 items = playlist.items,
+                focusFirstItem = true,
+                navController = navController,
                 onItemClick = { _, item ->
                     onItemSelected(item)
                 }
@@ -154,10 +162,14 @@ private fun <T> ExamplesSection(
     modifier: Modifier = Modifier,
     title: String? = null,
     items: List<T>,
+    focusFirstItem: Boolean,
+    navController: NavHostController,
     onItemClick: (index: Int, item: T) -> Unit,
     content: @Composable (item: T) -> Unit
 ) {
-    var focusedIndex by remember(items) { mutableIntStateOf(0) }
+    var focusedIndex by rememberSaveable(items, focusFirstItem) {
+        mutableIntStateOf(if (focusFirstItem) 0 else -1)
+    }
 
     val columnCount = 4
     val focusManager = LocalFocusManager.current
@@ -166,15 +178,7 @@ private fun <T> ExamplesSection(
     }
 
     Column(
-        modifier = modifier
-            .onPreviewKeyEvent {
-                if (it.key == Key.DirectionUp && it.type == KeyEventType.KeyDown && isOnFirstRow) {
-                    focusedIndex = -1
-                    focusManager.moveFocus(FocusDirection.Up)
-                } else {
-                    false
-                }
-            },
+        modifier = modifier,
         verticalArrangement = Arrangement.spacedBy(MaterialTheme.paddings.baseline)
     ) {
         if (title != null) {
@@ -184,9 +188,38 @@ private fun <T> ExamplesSection(
             )
         }
 
+        val coroutineScope = rememberCoroutineScope()
+        val scrollState = rememberTvLazyGridState()
+
         TvLazyVerticalGrid(
             columns = TvGridCells.Fixed(columnCount),
-            modifier = Modifier.focusRestorer(),
+            modifier = Modifier
+                .focusRestorer()
+                .onPreviewKeyEvent {
+                    if (it.key == Key.DirectionUp && it.type == KeyEventType.KeyDown && isOnFirstRow) {
+                        focusedIndex = -1
+                        focusManager.moveFocus(FocusDirection.Up)
+                    } else if (it.key == Key.Back && it.type == KeyEventType.KeyDown) {
+                        if (!isOnFirstRow) {
+                            focusedIndex = 0
+
+                            coroutineScope.launch {
+                                scrollState.animateScrollToItem(focusedIndex)
+                            }
+
+                            true
+                        } else if (navController.previousBackStackEntry == null) {
+                            focusedIndex = -1
+                            focusManager.moveFocus(FocusDirection.Up)
+                            true
+                        } else {
+                            false
+                        }
+                    } else {
+                        false
+                    }
+                },
+            state = scrollState,
             contentPadding = PaddingValues(vertical = MaterialTheme.paddings.baseline),
             verticalArrangement = Arrangement.spacedBy(MaterialTheme.paddings.baseline),
             horizontalArrangement = Arrangement.spacedBy(MaterialTheme.paddings.baseline)
@@ -195,10 +228,7 @@ private fun <T> ExamplesSection(
                 val focusRequester = remember { FocusRequester() }
 
                 Card(
-                    onClick = {
-                        focusedIndex = index
-                        onItemClick(index, item)
-                    },
+                    onClick = { onItemClick(index, item) },
                     modifier = Modifier
                         .height(104.dp)
                         .focusRequester(focusRequester)