Skip to content

Commit

Permalink
update playlist
Browse files Browse the repository at this point in the history
add new playlist screen
  • Loading branch information
hm4uc committed Nov 27, 2024
1 parent c18ff46 commit 621b14c
Show file tree
Hide file tree
Showing 15 changed files with 424 additions and 64 deletions.
3 changes: 3 additions & 0 deletions .idea/deploymentTargetSelector.xml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

11 changes: 9 additions & 2 deletions app/src/main/java/com/example/harmonyhub/HarmonyHubApp.kt
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,7 @@ import com.example.harmonyhub.ui.account.LoginScreen
import com.example.harmonyhub.ui.account.NewPasswordScreen
import com.example.harmonyhub.ui.account.RegisterScreen
import com.example.harmonyhub.ui.account.VerificationScreen
import com.example.harmonyhub.ui.library.AddSongToPlaylistScreen
import com.example.harmonyhub.ui.library.PlaylistSongListScreen
import com.example.harmonyhub.ui.play.PlayScreen
import com.example.harmonyhub.ui.profile.ProfileScreen
Expand All @@ -73,6 +74,7 @@ enum class HarmonyHubScreen(@StringRes val title: Int, val icon: ImageVector) {
Verification(title = R.string.verification, icon = Icons.Default.Info),
NewPassword(title = R.string.newPassword, icon = Icons.Default.Lock),
PlaylistSongList(title = R.string.playlistSongList, icon = Icons.Default.AccountBox),
AddSongToPlaylist(title = R.string.addSongToPlaylist, icon = Icons.Default.AccountBox),
}

private val gradientBackground = Brush.verticalGradient(
Expand Down Expand Up @@ -257,8 +259,6 @@ fun HarmonyHubApp(
composable(route = HarmonyHubScreen.Playlist.name) {
PlaylistsScreen(
onBackButtonClicked = { navController.popBackStack() },
onAddNewPlaylistClicked = {
},
onPlaylistClicked = {
navController.navigate(HarmonyHubScreen.PlaylistSongList.name)
},
Expand Down Expand Up @@ -304,6 +304,13 @@ fun HarmonyHubApp(
}
composable(route = HarmonyHubScreen.PlaylistSongList.name){
PlaylistSongListScreen(
playlistName = "Playlist 1",
onBackButtonClicked = { navController.popBackStack() },
onAddButtonClicked = { navController.navigate(HarmonyHubScreen.AddSongToPlaylist.name) }
)
}
composable(route = HarmonyHubScreen.AddSongToPlaylist.name) {
AddSongToPlaylistScreen(
playlistName = "Playlist 1",
onBackButtonClicked = { navController.popBackStack() }
)
Expand Down
16 changes: 12 additions & 4 deletions app/src/main/java/com/example/harmonyhub/ui/components/SongCard.kt
Original file line number Diff line number Diff line change
Expand Up @@ -21,13 +21,20 @@ import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.platform.testTag
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

data class Song(val id: String,val name: String, val artist: String, val imageResId: Int, val url: String)
data class Song(
val id: String,
val name: String,
val artist: String,
val imageResId: Int,
val url: String
)

fun Song.contains(query: String, ignoreCase: Boolean = true): Boolean {
return this.name.contains(query, ignoreCase) || this.artist.contains(query, ignoreCase)
Expand All @@ -36,13 +43,14 @@ fun Song.contains(query: String, ignoreCase: Boolean = true): Boolean {
@Composable
fun SongCard(
song: Song,
more: ImageVector,
onSongClick: (String) -> Unit
) {
Row(
modifier = Modifier
.fillMaxWidth()
.padding(vertical = 8.dp)
.clickable{onSongClick(song.id)},
.clickable { onSongClick(song.id) },

verticalAlignment = Alignment.CenterVertically
) {
Expand Down Expand Up @@ -79,9 +87,9 @@ fun SongCard(
// Xử lý menu hành động tại đây
}) {
Icon(
imageVector = Icons.Default.MoreVert,
imageVector = more,
contentDescription = "More Options",
tint = Color.Gray
tint = if (more == Icons.Default.MoreVert) Color.Gray else Color.White
)
}
}
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,170 @@
package com.example.harmonyhub.ui.library

import androidx.compose.foundation.gestures.detectTapGestures
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
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.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.automirrored.filled.ArrowBack
import androidx.compose.material.icons.filled.AddCircle
import androidx.compose.material.icons.filled.Check
import androidx.compose.material.icons.filled.Clear
import androidx.compose.material.icons.filled.Search
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.Text
import androidx.compose.material3.TextField
import androidx.compose.material3.TextFieldDefaults.textFieldColors
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.input.pointer.pointerInput
import androidx.compose.ui.platform.LocalFocusManager
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.example.harmonyhub.data.SongRepository
import com.example.harmonyhub.ui.components.Song
import com.example.harmonyhub.ui.components.SongCard
import com.example.harmonyhub.ui.components.contains
import com.example.harmonyhub.ui.theme.NotoSans

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun AddSongToPlaylistScreen(
playlistName: String,
onBackButtonClicked: () -> Unit,
) {
val allSongs: List<Song> = SongRepository.allSongs

var query by remember { mutableStateOf("") }
val focusManager = LocalFocusManager.current

// Lọc danh sách bài hát theo từ khóa
val searchResults = allSongs.filter { it.contains(query, ignoreCase = true) }

Column(
modifier = Modifier
.fillMaxSize()
.padding(8.dp)
.pointerInput(Unit) {
detectTapGestures(onTap = {
focusManager.clearFocus()
})
}
) {
Spacer(modifier = Modifier.height(16.dp))

// Thanh tiêu đề
Row(
modifier = Modifier
.fillMaxWidth(),
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.SpaceBetween
) {
Row(
verticalAlignment = Alignment.CenterVertically
) {
IconButton(onClick = { onBackButtonClicked() }) {
Icon(
imageVector = Icons.AutoMirrored.Filled.ArrowBack,
contentDescription = "Back",
modifier = Modifier.size(24.dp)
)
}
Text(
text = "Thêm bài hát vào playlist",
style = TextStyle(
fontFamily = NotoSans,
fontWeight = FontWeight.Bold,
fontSize = 24.sp,
color = Color.White
)
)
}
Spacer(modifier = Modifier.weight(1f))

IconButton(onClick = {
/* Handle saving playlist when clicked */
onBackButtonClicked()
}) {
Icon(
imageVector = Icons.Default.Check,
contentDescription = "Done",
tint = Color(0xFF00FAF2),
modifier = Modifier.size(24.dp)
)
}
}
Spacer(modifier = Modifier.height(16.dp))

// Ô tìm kiếm
TextField(
value = query,
onValueChange = { query = it },
placeholder = {
Text(
text = "Tìm kiếm bài hát...",
style = TextStyle(fontFamily = NotoSans, fontSize = 16.sp)
)
},
leadingIcon = {
Icon(imageVector = Icons.Default.Search, contentDescription = "Search")
},
modifier = Modifier
.fillMaxWidth()
.padding(bottom = 8.dp)
.clip(RoundedCornerShape(16.dp)),
singleLine = true,
maxLines = 1,
textStyle = TextStyle(fontFamily = NotoSans, fontSize = 20.sp),
colors = textFieldColors(
focusedIndicatorColor = Color.Transparent,
unfocusedIndicatorColor = Color.Transparent,
disabledIndicatorColor = Color.Transparent,
containerColor = Color.Gray.copy(alpha = 0.2f)
),
trailingIcon = {
if (query.isNotEmpty()) {
IconButton(onClick = { query = "" }) {
Icon(imageVector = Icons.Default.Clear, contentDescription = "Clear")
}
}
},
)
Text(
text = if (query.isEmpty()) "Phát gần đây" else "Kết quả tìm kiếm",
fontFamily = NotoSans,
fontSize = 20.sp,
fontWeight = FontWeight.Bold,
modifier = Modifier.padding(8.dp)
)

LazyColumn(
modifier = Modifier.fillMaxSize()
) {
items(searchResults) { song ->
SongCard(song = song, more = Icons.Default.AddCircle, onSongClick = {})
}
}
}

}
Original file line number Diff line number Diff line change
Expand Up @@ -114,15 +114,15 @@ fun ArtistScreen(
painter = painterResource(id = R.drawable.icons8_circled_play_64),
contentDescription = "Play",
tint = Color(0xFF00FAF2),
modifier = Modifier.size(40.dp)
modifier = Modifier.size(50.dp)
)
}
IconButton(onClick = { /* Share Action */ }) {
Icon(
imageVector = Icons.Default.Share,
contentDescription = "Share",
tint = Color.White,
modifier = Modifier.size(30.dp)
modifier = Modifier.size(25.dp)
)
}
}
Expand All @@ -144,7 +144,11 @@ fun ArtistScreen(

LazyColumn {
items(songs) { song ->
SongCard(song = song, onSongClick = onSongClick)
SongCard(
song = song,
more = Icons.Default.MoreVert,
onSongClick = onSongClick
)
}
}
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,6 @@ fun ArtistsFollowingScreen(
modifier = Modifier.size(24.dp)
)
}
Spacer(modifier = Modifier.width(8.dp))
Text(
text = "Nghệ sĩ đang theo dõi",
style = TextStyle(
Expand All @@ -114,6 +113,7 @@ fun ArtistsFollowingScreen(
}
}

Spacer(modifier = Modifier.height(16.dp))

// Ô tìm kiếm
TextField(
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
package com.example.harmonyhub.ui.library

import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.MoreVert
import androidx.compose.runtime.Composable
import com.example.harmonyhub.data.SongRepository
import com.example.harmonyhub.ui.components.Song
Expand All @@ -11,6 +13,7 @@ fun DownloadScreen(onBackButtonClicked: () -> Unit)

SongList(
title = "Tải xuống",
more = Icons.Default.MoreVert,
songs = allSongs,
onBackButtonClicked = onBackButtonClicked,
)
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
package com.example.harmonyhub.ui.library

import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.MoreVert
import androidx.compose.runtime.Composable
import com.example.harmonyhub.data.SongRepository
import com.example.harmonyhub.ui.components.Song
Expand All @@ -12,6 +14,7 @@ fun FavoriteScreen(

SongList(
title = "Yêu thích",
more = Icons.Default.MoreVert,
songs = allSongs,
onBackButtonClicked = onBackButtonClicked,
)
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
package com.example.harmonyhub.ui.library

import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.MoreVert
import androidx.compose.runtime.Composable
import com.example.harmonyhub.data.SongRepository
import com.example.harmonyhub.ui.components.Song
Expand All @@ -11,7 +13,8 @@ fun HistoryScreen(
val allSongs: List<Song> = SongRepository.allSongs

SongList(
title = "Tất cả bài hát",
title = "Lịch sử phát",
more = Icons.Default.MoreVert,
songs = allSongs,
onBackButtonClicked = onBackButtonClicked,
)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,8 @@ import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.MoreVert
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.Surface
Expand Down Expand Up @@ -201,6 +203,7 @@ fun LibraryScreen(
items(SongRepository.allSongs.take(5)) { song ->
SongCard(
song = song,
more = Icons.Default.MoreVert,
onSongClick = { onPlaySongClicked(song.id) }
)
}
Expand Down
Loading

0 comments on commit 621b14c

Please sign in to comment.