From ec985d58e74f2dea596e1dcf908c3ea1dd6475a6 Mon Sep 17 00:00:00 2001 From: Vitor Pamplona Date: Thu, 10 Jul 2025 09:43:36 -0400 Subject: [PATCH] Fixes matching image borders in the loading step of preview cards --- .../amethyst/ui/components/MyAsyncImage.kt | 13 ++++++++++++- .../amethyst/ui/note/DisplayAuthorBanner.kt | 9 +++------ .../ui/note/elements/DefaultImageHeader.kt | 10 +++++----- .../amethyst/ui/note/types/Classifieds.kt | 3 ++- .../amethyst/ui/note/types/FollowList.kt | 5 +++-- .../amethyst/ui/note/types/Highlight.kt | 4 ++-- .../amethyst/ui/note/types/LiveActivity.kt | 2 +- .../amethyst/ui/note/types/LongForm.kt | 5 +++-- .../discover/nip51FollowSets/FollowSetCard.kt | 14 ++++---------- .../discover/nip99Classifieds/ClassifiedsThumb.kt | 2 +- 10 files changed, 36 insertions(+), 31 deletions(-) diff --git a/amethyst/src/main/java/com/vitorpamplona/amethyst/ui/components/MyAsyncImage.kt b/amethyst/src/main/java/com/vitorpamplona/amethyst/ui/components/MyAsyncImage.kt index 398a4f4be..3d35c4463 100644 --- a/amethyst/src/main/java/com/vitorpamplona/amethyst/ui/components/MyAsyncImage.kt +++ b/amethyst/src/main/java/com/vitorpamplona/amethyst/ui/components/MyAsyncImage.kt @@ -90,7 +90,18 @@ fun MyAsyncImage( } is AsyncImagePainter.State.Error -> { if (onError != null) { - onError() + if (ratio != null) { + Box(loadedImageModifier.aspectRatio(ratio), contentAlignment = Alignment.Center) { + onError() + } + } else { + Box(loadedImageModifier, contentAlignment = Alignment.Center) { + if (onLoadingBackground != null) { + onLoadingBackground() + } + DisplayUrlWithLoadingSymbol(imageUrl) + } + } } } is AsyncImagePainter.State.Success -> { diff --git a/amethyst/src/main/java/com/vitorpamplona/amethyst/ui/note/DisplayAuthorBanner.kt b/amethyst/src/main/java/com/vitorpamplona/amethyst/ui/note/DisplayAuthorBanner.kt index 4ecc152d9..81de3a9ea 100644 --- a/amethyst/src/main/java/com/vitorpamplona/amethyst/ui/note/DisplayAuthorBanner.kt +++ b/amethyst/src/main/java/com/vitorpamplona/amethyst/ui/note/DisplayAuthorBanner.kt @@ -20,26 +20,23 @@ */ package com.vitorpamplona.amethyst.ui.note -import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.runtime.Composable import androidx.compose.ui.Modifier -import androidx.compose.ui.draw.clip import com.vitorpamplona.amethyst.model.Note import com.vitorpamplona.amethyst.ui.note.elements.BannerImage import com.vitorpamplona.amethyst.ui.screen.loggedIn.AccountViewModel -import com.vitorpamplona.amethyst.ui.theme.QuoteBorder +import com.vitorpamplona.amethyst.ui.theme.SimpleImageBorder @Composable fun DisplayAuthorBanner( note: Note, accountViewModel: AccountViewModel, + modifier: Modifier = SimpleImageBorder, ) { WatchAuthor(note, accountViewModel) { BannerImage( it, - Modifier - .fillMaxSize() - .clip(QuoteBorder), + modifier, accountViewModel, ) } diff --git a/amethyst/src/main/java/com/vitorpamplona/amethyst/ui/note/elements/DefaultImageHeader.kt b/amethyst/src/main/java/com/vitorpamplona/amethyst/ui/note/elements/DefaultImageHeader.kt index 62bca2cce..5d0c30fdc 100644 --- a/amethyst/src/main/java/com/vitorpamplona/amethyst/ui/note/elements/DefaultImageHeader.kt +++ b/amethyst/src/main/java/com/vitorpamplona/amethyst/ui/note/elements/DefaultImageHeader.kt @@ -22,15 +22,12 @@ package com.vitorpamplona.amethyst.ui.note.elements import androidx.compose.foundation.Image import androidx.compose.foundation.layout.Box -import androidx.compose.foundation.layout.fillMaxWidth -import androidx.compose.foundation.layout.heightIn import androidx.compose.runtime.Composable import androidx.compose.runtime.getValue import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.draw.blur import androidx.compose.ui.layout.ContentScale -import androidx.compose.ui.unit.dp import com.vitorpamplona.amethyst.R import com.vitorpamplona.amethyst.model.Note import com.vitorpamplona.amethyst.model.User @@ -41,6 +38,7 @@ import com.vitorpamplona.amethyst.ui.note.WatchAuthor import com.vitorpamplona.amethyst.ui.painterRes import com.vitorpamplona.amethyst.ui.screen.loggedIn.AccountViewModel import com.vitorpamplona.amethyst.ui.stringRes +import com.vitorpamplona.amethyst.ui.theme.SimpleHeaderImage import com.vitorpamplona.amethyst.ui.theme.Size16dp import com.vitorpamplona.amethyst.ui.theme.Size55dp import com.vitorpamplona.amethyst.ui.theme.authorNotePictureForImageHeader @@ -49,10 +47,11 @@ import com.vitorpamplona.amethyst.ui.theme.authorNotePictureForImageHeader fun DefaultImageHeader( note: Note, accountViewModel: AccountViewModel, + modifier: Modifier = SimpleHeaderImage, ) { WatchAuthor(baseNote = note, accountViewModel) { Box { - BannerImage(it, Modifier.fillMaxWidth().heightIn(max = 200.dp), accountViewModel) + BannerImage(it, modifier, accountViewModel) Box(authorNotePictureForImageHeader.align(Alignment.BottomStart)) { BaseUserPicture(it, Size55dp, accountViewModel, Modifier) @@ -65,10 +64,11 @@ fun DefaultImageHeader( fun DefaultImageHeaderBackground( note: Note, accountViewModel: AccountViewModel, + modifier: Modifier = SimpleHeaderImage, ) { WatchAuthor(baseNote = note, accountViewModel) { Box { - BannerImage(it, Modifier.fillMaxWidth().heightIn(max = 200.dp).blur(Size16dp), accountViewModel) + BannerImage(it, modifier.blur(Size16dp), accountViewModel) Box(authorNotePictureForImageHeader.align(Alignment.BottomStart)) { BaseUserPicture(it, Size55dp, accountViewModel, Modifier) diff --git a/amethyst/src/main/java/com/vitorpamplona/amethyst/ui/note/types/Classifieds.kt b/amethyst/src/main/java/com/vitorpamplona/amethyst/ui/note/types/Classifieds.kt index 55720df0b..0afc21888 100644 --- a/amethyst/src/main/java/com/vitorpamplona/amethyst/ui/note/types/Classifieds.kt +++ b/amethyst/src/main/java/com/vitorpamplona/amethyst/ui/note/types/Classifieds.kt @@ -24,6 +24,7 @@ import androidx.compose.foundation.border import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.Spacer +import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.padding import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Text @@ -99,7 +100,7 @@ fun RenderClassifieds( ) } } ?: run { - DefaultImageHeader(note, accountViewModel) + DefaultImageHeader(note, accountViewModel, Modifier.fillMaxWidth()) } } diff --git a/amethyst/src/main/java/com/vitorpamplona/amethyst/ui/note/types/FollowList.kt b/amethyst/src/main/java/com/vitorpamplona/amethyst/ui/note/types/FollowList.kt index de9f74717..4f8a0c237 100644 --- a/amethyst/src/main/java/com/vitorpamplona/amethyst/ui/note/types/FollowList.kt +++ b/amethyst/src/main/java/com/vitorpamplona/amethyst/ui/note/types/FollowList.kt @@ -59,6 +59,7 @@ import com.vitorpamplona.amethyst.ui.note.getGradient import com.vitorpamplona.amethyst.ui.screen.loggedIn.AccountViewModel import com.vitorpamplona.amethyst.ui.stringRes import com.vitorpamplona.amethyst.ui.theme.DividerThickness +import com.vitorpamplona.amethyst.ui.theme.FollowSetImageModifier import com.vitorpamplona.quartz.nip01Core.tags.people.taggedUserIds import com.vitorpamplona.quartz.nip51Lists.FollowListEvent import kotlinx.collections.immutable.ImmutableList @@ -97,13 +98,13 @@ fun DisplayFollowList( ), contentScale = ContentScale.Crop, mainImageModifier = Modifier.fillMaxWidth(), - loadedImageModifier = Modifier, + loadedImageModifier = FollowSetImageModifier, accountViewModel = accountViewModel, onLoadingBackground = { DefaultImageHeaderBackground(baseNote, accountViewModel) }, onError = { DefaultImageHeader(baseNote, accountViewModel) }, ) } ?: run { - DefaultImageHeader(baseNote, accountViewModel) + DefaultImageHeader(baseNote, accountViewModel, FollowSetImageModifier) } Text( diff --git a/amethyst/src/main/java/com/vitorpamplona/amethyst/ui/note/types/Highlight.kt b/amethyst/src/main/java/com/vitorpamplona/amethyst/ui/note/types/Highlight.kt index 828c6cbfe..67d96b491 100644 --- a/amethyst/src/main/java/com/vitorpamplona/amethyst/ui/note/types/Highlight.kt +++ b/amethyst/src/main/java/com/vitorpamplona/amethyst/ui/note/types/Highlight.kt @@ -262,7 +262,7 @@ fun DisplayEntryForNote( RenderUserAsClickableText(author, null, accountViewModel, nav) } - val noteEvent = noteState?.note?.event as? BaseThreadedEvent ?: return + val noteEvent = noteState.note.event as? BaseThreadedEvent ?: return val description = remember(noteEvent) { noteEvent.tags.firstTagValueFor("title", "subject", "alt") } @@ -274,7 +274,7 @@ fun DisplayEntryForNote( onClick = { routeFor(note, accountViewModel.userProfile())?.let { nav.nav(it) } }, ) } else { - DisplayEvent(noteEvent.id, noteEvent.kind, note.toNostrUri(), null, accountViewModel, nav) + DisplayEvent(noteEvent.id, note.toNostrUri(), null, accountViewModel, nav) } } diff --git a/amethyst/src/main/java/com/vitorpamplona/amethyst/ui/note/types/LiveActivity.kt b/amethyst/src/main/java/com/vitorpamplona/amethyst/ui/note/types/LiveActivity.kt index d81c3fdd3..80063464d 100644 --- a/amethyst/src/main/java/com/vitorpamplona/amethyst/ui/note/types/LiveActivity.kt +++ b/amethyst/src/main/java/com/vitorpamplona/amethyst/ui/note/types/LiveActivity.kt @@ -237,7 +237,7 @@ fun RenderLiveActivityEventInner( onError = { DefaultImageHeader(baseNote, accountViewModel) }, ) } - } ?: run { DisplayAuthorBanner(baseNote, accountViewModel) } + } ?: run { DisplayAuthorBanner(baseNote, accountViewModel, MaterialTheme.colorScheme.imageModifier) } Text( text = stringRes(id = R.string.live_stream_has_ended), diff --git a/amethyst/src/main/java/com/vitorpamplona/amethyst/ui/note/types/LongForm.kt b/amethyst/src/main/java/com/vitorpamplona/amethyst/ui/note/types/LongForm.kt index 3defcc567..d029ba7b6 100644 --- a/amethyst/src/main/java/com/vitorpamplona/amethyst/ui/note/types/LongForm.kt +++ b/amethyst/src/main/java/com/vitorpamplona/amethyst/ui/note/types/LongForm.kt @@ -44,6 +44,7 @@ import com.vitorpamplona.amethyst.ui.note.elements.DefaultImageHeaderBackground import com.vitorpamplona.amethyst.ui.screen.loggedIn.AccountViewModel import com.vitorpamplona.amethyst.ui.stringRes import com.vitorpamplona.amethyst.ui.theme.QuoteBorder +import com.vitorpamplona.amethyst.ui.theme.SimpleImageBorder import com.vitorpamplona.amethyst.ui.theme.Size5dp import com.vitorpamplona.amethyst.ui.theme.StdVertSpacer import com.vitorpamplona.amethyst.ui.theme.subtleBorder @@ -93,14 +94,14 @@ fun LongFormHeader( it, ), contentScale = ContentScale.FillWidth, - mainImageModifier = Modifier.fillMaxWidth(), + mainImageModifier = SimpleImageBorder, loadedImageModifier = Modifier, accountViewModel = accountViewModel, onLoadingBackground = { DefaultImageHeaderBackground(note, accountViewModel) }, onError = { DefaultImageHeader(note, accountViewModel) }, ) } ?: run { - DefaultImageHeader(note, accountViewModel) + DefaultImageHeader(note, accountViewModel, SimpleImageBorder) } title?.let { Text( diff --git a/amethyst/src/main/java/com/vitorpamplona/amethyst/ui/screen/loggedIn/discover/nip51FollowSets/FollowSetCard.kt b/amethyst/src/main/java/com/vitorpamplona/amethyst/ui/screen/loggedIn/discover/nip51FollowSets/FollowSetCard.kt index 034a45551..e26262a4c 100644 --- a/amethyst/src/main/java/com/vitorpamplona/amethyst/ui/screen/loggedIn/discover/nip51FollowSets/FollowSetCard.kt +++ b/amethyst/src/main/java/com/vitorpamplona/amethyst/ui/screen/loggedIn/discover/nip51FollowSets/FollowSetCard.kt @@ -24,7 +24,6 @@ import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.Spacer -import androidx.compose.foundation.layout.aspectRatio import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.padding import androidx.compose.material3.MaterialTheme @@ -35,7 +34,6 @@ import androidx.compose.runtime.getValue import androidx.compose.ui.Alignment import androidx.compose.ui.Alignment.Companion.CenterVertically import androidx.compose.ui.Modifier -import androidx.compose.ui.draw.clip import androidx.compose.ui.layout.ContentScale import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.text.style.TextOverflow @@ -58,7 +56,7 @@ import com.vitorpamplona.amethyst.ui.screen.loggedIn.AccountViewModel import com.vitorpamplona.amethyst.ui.screen.loggedIn.mockAccountViewModel import com.vitorpamplona.amethyst.ui.stringRes import com.vitorpamplona.amethyst.ui.theme.DoubleVertSpacer -import com.vitorpamplona.amethyst.ui.theme.QuoteBorder +import com.vitorpamplona.amethyst.ui.theme.FollowSetImageModifier import com.vitorpamplona.amethyst.ui.theme.RowColSpacing5dp import com.vitorpamplona.amethyst.ui.theme.Size10dp import com.vitorpamplona.amethyst.ui.theme.Size25dp @@ -158,17 +156,13 @@ fun RenderFollowSetThumb( it, ), contentScale = ContentScale.Crop, - mainImageModifier = Modifier.fillMaxWidth(), - loadedImageModifier = - Modifier - .fillMaxWidth() - .aspectRatio(ratio = 21f / 9f) - .clip(QuoteBorder), + mainImageModifier = Modifier, + loadedImageModifier = FollowSetImageModifier, accountViewModel = accountViewModel, onLoadingBackground = { DefaultImageHeaderBackground(baseNote, accountViewModel) }, onError = { DefaultImageHeader(baseNote, accountViewModel) }, ) - } ?: run { DefaultImageHeader(baseNote, accountViewModel) } + } ?: run { DefaultImageHeader(baseNote, accountViewModel, FollowSetImageModifier) } Gallery(card.users, Modifier.padding(Size10dp), accountViewModel, nav) } diff --git a/amethyst/src/main/java/com/vitorpamplona/amethyst/ui/screen/loggedIn/discover/nip99Classifieds/ClassifiedsThumb.kt b/amethyst/src/main/java/com/vitorpamplona/amethyst/ui/screen/loggedIn/discover/nip99Classifieds/ClassifiedsThumb.kt index c607e9b29..ee84f3d0a 100644 --- a/amethyst/src/main/java/com/vitorpamplona/amethyst/ui/screen/loggedIn/discover/nip99Classifieds/ClassifiedsThumb.kt +++ b/amethyst/src/main/java/com/vitorpamplona/amethyst/ui/screen/loggedIn/discover/nip99Classifieds/ClassifiedsThumb.kt @@ -118,7 +118,7 @@ fun InnerRenderClassifiedsThumb( contentScale = ContentScale.Crop, modifier = Modifier.fillMaxSize(), ) - } ?: run { DisplayAuthorBanner(note, accountViewModel) } + } ?: run { DisplayAuthorBanner(note, accountViewModel, Modifier.fillMaxSize()) } Row( Modifier