WIP - fixed the interactivity issue

Signed-off-by: rapterjet2004 <juliuslinus1@gmail.com>

Author: rapterjet2004

app/src/main/java/com/nextcloud/talk/ui/ComposeWaveformSeekbar.kt

@@ -8,7 +8,6 @@
 package com.nextcloud.talk.ui
 
 import androidx.compose.foundation.background
-import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.size
@@ -17,7 +16,6 @@ import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Slider
-import androidx.compose.material3.SliderState
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
@@ -32,16 +30,16 @@ const val WAVEFORM_THUMB_SIZE = 20
 const val WAVEFORM_SIZE = 30
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable
-fun WaveformSeekBar1(sliderState: SliderState, modifier: Modifier, interaction: MutableInteractionSource, waveData: FloatArray) {
+fun ComposeWaveformSeekBar(value: Float, onValueChange: (Float) -> Unit, modifier: Modifier, waveData: FloatArray) {
     val barWidth = Stroke.DefaultMiter
     val thumbSize = WAVEFORM_THUMB_SIZE.dp
     val inversePrimary = MaterialTheme.colorScheme.inversePrimary
     val onPrimaryContainer = MaterialTheme.colorScheme.onPrimaryContainer
 
     Slider(
-        state = sliderState,
-        interactionSource = interaction,
-        track = { state ->
+        value = value,
+        onValueChange = onValueChange,
+        track = {
             Box(modifier = modifier
                 .drawWithCache {
                     onDrawBehind {
@@ -51,7 +49,7 @@ fun WaveformSeekBar1(sliderState: SliderState, modifier: Modifier, interaction:
                         for (i in waveData.indices) {
                             val x: Float = i * (barWidth + barGap)
                             val y: Float = waveData[i] * height
-                            val isXBeforeThumb = (x / this.size.width) <= state.value + 0.025
+                            val isXBeforeThumb = (x / this.size.width) <= value + 0.025
 
                             drawLine(
                                 if (isXBeforeThumb) inversePrimary else onPrimaryContainer,
@@ -79,27 +77,13 @@ fun WaveformSeekBar1(sliderState: SliderState, modifier: Modifier, interaction:
 @Preview
 fun Preview() {
     val waveData = remember { FloatArray(50) { (Math.random() % 1).toFloat() } }
-    val sliderState = SliderState()
-    val interaction = remember { MutableInteractionSource() }
-    sliderState.onValueChange = { progress ->
-        if (sliderState.isDragging) {
-            // onSeek(message.id, progress)
-        }
-    }
-
-    // to update the slider, it should have
-    sliderState.value
-    // be updated in some kind of async programming callback
-    // but in practice, that is abstracted away due to the magic of
-    // recomposition, leading to just this derived state
-    // sliderState.value = typeContent.seekbarProgress
 
-    WaveformSeekBar1(
-        sliderState,
+    ComposeWaveformSeekBar(
+        0f,
+        {},
         modifier = Modifier
             .height(56.dp)
             .width(200.dp),
-        interaction,
         waveData
     )
 }

app/src/main/java/com/nextcloud/talk/ui/chat/VoiceMessage.kt

@@ -8,8 +8,6 @@
 package com.nextcloud.talk.ui.chat
 
 import android.text.format.DateUtils
-import androidx.compose.foundation.interaction.MutableInteractionSource
-import androidx.compose.foundation.interaction.collectIsDraggedAsState
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxWidth
@@ -24,12 +22,13 @@ import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
 import androidx.compose.material3.MaterialTheme.colorScheme
-import androidx.compose.material3.SliderState
 import androidx.compose.material3.Text
 import androidx.compose.material3.TextButton
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableFloatStateOf
 import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.toArgb
@@ -38,8 +37,8 @@ import androidx.compose.ui.unit.dp
 import com.nextcloud.talk.R
 import com.nextcloud.talk.chat.ui.model.ChatMessageUi
 import com.nextcloud.talk.chat.ui.model.MessageTypeContent
+import com.nextcloud.talk.ui.ComposeWaveformSeekBar
 import com.nextcloud.talk.ui.WAVEFORM_SIZE
-import com.nextcloud.talk.ui.WaveformSeekBar1
 import com.nextcloud.talk.utils.AudioUtils
 
 private const val SEEKBAR_MAX = 100
@@ -92,27 +91,20 @@ fun VoiceMessage(
                         }
                     }
 
-                    // TODO - figure out why this won't be interactive on user drag events
+                    var sliderValue by remember { mutableFloatStateOf(0f) }
+                    sliderValue = typeContent.seekbarProgress * 1f / SEEKBAR_MAX
 
-                    val interaction = remember { MutableInteractionSource() }
-                    val sliderState = SliderState()
-                    typeContent.seekbarProgress * 1f / SEEKBAR_MAX // should be in range 0 to 1
-
-                    // FIXME - this might be problematic
-                    // sliderState.onValueChange = { progress ->
-                    //     if (isDragging) {
-                    //         val progressI = (progress * SEEKBAR_MAX).toInt()
-                    //         onSeek(message.id, progressI)
-                    //     }
-                    // }
-
-                    WaveformSeekBar1(
-                        sliderState,
+                    ComposeWaveformSeekBar(
+                        sliderValue,
+                        {
+                            val progressI = (it * SEEKBAR_MAX).toInt()
+                            onSeek(message.id, progressI)
+                            sliderValue = it
+                        },
                         modifier = Modifier
                             .height(56.dp)
                             .fillMaxWidth()
                             .padding(8.dp), // or weight(1f),
-                        interaction,
                         waveformData
                     )