Add a navigation bar in the TV demo app

pillarbox-demo-shared/build.gradle.kts

@@ -37,4 +37,6 @@ android {
 dependencies {
     compileOnly(project(mapOf("path" to ":pillarbox-core-business")))
     implementation(libs.androidx.ktx)
+    implementation(platform(libs.androidx.compose.bom))
+    implementation(libs.androidx.compose.material.icons.extended)
 }

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

@@ -1,8 +1,8 @@
 /*
- * Copyright (c) 2022. SRG SSR. All rights reserved.
+ * Copyright (c) 2023. SRG SSR. All rights reserved.
  * License information is available from the LICENSE file.
  */
-package ch.srgssr.pillarbox.demo.ui
+package ch.srgssr.pillarbox.demo.shared.ui
 
 import androidx.annotation.StringRes
 import androidx.compose.material.icons.Icons
@@ -12,7 +12,7 @@ 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 ch.srgssr.pillarbox.demo.R
+import ch.srgssr.pillarbox.demo.shared.R
 
 /**
  * Home destinations

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

@@ -1,8 +1,8 @@
 /*
- * Copyright (c) 2022. SRG SSR. All rights reserved.
+ * Copyright (c) 2023. SRG SSR. All rights reserved.
  * License information is available from the LICENSE file.
  */
-package ch.srgssr.pillarbox.demo.ui
+package ch.srgssr.pillarbox.demo.shared.ui
 
 /**
  * Navigation stores all routes available

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

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?><!--
+  ~ Copyright (c) 2023. SRG SSR. All rights reserved.
+  ~ License information is available from the LICENSE file.
+  -->
+<resources>
+    <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>
+</resources>

pillarbox-demo-tv/build.gradle.kts

@@ -70,6 +70,7 @@ dependencies {
     implementation(libs.androidx.compose.material.icons.extended)
     implementation(libs.androidx.compose.ui)
     implementation(libs.androidx.compose.ui.tooling.preview)
+    implementation(libs.androidx.navigation.compose)
 
     // Compose for TV dependencies
     implementation(libs.androidx.tv.foundation)

pillarbox-demo-tv/src/main/AndroidManifest.xml

@@ -12,7 +12,6 @@
         android:required="false" />
 
     <application
-        android:name=".DemoTvApplication"
         android:allowBackup="true"
         android:banner="@mipmap/ic_launcher"
         android:icon="@mipmap/ic_launcher"

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

@@ -2,70 +2,96 @@
  * Copyright (c) 2023. SRG SSR. All rights reserved.
  * License information is available from the LICENSE file.
  */
-@file:OptIn(ExperimentalTvMaterial3Api::class)
-
 package ch.srgssr.pillarbox.demo.tv
 
 import android.os.Bundle
 import androidx.activity.ComponentActivity
 import androidx.activity.compose.setContent
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
-import androidx.compose.runtime.Composable
+import androidx.compose.runtime.CompositionLocalProvider
+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.graphics.RectangleShape
+import androidx.compose.ui.layout.onSizeChanged
+import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.unit.dp
-import androidx.tv.material3.Border
+import androidx.navigation.compose.rememberNavController
 import androidx.tv.material3.ExperimentalTvMaterial3Api
+import androidx.tv.material3.LocalContentColor
 import androidx.tv.material3.MaterialTheme
-import androidx.tv.material3.Surface
-import ch.srgssr.pillarbox.demo.shared.data.DemoItem
-import ch.srgssr.pillarbox.demo.tv.examples.ExamplesHome
-import ch.srgssr.pillarbox.demo.tv.player.PlayerActivity
+import ch.srgssr.pillarbox.demo.shared.ui.HomeDestination
+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
 
 /**
  * Main activity
  *
  * @constructor Create empty Main activity
  */
 class MainActivity : ComponentActivity() {
+    @OptIn(ExperimentalTvMaterial3Api::class)
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
+
         setContent {
-            MaterialTheme {
-                Surface(
-                    shape = RectangleShape,
-                    border = Border.None
+            PillarboxTheme {
+                Box(
+                    modifier = Modifier
+                        .fillMaxSize()
+                        .background(MaterialTheme.colorScheme.surface)
                 ) {
-                    MainView(
-                        modifier = Modifier
-                            .fillMaxSize()
-                            .padding(
-                                start = HorizontalPadding,
-                                end = HorizontalPadding,
-                                top = VerticalPadding,
-                            ),
-                        this@MainActivity::openPlayer
-                    )
+                    CompositionLocalProvider(
+                        LocalContentColor provides MaterialTheme.colorScheme.onSurface
+                    ) {
+                        Box {
+                            val density = LocalDensity.current
+                            val destinations = listOf(HomeDestination.Examples, HomeDestination.Lists)
+                            val navController = rememberNavController()
+
+                            var selectedDestination by remember { mutableStateOf(destinations[0]) }
+                            var topBarHeight by remember { mutableStateOf(0.dp) }
+
+                            TVDemoTopBar(
+                                destinations = destinations,
+                                selectedDestination = selectedDestination,
+                                modifier = Modifier
+                                    .onSizeChanged {
+                                        topBarHeight = with(density) { it.height.toDp() }
+                                    }
+                                    .padding(
+                                        horizontal = HorizontalPadding,
+                                        vertical = VerticalPadding
+                                    ),
+                                onDestinationSelected = {
+                                    selectedDestination = it
+
+                                    navController.navigate(it.route)
+                                }
+                            )
+
+                            TVDemoNavigation(
+                                navController = navController,
+                                startDestination = HomeDestination.Examples,
+                                modifier = Modifier
+                                    .fillMaxSize()
+                                    .padding(top = topBarHeight)
+                                    .padding(horizontal = HorizontalPadding)
+                            )
+                        }
+                    }
                 }
             }
         }
     }
 
-    private fun openPlayer(item: DemoItem) {
-        PlayerActivity.startPlayer(this, item)
-    }
-
-    @Composable
-    private fun MainView(
-        modifier: Modifier = Modifier,
-        onItemSelected: (DemoItem) -> Unit
-    ) {
-        ExamplesHome(modifier = modifier, onItemSelected = onItemSelected)
-    }
-
-    companion object {
-        private val HorizontalPadding = 32.dp
+    private companion object {
+        private val HorizontalPadding = 58.dp
         private val VerticalPadding = 16.dp
     }
 }

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

@@ -4,24 +4,20 @@
  */
 package ch.srgssr.pillarbox.demo.tv.examples
 
-import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
-import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
-import androidx.tv.foundation.ExperimentalTvFoundationApi
 import androidx.tv.foundation.PivotOffsets
 import androidx.tv.foundation.lazy.list.TvLazyColumn
 import androidx.tv.foundation.lazy.list.items
 import androidx.tv.material3.ExperimentalTvMaterial3Api
 import androidx.tv.material3.MaterialTheme
 import androidx.tv.material3.Surface
-import androidx.tv.material3.Text
 import ch.srgssr.pillarbox.demo.shared.data.DemoItem
 import ch.srgssr.pillarbox.demo.shared.data.Playlist
 import ch.srgssr.pillarbox.demo.tv.item.DemoItemView
@@ -34,7 +30,6 @@ import ch.srgssr.pillarbox.demo.tv.item.PlaylistHeader
  * @param onItemSelected
  * @receiver
  */
-@OptIn(ExperimentalTvFoundationApi::class, ExperimentalTvMaterial3Api::class)
 @Composable
 fun ExamplesHome(
     modifier: Modifier = Modifier,
@@ -57,16 +52,6 @@ fun ExamplesHome(
         pivotOffsets = PivotOffsets(0.5f, 0f),
         verticalArrangement = Arrangement.spacedBy(16.dp)
     ) {
-        stickyHeader {
-            Box(
-                modifier = Modifier
-                    .fillMaxWidth()
-                    .padding(bottom = 12.dp)
-                    .background(color = MaterialTheme.colorScheme.surface)
-            ) {
-                Text(text = "Samples", style = MaterialTheme.typography.displayMedium)
-            }
-        }
         for (playlist in listItems) {
             item {
                 PlaylistHeader(

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

@@ -4,7 +4,7 @@
  */
 package ch.srgssr.pillarbox.demo.tv.player
 
-import android.app.Activity
+import android.content.Context
 import android.content.Intent
 import android.os.Build
 import android.os.Bundle
@@ -85,7 +85,7 @@ class PlayerActivity : ComponentActivity() {
          * @param context
          * @param demoItem The item to play.
          */
-        fun startPlayer(context: Activity, demoItem: DemoItem) {
+        fun startPlayer(context: Context, demoItem: DemoItem) {
             val intent = Intent(context, PlayerActivity::class.java)
             intent.putExtra(ARG_ITEM, demoItem)
             context.startActivity(intent)

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

@@ -0,0 +1,52 @@
+/*
+ * Copyright (c) 2023. SRG SSR. All rights reserved.
+ * License information is available from the LICENSE file.
+ */
+package ch.srgssr.pillarbox.demo.tv.ui
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.res.stringResource
+import androidx.navigation.NavHostController
+import androidx.navigation.compose.NavHost
+import androidx.navigation.compose.composable
+import androidx.tv.material3.ExperimentalTvMaterial3Api
+import androidx.tv.material3.Text
+import ch.srgssr.pillarbox.demo.shared.ui.HomeDestination
+import ch.srgssr.pillarbox.demo.tv.examples.ExamplesHome
+import ch.srgssr.pillarbox.demo.tv.player.PlayerActivity
+
+/**
+ * The nav host of the demo app on TV.
+ *
+ * @param navController The [NavHostController] uses to navigate between screens.
+ * @param startDestination The start destination to display.
+ * @param modifier The [Modifier] to apply to the [NavHost].
+ */
+@Composable
+@OptIn(ExperimentalTvMaterial3Api::class)
+fun TVDemoNavigation(
+    navController: NavHostController,
+    startDestination: HomeDestination,
+    modifier: Modifier = Modifier,
+) {
+    NavHost(
+        navController = navController,
+        startDestination = startDestination.route,
+        modifier = modifier
+    ) {
+        composable(HomeDestination.Examples.route) {
+            val context = LocalContext.current
+
+            ExamplesHome(
+                onItemSelected = { PlayerActivity.startPlayer(context, it) }
+            )
+        }
+
+        composable(HomeDestination.Lists.route) {
+            // TODO Proper content will be created in https://github.com/SRGSSR/pillarbox-android/issues/293
+            Text(text = stringResource(HomeDestination.Lists.labelResId))
+        }
+    }
+}