android: paddings and background for voice messages (#2422)

* android: paddings and background for voice messages

* filePath for seek method

* paddings

apps/android/app/src/main/java/chat/simplex/app/views/chat/ComposeVoiceView.kt

@@ -100,7 +100,7 @@ fun ComposeVoiceView(
     }
 
     if (finishedRecording) {
-      FinishedRecordingSlider(sentColor, progress, duration)
+      FinishedRecordingSlider(sentColor, progress, duration, filePath)
     } else {
       RecordingInProgressSlider(recordedDurationMs)
     }
@@ -108,17 +108,18 @@ fun ComposeVoiceView(
 }
 
 @Composable
-fun FinishedRecordingSlider(backgroundColor: Color, progress: MutableState<Int>, duration: MutableState<Int>) {
+fun FinishedRecordingSlider(backgroundColor: Color, progress: MutableState<Int>, duration: MutableState<Int>, filePath: String) {
   val dp4 = with(LocalDensity.current) { 4.dp.toPx() }
   val dp10 = with(LocalDensity.current) { 10.dp.toPx() }
   val primary = MaterialTheme.colors.primary
-  val inactiveTrackColor = MaterialTheme.colors.primary.mixWith(backgroundColor, 0.24f)
+  val inactiveTrackColor = MaterialTheme.colors.primary.mixWith(
+    backgroundColor.copy(1f).mixWith(MaterialTheme.colors.background, backgroundColor.alpha),
+    0.24f)
   Slider(
     progress.value.toFloat(),
-    onValueChange = { AudioPlayer.seekTo(it.toInt(), progress) },
+    onValueChange = { AudioPlayer.seekTo(it.toInt(), progress, filePath) },
     Modifier
       .fillMaxWidth()
-      .padding(top = 0.dp)
       .drawBehind {
         drawRect(primary, Offset(0f, (size.height - dp4) / 2), size = androidx.compose.ui.geometry.Size(dp10, dp4))
         drawRect(inactiveTrackColor, Offset(size.width - dp10, (size.height - dp4) / 2), size = androidx.compose.ui.geometry.Size(dp10, dp4))
@@ -148,7 +149,6 @@ fun RecordingInProgressSlider(recordedDurationMs: Int) {
     onValueChange = {},
     Modifier
       .fillMaxWidth()
-      .padding(top = 0.dp)
       .drawBehind {
         drawRect(primary, Offset(0f, (size.height - dp4) / 2), size = androidx.compose.ui.geometry.Size(dp10, dp4))
       },

apps/android/app/src/main/java/chat/simplex/app/views/chat/item/CIVoiceView.kt

@@ -1,5 +1,6 @@
 package chat.simplex.app.views.chat.item
 
+import androidx.compose.foundation.background
 import androidx.compose.foundation.combinedClickable
 import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.shape.CornerSize
@@ -9,8 +10,7 @@ import androidx.compose.runtime.*
 import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.clip
-import androidx.compose.ui.draw.drawWithCache
+import androidx.compose.ui.draw.*
 import androidx.compose.ui.geometry.Offset
 import androidx.compose.ui.geometry.Size
 import androidx.compose.ui.graphics.*
@@ -38,7 +38,7 @@ fun CIVoiceView(
   longClick: () -> Unit,
 ) {
   Row(
-    Modifier.padding(top = if (hasText) 14.dp else 4.dp, bottom = if (hasText) 14.dp else 6.dp, start = 6.dp, end = 6.dp),
+    Modifier.padding(top = if (hasText) 14.dp else 4.dp, bottom = if (hasText) 14.dp else 6.dp, start = if (hasText) 6.dp else 0.dp, end = if (hasText) 6.dp else 0.dp),
     verticalAlignment = Alignment.CenterVertically
   ) {
     if (file != null) {
@@ -65,7 +65,7 @@ fun CIVoiceView(
         }
       }
       VoiceLayout(file, ci, text, audioPlaying, progress, duration, brokenAudio, sent, hasText, timedMessagesTTL, play, pause, longClick) {
-        AudioPlayer.seekTo(it, progress)
+        AudioPlayer.seekTo(it, progress, filePath)
       }
     } else {
       VoiceMsgIndicator(null, false, sent, hasText, null, null, false, {}, {}, longClick)
@@ -96,22 +96,35 @@ private fun VoiceLayout(
   onProgressChanged: (Int) -> Unit,
 
 ) {
-  val colors = SliderDefaults.colors(
-    inactiveTrackColor = MaterialTheme.colors.primary.mixWith(MaterialTheme.colors.background, 0.24f)
-  )
-
   @Composable
-  fun RowScope.Slider() {
+  fun RowScope.Slider(backgroundColor: Color, padding: PaddingValues = PaddingValues(horizontal = DEFAULT_PADDING_HALF)) {
     var movedManuallyTo by rememberSaveable(file.fileId) { mutableStateOf(-1) }
     if (audioPlaying.value || progress.value > 0 || movedManuallyTo == progress.value) {
+      val dp4 = with(LocalDensity.current) { 4.dp.toPx() }
+      val dp10 = with(LocalDensity.current) { 10.dp.toPx() }
+      val primary = MaterialTheme.colors.primary
+      val inactiveTrackColor =
+        MaterialTheme.colors.primary.mixWith(
+          backgroundColor.copy(1f).mixWith(MaterialTheme.colors.background, backgroundColor.alpha),
+          0.24f)
       val width = with(LocalDensity.current) { LocalView.current.width.toDp() }
+      val colors = SliderDefaults.colors(
+        inactiveTrackColor = inactiveTrackColor
+      )
       Slider(
         progress.value.toFloat(),
         onValueChange = {
           onProgressChanged(it.toInt())
           movedManuallyTo = it.toInt()
         },
-        Modifier.size(width, 48.dp).weight(1f).padding(horizontal = DEFAULT_PADDING_HALF / 2),
+        Modifier
+          .size(width, 48.dp)
+          .weight(1f)
+          .padding(padding)
+          .drawBehind {
+            drawRect(primary, Offset(0f, (size.height - dp4) / 2), size = androidx.compose.ui.geometry.Size(dp10, dp4))
+            drawRect(inactiveTrackColor, Offset(size.width - dp10, (size.height - dp4) / 2), size = androidx.compose.ui.geometry.Size(dp10, dp4))
+          },
         valueRange = 0f..duration.value.toFloat(),
         colors = colors
       )
@@ -126,18 +139,20 @@ private fun VoiceLayout(
   }
   when {
     hasText -> {
+      val sentColor = CurrentColors.collectAsState().value.appColors.sentMessage
+      val receivedColor = CurrentColors.collectAsState().value.appColors.receivedMessage
       Spacer(Modifier.width(6.dp))
       VoiceMsgIndicator(file, audioPlaying.value, sent, hasText, progress, duration, brokenAudio, play, pause, longClick)
       Row(verticalAlignment = Alignment.CenterVertically) {
         DurationText(text, PaddingValues(start = 12.dp))
-        Slider()
+        Slider(if (ci.chatDir.sent) sentColor else receivedColor)
       }
     }
     sent -> {
       Row {
         Row(Modifier.weight(1f, false), verticalAlignment = Alignment.CenterVertically, horizontalArrangement = Arrangement.End) {
           Spacer(Modifier.height(56.dp))
-          Slider()
+          Slider(MaterialTheme.colors.background, PaddingValues(end = DEFAULT_PADDING_HALF + 3.dp))
           DurationText(text, PaddingValues(end = 12.dp))
         }
         Column {
@@ -158,7 +173,7 @@ private fun VoiceLayout(
         }
         Row(Modifier.weight(1f, false), verticalAlignment = Alignment.CenterVertically, horizontalArrangement = Arrangement.Start) {
           DurationText(text, PaddingValues(start = 12.dp))
-          Slider()
+          Slider(MaterialTheme.colors.background, PaddingValues(start = DEFAULT_PADDING_HALF + 3.dp))
           Spacer(Modifier.height(56.dp))
         }
       }

apps/android/app/src/main/java/chat/simplex/app/views/helpers/RecAndPlay.kt

@@ -274,9 +274,11 @@ object AudioPlayer {
     audioPlaying.value = false
   }
 
-  fun seekTo(ms: Int, pro: MutableState<Int>) {
-    player.seekTo(ms)
+  fun seekTo(ms: Int, pro: MutableState<Int>, filePath: String?) {
     pro.value = ms
+    if (this.currentlyPlaying.value?.first == filePath) {
+      player.seekTo(ms)
+    }
   }
 
   fun duration(filePath: String): Int? {