Add waveform to voice message preview UI (#1661)

* Add waveform to preview UI

* Update screenshots

* Make random waveform function deterministic

* Update screenshots

---------

Co-authored-by: ElementBot <benoitm+elementbot@element.io>
This commit is contained in:
jonnyandrew 2023-10-27 12:33:35 +01:00 committed by GitHub
parent 0bd9c78836
commit 38de57bb02
13 changed files with 157 additions and 67 deletions

View file

@ -20,4 +20,9 @@ package io.element.android.features.messages.impl.voicemessages
* Resizes the given [0;1024] int list as per unstable MSC3246 spec
* to a [0;1] range float list to be used for waveform rendering.
*/
fun List<Int>.fromMSC3246range(): List<Float> = map { it / 1024f }
internal fun List<Int>.fromMSC3246range(): List<Float> = map { it / 1024f }
/**
* Resizes the given [0;1] float list to [0;1024] int list as per unstable MSC3246 spec.
*/
internal fun List<Float>.toMSC3246range(): List<Int> = map { (it * 1024).toInt() }

View file

@ -28,6 +28,7 @@ import androidx.compose.runtime.setValue
import androidx.core.net.toUri
import androidx.lifecycle.Lifecycle
import io.element.android.features.messages.impl.voicemessages.VoiceMessageException
import io.element.android.features.messages.impl.voicemessages.toMSC3246range
import io.element.android.libraries.architecture.Presenter
import io.element.android.libraries.di.RoomScope
import io.element.android.libraries.di.SingleIn
@ -40,6 +41,8 @@ import io.element.android.libraries.textcomposer.model.VoiceMessageState
import io.element.android.libraries.voicerecorder.api.VoiceRecorder
import io.element.android.libraries.voicerecorder.api.VoiceRecorderState
import io.element.android.services.analytics.api.AnalyticsService
import kotlinx.collections.immutable.ImmutableList
import kotlinx.collections.immutable.toImmutableList
import kotlinx.coroutines.CoroutineScope
import kotlinx.coroutines.launch
import timber.log.Timber
@ -66,6 +69,7 @@ class VoiceMessageComposerPresenter @Inject constructor(
var isSending by remember { mutableStateOf(false) }
val playerState by player.state.collectAsState(initial = VoiceMessageComposerPlayer.State.NotPlaying)
val isPlaying by remember(playerState.isPlaying) { derivedStateOf { playerState.isPlaying } }
val waveform by remember(recorderState) { derivedStateOf { recorderState.finishedWaveform() } }
val onLifecycleEvent = { event: Lifecycle.Event ->
when (event) {
@ -174,11 +178,11 @@ class VoiceMessageComposerPresenter @Inject constructor(
duration = state.elapsedTime,
level = state.level
)
is VoiceRecorderState.Finished -> if (isSending) {
VoiceMessageState.Sending
} else {
VoiceMessageState.Preview(isPlaying = isPlaying)
}
is VoiceRecorderState.Finished -> VoiceMessageState.Preview(
isSending = isSending,
isPlaying = isPlaying,
waveform = waveform,
)
else -> VoiceMessageState.Idle
},
showPermissionRationaleDialog = permissionState.showDialog,
@ -227,7 +231,8 @@ class VoiceMessageComposerPresenter @Inject constructor(
}
}
/**
* Resizes the given [0;1] float list to [0;1024] int list as per unstable MSC3246 spec.
*/
private fun List<Float>.toMSC3246range(): List<Int> = map { (it * 1024).toInt() }
private fun VoiceRecorderState.finishedWaveform(): ImmutableList<Float> =
(this as? VoiceRecorderState.Finished)
?.waveform
.orEmpty()
.toImmutableList()