mirror of
https://github.com/bbara04/Purefin.git
synced 2026-07-24 03:36:51 +00:00
fix(tv): update TvIconButton size and refactor layout for consistency
This commit is contained in:
@@ -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
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user