Merge branch 'frontend' of https://github.com/nalgnaohel/HKI2425_MobD…

…ev20_Nhom7 into frontend

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

@@ -3,6 +3,7 @@ package com.example.harmonyhub
 import androidx.annotation.StringRes
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
 import androidx.compose.material.icons.Icons
@@ -51,6 +52,7 @@ 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.NowPlayingBar
 import com.example.harmonyhub.ui.play.PlayScreen
 import com.example.harmonyhub.ui.profile.ProfileScreen
 import com.example.harmonyhub.ui.search.SearchScreen
@@ -95,8 +97,7 @@ fun HarmonyHubApp(
     )
 
     Scaffold(
-        modifier = Modifier
-            .fillMaxSize(),
+        modifier = Modifier.fillMaxSize(),
         bottomBar = {
             if (currentScreen !in listOf(
                     HarmonyHubScreen.Login,
@@ -109,10 +110,21 @@ fun HarmonyHubApp(
                     HarmonyHubScreen.Play
                 )
             ) {
-                BottomNavigationBar(navController = navController)
+                Column {
+                    NowPlayingBar(
+                        songName = "Closer",
+                        artistName = "The Chainsmokers, Halsey",
+                        isPlaying = true,
+                        onPlayPauseClick = { /* Handle play/pause logic */ },
+                        onNextClick = { /* Handle next song logic */ },
+                        onPreviousClick = { /* Handle previous song logic */ },
+                        onBarClick = { navController.navigate(HarmonyHubScreen.Play.name) }
+                    )
+                    BottomNavigationBar(navController = navController)
+                }
             }
-        },
-    ) { innerPadding ->
+        }
+    )  { innerPadding ->
         Box(
             modifier = Modifier
                 .fillMaxSize()

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

@@ -0,0 +1,112 @@
+package com.example.harmonyhub.ui.play
+
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Brush
+import androidx.compose.ui.graphics.Color
+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
+import com.example.harmonyhub.R
+import com.example.harmonyhub.ui.theme.NotoSans
+
+@Composable
+fun NowPlayingBar(
+    songName: String,
+    artistName: String,
+    isPlaying: Boolean,
+    onPlayPauseClick: () -> Unit,
+    onNextClick: () -> Unit,
+    onPreviousClick: () -> Unit,
+    onBarClick: () -> Unit
+) {
+    val gradientBackground = Brush.horizontalGradient(
+        colors = listOf(
+            Color(0xFF1D2671).copy(alpha = 0.7f),
+            Color(0xFFC33764).copy(alpha = 0.7f)
+        )
+    )
+    Box(
+        modifier = Modifier
+            .fillMaxWidth()
+            .height(64.dp)
+            .clip(RoundedCornerShape(16.dp))
+            .background(gradientBackground)
+            .clickable { onBarClick() }
+            .padding(horizontal = 16.dp, vertical = 8.dp),
+        contentAlignment = Alignment.CenterStart
+    ) {
+        Row(
+            verticalAlignment = Alignment.CenterVertically,
+            modifier = Modifier.fillMaxWidth()
+        ) {
+            Image(
+                painter = painterResource(id = R.drawable.v),
+                contentDescription = "Album Cover",
+                modifier = Modifier
+                    .size(52.dp)
+                    .clip(RoundedCornerShape(8.dp))
+            )
+            Spacer(modifier = Modifier.width(16.dp))
+
+            Column(modifier = Modifier.weight(1f)) {
+                Text(
+                    text = songName,
+                    color = Color.White,
+                    fontSize = 16.sp,
+                    maxLines = 1,
+                    fontWeight = FontWeight.Bold,
+                    fontFamily = NotoSans
+                )
+                Text(
+                    text = artistName,
+                    color = Color.Gray,
+                    fontSize = 14.sp,
+                    maxLines = 1,
+                    fontFamily = NotoSans
+                )
+            }
+
+            Spacer(modifier = Modifier.width(16.dp))
+
+            IconButton(onClick = { onPreviousClick() }) {
+                Icon(
+                    painter = painterResource(id = R.drawable.icons8_skip_to_start_90),
+                    contentDescription = "Previous",
+                    tint = Color.White
+                )
+            }
+            IconButton(onClick = { onPlayPauseClick() }) {
+                Icon(
+                    painter = painterResource(
+                        id = if (isPlaying) R.drawable.icons8_pause_50 else R.drawable.icons8_circled_play_64
+                    ),
+                    contentDescription = "Play/Pause",
+                    tint = Color.White,
+                    modifier = Modifier.size(if (isPlaying) 38.dp else 32.dp)
+                )
+            }
+            IconButton(onClick = { onNextClick() }) {
+                Icon(
+                    painter = painterResource(id = R.drawable.icons8_next_90),
+                    contentDescription = "Next",
+                    tint = Color.White
+                )
+            }
+        }
+    }
+}
+