Story Viewer shared element transition.

This commit is contained in:
Alex Hart
2022-03-23 12:42:14 -03:00
committed by Greyson Parrelli
parent 6a5f5f4ffa
commit 6820b84921
17 changed files with 229 additions and 81 deletions

View File

@@ -77,6 +77,7 @@ public abstract class MediaPreviewFragment extends Fragment {
public void onResume() {
super.onResume();
checkMediaStillAvailable();
requireActivity().supportStartPostponedEnterTransition();
}
public void cleanUp() {

View File

@@ -0,0 +1,116 @@
package org.thoughtcrime.securesms.stories
import android.animation.Animator
import android.animation.AnimatorListenerAdapter
import android.animation.ObjectAnimator
import android.animation.PropertyValuesHolder.ofFloat
import android.content.Context
import android.transition.Transition
import android.transition.TransitionValues
import android.util.AttributeSet
import android.view.View
import android.view.ViewGroup
import androidx.annotation.RequiresApi
import androidx.core.view.ViewCompat
class ScaleTransition : Transition {
companion object {
private const val LAYOUT_WIDTH = "ScaleTransition:layout_width"
private const val LAYOUT_HEIGHT = "ScaleTransition:layout_height"
private const val POSITION_X = "ScaleTransition:position_x"
private const val POSITION_Y = "ScaleTransition:position_y"
private const val SCALE_X = "ScaleTransition:scale_x"
private const val SCALE_Y = "ScaleTransition:scale_y"
private val PROPERTIES = arrayOf(
LAYOUT_WIDTH,
LAYOUT_HEIGHT,
POSITION_X,
POSITION_Y,
SCALE_X,
SCALE_Y
)
}
constructor() : super()
@RequiresApi(21)
constructor(context: Context, attrs: AttributeSet) : super(context, attrs)
override fun getTransitionProperties(): Array<String> {
return PROPERTIES
}
override fun captureStartValues(transitionValues: TransitionValues) {
if (ViewCompat.getTransitionName(transitionValues.view) == "story") {
captureValues(transitionValues)
}
}
override fun captureEndValues(transitionValues: TransitionValues) {
if (ViewCompat.getTransitionName(transitionValues.view) == "story") {
resetValues(transitionValues.view)
captureValues(transitionValues)
}
}
private fun captureValues(transitionValues: TransitionValues) = with(transitionValues.view) {
transitionValues.values[LAYOUT_WIDTH] = width.toFloat()
transitionValues.values[LAYOUT_HEIGHT] = height.toFloat()
transitionValues.values[POSITION_X] = x
transitionValues.values[POSITION_Y] = y
transitionValues.values[SCALE_X] = scaleX
transitionValues.values[SCALE_Y] = scaleY
}
private fun resetValues(view: View) = with(view) {
translationX = 0f
translationY = 0f
scaleX = 1f
scaleY = 1f
}
override fun createAnimator(
sceneRoot: ViewGroup,
start: TransitionValues?,
end: TransitionValues?
): Animator? {
if (start == null || end == null) {
return null
}
val startWidth = start.values[LAYOUT_WIDTH] as Float
val endWidth = end.values[LAYOUT_WIDTH] as Float
val startHeight = start.values[LAYOUT_HEIGHT] as Float
val endHeight = end.values[LAYOUT_HEIGHT] as Float
val startX = start.values[POSITION_X] as Float
val endX = end.values[POSITION_X] as Float
val startY = start.values[POSITION_Y] as Float
val endY = end.values[POSITION_Y] as Float
val startScaleX = start.values[SCALE_X] as Float
val startScaleY = start.values[SCALE_Y] as Float
end.view.translationX = (startX - endX) - (endWidth - startWidth) / 2
end.view.translationY = (startY - endY) - (endHeight - startHeight) / 2
end.view.scaleX = (startWidth / endWidth) * startScaleX
end.view.scaleY = (startHeight / endHeight) * startScaleY
return ObjectAnimator.ofPropertyValuesHolder(end.view,
ofFloat(View.TRANSLATION_X, 0f),
ofFloat(View.TRANSLATION_Y, 0f),
ofFloat(View.SCALE_X, 1f),
ofFloat(View.SCALE_Y, 1f)).apply {
addListener(object : AnimatorListenerAdapter() {
override fun onAnimationEnd(animation: Animator?) {
resetValues(start.view)
resetValues(end.view)
}
})
}
}
}

View File

@@ -7,17 +7,15 @@ import android.graphics.drawable.Drawable
import android.util.AttributeSet
import android.util.TypedValue
import android.view.View
import android.widget.TextView
import androidx.annotation.ColorInt
import androidx.annotation.Px
import androidx.appcompat.app.AppCompatActivity
import androidx.appcompat.content.res.AppCompatResources
import androidx.constraintlayout.widget.ConstraintLayout
import androidx.core.view.doOnNextLayout
import androidx.core.view.isVisible
import androidx.core.widget.doAfterTextChanged
import com.airbnb.lottie.SimpleColorFilter
import com.google.android.material.imageview.ShapeableImageView
import org.signal.core.util.DimensionUnit
import org.thoughtcrime.securesms.R
import org.thoughtcrime.securesms.conversation.colors.ChatColors
import org.thoughtcrime.securesms.database.model.databaseprotos.StoryTextPost
@@ -30,7 +28,6 @@ import org.thoughtcrime.securesms.mediasend.v2.text.TextStoryPostCreationState
import org.thoughtcrime.securesms.mediasend.v2.text.TextStoryScale
import org.thoughtcrime.securesms.mediasend.v2.text.TextStoryTextWatcher
import org.thoughtcrime.securesms.stories.viewer.page.StoryDisplay
import org.thoughtcrime.securesms.util.ViewUtil
import org.thoughtcrime.securesms.util.concurrent.ListenableFuture
import org.thoughtcrime.securesms.util.visible
import java.util.Locale
@@ -47,26 +44,13 @@ class StoryTextPostView @JvmOverloads constructor(
private var textAlignment: TextAlignment? = null
private val backgroundView: ShapeableImageView = findViewById(R.id.text_story_post_background)
private val textView: TextView = findViewById(R.id.text_story_post_text)
private val textView: StoryTextView = findViewById(R.id.text_story_post_text)
private val linkPreviewView: StoryLinkPreviewView = findViewById(R.id.text_story_post_link_preview)
private var isPlaceholder: Boolean = true
init {
backgroundView.addOnLayoutChangeListener { _, _, _, _, _, _, _, _, _ ->
textView.maxWidth = backgroundView.measuredWidth - DimensionUnit.DP.toPixels(40f).toInt()
textAlignment?.apply {
adjustTextTranslationX(this)
}
}
TextStoryTextWatcher.install(textView)
textView.doAfterTextChanged {
textAlignment?.apply {
adjustTextTranslationX(this)
}
}
val displaySize = StoryDisplay.getStoryDisplay(
resources.displayMetrics.widthPixels.toFloat(),
@@ -126,13 +110,7 @@ class StoryTextPostView @JvmOverloads constructor(
}
fun setTextBackgroundColor(@ColorInt color: Int) {
if (color == Color.TRANSPARENT) {
textView.background = null
} else {
textView.background = AppCompatResources.getDrawable(context, R.drawable.rounded_rectangle_secondary_18)?.apply {
colorFilter = SimpleColorFilter(color)
}
}
textView.setWrappedBackgroundColor(color)
}
fun bindFromCreationState(state: TextStoryPostCreationState) {
@@ -151,7 +129,6 @@ class StoryTextPostView @JvmOverloads constructor(
setTextGravity(state.textAlignment)
setTextScale(state.textScale)
postAdjustTextTranslationX(state.textAlignment)
postAdjustLinkPreviewTranslationY()
}
@@ -173,8 +150,11 @@ class StoryTextPostView @JvmOverloads constructor(
hideCloseButton()
postAdjustTextTranslationX(TextAlignment.CENTER)
postAdjustLinkPreviewTranslationY()
doOnNextLayout {
(context as? AppCompatActivity)?.supportStartPostponedEnterTransition()
}
}
fun bindLinkPreview(linkPreview: LinkPreview?): ListenableFuture<Boolean> {
@@ -192,12 +172,6 @@ class StoryTextPostView @JvmOverloads constructor(
}
}
private fun postAdjustTextTranslationX(textAlignment: TextAlignment) {
doOnNextLayout {
adjustTextTranslationX(textAlignment)
}
}
fun setTextViewClickListener(onClickListener: OnClickListener) {
setOnClickListener(onClickListener)
}
@@ -250,34 +224,4 @@ class StoryTextPostView @JvmOverloads constructor(
textView.translationY = desiredPoint - originPoint
}
}
private fun alignTextLeft() {
textView.translationX = DimensionUnit.DP.toPixels(20f)
}
private fun alignTextRight() {
textView.translationX = backgroundView.measuredWidth - textView.measuredWidth - DimensionUnit.DP.toPixels(20f)
}
private fun adjustTextTranslationX(textAlignment: TextAlignment) {
when (textAlignment) {
TextAlignment.CENTER -> {
textView.translationX = backgroundView.measuredWidth / 2f - textView.measuredWidth / 2f
}
TextAlignment.START -> {
if (ViewUtil.isLtr(textView)) {
alignTextLeft()
} else {
alignTextRight()
}
}
TextAlignment.END -> {
if (ViewUtil.isRtl(textView)) {
alignTextLeft()
} else {
alignTextRight()
}
}
}
}
}

View File

@@ -0,0 +1,58 @@
package org.thoughtcrime.securesms.stories
import android.content.Context
import android.graphics.Canvas
import android.graphics.Color
import android.graphics.Paint
import android.graphics.Rect
import android.graphics.RectF
import android.util.AttributeSet
import androidx.annotation.ColorInt
import org.signal.core.util.DimensionUnit
import org.thoughtcrime.securesms.components.emoji.EmojiTextView
class StoryTextView @JvmOverloads constructor(
context: Context, attrs: AttributeSet? = null
) : EmojiTextView(context, attrs) {
private val textBounds: RectF = RectF()
private val wrappedBackgroundPaint = Paint().apply {
style = Paint.Style.FILL
isAntiAlias = true
color = Color.TRANSPARENT
}
init {
if (isInEditMode) {
wrappedBackgroundPaint.color = Color.RED
}
}
fun setWrappedBackgroundColor(@ColorInt color: Int) {
wrappedBackgroundPaint.color = color
invalidate()
}
override fun onDraw(canvas: Canvas) {
if (wrappedBackgroundPaint.color != Color.TRANSPARENT) {
textBounds.set(left.toFloat(), top.toFloat(), right.toFloat(), bottom.toFloat())
val maxWidth = (0 until layout.lineCount).map {
layout.getLineWidth(it)
}.maxOrNull()
if (maxWidth != null) {
textBounds.inset((width - maxWidth - paddingStart - paddingEnd) / 2f, 0f)
canvas.drawRoundRect(
textBounds,
DimensionUnit.DP.toPixels(18f),
DimensionUnit.DP.toPixels(18f),
wrappedBackgroundPaint
)
}
}
super.onDraw(canvas)
}
}

View File

@@ -10,6 +10,8 @@ import android.view.MenuItem
import android.view.View
import android.widget.Toast
import androidx.activity.OnBackPressedCallback
import androidx.core.app.ActivityOptionsCompat
import androidx.core.view.ViewCompat
import androidx.fragment.app.viewModels
import com.google.android.material.dialog.MaterialAlertDialogBuilder
import com.google.android.material.snackbar.BaseTransientBottomBar
@@ -140,14 +142,15 @@ class StoriesLandingFragment : DSLSettingsFragment(layoutId = R.layout.stories_l
private fun createStoryLandingItem(data: StoriesLandingItemData): StoriesLandingItem.Model {
return StoriesLandingItem.Model(
data = data,
onRowClick = {
if (it.data.storyRecipient.isMyStory) {
onRowClick = { model, preview ->
if (model.data.storyRecipient.isMyStory) {
startActivity(Intent(requireContext(), MyStoriesActivity::class.java))
} else if (it.data.primaryStory.messageRecord.isOutgoing && it.data.primaryStory.messageRecord.isFailed) {
lifecycleDisposable += viewModel.resend(it.data.primaryStory.messageRecord).subscribe()
} else if (model.data.primaryStory.messageRecord.isOutgoing && model.data.primaryStory.messageRecord.isFailed) {
lifecycleDisposable += viewModel.resend(model.data.primaryStory.messageRecord).subscribe()
Toast.makeText(requireContext(), R.string.message_recipients_list_item__resend, Toast.LENGTH_SHORT).show()
} else {
startActivity(StoryViewerActivity.createIntent(requireContext(), it.data.storyRecipient.id))
val options = ActivityOptionsCompat.makeSceneTransitionAnimation(requireActivity(), preview, ViewCompat.getTransitionName(preview) ?: "")
startActivity(StoryViewerActivity.createIntent(requireContext(), model.data.storyRecipient.id), options.toBundle())
}
},
onForwardStory = {

View File

@@ -35,7 +35,7 @@ object StoriesLandingItem {
class Model(
val data: StoriesLandingItemData,
val onRowClick: (Model) -> Unit,
val onRowClick: (Model, View) -> Unit,
val onHideStory: (Model) -> Unit,
val onForwardStory: (Model) -> Unit,
val onShareStory: (Model) -> Unit,
@@ -166,7 +166,7 @@ object StoriesLandingItem {
}
private fun setUpClickListeners(model: Model) {
itemView.setOnClickListener { model.onRowClick(model) }
itemView.setOnClickListener { model.onRowClick(model, storyPreview) }
if (model.data.storyRecipient.isMyStory) {
itemView.setOnLongClickListener(null)

View File

@@ -1,6 +1,9 @@
package org.thoughtcrime.securesms.stories.my
import android.widget.Toast
import androidx.activity.OnBackPressedCallback
import androidx.core.app.ActivityOptionsCompat
import androidx.core.view.ViewCompat
import androidx.fragment.app.viewModels
import org.thoughtcrime.securesms.R
import org.thoughtcrime.securesms.components.settings.DSLConfiguration
@@ -31,6 +34,12 @@ class MyStoriesFragment : DSLSettingsFragment(
override fun bindAdapter(adapter: DSLSettingsAdapter) {
MyStoriesItem.register(adapter)
requireActivity().onBackPressedDispatcher.addCallback(viewLifecycleOwner, object : OnBackPressedCallback(true) {
override fun handleOnBackPressed() {
requireActivity().finish()
}
})
lifecycleDisposable.bindTo(viewLifecycleOwner)
viewModel.state.observe(viewLifecycleOwner) {
adapter.submitList(getConfiguration(it).toMappingModelList())
@@ -56,7 +65,7 @@ class MyStoriesFragment : DSLSettingsFragment(
customPref(
MyStoriesItem.Model(
distributionStory = conversationMessage,
onClick = {
onClick = { it, preview ->
if (it.distributionStory.messageRecord.isOutgoing && it.distributionStory.messageRecord.isFailed) {
lifecycleDisposable += viewModel.resend(it.distributionStory.messageRecord).subscribe()
Toast.makeText(requireContext(), R.string.message_recipients_list_item__resend, Toast.LENGTH_SHORT).show()
@@ -67,7 +76,8 @@ class MyStoriesFragment : DSLSettingsFragment(
Recipient.self().id
}
startActivity(StoryViewerActivity.createIntent(requireContext(), recipientId, conversationMessage.messageRecord.id))
val options = ActivityOptionsCompat.makeSceneTransitionAnimation(requireActivity(), preview, ViewCompat.getTransitionName(preview) ?: "")
startActivity(StoryViewerActivity.createIntent(requireContext(), recipientId, conversationMessage.messageRecord.id), options.toBundle())
}
},
onSaveClick = {

View File

@@ -32,7 +32,7 @@ object MyStoriesItem {
class Model(
val distributionStory: ConversationMessage,
val onClick: (Model) -> Unit,
val onClick: (Model, View) -> Unit,
val onSaveClick: (Model) -> Unit,
val onDeleteClick: (Model) -> Unit,
val onForwardClick: (Model) -> Unit,
@@ -81,7 +81,7 @@ object MyStoriesItem {
override fun bind(model: Model) {
storyPreview.isClickable = false
itemView.setOnClickListener { model.onClick(model) }
itemView.setOnClickListener { model.onClick(model, storyPreview) }
downloadTarget.setOnClickListener { model.onSaveClick(model) }
moreTarget.setOnClickListener { showContextMenu(model) }
presentDateOrStatus(model)

View File

@@ -16,6 +16,8 @@ class StoryViewerActivity : PassphraseRequiredActivity() {
}
override fun onCreate(savedInstanceState: Bundle?, ready: Boolean) {
supportPostponeEnterTransition()
super.onCreate(savedInstanceState, ready)
setContentView(R.layout.fragment_container)