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

Show voice message preview player progress (#1675)

Browse source 
* Show voice message preview player progress

* Update screenshots

* Fix test

* Some nits over mediaplayer stuff

---------

Co-authored-by: ElementBot <benoitm+elementbot@element.io>
Co-authored-by: Marco Romano <marcor@element.io>
This commit is contained in:
jonnyandrew 2023-10-27 21:43:52 +01:00 • committed by GitHub
parent 21499a2d40
commit 8121d1a6de
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
13 changed files with 102 additions and 41 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -60,6 +60,7 @@ private const val DEFAULT_GRAPHICS_LAYER_ALPHA: Float = 0.99F
* @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 seekEnabled Whether the user can seek the waveform or not.
* @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.
@ -74,6 +75,7 @@ fun WaveformPlaybackView(
showCursor: Boolean,
waveform: ImmutableList<Float>,
modifier: Modifier = Modifier,
seekEnabled: Boolean = true,
onSeek: (progress: Float) -> Unit = {},
brush: Brush = SolidColor(ElementTheme.colors.iconQuaternary),
progressBrush: Brush = SolidColor(ElementTheme.colors.iconSecondary),
@ -106,28 +108,32 @@ fun WaveformPlaybackView(
modifier = Modifier
.fillMaxWidth()
.graphicsLayer(alpha = DEFAULT_GRAPHICS_LAYER_ALPHA)
.pointerInteropFilter(requestDisallowInterceptTouchEvent = requestDisallowInterceptTouchEvent) {
return@pointerInteropFilter when (it.action) {
MotionEvent.ACTION_DOWN -> {
if (it.x in 0F..canvasSizePx.width) {
requestDisallowInterceptTouchEvent.invoke(true)
seekProgress.value = it.x / canvasSizePx.width
true
} else false
}
MotionEvent.ACTION_MOVE -> {
if (it.x in 0F..canvasSizePx.width) {
seekProgress.value = it.x / canvasSizePx.width
.let {
if (!seekEnabled) return@let it
it.pointerInteropFilter(requestDisallowInterceptTouchEvent = requestDisallowInterceptTouchEvent) { e ->
return@pointerInteropFilter when (e.action) {
MotionEvent.ACTION_DOWN -> {
if (e.x in 0F..canvasSizePx.width) {
requestDisallowInterceptTouchEvent.invoke(true)
seekProgress.value = e.x / canvasSizePx.width
true
} else false
}
true
MotionEvent.ACTION_MOVE -> {
if (e.x in 0F..canvasSizePx.width) {
seekProgress.value = e.x / canvasSizePx.width
}
true
}
MotionEvent.ACTION_UP -> {
requestDisallowInterceptTouchEvent.invoke(false)
seekProgress.value?.let(onSeek)
seekProgress.value = null
true
}
else -> false
}
MotionEvent.ACTION_UP -> {
requestDisallowInterceptTouchEvent.invoke(false)
seekProgress.value?.let(onSeek)
seekProgress.value = null
true
}
else -> false
}
}
.then(modifier)

4
libraries/mediaplayer/api/src/main/kotlin/io/element/android/libraries/mediaplayer/api/MediaPlayer.kt
View file

@ -74,5 +74,9 @@ interface MediaPlayer : AutoCloseable {
* The current position of the player.
*/
val currentPosition: Long,
/**
* The duration of the current content.
*/
val duration: Long,
)
}

4
libraries/mediaplayer/impl/src/main/kotlin/io/element/android/libraries/mediaplayer/impl/MediaPlayerImpl.kt
View file

@ -47,6 +47,7 @@ class MediaPlayerImpl @Inject constructor(
_state.update {
it.copy(
currentPosition = player.currentPosition,
duration = player.duration.coerceAtLeast(0),
isPlaying = isPlaying,
)
}
@ -61,6 +62,7 @@ class MediaPlayerImpl @Inject constructor(
_state.update {
it.copy(
currentPosition = player.currentPosition,
duration = player.duration.coerceAtLeast(0),
mediaId = mediaItem?.mediaId,
)
}
@ -74,7 +76,7 @@ class MediaPlayerImpl @Inject constructor(
private val scope = CoroutineScope(Job() + Dispatchers.Main)
private var job: Job? = null
private val _state = MutableStateFlow(MediaPlayer.State(false, null, 0L))
private val _state = MutableStateFlow(MediaPlayer.State(false, null, 0L, 0L))
override val state: StateFlow<MediaPlayer.State> = _state.asStateFlow()

3
libraries/mediaplayer/impl/src/main/kotlin/io/element/android/libraries/mediaplayer/impl/SimplePlayer.kt
View file

@ -33,6 +33,7 @@ interface SimplePlayer {
fun addListener(listener: Listener)
val currentPosition: Long
val playbackState: Int
val duration: Long
fun clearMediaItems()
fun setMediaItem(mediaItem: MediaItem)
fun getCurrentMediaItem(): MediaItem?
@ -73,6 +74,8 @@ class SimplePlayerImpl(
get() = p.currentPosition
override val playbackState: Int
get() = p.playbackState
override val duration: Long
get() = p.duration
override fun clearMediaItems() = p.clearMediaItems()

13
libraries/mediaplayer/test/src/main/kotlin/io/element/android/libraries/mediaplayer/test/FakeMediaPlayer.kt
View file

@ -26,7 +26,12 @@ import kotlinx.coroutines.flow.update
* Fake implementation of [MediaPlayer] for testing purposes.
*/
class FakeMediaPlayer : MediaPlayer {
private val _state = MutableStateFlow(MediaPlayer.State(false, null, 0L))
companion object {
private const val FAKE_TOTAL_DURATION_MS = 10_000L
private const val FAKE_PLAYED_DURATION_MS = 1000L
}
private val _state = MutableStateFlow(MediaPlayer.State(false, null, 0L, 0L))
override val state: StateFlow<MediaPlayer.State> = _state.asStateFlow()
@ -35,7 +40,8 @@ class FakeMediaPlayer : MediaPlayer {
it.copy(
isPlaying = true,
mediaId = mediaId,
currentPosition = it.currentPosition + 1000L,
currentPosition = it.currentPosition + FAKE_PLAYED_DURATION_MS,
duration = FAKE_TOTAL_DURATION_MS,
)
}
}
@ -44,7 +50,8 @@ class FakeMediaPlayer : MediaPlayer {
_state.update {
it.copy(
isPlaying = true,
currentPosition = it.currentPosition + 1000L,
currentPosition = it.currentPosition + FAKE_PLAYED_DURATION_MS,
duration = FAKE_TOTAL_DURATION_MS,
)
}
}

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

@ -76,8 +76,8 @@ import io.element.android.libraries.textcomposer.components.textInputRoundedCorn
import io.element.android.libraries.textcomposer.model.Message
import io.element.android.libraries.textcomposer.model.MessageComposerMode
import io.element.android.libraries.textcomposer.model.PressEvent
import io.element.android.libraries.textcomposer.model.VoiceMessagePlayerEvent
import io.element.android.libraries.textcomposer.model.Suggestion
import io.element.android.libraries.textcomposer.model.VoiceMessagePlayerEvent
import io.element.android.libraries.textcomposer.model.VoiceMessageState
import io.element.android.libraries.theme.ElementTheme
import io.element.android.libraries.ui.strings.CommonStrings
@ -86,8 +86,8 @@ import io.element.android.wysiwyg.compose.RichTextEditorState
import kotlinx.collections.immutable.ImmutableList
import kotlinx.collections.immutable.persistentListOf
import kotlinx.collections.immutable.toPersistentList
import kotlin.time.Duration.Companion.seconds
import uniffi.wysiwyg_composer.MenuAction
import kotlin.time.Duration.Companion.seconds
@Composable
fun TextComposer(
@ -194,7 +194,7 @@ fun TextComposer(
when (voiceMessageState) {
VoiceMessageState.Idle,
is VoiceMessageState.Recording -> recordVoiceButton
is VoiceMessageState.Preview -> when(voiceMessageState.isSending) {
is VoiceMessageState.Preview -> when (voiceMessageState.isSending) {
true -> uploadVoiceProgress
false -> sendVoiceButton
}
@ -210,6 +210,7 @@ fun TextComposer(
isInteractive = !voiceMessageState.isSending,
isPlaying = voiceMessageState.isPlaying,
waveform = voiceMessageState.waveform,
playbackProgress = voiceMessageState.playbackProgress,
onPlayClick = onPlayVoiceMessageClicked,
onPauseClick = onPauseVoiceMessageClicked,
onSeek = onSeekVoiceMessage,
@ -221,7 +222,7 @@ fun TextComposer(
}
val voiceDeleteButton = @Composable {
if(voiceMessageState is VoiceMessageState.Preview) {
if (voiceMessageState is VoiceMessageState.Preview) {
VoiceMessageDeleteButton(enabled = !voiceMessageState.isSending, onClick = onDeleteVoiceMessage)
}
}
@ -817,11 +818,32 @@ internal fun TextComposerVoicePreview() = ElementPreview {
PreviewColumn(items = persistentListOf({
VoicePreview(voiceMessageState = VoiceMessageState.Recording(61.seconds, List(100) { it.toFloat() / 100 }.toPersistentList()))
}, {
VoicePreview(voiceMessageState = VoiceMessageState.Preview(isSending = false, isPlaying = false, waveform = createFakeWaveform()))
VoicePreview(
voiceMessageState = VoiceMessageState.Preview(
isSending = false,
isPlaying = false,
waveform = createFakeWaveform(),
playbackProgress = 0.0f
)
)
}, {
VoicePreview(voiceMessageState = VoiceMessageState.Preview(isSending = false, isPlaying = true, waveform = createFakeWaveform()))
VoicePreview(
voiceMessageState = VoiceMessageState.Preview(
isSending = false,
isPlaying = true,
waveform = createFakeWaveform(),
playbackProgress = 0.2f
)
)
}, {
VoicePreview(voiceMessageState = VoiceMessageState.Preview(isSending = true, isPlaying = false, waveform = createFakeWaveform()))
VoicePreview(
voiceMessageState = VoiceMessageState.Preview(
isSending = true,
isPlaying = false,
waveform = createFakeWaveform(),
playbackProgress = 0.0f
)
)
}))
}

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

@ -95,6 +95,7 @@ internal fun VoiceMessagePreview(
playbackProgress = playbackProgress,
showCursor = isInteractive,
waveform = waveform,
seekEnabled = false, // TODO enable seeking
onSeek = onSeek,
)
}

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

@ -25,6 +25,7 @@ sealed class VoiceMessageState {
data class Preview(
val isSending: Boolean,
val isPlaying: Boolean,
val playbackProgress: Float,
val waveform: ImmutableList<Float>,
): VoiceMessageState()