AudioTrackView

AudioTrackView.kt

import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.Crossfade
import androidx.compose.animation.ExperimentalAnimationApi
import androidx.compose.animation.core.FastOutLinearInEasing
import androidx.compose.animation.core.animateFloatAsState
import androidx.compose.animation.core.tween
import androidx.compose.animation.fadeIn
import androidx.compose.animation.fadeOut
import androidx.compose.foundation.BorderStroke
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.clickable
import androidx.compose.foundation.gestures.PressGestureScope
import androidx.compose.foundation.gestures.awaitFirstDown
import androidx.compose.foundation.gestures.forEachGesture
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.layout.widthIn
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.Button
import androidx.compose.material.Card
import androidx.compose.material.Divider
import androidx.compose.material.ExperimentalMaterialApi
import androidx.compose.material.Icon
import androidx.compose.material.IconButton
import androidx.compose.material.Slider
import androidx.compose.material.SliderColors
import androidx.compose.material.SliderDefaults
import androidx.compose.material.Text
import androidx.compose.material.ripple.rememberRipple
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Alignment.Companion.Center
import androidx.compose.ui.Alignment.Companion.CenterVertically
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.alpha
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.colorspace.ColorSpace
import androidx.compose.ui.graphics.graphicsLayer
import androidx.compose.ui.input.pointer.PointerInputScope
import androidx.compose.ui.input.pointer.consumeDownChange
import androidx.compose.ui.input.pointer.pointerInput
import androidx.compose.ui.res.colorResource
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.ExperimentalTextApi
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.lemonadeinc.lemonade.R
import com.lemonadeinc.lemonade.ui.composables.components.latoFamily
import com.lemonadeinc.lemonade.ui.debug.composables.voiceRecord.RecordingsHandler
import com.lemonadeinc.lemonade.ui.debug.composables.voiceRecord.VoiceRecordingViewModel
import kotlinx.coroutines.coroutineScope
import kotlin.random.Random

@ExperimentalMaterialApi
@ExperimentalAnimationApi
@ExperimentalTextApi
@Composable
fun AudioTrackView(viewModel: VoiceRecordingViewModel, audioTrack: RecordingsHandler.AudioTrack) {
    val borderColor = colorResource(id = R.color.lemonade_glass)
    val currentTrack = viewModel.isCurrentTrack(audioTrack.id)
    Card(
        elevation = 0.dp,
        backgroundColor = Color.White,
        shape = RoundedCornerShape(10.dp),
        modifier = Modifier
            .alpha(animateFloatAsState(targetValue = 1f).value)
            .fillMaxWidth()
            .padding(start = 20.dp, end = 20.dp, top = 6.dp, bottom = 6.dp)
            .height(45.dp)
            .border(
                BorderStroke(1.dp, borderColor),
                shape = RoundedCornerShape(10.dp)
            )
    ) {
        Row(verticalAlignment = CenterVertically) {
            Spacer(modifier = Modifier.size(10.dp))
            Box(
                modifier = Modifier
                    .size(30.dp)
                    .align(CenterVertically)
                    .border(
                        BorderStroke(1.dp, borderColor),
                        shape = CircleShape
                    )
            ) {
                AnimatedVisibilityWrapper(
                    modifier = Modifier.align(Center),
                    visible = !viewModel.isPlaying,
                    rotation = animateFloatAsState(targetValue = if (viewModel.isPlaying) 90f else 0f).value,
                    onClick = { viewModel.playClicked(audioTrack.id) }
                ) {
                    Icon(
                        painterResource(id = R.drawable.ic_play),
                        modifier = Modifier.align(Center),
                        contentDescription = "Localized description",
                        tint = colorResource(id = R.color.lemonade_pink)
                    )
                }
                AnimatedVisibilityWrapper(
                    modifier = Modifier.align(Center),
                    visible = viewModel.isPlaying,
                    rotation = animateFloatAsState(targetValue = if (viewModel.isPlaying) 0f else 90f).value,
                    onClick = { viewModel.pauseClicked() }
                ) {
                    Icon(
                        painterResource(id = R.drawable.ic_pause),
                        modifier = Modifier.align(Center),
                        contentDescription = "Localized description",
                        tint = colorResource(id = R.color.lemonade_pink)
                    )
                }
            }
            Spacer(modifier = Modifier.size(10.dp))
            // Extracting this code to a function AudioProgressBar stopped the
            // code above from recomposing |
            //                             v
//
//            Slider(
//                value = if (currentTrack) viewModel.trackProgress else 0f,
//                valueRange = 0f..audioTrack.duration.toFloat(),
//                modifier = modifier.then(Modifier
//                    .fillMaxWidth()
//                    .padding(8.dp)),
//                onValueChange = { newValue ->
//                    if (currentTrack) viewModel.goToTrackPosition(newValue)
//                },
//            )
            AudioProgressBar(
                modifier = Modifier
                    .weight(1f)
                    .align(CenterVertically),
                currentTrack,
                viewModel,
                audioTrack
            )
            Spacer(modifier = Modifier.size(10.dp))
            Text(
                text = if (currentTrack) viewModel.elapsedTime else "00:00",
                fontFamily = latoFamily,
                fontWeight = FontWeight.Normal,
                fontSize = 11.sp,
                color = colorResource(id = R.color.lemonade_metal),
                modifier = Modifier.widthIn(min = 29.dp)
            )
            Spacer(modifier = Modifier.size(10.dp))
            Divider(
                Modifier
                    .height(27.dp)
                    .width(1.dp)
                    .background(colorResource(id = R.color.quote_discounts_divider))
            )
            Spacer(modifier = Modifier.size(10.dp))
            IconButton(
                onClick = { viewModel.pauseClicked() },
            ) {
                Icon(
                    painterResource(id = R.drawable.ic_trash),
                    contentDescription = "Localized description",
                    tint = Color.Black
                )
            }
        }
    }
}

@ExperimentalTextApi
@ExperimentalAnimationApi
@Composable
private fun AudioProgressBar(
    modifier: Modifier = Modifier,
    currentTrack: Boolean,
    viewModel: VoiceRecordingViewModel,
    audioTrack: RecordingsHandler.AudioTrack
) {
    Slider(
        value = if (currentTrack) viewModel.trackProgress else 0f,
        valueRange = 0f..audioTrack.duration.toFloat(),
        modifier = modifier.then(Modifier
            .fillMaxWidth()
            .padding(8.dp)),
        onValueChange = { newValue ->
            if (currentTrack) viewModel.goToTrackPosition(newValue)
        },
    )
}

@ExperimentalAnimationApi
@Composable
private fun AnimatedVisibilityWrapper(
    modifier: Modifier,
    visible: Boolean,
    rotation: Float,
    onClick: () -> Unit,
    content: @Composable () -> Unit
) {

    // This was recomposing every time trackProgress in viewModel fired.

    AnimatedVisibility(
        visible = visible,
        enter = fadeIn(
            animationSpec = tween(delayMillis = 50, durationMillis = 300, easing = FastOutLinearInEasing)
        ),
        exit = fadeOut(
            animationSpec = tween(delayMillis = 50, durationMillis = 300, easing = FastOutLinearInEasing)
        )
    ) {
        Card(
            elevation = 0.dp,
            modifier = modifier.then(
                Modifier
                    .fillMaxSize()
                    .graphicsLayer { rotationZ = rotation }
                    .clickable(
                        interactionSource = MutableInteractionSource(),
                        indication = rememberRipple(
                            radius = 20.dp,
                            bounded = false
                        )
                    ) {
                        onClick()
                    },
            )
        ) { content() }
    }
}