On-Going Development

.gitignore

@@ -13,3 +13,6 @@
 .externalNativeBuild
 .cxx
 local.properties
+
+*.apk
+**/*.apk

app/.gitignore

@@ -1 +1,2 @@
-/build
+/build
+/release

app/build.gradle

@@ -55,7 +55,7 @@ dependencies {
 
     // version record for all core packages...
     def core_kotlin_version = "1.10.0"
-    def compose_activity_version = "1.7.0"
+    def compose_activity_version = "1.7.1"
 
     // testing libraries version record
     def testing_junit_version = "4.13.2"
@@ -70,7 +70,7 @@ dependencies {
     def retrofit_version = "2.9.0"
     def okhttp_version = "4.10.0"
     def room_version = "2.5.1"
-    def exo_player_version = "2.18.5"
+    def exo_player_version = "2.18.6"
     def nav_version = "2.5.3"
     def accompanist_version = "0.30.1"
 
@@ -87,6 +87,7 @@ dependencies {
     implementation "androidx.compose.ui:ui"
     implementation "androidx.compose.ui:ui-tooling-preview"
     implementation "androidx.compose.material:material"
+    implementation "androidx.compose.material:material-icons-core:"
     implementation "androidx.compose.material:material-icons-extended:"
 
     // testing libraries/packages
@@ -108,8 +109,10 @@ dependencies {
     // compose ViewModel
     implementation "androidx.lifecycle:lifecycle-viewmodel-compose:$compose_lifecycle_version"
     implementation "androidx.lifecycle:lifecycle-viewmodel-ktx:$compose_lifecycle_version"
+    implementation "androidx.lifecycle:lifecycle-runtime-compose:$compose_lifecycle_version"
 
     // Coil - to render remote images
+    implementation("io.coil-kt:coil:$coil_version")
     implementation "io.coil-kt:coil-compose:$coil_version"
 
     // Retrofit and GSON parser - for network calls
@@ -135,4 +138,14 @@ dependencies {
     implementation 'com.google.firebase:firebase-firestore-ktx'
 
     implementation "com.google.accompanist:accompanist-systemuicontroller:$accompanist_version"
+
+    // Palette - for extracting colors from images
+    implementation "androidx.palette:palette-ktx:1.0.0"
+
+    // Iconics - for using custom icons
+    implementation "com.mikepenz:iconics-core:5.4.0"
+    implementation "com.mikepenz:iconics-compose:5.4.0"
+    implementation 'com.mikepenz:ionicons-typeface:2.0.1.7-kotlin@aar'
+    implementation 'com.mikepenz:octicons-typeface:11.1.0.0-kotlin@aar'
+
 }

app/src/main/AndroidManifest.xml

@@ -2,6 +2,8 @@
 <manifest xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:tools="http://schemas.android.com/tools">
 
+    <uses-permission android:name="android.permission.INTERNET" />
+
     <application
         android:name=".MainApplication"
         android:allowBackup="true"

app/src/main/java/com/sobhanbera/noisymelo/sobyte/MainActivity.kt

@@ -3,11 +3,14 @@ package com.sobhanbera.noisymelo.sobyte
 import android.os.Bundle
 import androidx.activity.ComponentActivity
 import androidx.activity.compose.setContent
+import androidx.compose.runtime.collectAsState
 import androidx.core.view.WindowCompat
+import androidx.lifecycle.viewmodel.compose.viewModel
 import androidx.navigation.compose.rememberNavController
 import com.sobhanbera.noisymelo.sobyte.controllers.ScreenController
 import com.sobhanbera.noisymelo.sobyte.ui.theme.SobyteTheme
 import com.sobhanbera.noisymelo.sobyte.navigation.SobyteRootNavigation
+import com.sobhanbera.noisymelo.sobyte.viewmodels.CorePlayerViewModel
 import dagger.hilt.android.AndroidEntryPoint
 
 @AndroidEntryPoint
@@ -23,9 +26,15 @@ class MainActivity : ComponentActivity() {
 				val navController = rememberNavController()
 				val screenController = ScreenController(navController) // This is the screen controller made from the root navigation controller
 
+				val corePlayerViewModel: CorePlayerViewModel = viewModel()
+				val corePlayerState = corePlayerViewModel.state.collectAsState().value
+
 				SobyteRootNavigation(
 					navController = navController,
-					screenController = screenController
+					screenController = screenController,
+
+					corePlayerViewModel = corePlayerViewModel,
+					corePlayerState = corePlayerState,
 				)
 			}
 		}

app/src/main/java/com/sobhanbera/noisymelo/sobyte/components/AppLogoHeader.kt

@@ -0,0 +1,74 @@
+package com.sobhanbera.noisymelo.sobyte.components
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.*
+import androidx.compose.material.Icon
+import androidx.compose.material.MaterialTheme
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.rounded.Search
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.ColorFilter
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.mikepenz.iconics.typeface.library.ionicons.Ionicons
+import com.mikepenz.iconics.typeface.library.octicons.Octicons
+import com.sobhanbera.noisymelo.sobyte.configs.*
+import com.sobhanbera.noisymelo.sobyte.funextension.scaleOnClick
+import com.sobhanbera.noisymelo.sobyte.ui.theme.extras
+import com.sobhanbera.noisymelo.sobyte.ui.theme.gutters
+
+@Composable
+fun AppLogoHeader(
+	onClickSearch: () -> Unit = {},
+) {
+	Row(
+		horizontalArrangement = Arrangement.Center,
+		verticalAlignment = Alignment.CenterVertically,
+		modifier = Modifier
+			.fillMaxWidth()
+	) {
+		Row(
+			horizontalArrangement = Arrangement.SpaceBetween,
+			verticalAlignment = Alignment.CenterVertically,
+			modifier = Modifier
+				.width(TRACK_ARTWORK_WIDTH_LARGE.dp)
+				.padding(top = MaterialTheme.gutters.regular.dp)
+		) {
+			// app logo as small icon
+			Box(
+				modifier = Modifier
+					.padding(horizontal = MaterialTheme.gutters.regular.dp)
+					.scaleOnClick {}
+			) {
+				Image(
+					painter = painterResource(id = DEFAULT_LOGO_RESOURCE_ID),
+					contentDescription = "",
+					modifier = Modifier
+						.requiredWidth(DEFAULT_LOGO_RENDER_WIDTH.dp)
+						.requiredHeight(DEFAULT_LOGO_RENDER_HEIGHT.dp)
+				)
+			}
+
+			// search icon to navigation to search screen
+			Box(modifier = Modifier
+				.padding(MaterialTheme.gutters.tiny.dp)
+				.padding(end = (MaterialTheme.gutters.tiny * 2).dp)
+				.scaleOnClick {
+					onClickSearch()
+				}
+			) {
+				SobyteIcon(Octicons.Icon.oct_search)
+			}
+		}
+	}
+}
+
+@Preview(showBackground = true, backgroundColor = 0xFF151515)
+@Composable
+fun AppLogoHeaderPreview() {
+	AppLogoHeader()
+}

app/src/main/java/com/sobhanbera/noisymelo/sobyte/components/MusicTrackInfo.kt

@@ -0,0 +1,8 @@
+package com.sobhanbera.noisymelo.sobyte.components
+
+import androidx.compose.runtime.Composable
+
+@Composable
+fun MusicTrackInfo() {
+	TODO()
+}

app/src/main/java/com/sobhanbera/noisymelo/sobyte/components/SobyteIcon.kt

@@ -0,0 +1,68 @@
+package com.sobhanbera.noisymelo.sobyte.components
+
+import androidx.compose.foundation.layout.size
+import androidx.compose.material.Icon
+import androidx.compose.material.LocalContentAlpha
+import androidx.compose.material.LocalContentColor
+import androidx.compose.material.MaterialTheme
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.NonRestartableComposable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.ColorFilter
+import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.graphics.vector.rememberVectorPainter
+import androidx.compose.ui.unit.dp
+import com.mikepenz.iconics.compose.Image
+import com.mikepenz.iconics.typeface.IIcon
+import com.sobhanbera.noisymelo.sobyte.configs.DEFAULT_ICON_SIZE
+import com.sobhanbera.noisymelo.sobyte.ui.theme.extras
+
+/**
+ * custom icon component
+ * @see [IIcon]
+ *
+ * @param icon icon to render
+ * @param colorFilter color filter to apply to the icon
+ * @param modifier modifier to apply to the icon
+ */
+@Composable
+@NonRestartableComposable
+fun SobyteIcon(
+	icon: IIcon,
+	colorFilter: ColorFilter = ColorFilter.tint(MaterialTheme.colors.extras.text),
+	modifier: Modifier = Modifier
+) {
+	Image(
+		icon,
+		colorFilter = colorFilter,
+		modifier = Modifier
+			.size(DEFAULT_ICON_SIZE.dp)
+			.then(modifier)
+	)
+}
+
+/**
+ * custom icon component
+ * same as [Icon] but with [ImageVector] instead of [IIcon]
+ *
+ * @param imageVector icon to render
+ * @param contentDescription content description for the icon
+ * @param modifier modifier to apply to the icon
+ * @param tint tint to apply to the icon
+ */
+@Composable
+@NonRestartableComposable
+fun SobyteIcon(
+	imageVector: ImageVector,
+	contentDescription: String?,
+	modifier: Modifier = Modifier,
+	tint: Color = LocalContentColor.current.copy(alpha = LocalContentAlpha.current)
+) {
+	Icon(
+		painter = rememberVectorPainter(imageVector),
+		contentDescription = contentDescription,
+		modifier = modifier,
+		tint = tint
+	)
+}

app/src/main/java/com/sobhanbera/noisymelo/sobyte/components/StatusBarSpacer.kt

@@ -0,0 +1,22 @@
+package com.sobhanbera.noisymelo.sobyte.components
+
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+import com.sobhanbera.noisymelo.sobyte.configs.DEVICE_STATUS_BAR_HEIGHT
+
+@Composable
+fun StatusBarSpacer(
+	height: Dp = DEVICE_STATUS_BAR_HEIGHT.dp,
+) {
+	// empty container with some height
+	Box(
+		modifier = Modifier
+			.height(height)
+			.fillMaxWidth()
+	)
+}