diff --git a/app/src/main/java/org/nsh07/wikireader/ui/homeScreen/ArticleFeed.kt b/app/src/main/java/org/nsh07/wikireader/ui/homeScreen/ArticleFeed.kt index 89b812e..08af6e5 100644 --- a/app/src/main/java/org/nsh07/wikireader/ui/homeScreen/ArticleFeed.kt +++ b/app/src/main/java/org/nsh07/wikireader/ui/homeScreen/ArticleFeed.kt @@ -182,11 +182,15 @@ fun ArticleFeed( background = imageBackground, loadingIndicator = false, modifier = Modifier - .sharedBounds( - sharedContentState = rememberSharedContentState( - feedContent.tfa.originalImage?.source ?: "imgsrc" - ), - animatedVisibilityScope = LocalNavAnimatedContentScope.current + .then( + feedContent.tfa.originalImage?.source?.let { src -> + Modifier.sharedBounds( + sharedContentState = rememberSharedContentState( + "tfa-image-$src" + ), + animatedVisibilityScope = LocalNavAnimatedContentScope.current + ) + } ?: Modifier ) .clip(cardShape) ) @@ -195,12 +199,16 @@ fun ArticleFeed( style = typography.headlineMedium, fontFamily = FontFamily.Serif, modifier = Modifier - .sharedBounds( - sharedContentState = rememberSharedContentState( - feedContent.tfa.titles?.normalized ?: "title" - ), - animatedVisibilityScope = LocalNavAnimatedContentScope.current, - zIndexInOverlay = 1f + .then( + feedContent.tfa.titles?.normalized?.let { title -> + Modifier.sharedBounds( + sharedContentState = rememberSharedContentState( + "tfa-title-$title" + ), + animatedVisibilityScope = LocalNavAnimatedContentScope.current, + zIndexInOverlay = 1f + ) + } ?: Modifier ) .padding(horizontal = 16.dp) .padding(top = 16.dp) @@ -210,12 +218,16 @@ fun ArticleFeed( style = typography.bodyMedium, color = colorScheme.onSurfaceVariant, modifier = Modifier - .sharedBounds( - sharedContentState = rememberSharedContentState( - feedContent.tfa.description ?: "desc" - ), - animatedVisibilityScope = LocalNavAnimatedContentScope.current, - zIndexInOverlay = 1f + .then( + feedContent.tfa.description?.let { description -> + Modifier.sharedBounds( + sharedContentState = rememberSharedContentState( + "tfa-desc-$description" + ), + animatedVisibilityScope = LocalNavAnimatedContentScope.current, + zIndexInOverlay = 1f + ) + } ?: Modifier ) .padding(horizontal = 16.dp, vertical = 4.dp) ) @@ -237,12 +249,15 @@ fun ArticleFeed( background = imageBackground, loadingIndicator = false, modifier = Modifier - .sharedBounds( - sharedContentState = rememberSharedContentState( - feedContent.tfa.originalImage?.source - ?: "imgsrc" - ), - animatedVisibilityScope = LocalNavAnimatedContentScope.current + .then( + feedContent.tfa.originalImage?.source?.let { src -> + Modifier.sharedBounds( + sharedContentState = rememberSharedContentState( + "tfa-image-$src" + ), + animatedVisibilityScope = LocalNavAnimatedContentScope.current + ) + } ?: Modifier ) .weight(1f) ) @@ -252,13 +267,16 @@ fun ArticleFeed( style = typography.headlineMedium, fontFamily = FontFamily.Serif, modifier = Modifier - .sharedBounds( - sharedContentState = rememberSharedContentState( - feedContent.tfa.titles?.normalized - ?: "title" - ), - animatedVisibilityScope = LocalNavAnimatedContentScope.current, - zIndexInOverlay = 1f + .then( + feedContent.tfa.titles?.normalized?.let { title -> + Modifier.sharedBounds( + sharedContentState = rememberSharedContentState( + "tfa-title-$title" + ), + animatedVisibilityScope = LocalNavAnimatedContentScope.current, + zIndexInOverlay = 1f + ) + } ?: Modifier ) .padding(horizontal = 16.dp) .padding(top = 16.dp) @@ -268,12 +286,16 @@ fun ArticleFeed( style = typography.bodyMedium, color = colorScheme.onSurfaceVariant, modifier = Modifier - .sharedBounds( - sharedContentState = rememberSharedContentState( - feedContent.tfa.description ?: "desc" - ), - animatedVisibilityScope = LocalNavAnimatedContentScope.current, - zIndexInOverlay = 1f + .then( + feedContent.tfa.description?.let { description -> + Modifier.sharedBounds( + sharedContentState = rememberSharedContentState( + "tfa-desc-$description" + ), + animatedVisibilityScope = LocalNavAnimatedContentScope.current, + zIndexInOverlay = 1f + ) + } ?: Modifier ) .padding(horizontal = 16.dp, vertical = 4.dp) ) @@ -353,13 +375,16 @@ fun ArticleFeed( ?: "", style = typography.titleMedium, modifier = Modifier - .sharedBounds( - sharedContentState = rememberSharedContentState( - feedContent.mostReadArticles[i].titles?.normalized - ?: "title" - ), - animatedVisibilityScope = LocalNavAnimatedContentScope.current, - zIndexInOverlay = 1f + .then( + feedContent.mostReadArticles[i].titles?.normalized?.let { title -> + Modifier.sharedBounds( + sharedContentState = rememberSharedContentState( + "trending-$page-$i-title-$title" + ), + animatedVisibilityScope = LocalNavAnimatedContentScope.current, + zIndexInOverlay = 1f + ) + } ?: Modifier ) .padding(top = 16.dp) ) @@ -369,13 +394,16 @@ fun ArticleFeed( style = typography.bodyMedium, maxLines = 2, overflow = TextOverflow.Ellipsis, - modifier = Modifier.sharedBounds( - sharedContentState = rememberSharedContentState( - feedContent.mostReadArticles[i].description - ?: "desc" - ), - animatedVisibilityScope = LocalNavAnimatedContentScope.current, - zIndexInOverlay = 1f + modifier = Modifier.then( + feedContent.mostReadArticles[i].description?.let { description -> + Modifier.sharedBounds( + sharedContentState = rememberSharedContentState( + "trending-$page-$i-desc-$description" + ), + animatedVisibilityScope = LocalNavAnimatedContentScope.current, + zIndexInOverlay = 1f + ) + } ?: Modifier ) ) Row( @@ -399,7 +427,7 @@ fun ArticleFeed( ) ) Text( - df.format(feedContent.mostReadArticles[i].views), + df.format(feedContent.mostReadArticles[i].views ?: 0), style = typography.bodyMedium, color = colorScheme.primary ) @@ -412,12 +440,15 @@ fun ArticleFeed( loadingIndicator = true, background = imageBackground, modifier = Modifier - .sharedBounds( - sharedContentState = rememberSharedContentState( - feedContent.mostReadArticles[i].originalImage?.source - ?: "imgsrc" - ), - animatedVisibilityScope = LocalNavAnimatedContentScope.current + .then( + feedContent.mostReadArticles[i].originalImage?.source?.let { src -> + Modifier.sharedBounds( + sharedContentState = rememberSharedContentState( + "trending-image-$src" + ), + animatedVisibilityScope = LocalNavAnimatedContentScope.current + ) + } ?: Modifier ) .padding(16.dp) .clip(shapes.large) @@ -509,11 +540,15 @@ fun ArticleFeed( background = imageBackground, loadingIndicator = false, modifier = Modifier - .sharedBounds( - sharedContentState = rememberSharedContentState( - feedContent.image.thumbnail?.source ?: "imgsrc" - ), - animatedVisibilityScope = LocalNavAnimatedContentScope.current + .then( + feedContent.image.thumbnail?.source?.let { src -> + Modifier.sharedBounds( + sharedContentState = rememberSharedContentState( + "potd-image-$src" + ), + animatedVisibilityScope = LocalNavAnimatedContentScope.current + ) + } ?: Modifier ) .clip(cardShape) ) @@ -668,12 +703,16 @@ fun ArticleFeed( maxLines = 1, overflow = TextOverflow.Ellipsis, color = Color.White, - modifier = Modifier.sharedBounds( - sharedContentState = rememberSharedContentState( - it.titles?.normalized ?: "title" - ), - animatedVisibilityScope = LocalNavAnimatedContentScope.current, - zIndexInOverlay = 1f + modifier = Modifier.then( + it.titles?.normalized?.let { title -> + Modifier.sharedBounds( + sharedContentState = rememberSharedContentState( + "news-title-$title" + ), + animatedVisibilityScope = LocalNavAnimatedContentScope.current, + zIndexInOverlay = 1f + ) + } ?: Modifier ) ) } @@ -795,12 +834,16 @@ fun ArticleFeed( maxLines = 1, overflow = TextOverflow.Ellipsis, color = Color.White, - modifier = Modifier.sharedBounds( - sharedContentState = rememberSharedContentState( - it.titles?.normalized ?: "title" - ), - animatedVisibilityScope = LocalNavAnimatedContentScope.current, - zIndexInOverlay = 1f + modifier = Modifier.then( + it.titles?.normalized?.let { title -> + Modifier.sharedBounds( + sharedContentState = rememberSharedContentState( + "otd-title-$title" + ), + animatedVisibilityScope = LocalNavAnimatedContentScope.current, + zIndexInOverlay = 1f + ) + } ?: Modifier ) ) } diff --git a/app/src/main/java/org/nsh07/wikireader/ui/homeScreen/AsyncInfobox.kt b/app/src/main/java/org/nsh07/wikireader/ui/homeScreen/AsyncInfobox.kt index f191fb9..9a329b5 100644 --- a/app/src/main/java/org/nsh07/wikireader/ui/homeScreen/AsyncInfobox.kt +++ b/app/src/main/java/org/nsh07/wikireader/ui/homeScreen/AsyncInfobox.kt @@ -2,7 +2,7 @@ package org.nsh07.wikireader.ui.homeScreen import androidx.compose.animation.AnimatedVisibility import androidx.compose.animation.ExperimentalSharedTransitionApi -import androidx.compose.animation.SharedTransitionLayout +import androidx.compose.animation.SharedTransitionScope import androidx.compose.animation.expandVertically import androidx.compose.animation.fadeIn import androidx.compose.animation.fadeOut @@ -59,6 +59,7 @@ fun AsyncInfobox( text: String, lang: String, fontSize: Int, + sharedScope: SharedTransitionScope, darkTheme: Boolean, background: Boolean, onImageClick: (String, String) -> Unit, @@ -82,92 +83,79 @@ fun AsyncInfobox( var expanded by rememberSaveable { mutableStateOf(false) } - SharedTransitionLayout { - Card( - colors = cardColors, - shape = shapes.largeIncreased, - modifier = Modifier - .widthIn(max = 512.dp) - .fillMaxWidth() - .padding(start = 16.dp, end = 16.dp, bottom = 16.dp) + Card( + colors = cardColors, + shape = shapes.largeIncreased, + modifier = Modifier + .widthIn(max = 512.dp) + .fillMaxWidth() + .padding(start = 16.dp, end = 16.dp, bottom = 16.dp) + ) { + Column( + modifier = Modifier.fillMaxWidth() ) { - Column( - modifier = Modifier.fillMaxWidth() - ) { - ListItem( - leadingContent = { - FilledTonalIconButton( - onClick = { expanded = !expanded }, - shapes = IconButtonDefaults.shapes() - ) { - Icon( - if (expanded) painterResource(R.drawable.keyboard_arrow_up) - else painterResource(R.drawable.keyboard_arrow_down), - contentDescription = stringResource(R.string.expand_section) + ListItem( + leadingContent = { + FilledTonalIconButton( + onClick = { expanded = !expanded }, + shapes = IconButtonDefaults.shapes() + ) { + Icon( + if (expanded) painterResource(R.drawable.keyboard_arrow_up) + else painterResource(R.drawable.keyboard_arrow_down), + contentDescription = stringResource(R.string.expand_section) + ) + } + }, + headlineContent = { + Row(verticalAlignment = Alignment.CenterVertically) { + Text(stringResource(R.string.infobox), fontWeight = FontWeight.Medium) + Spacer(Modifier.width(8.dp)) + AnimatedVisibility(!expanded) { + Text( + title ?: AnnotatedString(""), + color = colorScheme.outline, + textAlign = TextAlign.Center ) } - }, - headlineContent = { - Row(verticalAlignment = Alignment.CenterVertically) { - Text(stringResource(R.string.infobox), fontWeight = FontWeight.Medium) - Spacer(Modifier.width(8.dp)) - AnimatedVisibility(!expanded) { - Text( - title ?: AnnotatedString(""), - color = colorScheme.outline, - textAlign = TextAlign.Center, - modifier = Modifier - .sharedBounds( - sharedContentState = rememberSharedContentState( - title ?: AnnotatedString("") - ), animatedVisibilityScope = this - ) - ) - } - } - }, - colors = ListItemDefaults.colors(containerColor = colorScheme.surfaceContainer), - modifier = Modifier - .clip(shapes.largeIncreased) - .padding(vertical = 8.dp) - .clickable(onClick = { expanded = !expanded }) - ) + } + }, + colors = ListItemDefaults.colors(containerColor = colorScheme.surfaceContainer), + modifier = Modifier + .clip(shapes.largeIncreased) + .padding(vertical = 8.dp) + .clickable(onClick = { expanded = !expanded }) + ) - AnimatedVisibility( - expanded, - enter = expandVertically(expandFrom = Alignment.CenterVertically) + fadeIn(), - exit = shrinkVertically(shrinkTowards = Alignment.CenterVertically) + fadeOut() - ) { - Column(horizontalAlignment = Alignment.CenterHorizontally) { - if (title != null) + AnimatedVisibility( + expanded, + enter = expandVertically(expandFrom = Alignment.CenterVertically) + fadeIn(), + exit = shrinkVertically(shrinkTowards = Alignment.CenterVertically) + fadeOut() + ) { + Column(horizontalAlignment = Alignment.CenterHorizontally) { + if (title != null) + Text( + title ?: AnnotatedString(""), + style = typography.headlineSmall, + textAlign = TextAlign.Center, + modifier = Modifier.padding(vertical = 8.dp) + ) + infobox.fastForEach { item -> + Row(Modifier.fillMaxWidth()) { Text( - title ?: AnnotatedString(""), - style = typography.headlineSmall, - textAlign = TextAlign.Center, + item.first, + fontSize = fontSize.sp, + fontWeight = FontWeight.Bold, + lineHeight = (24 * (fontSize / 16.0)).toInt().sp, modifier = Modifier - .sharedBounds( - sharedContentState = rememberSharedContentState( - key = title ?: AnnotatedString("") - ), - animatedVisibilityScope = this@AnimatedVisibility - ) - .padding(vertical = 8.dp) + .padding(8.dp) + .widthIn(max = 256.dp) + .weight(1f) ) - infobox.fastForEach { item -> - Row(Modifier.fillMaxWidth()) { - Text( - item.first, - fontSize = fontSize.sp, - fontWeight = FontWeight.Bold, - lineHeight = (24 * (fontSize / 16.0)).toInt().sp, - modifier = Modifier - .padding(8.dp) - .widthIn(max = 256.dp) - .weight(1f) - ) - if (item.second.matches("\\[\\[.{1,6}:.+]]".toRegex()) || - extensions.fastAny { item.second.endsWith(it) } - ) { + if (item.second.matches("\\[\\[.{1,6}:.+]]".toRegex()) || + extensions.fastAny { item.second.endsWith(it) } + ) { + with(sharedScope) { ImageWithCaption( item.second.toString(), fontSize, @@ -180,32 +168,32 @@ fun AsyncInfobox( showCaption = false, modifier = Modifier.weight(2f) ) - } else { - Text( - item.second, - fontSize = fontSize.sp, - lineHeight = (24 * (fontSize / 16.0)).toInt().sp, - modifier = Modifier - .padding(8.dp) - .widthIn(max = 256.dp) - .weight(2f) - ) } + } else { + Text( + item.second, + fontSize = fontSize.sp, + lineHeight = (24 * (fontSize / 16.0)).toInt().sp, + modifier = Modifier + .padding(8.dp) + .widthIn(max = 256.dp) + .weight(2f) + ) } } - FilledTonalIconButton( - onClick = { expanded = false }, - shapes = IconButtonDefaults.shapes(), - modifier = Modifier - .align(Alignment.End) - .padding(16.dp) - .width(52.dp) - ) { - Icon( - painterResource(R.drawable.keyboard_arrow_up), - contentDescription = stringResource(R.string.collapse_section) - ) - } + } + FilledTonalIconButton( + onClick = { expanded = false }, + shapes = IconButtonDefaults.shapes(), + modifier = Modifier + .align(Alignment.End) + .padding(16.dp) + .width(52.dp) + ) { + Icon( + painterResource(R.drawable.keyboard_arrow_up), + contentDescription = stringResource(R.string.collapse_section) + ) } } } diff --git a/app/src/main/java/org/nsh07/wikireader/ui/homeScreen/ImageWithCaption.kt b/app/src/main/java/org/nsh07/wikireader/ui/homeScreen/ImageWithCaption.kt index 9339ba3..6f0c7bc 100644 --- a/app/src/main/java/org/nsh07/wikireader/ui/homeScreen/ImageWithCaption.kt +++ b/app/src/main/java/org/nsh07/wikireader/ui/homeScreen/ImageWithCaption.kt @@ -66,7 +66,9 @@ fun SharedTransitionScope.ImageWithCaption( background = background, modifier = modifier .sharedBounds( - sharedContentState = rememberSharedContentState(uriHigh), + sharedContentState = rememberSharedContentState( + "caption-image-$uriHigh" + ), animatedVisibilityScope = LocalNavAnimatedContentScope.current ) .padding(horizontal = 16.dp) @@ -91,7 +93,9 @@ fun SharedTransitionScope.ImageWithCaption( color = colorScheme.onSurfaceVariant, modifier = Modifier .sharedBounds( - sharedContentState = rememberSharedContentState(description), + sharedContentState = rememberSharedContentState( + "caption-desc-$description" + ), animatedVisibilityScope = LocalNavAnimatedContentScope.current ) .padding(horizontal = 16.dp) diff --git a/app/src/main/java/org/nsh07/wikireader/ui/homeScreen/PageContent.kt b/app/src/main/java/org/nsh07/wikireader/ui/homeScreen/PageContent.kt index b2151c0..a49ed76 100644 --- a/app/src/main/java/org/nsh07/wikireader/ui/homeScreen/PageContent.kt +++ b/app/src/main/java/org/nsh07/wikireader/ui/homeScreen/PageContent.kt @@ -127,7 +127,7 @@ fun PageContent( modifier = Modifier .sharedBounds( sharedContentState = rememberSharedContentState( - content.title + "tfa-title-${content.title}" ), animatedVisibilityScope = LocalNavAnimatedContentScope.current, zIndexInOverlay = 1f @@ -144,7 +144,7 @@ fun PageContent( modifier = Modifier .sharedBounds( sharedContentState = rememberSharedContentState( - photoDesc + "tfa-desc-$photoDesc" ), animatedVisibilityScope = LocalNavAnimatedContentScope.current, zIndexInOverlay = 1f diff --git a/app/src/main/java/org/nsh07/wikireader/ui/homeScreen/ParsedBodyText.kt b/app/src/main/java/org/nsh07/wikireader/ui/homeScreen/ParsedBodyText.kt index bce2b22..6c286f4 100644 --- a/app/src/main/java/org/nsh07/wikireader/ui/homeScreen/ParsedBodyText.kt +++ b/app/src/main/java/org/nsh07/wikireader/ui/homeScreen/ParsedBodyText.kt @@ -125,6 +125,7 @@ fun ParsedBodyText( text = it.toString(), lang = lang, fontSize = fontSize, + sharedScope = sharedScope, darkTheme = darkTheme, background = background, onImageClick = onGalleryImageClick, diff --git a/app/src/main/java/org/nsh07/wikireader/ui/image/FullScreenImageTopBar.kt b/app/src/main/java/org/nsh07/wikireader/ui/image/FullScreenImageTopBar.kt index a735f6f..57aaf48 100644 --- a/app/src/main/java/org/nsh07/wikireader/ui/image/FullScreenImageTopBar.kt +++ b/app/src/main/java/org/nsh07/wikireader/ui/image/FullScreenImageTopBar.kt @@ -68,7 +68,9 @@ fun SharedTransitionScope.FullScreenImageTopBar( maxLines = 1, overflow = TextOverflow.Ellipsis, modifier = Modifier.sharedBounds( - sharedContentState = rememberSharedContentState(description), + sharedContentState = rememberSharedContentState( + "caption-desc-$description" + ), animatedVisibilityScope = LocalNavAnimatedContentScope.current, zIndexInOverlay = 1f ) diff --git a/app/src/main/java/org/nsh07/wikireader/ui/image/ImageCard.kt b/app/src/main/java/org/nsh07/wikireader/ui/image/ImageCard.kt index aa5c224..0187525 100644 --- a/app/src/main/java/org/nsh07/wikireader/ui/image/ImageCard.kt +++ b/app/src/main/java/org/nsh07/wikireader/ui/image/ImageCard.kt @@ -76,9 +76,15 @@ fun SharedTransitionScope.ImageCard( contentScale = contentScale, background = background, modifier = Modifier - .sharedBounds( - sharedContentState = rememberSharedContentState(photo.source), - animatedVisibilityScope = animatedVisibilityScope + .then( + photo.source?.let { src -> + Modifier.sharedBounds( + sharedContentState = rememberSharedContentState( + "article-image-$src" + ), + animatedVisibilityScope = animatedVisibilityScope + ) + } ?: Modifier ) .fillMaxWidth() .clip(cardShape) diff --git a/app/src/main/java/org/nsh07/wikireader/ui/image/PageImage.kt b/app/src/main/java/org/nsh07/wikireader/ui/image/PageImage.kt index b95b8e5..abebd90 100644 --- a/app/src/main/java/org/nsh07/wikireader/ui/image/PageImage.kt +++ b/app/src/main/java/org/nsh07/wikireader/ui/image/PageImage.kt @@ -44,9 +44,15 @@ fun SharedTransitionScope.PageImage( contentDescription = photoDesc, contentScale = contentScale, modifier = Modifier - .sharedBounds( - sharedContentState = rememberSharedContentState(photo.source), - animatedVisibilityScope = LocalNavAnimatedContentScope.current + .then( + photo.source?.let { src -> + Modifier.sharedBounds( + sharedContentState = rememberSharedContentState( + "article-image-$src" + ), + animatedVisibilityScope = LocalNavAnimatedContentScope.current + ) + } ?: Modifier ) .then(modifier) .aspectRatio(photo.width.toFloat() / photo.height.toFloat()) @@ -108,7 +114,9 @@ fun SharedTransitionScope.PageImage( contentScale = contentScale, modifier = Modifier .sharedBounds( - sharedContentState = rememberSharedContentState(uri), + sharedContentState = rememberSharedContentState( + "gallery-image-$uri" + ), animatedVisibilityScope = LocalNavAnimatedContentScope.current ) .then(modifier)