Skip to content

Commit 5674c96

Browse files
hm4uchm4uc
committed
Merge branch 'frontend' of https://github.com/nalgnaohel/HKI2425_MobDev20_Nhom7 into frontend
2 parents 621b14c + 7dc126f commit 5674c96

File tree

2 files changed

+129
-5
lines changed

2 files changed

+129
-5
lines changed

‎app/src/main/java/com/example/harmonyhub/HarmonyHubApp.kt

Lines changed: 17 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ package com.example.harmonyhub
33
import androidx.annotation.StringRes
44
import androidx.compose.foundation.background
55
import androidx.compose.foundation.layout.Box
6+
import androidx.compose.foundation.layout.Column
67
import androidx.compose.foundation.layout.fillMaxSize
78
import androidx.compose.foundation.layout.padding
89
import androidx.compose.material.icons.Icons
@@ -51,6 +52,7 @@ import com.example.harmonyhub.ui.account.RegisterScreen
5152
import com.example.harmonyhub.ui.account.VerificationScreen
5253
import com.example.harmonyhub.ui.library.AddSongToPlaylistScreen
5354
import com.example.harmonyhub.ui.library.PlaylistSongListScreen
55+
import com.example.harmonyhub.ui.play.NowPlayingBar
5456
import com.example.harmonyhub.ui.play.PlayScreen
5557
import com.example.harmonyhub.ui.profile.ProfileScreen
5658
import com.example.harmonyhub.ui.search.SearchScreen
@@ -95,8 +97,7 @@ fun HarmonyHubApp(
9597
)
9698

9799
Scaffold(
98-
modifier = Modifier
99-
.fillMaxSize(),
100+
modifier = Modifier.fillMaxSize(),
100101
bottomBar = {
101102
if (currentScreen !in listOf(
102103
HarmonyHubScreen.Login,
@@ -109,10 +110,21 @@ fun HarmonyHubApp(
109110
HarmonyHubScreen.Play
110111
)
111112
) {
112-
BottomNavigationBar(navController = navController)
113+
Column {
114+
NowPlayingBar(
115+
songName = "Closer",
116+
artistName = "The Chainsmokers, Halsey",
117+
isPlaying = true,
118+
onPlayPauseClick = { /* Handle play/pause logic */ },
119+
onNextClick = { /* Handle next song logic */ },
120+
onPreviousClick = { /* Handle previous song logic */ },
121+
onBarClick = { navController.navigate(HarmonyHubScreen.Play.name) }
122+
)
123+
BottomNavigationBar(navController = navController)
124+
}
113125
}
114-
},
115-
) { innerPadding ->
126+
}
127+
) { innerPadding ->
116128
Box(
117129
modifier = Modifier
118130
.fillMaxSize()

‎app/src/main/java/com/example/harmonyhub/ui/play/NowPlayingBar.kt

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
package com.example.harmonyhub.ui.play
2+
3+
4+
import androidx.compose.foundation.Image
5+
import androidx.compose.foundation.background
6+
import androidx.compose.foundation.clickable
7+
import androidx.compose.foundation.layout.*
8+
import androidx.compose.foundation.shape.RoundedCornerShape
9+
import androidx.compose.material3.Icon
10+
import androidx.compose.material3.IconButton
11+
import androidx.compose.material3.Text
12+
import androidx.compose.runtime.Composable
13+
import androidx.compose.ui.Alignment
14+
import androidx.compose.ui.Modifier
15+
import androidx.compose.ui.draw.clip
16+
import androidx.compose.ui.graphics.Brush
17+
import androidx.compose.ui.graphics.Color
18+
import androidx.compose.ui.res.painterResource
19+
20+
import androidx.compose.ui.text.font.FontWeight
21+
import androidx.compose.ui.unit.dp
22+
import androidx.compose.ui.unit.sp
23+
import com.example.harmonyhub.R
24+
import com.example.harmonyhub.ui.theme.NotoSans
25+
26+
@Composable
27+
fun NowPlayingBar(
28+
songName: String,
29+
artistName: String,
30+
isPlaying: Boolean,
31+
onPlayPauseClick: () -> Unit,
32+
onNextClick: () -> Unit,
33+
onPreviousClick: () -> Unit,
34+
onBarClick: () -> Unit
35+
) {
36+
val gradientBackground = Brush.horizontalGradient(
37+
colors = listOf(
38+
Color(0xFF1D2671).copy(alpha = 0.7f),
39+
Color(0xFFC33764).copy(alpha = 0.7f)
40+
)
41+
)
42+
Box(
43+
modifier = Modifier
44+
.fillMaxWidth()
45+
.height(64.dp)
46+
.clip(RoundedCornerShape(16.dp))
47+
.background(gradientBackground)
48+
.clickable { onBarClick() }
49+
.padding(horizontal = 16.dp, vertical = 8.dp),
50+
contentAlignment = Alignment.CenterStart
51+
) {
52+
Row(
53+
verticalAlignment = Alignment.CenterVertically,
54+
modifier = Modifier.fillMaxWidth()
55+
) {
56+
Image(
57+
painter = painterResource(id = R.drawable.v),
58+
contentDescription = "Album Cover",
59+
modifier = Modifier
60+
.size(52.dp)
61+
.clip(RoundedCornerShape(8.dp))
62+
)
63+
Spacer(modifier = Modifier.width(16.dp))
64+
65+
Column(modifier = Modifier.weight(1f)) {
66+
Text(
67+
text = songName,
68+
color = Color.White,
69+
fontSize = 16.sp,
70+
maxLines = 1,
71+
fontWeight = FontWeight.Bold,
72+
fontFamily = NotoSans
73+
)
74+
Text(
75+
text = artistName,
76+
color = Color.Gray,
77+
fontSize = 14.sp,
78+
maxLines = 1,
79+
fontFamily = NotoSans
80+
)
81+
}
82+
83+
Spacer(modifier = Modifier.width(16.dp))
84+
85+
IconButton(onClick = { onPreviousClick() }) {
86+
Icon(
87+
painter = painterResource(id = R.drawable.icons8_skip_to_start_90),
88+
contentDescription = "Previous",
89+
tint = Color.White
90+
)
91+
}
92+
IconButton(onClick = { onPlayPauseClick() }) {
93+
Icon(
94+
painter = painterResource(
95+
id = if (isPlaying) R.drawable.icons8_pause_50 else R.drawable.icons8_circled_play_64
96+
),
97+
contentDescription = "Play/Pause",
98+
tint = Color.White,
99+
modifier = Modifier.size(if (isPlaying) 38.dp else 32.dp)
100+
)
101+
}
102+
IconButton(onClick = { onNextClick() }) {
103+
Icon(
104+
painter = painterResource(id = R.drawable.icons8_next_90),
105+
contentDescription = "Next",
106+
tint = Color.White
107+
)
108+
}
109+
}
110+
}
111+
}
112+

0 commit comments

Comments
 (0)