Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Jetcaster] Refactor HomeContent to use grid only #1486

Merged
merged 5 commits into from
Oct 16, 2024
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
150 changes: 18 additions & 132 deletions Jetcaster/mobile/src/main/java/com/example/jetcaster/ui/home/Home.kt
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,6 @@ import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.layout.windowInsetsPadding
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.grid.GridCells
import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
import androidx.compose.foundation.pager.HorizontalPager
Expand Down Expand Up @@ -77,7 +76,6 @@ import androidx.compose.material3.adaptive.layout.PaneAdaptedValue
import androidx.compose.material3.adaptive.layout.PaneScaffoldDirective
import androidx.compose.material3.adaptive.layout.SupportingPaneScaffold
import androidx.compose.material3.adaptive.layout.SupportingPaneScaffoldRole
import androidx.compose.material3.adaptive.layout.ThreePaneScaffoldValue
import androidx.compose.material3.adaptive.navigation.ThreePaneScaffoldNavigator
import androidx.compose.material3.adaptive.navigation.rememberSupportingPaneScaffoldNavigator
import androidx.compose.material3.adaptive.occludingVerticalHingeBounds
Expand Down Expand Up @@ -156,15 +154,6 @@ data class HomeState(
private val HomeState.showHomeCategoryTabs: Boolean
get() = featuredPodcasts.isNotEmpty() && homeCategories.isNotEmpty()

@OptIn(ExperimentalMaterial3AdaptiveApi::class)
private fun HomeState.showGrid(
scaffoldValue: ThreePaneScaffoldValue
): Boolean = windowSizeClass.windowWidthSizeClass == WindowWidthSizeClass.EXPANDED ||
(
windowSizeClass.windowWidthSizeClass == WindowWidthSizeClass.MEDIUM &&
scaffoldValue[SupportingPaneScaffoldRole.Supporting] == PaneAdaptedValue.Hidden
)

@OptIn(ExperimentalMaterial3AdaptiveApi::class)
private fun <T> ThreePaneScaffoldNavigator<T>.isMainPaneHidden(): Boolean {
return scaffoldValue[SupportingPaneScaffoldRole.Main] == PaneAdaptedValue.Hidden
Expand Down Expand Up @@ -333,11 +322,9 @@ private fun HomeScreenReady(

Surface {
val podcastUri = navigator.currentDestination?.content
val showGrid = homeState.showGrid(navigator.scaffoldValue)
if (podcastUri.isNullOrEmpty()) {
HomeScreen(
homeState = homeState,
showGrid = showGrid,
modifier = Modifier.fillMaxSize()
)
} else {
Expand Down Expand Up @@ -365,7 +352,6 @@ private fun HomeScreenReady(
mainPane = {
HomeScreen(
homeState = homeState,
showGrid = showGrid,
modifier = Modifier.fillMaxSize()
)
},
Expand Down Expand Up @@ -446,7 +432,6 @@ private fun HomeScreenBackground(
@Composable
private fun HomeScreen(
homeState: HomeState,
showGrid: Boolean,
modifier: Modifier = Modifier
) {
// Effect that changes the home category selection when there are no subscribed podcasts
Expand Down Expand Up @@ -476,7 +461,6 @@ private fun HomeScreen(
// Main Content
val snackBarText = stringResource(id = R.string.episode_added_to_your_queue)
HomeContent(
showGrid = showGrid,
showHomeCategoryTabs = homeState.showHomeCategoryTabs,
featuredPodcasts = homeState.featuredPodcasts,
selectedHomeCategory = homeState.selectedHomeCategory,
Expand Down Expand Up @@ -505,7 +489,6 @@ private fun HomeScreen(

@Composable
private fun HomeContent(
showGrid: Boolean,
showHomeCategoryTabs: Boolean,
featuredPodcasts: PersistentList<PodcastInfo>,
selectedHomeCategory: HomeCategory,
Expand All @@ -532,120 +515,24 @@ private fun HomeContent(
}
}

// Note: ideally, `HomeContentColumn` and `HomeContentGrid` would be the same implementation
// (i.e. a grid). However, LazyVerticalGrid does not have the concept of a sticky header.
// So we are using two different composables here depending on the provided window size class.
// See: https://issuetracker.google.com/issues/231557184
if (showGrid) {
HomeContentGrid(
pagerState = pagerState,
showHomeCategoryTabs = showHomeCategoryTabs,
featuredPodcasts = featuredPodcasts,
selectedHomeCategory = selectedHomeCategory,
homeCategories = homeCategories,
filterableCategoriesModel = filterableCategoriesModel,
podcastCategoryFilterResult = podcastCategoryFilterResult,
library = library,
modifier = modifier,
onPodcastUnfollowed = onPodcastUnfollowed,
onHomeCategorySelected = onHomeCategorySelected,
onCategorySelected = onCategorySelected,
navigateToPodcastDetails = navigateToPodcastDetails,
navigateToPlayer = navigateToPlayer,
onTogglePodcastFollowed = onTogglePodcastFollowed,
onQueueEpisode = onQueueEpisode,
)
} else {
HomeContentColumn(
pagerState = pagerState,
showHomeCategoryTabs = showHomeCategoryTabs,
featuredPodcasts = featuredPodcasts,
selectedHomeCategory = selectedHomeCategory,
homeCategories = homeCategories,
filterableCategoriesModel = filterableCategoriesModel,
podcastCategoryFilterResult = podcastCategoryFilterResult,
library = library,
modifier = modifier,
onPodcastUnfollowed = onPodcastUnfollowed,
onHomeCategorySelected = onHomeCategorySelected,
onCategorySelected = onCategorySelected,
navigateToPodcastDetails = navigateToPodcastDetails,
navigateToPlayer = navigateToPlayer,
onTogglePodcastFollowed = onTogglePodcastFollowed,
onQueueEpisode = onQueueEpisode,
)
}
}

@OptIn(ExperimentalFoundationApi::class)
@Composable
private fun HomeContentColumn(
showHomeCategoryTabs: Boolean,
pagerState: PagerState,
featuredPodcasts: PersistentList<PodcastInfo>,
selectedHomeCategory: HomeCategory,
homeCategories: List<HomeCategory>,
filterableCategoriesModel: FilterableCategoriesModel,
podcastCategoryFilterResult: PodcastCategoryFilterResult,
library: LibraryInfo,
modifier: Modifier = Modifier,
onPodcastUnfollowed: (PodcastInfo) -> Unit,
onHomeCategorySelected: (HomeCategory) -> Unit,
onCategorySelected: (CategoryInfo) -> Unit,
navigateToPodcastDetails: (PodcastInfo) -> Unit,
navigateToPlayer: (EpisodeInfo) -> Unit,
onTogglePodcastFollowed: (PodcastInfo) -> Unit,
onQueueEpisode: (PlayerEpisode) -> Unit,
) {
LazyColumn(
modifier = modifier.fillMaxSize()
) {
if (featuredPodcasts.isNotEmpty()) {
item {
FollowedPodcastItem(
pagerState = pagerState,
items = featuredPodcasts,
onPodcastUnfollowed = onPodcastUnfollowed,
navigateToPodcastDetails = navigateToPodcastDetails,
modifier = Modifier
.fillMaxWidth()
)
}
}

if (showHomeCategoryTabs) {
item {
HomeCategoryTabs(
categories = homeCategories,
selectedCategory = selectedHomeCategory,
showHorizontalLine = true,
onCategorySelected = onHomeCategorySelected
)
}
}

when (selectedHomeCategory) {
HomeCategory.Library -> {
libraryItems(
library = library,
navigateToPlayer = navigateToPlayer,
onQueueEpisode = onQueueEpisode
)
}

HomeCategory.Discover -> {
discoverItems(
filterableCategoriesModel = filterableCategoriesModel,
podcastCategoryFilterResult = podcastCategoryFilterResult,
navigateToPodcastDetails = navigateToPodcastDetails,
navigateToPlayer = navigateToPlayer,
onCategorySelected = onCategorySelected,
onTogglePodcastFollowed = onTogglePodcastFollowed,
onQueueEpisode = onQueueEpisode
)
}
}
}
HomeContentGrid(
pagerState = pagerState,
showHomeCategoryTabs = showHomeCategoryTabs,
featuredPodcasts = featuredPodcasts,
selectedHomeCategory = selectedHomeCategory,
homeCategories = homeCategories,
filterableCategoriesModel = filterableCategoriesModel,
podcastCategoryFilterResult = podcastCategoryFilterResult,
library = library,
modifier = modifier,
onPodcastUnfollowed = onPodcastUnfollowed,
onHomeCategorySelected = onHomeCategorySelected,
onCategorySelected = onCategorySelected,
navigateToPodcastDetails = navigateToPodcastDetails,
navigateToPlayer = navigateToPlayer,
onTogglePodcastFollowed = onTogglePodcastFollowed,
onQueueEpisode = onQueueEpisode,
)
}

@Composable
Expand Down Expand Up @@ -952,7 +839,6 @@ private fun PreviewHome() {
)
HomeScreen(
homeState = homeState,
showGrid = false
)
}
}
Expand Down