Video item in playlist

VideoItem.kt

@Composable
fun VideoItem(index: Int, video: VideoResultEntity) {
    val currentlyPlaying = remember { mutableStateOf(true) }

    ConstraintLayout(
        modifier =
            Modifier.testTag("VideoParent")
                .padding(8.dp)
                .wrapContentSize()
    ) {
        val (thumbnail, play, title, nowPlaying) =
            createRefs()

        // thumbnail
        Image(
            contentScale = ContentScale.Crop,
            painter =
                rememberImagePainter(
                    data = video.preview,
                    builder = {
                        placeholder(R.drawable.app_logo)
                        crossfade(true)
                    }
                ),
            contentDescription = "Thumbnail",
            modifier =
                Modifier.height(120.dp)
                    .width(120.dp)
                    .clip(RoundedCornerShape(20.dp))
                    .shadow(elevation = 20.dp)
                    .constrainAs(thumbnail) {
                        top.linkTo(
                            parent.top,
                            margin = 8.dp
                        )
                        start.linkTo(
                            parent.start,
                            margin = 8.dp
                        )
                        bottom.linkTo(parent.bottom)
                    }
        )

        // title
        Text(
            text = video.name,
            modifier =
                Modifier.constrainAs(title) {
                    top.linkTo(thumbnail.top, margin = 8.dp)
                    start.linkTo(
                        thumbnail.end,
                        margin = 8.dp
                    )
                    end.linkTo(parent.end, margin = 8.dp)
                    width = Dimension.preferredWrapContent
                    height = Dimension.wrapContent
                },
            color = Color.Black,
            textAlign = TextAlign.Center,
            fontWeight = FontWeight.Bold,
            softWrap = true,
        )

        // divider
        Divider(
            modifier =
                Modifier.padding(horizontal = 8.dp)
                    .testTag("Divider"),
            color = Color(0xFFE0E0E0)
        )

        // show only if video is currently playing
        if (currentlyPlaying.value) {
            // play button image
            Image(
                contentScale = ContentScale.Crop,
                colorFilter =
                    if (video.preview.isEmpty())
                        ColorFilter.tint(Color.White)
                    else
                        ColorFilter.tint(Color(0xFFF50057)),
                painter =
                    painterResource(
                        id = R.drawable.ic_play
                    ),
                contentDescription = "Playing",
                modifier =
                    Modifier.height(50.dp)
                        .width(50.dp)
                        .graphicsLayer {
                            clip = true
                            shadowElevation = 20.dp.toPx()
                        }
                        .constrainAs(play) {
                            top.linkTo(thumbnail.top)
                            start.linkTo(thumbnail.start)
                            end.linkTo(thumbnail.end)
                            bottom.linkTo(thumbnail.bottom)
                        }
            )

            // Now playing text
            Text(
                text = "Now Playing",
                color = Color(0xFFF50057),
                textAlign = TextAlign.Center,
                fontWeight = FontWeight.Bold,
                modifier =
                    Modifier.constrainAs(nowPlaying) {
                        top.linkTo(
                            title.bottom,
                            margin = 8.dp
                        )
                        start.linkTo(
                            thumbnail.end,
                            margin = 8.dp
                        )
                        bottom.linkTo(
                            thumbnail.bottom,
                            margin = 8.dp
                        )
                        end.linkTo(
                            parent.end,
                            margin = 8.dp
                        )
                        width =
                            Dimension.preferredWrapContent
                        height =
                            Dimension.preferredWrapContent
                    }
            )
        }
    }
}