Skip to content

Commit

Permalink
Merge pull request #183 from imashnake0/shared-element-re
Browse files Browse the repository at this point in the history 
Shared Element Transition -> HomeScreen to MediaPage (Part 3)
  • Loading branch information
@imashnake0
imashnake0 authored Oct 15, 2024
2 parents 03fb482 + 19b9864 commit fb22b0c
Show file tree
Hide file tree
Showing 4 changed files with 103 additions and 26 deletions.
16 changes: 16 additions & 0 deletions app/src/main/java/com/imashnake/animite/dev/SharedContentKey.kt
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
package com.imashnake.animite.dev

data class SharedContentKey(
val id: Int? = null,
val source: String? = null,
val sharedComponents: Pair<Component, Component>
) {
enum class Component {
Card,
Page,
Text,
Image,
}

override fun toString() = "${sharedComponents.first}_${sharedComponents.second}_${id}_${source}"
}
31 changes: 29 additions & 2 deletions app/src/main/java/com/imashnake/animite/features/home/HomeScreen.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,11 @@ import com.imashnake.animite.core.ui.MediaSmallRow
import com.imashnake.animite.core.ui.ProgressIndicator
import com.imashnake.animite.core.ui.layouts.BannerLayout
import com.imashnake.animite.core.ui.layouts.TranslucentStatusBarLayout
import com.imashnake.animite.dev.SharedContentKey
import com.imashnake.animite.dev.SharedContentKey.Component.Card
import com.imashnake.animite.dev.SharedContentKey.Component.Image
import com.imashnake.animite.dev.SharedContentKey.Component.Page
import com.imashnake.animite.dev.SharedContentKey.Component.Text
import com.imashnake.animite.features.media.MediaPage
import kotlinx.serialization.Serializable
import com.imashnake.animite.core.R as coreR
Expand Down Expand Up @@ -235,12 +240,34 @@ fun HomeRow(
onClick = { onItemClicked(media) },
modifier = Modifier
.sharedBounds(
rememberSharedContentState("media_small_card_${media.id}_${type.name}"),
rememberSharedContentState(
SharedContentKey(
id = media.id,
source = type.name,
sharedComponents = Card to Page,
)
),
animatedVisibilityScope
)
.width(dimensionResource(coreR.dimen.media_card_width)),
imageModifier = Modifier.sharedBounds(
rememberSharedContentState("media_small_image_${media.id}_${type.name}"),
rememberSharedContentState(
SharedContentKey(
id = media.id,
source = type.name,
sharedComponents = Image to Image,
)
),
animatedVisibilityScope,
),
textModifier = Modifier.sharedBounds(
rememberSharedContentState(
SharedContentKey(
id = media.id,
source = type.name,
sharedComponents = Text to Text,
)
),
animatedVisibilityScope,
),
)
Expand Down
55 changes: 42 additions & 13 deletions app/src/main/java/com/imashnake/animite/features/media/MediaPage.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,6 @@ import android.text.method.LinkMovementMethod
import android.util.Log
import android.widget.TextView
import androidx.compose.animation.AnimatedVisibilityScope
import androidx.compose.animation.EnterTransition
import androidx.compose.animation.ExitTransition
import androidx.compose.animation.ExperimentalSharedTransitionApi
import androidx.compose.animation.SharedTransitionScope
import androidx.compose.animation.core.animateDpAsState
Expand Down Expand Up @@ -84,6 +82,11 @@ import com.imashnake.animite.core.ui.NestedScrollableContent
import com.imashnake.animite.core.ui.StatsRow
import com.imashnake.animite.core.ui.layouts.BannerLayout
import com.imashnake.animite.core.ui.layouts.TranslucentStatusBarLayout
import com.imashnake.animite.dev.SharedContentKey
import com.imashnake.animite.dev.SharedContentKey.Component.Card
import com.imashnake.animite.dev.SharedContentKey.Component.Image
import com.imashnake.animite.dev.SharedContentKey.Component.Page
import com.imashnake.animite.dev.SharedContentKey.Component.Text
import kotlinx.serialization.Serializable
import com.imashnake.animite.core.R as coreR

Expand Down Expand Up @@ -114,7 +117,13 @@ fun MediaPage(
Box(
Modifier
.sharedBounds(
rememberSharedContentState("media_small_card_${media.id}_${media.source}"),
rememberSharedContentState(
SharedContentKey(
id = media.id,
source = media.source,
sharedComponents = Card to Page,
)
),
animatedVisibilityScope,
resizeMode = SharedTransitionScope.ResizeMode.RemeasureToBounds,
clipInOverlayDuringTransition = OverlayClip(
Expand Down Expand Up @@ -147,7 +156,17 @@ fun MediaPage(
end = LocalPaddings.current.large
)
.landscapeCutoutPadding()
.height(dimensionResource(R.dimen.media_details_height))
.height(dimensionResource(R.dimen.media_details_height)),
textModifier = Modifier.sharedBounds(
rememberSharedContentState(
SharedContentKey(
id = media.id,
source = media.source,
sharedComponents = Text to Text,
)
),
animatedVisibilityScope,
),
)

if (!media.ranks.isNullOrEmpty()) {
Expand Down Expand Up @@ -244,7 +263,13 @@ fun MediaPage(
onClick = {},
modifier = Modifier
.sharedBounds(
rememberSharedContentState("media_small_image_${media.id}_${media.source}"),
rememberSharedContentState(
SharedContentKey(
id = media.id,
source = media.source,
sharedComponents = Image to Image,
)
),
animatedVisibilityScope,
)
.width(dimensionResource(coreR.dimen.media_card_width)),
Expand Down Expand Up @@ -294,7 +319,8 @@ fun MediaBanner(
fun MediaDetails(
title: String,
description: String,
modifier: Modifier = Modifier
modifier: Modifier = Modifier,
textModifier: Modifier = Modifier
) {
val textColor = MaterialTheme.colorScheme.onBackground.copy(alpha = 0.74f).toArgb()

Expand All @@ -303,13 +329,16 @@ fun MediaDetails(
}

Column(modifier) {
Text(
text = title,
color = MaterialTheme.colorScheme.onBackground,
style = MaterialTheme.typography.titleLarge,
maxLines = 4,
overflow = TextOverflow.Ellipsis
)
Box(Modifier.fillMaxWidth()) {
Text(
text = title,
color = MaterialTheme.colorScheme.onBackground,
style = MaterialTheme.typography.titleLarge,
maxLines = 2,
overflow = TextOverflow.Ellipsis,
modifier = textModifier.align(Alignment.CenterStart),
)
}

NestedScrollableContent { contentModifier ->
// TODO: Get rid of this once Compose supports HTML/Markdown
Expand Down
27 changes: 16 additions & 11 deletions core/src/main/kotlin/com/imashnake/animite/core/ui/MediaSmall.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -107,6 +107,7 @@ fun MediaSmall(
onClick: () -> Unit,
modifier: Modifier = Modifier,
imageModifier: Modifier = Modifier,
textModifier: Modifier = Modifier,
label: String? = null,
) {
Card(
Expand Down Expand Up @@ -139,23 +140,27 @@ fun MediaSmall(
)
)

Text(
text = label,
color = MaterialTheme.colorScheme.onSurfaceVariant,
style = MaterialTheme.typography.labelLarge,
maxLines = 2,
// TODO: Add a custom overflow indicator:
// https://proandroiddev.com/detect-text-overflow-in-jetpack-compose-56c0b83da5a5.
overflow = TextOverflow.Visible,
textAlign = TextAlign.Center,
modifier = Modifier
Box(
Modifier
.align(Alignment.Center)
.fillMaxWidth()
.padding(
horizontal = dimensionResource(R.dimen.media_card_text_padding_horizontal),
vertical = dimensionResource(R.dimen.media_card_text_padding_vertical)
)
)
) {
Text(
text = label,
color = MaterialTheme.colorScheme.onSurfaceVariant,
style = MaterialTheme.typography.labelLarge,
maxLines = 2,
// TODO: Add a custom overflow indicator:
// https://proandroiddev.com/detect-text-overflow-in-jetpack-compose-56c0b83da5a5.
overflow = TextOverflow.Visible,
textAlign = TextAlign.Center,
modifier = textModifier.align(Alignment.Center),
)
}
}
}
}

0 comments on commit fb22b0c

Please sign in to comment.