fix: Audio message slider style #WPB-11384

app/src/main/kotlin/com/wire/android/ui/home/conversations/model/messagetypes/audio/AudioMessageType.kt

@@ -19,16 +19,19 @@ package com.wire.android.ui.home.conversations.model.messagetypes.audio
 
 import androidx.compose.foundation.background
 import androidx.compose.foundation.border
+import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.RowScope
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Slider
@@ -43,6 +46,7 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.unit.DpSize
 import androidx.compose.ui.unit.dp
 import com.wire.android.R
 import com.wire.android.media.audiomessage.AudioMediaPlayingState
@@ -157,14 +161,10 @@ private fun SuccessfulAudioMessage(
  onButtonClicked = onPlayButtonClick
  )
 
- Slider(
- value = audioDuration.currentPositionInMs.toFloat(),
- onValueChange = onSliderPositionChange,
- valueRange = 0f..if (totalTimeInMs is AudioState.TotalTimeInMs.Known) totalTimeInMs.value.toFloat() else 0f,
- colors = SliderDefaults.colors(
- inactiveTrackColor = colorsScheme().secondaryButtonDisabledOutline
- ),
- modifier = Modifier.weight(1f)
+ AudioMessageSlider(
+ audioDuration = audioDuration,
+ totalTimeInMs = totalTimeInMs,
+ onSliderPositionChange = onSliderPositionChange
  )
 
  if (audioMediaPlayingState is AudioMediaPlayingState.Fetching) {
@@ -182,6 +182,49 @@ private fun SuccessfulAudioMessage(
  }
 }
 
+/**
+ * Material3 version 1.3.0 introduced several modifications to the Slider component.
+ * These changes may require adjustments to maintain the desired appearance and behavior in your app:
+ * - Thumb size changed to 4dp x 44dp - changed back to old 20dp x 20dp.
+ * - Thumb requires interactionSource - it must be different than Slider to not update thumb appearance during drag.
+ * - Track now draws stop indicator by default - turned off.
+ * - Track adds thumbTrackGapSize - set back to 0dp.
+ * - Track has different height than previously - changed back to old 4.dp.
+ */
+@Composable
+@OptIn(ExperimentalMaterial3Api::class)
+private fun RowScope.AudioMessageSlider(
+ audioDuration: AudioDuration,
+ totalTimeInMs: AudioState.TotalTimeInMs,
+ onSliderPositionChange: (Float) -> Unit,
+) {
+ Slider(
+ value = audioDuration.currentPositionInMs.toFloat(),
+ onValueChange = onSliderPositionChange,
+ valueRange = 0f..if (totalTimeInMs is AudioState.TotalTimeInMs.Known) totalTimeInMs.value.toFloat() else 0f,
+ thumb = {
+ SliderDefaults.Thumb(
+ interactionSource = remember { MutableInteractionSource() },
+ thumbSize = DpSize(dimensions().spacing20x, dimensions().spacing20x)
+ )
+ },
+ track = { sliderState ->
+ SliderDefaults.Track(
+ modifier = Modifier.height(dimensions().spacing4x),
+ sliderState = sliderState,
+ thumbTrackGapSize = dimensions().spacing0x,
+ drawStopIndicator = {
+ // nop we do not want to draw stop indicator at all.
+ }
+ )
+ },
+ colors = SliderDefaults.colors(
+ inactiveTrackColor = colorsScheme().secondaryButtonDisabledOutline
+ ),
+ modifier = Modifier.weight(1f)
+ )
+}
+
 @Composable
 private fun FailedAudioMessage() {
  var audioNotAvailableDialog by remember { mutableStateOf(false) }