Skip to content
This repository has been archived by the owner on Aug 7, 2024. It is now read-only.

Commit

Permalink
style: fix album screen layout for large screens
Browse files Browse the repository at this point in the history
  • Loading branch information
@SuhasDissa
SuhasDissa committed May 8, 2024
1 parent 4be94a2 commit 1f98f66
Showing 1 changed file with 156 additions and 89 deletions.
245 changes: 156 additions & 89 deletions app/src/main/java/app/suhasdissa/vibeyou/presentation/screens/album/AlbumScreen.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,18 @@ package app.suhasdissa.vibeyou.presentation.screens.album

import android.widget.Toast
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.BoxWithConstraints
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.ColumnScope
import androidx.compose.foundation.layout.IntrinsicSize
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.aspectRatio
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.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
Expand Down Expand Up @@ -71,95 +77,7 @@ fun AlbumScreen(
contentPadding = PaddingValues(horizontal = 8.dp, vertical = 8.dp)
) {
item {
Column(
Modifier
.fillMaxWidth()
.padding(8.dp)
.padding(bottom = 8.dp),
verticalArrangement = Arrangement.spacedBy(8.dp),
horizontalAlignment = Alignment.CenterHorizontally
) {
AsyncImage(
modifier = Modifier
.fillMaxWidth()
.padding(horizontal = 40.dp, vertical = 20.dp)
.aspectRatio(1f)
.clip(RoundedCornerShape(16.dp)),
model = state.album.thumbnailUri,
contentDescription = stringResource(id = R.string.album_art),
contentScale = ContentScale.Crop,
error = painterResource(id = R.drawable.music_placeholder)
)
Column(
Modifier
.fillMaxWidth()
.padding(8.dp)
) {
Text(
text = state.album.title,
style = MaterialTheme.typography.titleLarge
)
Text(
text = state.album.artistsText,
style = MaterialTheme.typography.bodyMedium
)
state.album.numberOfSongs?.let {
Text(
text = "$it ${stringResource(id = R.string.songs)}",
style = MaterialTheme.typography.bodyMedium
)
}
}
Row(
modifier = Modifier.fillMaxWidth(),
horizontalArrangement = Arrangement.spacedBy(8.dp)
) {
OutlinedButton(modifier = Modifier.weight(1f), onClick = {
playerViewModel.playSongs(state.songs, shuffle = false)
}) {
Icon(
imageVector = Icons.Rounded.PlayArrow,
contentDescription = null
)
Text(text = stringResource(id = R.string.play_all))
}
Button(modifier = Modifier.weight(1f), onClick = {
playerViewModel.playSongs(state.songs, shuffle = true)
}) {
Icon(
imageVector = Icons.Rounded.Shuffle,
contentDescription = null
)
Text(text = stringResource(id = R.string.shuffle))
}
}
if (!state.album.isLocal) {
val context = LocalContext.current
FilledTonalButton(
modifier = Modifier.fillMaxWidth(),
onClick = {
playlistViewModel.newPlaylistWithSongs(
state.album,
state.songs
)
Toast.makeText(
context,
context.getString(
R.string.added_all_the_songs_to_the_library
),
Toast.LENGTH_SHORT
).show()
}
) {
Icon(
imageVector = Icons.Rounded.LibraryAdd,
contentDescription = null
)
Text(text = stringResource(R.string.add_to_library))
}
}
HorizontalDivider()
}
AlbumHeader(state, playerViewModel, playlistViewModel)
}
items(items = state.songs) { item ->
SongCard(
Expand Down Expand Up @@ -190,3 +108,152 @@ fun AlbumScreen(
}
}
}

@Composable
private fun AlbumHeader(
state: AlbumInfoState.Success,
playerViewModel: PlayerViewModel,
playlistViewModel: NewPlaylistViewModel
) {
BoxWithConstraints(Modifier.fillMaxWidth()) {
if (maxWidth > 600.dp) {
Column {
Row(
Modifier
.fillMaxWidth()
.height(IntrinsicSize.Min),
horizontalArrangement = Arrangement.spacedBy(8.dp)
) {
AsyncImage(
modifier = Modifier
.weight(1f)
.padding(horizontal = 40.dp, vertical = 20.dp)
.aspectRatio(1f)
.clip(RoundedCornerShape(16.dp)),
model = state.album.thumbnailUri,
contentDescription = stringResource(id = R.string.album_art),
contentScale = ContentScale.Crop,
error = painterResource(id = R.drawable.music_placeholder)
)
Column(
Modifier
.weight(2f)
.fillMaxHeight()
.padding(vertical = 20.dp)
) {
AlbumDetails(
state = state,
playerViewModel = playerViewModel,
playlistViewModel = playlistViewModel
)
}
}
HorizontalDivider()
}
} else {
Column(
Modifier
.fillMaxWidth()
.padding(8.dp)
.padding(bottom = 8.dp),
verticalArrangement = Arrangement.spacedBy(8.dp),
horizontalAlignment = Alignment.CenterHorizontally
) {
AsyncImage(
modifier = Modifier
.fillMaxWidth()
.padding(horizontal = 40.dp, vertical = 20.dp)
.aspectRatio(1f)
.clip(RoundedCornerShape(16.dp)),
model = state.album.thumbnailUri,
contentDescription = stringResource(id = R.string.album_art),
contentScale = ContentScale.Crop,
error = painterResource(id = R.drawable.music_placeholder)
)
AlbumDetails(
state = state,
playerViewModel = playerViewModel,
playlistViewModel = playlistViewModel
)
HorizontalDivider()
}
}
}
}

@Composable
private fun ColumnScope.AlbumDetails(
state: AlbumInfoState.Success,
playerViewModel: PlayerViewModel,
playlistViewModel: NewPlaylistViewModel
) {
Column(
Modifier
.fillMaxWidth()
.padding(8.dp)
) {
Text(
text = state.album.title,
style = MaterialTheme.typography.titleLarge
)
Text(
text = state.album.artistsText,
style = MaterialTheme.typography.bodyMedium
)
state.album.numberOfSongs?.let {
Text(
text = "$it ${stringResource(id = R.string.songs)}",
style = MaterialTheme.typography.bodyMedium
)
}
}
Spacer(modifier = Modifier.weight(1f))
Row(
modifier = Modifier.fillMaxWidth(),
horizontalArrangement = Arrangement.spacedBy(8.dp)
) {
OutlinedButton(modifier = Modifier.weight(1f), onClick = {
playerViewModel.playSongs(state.songs, shuffle = false)
}) {
Icon(
imageVector = Icons.Rounded.PlayArrow,
contentDescription = null
)
Text(text = stringResource(id = R.string.play_all))
}
Button(modifier = Modifier.weight(1f), onClick = {
playerViewModel.playSongs(state.songs, shuffle = true)
}) {
Icon(
imageVector = Icons.Rounded.Shuffle,
contentDescription = null
)
Text(text = stringResource(id = R.string.shuffle))
}
}
if (!state.album.isLocal) {
val context = LocalContext.current
FilledTonalButton(
modifier = Modifier.fillMaxWidth(),
onClick = {
playlistViewModel.newPlaylistWithSongs(
state.album,
state.songs
)
Toast.makeText(
context,
context.getString(
R.string.added_all_the_songs_to_the_library
),
Toast.LENGTH_SHORT
).show()
}
) {
Icon(
imageVector = Icons.Rounded.LibraryAdd,
contentDescription = null
)
Text(text = stringResource(R.string.add_to_library))
}
}
}

0 comments on commit 1f98f66

Please sign in to comment.