Skip to content

Instantly share code, notes, and snippets.

@rubenquadros
Last active Sep 4, 2021
Embed
What would you like to do?
Video item in playlist
@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
}
)
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment