sixp-naraka / chatty Goto Github PK

With this, refactor the current way the websockets are done. The new way should include:

• listening on new chatrooms and joining them automatically (e.g. subscribe to event "create:chatroom" for example, which returns the chatroom and the participants userId (a simple check if we are the user can then be made))
• joining each chatroom that is currently available to the user
• highlighting chats in which the user received new messages (but not the current opened one)
• remove open chats from which the user navigated away (e.g. they search for a user and clicked on their name to start a chat) for which there are no chat messages yet (only 1on1 chats)
• onInit, do not fetch chats for which there are no messages (only 1on1 chats)

And maybe more - will add as they come up.

Similar to Teams and others, on message hover a popup opens in which the user can select a emote as a reaction.

At max. 4-5 preselected emotes.

Add emote support for general purpose emotes.

Per button click the user gets a prompt to:

• name the group chat (required)
• add people to the group chat (minimum 1 other person)
• add backend endpoint "/api/user/chatrooms/group/create" or use existing endpoint "/api/user/chatrooms/create" and modify query to create as many participants as required
• on submit, save the new group chat and notify the other users about it, so they will see the group chat

During the process, the user can:

• remove users which have been previously selected

Group chats will show like normal chats in the chat-tab.

Same component structure as the login form component, if desired both can be incorporated into one.

This header component should stay on top and be always visible.
It might be worth to introduce a "toggle" button which can hide/show the header.

This means that a user can look into what exactly a notification was about, e.g. was it a new unread message, reaction or a missed call?

Information for each "missed" notification should contain the following:

• chatroom (name) - 8e71301
• user (name) - 8e71301
• type (message, reaction, call) - 8e71301
• when - 8e71301
• styling - b036b39
• persistence - 53f6de6 / f1423e3
• deletion - 8b22625

• if more than one of the same emote has been used to react to a message, sum them up
• show which user did what reaction (e.g. on hover show title tooltip)

Some more refinements to make group chats better:

• display which users are part of the group chat
• check and fix sorting of chats in the chat-tab
• allow to add & remove people after a group chats creation
  • only the creator of the group chat
  • requires backend changes/additions
  • requires also UI and styling
• [ ] allow to edit the name of a group chat (?)
• display the group chat creator with an icon (in the group-user dropdown), to highlight them (?)

Permanent until a user read the chat-messages, e.g. clicked on the respective chat-tab.

This will most likely require some (albeit small) backend change (API and db) to incorporate the saving of the status.

• add user authentication via passport

  • local
  • JWT

• create login form component

Bug fixes:

• not able to call someone again after hanging up

Improvements:

• UI stuff
• color phone icon differently if currently in a call
• look into audio device options for constraints (e.g. echo cancellation, etc.)
  • https://stackoverflow.com/questions/46063374/is-it-really-possible-for-webrtc-to-stream-high-quality-audio-without-noise
  • https://blog.addpipe.com/audio-constraints-getusermedia/
  • https://stackoverflow.com/questions/29936416/webrtc-disable-all-audio-processing?rq=1
  • https://stackoverflow.com/questions/39623945/what-webrtc-media-constraints-should-i-use-to-remove-all-processing-effects-on (if needed anymore)
• add audio clip during incoming voice chat
• add notification or user information for the requester of a voice chat, that the receiving person is being called

And potentially more.

With this users can add new chats (people) and in an upcoming issue also create group chats.

• create UI component
• add search functionality (backend endpoint for user fetching already exists)
• add pagination (?) to resultset

Firstly:

• submitted message is saved in the db with the necessary data
• chat partner can see (at first after a page reload) the latest messages

After:

• implement message push/queue of sorts to receive and send messages in real time (maybe via websockets?)
• make chat window scroll-able upon message contents overflowing

Additionally before logging out, show the user a quick notification stating something along the lines of "Unauthorized access discovered. Logging out.".

Also add screenshots of the UI.

See mentioned issue in #40.

Comment: #40 (comment)

• voice call only 1on1 users (for now)
• button to initiate a voice call
• user can either decline or accept the call

Websocket connect/disconnect can be used to keep track of who is currently online/offline.
Upon connection or disconnection the websocket can then notify the other users of this, and they can then act upon it, if needed.

The button already exists.
The menu should contain the following options/settings:

• user can change font size of the chat window text
• user can decide whether they want empty chats (all) to be shown, or only their own created empty chats (e.g. filter vs nofilter)

The settings for the previous logged in user (same tab, no reload in between) are used instead of the actual user settings.

This is because the settings is a service and therefore only instantiated once + since ReplaySubject is used the previous stored ones are reused.

After the user logged in the settings should be fetched always.