entire solid recording indicator bar stops recording when tapped, not just the small stop icon.

This commit is contained in:
davotoula
2026-03-24 09:08:58 +01:00
parent 6f3308e45c
commit 4e43b14b09
5 changed files with 24 additions and 7 deletions
@@ -50,7 +50,7 @@ fun RecordAudioBox(
modifier: Modifier,
onRecordTaken: (RecordingResult) -> Unit,
maxDurationSeconds: Int? = null,
content: @Composable (Boolean, Int) -> Unit,
content: @Composable (Boolean, Int, () -> Unit) -> Unit,
) {
val mediaRecorder = remember { mutableStateOf<VoiceMessageRecorder?>(null) }
val context = LocalContext.current
@@ -136,6 +136,12 @@ fun RecordAudioBox(
}
}
},
content = { active -> content(active, elapsedSeconds) },
content = { active ->
content(active, elapsedSeconds) {
if (isRecording) {
stopRecording()
}
}
},
)
}
@@ -50,15 +50,17 @@ fun RecordVoiceButton(
) {
var isRecording by remember { mutableStateOf(false) }
var elapsedSeconds by remember { mutableIntStateOf(0) }
var onStopRecording by remember { mutableStateOf({}) }
Column(
verticalArrangement = Arrangement.Center,
) {
// Floating recording indicator at the top
// Floating recording indicator at the top (outside ToggleableBox to avoid scale/circle)
FloatingRecordingIndicator(
modifier = Modifier.height(50.dp),
isRecording = isRecording,
elapsedSeconds = elapsedSeconds,
onClick = onStopRecording,
)
RecordAudioBox(
@@ -69,8 +71,7 @@ fun RecordVoiceButton(
onVoiceTaken(recording)
},
maxDurationSeconds = maxDurationSeconds,
) { recordingState, elapsed ->
// Update parent state after composition completes
) { recordingState, elapsed, onStop ->
SideEffect {
if (isRecording != recordingState) {
isRecording = recordingState
@@ -78,6 +79,7 @@ fun RecordVoiceButton(
if (elapsedSeconds != elapsed) {
elapsedSeconds = elapsed
}
onStopRecording = onStop
}
Box(
@@ -27,6 +27,7 @@ import androidx.compose.animation.core.infiniteRepeatable
import androidx.compose.animation.core.rememberInfiniteTransition
import androidx.compose.animation.core.tween
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxWidth
@@ -176,6 +177,7 @@ fun FloatingRecordingIndicator(
isRecording: Boolean,
elapsedSeconds: Int,
isCompact: Boolean = false,
onClick: (() -> Unit)? = null,
) {
if (!isRecording) return
@@ -199,6 +201,12 @@ fun FloatingRecordingIndicator(
.background(
color = MaterialTheme.colorScheme.primary,
shape = RoundedCornerShape(12.dp),
).then(
if (onClick != null) {
Modifier.clickable(onClick = onClick)
} else {
Modifier
},
),
contentAlignment = Alignment.Center,
) {
@@ -215,7 +215,7 @@ private fun ReRecordButton(
modifier = Modifier,
onRecordTaken = onRecordTaken,
maxDurationSeconds = MAX_VOICE_RECORD_SECONDS,
) { isRecording, elapsedSeconds ->
) { isRecording, elapsedSeconds, _ ->
val contentColor =
if (isRecording) {
MaterialTheme.colorScheme.onPrimary
@@ -672,7 +672,7 @@ fun ReplyViaVoiceReaction(
}
},
maxDurationSeconds = MAX_VOICE_RECORD_SECONDS,
) { isRecording, elapsedSeconds ->
) { isRecording, elapsedSeconds, onStop ->
if (voiceRecordingState != null) {
SideEffect {
if (voiceRecordingState.value != isRecording) {
@@ -689,6 +689,7 @@ fun ReplyViaVoiceReaction(
isRecording = true,
elapsedSeconds = elapsedSeconds,
isCompact = true,
onClick = onStop,
)
} else {
VoiceReplyIcon(iconSizeModifier, grayTint)