match the now playing controls to the flutter layout

This commit is contained in:
austinried
2026-10-04 00:29:55 +00:00
parent a755de5356
commit cb16b740ad
@@ -18,6 +18,7 @@ import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material.icons.Icons import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.automirrored.rounded.ArrowBack import androidx.compose.material.icons.automirrored.rounded.ArrowBack
import androidx.compose.material.icons.automirrored.rounded.QueueMusic import androidx.compose.material.icons.automirrored.rounded.QueueMusic
import androidx.compose.material.icons.rounded.MoreHoriz
import androidx.compose.material.icons.rounded.PauseCircle import androidx.compose.material.icons.rounded.PauseCircle
import androidx.compose.material.icons.rounded.PlayCircle import androidx.compose.material.icons.rounded.PlayCircle
import androidx.compose.material.icons.rounded.Repeat import androidx.compose.material.icons.rounded.Repeat
@@ -133,7 +134,7 @@ fun NowPlayingScreen(
thumbnailRef: CoverArtRef? = null, thumbnailRef: CoverArtRef? = null,
modifier: Modifier = Modifier, modifier: Modifier = Modifier,
) { ) {
val playButtonSize = 96.dp val playButtonSize = 90.dp
val playCircleDiameter = playButtonSize * 20f / 24f val playCircleDiameter = playButtonSize * 20f / 24f
val titleStyle = val titleStyle =
MaterialTheme.typography.headlineSmall.copy( MaterialTheme.typography.headlineSmall.copy(
@@ -280,17 +281,35 @@ fun NowPlayingScreen(
} }
Row( Row(
modifier = Modifier.fillMaxWidth().padding(top = 2.dp, bottom = 8.dp), modifier = Modifier.fillMaxWidth().padding(top = 2.dp, bottom = 8.dp),
horizontalArrangement = Arrangement.Center, horizontalArrangement = Arrangement.SpaceBetween,
verticalAlignment = Alignment.CenterVertically, verticalAlignment = Alignment.CenterVertically,
) { ) {
IconButton(onClick = onPrevious, enabled = state.hasPrevious, modifier = Modifier.size(64.dp)) { IconButton(onClick = onRepeat, modifier = Modifier.size(48.dp)) {
Icon(
imageVector = if (state.repeat == RepeatMode.One) Icons.Rounded.RepeatOne else Icons.Rounded.Repeat,
contentDescription =
when (state.repeat) {
RepeatMode.Off -> "Repeat off"
RepeatMode.All -> "Repeat all"
RepeatMode.One -> "Repeat one"
},
tint =
if (state.repeat == RepeatMode.Off) {
MaterialTheme.colorScheme.onSurfaceVariant
} else {
MaterialTheme.colorScheme.onBackground
},
modifier = Modifier.size(30.dp),
)
}
IconButton(onClick = onPrevious, modifier = Modifier.size(72.dp)) {
Icon( Icon(
imageVector = Icons.Rounded.SkipPrevious, imageVector = Icons.Rounded.SkipPrevious,
contentDescription = "Previous", contentDescription = "Previous",
modifier = Modifier.size(48.dp), modifier = Modifier.size(60.dp),
) )
} }
IconButton(onClick = onPlayPause, modifier = Modifier.padding(horizontal = 20.dp).size(playButtonSize)) { IconButton(onClick = onPlayPause, modifier = Modifier.size(playButtonSize)) {
if (state.isBuffering && state.isPlaying) { if (state.isBuffering && state.isPlaying) {
Box( Box(
modifier = modifier =
@@ -313,11 +332,24 @@ fun NowPlayingScreen(
) )
} }
} }
IconButton(onClick = onNext, enabled = state.hasNext, modifier = Modifier.size(64.dp)) { IconButton(onClick = onNext, modifier = Modifier.size(72.dp)) {
Icon( Icon(
imageVector = Icons.Rounded.SkipNext, imageVector = Icons.Rounded.SkipNext,
contentDescription = "Next", contentDescription = "Next",
modifier = Modifier.size(48.dp), modifier = Modifier.size(60.dp),
)
}
IconButton(onClick = onShuffle, modifier = Modifier.size(48.dp)) {
Icon(
imageVector = Icons.Rounded.Shuffle,
contentDescription = "Shuffle",
tint =
if (state.shuffle) {
MaterialTheme.colorScheme.onBackground
} else {
MaterialTheme.colorScheme.onSurfaceVariant
},
modifier = Modifier.size(30.dp),
) )
} }
} }
@@ -333,40 +365,12 @@ fun NowPlayingScreen(
modifier = Modifier.size(30.dp), modifier = Modifier.size(30.dp),
) )
} }
Row(verticalAlignment = Alignment.CenterVertically) { IconButton(onClick = {}, modifier = Modifier.size(40.dp)) {
IconButton(onClick = onShuffle, modifier = Modifier.size(40.dp)) { Icon(
Icon( imageVector = Icons.Rounded.MoreHoriz,
imageVector = Icons.Rounded.Shuffle, contentDescription = "More",
contentDescription = "Shuffle", modifier = Modifier.size(30.dp),
tint = )
if (state.shuffle) {
MaterialTheme.colorScheme.onBackground
} else {
MaterialTheme.colorScheme.onSurfaceVariant
},
modifier = Modifier.size(26.dp),
)
}
IconButton(onClick = onRepeat, modifier = Modifier.size(40.dp)) {
Icon(
imageVector = if (state.repeat == RepeatMode.One) Icons.Rounded.RepeatOne else Icons.Rounded.Repeat,
contentDescription =
when (state.repeat) {
RepeatMode.Off -> "Repeat off"
RepeatMode.All -> "Repeat all"
RepeatMode.One -> "Repeat one"
},
tint =
if (state.repeat ==
RepeatMode.Off
) {
MaterialTheme.colorScheme.onSurfaceVariant
} else {
MaterialTheme.colorScheme.onBackground
},
modifier = Modifier.size(26.dp),
)
}
} }
} }
} }