DES-201: add a YouTube-like event bar #432
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR adds a YouTube-like event bar for subs/donos. The messages stay in the bar for an amount of time that corresponds to the amount of money spent (the exact ratio can be set in the website config, see https://github.com/destinygg/website-private/pull/273). You can see when the event will decay by checking its progress-bar background.
Clicking on the event expands it, showing its details.
The events get added to the bar in the opposite order that they're received (latest ones go first/to the left). I experimented with sorting the events based on the percentage left instead (higher percentage goes first/to the left), but I found the UX to be annoying - sometimes I clicked on one event, only to find chat highlighting another, since it sorted them before I clicked right underneath my cursor. Another issue with that approach was event positions flipping back and forth in rapid succession if they're close in percentages, but decay at slightly different rates.
Some videos showing the bar in action:
Simple donation
2024-03-12.19-01-38.mp4
Interaction with pinned messages
2024-03-12.19-02-19.mp4
To prevent overcrowding of the UI, the expanded/highlighted event temporarily hides the pinned message UI.
Showing persistence
2024-03-12.19-03-06.mp4
Multiple donations
2024-03-12.19-04-32.mp4
Regular subscription
2024-03-12.19-41-30.mp4
Gifted subscription
2024-03-12.19-42-12.mp4
Mass gift
2024-03-12.19-50-44.mp4
Mass gifts only add one event to the bar (the main one), and not every single following sub.
Handling long usernames
2024-03-12.20-45-31.mp4
If a username is a bit too long (>=12 characters), instead of filling the entire bar, it will scroll back and forth within its container.
This PR needs https://github.com/destinygg/website-private/pull/273 and https://github.com/destinygg/chat-private/pull/48 to work.