feat(series): add focus indication with border to episode cards

This commit is contained in:
2026-06-30 20:58:39 +02:00
parent f25f0e0827
commit f73ca4e242

View File

@@ -153,14 +153,20 @@ private fun TvSeasonTab(
) { ) {
val scheme = MaterialTheme.colorScheme val scheme = MaterialTheme.colorScheme
val color = if (isSelected) scheme.primary else scheme.onSurface val color = if (isSelected) scheme.primary else scheme.onSurface
val indicatorColor = if (isSelected) scheme.primary else Color.Transparent val isFocused = remember { mutableStateOf(false) }
Column( Box(
modifier = modifier modifier = modifier
.onFocusChanged { state -> .onFocusChanged { state ->
if (state.isFocused) onFocused() if (state.isFocused) {
onFocused()
isFocused.value = true
} else {
isFocused.value = false
}
} }
.clickable(onClick = onClick) .clickable(onClick = onClick)
.borderIfFocused(isFocused.value, MaterialTheme.colorScheme.primary)
) { ) {
TvText( TvText(
text = name, text = name,
@@ -169,13 +175,8 @@ private fun TvSeasonTab(
fontWeight = if (isSelected) FontWeight.Bold else FontWeight.Medium, fontWeight = if (isSelected) FontWeight.Bold else FontWeight.Medium,
maxLines = 1, maxLines = 1,
overflow = TextOverflow.Ellipsis, overflow = TextOverflow.Ellipsis,
modifier = Modifier.padding(horizontal = 16.dp, vertical = 8.dp)
)
Box(
modifier = Modifier modifier = Modifier
.fillMaxWidth() .padding(horizontal = 16.dp, vertical = 8.dp)
.height(2.dp)
.background(indicatorColor)
) )
} }
} }
@@ -256,11 +257,9 @@ internal fun TvEpisodeCarousel(
Modifier Modifier
} }
) )
.then( .then(upFocusRequester?.let { requester ->
upFocusRequester?.let { requester -> Modifier.focusProperties { up = requester }
Modifier.focusProperties { up = requester } } ?: Modifier)
} ?: Modifier
)
.then( .then(
if (episode.id == targetEpisodeId) { if (episode.id == targetEpisodeId) {
Modifier.testTag(SeriesNextUpEpisodeCardTag) Modifier.testTag(SeriesNextUpEpisodeCardTag)
@@ -432,3 +431,15 @@ internal fun CastRow(cast: List<CastMember>, modifier: Modifier = Modifier) {
// roleSize = 10.sp // roleSize = 10.sp
// ) // )
} }
private fun Modifier.borderIfFocused(isFocused: Boolean, borderColor: Color): Modifier =
if (isFocused) {
this.border(
width = 2.dp,
color = borderColor,
shape = RoundedCornerShape(12.dp)
)
} else {
this
}