Skip to content

Commit

Permalink
Blink red dot while recording voice message (#1677)
Browse files Browse the repository at this point in the history
  • Loading branch information
Marco Romano authored Oct 27, 2023
1 parent 8121d1a commit a51fdf9
Showing 1 changed file with 25 additions and 5 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,11 @@

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.layout.Box
import androidx.compose.foundation.layout.Row
Expand All @@ -28,8 +33,10 @@ 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.runtime.getValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.alpha
import androidx.compose.ui.unit.dp
import io.element.android.libraries.designsystem.preview.ElementPreview
import io.element.android.libraries.designsystem.preview.PreviewsDayNight
Expand Down Expand Up @@ -83,11 +90,24 @@ internal fun VoiceMessageRecording(
@Composable
private fun RedRecordingDot(
modifier: Modifier = Modifier,
) = Box(
modifier = modifier
.size(8.dp)
.background(color = ElementTheme.colors.textCriticalPrimary, shape = CircleShape)
)
) {
val infiniteTransition = rememberInfiniteTransition("RedRecordingDot")
val alpha by infiniteTransition.animateFloat(
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
@Composable
Expand Down

0 comments on commit a51fdf9

Please sign in to comment.