HACK Week: Reader detail customization

thomashorta commented 1 month ago

Internal refs: zQnohyMpLzBzQ5jzMMKni3-fi-3900_17941, p1710343618122149-slack-C06PGTY5PKK Equivalent iOS PR: https://github.com/wordpress-mobile/WordPress-iOS/pull/22851

This is mainly a proof-of-concept based on a HACK Week idea of Reader Customization by providing a Reading Preferences sheet that can change color, font, and font size of the post content, so each user can choose what works best for them.

Here's a quick demo of what was implemented so far:

https://github.com/wordpress-mobile/WordPress-Android/assets/5091503/7473d5ea-f7d0-4635-9f3d-af2d581af5c5

Some of the caveats so far are:

The font styles are only applied in Post Reader Details, and only to the title, likes & comments, tags, and post body, which means some stuff look a bit out of place (comments, recommended posts, screens that are opened from this screen).
The “Subscribe” button is currently pretty hardcoded, so it doesn’t get the custom color scheme. Feeds don’t follow the customization as well.
Changing the reading preferences causes the post to reload (so scroll position is lost and some content blinks as it needs to be re-rendered)

IMHO, the overall experience so far is not that bad, but it needs a bit more work to get this feature to a shippable condition.

To Test:

Open Jetpack
Go to Me -> Debug settings
Go to Features in Development
Turn ReaderReadingPreferencesFeatureConfig ON
Go to Reader
Open any post to get to the Post Details screen
Tap the new top bar button, as well as an option in the "more" menu to access Reading Preferences
Play around with different color schemes, font families, font sizes

Regression Notes

Potential unintended areas of impact
- TODO
What I did to test those areas of impact (or what existing automated tests I relied on)
- TODO
What automated tests I added (or what prevented me from doing so)
- TODO

PR Submission Checklist:

[ ] I have completed the Regression Notes.
[ ] I have considered adding accessibility improvements for my changes.
[ ] I have considered if this change warrants user-facing release notes and have added them to RELEASE-NOTES.txt if necessary.

Testing Checklist (strike-out the not-applying and unnecessary ones):

[ ] WordPress.com sites and self-hosted Jetpack sites.
[ ] Portrait and landscape orientations.
[ ] Light and dark modes.
[ ] Fonts: Larger, smaller and bold text.
[ ] High contrast.
[ ] Talkback.
[ ] Languages with large words or with letters/accents not frequently used in English.
[ ] Right-to-left languages. (Even if translation isn’t complete, formatting should still respect the right-to-left layout)
[ ] Large and small screen sizes. (Tablet and smaller phones)
[ ] Multi-tasking: Split screen and Pop-up view. (Android 10 or higher)

dangermattic commented 1 month ago

	2 Warnings
:warning:	`strings.xml` files should only be updated on release branches, when the translations are downloaded by our automation.
:warning:	This PR is larger than 300 lines of changes. Please consider splitting it into smaller PRs for easier and faster reviews.

Generated by :no_entry_sign: Danger

wpmobilebot commented 1 month ago

📲 You can test the changes from this Pull Request in WordPress by scanning the QR code below to install the corresponding build.

	App Name	WordPress
	Flavor	Jalapeno
	Build Type	Debug
	Version	pr20506-41760ca
	Commit	41760cad65d865832e261678c3cbed35aa2c1238
	Direct Download	`wordpress-prototype-build-pr20506-41760ca.apk`

Note: Google Login is not supported on these builds.

wpmobilebot commented 1 month ago

📲 You can test the changes from this Pull Request in Jetpack by scanning the QR code below to install the corresponding build.

	App Name	Jetpack
	Flavor	Jalapeno
	Build Type	Debug
	Version	pr20506-41760ca
	Commit	41760cad65d865832e261678c3cbed35aa2c1238
	Direct Download	`jetpack-prototype-build-pr20506-41760ca.apk`

Note: Google Login is not supported on these builds.

codecov[bot] commented 1 month ago

Codecov Report

Attention: Patch coverage is 56.58915% with 112 lines in your changes are missing coverage. Please review.

Project coverage is 40.31%. Comparing base (569b0a4) to head (41760ca). Report is 26 commits behind head on trunk.

Files	Patch %	Lines
...droid/ui/reader/models/ReaderReadingPreferences.kt	63.71%	41 Missing :warning:
...ordpress/android/ui/reader/ReaderPostRenderer.java	0.00%	17 Missing :warning:
...der/discover/ReaderPostMoreButtonUiStateBuilder.kt	9.09%	9 Missing and 1 partial :warning:
...android/ui/reader/utils/ReadingPreferencesUtils.kt	0.00%	9 Missing :warning:
...dpress/android/util/extensions/WindowExtensions.kt	0.00%	7 Missing :warning:
...id/util/EnumWithFallbackValueTypeAdapterFactory.kt	73.91%	3 Missing and 3 partials :warning:
.../java/org/wordpress/android/ui/prefs/AppPrefs.java	0.00%	5 Missing :warning:
...press/android/util/extensions/ContextExtensions.kt	0.00%	5 Missing :warning:
.../org/wordpress/android/ui/prefs/AppPrefsWrapper.kt	0.00%	2 Missing :warning:
...ui/reader/discover/ReaderPostCardActionsHandler.kt	0.00%	2 Missing :warning:
... and 6 more

Additional details and impacted files

```diff @@ Coverage Diff @@ ## trunk #20506 +/- ## ========================================== + Coverage 40.24% 40.31% +0.07% ========================================== Files 1463 1472 +9 Lines 67600 67831 +231 Branches 11201 11216 +15 ========================================== + Hits 27205 27347 +142 - Misses 37934 38018 +84 - Partials 2461 2466 +5 ```

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.