TimelineControllers.kt

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun TimelineControllers(
    modifier: Modifier = Modifier,
    playerPosition: Long,
    duration: Long,
    seeking: (Boolean) -> Unit,
    formatedTime: String,
    seekPlayerToPosition:(Long) -> Unit,
) {

    var position by remember { mutableLongStateOf(0L) }

    Row(
        modifier = modifier
            .fillMaxWidth()
            .padding(horizontal = 16.dp),
        verticalAlignment = Alignment.CenterVertically
    ) {
        Slider(
            value = position.toFloat().coerceAtMost(duration.toFloat()),
            onValueChange = {
                seeking(true)
                position = it.toLong()
            },
            onValueChangeFinished = {
                seekPlayerToPosition(position)
                seeking(false)
            },
            valueRange = 0f..duration.toFloat(),
            modifier = Modifier
                .weight(1f) // Takes all the space except what Text needs
                .padding(end = 8.dp), // small space between slider and text
            colors = SliderDefaults.colors(
                thumbColor = Color.Red,
                activeTrackColor = Color.Red
            ),
            thumb = {
                Box(
                    modifier = Modifier
                        .size(12.dp)
                        .background(Color.Red, shape = CircleShape)
                )
            },
            track = {
                val fraction = if (duration == 0L) 0f else (position.toFloat().coerceAtMost(duration.toFloat()) / duration).coerceIn(0f, 1f)
                Box(
                    modifier = Modifier
                        .fillMaxWidth()
                        .height(3.dp)
                        .background(
                            Color.Gray.copy(alpha = 0.3f),
                            shape = RoundedCornerShape(1.5.dp)
                        )
                ) {
                    Box(
                        modifier = Modifier
                            .fillMaxWidth(fraction)
                            .height(3.dp)
                            .background(Color.Red, shape = RoundedCornerShape(1.5.dp))
                    )
                }
            }
        )

       androidx.compose.animation.AnimatedVisibility(visible = formatedTime.isNotEmpty()) {
            Text(
                text = formatedTime,
                color = Color.White,
                fontSize = 15.sp
            )
        }
    }


    LaunchedEffect(playerPosition) {
        position = playerPosition
    }

}