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

Add voice message 'hold to record' tooltip (#1710)

Browse source 
---------

Co-authored-by: ElementBot <benoitm+elementbot@element.io>
This commit is contained in:
jonnyandrew 2023-11-02 14:29:05 +00:00 • committed by GitHub
parent 8cc541b5fc
commit 5080df3262
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
18 changed files with 263 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

96
libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/components/RecordButton.kt
View file

@ -14,24 +14,38 @@
* limitations under the License.
*/
@file:OptIn(ExperimentalMaterial3Api::class)
package io.element.android.libraries.textcomposer.components
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.size
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.TooltipState
import androidx.compose.material3.rememberTooltipState
import androidx.compose.runtime.Composable
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.hapticfeedback.HapticFeedbackType
import androidx.compose.ui.input.pointer.PointerEventType
import androidx.compose.ui.input.pointer.pointerInput
import androidx.compose.ui.platform.LocalHapticFeedback
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import io.element.android.libraries.designsystem.components.tooltip.ElementTooltipDefaults
import io.element.android.libraries.designsystem.components.tooltip.PlainTooltip
import io.element.android.libraries.designsystem.components.tooltip.TooltipBox
import io.element.android.libraries.designsystem.preview.ElementPreview
import io.element.android.libraries.designsystem.preview.PreviewsDayNight
import io.element.android.libraries.designsystem.theme.components.Icon
import io.element.android.libraries.designsystem.theme.components.IconButton
import io.element.android.libraries.designsystem.theme.components.Text
import io.element.android.libraries.designsystem.utils.CommonDrawables
import io.element.android.libraries.textcomposer.R
import io.element.android.libraries.textcomposer.utils.PressState
import io.element.android.libraries.textcomposer.utils.PressStateEffects
import io.element.android.libraries.textcomposer.utils.rememberPressState
@ -39,9 +53,11 @@ import io.element.android.libraries.theme.ElementTheme
import io.element.android.libraries.ui.strings.CommonStrings
import kotlinx.coroutines.launch
@OptIn(ExperimentalMaterial3Api::class)
@Composable
internal fun RecordButton(
modifier: Modifier = Modifier,
initialTooltipIsVisible: Boolean = false,
onPressStart: () -> Unit = {},
onLongPressEnd: () -> Unit = {},
onTap: () -> Unit = {},
@ -54,6 +70,10 @@ internal fun RecordButton(
hapticFeedback.performHapticFeedback(HapticFeedbackType.LongPress)
}
val tooltipState = rememberTooltipState(
initialIsVisible = initialTooltipIsVisible
)
PressStateEffects(
pressState = pressState.value,
onPressStart = {
@ -67,26 +87,34 @@ internal fun RecordButton(
onTap = {
onTap()
performHapticFeedback()
coroutineScope.launch { tooltipState.show() }
},
)
RecordButtonView(
isPressed = pressState.value is PressState.Pressing,
modifier = modifier
.pointerInput(Unit) {
awaitPointerEventScope {
while (true) {
val event = awaitPointerEvent()
coroutineScope.launch {
when (event.type) {
PointerEventType.Press -> pressState.press()
PointerEventType.Release -> pressState.release()
Box(modifier = modifier) {
HoldToRecordTooltip(
tooltipState = tooltipState,
spacingBetweenTooltipAndAnchor = 0.dp, // Accounts for the 48.dp size of the record button
anchor = {
RecordButtonView(
isPressed = pressState.value is PressState.Pressing,
modifier = Modifier
.pointerInput(Unit) {
awaitPointerEventScope {
while (true) {
val event = awaitPointerEvent()
coroutineScope.launch {
when (event.type) {
PointerEventType.Press -> pressState.press()
PointerEventType.Release -> pressState.release()
}
}
}
}
}
}
}
)
}
)
)
}
}
@Composable
@ -112,6 +140,34 @@ private fun RecordButtonView(
}
}
@Composable
private fun HoldToRecordTooltip(
tooltipState: TooltipState,
spacingBetweenTooltipAndAnchor: Dp,
modifier: Modifier = Modifier,
anchor: @Composable () -> Unit,
) {
TooltipBox(
positionProvider = ElementTooltipDefaults.rememberPlainTooltipPositionProvider(
spacingBetweenTooltipAndAnchor = spacingBetweenTooltipAndAnchor,
),
tooltip = {
PlainTooltip {
Text(
text = stringResource(R.string.screen_room_voice_message_tooltip),
color = ElementTheme.colors.textOnSolidPrimary,
style = ElementTheme.typography.fontBodySmMedium,
)
}
},
state = tooltipState,
modifier = modifier,
focusable = false,
enableUserInput = false,
content = anchor,
)
}
@PreviewsDayNight
@Composable
internal fun RecordButtonPreview() = ElementPreview {
@ -121,3 +177,13 @@ internal fun RecordButtonPreview() = ElementPreview {
}
}
@PreviewsDayNight
@Composable
internal fun HoldToRecordTooltipPreview() = ElementPreview {
Box(modifier = Modifier.fillMaxSize()) {
RecordButton(
modifier = Modifier.align(Alignment.BottomEnd),
initialTooltipIsVisible = true,
)
}
}

1
libraries/textcomposer/impl/src/main/res/values/localazy.xml
View file

@ -21,4 +21,5 @@
<string name="rich_text_editor_unindent">"Unindent"</string>
<string name="rich_text_editor_url_placeholder">"Link"</string>
<string name="rich_text_editor_a11y_add_attachment">"Add attachment"</string>
<string name="screen_room_voice_message_tooltip">"Hold to record"</string>
</resources>