feat(Explore): horizontal cards in horizontal orientation

urFate · Sep 21, 2024 · 88d44da · 88d44da
1 parent 91ebcc2
commit 88d44da
Show file tree

Hide file tree

Showing 3 changed files with 118 additions and 11 deletions.
diff --git a/app/src/main/java/org/shirabox/app/ui/component/general/HorizontalCard.kt b/app/src/main/java/org/shirabox/app/ui/component/general/HorizontalCard.kt
@@ -0,0 +1,88 @@
+package org.shirabox.app.ui.component.general
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Surface
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.unit.dp
+import coil.compose.AsyncImage
+
+@Composable
+fun HorizontalCard(
+    modifier: Modifier = Modifier,
+    title: String,
+    subTitle: String,
+    image: String,
+    onClick: () -> Unit
+) {
+
+    Surface(
+        modifier = modifier,
+        shape = RoundedCornerShape(10),
+        shadowElevation = 8.dp
+    ) {
+        Box(
+            modifier = Modifier.clickable { onClick() }
+        ) {
+            AsyncImage(
+                modifier = Modifier.fillMaxSize(),
+                model = image,
+                contentDescription = image,
+                contentScale = ContentScale.Crop,
+                alignment = Alignment.TopCenter
+            )
+
+            Column(
+                modifier = Modifier
+                    .fillMaxSize()
+                    .background(Color.Black.copy(0.5f)),
+                verticalArrangement = Arrangement.Bottom,
+                horizontalAlignment = Alignment.Start
+            ) {
+                Column(
+                    modifier = Modifier.padding(16.dp),
+                    horizontalAlignment = Alignment.CenterHorizontally
+                ) {
+                    Column(
+                        modifier = Modifier.fillMaxWidth(),
+                        verticalArrangement = Arrangement.Bottom,
+                        horizontalAlignment = Alignment.Start
+                    ) {
+                        Text(
+                            modifier = Modifier.fillMaxWidth(),
+                            text = title,
+                            color = Color.White,
+                            fontWeight = FontWeight.Bold,
+                            maxLines = 1,
+                            overflow = TextOverflow.Ellipsis,
+                            textAlign = TextAlign.Start
+                        )
+                        Text(
+                            modifier = Modifier.fillMaxWidth(),
+                            text = subTitle,
+                            color = Color.White,
+                            maxLines = 1,
+                            overflow = TextOverflow.Ellipsis,
+                            textAlign = TextAlign.Start
+                        )
+                    }
+                }
+            }
+        }
+    }
+}
diff --git a/app/src/main/java/org/shirabox/app/ui/component/general/ScheduleCard.kt b/app/src/main/java/org/shirabox/app/ui/component/general/ScheduleCard.kt
@@ -44,7 +44,7 @@ fun ScheduleCard(
             it.getDuration()
         }
 
-        "$firstTimeLabel".plus(secondTimeLabel?.let { " - $it" })
+        firstTimeLabel.plus(secondTimeLabel?.let { " - $it" })
     }
 
     Surface(

diff --git a/app/src/main/java/org/shirabox/app/ui/screen/explore/feed/primary/PrimaryPopularsFeed.kt b/app/src/main/java/org/shirabox/app/ui/screen/explore/feed/primary/PrimaryPopularsFeed.kt
@@ -28,6 +28,7 @@ import org.shirabox.app.R
 import org.shirabox.app.ui.activity.resource.ResourceActivity
 import org.shirabox.app.ui.component.general.BaseCard
 import org.shirabox.app.ui.component.general.ContentCardPlaceholder
+import org.shirabox.app.ui.component.general.HorizontalCard
 import org.shirabox.core.model.Content
 import org.shirabox.core.util.Util
 
@@ -36,11 +37,15 @@ internal fun PrimaryPopularsFeed(isReady: Boolean, contents: List<Content>) {
     val context = LocalContext.current
     val configuration = LocalConfiguration.current
 
-    val cardWidth = 180
-    val cardHeight = 240
-    val columns = remember { configuration.screenWidthDp.floorDiv(cardWidth) }
+    val cardWidth = remember(configuration.orientation) { if(configuration.orientation == 1) 180 else 260 }
+    val cardHeight = remember(configuration.orientation) { if(configuration.orientation == 1) 240 else 180 }
 
-    val gridHeight by remember(contents) {
+    val columns = remember(configuration.orientation) { configuration.screenWidthDp.floorDiv(cardWidth) }
+    val placeholders = remember(configuration.orientation) {
+        if (configuration.orientation == 2) 7 else 2
+    }
+
+    val gridHeight by remember(contents, configuration.orientation) {
         derivedStateOf {
             Util.calcGridHeight(
                 itemsCount = contents.size.plus(2),
@@ -73,11 +78,7 @@ internal fun PrimaryPopularsFeed(isReady: Boolean, contents: List<Content>) {
             userScrollEnabled = false
         ) {
             items(contents) {
-                BaseCard(
-                    modifier = Modifier
-                        .size(cardWidth.dp, cardHeight.dp),
-                    title = it.name, image = it.image, type = it.type
-                ) {
+                val action = {
                     context.startActivity(
                         Intent(
                             context,
@@ -88,9 +89,27 @@ internal fun PrimaryPopularsFeed(isReady: Boolean, contents: List<Content>) {
                         }
                     )
                 }
+
+                if (configuration.orientation == 1) {
+                    BaseCard(
+                        modifier = Modifier.size(cardWidth.dp, cardHeight.dp),
+                        title = it.name,
+                        image = it.image,
+                        type = it.type,
+                        onClick = action
+                    )
+                } else {
+                    HorizontalCard(
+                        modifier = Modifier.size(cardWidth.dp, cardHeight.dp),
+                        title = it.name,
+                        subTitle = it.enName,
+                        image = it.image,
+                        onClick = action
+                    )
+                }
             }
 
-            items(2) {
+            items(placeholders) {
                 ContentCardPlaceholder(modifier = Modifier.size(cardWidth.dp, cardHeight.dp))
             }
         }