diff --git a/apps/android/app/src/main/java/chat/simplex/app/views/chat/ComposeVoiceView.kt b/apps/android/app/src/main/java/chat/simplex/app/views/chat/ComposeVoiceView.kt index 1c9810e253..7244ce41aa 100644 --- a/apps/android/app/src/main/java/chat/simplex/app/views/chat/ComposeVoiceView.kt +++ b/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, duration: MutableState) { +fun FinishedRecordingSlider(backgroundColor: Color, progress: MutableState, duration: MutableState, 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)) }, diff --git a/apps/android/app/src/main/java/chat/simplex/app/views/chat/item/CIVoiceView.kt b/apps/android/app/src/main/java/chat/simplex/app/views/chat/item/CIVoiceView.kt index 3d4b8a7e0a..f5ca6d7596 100644 --- a/apps/android/app/src/main/java/chat/simplex/app/views/chat/item/CIVoiceView.kt +++ b/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)) } } diff --git a/apps/android/app/src/main/java/chat/simplex/app/views/helpers/RecAndPlay.kt b/apps/android/app/src/main/java/chat/simplex/app/views/helpers/RecAndPlay.kt index 5253918979..f3aa27aa24 100644 --- a/apps/android/app/src/main/java/chat/simplex/app/views/helpers/RecAndPlay.kt +++ b/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) { - player.seekTo(ms) + fun seekTo(ms: Int, pro: MutableState, filePath: String?) { pro.value = ms + if (this.currentlyPlaying.value?.first == filePath) { + player.seekTo(ms) + } } fun duration(filePath: String): Int? {