Sulkta-OSS/element-x-ada
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge branch 'develop' of https://github.com/vector-im/element-x-android into langleyd/live_waveform

Browse source
This commit is contained in:
David Langley 2023-10-27 13:10:32 +01:00
commit a64003355a
13 changed files with 156 additions and 67 deletions
Download patch file Download diff file Expand all files Collapse all files

36
libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/media/FakeWaveformFactory.kt Normal file
View file

@ -0,0 +1,36 @@
/*
* Copyright (c) 2023 New Vector Ltd
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
package io.element.android.libraries.designsystem.components.media
import kotlinx.collections.immutable.ImmutableList
import kotlinx.collections.immutable.toPersistentList
import kotlin.random.Random
object FakeWaveformFactory {
/**
* Generate a waveform for testing purposes.
*
* The waveform is a list of floats between 0 and 1.
*
* @param length The length of the waveform.
*/
fun createFakeWaveform(length: Int = 1000): ImmutableList<Float> {
val random = Random(seed = 2)
return List(length) { random.nextFloat() }
.toPersistentList()
}
}

17
libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/media/WaveformPlaybackView.kt
View file

@ -53,6 +53,21 @@ import kotlin.math.roundToInt
private const val DEFAULT_GRAPHICS_LAYER_ALPHA: Float = 0.99F
/**
* A view that displays a waveform and a cursor to indicate the current playback progress.
*
* @param playbackProgress The current playback progress, between 0 and 1.
* @param showCursor Whether to show the cursor or not.
* @param waveform The waveform to display. Use [FakeWaveformFactory] to generate a fake waveform.
* @param modifier The modifier to be applied to the view.
* @param onSeek Callback when the user seeks the waveform. Called with a value between 0 and 1.
* @param brush The brush to use to draw the waveform.
* @param progressBrush The brush to use to draw the progress.
* @param cursorBrush The brush to use to draw the cursor.
* @param lineWidth The width of the waveform lines.
* @param linePadding The padding between waveform lines.
* @param minimumGraphAmplitude The minimum amplitude to display, regardless of waveform data.
*/
@OptIn(ExperimentalComposeUiApi::class)
@Composable
fun WaveformPlaybackView(
@ -76,7 +91,7 @@ fun WaveformPlaybackView(
}
}
val progressAnimated = animateFloatAsState(targetValue = progress, label = "progressAnimation")
val amplitudeDisplayCount by remember(canvasSize) {
val amplitudeDisplayCount by remember(canvasSize, lineWidth, linePadding) {
derivedStateOf {
(canvasSize.width.value / (lineWidth.value + linePadding.value)).toInt()
}

40
libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/TextComposer.kt
View file

@ -48,6 +48,7 @@ import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.unit.dp
import io.element.android.libraries.designsystem.components.media.FakeWaveformFactory.createFakeWaveform
import io.element.android.libraries.designsystem.preview.ElementPreview
import io.element.android.libraries.designsystem.preview.PreviewsDayNight
import io.element.android.libraries.designsystem.text.applyScaleUp
@ -123,6 +124,10 @@ fun TextComposer(
onVoicePlayerEvent(VoiceMessagePlayerEvent.Pause)
}
val onSeekVoiceMessage = { position: Float ->
onVoicePlayerEvent(VoiceMessagePlayerEvent.Seek(position))
}
val layoutModifier = modifier
.fillMaxSize()
.height(IntrinsicSize.Min)
@ -189,8 +194,10 @@ fun TextComposer(
when (voiceMessageState) {
VoiceMessageState.Idle,
is VoiceMessageState.Recording -> recordVoiceButton
is VoiceMessageState.Preview -> sendVoiceButton
is VoiceMessageState.Sending -> uploadVoiceProgress
is VoiceMessageState.Preview -> when(voiceMessageState.isSending) {
true -> uploadVoiceProgress
false -> sendVoiceButton
}
}
else ->
sendButton
@ -200,17 +207,12 @@ fun TextComposer(
when (voiceMessageState) {
is VoiceMessageState.Preview ->
VoiceMessagePreview(
isInteractive = true,
isInteractive = !voiceMessageState.isSending,
isPlaying = voiceMessageState.isPlaying,
waveform = voiceMessageState.waveform,
onPlayClick = onPlayVoiceMessageClicked,
onPauseClick = onPauseVoiceMessageClicked
)
VoiceMessageState.Sending ->
VoiceMessagePreview(
isInteractive = false,
isPlaying = false,
onPlayClick = onPlayVoiceMessageClicked,
onPauseClick = onPauseVoiceMessageClicked
onPauseClick = onPauseVoiceMessageClicked,
onSeek = onSeekVoiceMessage,
)
is VoiceMessageState.Recording ->
VoiceMessageRecording(voiceMessageState.levels, voiceMessageState.duration)
@ -219,13 +221,9 @@ fun TextComposer(
}
val voiceDeleteButton = @Composable {
val enabled = when (voiceMessageState) {
is VoiceMessageState.Preview -> true
VoiceMessageState.Sending,
is VoiceMessageState.Recording,
VoiceMessageState.Idle -> false
if(voiceMessageState is VoiceMessageState.Preview) {
VoiceMessageDeleteButton(enabled = !voiceMessageState.isSending, onClick = onDeleteVoiceMessage)
}
VoiceMessageDeleteButton(enabled = enabled, onClick = onDeleteVoiceMessage)
}
if (showTextFormatting) {
@ -286,7 +284,7 @@ private fun StandardLayout(
verticalAlignment = Alignment.Bottom,
) {
if (enableVoiceMessages && voiceMessageState !is VoiceMessageState.Idle) {
if (voiceMessageState is VoiceMessageState.Preview || voiceMessageState is VoiceMessageState.Sending) {
if (voiceMessageState is VoiceMessageState.Preview) {
Box(
modifier = Modifier
.padding(bottom = 5.dp, top = 5.dp, end = 3.dp, start = 3.dp)
@ -819,11 +817,11 @@ internal fun TextComposerVoicePreview() = ElementPreview {
PreviewColumn(items = persistentListOf({
VoicePreview(voiceMessageState = VoiceMessageState.Recording(61.seconds, List(100) { it.toFloat() / 100 }.toPersistentList()))
}, {
VoicePreview(voiceMessageState = VoiceMessageState.Preview(isPlaying = false))
VoicePreview(voiceMessageState = VoiceMessageState.Preview(isSending = false, isPlaying = false, waveform = createFakeWaveform()))
}, {
VoicePreview(voiceMessageState = VoiceMessageState.Preview(isPlaying = true))
VoicePreview(voiceMessageState = VoiceMessageState.Preview(isSending = false, isPlaying = true, waveform = createFakeWaveform()))
}, {
VoicePreview(voiceMessageState = VoiceMessageState.Sending)
VoicePreview(voiceMessageState = VoiceMessageState.Preview(isSending = true, isPlaying = false, waveform = createFakeWaveform()))
}))
}

34
libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/components/VoiceMessagePreview.kt
View file

@ -20,10 +20,13 @@ import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.heightIn
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable
@ -31,6 +34,8 @@ import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.unit.dp
import io.element.android.libraries.designsystem.components.media.FakeWaveformFactory.createFakeWaveform
import io.element.android.libraries.designsystem.components.media.WaveformPlaybackView
import io.element.android.libraries.designsystem.preview.ElementPreview
import io.element.android.libraries.designsystem.preview.PreviewsDayNight
import io.element.android.libraries.designsystem.text.applyScaleUp
@ -39,14 +44,18 @@ import io.element.android.libraries.designsystem.theme.components.IconButton
import io.element.android.libraries.textcomposer.R
import io.element.android.libraries.theme.ElementTheme
import io.element.android.libraries.ui.strings.CommonStrings
import kotlinx.collections.immutable.ImmutableList
@Composable
internal fun VoiceMessagePreview(
isInteractive: Boolean,
isPlaying: Boolean,
waveform: ImmutableList<Float>,
modifier: Modifier = Modifier,
playbackProgress: Float = 0f,
onPlayClick: () -> Unit = {},
onPauseClick: () -> Unit = {}
onPauseClick: () -> Unit = {},
onSeek: (Float) -> Unit = {},
) {
Row(
modifier = modifier
@ -72,7 +81,22 @@ internal fun VoiceMessagePreview(
enabled = isInteractive
)
}
// TODO Add recording preview UI
Spacer(modifier = Modifier.width(8.dp))
// TODO Add timer UI
Spacer(modifier = Modifier.width(12.dp))
WaveformPlaybackView(
modifier = Modifier
.weight(1f)
.height(26.dp.applyScaleUp()),
playbackProgress = playbackProgress,
showCursor = isInteractive,
waveform = waveform,
onSeek = onSeek,
)
}
}
@ -119,8 +143,8 @@ internal fun VoiceMessagePreviewPreview() = ElementPreview {
Column(
verticalArrangement = Arrangement.spacedBy(8.dp)
) {
VoiceMessagePreview(isInteractive = true, isPlaying = true)
VoiceMessagePreview(isInteractive = true, isPlaying = false)
VoiceMessagePreview(isInteractive = false, isPlaying = false)
VoiceMessagePreview(isInteractive = true, isPlaying = true, waveform = createFakeWaveform())
VoiceMessagePreview(isInteractive = true, isPlaying = false, waveform = createFakeWaveform())
VoiceMessagePreview(isInteractive = false, isPlaying = false, waveform = createFakeWaveform())
}
}

4
libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/model/VoiceMessageState.kt
View file

@ -23,9 +23,11 @@ sealed class VoiceMessageState {
data object Idle: VoiceMessageState()
data class Preview(
val isSending: Boolean,
val isPlaying: Boolean,
val waveform: ImmutableList<Float>,
): VoiceMessageState()
data object Sending: VoiceMessageState()
data class Recording(
val duration: Duration,
val levels: ImmutableList<Float>,

3
libraries/voicerecorder/test/src/main/kotlin/io/element/android/libraries/voicerecorder/test/FakeVoiceRecorder.kt
View file

@ -42,6 +42,7 @@ class FakeVoiceRecorder(
private var stoppedCount = 0
private var deletedCount = 0
var waveform: List<Float> = listOf(0f, 1f, 2f, 3f, 4f, 5f, 6f, 7f, 8f, 9f, 8f, 7f, 6f, 5f, 4f, 3f, 2f, 1f, 0f)
override suspend fun startRecord() {
startedCount += 1
val startedAt = timeSource.markNow()
@ -73,7 +74,7 @@ class FakeVoiceRecorder(
else -> VoiceRecorderState.Finished(
file = curRecording!!,
mimeType = "audio/ogg",
waveform = listOf(0f, 1f, 2f, 3f, 4f, 5f, 6f, 7f, 8f, 9f, 8f, 7f, 6f, 5f, 4f, 3f, 2f, 1f, 0f),
waveform = waveform,
)
}
)