feat: web UI auth — login page, session store, Shell, TanStack Query #17
@@ -64,7 +64,6 @@ fun NowPlayingScreen(
|
||||
)
|
||||
return
|
||||
}
|
||||
|
||||
Column(
|
||||
modifier = Modifier
|
||||
.fillMaxSize()
|
||||
@@ -72,6 +71,31 @@ fun NowPlayingScreen(
|
||||
verticalArrangement = Arrangement.Center,
|
||||
horizontalAlignment = Alignment.CenterHorizontally,
|
||||
) {
|
||||
CoverPlaceholder()
|
||||
Spacer(Modifier.height(24.dp))
|
||||
TrackHeader(
|
||||
title = track.title,
|
||||
artist = track.artistName,
|
||||
album = track.albumTitle,
|
||||
)
|
||||
Spacer(Modifier.height(24.dp))
|
||||
ScrubberRow(
|
||||
positionMs = state.positionMs,
|
||||
durationMs = state.durationMs,
|
||||
onSeek = viewModel::seekTo,
|
||||
)
|
||||
Spacer(Modifier.height(8.dp))
|
||||
TransportRow(
|
||||
isPlaying = state.isPlaying,
|
||||
onPrev = viewModel::skipToPrevious,
|
||||
onPlayPause = { if (state.isPlaying) viewModel.pause() else viewModel.play() },
|
||||
onNext = viewModel::skipToNext,
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
@Composable
|
||||
private fun CoverPlaceholder() {
|
||||
Box(
|
||||
modifier = Modifier
|
||||
.widthIn(max = COVER_MAX_WIDTH_DP.dp)
|
||||
@@ -87,9 +111,12 @@ fun NowPlayingScreen(
|
||||
modifier = Modifier.size(96.dp),
|
||||
)
|
||||
}
|
||||
Spacer(Modifier.height(24.dp))
|
||||
}
|
||||
|
||||
@Composable
|
||||
private fun TrackHeader(title: String, artist: String, album: String) {
|
||||
Text(
|
||||
text = track.title,
|
||||
text = title,
|
||||
style = MaterialTheme.typography.headlineMedium,
|
||||
color = MaterialTheme.colorScheme.onBackground,
|
||||
textAlign = TextAlign.Center,
|
||||
@@ -97,16 +124,16 @@ fun NowPlayingScreen(
|
||||
overflow = TextOverflow.Ellipsis,
|
||||
)
|
||||
Text(
|
||||
text = track.artistName,
|
||||
text = artist,
|
||||
style = MaterialTheme.typography.titleMedium,
|
||||
color = MaterialTheme.colorScheme.onSurfaceVariant,
|
||||
textAlign = TextAlign.Center,
|
||||
maxLines = 1,
|
||||
overflow = TextOverflow.Ellipsis,
|
||||
)
|
||||
if (track.albumTitle.isNotEmpty()) {
|
||||
if (album.isNotEmpty()) {
|
||||
Text(
|
||||
text = track.albumTitle,
|
||||
text = album,
|
||||
style = MaterialTheme.typography.bodyMedium,
|
||||
color = MaterialTheme.colorScheme.onSurfaceVariant,
|
||||
textAlign = TextAlign.Center,
|
||||
@@ -114,20 +141,6 @@ fun NowPlayingScreen(
|
||||
overflow = TextOverflow.Ellipsis,
|
||||
)
|
||||
}
|
||||
Spacer(Modifier.height(24.dp))
|
||||
ScrubberRow(
|
||||
positionMs = state.positionMs,
|
||||
durationMs = state.durationMs,
|
||||
onSeek = viewModel::seekTo,
|
||||
)
|
||||
Spacer(Modifier.height(8.dp))
|
||||
TransportRow(
|
||||
isPlaying = state.isPlaying,
|
||||
onPrev = viewModel::skipToPrevious,
|
||||
onPlayPause = { if (state.isPlaying) viewModel.pause() else viewModel.play() },
|
||||
onNext = viewModel::skipToNext,
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
@Composable
|
||||
|
||||
Reference in New Issue
Block a user