Navigate to the corresponding episode On title click from player view

mr3y-the-programmer · Sep 5, 2024 · 8ae4225 · 8ae4225
1 parent 6f9a7cf
commit 8ae4225
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 8 deletions.
diff --git a/app/src/main/kotlin/com/mr3y/podcaster/ui/screens/HomeScreen.kt b/app/src/main/kotlin/com/mr3y/podcaster/ui/screens/HomeScreen.kt
@@ -56,6 +56,7 @@ import androidx.lifecycle.Lifecycle
 import androidx.lifecycle.compose.LifecycleStartEffect
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import androidx.navigation.NavDestination
+import androidx.navigation.NavDestination.Companion.hasRoute
 import androidx.navigation.NavDestination.Companion.hierarchy
 import androidx.navigation.NavGraph.Companion.findStartDestination
 import androidx.navigation.NavHostController
@@ -234,6 +235,22 @@ fun HomeScreen(
                                 onToggleFavoriteStatus = {
                                     appState.toggleEpisodeFavoriteStatus(isFavorite = it, episode = activeEpisode.episode)
                                 },
+                                onEpisodeClick = {
+                                    scope.launch { state.animateTo(PlayerViewState.Collapsed) }
+
+                                    val isOnExploreTab = currentDestination?.hierarchy?.any { it.route == createRoutePattern<Destinations.ExploreGraph>() } == true
+                                    if (!isOnExploreTab) {
+                                        navController.navigateToGraph(Destinations.ExploreGraph)
+                                    }
+                                    // Avoid having multiple copies of the same episode stacked on top of each other similar to `launchSingleTop`
+                                    // but the problem with `launchSingleTop` is it will prevent navigating to the same destination that has a different arguments
+                                    if (
+                                        currentDestination?.hasRoute(route = Destinations.EpisodeDetailsExploreGraph::class) == false ||
+                                        navBackStackEntry?.arguments?.getLong("id") != activeEpisode.episode.id
+                                        ) {
+                                        navController.navigate(Destinations.EpisodeDetailsExploreGraph(activeEpisode.episode.id, activeEpisode.episode.artworkUrl))
+                                    }
+                                },
                                 onBack = { scope.launch { state.animateTo(PlayerViewState.Collapsed) } },
                                 containerColor = containerColor,
                             )
@@ -313,13 +330,7 @@ private fun BottomBar(
                 selected = isSelected,
                 onClick = {
                     if (!isSelected) {
-                        navController.navigate(tab.destination) {
-                            popUpTo(navController.graph.findStartDestination().id) {
-                                saveState = true
-                            }
-                            launchSingleTop = true
-                            restoreState = true
-                        }
+                        navController.navigateToGraph(tab.destination)
                     } else if (currentDestination?.route !in bottomBarTabs.map { it.route }) {
                         currentDestination?.parent?.findStartDestination()?.id?.let {
                             navController.popBackStackOnce(it)
@@ -338,6 +349,16 @@ private fun BottomBar(
     }
 }
 
+private fun NavHostController.navigateToGraph(destinationGraph: Destinations) {
+    navigate(destinationGraph) {
+        popUpTo(graph.findStartDestination().id) {
+            saveState = true
+        }
+        launchSingleTop = true
+        restoreState = true
+    }
+}
+
 /**
  * Idempotent version of [NavHostController.popBackStack] function.
  */

diff --git a/app/src/main/kotlin/com/mr3y/podcaster/ui/screens/PlayerViewScreen.kt b/app/src/main/kotlin/com/mr3y/podcaster/ui/screens/PlayerViewScreen.kt
@@ -12,6 +12,8 @@ import androidx.compose.animation.slideOutHorizontally
 import androidx.compose.animation.togetherWith
 import androidx.compose.foundation.background
 import androidx.compose.foundation.basicMarquee
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
@@ -94,6 +96,7 @@ fun ExpandedPlayerView(
     onSeekToNext: () -> Unit,
     onSeekToPrevious: () -> Unit,
     onToggleFavoriteStatus: (Boolean) -> Unit,
+    onEpisodeClick: () -> Unit,
     onBack: () -> Unit,
     containerColor: Color,
     modifier: Modifier = Modifier,
@@ -137,6 +140,8 @@ fun ExpandedPlayerView(
                         modifier = Modifier
                             .size(360.dp),
                     )
+
+                    val strings = LocalStrings.current
                     Text(
                         text = targetEpisode.title,
                         color = MaterialTheme.colorScheme.onSurface,
@@ -145,9 +150,14 @@ fun ExpandedPlayerView(
                         maxLines = 3,
                         overflow = TextOverflow.Ellipsis,
                         textAlign = TextAlign.Center,
+                        modifier = Modifier.clickable(
+                            interactionSource = remember { MutableInteractionSource() },
+                            indication = null,
+                            onClickLabel = strings.navigate_to_episode_a11y_label(targetEpisode.title),
+                            onClick = onEpisodeClick
+                        )
                     )
 
-                    val strings = LocalStrings.current
                     Text(
                         text = if (playingStatus == PlayingStatus.Loading) {
                             strings.buffering_playback
@@ -445,6 +455,7 @@ fun ExpandedPlayerViewPreview(
             progress = 1150,
             onSeeking = {},
             onToggleFavoriteStatus = {},
+            onEpisodeClick = {},
             onBack = {},
             containerColor = MaterialTheme.colorScheme.surface,
             modifier = Modifier.fillMaxSize(),

diff --git a/ui/resources/src/main/kotlin/com/mr3y/podcaster/ui/resources/PodcasterEnStrings.kt b/ui/resources/src/main/kotlin/com/mr3y/podcaster/ui/resources/PodcasterEnStrings.kt
@@ -25,6 +25,7 @@ val EnStrings = PodcasterStrings(
     retry_label = "Retry",
     currently_playing = "Currently Playing",
     buffering_playback = "Buffering...",
+    navigate_to_episode_a11y_label = { "Navigate to $it details page" },
     search_for_podcast_placeholder = "Search for a podcast or add RSS Url",
     recent_searches_label = "Recent Searches",
     close_label = "CLOSE",

diff --git a/ui/resources/src/main/kotlin/com/mr3y/podcaster/ui/resources/PodcasterStrings.kt b/ui/resources/src/main/kotlin/com/mr3y/podcaster/ui/resources/PodcasterStrings.kt
@@ -20,6 +20,7 @@ data class PodcasterStrings(
     val retry_label: String,
     val currently_playing: String,
     val buffering_playback: String,
+    val navigate_to_episode_a11y_label: (String) -> String,
     val search_for_podcast_placeholder: String,
     val recent_searches_label: String,
     val close_label: String,