Add voice message preview player (#1646)
--------- Co-authored-by: ElementBot <benoitm+elementbot@element.io>
This commit is contained in:
jonnyandrew
GitHub
parent
acd7aef6be
commit
a67410f573
17 changed files with 369 additions and 40 deletions
|
|
@ -74,6 +74,7 @@ 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.VoiceMessageState
|
||||
import io.element.android.libraries.theme.ElementTheme
|
||||
import io.element.android.libraries.ui.strings.CommonStrings
|
||||
|
|
@ -99,6 +100,7 @@ fun TextComposer(
|
|||
onAddAttachment: () -> Unit = {},
|
||||
onDismissTextFormatting: () -> Unit = {},
|
||||
onVoiceRecordButtonEvent: (PressEvent) -> Unit = {},
|
||||
onVoicePlayerEvent: (VoiceMessagePlayerEvent) -> Unit = {},
|
||||
onSendVoiceMessage: () -> Unit = {},
|
||||
onDeleteVoiceMessage: () -> Unit = {},
|
||||
onError: (Throwable) -> Unit = {},
|
||||
|
|
@ -108,6 +110,14 @@ fun TextComposer(
|
|||
onSendMessage(Message(html = html, markdown = state.messageMarkdown))
|
||||
}
|
||||
|
||||
val onPlayVoiceMessageClicked = {
|
||||
onVoicePlayerEvent(VoiceMessagePlayerEvent.Play)
|
||||
}
|
||||
|
||||
val onPauseVoiceMessageClicked = {
|
||||
onVoicePlayerEvent(VoiceMessagePlayerEvent.Pause)
|
||||
}
|
||||
|
||||
val layoutModifier = modifier
|
||||
.fillMaxSize()
|
||||
.height(IntrinsicSize.Min)
|
||||
|
|
@ -179,10 +189,20 @@ fun TextComposer(
|
|||
|
||||
val voiceRecording = @Composable {
|
||||
when (voiceMessageState) {
|
||||
VoiceMessageState.Preview ->
|
||||
VoiceMessagePreview(isInteractive = true)
|
||||
is VoiceMessageState.Preview ->
|
||||
VoiceMessagePreview(
|
||||
isInteractive = true,
|
||||
isPlaying = voiceMessageState.isPlaying,
|
||||
onPlayClick = onPlayVoiceMessageClicked,
|
||||
onPauseClick = onPauseVoiceMessageClicked
|
||||
)
|
||||
VoiceMessageState.Sending ->
|
||||
VoiceMessagePreview(isInteractive = false)
|
||||
VoiceMessagePreview(
|
||||
isInteractive = false,
|
||||
isPlaying = false,
|
||||
onPlayClick = onPlayVoiceMessageClicked,
|
||||
onPauseClick = onPauseVoiceMessageClicked
|
||||
)
|
||||
is VoiceMessageState.Recording ->
|
||||
VoiceMessageRecording(voiceMessageState.level, voiceMessageState.duration)
|
||||
VoiceMessageState.Idle -> {}
|
||||
|
|
@ -191,7 +211,7 @@ fun TextComposer(
|
|||
|
||||
val voiceDeleteButton = @Composable {
|
||||
val enabled = when (voiceMessageState) {
|
||||
VoiceMessageState.Preview -> true
|
||||
is VoiceMessageState.Preview -> true
|
||||
VoiceMessageState.Sending,
|
||||
is VoiceMessageState.Recording,
|
||||
VoiceMessageState.Idle -> false
|
||||
|
|
@ -780,7 +800,9 @@ internal fun TextComposerVoicePreview() = ElementPreview {
|
|||
PreviewColumn(items = persistentListOf({
|
||||
VoicePreview(voiceMessageState = VoiceMessageState.Recording(61.seconds, 0.5f))
|
||||
}, {
|
||||
VoicePreview(voiceMessageState = VoiceMessageState.Preview)
|
||||
VoicePreview(voiceMessageState = VoiceMessageState.Preview(isPlaying = false))
|
||||
}, {
|
||||
VoicePreview(voiceMessageState = VoiceMessageState.Preview(isPlaying = true))
|
||||
}, {
|
||||
VoicePreview(voiceMessageState = VoiceMessageState.Sending)
|
||||
}))
|
||||
|
|
|
|||
|
|
@ -17,25 +17,36 @@
|
|||
package io.element.android.libraries.textcomposer.components
|
||||
|
||||
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.fillMaxWidth
|
||||
import androidx.compose.foundation.layout.heightIn
|
||||
import androidx.compose.foundation.layout.padding
|
||||
import androidx.compose.foundation.layout.size
|
||||
import androidx.compose.foundation.shape.CircleShape
|
||||
import androidx.compose.material3.MaterialTheme
|
||||
import androidx.compose.runtime.Composable
|
||||
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.preview.ElementPreview
|
||||
import io.element.android.libraries.designsystem.preview.PreviewsDayNight
|
||||
import io.element.android.libraries.designsystem.theme.components.Text
|
||||
import io.element.android.libraries.designsystem.text.applyScaleUp
|
||||
import io.element.android.libraries.designsystem.theme.components.Icon
|
||||
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
|
||||
|
||||
@Composable
|
||||
internal fun VoiceMessagePreview(
|
||||
isInteractive: Boolean,
|
||||
isPlaying: Boolean,
|
||||
modifier: Modifier = Modifier,
|
||||
onPlayClick: () -> Unit = {},
|
||||
onPauseClick: () -> Unit = {}
|
||||
) {
|
||||
Row(
|
||||
modifier = modifier
|
||||
|
|
@ -44,28 +55,72 @@ internal fun VoiceMessagePreview(
|
|||
color = ElementTheme.colors.bgSubtleSecondary,
|
||||
shape = MaterialTheme.shapes.medium,
|
||||
)
|
||||
.padding(start = 12.dp, end = 20.dp, top = 8.dp, bottom = 8.dp)
|
||||
.padding(start = 8.dp, end = 20.dp, top = 6.dp, bottom = 6.dp)
|
||||
.heightIn(26.dp),
|
||||
verticalAlignment = Alignment.CenterVertically,
|
||||
) {
|
||||
// TODO Replace with recording preview UI
|
||||
Text(
|
||||
text = "Finished recording", // Not localized because it is a placeholder
|
||||
color = if (isInteractive) {
|
||||
ElementTheme.colors.textSecondary
|
||||
} else {
|
||||
ElementTheme.colors.textDisabled
|
||||
},
|
||||
style = ElementTheme.typography.fontBodySmMedium
|
||||
)
|
||||
if (isPlaying) {
|
||||
PlayerButton(
|
||||
type = PlayerButtonType.Pause,
|
||||
onClick = onPauseClick,
|
||||
enabled = isInteractive,
|
||||
)
|
||||
} else {
|
||||
PlayerButton(
|
||||
type = PlayerButtonType.Play,
|
||||
onClick = onPlayClick,
|
||||
enabled = isInteractive
|
||||
)
|
||||
}
|
||||
// TODO Add recording preview UI
|
||||
}
|
||||
}
|
||||
|
||||
private enum class PlayerButtonType {
|
||||
Play, Pause
|
||||
}
|
||||
|
||||
@Composable
|
||||
private fun PlayerButton(
|
||||
type: PlayerButtonType,
|
||||
enabled: Boolean,
|
||||
onClick: () -> Unit,
|
||||
modifier: Modifier = Modifier,
|
||||
) {
|
||||
IconButton(
|
||||
onClick = onClick,
|
||||
enabled = enabled,
|
||||
modifier = modifier
|
||||
.background(color = ElementTheme.colors.bgCanvasDefault, shape = CircleShape)
|
||||
.size(30.dp.applyScaleUp())
|
||||
) {
|
||||
when (type) {
|
||||
PlayerButtonType.Play -> PlayIcon()
|
||||
PlayerButtonType.Pause -> PauseIcon()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@Composable
|
||||
private fun PauseIcon() = Icon(
|
||||
resourceId = R.drawable.ic_pause,
|
||||
contentDescription = stringResource(id = CommonStrings.a11y_pause),
|
||||
)
|
||||
|
||||
@Composable
|
||||
private fun PlayIcon() = Icon(
|
||||
resourceId = R.drawable.ic_play,
|
||||
contentDescription = stringResource(id = CommonStrings.a11y_play),
|
||||
)
|
||||
|
||||
@PreviewsDayNight
|
||||
@Composable
|
||||
internal fun VoiceMessagePreviewPreview() = ElementPreview {
|
||||
Column {
|
||||
VoiceMessagePreview(isInteractive = true)
|
||||
VoiceMessagePreview(isInteractive = false)
|
||||
Column(
|
||||
verticalArrangement = Arrangement.spacedBy(8.dp)
|
||||
) {
|
||||
VoiceMessagePreview(isInteractive = true, isPlaying = true)
|
||||
VoiceMessagePreview(isInteractive = true, isPlaying = false)
|
||||
VoiceMessagePreview(isInteractive = false, isPlaying = false)
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,26 @@
|
|||
/*
|
||||
* 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.textcomposer.model
|
||||
|
||||
sealed class VoiceMessagePlayerEvent {
|
||||
data object Play: VoiceMessagePlayerEvent()
|
||||
data object Pause: VoiceMessagePlayerEvent()
|
||||
|
||||
data class Seek(
|
||||
val position: Float
|
||||
): VoiceMessagePlayerEvent()
|
||||
}
|
||||
|
|
@ -21,7 +21,9 @@ import kotlin.time.Duration
|
|||
sealed class VoiceMessageState {
|
||||
data object Idle: VoiceMessageState()
|
||||
|
||||
data object Preview: VoiceMessageState()
|
||||
data class Preview(
|
||||
val isPlaying: Boolean,
|
||||
): VoiceMessageState()
|
||||
data object Sending: VoiceMessageState()
|
||||
data class Recording(
|
||||
val duration: Duration,
|
||||
|
|
|
|||
|
|
@ -0,0 +1,9 @@
|
|||
<vector xmlns:android="http://schemas.android.com/apk/res/android"
|
||||
android:width="20dp"
|
||||
android:height="20dp"
|
||||
android:viewportWidth="20"
|
||||
android:viewportHeight="20">
|
||||
<path
|
||||
android:pathData="M13.25,15.25C12.837,15.25 12.484,15.103 12.191,14.809C11.897,14.516 11.75,14.163 11.75,13.75V6.25C11.75,5.838 11.897,5.484 12.191,5.191C12.484,4.897 12.837,4.75 13.25,4.75H13.75C14.163,4.75 14.516,4.897 14.809,5.191C15.103,5.484 15.25,5.838 15.25,6.25V13.75C15.25,14.163 15.103,14.516 14.809,14.809C14.516,15.103 14.163,15.25 13.75,15.25H13.25ZM6.25,15.25C5.838,15.25 5.484,15.103 5.191,14.809C4.897,14.516 4.75,14.163 4.75,13.75V6.25C4.75,5.838 4.897,5.484 5.191,5.191C5.484,4.897 5.838,4.75 6.25,4.75H6.75C7.162,4.75 7.516,4.897 7.809,5.191C8.103,5.484 8.25,5.838 8.25,6.25V13.75C8.25,14.163 8.103,14.516 7.809,14.809C7.516,15.103 7.162,15.25 6.75,15.25H6.25Z"
|
||||
android:fillColor="#656D77"/>
|
||||
</vector>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
<vector xmlns:android="http://schemas.android.com/apk/res/android"
|
||||
android:width="20dp"
|
||||
android:height="20dp"
|
||||
android:viewportWidth="20"
|
||||
android:viewportHeight="20">
|
||||
<path
|
||||
android:pathData="M8.042,14.958C7.75,15.153 7.451,15.167 7.146,15C6.84,14.833 6.688,14.569 6.688,14.208V5.75C6.688,5.389 6.84,5.125 7.146,4.958C7.451,4.792 7.75,4.806 8.042,5L14.688,9.25C14.965,9.417 15.104,9.66 15.104,9.979C15.104,10.299 14.965,10.542 14.688,10.708L8.042,14.958Z"
|
||||
android:fillColor="#656D77"/>
|
||||
</vector>
|
||||
Loading…
Add table
Add a link
Reference in a new issue