Blink red dot while recording voice message (#1677)
Story: https://github.com/vector-im/element-meta/issues/2084
This commit is contained in:
parent
4dfe8121b4
commit
ec198ce2e9
1 changed files with 25 additions and 5 deletions
|
|
@ -16,6 +16,11 @@
|
||||||
|
|
||||||
package io.element.android.libraries.textcomposer.components
|
package io.element.android.libraries.textcomposer.components
|
||||||
|
|
||||||
|
import androidx.compose.animation.core.InfiniteRepeatableSpec
|
||||||
|
import androidx.compose.animation.core.RepeatMode
|
||||||
|
import androidx.compose.animation.core.TweenSpec
|
||||||
|
import androidx.compose.animation.core.animateFloat
|
||||||
|
import androidx.compose.animation.core.rememberInfiniteTransition
|
||||||
import androidx.compose.foundation.background
|
import androidx.compose.foundation.background
|
||||||
import androidx.compose.foundation.layout.Box
|
import androidx.compose.foundation.layout.Box
|
||||||
import androidx.compose.foundation.layout.Row
|
import androidx.compose.foundation.layout.Row
|
||||||
|
|
@ -28,8 +33,10 @@ import androidx.compose.foundation.layout.size
|
||||||
import androidx.compose.foundation.shape.CircleShape
|
import androidx.compose.foundation.shape.CircleShape
|
||||||
import androidx.compose.material3.MaterialTheme
|
import androidx.compose.material3.MaterialTheme
|
||||||
import androidx.compose.runtime.Composable
|
import androidx.compose.runtime.Composable
|
||||||
|
import androidx.compose.runtime.getValue
|
||||||
import androidx.compose.ui.Alignment
|
import androidx.compose.ui.Alignment
|
||||||
import androidx.compose.ui.Modifier
|
import androidx.compose.ui.Modifier
|
||||||
|
import androidx.compose.ui.draw.alpha
|
||||||
import androidx.compose.ui.unit.dp
|
import androidx.compose.ui.unit.dp
|
||||||
import io.element.android.libraries.designsystem.preview.ElementPreview
|
import io.element.android.libraries.designsystem.preview.ElementPreview
|
||||||
import io.element.android.libraries.designsystem.preview.PreviewsDayNight
|
import io.element.android.libraries.designsystem.preview.PreviewsDayNight
|
||||||
|
|
@ -83,11 +90,24 @@ internal fun VoiceMessageRecording(
|
||||||
@Composable
|
@Composable
|
||||||
private fun RedRecordingDot(
|
private fun RedRecordingDot(
|
||||||
modifier: Modifier = Modifier,
|
modifier: Modifier = Modifier,
|
||||||
) = Box(
|
) {
|
||||||
modifier = modifier
|
val infiniteTransition = rememberInfiniteTransition("RedRecordingDot")
|
||||||
.size(8.dp)
|
val alpha by infiniteTransition.animateFloat(
|
||||||
.background(color = ElementTheme.colors.textCriticalPrimary, shape = CircleShape)
|
initialValue = 1f,
|
||||||
)
|
targetValue = 0f,
|
||||||
|
animationSpec = InfiniteRepeatableSpec(
|
||||||
|
animation = TweenSpec(durationMillis = 1_000),
|
||||||
|
repeatMode = RepeatMode.Reverse,
|
||||||
|
),
|
||||||
|
label = "RedRecordingDotAlpha",
|
||||||
|
)
|
||||||
|
Box(
|
||||||
|
modifier = modifier
|
||||||
|
.size(8.dp)
|
||||||
|
.alpha(alpha)
|
||||||
|
.background(color = ElementTheme.colors.textCriticalPrimary, shape = CircleShape)
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
@PreviewsDayNight
|
@PreviewsDayNight
|
||||||
@Composable
|
@Composable
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue