justinzeus/Wholphin
1
0
Fork 0
mirror of https://github.com/JustinZeus/Wholphin.git synced 2026-07-08 15:50:16 +02:00
Code Issues Projects Packages Wiki Activity Actions

Change now playing layout with better animations

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

3
app/src/main/java/com/github/damontecres/wholphin/ui/detail/music/BarVisualizer.kt
View file

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

56
app/src/main/java/com/github/damontecres/wholphin/ui/detail/music/NowPlayingPage.kt
View file

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