feat: gradient background on player #100

Malopieds · Jul 2, 2024 · 2650329 · 2650329
1 parent 12449bd
commit 2650329
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 6 deletions.
diff --git a/app/src/main/java/com/malopieds/innertune/ui/component/BottomSheet.kt b/app/src/main/java/com/malopieds/innertune/ui/component/BottomSheet.kt
@@ -21,7 +21,6 @@ import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.offset
 import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.Stable
 import androidx.compose.runtime.derivedStateOf
@@ -34,7 +33,7 @@ import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.geometry.Offset
-import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.Brush
 import androidx.compose.ui.graphics.graphicsLayer
 import androidx.compose.ui.input.nestedscroll.NestedScrollConnection
 import androidx.compose.ui.input.nestedscroll.NestedScrollSource
@@ -58,7 +57,7 @@ import kotlinx.coroutines.launch
 fun BottomSheet(
     state: BottomSheetState,
     modifier: Modifier = Modifier,
-    backgroundColor: Color = MaterialTheme.colorScheme.surface,
+    brushBackgroundColor: Brush,
     onDismiss: (() -> Unit)? = null,
     collapsedContent: @Composable BoxScope.() -> Unit,
     content: @Composable BoxScope.() -> Unit,
@@ -97,7 +96,7 @@ fun BottomSheet(
                     topEnd = if (!state.isExpanded) 16.dp else 0.dp
                 )
             )
-            .background(backgroundColor)
+            .background(brushBackgroundColor)
     ) {
         if (!state.isCollapsed && !state.isDismissed) {
             BackHandler(onBack = state::collapseSoft)

diff --git a/app/src/main/java/com/malopieds/innertune/ui/player/Player.kt b/app/src/main/java/com/malopieds/innertune/ui/player/Player.kt
@@ -61,6 +61,8 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.alpha
 import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Brush
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.ColorFilter
 import androidx.compose.ui.input.nestedscroll.nestedScroll
 import androidx.compose.ui.platform.LocalClipboardManager
@@ -88,12 +90,14 @@ import com.malopieds.innertune.LocalDatabase
 import com.malopieds.innertune.LocalDownloadUtil
 import com.malopieds.innertune.LocalPlayerConnection
 import com.malopieds.innertune.R
+import com.malopieds.innertune.constants.DarkModeKey
 import com.malopieds.innertune.constants.ListThumbnailSize
 import com.malopieds.innertune.constants.PlayerHorizontalPadding
 import com.malopieds.innertune.constants.QueuePeekHeight
 import com.malopieds.innertune.constants.ShowLyricsKey
 import com.malopieds.innertune.constants.ThumbnailCornerRadius
 import com.malopieds.innertune.db.entities.PlaylistSongMap
+import com.malopieds.innertune.extensions.toEnum
 import com.malopieds.innertune.extensions.togglePlayPause
 import com.malopieds.innertune.models.MediaMetadata
 import com.malopieds.innertune.playback.ExoDownloadService
@@ -106,6 +110,9 @@ import com.malopieds.innertune.ui.component.ResizableIconButton
 import com.malopieds.innertune.ui.component.rememberBottomSheetState
 import com.malopieds.innertune.ui.menu.AddToPlaylistDialog
 import com.malopieds.innertune.ui.menu.PlayerMenu
+import com.malopieds.innertune.ui.screens.settings.DarkMode
+import com.malopieds.innertune.utils.dataStore
+import com.malopieds.innertune.utils.get
 import com.malopieds.innertune.utils.joinByBullet
 import com.malopieds.innertune.utils.makeTimeString
 import com.malopieds.innertune.utils.rememberPreference
@@ -395,10 +402,28 @@ fun BottomSheetPlayer(
         expandedBound = state.expandedBound,
     )
 
+    val backgroundColor = MaterialTheme.colorScheme.background
+    val darkMode = context.dataStore[DarkModeKey].toEnum(DarkMode.ON)
+
+    val brushColors = when (darkMode) {
+        DarkMode.OFF -> {
+            Color.White
+        }
+        DarkMode.ON -> {
+            Color.Black
+        }
+        else -> {
+            backgroundColor
+        }
+    }
+
     BottomSheet(
         state = state,
         modifier = modifier,
-        backgroundColor = MaterialTheme.colorScheme.surfaceColorAtElevation(NavigationBarDefaults.Elevation),
+        brushBackgroundColor = Brush.verticalGradient(
+            0.3f to MaterialTheme.colorScheme.surfaceColorAtElevation(NavigationBarDefaults.Elevation),
+            1f to brushColors
+        ),
         onDismiss = {
             playerConnection.player.stop()
             playerConnection.player.clearMediaItems()

diff --git a/app/src/main/java/com/malopieds/innertune/ui/player/Queue.kt b/app/src/main/java/com/malopieds/innertune/ui/player/Queue.kt
@@ -57,6 +57,8 @@ import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.alpha
+import androidx.compose.ui.graphics.Brush
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.input.nestedscroll.nestedScroll
 import androidx.compose.ui.platform.LocalClipboardManager
 import androidx.compose.ui.platform.LocalContext
@@ -182,16 +184,22 @@ fun Queue(
         )
     }
 
+    val mainColor = MaterialTheme.colorScheme.surfaceColorAtElevation(NavigationBarDefaults.Elevation)
+
     BottomSheet(
         state = state,
-        backgroundColor = MaterialTheme.colorScheme.surfaceColorAtElevation(NavigationBarDefaults.Elevation),
+        brushBackgroundColor = Brush.verticalGradient(listOf(mainColor, mainColor)),
         modifier = modifier,
         collapsedContent = {
             Row(
                 horizontalArrangement = Arrangement.Center,
                 verticalAlignment = Alignment.CenterVertically,
                 modifier = Modifier
                     .fillMaxSize()
+                    .background(Brush.verticalGradient(
+                        listOf(Color.White.copy(alpha = 0f),
+                        Color.White.copy(alpha = 0f))
+                    ))
                     .windowInsetsPadding(
                         WindowInsets.systemBars
                             .only(WindowInsetsSides.Bottom + WindowInsetsSides.Horizontal)