feat: Update UI components with new color themes and enhance navigation interactions

Author: maxrave-dev

app/src/main/java/com/maxrave/simpmusic/extension/UIExt.kt

@@ -1,5 +1,6 @@
 package com.maxrave.simpmusic.extension
 
+import androidx.compose.ui.graphics.lerp as colorLerp
 import android.app.Activity
 import android.content.Context
 import android.content.ContextWrapper
@@ -25,6 +26,7 @@ import androidx.compose.foundation.layout.calculateStartPadding
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.lazy.LazyListItemInfo
 import androidx.compose.foundation.lazy.LazyListState
+import androidx.compose.foundation.lazy.grid.LazyGridState
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.SheetState
 import androidx.compose.material3.SheetValue
@@ -46,6 +48,7 @@ import androidx.compose.ui.BiasAlignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.composed
 import androidx.compose.ui.draw.DrawModifier
+import androidx.compose.ui.draw.blur
 import androidx.compose.ui.draw.drawBehind
 import androidx.compose.ui.geometry.Offset
 import androidx.compose.ui.geometry.Rect
@@ -55,9 +58,11 @@ import androidx.compose.ui.graphics.ColorFilter
 import androidx.compose.ui.graphics.ColorMatrix
 import androidx.compose.ui.graphics.Paint
 import androidx.compose.ui.graphics.Shape
+import androidx.compose.ui.graphics.TransformOrigin
 import androidx.compose.ui.graphics.asImageBitmap
 import androidx.compose.ui.graphics.drawscope.ContentDrawScope
 import androidx.compose.ui.graphics.drawscope.drawIntoCanvas
+import androidx.compose.ui.graphics.layer.GraphicsLayer
 import androidx.compose.ui.graphics.painter.BitmapPainter
 import androidx.compose.ui.graphics.painter.Painter
 import androidx.compose.ui.layout.boundsInWindow
@@ -72,6 +77,7 @@ import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.IntSize
 import androidx.compose.ui.unit.dp
+import androidx.compose.ui.util.lerp
 import androidx.core.app.PictureInPictureModeChangedInfo
 import androidx.core.content.res.ResourcesCompat
 import androidx.core.graphics.ColorUtils
@@ -81,6 +87,8 @@ import com.kmpalette.palette.graphics.Palette
 import com.kyant.backdrop.Backdrop
 import com.kyant.backdrop.drawBackdrop
 import com.kyant.backdrop.effects.blur
+import com.kyant.backdrop.effects.colorControls
+import com.kyant.backdrop.effects.colorFilter
 import com.kyant.backdrop.effects.dispersion
 import com.kyant.backdrop.effects.refraction
 import com.kyant.backdrop.effects.saturation
@@ -97,6 +105,7 @@ import kotlin.math.cos
 import kotlin.math.hypot
 import kotlin.math.max
 import kotlin.math.min
+import kotlin.math.sign
 import kotlin.math.sin
 import kotlin.random.Random
 
@@ -464,6 +473,37 @@ fun LazyListState.isScrollingUp(): Boolean {
     }.value
 }
 
+@Composable
+fun LazyGridState.isScrollingUp(): State<Boolean> {
+    var previousIndex by remember(this) { mutableIntStateOf(firstVisibleItemIndex) }
+    var previousScrollOffset by remember(this) { mutableIntStateOf(firstVisibleItemScrollOffset) }
+
+    LaunchedEffect(Unit) {
+        snapshotFlow { layoutInfo.totalItemsCount }.collect {
+            Logger.w("isScrollingUp", "firstVisibleItemIndex: $firstVisibleItemIndex")
+            previousIndex = firstVisibleItemIndex
+            previousScrollOffset = firstVisibleItemScrollOffset
+        }
+    }
+
+    return remember(this) {
+        derivedStateOf {
+            if (firstVisibleItemIndex > 0) {
+                if (previousIndex != firstVisibleItemIndex) {
+                    previousIndex > firstVisibleItemIndex
+                } else {
+                    previousScrollOffset >= firstVisibleItemScrollOffset
+                }.also {
+                    previousIndex = firstVisibleItemIndex
+                    previousScrollOffset = firstVisibleItemScrollOffset
+                }
+            } else {
+                true
+            }
+        }
+    }
+}
+
 @Suppress("DEPRECATION")
 fun setStatusBarsColor(
     @ColorInt color: Int,
@@ -579,33 +619,35 @@ fun animateAlignmentAsState(targetAlignment: Alignment): State<Alignment> {
 
 fun Modifier.drawBackdropCustomShape(
     backdrop: Backdrop,
+    layer: GraphicsLayer,
+    luminanceAnimation: Float,
     shape: Shape,
-    alpha: Float = 0.3f,
 ): Modifier =
     this.drawBackdrop(
         backdrop = backdrop,
-        shapeProvider = { shape },
-        onDrawSurface = {
-            drawRect(
-                Color.Black.copy(alpha = alpha.coerceIn(0f, 1f)),
+        effects = {
+            val l = (luminanceAnimation * 2f - 1f).let { sign(it) * it * it }
+            colorControls(
+                brightness =
+                    if (l > 0f) lerp(0.1f, 0.5f, l)
+                    else lerp(0.1f, -0.2f, -l),
+                contrast =
+                    if (l > 0f) lerp(1f, 0f, l)
+                    else 1f,
+                saturation = 1.5f
+            )
+            blur(
+                if (l > 0f) lerp(8f.dp.toPx(), 16f.dp.toPx(), l)
+                else lerp(8f.dp.toPx(), 2f.dp.toPx(), -l)
             )
+            refraction(24f.dp.toPx(), size.minDimension / 2f, true)
         },
-    ) {
-        // saturation boost
-        saturation()
-        // blur
-        // lens
-        refraction(
-            height = 16f.dp.toPx(),
-            amount = 84f.dp.toPx(),
-            hasDepthEffect = true,
-        )
-        dispersion(
-            height = 12.dp.toPx(),
-            amount = 24.dp.toPx(),
-        )
-        blur(6.dp.toPx())
-    }
+        onDrawBackdrop = { drawBackdrop ->
+            drawBackdrop()
+            layer.record { drawBackdrop() }
+        },
+        shape = { shape },
+    )
 
 @Composable
 fun PaddingValues.copy(

app/src/main/java/com/maxrave/simpmusic/ui/MainActivity.kt

@@ -14,7 +14,10 @@ import androidx.activity.compose.setContent
 import androidx.activity.enableEdgeToEdge
 import androidx.appcompat.app.AppCompatActivity
 import androidx.appcompat.app.AppCompatDelegate
+import androidx.compose.animation.Animatable
 import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.animation.core.Animatable
+import androidx.compose.animation.core.tween
 import androidx.compose.animation.fadeIn
 import androidx.compose.animation.fadeOut
 import androidx.compose.animation.slideInHorizontally
@@ -36,10 +39,13 @@ import androidx.compose.material3.TextButton
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
 import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.asAndroidBitmap
+import androidx.compose.ui.graphics.rememberGraphicsLayer
 import androidx.compose.ui.graphics.toArgb
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.SpanStyle
@@ -49,13 +55,15 @@ import androidx.compose.ui.text.style.TextDecoration
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import androidx.compose.ui.window.DialogProperties
+import androidx.core.graphics.scale
 import androidx.core.net.toUri
 import androidx.core.os.LocaleListCompat
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import androidx.navigation.compose.currentBackStackEntryAsState
 import androidx.navigation.compose.rememberNavController
 import com.kyant.backdrop.backdrop
-import com.kyant.backdrop.rememberBackdrop
+import com.kyant.backdrop.backdrops.layerBackdrop
+import com.kyant.backdrop.backdrops.rememberLayerBackdrop
 import com.maxrave.common.FIRST_TIME_MIGRATION
 import com.maxrave.common.R
 import com.maxrave.common.SELECTED_LANGUAGE
@@ -83,10 +91,14 @@ import com.maxrave.simpmusic.utils.VersionManager
 import com.maxrave.simpmusic.viewModel.SharedViewModel
 import com.mikepenz.markdown.m3.Markdown
 import com.mikepenz.markdown.m3.markdownTypography
+import kotlinx.coroutines.Dispatchers
+import kotlinx.coroutines.launch
+import kotlinx.coroutines.withContext
 import org.koin.android.ext.android.inject
 import org.koin.core.context.loadKoinModules
 import org.koin.core.context.unloadKoinModules
 import pub.devrel.easypermissions.EasyPermissions
+import java.nio.IntBuffer
 import java.text.SimpleDateFormat
 import java.util.Locale
 
@@ -356,7 +368,7 @@ class MainActivity : AppCompatActivity() {
                     isShowNowPlaylistScreen = false
                 }
             }
-            val backdrop = rememberBackdrop()
+            val backdrop = rememberLayerBackdrop()
             var isScrolledToTop by rememberSaveable {
                 mutableStateOf(false)
             }
@@ -420,7 +432,7 @@ class MainActivity : AppCompatActivity() {
                                 .fillMaxSize()
                                 .then(
                                     if (isLiquidGlassEnabled == DataStoreManager.TRUE) {
-                                        Modifier.backdrop(backdrop)
+                                        Modifier.layerBackdrop(backdrop)
                                     } else {
                                         Modifier
                                     },

app/src/main/java/com/maxrave/simpmusic/ui/component/GridLibraryPlaylist.kt

@@ -23,12 +23,16 @@ import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.rounded.Add
 import androidx.compose.material3.Icon
+import androidx.compose.material3.OutlinedTextFieldDefaults.contentPadding
 import androidx.compose.material3.Text
 import androidx.compose.material3.pulltorefresh.PullToRefreshBox
 import androidx.compose.material3.pulltorefresh.PullToRefreshDefaults
 import androidx.compose.material3.pulltorefresh.rememberPullToRefreshState
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.derivedStateOf
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.remember
 import androidx.compose.runtime.snapshotFlow
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
@@ -47,13 +51,15 @@ import com.maxrave.domain.data.type.PlaylistType
 import com.maxrave.domain.utils.LocalResource
 import com.maxrave.logger.Logger
 import com.maxrave.simpmusic.extension.angledGradientBackground
+import com.maxrave.simpmusic.extension.isScrollingUp
 import com.maxrave.simpmusic.ui.navigation.destination.list.AlbumDestination
 import com.maxrave.simpmusic.ui.navigation.destination.list.LocalPlaylistDestination
 import com.maxrave.simpmusic.ui.navigation.destination.list.PlaylistDestination
 import com.maxrave.simpmusic.ui.navigation.destination.list.PodcastDestination
 import com.maxrave.simpmusic.ui.theme.seed
 import com.maxrave.simpmusic.ui.theme.typo
 import com.maxrave.simpmusic.ui.theme.white
+import kotlinx.coroutines.flow.combine
 
 @Composable
 inline fun <reified T> GridLibraryPlaylist(
@@ -66,10 +72,21 @@ inline fun <reified T> GridLibraryPlaylist(
 ) {
     Logger.w("GridLibraryPlaylist", "Generic Type: ${T::class.java}")
     val state = rememberLazyGridState()
+    val isScrollUp by state.isScrollingUp()
+
+    LaunchedEffect(isScrollUp) {
+        if (state.firstVisibleItemIndex <= 1) {
+            return@LaunchedEffect
+        }
+        onScrolling.invoke(isScrollUp)
+    }
+
     LaunchedEffect(state) {
         snapshotFlow { state.firstVisibleItemIndex }
             .collect {
-                onScrolling.invoke(it <= 1)
+                if (it <= 1) {
+                    onScrolling.invoke(true)
+                }
             }
     }
     val pullToRefreshState = rememberPullToRefreshState()