From 887dd7001c1d8b5060b8ce2c51cd781a5234899b Mon Sep 17 00:00:00 2001 From: Damontecres Date: Sat, 4 Oct 2025 22:42:21 -0400 Subject: [PATCH] Card UI changes, transparent --- .../dolphin/ui/cards/BannerCard.kt | 2 +- .../dolphin/ui/cards/ChapterCard.kt | 2 +- .../damontecres/dolphin/ui/cards/ItemCard.kt | 60 ++++++++++++++----- .../damontecres/dolphin/ui/cards/NullCard.kt | 13 ++-- .../dolphin/ui/cards/PersonCard.kt | 18 +++++- 5 files changed, 72 insertions(+), 23 deletions(-) diff --git a/app/src/main/java/com/github/damontecres/dolphin/ui/cards/BannerCard.kt b/app/src/main/java/com/github/damontecres/dolphin/ui/cards/BannerCard.kt index dff20b8e..2ac4ba39 100644 --- a/app/src/main/java/com/github/damontecres/dolphin/ui/cards/BannerCard.kt +++ b/app/src/main/java/com/github/damontecres/dolphin/ui/cards/BannerCard.kt @@ -37,7 +37,7 @@ fun BannerCard( onClick: () -> Unit, onLongClick: () -> Unit, modifier: Modifier = Modifier, - cardHeight: Dp = 140.dp, + cardHeight: Dp = 140.dp * .85f, aspectRatio: Float = 16f / 9, interactionSource: MutableInteractionSource? = null, ) { diff --git a/app/src/main/java/com/github/damontecres/dolphin/ui/cards/ChapterCard.kt b/app/src/main/java/com/github/damontecres/dolphin/ui/cards/ChapterCard.kt index 5803e23a..ccc1742e 100644 --- a/app/src/main/java/com/github/damontecres/dolphin/ui/cards/ChapterCard.kt +++ b/app/src/main/java/com/github/damontecres/dolphin/ui/cards/ChapterCard.kt @@ -28,7 +28,7 @@ fun ChapterCard( imageUrl: String?, onClick: () -> Unit, modifier: Modifier = Modifier, - cardHeight: Dp = 140.dp, + cardHeight: Dp = 140.dp * .85f, aspectRatio: Float = 16f / 9, onLongClick: (() -> Unit)? = null, interactionSource: MutableInteractionSource? = null, diff --git a/app/src/main/java/com/github/damontecres/dolphin/ui/cards/ItemCard.kt b/app/src/main/java/com/github/damontecres/dolphin/ui/cards/ItemCard.kt index 786732be..4bdfc806 100644 --- a/app/src/main/java/com/github/damontecres/dolphin/ui/cards/ItemCard.kt +++ b/app/src/main/java/com/github/damontecres/dolphin/ui/cards/ItemCard.kt @@ -27,14 +27,17 @@ import androidx.compose.runtime.setValue import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.draw.clip +import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.RectangleShape import androidx.compose.ui.layout.ContentScale import androidx.compose.ui.res.colorResource import androidx.compose.ui.res.stringResource +import androidx.compose.ui.text.style.TextAlign import androidx.compose.ui.unit.Dp import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.sp import androidx.tv.material3.Card +import androidx.tv.material3.CardDefaults import androidx.tv.material3.Icon import androidx.tv.material3.MaterialTheme import androidx.tv.material3.Text @@ -43,6 +46,7 @@ import com.github.damontecres.dolphin.R import com.github.damontecres.dolphin.data.model.BaseItem import com.github.damontecres.dolphin.ui.FontAwesome import com.github.damontecres.dolphin.ui.enableMarquee +import com.github.damontecres.dolphin.ui.ifElse import kotlinx.coroutines.delay import org.jellyfin.sdk.model.api.BaseItemKind @@ -52,11 +56,11 @@ fun ItemCard( onClick: () -> Unit, onLongClick: () -> Unit, modifier: Modifier = Modifier, - cardWidth: Dp = 150.dp, - cardHeight: Dp = 200.dp, + cardWidth: Dp? = null, + cardHeight: Dp = 200.dp * .85f, interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, ) { - val hideOverlayDelay = 1_000L + val hideOverlayDelay = 750L val focused = interactionSource.collectIsFocusedAsState().value var focusedAfterDelay by remember { mutableStateOf(false) } @@ -79,17 +83,21 @@ fun ItemCard( } else { val dto = item.data // TODO better aspect ratio handling - val height = - if (dto.primaryImageAspectRatio != null && dto.primaryImageAspectRatio!! > 1) cardWidth else cardHeight +// val height = +// if (dto.primaryImageAspectRatio != null && dto.primaryImageAspectRatio!! > 1) cardWidth else cardHeight Card( modifier = modifier, onClick = onClick, onLongClick = onLongClick, interactionSource = interactionSource, + colors = + CardDefaults.colors( + containerColor = Color.Transparent, + ), ) { Column( verticalArrangement = Arrangement.spacedBy(4.dp), - modifier = Modifier.width(cardWidth), + modifier = Modifier.ifElse(cardWidth != null, { Modifier.width(cardWidth!!) }), ) { ItemCardImage( imageUrl = item.imageUrl, @@ -102,15 +110,33 @@ fun ItemCard( modifier = Modifier .fillMaxWidth() - .height(height), - ) - Text( - text = item.name ?: "", - maxLines = 1, - modifier = - Modifier - .enableMarquee(focusedAfterDelay), + .height(cardHeight), ) + Column( + verticalArrangement = Arrangement.spacedBy(0.dp), + modifier = Modifier.padding(bottom = 4.dp), + ) { + Text( + text = item.name ?: "", + maxLines = 1, + textAlign = TextAlign.Center, + modifier = + Modifier + .fillMaxWidth() + .padding(horizontal = 4.dp) + .enableMarquee(focusedAfterDelay), + ) + Text( + text = item.data.productionYear?.toString() ?: "", + maxLines = 1, + textAlign = TextAlign.Center, + modifier = + Modifier + .fillMaxWidth() + .padding(horizontal = 4.dp) + .enableMarquee(focusedAfterDelay), + ) + } if (dto.type == BaseItemKind.EPISODE) { if (dto.parentIndexNumber != null && dto.indexNumber != null) { Text( @@ -139,7 +165,11 @@ fun ItemCardImage( model = imageUrl, contentDescription = name, contentScale = ContentScale.Fit, - modifier = Modifier.fillMaxSize(), + alignment = Alignment.Center, + modifier = + Modifier + .fillMaxSize() + .align(Alignment.TopCenter), ) AnimatedVisibility( visible = showOverlay, diff --git a/app/src/main/java/com/github/damontecres/dolphin/ui/cards/NullCard.kt b/app/src/main/java/com/github/damontecres/dolphin/ui/cards/NullCard.kt index b7cec877..cd31fefc 100644 --- a/app/src/main/java/com/github/damontecres/dolphin/ui/cards/NullCard.kt +++ b/app/src/main/java/com/github/damontecres/dolphin/ui/cards/NullCard.kt @@ -2,19 +2,21 @@ package com.github.damontecres.dolphin.ui.cards import androidx.compose.foundation.interaction.MutableInteractionSource import androidx.compose.foundation.layout.Column -import androidx.compose.foundation.layout.size +import androidx.compose.foundation.layout.height +import androidx.compose.foundation.layout.width import androidx.compose.runtime.Composable import androidx.compose.ui.Modifier import androidx.compose.ui.unit.Dp import androidx.compose.ui.unit.dp import androidx.tv.material3.Card import androidx.tv.material3.Text +import com.github.damontecres.dolphin.ui.ifElse @Composable fun NullCard( modifier: Modifier = Modifier, - cardWidth: Dp = 150.dp, - cardHeight: Dp = 200.dp, + cardWidth: Dp? = null, + cardHeight: Dp = 200.dp * .75f, interactionSource: MutableInteractionSource? = null, ) { Card( @@ -23,7 +25,10 @@ fun NullCard( interactionSource = interactionSource, ) { Column( - modifier = Modifier.size(cardWidth, cardHeight), + modifier = + Modifier + .height(cardHeight) + .ifElse(cardWidth != null, { Modifier.width(cardWidth!!) }), ) { Text( text = "Loading...", diff --git a/app/src/main/java/com/github/damontecres/dolphin/ui/cards/PersonCard.kt b/app/src/main/java/com/github/damontecres/dolphin/ui/cards/PersonCard.kt index 0ed2131e..84795f5e 100644 --- a/app/src/main/java/com/github/damontecres/dolphin/ui/cards/PersonCard.kt +++ b/app/src/main/java/com/github/damontecres/dolphin/ui/cards/PersonCard.kt @@ -6,6 +6,7 @@ import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.height +import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.width import androidx.compose.runtime.Composable import androidx.compose.runtime.LaunchedEffect @@ -14,9 +15,12 @@ import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember import androidx.compose.runtime.setValue import androidx.compose.ui.Modifier +import androidx.compose.ui.graphics.Color +import androidx.compose.ui.text.style.TextAlign import androidx.compose.ui.unit.Dp import androidx.compose.ui.unit.dp import androidx.tv.material3.Card +import androidx.tv.material3.CardDefaults import androidx.tv.material3.Text import com.github.damontecres.dolphin.data.model.Person import com.github.damontecres.dolphin.ui.enableMarquee @@ -28,8 +32,8 @@ fun PersonCard( onClick: () -> Unit, onLongClick: () -> Unit, modifier: Modifier = Modifier, - cardWidth: Dp = 150.dp, - cardHeight: Dp = 200.dp, + cardWidth: Dp = 150.dp * .75f, + cardHeight: Dp = 200.dp * .75f, interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, ) { val hideOverlayDelay = 1_000L @@ -55,6 +59,10 @@ fun PersonCard( onClick = onClick, onLongClick = onLongClick, interactionSource = interactionSource, + colors = + CardDefaults.colors( + containerColor = Color.Transparent, + ), ) { Column( verticalArrangement = Arrangement.spacedBy(4.dp), @@ -76,16 +84,22 @@ fun PersonCard( Text( text = item.name ?: "", maxLines = 1, + textAlign = TextAlign.Center, modifier = Modifier + .fillMaxWidth() + .padding(horizontal = 4.dp) .enableMarquee(focusedAfterDelay), ) item.role?.let { Text( text = item.role, maxLines = 1, + textAlign = TextAlign.Center, modifier = Modifier + .fillMaxWidth() + .padding(horizontal = 4.dp) .enableMarquee(focusedAfterDelay), ) }