card aspect fix

app/src/main/kotlin/org/mjdev/tvapp/base/extensions/ModifierExt.kt

@@ -30,6 +30,10 @@ object ModifierExt {
         }
     }
 
+    fun Modifier.aspectRatio(ratio: Float?): Modifier = conditional(ratio != null) {
+        aspectRatio(ratio!!)
+    }
+
     fun Modifier.focusState(
         focusState: MutableState<FocusState?>
     ): Modifier = onFocusChanged { state ->

app/src/main/kotlin/org/mjdev/tvapp/base/ui/components/card/Card.kt

@@ -13,7 +13,6 @@ import androidx.compose.foundation.BorderStroke
 import androidx.compose.foundation.border
 import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.ColumnScope
-import androidx.compose.foundation.layout.aspectRatio
 import androidx.compose.foundation.layout.widthIn
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.runtime.Composable
@@ -35,6 +34,7 @@ import androidx.tv.material3.CardScale
 import androidx.tv.material3.CardShape
 import androidx.tv.material3.ExperimentalTvMaterial3Api
 import androidx.tv.material3.Glow
+import org.mjdev.tvapp.base.extensions.ModifierExt.aspectRatio
 
 @OptIn(ExperimentalTvMaterial3Api::class)
 @Preview
@@ -54,13 +54,14 @@ fun Card(
         focusGlowColor,
         unFocusGlowColor
     ),
+    aspectRatio : Float? =  16f / 9f,
     interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
     content: @Composable ColumnScope.() -> Unit = {}
 ) = androidx.tv.material3.Card(
     onClick = onClick,
     modifier = modifier
         .widthIn(max = 320.dp)
-        .aspectRatio(16f / 9f),
+        .aspectRatio(aspectRatio),
     onLongClick = onLongClick,
     shape = shape,
     colors = colors,

app/src/main/kotlin/org/mjdev/tvapp/base/ui/components/card/ItemCard.kt

@@ -23,6 +23,7 @@ import androidx.tv.material3.CardGlow
 import androidx.tv.material3.CardScale
 import androidx.tv.material3.CardShape
 import androidx.tv.material3.ExperimentalTvMaterial3Api
+import org.mjdev.tvapp.base.extensions.ModifierExt.aspectRatio
 import org.mjdev.tvapp.base.interfaces.ItemWithDescription
 import org.mjdev.tvapp.base.interfaces.ItemWithImage
 import org.mjdev.tvapp.base.ui.components.complex.FocusableCard
@@ -45,7 +46,7 @@ fun ItemCard(
     aspectRatio: Float? = 16f / 9f,
     imageRenderer: @Composable (modifier: Modifier) -> Unit = {
         ImageAny(
-            modifier = modifier,
+            modifier = modifier.aspectRatio(aspectRatio),
             src = (item as? ItemWithImage)?.imageUrl,
             contentDescription = (item as? ItemWithDescription)?.description?.toString(),
             contentScale = contentScale,
@@ -55,7 +56,6 @@ fun ItemCard(
     onClick: (item: Any?) -> Unit = {},
 ) = FocusableCard(
     modifier = modifier.widthIn(max = 320.dp),
-    aspectRatio = aspectRatio,
     item = item,
     contentScale = contentScale,
     scale = scale,

app/src/main/kotlin/org/mjdev/tvapp/base/ui/components/card/PhotoCard.kt

@@ -43,12 +43,12 @@ fun PhotoCard(
     placeholder: @Composable () -> Unit = {},
     scale: CardScale = CardDefaults.scale(),
     onClick: (item: Any?) -> Unit = {},
-)  {
+) {
     ItemCard(
         item = item,
-        modifier  = modifier,
+        modifier = modifier,
         contentScale = contentScale,
-        aspectRatio=aspectRatio,
+        aspectRatio = aspectRatio,
         scale = scale,
         imageRenderer = imageRenderer,
         placeholder = placeholder,

app/src/main/kotlin/org/mjdev/tvapp/base/ui/components/card/PreviewCard.kt

@@ -17,8 +17,6 @@ import androidx.compose.foundation.background
 import androidx.compose.foundation.border
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.foundation.layout.height
-import androidx.compose.foundation.layout.width
 import androidx.compose.material3.CircularProgressIndicator
 import androidx.compose.runtime.*
 import androidx.compose.runtime.saveable.rememberSaveable
@@ -29,7 +27,6 @@ import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.platform.LocalLifecycleOwner
 import androidx.compose.ui.tooling.preview.Preview
-import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.viewinterop.AndroidView
 import androidx.lifecycle.Lifecycle
@@ -53,6 +50,7 @@ import coil.compose.AsyncImage
 import coil.compose.rememberAsyncImagePainter
 import kotlinx.coroutines.Dispatchers
 import kotlinx.coroutines.withContext
+import org.mjdev.tvapp.base.extensions.ModifierExt.aspectRatio
 
 @OptIn(ExperimentalTvMaterial3Api::class)
 @Suppress("unused")
@@ -61,9 +59,8 @@ import kotlinx.coroutines.withContext
 @Composable
 fun PreviewCard(
     modifier: Modifier = Modifier,
-    cardWidth: Dp = 200.dp,
-    cardHeight: Dp = 140.dp,
     videoUrl: String = "",
+    aspectRatio: Float? = 16f / 9f,
     hasFocus: Boolean = false,
     clipStartPosition: Long = 2000000,
     clipEndPosition: Long = 8000000,
@@ -71,9 +68,7 @@ fun PreviewCard(
     thumbnailUrl: String? = null
 ) {
     Card(
-        modifier = modifier
-            .width(if (hasFocus) cardWidth.times(1.2f) else cardWidth)
-            .height(if (hasFocus) cardHeight.times(1.2f) else cardHeight)
+        modifier = modifier.aspectRatio(aspectRatio)
     ) {
         val context = LocalContext.current
         var currentlyPlaying by remember { mutableStateOf(false) }

app/src/main/kotlin/org/mjdev/tvapp/base/ui/components/complex/FocusableCard.kt

@@ -9,7 +9,6 @@
 package org.mjdev.tvapp.base.ui.components.complex
 
 import android.annotation.SuppressLint
-import androidx.compose.foundation.layout.aspectRatio
 import androidx.compose.foundation.layout.defaultMinSize
 import androidx.compose.foundation.layout.padding
 import androidx.compose.runtime.Composable
@@ -64,7 +63,6 @@ fun FocusableCard(
             placeholder = placeholder
         )
     },
-    aspectRatio: Float? = 16f / 9f,
     focusRequester : FocusRequester = ComposeExt.rememberFocusRequester(),
     onFocusChange: (state: FocusState) -> Unit = {},
     onClick: (item: Any?) -> Unit = {},
@@ -79,11 +77,8 @@ fun FocusableCard(
         modifier = modifier
             .onFocusChanged { state -> onFocusChange(state) }
             .requestFocusOnTouch(focusRequester)
-            .conditional(aspectRatio != null) {
-                aspectRatio(aspectRatio!!)
-            }
             .conditional(isEdit) {
-                aspectRatio(16f / 9f).defaultMinSize(80.dp)
+                defaultMinSize(80.dp)
             },
         image = {
             imageRenderer(modifier)