Add voice message recording duration indicator and limit (#1628)

---------

Co-authored-by: ElementBot <benoitm+elementbot@element.io>
This commit is contained in:
jonnyandrew 2023-10-24 12:44:53 +01:00 committed by GitHub
parent 8c0d9cc6a0
commit f1b142f002
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
22 changed files with 263 additions and 35 deletions

View file

@ -80,6 +80,7 @@ import io.element.android.wysiwyg.compose.RichTextEditor
import io.element.android.wysiwyg.compose.RichTextEditorState
import kotlinx.collections.immutable.ImmutableList
import kotlinx.collections.immutable.persistentListOf
import kotlin.time.Duration.Companion.seconds
@Composable
fun TextComposer(
@ -181,7 +182,7 @@ fun TextComposer(
VoiceMessageState.Sending ->
VoiceMessagePreview(isInteractive = false)
is VoiceMessageState.Recording ->
VoiceMessageRecording(voiceMessageState.level)
VoiceMessageRecording(voiceMessageState.level, voiceMessageState.duration)
VoiceMessageState.Idle -> {}
}
}
@ -751,7 +752,7 @@ internal fun TextComposerVoicePreview() = ElementPreview {
enableVoiceMessages = true,
)
PreviewColumn(items = persistentListOf({
VoicePreview(voiceMessageState = VoiceMessageState.Recording(0.5))
VoicePreview(voiceMessageState = VoiceMessageState.Recording(61.seconds, 0.5))
}, {
VoicePreview(voiceMessageState = VoiceMessageState.Preview)
}, {

View file

@ -36,10 +36,14 @@ import io.element.android.libraries.designsystem.preview.ElementPreview
import io.element.android.libraries.designsystem.preview.PreviewsDayNight
import io.element.android.libraries.designsystem.theme.components.Text
import io.element.android.libraries.theme.ElementTheme
import io.element.android.libraries.ui.utils.time.formatShort
import kotlin.time.Duration
import kotlin.time.Duration.Companion.seconds
@Composable
internal fun VoiceMessageRecording(
level: Double,
duration: Duration,
modifier: Modifier = Modifier,
) {
Row(
@ -53,16 +57,13 @@ internal fun VoiceMessageRecording(
.heightIn(26.dp),
verticalAlignment = Alignment.CenterVertically,
) {
Box(
modifier = Modifier
.size(8.dp)
.background(color = ElementTheme.colors.textCriticalPrimary, shape = CircleShape)
)
RedRecordingDot()
Spacer(Modifier.size(8.dp))
// TODO Replace with timer UI
// Timer
Text(
text = "Recording...", // Not localized because it is a placeholder
text = duration.formatShort(),
color = ElementTheme.colors.textSecondary,
style = ElementTheme.typography.fontBodySmMedium
)
@ -95,8 +96,17 @@ private fun DebugAudioLevel(
}
}
@Composable
private fun RedRecordingDot(
modifier: Modifier = Modifier,
) = Box(
modifier = modifier
.size(8.dp)
.background(color = ElementTheme.colors.textCriticalPrimary, shape = CircleShape)
)
@PreviewsDayNight
@Composable
internal fun VoiceMessageRecordingPreview() = ElementPreview {
VoiceMessageRecording(0.5)
VoiceMessageRecording(0.5, 0.seconds)
}

View file

@ -16,12 +16,15 @@
package io.element.android.libraries.textcomposer.model
import kotlin.time.Duration
sealed class VoiceMessageState {
data object Idle: VoiceMessageState()
data object Preview: VoiceMessageState()
data object Sending: VoiceMessageState()
data class Recording(
val duration: Duration,
val level: Double,
): VoiceMessageState()
}