Skip to content

Commit

Permalink
feat: add empty placeholders
Browse files Browse the repository at this point in the history
  • Loading branch information
@z-huang
z-huang committed Aug 28, 2024
1 parent f17cf19 commit 4fd8cad
Show file tree
Hide file tree
Showing 11 changed files with 406 additions and 262 deletions.
9 changes: 7 additions & 2 deletions app/src/main/java/com/zionhuang/music/ui/component/EmptyPlaceholder.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,12 @@ package com.zionhuang.music.ui.component

import androidx.annotation.DrawableRes
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
Expand All @@ -22,7 +27,7 @@ fun EmptyPlaceholder(
horizontalAlignment = Alignment.CenterHorizontally,
modifier = modifier
.fillMaxSize()
.padding(12.dp)
.padding(horizontal = 12.dp, vertical = 24.dp)
) {
Image(
painter = painterResource(icon),
Expand Down
159 changes: 93 additions & 66 deletions app/src/main/java/com/zionhuang/music/ui/screens/library/LibraryAlbumsScreen.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,7 @@ import com.zionhuang.music.constants.SmallGridThumbnailHeight
import com.zionhuang.music.ui.component.AlbumGridItem
import com.zionhuang.music.ui.component.AlbumListItem
import com.zionhuang.music.ui.component.ChipsRow
import com.zionhuang.music.ui.component.EmptyPlaceholder
import com.zionhuang.music.ui.component.LocalMenuState
import com.zionhuang.music.ui.component.SortHeader
import com.zionhuang.music.ui.menu.AlbumMenu
Expand Down Expand Up @@ -157,11 +158,13 @@ fun LibraryAlbumsScreen(

Spacer(Modifier.weight(1f))

Text(
text = pluralStringResource(R.plurals.n_album, albums.size, albums.size),
style = MaterialTheme.typography.titleSmall,
color = MaterialTheme.colorScheme.secondary
)
albums?.let { albums ->
Text(
text = pluralStringResource(R.plurals.n_album, albums.size, albums.size),
style = MaterialTheme.typography.titleSmall,
color = MaterialTheme.colorScheme.secondary
)
}
}
}

Expand All @@ -188,40 +191,52 @@ fun LibraryAlbumsScreen(
headerContent()
}

items(
items = albums,
key = { it.id },
contentType = { CONTENT_TYPE_ALBUM }
) { album ->
AlbumListItem(
album = album,
isActive = album.id == mediaMetadata?.album?.id,
isPlaying = isPlaying,
trailingContent = {
IconButton(
onClick = {
menuState.show {
AlbumMenu(
originalAlbum = album,
navController = navController,
onDismiss = menuState::dismiss
)
albums?.let { albums ->
if (albums.isEmpty()) {
item {
EmptyPlaceholder(
icon = R.drawable.album,
text = stringResource(R.string.library_album_empty),
modifier = Modifier.animateItem()
)
}
}

items(
items = albums,
key = { it.id },
contentType = { CONTENT_TYPE_ALBUM }
) { album ->
AlbumListItem(
album = album,
isActive = album.id == mediaMetadata?.album?.id,
isPlaying = isPlaying,
trailingContent = {
IconButton(
onClick = {
menuState.show {
AlbumMenu(
originalAlbum = album,
navController = navController,
onDismiss = menuState::dismiss
)
}
}
) {
Icon(
painter = painterResource(R.drawable.more_vert),
contentDescription = null
)
}
) {
Icon(
painter = painterResource(R.drawable.more_vert),
contentDescription = null
)
}
},
modifier = Modifier
.fillMaxWidth()
.combinedClickable {
navController.navigate("album/${album.id}")
}
.animateItem()
)
},
modifier = Modifier
.fillMaxWidth()
.combinedClickable {
navController.navigate("album/${album.id}")
}
.animateItem()
)
}
}
}

Expand Down Expand Up @@ -252,36 +267,48 @@ fun LibraryAlbumsScreen(
headerContent()
}

items(
items = albums,
key = { it.id },
contentType = { CONTENT_TYPE_ALBUM }
) { album ->
AlbumGridItem(
album = album,
isActive = album.id == mediaMetadata?.album?.id,
isPlaying = isPlaying,
coroutineScope = coroutineScope,
fillMaxWidth = true,
modifier = Modifier
.fillMaxWidth()
.combinedClickable(
onClick = {
navController.navigate("album/${album.id}")
},
onLongClick = {
haptic.performHapticFeedback(HapticFeedbackType.LongPress)
menuState.show {
AlbumMenu(
originalAlbum = album,
navController = navController,
onDismiss = menuState::dismiss
)
}
}
albums?.let { albums ->
if (albums.isEmpty()) {
item(span = { GridItemSpan(maxLineSpan) }) {
EmptyPlaceholder(
icon = R.drawable.album,
text = stringResource(R.string.library_album_empty),
modifier = Modifier.animateItem()
)
.animateItem()
)
}
}

items(
items = albums,
key = { it.id },
contentType = { CONTENT_TYPE_ALBUM }
) { album ->
AlbumGridItem(
album = album,
isActive = album.id == mediaMetadata?.album?.id,
isPlaying = isPlaying,
coroutineScope = coroutineScope,
fillMaxWidth = true,
modifier = Modifier
.fillMaxWidth()
.combinedClickable(
onClick = {
navController.navigate("album/${album.id}")
},
onLongClick = {
haptic.performHapticFeedback(HapticFeedbackType.LongPress)
menuState.show {
AlbumMenu(
originalAlbum = album,
navController = navController,
onDismiss = menuState::dismiss
)
}
}
)
.animateItem()
)
}
}
}
}
Expand Down
149 changes: 88 additions & 61 deletions app/src/main/java/com/zionhuang/music/ui/screens/library/LibraryArtistsScreen.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,7 @@ import com.zionhuang.music.constants.SmallGridThumbnailHeight
import com.zionhuang.music.ui.component.ArtistGridItem
import com.zionhuang.music.ui.component.ArtistListItem
import com.zionhuang.music.ui.component.ChipsRow
import com.zionhuang.music.ui.component.EmptyPlaceholder
import com.zionhuang.music.ui.component.LocalMenuState
import com.zionhuang.music.ui.component.SortHeader
import com.zionhuang.music.ui.menu.ArtistMenu
Expand Down Expand Up @@ -150,11 +151,13 @@ fun LibraryArtistsScreen(

Spacer(Modifier.weight(1f))

Text(
text = pluralStringResource(R.plurals.n_artist, artists.size, artists.size),
style = MaterialTheme.typography.titleSmall,
color = MaterialTheme.colorScheme.secondary
)
artists?.let { artists ->
Text(
text = pluralStringResource(R.plurals.n_artist, artists.size, artists.size),
style = MaterialTheme.typography.titleSmall,
color = MaterialTheme.colorScheme.secondary
)
}
}
}

Expand All @@ -181,38 +184,50 @@ fun LibraryArtistsScreen(
headerContent()
}

items(
items = artists,
key = { it.id },
contentType = { CONTENT_TYPE_ARTIST }
) { artist ->
ArtistListItem(
artist = artist,
trailingContent = {
IconButton(
onClick = {
menuState.show {
ArtistMenu(
originalArtist = artist,
coroutineScope = coroutineScope,
onDismiss = menuState::dismiss
)
artists?.let { artists ->
if (artists.isEmpty()) {
item {
EmptyPlaceholder(
icon = R.drawable.artist,
text = stringResource(R.string.library_artist_empty),
modifier = Modifier.animateItem()
)
}
}

items(
items = artists,
key = { it.id },
contentType = { CONTENT_TYPE_ARTIST }
) { artist ->
ArtistListItem(
artist = artist,
trailingContent = {
IconButton(
onClick = {
menuState.show {
ArtistMenu(
originalArtist = artist,
coroutineScope = coroutineScope,
onDismiss = menuState::dismiss
)
}
}
) {
Icon(
painter = painterResource(R.drawable.more_vert),
contentDescription = null
)
}
) {
Icon(
painter = painterResource(R.drawable.more_vert),
contentDescription = null
)
}
},
modifier = Modifier
.fillMaxWidth()
.clickable {
navController.navigate("artist/${artist.id}")
}
.animateItem()
)
},
modifier = Modifier
.fillMaxWidth()
.clickable {
navController.navigate("artist/${artist.id}")
}
.animateItem()
)
}
}
}

Expand Down Expand Up @@ -243,33 +258,45 @@ fun LibraryArtistsScreen(
headerContent()
}

items(
items = artists,
key = { it.id },
contentType = { CONTENT_TYPE_ARTIST }
) { artist ->
ArtistGridItem(
artist = artist,
fillMaxWidth = true,
modifier = Modifier
.fillMaxWidth()
.combinedClickable(
onClick = {
navController.navigate("artist/${artist.id}")
},
onLongClick = {
haptic.performHapticFeedback(HapticFeedbackType.LongPress)
menuState.show {
ArtistMenu(
originalArtist = artist,
coroutineScope = coroutineScope,
onDismiss = menuState::dismiss
)
}
}
artists?.let { artists ->
if (artists.isEmpty()) {
item(span = { GridItemSpan(maxLineSpan) }) {
EmptyPlaceholder(
icon = R.drawable.artist,
text = stringResource(R.string.library_artist_empty),
modifier = Modifier.animateItem()
)
.animateItem()
)
}
}

items(
items = artists,
key = { it.id },
contentType = { CONTENT_TYPE_ARTIST }
) { artist ->
ArtistGridItem(
artist = artist,
fillMaxWidth = true,
modifier = Modifier
.fillMaxWidth()
.combinedClickable(
onClick = {
navController.navigate("artist/${artist.id}")
},
onLongClick = {
haptic.performHapticFeedback(HapticFeedbackType.LongPress)
menuState.show {
ArtistMenu(
originalArtist = artist,
coroutineScope = coroutineScope,
onDismiss = menuState::dismiss
)
}
}
)
.animateItem()
)
}
}
}
}
Expand Down
Loading

0 comments on commit 4fd8cad

Please sign in to comment.