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.

Sign up for GitHub

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] UI polish of TV module and resolved navigation & focus traversal issue in player screen #1481

Open
wants to merge 14 commits into
base: main
Choose a base branch
from
Open

[Jetcaster] UI polish of TV module and resolved navigation & focus traversal issue in player screen #1481

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
570d133
Some UI polish
Oct 4, 2024
f544f49
Code style
Oct 4, 2024
ad13454
Gradle wrapper and dependencies
Oct 4, 2024
a7db73a
Merged PR #1466
Oct 4, 2024
6ec02a4
Code style
Oct 4, 2024
3d67f91
Resolved focus traversal and back navigation issue
Oct 4, 2024
cf46ae8
Ensure that the play/pause button is always focused when entering the…
Oct 4, 2024
3864461
Merge remote-tracking branch 'origin/main'
Oct 4, 2024
a7d20c1
Merge remote-tracking branch 'origin/main'
Dec 18, 2024
973b3f1
removed stale remainder of PR #1466 that was unused
Dec 18, 2024
2a50087
Fixed import
Dec 18, 2024
471f279
Gradle wrapper and dependencies
Dec 18, 2024
15dc262
Fixed import
Dec 18, 2024
cebdfb7
Fixed import
Dec 18, 2024
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
2 changes: 1 addition & 1 deletion ...ignsystem/src/main/java/com/example/jetcaster/designsystem/component/HtmlTextContainer.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ fun HtmlTextContainer(
text: String,
content: @Composable (AnnotatedString) -> Unit
) {
val annotatedString = remember(key1 = text) {
val annotatedString = remember(text) {
AnnotatedString.fromHtml(htmlString = text)
}
SelectionContainer {
Expand Down
2 changes: 1 addition & 1 deletion ...aster/glancewidget/src/main/java/com/example/jetcaster/glancewidget/JetcasterAppWidget.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -255,7 +255,7 @@ private fun WidgetAsyncImage(
val context = LocalContext.current
val scope = rememberCoroutineScope()

LaunchedEffect(key1 = uri) {
LaunchedEffect(uri) {
val request = ImageRequest.Builder(context)
.data(uri)
.size(200, 200)
Expand Down
20 changes: 10 additions & 10 deletions Jetcaster/gradle/libs.versions.toml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,10 @@ accompanist = "0.36.0"
androidGradlePlugin = "8.7.0"
androidx-activity-compose = "1.9.2"
androidx-appcompat = "1.7.0"
androidx-benchmark = "1.2.4"
androidx-benchmark-junit4 = "1.2.4"
androidx-benchmark = "1.3.1"
androidx-benchmark-junit4 = "1.3.1"
androidx-compose-bom = "2024.09.03"
androidx-constraintlayout = "1.1.0-alpha13"
androidx-constraintlayout = "1.1.0-beta01"
androidx-core-splashscreen = "1.0.1"
androidx-corektx = "1.13.1"
androidx-glance = "1.1.0"
Expand All @@ -22,24 +22,24 @@ androidx-palette = "1.0.0"
androidx-test = "1.6.1"
androidx-test-espresso = "3.6.1"
androidx-test-ext-junit = "1.2.1"
androidx-test-ext-truth = "1.5.0"
androidx-test-ext-truth = "1.6.0"
androidx-tv-foundation = "1.0.0-alpha11"
androidx-tv-material = "1.0.0"
androidx-wear-compose = "1.3.1"
androidx-wear-compose = "1.4.0"
androidx-window = "1.3.0"
androidxHiltNavigationCompose = "1.2.0"
androix-test-uiautomator = "2.3.0"
coil = "2.6.0"
# @keep
compileSdk = "34"
coroutines = "1.9.0"
google-maps = "18.2.0"
google-maps = "19.0.0"
gradle-versions = "0.51.0"
hilt = "2.51.1"
hiltExt = "1.2.0"
horologist = "0.6.19"
# @pin When updating to AGP 7.4.0-alpha10 and up we can update this https://developer.android.com/studio/write/java8-support#library-desugaring-versions
jdkDesugar = "1.2.2"
jdkDesugar = "2.1.2"
junit = "4.13.2"
kotlin = "2.0.20"
kotlinx-serialization-json = "1.7.3"
Expand All @@ -48,12 +48,12 @@ ksp = "2.0.20-1.0.24"
maps-compose = "3.1.1"
# @keep
minSdk = "21"
okhttp = "4.11.0"
play-services-wearable = "18.1.0"
okhttp = "4.12.0"
play-services-wearable = "18.2.0"
robolectric = "4.13"
roborazzi = "1.12.0"
rome = "1.18.0"
room = "2.6.0"
room = "2.6.1"
secrets = "2.0.1"
# @keep
targetSdk = "33"
Expand Down
18 changes: 12 additions & 6 deletions Jetcaster/mobile/src/main/java/com/example/jetcaster/ui/home/Home.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,6 +83,7 @@ import androidx.compose.material3.adaptive.occludingVerticalHingeBounds
import androidx.compose.material3.adaptive.separatingVerticalHingeBounds
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.collectAsState
import androidx.compose.runtime.getValue
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
Expand Down Expand Up @@ -378,22 +379,27 @@ private fun HomeAppBar(
isExpanded: Boolean,
modifier: Modifier = Modifier,
) {
val viewModel: HomeViewModel = hiltViewModel()

val searchText by viewModel.searchText.collectAsState()
val isSearching by viewModel.isSearching.collectAsState()

Row(
horizontalArrangement = Arrangement.End,
modifier = modifier
.fillMaxWidth()
.background(Color.Transparent)
.padding(end = 16.dp, top = 8.dp, bottom = 8.dp)
.padding(start = 16.dp, end = 16.dp, top = 8.dp, bottom = 8.dp)
) {
SearchBar(
query = "",
onQueryChange = {},
query = searchText,
onQueryChange = { viewModel.onSearchTextChange(it) },
placeholder = {
Text(stringResource(id = R.string.search_for_a_podcast))
},
onSearch = {},
onSearch = { viewModel.onSearchTextChange(it) },
active = false,
onActiveChange = {},
onActiveChange = { viewModel.onToggleSearch() },
leadingIcon = {
Icon(
imageVector = Icons.Default.Search,
Expand Down Expand Up @@ -436,7 +442,7 @@ private fun HomeScreen(
modifier: Modifier = Modifier
) {
// Effect that changes the home category selection when there are no subscribed podcasts
LaunchedEffect(key1 = homeState.featuredPodcasts) {
LaunchedEffect(homeState.featuredPodcasts) {
if (homeState.featuredPodcasts.isEmpty()) {
homeState.onHomeCategorySelected(HomeCategory.Discover)
}
Expand Down
20 changes: 20 additions & 0 deletions Jetcaster/mobile/src/main/java/com/example/jetcaster/ui/home/HomeViewModel.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@ import kotlinx.coroutines.ExperimentalCoroutinesApi
import kotlinx.coroutines.flow.MutableStateFlow
import kotlinx.coroutines.flow.SharingStarted
import kotlinx.coroutines.flow.StateFlow
import kotlinx.coroutines.flow.asStateFlow
import kotlinx.coroutines.flow.catch
import kotlinx.coroutines.flow.flatMapLatest
import kotlinx.coroutines.flow.shareIn
Expand Down Expand Up @@ -72,6 +73,14 @@ class HomeViewModel @Inject constructor(
// Holds the view state if the UI is refreshing for new data
private val refreshing = MutableStateFlow(false)

//first state whether the search is happening or not
private val _isSearching = MutableStateFlow(false)
val isSearching = _isSearching.asStateFlow()

//second state the text typed by the user
private val _searchText = MutableStateFlow("")
val searchText = _searchText.asStateFlow()

private val subscribedPodcasts = podcastStore.followedPodcastsSortedByLastEpisode(limit = 10)
.shareIn(viewModelScope, SharingStarted.WhileSubscribed())

Expand Down Expand Up @@ -149,6 +158,17 @@ class HomeViewModel @Inject constructor(
}
}

fun onSearchTextChange(text: String) {
_searchText.value = text
}

fun onToggleSearch() {
_isSearching.value = !_isSearching.value
if (!_isSearching.value) {
onSearchTextChange("")
}
}

fun onCategorySelected(category: CategoryInfo) {
_selectedCategory.value = category
}
Expand Down
2 changes: 1 addition & 1 deletion Jetcaster/tv/src/main/java/com/example/jetcaster/tv/ui/component/Background.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ private fun Background(
) {
ImageBackgroundRadialGradientScrim(
url = imageUrl,
colors = listOf(Color.Black, Color.Transparent),
colors = listOf(Color(0xE0000000), Color(0xB0000000)),
modifier = modifier,
)
}
5 changes: 3 additions & 2 deletions Jetcaster/tv/src/main/java/com/example/jetcaster/tv/ui/component/ButtonWithIcon.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@

package com.example.jetcaster.tv.ui.component

import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.width
import androidx.compose.runtime.Composable
Expand All @@ -36,10 +37,10 @@ internal fun ButtonWithIcon(
modifier: Modifier = Modifier,
scale: ButtonScale = ButtonDefaults.scale(),
) {
Button(onClick = onClick, modifier = modifier, scale = scale) {
Button(onClick = onClick, contentPadding = PaddingValues(start = 6.dp, end = 16.dp), modifier = modifier, scale = scale) {
Icon(
icon,
contentDescription = null,
contentDescription = null
)
Spacer(modifier = Modifier.width(6.dp))
Text(text = label)
Expand Down
14 changes: 12 additions & 2 deletions Jetcaster/tv/src/main/java/com/example/jetcaster/tv/ui/component/EpisodeCard.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,9 +30,9 @@ import androidx.compose.ui.Modifier
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.unit.DpSize
import androidx.compose.ui.unit.dp
import androidx.tv.material3.Border
import androidx.tv.material3.Card
import androidx.tv.material3.CardDefaults
import androidx.tv.material3.CardScale
import androidx.tv.material3.MaterialTheme
import androidx.tv.material3.Text
import androidx.tv.material3.WideCardContainer
Expand Down Expand Up @@ -72,8 +72,18 @@ private fun EpisodeThumbnail(
Card(
onClick = onClick,
interactionSource = interactionSource,
scale = CardScale.None,
scale = CardDefaults.scale(scale = 0.85f, focusedScale = 1.0f),
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Scaling is intentionally disabled. We should keep the original intention.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't feel the previous behavior accurately reflects our design best practices to clearly indicate focus, because the card is very large and it's easy to overlook the outline. The added padding has compensated for the scaling elsewhere.

shape = CardDefaults.shape(RoundedCornerShape(12.dp)),
border = CardDefaults.border(
focusedBorder = Border(
border = _root_ide_package_.androidx.compose.foundation.BorderStroke(
pflammertsma marked this conversation as resolved.
Show resolved Hide resolved
3.dp,
color = MaterialTheme.colorScheme.border
),
inset = 3.dp,
shape = RoundedCornerShape(15.dp)
)
),
modifier = modifier,
) {
Thumbnail(episode = playerEpisode, size = JetcasterAppDefaults.thumbnailSize.episode)
Expand Down
2 changes: 1 addition & 1 deletion Jetcaster/tv/src/main/java/com/example/jetcaster/tv/ui/component/EpisodeDateAndDuration.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ internal fun EpisodeDataAndDuration(
offsetDateTime: OffsetDateTime,
duration: Duration,
modifier: Modifier = Modifier,
style: TextStyle = MaterialTheme.typography.bodySmall,
style: TextStyle = MaterialTheme.typography.bodyMedium,
) {
Text(
text = stringResource(
Expand Down
17 changes: 14 additions & 3 deletions Jetcaster/tv/src/main/java/com/example/jetcaster/tv/ui/component/PodcastCard.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,9 +21,10 @@ import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.tv.material3.Border
import androidx.tv.material3.Card
import androidx.tv.material3.CardDefaults
import androidx.tv.material3.CardScale
import androidx.tv.material3.MaterialTheme
import androidx.tv.material3.StandardCardContainer
import androidx.tv.material3.Text
import com.example.jetcaster.core.model.PodcastInfo
Expand All @@ -40,8 +41,18 @@ internal fun PodcastCard(
Card(
onClick = onClick,
interactionSource = it,
scale = CardScale.None,
shape = CardDefaults.shape(RoundedCornerShape(12.dp))
scale = CardDefaults.scale(scale = 0.9f, focusedScale = 1.0f),
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Scaling is intentionally disabled. Would you keep the original code?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same thoughts as the comment in EpisodeCard.

shape = CardDefaults.shape(RoundedCornerShape(16.dp)),
border = CardDefaults.border(
focusedBorder = Border(
border = _root_ide_package_.androidx.compose.foundation.BorderStroke(
pflammertsma marked this conversation as resolved.
Show resolved Hide resolved
3.dp,
color = MaterialTheme.colorScheme.border
),
inset = 3.dp,
shape = RoundedCornerShape(19.dp)
),
)
) {
Thumbnail(
podcastInfo = podcastInfo,
Expand Down
1 change: 0 additions & 1 deletion Jetcaster/tv/src/main/java/com/example/jetcaster/tv/ui/discover/DiscoverScreen.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,6 @@ fun DiscoverScreen(
private fun CatalogWithCategorySelection(
categoryInfoList: CategoryInfoList,
podcastList: PodcastList,

selectedCategory: CategoryInfo,
latestEpisodeList: EpisodeList,
onPodcastSelected: (PodcastInfo) -> Unit,
Expand Down
Loading
Loading