Add voice message recording duration indicator and limit (#1628)
--------- Co-authored-by: ElementBot <benoitm+elementbot@element.io>
This commit is contained in:
parent
8c0d9cc6a0
commit
f1b142f002
22 changed files with 263 additions and 35 deletions
|
|
@ -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)
|
||||
}, {
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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()
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue