🏆 Telegram X Android Competition: Round 1. Reactions

[vkryl]

🏆 Telegram X Android Competition: Round 1. Reactions

Prize fund for Round 1: $25,000.
Deadline: 23:59 on July 2nd (Dubai time).
Who can participate: Everyone.
Results announcement: July 12th, 2022.

The Task is to implement message reactions identical to the demo materials of TGX Reactions.zip attached below, including all the animations, layouts, and other visual effects:

• You should use the Telegram X code (https://github.com/TGX-Android/Telegram-X) available on GitHub.
• You must avoid using existing codebase of the same functionality from other Telegram clients.
• Final result must be submitted as the ready-to-merge pull request to this repository on the deadline date.

Your pull request should support:

1. Sending a reaction to each message type in private chats, groups, and channels. When holding down an emoji in the reactions panel, the app is expected to display a full-screen animation effect once the reaction is sent.
2. Allowing a user to set their preferred Quick Reaction in Settings.
3. Accessing the list of reacted users in groups in the following ways:
   • Press and hold the specific reaction button for a quick view.
   • Open the 'Reacted' list to show a multi-tab interface, with individual sections for each reaction emoji. Users should be able to switch tabs via a swipe gesture.
4. Turning message reactions on or off in group and channel management – including the ability for admins to disable and enable individual reaction emoji from the list.
5. Display an unseen reaction badge both in the chat list and inside the conversation.

Evaluation Criteria:

1. The overall code quality will be a top priority, aside animations smoothness and overall stability. Make sure to get familiar with the project structure and guide for contributors before getting started. Reactions code should keep in mind possible future use on other screens outside of the task (i.e. placing reactions through shared media).
2. The implemented features should not impact existing functions, like causing the app to crash when interacting with other features.
3. Ensure the app is free of major glitches, interface jumps, and severe layout issues.
4. Your app should run smoothly on a wide range of devices. In the evaluation stage, we will test with several devices, including Samsung Galaxy (A51, S10, S21 Ultra), Xiaomi Redmi Note 8 Pro, and more.
5. Implementing a clearly better stickers rendering (i.e. less disk space usage, better FPS, less CPU usage) will be considered a major advantage, but only in case of completing all other parts of the task.
6. Attempts to impersonate someone else's work (i.e. submitting a copy of someone else's pull request) would lead to permanent disqualification from Telegram X contests and any potential reward systems in future.

Submissions:

Contestants will be able to submit their entries to @ContestBot at the end of this round. We will further clarify the submission instructions closer to the deadline.

P.S. For the next stage, we expect to only invite contestants who achieved 🥉 3rd place or higher in this round.

---

Contents of TGX Reactions.zip:

Designs (41 images)

Videos (5 files)

Bottom.Sheet.with.Reactions.mp4

Quick.Reaction.Swapping.mov

Quick.Reaction.mp4

Reacting.from.Bottom.Sheet.mp4

Reaction.Long.Press.mp4

[vkryl]

Developers wishing to discuss the task and potential implementations are welcome to join https://t.me/tgx_dev chat.

P.S. Whoever else wishing to contribute Telegram X is welcome too.

[PXNX]

Why isn't this client written in Kotlin? Makes code a bit nicer to read, gets rid of most NPEs und has somesyntactic sugar :)

[vkryl]

Why isn't this client written in Kotlin? Makes code a bit nicer to read, gets rid of most NPEs und has somesyntactic sugar :)

Telegram X was created around 2014-2015, several years before Google announced first-class support for Kotlin. Telegram X uses Kotlin for some recent code though, e.g.: https://github.com/TGX-Android/Telegram-X/tree/main/vkryl

[vkryl]

Whoever participating in the contest, make sure to not miss implementation suggestions in https://t.me/tgx_dev that will be posted with #contest hashtag.

They will not be the requirement in any kind – just suggestions that might help getting the idea and plan on completing some parts of the contest task.

[vkryl]

Icons required by the mockups are baseline_favorite and baseline_visibility in 20 and 24 dpi available in the Telegram X source code. If you are not sure whether it's 20 or 24 on the specific mockup, ask in the group (make sure to check if anyone else already asked about the same mockup).

To create an icon in the missing dimension just create a copy, edit android:width and android:width and file name suffix to match the desired dpi.

Circular checkbox is SimplestCheckBox — used in most parts of the app and you may find a lot of samples by checking out its usages.

For rectangular checkbox you would need a CheckBoxView. You most likely do not need to create it directly, but to use TYPE_CHECKBOX_OPTION item (check out its usages in the app for examples). Such item should be passed to SettingsAdapter instance (most commonly used by RecyclerViewController).

However, patching CheckBoxView (onDraw method specifically) would still be required in order to support an intermediate state needed by one of the mockups — state when checkbox mark angle increases from 90 to 180 degrees.

[vkryl]

Some clarification on a grid reactions selector screen.

Behavior of the reactions settings from manage chat screen:

1. When enabling some reaction by tap on the corresponding reaction, the overlay animation should play, the same one as in messages.
2. When all reactions are selected, checkbox should be in ✅ state
3. When some are not selected, it should be in ➖ state
4. When none, it should be empty
5. When checkbox is at ✅ or ➖ state, it should unselect all reactions
6. Otherwise it should select all reactions

Behavior of quick reactions screen:

1. Same as Wallpapers 2.0 link support and implemented QR scanning #1 in the previous section
2. By default only 👍 quick reaction is enabled
3. The limit of available quick reactions is determined by developer.
4. When trying to enable some quick reaction over reasonable limit (the amount at which point accessing it with gesture would become inconvenient or impossible), app should show the tooltip above it that limit reached.
5. Enabling / disabling quick reactions should preserve the previously selected reactions, but exact behavior details are up to the developer

Below some additional animations examples for better understanding of the screens and intended animations.

TGX_AdditionalVideos.zip

Copy from https://t.me/tgx_dev/807

[vkryl]

Submissions are closed and judges are now evaluating the results.

Here's the list of 11 participants: #188, #187, #180, #177, #182, #184, #179, #186, #183, #189, #185.

All APKs can be found in this channel: https://t.me/tgx_prs/148. Everyone is welcome to leave feedback and bug reports to developers inside of corresponding PR.

[grishka]

There will be no contest.com pages for this particular contest, right?

[vkryl]

There will be no contest.com pages for this particular contest, right?

Soon they will be available there too.

[PXNX]

There will be no contest.com pages for this particular contest, right?

There is: https://contest.com/android-x-r1

[Sonofjoy]

I think is nice so we should keep calm and carry on

[vkryl]

Check out the results for the first round: 🏆 Telegram X Android Competition, Round 1 Results

Keeping this issue open until the 1st place will be determined.

[seik0ixtem]

can't see from discussion - can reactions be fully disabled on client on winner's PR?

it's the most annoying feature ever existed in telegram and i'm chosing alt clients where it can be disabled.

upd. inability to disable reactions client-wise - the second most annoying feature ever existed.

[vkryl]

Thanks everyone who participated in this contest.

PR #185 was chosen to be rolled out to users and merged in 9224e8b commit. Wanted to also note #183 who did a great job implementing 60fps reactions playback and better reaction animation curve ("fly out" and "land" animation), which can be tested in this APK: https://t.me/tgx_prs/297.

The main reasons #185 was chosen over #183 is that it implemented animations fully (such as animating all bubble width and height changes when reaction is set or unset, better buttons sorting, etc), had less frame drops and freezes on low-end devices (especially in channels with extensive amount of reactions set) and didn't override much of app's basic components only for the code style preferences (which is just an addition to the previous points, but not the key reason why it was chosen).

Follow https://t.me/contest for the final result announcement and any new upcoming contests.