draw a compact blob gradient behind the mini player

This commit is contained in:
austinried
2026-10-04 00:29:54 +00:00
parent de90d11f35
commit 33c5181eb1
2 changed files with 19 additions and 10 deletions
@@ -4,6 +4,7 @@ import androidx.compose.foundation.basicMarquee
import androidx.compose.foundation.clickable
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxWidth
@@ -19,20 +20,19 @@ import androidx.compose.material3.CircularProgressIndicator
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.lerp
import androidx.compose.ui.unit.dp
import com.subtracks.data.model.CoverArtRef
import com.subtracks.playback.PlaybackState
import com.subtracks.ui.components.CoverArt
import com.subtracks.ui.theme.ArtworkColors
import com.subtracks.ui.theme.ArtworkTheme
import com.subtracks.ui.theme.HeroGradient
@Composable
fun MiniPlayer(
@@ -46,11 +46,7 @@ fun MiniPlayer(
) {
val item = state.item ?: return
ArtworkTheme(artwork) {
Surface(
color =
artwork?.let { lerp(it.scheme.surfaceContainerHigh, it.gradientHigh, 0.5f) }
?: MaterialTheme.colorScheme.surfaceContainerHigh,
contentColor = MaterialTheme.colorScheme.onSurface,
Box(
modifier =
modifier.fillMaxWidth().clickable(
interactionSource = remember { MutableInteractionSource() },
@@ -58,6 +54,12 @@ fun MiniPlayer(
onClick = onExpand,
),
) {
HeroGradient(
colors = artwork,
scrollPx = { 0f },
compact = true,
modifier = Modifier.matchParentSize(),
)
Row(
modifier =
Modifier
@@ -210,6 +210,7 @@ fun HeroGradient(
colors: ArtworkColors?,
scrollPx: () -> Float,
modifier: Modifier = Modifier,
compact: Boolean = false,
) {
val high = colors?.gradientHigh ?: MaterialTheme.colorScheme.surfaceContainerHigh
val low = colors?.gradientLow ?: MaterialTheme.colorScheme.background
@@ -218,7 +219,7 @@ fun HeroGradient(
val seed = colors?.blobSeed ?: 0
Canvas(modifier) {
val period = size.height * PERIOD_SCREENS
val period = size.height * if (compact) 1f else PERIOD_SCREENS
if (period <= 0f) return@Canvas
val scroll = scrollPx()
val phase = scroll.mod(period)
@@ -233,10 +234,15 @@ fun HeroGradient(
)
if (accents.isNotEmpty()) {
val random = Random(seed)
repeat(BLOB_COUNT) { index ->
repeat(if (compact) 3 else BLOB_COUNT) { index ->
val centerX = size.width * (0.10f + random.nextFloat() * 0.80f)
val baseY = period * BLOB_ZONE * random.nextFloat()
val radius = size.width * (0.45f + random.nextFloat() * 0.35f)
val radius =
if (compact) {
size.height * (0.70f + random.nextFloat() * 0.70f)
} else {
size.width * (0.45f + random.nextFloat() * 0.35f)
}
val alpha = 0.50f + random.nextFloat() * 0.32f
val accent = accents[index % accents.size]
for (shift in -1..1) {
@@ -253,6 +259,7 @@ fun HeroGradient(
}
}
}
if (compact) return@Canvas
val darkenStart = size.height * DARKEN_START_SCREENS - scroll
val darkenEnd = size.height * DARKEN_END_SCREENS - scroll
drawRect(