feat(android): restyle NowPlaying scrubber thumb to match web client
android / Build + lint + test (push) Successful in 3m39s
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:
@@ -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),
|
||||||
)
|
)
|
||||||
},
|
},
|
||||||
)
|
)
|
||||||
|
|||||||
Reference in New Issue
Block a user