feat(android): restyle NowPlaying scrubber thumb to match web client
android / Build + lint + test (push) Successful in 3m39s

User feedback: dislikes both the old M3 20dp thumb and the current
10dp slim variant; wants the bare HTML range thumb the web client
shows. Replace SliderDefaults.Thumb with a plain Box(CircleShape +
accent fill, 14dp). Drops the M3 state-layer halo on press and the
implicit elevation/border so the on-screen result matches a
<input type=\"range\" accent-color> rendering. Slider's 48dp hit
slop is intrinsic to the composable, so tapability is unchanged.
This commit is contained in:
2026-06-01 22:40:35 -04:00
parent 74bae74f9f
commit b77a7121ca
@@ -18,6 +18,7 @@ import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.widthIn import androidx.compose.foundation.layout.widthIn
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Icon import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton import androidx.compose.material3.IconButton
@@ -31,7 +32,6 @@ import androidx.compose.material3.Scaffold
import androidx.compose.foundation.interaction.MutableInteractionSource import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.material3.ExperimentalMaterial3Api import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Slider import androidx.compose.material3.Slider
import androidx.compose.ui.unit.DpSize
import androidx.compose.material3.TopAppBar import androidx.compose.material3.TopAppBar
import androidx.compose.material3.TopAppBarDefaults import androidx.compose.material3.TopAppBarDefaults
import androidx.compose.ui.graphics.Brush import androidx.compose.ui.graphics.Brush
@@ -458,16 +458,17 @@ private fun ScrubberRow(positionMs: Long, durationMs: Long, onSeek: (Long) -> Un
modifier = Modifier.fillMaxWidth(), modifier = Modifier.fillMaxWidth(),
colors = sliderColors, colors = sliderColors,
interactionSource = interactionSource, interactionSource = interactionSource,
// Slim 10dp thumb shrinks the scrubber's visual weight. M3 // Plain filled circle to match the web client's `<input
// default is 20dp; halving keeps it tappable (Slider's own // type="range" accent-color>` thumb — flat, no state-layer
// 48dp hit slop is unchanged) but lets it recede into the UI. // ring, no border. M3's SliderDefaults.Thumb paints a state
// Track left at default — the colour pin alone already // layer halo on press; we drop it for visual parity. Slider's
// matches Flutter's slate look. // 48dp hit slop still applies, so tapability is unchanged.
thumb = { thumb = {
SliderDefaults.Thumb( Box(
interactionSource = interactionSource, modifier = Modifier
colors = sliderColors, .size(14.dp)
thumbSize = DpSize(10.dp, 10.dp), .clip(CircleShape)
.background(accent),
) )
}, },
) )