Add top navigation back in

cemrich · cemrich · commit dc02c99925d2 · 2025-12-11T16:55:06.000+01:00
diff --git a/app/src/main/java/de/christinecoenen/code/zapp/tv2/about/AboutScreen.kt b/app/src/main/java/de/christinecoenen/code/zapp/tv2/about/AboutScreen.kt
@@ -17,8 +17,15 @@ import androidx.tv.material3.Icon
 import androidx.tv.material3.MaterialTheme
 import androidx.tv.material3.Text
 import de.christinecoenen.code.zapp.R
+import de.christinecoenen.code.zapp.tv2.main.navigation.MainScreenLocation
 import de.christinecoenen.code.zapp.tv2.theme.AppTheme
 import de.christinecoenen.code.zapp.tv2.theme.TvScreenPreview
+import kotlinx.serialization.Serializable
+
+@Serializable
+data object AboutScreenLocation : MainScreenLocation(
+	titleResId = R.string.menu_about_short,
+)
 
 @TvScreenPreview
 @Composable
diff --git a/app/src/main/java/de/christinecoenen/code/zapp/tv2/live/LiveScreen.kt b/app/src/main/java/de/christinecoenen/code/zapp/tv2/live/LiveScreen.kt
@@ -15,10 +15,18 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.dp
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
+import de.christinecoenen.code.zapp.R
 import de.christinecoenen.code.zapp.app.livestream.ui.ProgramInfoViewModel
 import de.christinecoenen.code.zapp.models.channels.ChannelModel
+import de.christinecoenen.code.zapp.tv2.main.navigation.MainScreenLocation
+import kotlinx.serialization.Serializable
 import org.koin.androidx.compose.koinViewModel
 
+@Serializable
+data object LiveScreenLocation : MainScreenLocation(
+	titleResId = R.string.activity_main_tab_live,
+)
+
 @Composable
 fun LiveScreen(
 	liveScreenViewModel: LiveScreenViewModel = koinViewModel(),
diff --git a/app/src/main/java/de/christinecoenen/code/zapp/tv2/main/MainActivity.kt b/app/src/main/java/de/christinecoenen/code/zapp/tv2/main/MainActivity.kt
@@ -6,34 +6,40 @@ 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.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.lifecycle.viewmodel.navigation3.rememberViewModelStoreNavEntryDecorator
-import androidx.navigation3.runtime.NavKey
+import androidx.navigation3.runtime.NavEntry
 import androidx.navigation3.runtime.entryProvider
 import androidx.navigation3.runtime.rememberNavBackStack
 import androidx.navigation3.runtime.rememberSaveableStateHolderNavEntryDecorator
 import androidx.navigation3.ui.NavDisplay
 import androidx.tv.material3.MaterialTheme
 import de.christinecoenen.code.zapp.app.player.VideoInfo
+import de.christinecoenen.code.zapp.tv2.about.AboutScreen
+import de.christinecoenen.code.zapp.tv2.about.AboutScreenLocation
 import de.christinecoenen.code.zapp.tv2.live.LiveScreen
+import de.christinecoenen.code.zapp.tv2.live.LiveScreenLocation
+import de.christinecoenen.code.zapp.tv2.main.navigation.MainScreenLocation
+import de.christinecoenen.code.zapp.tv2.mediathek.MediaCenterLocation
+import de.christinecoenen.code.zapp.tv2.mediathek.MediaCenterScreen
 import de.christinecoenen.code.zapp.tv2.player.PlayerScreen
+import de.christinecoenen.code.zapp.tv2.player.PlayerScreenLocation
 import de.christinecoenen.code.zapp.tv2.theme.AppTheme
-import kotlinx.serialization.Serializable
 
 class MainActivity : ComponentActivity() {
 
-	// TODO: move to components and maybe rename those NavKeys
-	@Serializable
-	private data object LiveScreen : NavKey
-
-	@Serializable
-	private data class Player(val videoInfo: VideoInfo) : NavKey
-
 	override fun onCreate(savedInstanceState: Bundle?) {
 		super.onCreate(savedInstanceState)
 
 		setContent {
-			val backStack = rememberNavBackStack(LiveScreen)
+			val backStack = rememberNavBackStack(LiveScreenLocation)
+			val mainLocations = listOf(LiveScreenLocation, MediaCenterLocation, AboutScreenLocation)
+			var selectedMainLocation by remember { mutableStateOf(mainLocations.first()) }
 
 			AppTheme {
 				Box(
@@ -42,36 +48,71 @@ class MainActivity : ComponentActivity() {
 						.background(MaterialTheme.colorScheme.surface)
 				) {
 					NavDisplay(
+						modifier = Modifier.fillMaxSize(),
 						entryDecorators = listOf(
 							rememberSaveableStateHolderNavEntryDecorator(),
 							rememberViewModelStoreNavEntryDecorator()
 						),
 						backStack = backStack,
-						modifier = Modifier.fillMaxSize(),
 						entryProvider = entryProvider {
-							entry<LiveScreen> {
+							entry<LiveScreenLocation> {
 								LiveScreen(
 									onChannelClick = { channel ->
-										backStack.add(Player(VideoInfo.fromChannel(channel)))
+										backStack.add(
+											PlayerScreenLocation(VideoInfo.fromChannel(channel))
+										)
+									}
+								)
+							}
+
+							entry<MediaCenterLocation> {
+								MediaCenterScreen(
+									onShowSelected = { show ->
+										backStack.add(
+											PlayerScreenLocation(
+												// TODO: extend VideoInfo::fromShow
+												VideoInfo(title = show.title, url = show.videoUrl)
+											)
+										)
 									}
 								)
 							}
 
-							entry<Player> { key ->
+							entry<AboutScreenLocation> {
+								AboutScreen()
+							}
+
+							entry<PlayerScreenLocation> { key ->
 								PlayerScreen(videoInfo = key.videoInfo)
 							}
 
 							// TODO: add remaining screens
 						}
 					)
 
-					// TODO: add tab top navigation back in
-					/*TopNavigation(
-						selectedTabIndex = currentSelectedTabIndex,
-						onTabSelected = { index -> navigationViewModel.selectMainTab(index) },
-						tabStringIds = navigationViewModel.mainTabTitleResIds,
-						modifier = Modifier.align(Alignment.TopCenter)
-					)*/
+					// Show/hide main navigation based on backstack
+					NavDisplay(
+						modifier = Modifier.align(Alignment.TopCenter),
+						backStack = backStack,
+						entryProvider = { key ->
+							when (key) {
+								is MainScreenLocation -> NavEntry(key) {
+									TopNavigation(
+										locations = mainLocations,
+										selectedLocation = selectedMainLocation,
+										onLocationSelected = { location ->
+											selectedMainLocation = location
+											backStack.clear()
+											backStack.add(location)
+										},
+										modifier = Modifier.align(Alignment.TopCenter)
+									)
+								}
+
+								else -> NavEntry(key) {}
+							}
+						}
+					)
 				}
 			}
 		}
diff --git a/app/src/main/java/de/christinecoenen/code/zapp/tv2/main/TopNavigation.kt b/app/src/main/java/de/christinecoenen/code/zapp/tv2/main/TopNavigation.kt
@@ -19,61 +19,67 @@ import androidx.compose.ui.unit.dp
 import androidx.tv.material3.Tab
 import androidx.tv.material3.TabRow
 import androidx.tv.material3.Text
-import de.christinecoenen.code.zapp.R
+import de.christinecoenen.code.zapp.tv2.about.AboutScreenLocation
+import de.christinecoenen.code.zapp.tv2.live.LiveScreenLocation
+import de.christinecoenen.code.zapp.tv2.main.navigation.MainScreenLocation
+import de.christinecoenen.code.zapp.tv2.mediathek.MediaCenterLocation
 import de.christinecoenen.code.zapp.tv2.theme.AppTheme
 import de.christinecoenen.code.zapp.tv2.theme.TvPreview
 
 @TvPreview
 @Composable
 fun TopNavigation(
-    modifier: Modifier = Modifier,
-    tabStringIds: List<Int> = listOf(
-        R.string.app_name,
-        R.string.activity_main_tab_live
-    ),
-    selectedTabIndex: Int = 0,
-    onTabSelected: (index: Int) -> Unit = {}
+	modifier: Modifier = Modifier,
+	locations: List<MainScreenLocation> = listOf(
+		LiveScreenLocation,
+		MediaCenterLocation,
+		AboutScreenLocation
+	),
+	selectedLocation: MainScreenLocation = locations.first(),
+	onLocationSelected: (location: MainScreenLocation) -> Unit = {}
 ) {
-    AppTheme {
-        val focusRequester = remember { FocusRequester() }
-        var hasFocus by remember { mutableStateOf(false) }
+	AppTheme {
+		val focusRequester = remember { FocusRequester() }
+		val selectedTabIndex = locations.indexOf(selectedLocation)
+		var hasFocus by remember { mutableStateOf(false) }
 
-        BackHandler(selectedTabIndex != 0 || !hasFocus) {
-            onTabSelected(0)
-            focusRequester.requestFocus()
-        }
+		BackHandler(selectedTabIndex != 0 || !hasFocus) {
+			onLocationSelected(locations.first())
+			focusRequester.requestFocus()
+		}
 
-        LaunchedEffect(Unit) {
-            focusRequester.requestFocus()
-        }
+		// TODO: this seems to grap focus when navigating back from non main screen
+		LaunchedEffect(Unit) {
+			focusRequester.requestFocus()
+		}
 
-        TabRow(
-            selectedTabIndex = selectedTabIndex,
-            modifier = modifier
-                .padding(top = 32.dp, bottom = 16.dp)
-                .focusGroup()
-                .focusRestorer()
-                .onFocusChanged { hasFocus = it.hasFocus }
-        ) {
-            tabStringIds.forEachIndexed { index, tabResId ->
-                val isSelected = index == selectedTabIndex
+		TabRow(
+			selectedTabIndex = selectedTabIndex,
+			modifier = modifier
+				.padding(top = 32.dp, bottom = 16.dp)
+				.focusGroup()
+				.focusRestorer()
+				.onFocusChanged { hasFocus = it.hasFocus }
+		) {
+			locations.forEach { location ->
+				val isSelected = location == selectedLocation
 
-                Tab(
-                    selected = isSelected,
-                    onFocus = { onTabSelected(index) },
-                    modifier = Modifier
-                        .then(if (isSelected) Modifier.focusRequester(focusRequester) else Modifier)
-                ) {
-                    Text(
-                        text = stringResource(tabResId),
-                        modifier = Modifier
-                            .padding(
-                                horizontal = 16.dp,
-                                vertical = 10.dp
-                            )
-                    )
-                }
-            }
-        }
-    }
+				Tab(
+					selected = isSelected,
+					onFocus = { onLocationSelected(location) },
+					modifier = Modifier
+						.then(if (isSelected) Modifier.focusRequester(focusRequester) else Modifier)
+				) {
+					Text(
+						text = stringResource(location.titleResId),
+						modifier = Modifier
+							.padding(
+								horizontal = 16.dp,
+								vertical = 10.dp
+							)
+					)
+				}
+			}
+		}
+	}
 }
diff --git a/app/src/main/java/de/christinecoenen/code/zapp/tv2/main/navigation/MainScreenLocation.kt b/app/src/main/java/de/christinecoenen/code/zapp/tv2/main/navigation/MainScreenLocation.kt
@@ -0,0 +1,11 @@
+package de.christinecoenen.code.zapp.tv2.main.navigation
+
+import androidx.annotation.StringRes
+import androidx.navigation3.runtime.NavKey
+import kotlinx.serialization.Serializable
+
+@Serializable
+open class MainScreenLocation(
+	@StringRes
+	val titleResId: Int,
+) : NavKey
diff --git a/app/src/main/java/de/christinecoenen/code/zapp/tv2/mediathek/MediaCenterScreen.kt b/app/src/main/java/de/christinecoenen/code/zapp/tv2/mediathek/MediaCenterScreen.kt
@@ -16,10 +16,18 @@ import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.dp
 import androidx.paging.compose.collectAsLazyPagingItems
+import de.christinecoenen.code.zapp.R
 import de.christinecoenen.code.zapp.models.shows.MediathekShow
+import de.christinecoenen.code.zapp.tv2.main.navigation.MainScreenLocation
 import de.christinecoenen.code.zapp.tv2.theme.TvScreenPreview
+import kotlinx.serialization.Serializable
 import org.koin.androidx.compose.koinViewModel
 
+@Serializable
+data object MediaCenterLocation : MainScreenLocation(
+	titleResId = R.string.activity_main_tab_mediathek,
+)
+
 @TvScreenPreview
 @Composable
 fun MediaCenterScreen(
diff --git a/app/src/main/java/de/christinecoenen/code/zapp/tv2/player/PlayerScreen.kt b/app/src/main/java/de/christinecoenen/code/zapp/tv2/player/PlayerScreen.kt
@@ -15,10 +15,15 @@ import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.media3.ui.compose.PlayerSurface
+import androidx.navigation3.runtime.NavKey
 import de.christinecoenen.code.zapp.app.player.Player
 import de.christinecoenen.code.zapp.app.player.VideoInfo
+import kotlinx.serialization.Serializable
 import org.koin.compose.koinInject
 
+@Serializable
+data class PlayerScreenLocation(val videoInfo: VideoInfo) : NavKey
+
 @Composable
 fun PlayerScreen(
 	videoInfo: VideoInfo,
