fix(tv): update TvIconButton size and refactor layout for consistency

This commit is contained in:
2026-05-02 11:13:15 +02:00
parent 58087bb4a5
commit 65693a9220
2 changed files with 57 additions and 55 deletions

View File

@@ -6,7 +6,6 @@ import androidx.compose.foundation.background
import androidx.compose.foundation.border import androidx.compose.foundation.border
import androidx.compose.foundation.clickable import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.padding
@@ -55,62 +54,65 @@ internal fun TvIconButton(
targetValue = if (isFocused) scheme.primary else Color.Transparent, targetValue = if (isFocused) scheme.primary else Color.Transparent,
label = "border" label = "border"
) )
val shape = RoundedCornerShape(50)
val iconSize = (size - 24).coerceAtLeast(0).dp
Box( val buttonModifier = modifier
modifier = modifier .graphicsLayer {
.graphicsLayer { scaleX = scale
scaleX = scale scaleY = scale
scaleY = scale }
.alpha(if (enabled) 1f else 0.4f)
.border(
width = if (isFocused) 2.dp else 0.dp,
color = borderColor,
shape = shape
)
.clip(shape)
.background(
if (isFocused) scheme.primary.copy(alpha = 0.5f)
else scheme.background.copy(alpha = 0.65f)
)
.focusProperties { canFocus = enabled }
.semantics {
if (!enabled) {
disabled()
} }
.alpha(if (enabled) 1f else 0.4f) }
.widthIn(min = if (label == null) size.dp else 104.dp) .onFocusChanged { isFocused = it.isFocused }
.height(size.dp) .clickable(enabled = enabled) { onClick() }
.border(
width = if (isFocused) 2.dp else 0.dp, if (label == null) {
color = borderColor, Icon(
shape = RoundedCornerShape(50) imageVector = icon,
) contentDescription = contentDescription,
.clip(RoundedCornerShape(50)) tint = scheme.onBackground,
.background( modifier = buttonModifier
if (isFocused) scheme.primary.copy(alpha = 0.5f) .size(size.dp)
else scheme.background.copy(alpha = 0.65f) .padding(12.dp)
) .size(iconSize)
.focusProperties { canFocus = enabled } )
.semantics { } else {
if (!enabled) { Row(
disabled() horizontalArrangement = Arrangement.spacedBy(6.dp),
} verticalAlignment = Alignment.CenterVertically,
} modifier = buttonModifier
.onFocusChanged { isFocused = it.isFocused } .widthIn(min = 104.dp)
.clickable(enabled = enabled) { onClick() }, .height(size.dp)
contentAlignment = Alignment.Center .padding(horizontal = 16.dp)
) { ) {
if (label == null) {
Icon( Icon(
imageVector = icon, imageVector = icon,
contentDescription = contentDescription, contentDescription = contentDescription,
tint = scheme.onBackground, tint = scheme.onBackground,
modifier = Modifier.padding(8.dp) modifier = Modifier.size(iconSize)
)
Text(
text = label,
color = scheme.onBackground,
style = MaterialTheme.typography.labelLarge,
fontWeight = FontWeight.SemiBold
) )
} else {
Row(
horizontalArrangement = Arrangement.spacedBy(6.dp),
verticalAlignment = Alignment.CenterVertically,
modifier = Modifier.padding(horizontal = 16.dp)
) {
Icon(
imageVector = icon,
contentDescription = contentDescription,
tint = scheme.onBackground,
modifier = Modifier.size(28.dp)
)
Text(
text = label,
color = scheme.onBackground,
style = MaterialTheme.typography.labelLarge,
fontWeight = FontWeight.SemiBold
)
}
} }
} }
} }

View File

@@ -258,21 +258,21 @@ private fun TvPlayerBottomSection(
icon = Icons.Outlined.SkipPrevious, icon = Icons.Outlined.SkipPrevious,
contentDescription = "Previous", contentDescription = "Previous",
onClick = onPrevious, onClick = onPrevious,
size = 64, size = 56,
modifier = expandPlaylistModifier modifier = expandPlaylistModifier
) )
TvIconButton( TvIconButton(
icon = Icons.Outlined.Replay10, icon = Icons.Outlined.Replay10,
contentDescription = "Seek backward 10 seconds", contentDescription = "Seek backward 10 seconds",
onClick = { onSeekRelative(-10_000) }, onClick = { onSeekRelative(-10_000) },
size = 64, size = 56,
modifier = expandPlaylistModifier modifier = expandPlaylistModifier
) )
TvIconButton( TvIconButton(
icon = if (uiState.isPlaying) Icons.Outlined.Pause else Icons.Outlined.PlayArrow, icon = if (uiState.isPlaying) Icons.Outlined.Pause else Icons.Outlined.PlayArrow,
contentDescription = if (uiState.isPlaying) "Pause" else "Play", contentDescription = if (uiState.isPlaying) "Pause" else "Play",
onClick = onPlayPause, onClick = onPlayPause,
size = 72, size = 64,
modifier = expandPlaylistModifier modifier = expandPlaylistModifier
.focusRequester(focusRequester) .focusRequester(focusRequester)
.testTag(TvPlayerPlayPauseButtonTag) .testTag(TvPlayerPlayPauseButtonTag)
@@ -281,14 +281,14 @@ private fun TvPlayerBottomSection(
icon = Icons.Outlined.Forward30, icon = Icons.Outlined.Forward30,
contentDescription = "Seek forward 30 seconds", contentDescription = "Seek forward 30 seconds",
onClick = { onSeekRelative(30_000) }, onClick = { onSeekRelative(30_000) },
size = 64, size = 56,
modifier = expandPlaylistModifier modifier = expandPlaylistModifier
) )
TvIconButton( TvIconButton(
icon = Icons.Outlined.SkipNext, icon = Icons.Outlined.SkipNext,
contentDescription = "Next", contentDescription = "Next",
onClick = onNext, onClick = onNext,
size = 64, size = 56,
modifier = expandPlaylistModifier modifier = expandPlaylistModifier
) )
} }