Fix #9730: Improve failed media error in Aztec

[maxme]

Fix #9730: Improve failed media error in Aztec

To test:

• In Airplane mode.
• Create a new post with Aztec.
• Add a local image -> you should see a less scary overlay and an error message.

(I made sure the text size was changing after changing the device text/display size in accessibility options)

Design

I wanted to remove the overlay completely but the error text won't be visible if the user uploads an image with a white background. If we really want to remove the overlay, we'll need some to check the contrast ratio or only add a contract box around the error message.

cc @iamthomasbishop and @marecar3 that might be something to fix in Gutenberg Mobile - here is a demo with a white background image.

Last note: IMO, the current experience in Aztec is not great, it's a only a "tap to retry" action, I much prefer the Gutenberg way, it opens a dialog with different options:

We can open a new ticket if we think Aztec needs it.

Implementation

I took a TextDrawable implementation from here and modified it to support multiline strings and xy shifts.

It feels a bit hacky, but I think this is a less invasive approach. Another option would be adding support for text overlays in Aztec.

Update release notes:

• If there are user facing changes, I have added an item to RELEASE-NOTES.txt.

[iamthomasbishop]

I wanted to remove the overlay completely but the error text won't be visible if the user uploads an image with a white background.

I would keep the overlay, unless I'm missing something. It makes the text/icon readable over pretty much any background.

The alpha of the overlay looks about right, but can you confirm what the alpha is at? I think our standard is 40%.

Last note: IMO, the current experience in Aztec is not great, it's a only a "tap to retry" action, I much prefer the Gutenberg way, it opens a dialog with different options:

We have the following options on Aztec iOS:

[maxme]

The alpha of the overlay looks about right, but can you confirm what the alpha is at? I think our standard is 40%.

Seems to be 31% alpha black here:

WordPress-Android/libs/editor/WordPressEditor/src/main/res/values/colors.xml

Line 31 in 654e57b

<color name="media_shade_overlay_color">#50000000</color>

black 40% alpha is: #66000000

[iamthomasbishop]

Ah ok. We should probably do an audit of what we're using for shading across the app at some point, but for now let's just err on the side of consistency, and use what we're using primarily across the app. If this is an outlier, then let's adjust to whatever is most common for consistency.

[shiki]

The implementation looks sound to me.

I believe we should also hide the error message when the user has already tapped on the refresh/retry button.

Before	After

What do you think, @maxme and @iamthomasbishop?

[iamthomasbishop]

I believe we should also hide the error message when the user has already tapped on the refresh/retry button.

@shiki What happens when the user continues tappingretry? It seems to me that it continues to show the message (after) every failed attempt, which is what I would expect. During this attempt, we should remove the message, but not the overlay, imo. If we were to remove the overlay completely (message and shading), as a user I would assume that the image is being successfully added to the canvas, when that's not really the case (if I'm understanding correctly).

If the image has been successfully added, then yes we should hide the overlay completely.

Maybe I'm missing something 🤔

[shiki]

During this attempt, we should remove the message, but not the overlay, imo.

Yes, this is what I was trying to get at. My apologies. 😅

1. When retrying, both the message and retry button should be hidden. The overlay should stay.
2. If the attempt failed, the message and retry button should be shown again.
3. If the attempt was successful, the overlay, message, and retry button should be hidden.

This is what happens when I tap on the image again after tapping on retry. It shows an abort confirmation dialog. In the end, you can see that the image was successfully uploaded and the overlay, button, and message have disappeared.

[maxme]

Had a look at color usage in wpandroid

WordPress-Android/WordPress/src/main/res/values/colors.xml

Lines 296 to 298 in d65fe5b

	<color name="black_translucent_20">#33000000</color>
	<color name="black_translucent_40">#66000000</color>
	<color name="black_translucent_50">#80000000</color>

black_translucent_50 is the most used, and it's actually used in the media library on "uploading" items, makes sense to use the color in Aztec. I'll update that and create a new issue for opening a dialog on tap.

[maxme]

I believe we should also hide the error message when the user has already tapped on the refresh/retry button.
What do you think, @maxme

Yep +1

[maxme]

• update background color to match other overlays. black_translucent_50. Fixed in 3401cd4
• hide the error message when the user tap retry. Fixed in 6b7315e
• fill a new issue to replace the "tap to retry" action, to a "tap for options" action (via a dialog or bottom sheet). Aztec: Tapping on a failed upload should offer more options #9844

@shiki ready for another pass

[shiki]

Retested and LGTM! 🎉