Create message likes

[bpavlov2001]

Issue #796

I think It would be good to add an ability to like other peoples messages.

Reason

• Actual reason: I think this just a nice to have, since I often find myself wanting to like someone's message.
• Redditor meta argument: I think this would encourage high effort messages as people get "rewarded" for high effort/funny messages encouraging good quality discourse. ☝️😎

Disclosure

This is more of a technical demo since I didn't want to to open a feature request without doing leg work on figuring out the implementation. I'm happy to keep iterating from your feedback but I think this was a good point to open a pr lest I spend ages refining a feature no one wants. I'm not super confident with web sockets so please do correct me if I say or do something that doesn't make sense.

Implementation

Since ther is no message id (as far as I can tell?) I use display Name + timestamp to identify the message being liked.

Add a new LIKEMSG event wich has the following:
1. Nick: The DisplayName of the user liking it
2. Timestamp: Time when user liked
3. MessageNick: DisplayName of the user who sent the message thats being liked
4. MessageTimestamp: The Timestamp of the message we are liking

When any user likes a message a small ghost heart floats up behind the heart icon.

Video.Project.2.mp4

If the active user likes a message a background square glow appears. The user cant like that message again then. It decides if the current user has liked a message by comparing the nick in the LIKEMSG event (user who sent the like) to the current user displayName :

The message stores number of likes which is converted into a like level. Depending on the number of likes the heart changes colours according to this gradient:

1 like -> level 1
5 likes -> level 2
...
100 likes -> level 6

If a unauthorised user tries to like a message they are shown the log in pop up

Demo

I cant tell if I'm being stupid but I cant find an active repository for the server side code. So I console.log send events and I imitate receiving events by manually triggering source.parseAndDispatch using dev console.

Video.Project.1.mp4

Limitations of current implementation

• I'm not supper married to the colour gradient since isn't immediately intuitive which colour is better than which but it was quick to whip up for this demo. Originally I had a counter under the heart but its quite difficult to read at that scale and making it bigger eats more space from the actual message space.
• There is no "unlike" functionality. I believe it would add a lot more complexity to this feature that isn't justified by the slight UX improvement of being able to unlike a message.
• This could add a lot more events into what seems like and already quite busy websocket stream. if 10 messages get 10 likes that's 100 new events. The biggest thing this could impact (from my understanding) is when user fetches history on initial load as this would add a lot of events to it. This could be optimised by having the server batch like events into one but I thought I'd keep the implementation simple for now.
• Currently the text wraps slightly under the like button. We would need to create a bit of padding on the right side of messages to accommodate this feature. This would reduce the width of the overall window
• Currently cant see who liked whose message.
• Muted users can still like messages. I wasn't sure if we would want mute to also block likes.
• It is technically possible that we identify the wrong message if 2 people with the same nick send a message in the exact same ms but I think that's an acceptable risk for a streamer chat.

Email: bpavlov2001@gmail.com