Change now playing layout with better animations

This commit is contained in:
Damontecres 2026-03-15 09:34:13 -04:00
parent 3e043d5118
commit 8ddd3fc7eb
No known key found for this signature in database
2 changed files with 110 additions and 89 deletions

View file

@ -5,7 +5,6 @@ import androidx.compose.animation.core.animateDpAsState
import androidx.compose.animation.core.tween
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.BoxScope
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
@ -25,7 +24,7 @@ import androidx.compose.ui.unit.dp
import androidx.tv.material3.MaterialTheme
@Composable
fun BoxScope.BarVisualizer(
fun BarVisualizer(
data: IntArray,
modifier: Modifier,
) {

View file

@ -9,6 +9,8 @@ import androidx.annotation.OptIn
import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.core.animateFloatAsState
import androidx.compose.animation.expandHorizontally
import androidx.compose.animation.fadeIn
import androidx.compose.animation.fadeOut
import androidx.compose.animation.shrinkHorizontally
import androidx.compose.animation.slideInVertically
import androidx.compose.animation.slideOutVertically
@ -16,12 +18,13 @@ import androidx.compose.foundation.focusable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.wrapContentWidth
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
@ -163,25 +166,42 @@ fun NowPlayingPage(
.onPreviewKeyEvent(keyHandler::onKeyEvent)
.focusRequester(focusRequester)
.focusable(),
)
Row(
horizontalArrangement = Arrangement.Start,
verticalAlignment = Alignment.CenterVertically,
modifier = Modifier.fillMaxSize(),
) {
AnimatedVisibility(
musicPrefs.showAlbumArt,
Box(
modifier = Modifier.wrapContentWidth(),
) {
val enter =
remember {
expandHorizontally(expandFrom = Alignment.Start) + fadeIn()
}
val exit =
remember {
shrinkHorizontally(shrinkTowards = Alignment.Start) + fadeOut()
}
androidx.compose.animation.AnimatedVisibility(
visible = musicPrefs.showAlbumArt,
enter = enter,
exit = exit,
modifier =
Modifier
.padding(32.dp)
.fillMaxWidth(.5f)
.align(Alignment.CenterStart),
.padding(32.dp),
) {
Column(
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.spacedBy(8.dp),
modifier = Modifier.fillMaxWidth(.5f),
) {
AsyncImage(
contentDescription = null,
model = current?.imageUrl,
modifier =
Modifier
.height(320.dp)
.size(320.dp)
.clip(RoundedCornerShape(16.dp)),
)
current?.title?.let {
@ -204,12 +224,13 @@ fun NowPlayingPage(
}
}
}
AnimatedVisibility(
musicPrefs.showVisualizer,
androidx.compose.animation.AnimatedVisibility(
visible = musicPrefs.showVisualizer,
enter = enter,
exit = exit,
modifier =
Modifier
.padding(horizontal = 32.dp)
.fillMaxHeight(.75f)
.align(Alignment.CenterStart),
) {
val visualizerWidth by animateFloatAsState(if (musicPrefs.showLyrics && state.hasLyrics) .5f else 1f)
@ -217,23 +238,24 @@ fun NowPlayingPage(
data = viz,
modifier =
Modifier
.fillMaxHeight()
.fillMaxHeight(.75f)
.fillMaxWidth(visualizerWidth)
.align(Alignment.CenterStart),
)
}
}
AnimatedVisibility(
visible = musicPrefs.showLyrics && state.hasLyrics,
enter = expandHorizontally(expandFrom = Alignment.End),
exit = shrinkHorizontally(shrinkTowards = Alignment.End),
modifier = Modifier.align(Alignment.CenterEnd),
modifier = Modifier,
) {
Box(
contentAlignment = Alignment.Center,
modifier =
Modifier
.fillMaxWidth(.5f)
.padding(horizontal = 32.dp, vertical = 100.dp)
.fillMaxHeight(),
) {
LyricsContent(
@ -249,12 +271,12 @@ fun NowPlayingPage(
},
modifier =
Modifier
.padding(vertical = 120.dp)
.fillMaxHeight()
.width(320.dp),
.fillMaxSize(),
// .width(360.dp),
)
}
}
}
val showContextForItem =
remember {
{ fromLongClick: Boolean, index: Int, song: AudioItem ->