From 482fb019c70565ec86adce9488321cc1e90b0287 Mon Sep 17 00:00:00 2001 From: Eric Ampire Date: Sat, 4 Sep 2021 18:14:13 +0200 Subject: [PATCH] Add FeaturedLottieFileView --- .../screen/home/ui/FeaturedLottieFileView.kt | 105 ++++++++++++++++++ 1 file changed, 105 insertions(+) create mode 100644 app/src/main/java/com/ericampire/android/androidstudycase/presentation/screen/home/ui/FeaturedLottieFileView.kt diff --git a/app/src/main/java/com/ericampire/android/androidstudycase/presentation/screen/home/ui/FeaturedLottieFileView.kt b/app/src/main/java/com/ericampire/android/androidstudycase/presentation/screen/home/ui/FeaturedLottieFileView.kt new file mode 100644 index 0000000..0953e0f --- /dev/null +++ b/app/src/main/java/com/ericampire/android/androidstudycase/presentation/screen/home/ui/FeaturedLottieFileView.kt @@ -0,0 +1,105 @@ +package com.ericampire.android.androidstudycase.presentation.screen.home.ui + +import androidx.compose.foundation.background +import androidx.compose.foundation.layout.* +import androidx.compose.foundation.shape.CornerSize +import androidx.compose.material.Card +import androidx.compose.material.ExperimentalMaterialApi +import androidx.compose.material.MaterialTheme +import androidx.compose.material.Text +import androidx.compose.runtime.Composable +import androidx.compose.runtime.getValue +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.graphics.Color +import androidx.compose.ui.text.style.TextAlign +import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.tooling.preview.PreviewParameter +import androidx.compose.ui.unit.dp +import com.airbnb.lottie.compose.* +import com.ericampire.android.androidstudycase.domain.entity.Lottiefile +import com.ericampire.android.androidstudycase.presentation.screen.explore.ui.LottieFileItemView +import com.ericampire.android.androidstudycase.presentation.theme.AndroidStudyCaseTheme +import com.ericampire.android.androidstudycase.presentation.theme.AppColor +import com.ericampire.android.androidstudycase.util.LottieFileProvider + +@ExperimentalMaterialApi +@Composable +fun FeaturedLottieFileView( + modifier: Modifier = Modifier, + lottiefile: Lottiefile, + onClick: (Lottiefile) -> Unit +) { + val composition by rememberLottieComposition( + spec = LottieCompositionSpec.Url(lottiefile.lottieUrl) + ) + val progress by animateLottieCompositionAsState( + composition = composition, + iterations = LottieConstants.IterateForever, + ) + + Card( + modifier = modifier, + elevation = 0.dp, + onClick = { onClick(lottiefile) }, + content = { + Column( + content = { + Box( + modifier = modifier + .background(Color.White) + .height(200.dp) + .width(170.dp), + content = { + LottieAnimation( + modifier = Modifier.wrapContentSize(), + composition = composition, + progress = progress, + ) + } + ) + + Column( + verticalArrangement = Arrangement.spacedBy(3.dp), + modifier = Modifier + .background(AppColor.Black001) + .width(170.dp) + .padding(horizontal = 10.dp, vertical = 8.dp), + content = { + Text( + maxLines = 1, + text = lottiefile.name, + style = MaterialTheme.typography.h6, + textAlign = TextAlign.Center, + ) + Text( + text = lottiefile.createdBy?.name ?: "", + maxLines = 1, + style = MaterialTheme.typography.caption, + textAlign = TextAlign.Center, + ) + } + ) + } + ) + } + ) +} + +@ExperimentalMaterialApi +@Preview() +@Composable +fun FeaturedLottieFileViewPreview(@PreviewParameter(LottieFileProvider::class) data: Lottiefile) { + AndroidStudyCaseTheme(darkTheme = true) { + Box( + modifier = Modifier.fillMaxSize(), + contentAlignment = Alignment.Center, + content = { + FeaturedLottieFileView( + lottiefile = data, + onClick = {} + ) + } + ) + } +} \ No newline at end of file