Add FeaturedLottieFileView

2021-09-04 18:14:13 +02:00
parent d60df4e5ff
commit 482fb019c7
1 changed files with 105 additions and 0 deletions
@@ -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 = {}
+        )
+      }
+    )
+  }
+}