Merge pull request #54 from UmairKhalid786/feature/correct_navigation_product_detail_and_player

Feature/correct navigation product detail and player

Author: UmairKhalid786

app/src/main/java/com/techlads/composetv/features/details/ProductDetailsScreen.kt

@@ -1,10 +1,14 @@
 package com.techlads.composetv.features.details
 
 import androidx.activity.compose.BackHandler
+import androidx.compose.animation.core.animateDpAsState
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.*
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.layout.ContentScale
@@ -21,8 +25,11 @@ import androidx.tv.material3.Text
 import com.techlads.composetv.R
 import com.techlads.composetv.theme.AppTheme
 import com.techlads.composetv.theme.Material3Theme
-import com.techlads.composetv.widgets.BorderedFocusableItem
 import com.techlads.composetv.widgets.Button
+import com.techlads.composetv.widgets.ThumbnailImageCard
+import kotlinx.coroutines.delay
+
+const val ANIMATION_DELAY = 600L
 
 @Composable
 fun ProductDetailsScreen(onBackPressed: () -> Unit) {
@@ -34,6 +41,17 @@ private fun ProductDetailsContent(onBackPressed: () -> Unit) {
 
     BackHandler(onBack = onBackPressed)
 
+    val isLoaded = remember {
+        mutableStateOf(false)
+    }
+
+    val animatedPortraitSize = animateDpAsState(targetValue = if (isLoaded.value) 150.dp else 1.dp)
+
+    LaunchedEffect(key1 = Unit) {
+        delay(ANIMATION_DELAY)
+        isLoaded.value = true
+    }
+
     Box {
         SearchIcon(
             modifier = Modifier
@@ -60,11 +78,13 @@ private fun ProductDetailsContent(onBackPressed: () -> Unit) {
         }
 
         ThumbnailImageCard(
-            modifier = Modifier
+            Modifier
                 .align(Alignment.CenterStart)
-                .padding(start = 30.dp),
-            parent = 1, child = 1
-        )
+                .padding(start = 30.dp)
+                .width(animatedPortraitSize.value)
+        ) {
+            Text(text = "1x1")
+        }
     }
 }
 
@@ -207,20 +227,6 @@ fun Rating(rating: String) {
     }
 }
 
-@Composable
-fun ThumbnailImageCard(modifier: Modifier, parent: Int, child: Int) {
-    BorderedFocusableItem(
-        onClick = { },
-        modifier = modifier
-            .padding(8.dp)
-            .size(width = 150.dp, height = 200.dp)
-    ) {
-        Box(contentAlignment = Alignment.Center, modifier = Modifier.fillMaxSize()) {
-            Text(text = "Item $parent x $child", textAlign = TextAlign.Center)
-        }
-    }
-}
-
 @Preview(device = Devices.TV_1080p)
 @Composable
 fun DetailsScreenPrev() {

app/src/main/java/com/techlads/composetv/widgets/ThumbnailImageCard.kt

@@ -0,0 +1,49 @@
+@file:OptIn(ExperimentalTvMaterial3Api::class)
+
+package com.techlads.composetv.widgets
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.BoxScope
+import androidx.compose.foundation.layout.aspectRatio
+import androidx.compose.foundation.layout.width
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.tv.material3.ExperimentalTvMaterial3Api
+import androidx.tv.material3.MaterialTheme
+import androidx.tv.material3.Text
+import com.techlads.composetv.theme.Material3Theme
+
+@Composable
+fun ThumbnailImageCard(
+    modifier: Modifier = Modifier,
+    content: @Composable (BoxScope.() -> Unit)
+) {
+    Box(modifier = modifier
+        .background(
+            color = MaterialTheme.colorScheme.surface,
+            shape = MaterialTheme.shapes.small
+        ).aspectRatio(0.6f), contentAlignment = Alignment.Center) {
+        content()
+    }
+}
+
+@Preview
+@Composable
+fun ThumbnailImageCardPreview() {
+    Material3Theme {
+        ThumbnailImageCard(
+            Modifier
+                .width(150.dp)
+                .background(
+                    color = MaterialTheme.colorScheme.onSurface,
+                    shape = MaterialTheme.shapes.small
+                )
+        ) {
+            Text(text = "1x1")
+        }
+    }
+}