Live Kit UI adjustments

[tomastiminskas]

Based on the call we had with @Antanasijevic here are the areas/aspects of the call UI we could adjust to match Sphinx design and colors.

Screenshot references:

iOS:

Mac:

Changes to consider:

• Color changes: boxes background colors
• Text colors
• Icon colors (on all their states)
• Icons position
• Rounded corners
• Text Fonts

In addition we discussed about sharing your profile picture for others to see it while you are not with your camera enabled (instead of the crossed camera icon). For that I was researching and I found that there is a metadata field that can be passed when generating the token used to join a call. If we add that metadata field in the token generation then each participan will be able to access the metadata of the rest of the participants on the call and use that info to show the picture and name.

@Evanfeenstra can you try adding new profilePictureUrl param in the generate token endpoint and add the metadata field when generating the token with the value in that new field?

The metadata should look something like this

"metadata": "{\"nickname\":\"John\", \"profilePictureUrl\":\"https://example.com/profile.jpg\"}"

I think it's worths it to add nickname as well inside metadata so we can took it from there and show it instead of the main nickname that seems to have a suffix for uniqueness.

[Evanfeenstra]

metadata is already part of the route. You can set your own metadata with the ?metadata= query param

[tomastiminskas]

@Antanasijevic

Live Kit UI V1 specifications:

Bottom Bar

Move all controls and call details to bottom bar:

• Room name with COPY button (optional tribe icon or name if call was joined from a tribe)
• Microphone button: to enable/disable your microphone
• Camera button: to enable/disable your camera
• Screen Share button: to enable/disable screen sharing
• Options button: with additional call settings presented in a menu
• End call button: ability to end call instead of closing call window
• Chat button: to open chat on right column
• Call Participants button: to open participants list in right column

Participan View:

Each participant box in the call view:

• Camera enabled state: speficifaction on how to show video in the box
• Camera disabled state with profile picture
• Camera disabled state without profile picture
• Name label
• Microphone and Camera icons (showing participant current state)
• Mic and Cam icons can become buttons if you are the admin (specify UI for buttons)
• UI for participant speaking

Participants List

List of participants with:

• Name
• Profile Picture (place holder for participants with no picture)
• Microphone icon (and button if you are the admin)
• Video icon (and button if you are the admin)

Chat view

Let's disable it for now until I can figure out some logic issues that are not delivering msgs to other participants right now. On any case this is part of the Sphinx app and they can chat in sphinx while in the call

[Antanasijevic]

@tomastiminskas @pitoi Here is a suggestion for V1 of Live Call UI, along with few notes.

Chat View
I suggest we remove chat option completely and use tribe for messaging.

Bottom Bar
Room Name can also have a tribe icon next to it. For calls from DM, we can remove icon, or have host icon instead.
I suggest we review current settings options, and remove ones that don’t work or feel unnecessary.

Participant view
Participant can have video on, or Profile picture when video is off.
I suggest we keep only Name and microphone states (On, Off and speaking.)
When participant is speaking, we can add blue border, blue speaking animation and animated circles around profile picture.
I also suggest for V1 to try removing buttons from participant view, and keep only indicators. For v1 we can try keeping admin options (to turn participant microphone and camera on and off) only in the participant list. We can bring them back if we feel they are too hidden.

Participant List
Participant list can open in a side panel with list of participants, and camera and microphone states.
Admin can have option to turn participants video or microphone on and off, and options to mute all or turn all videos off.

Mobile
Back button on top would minimize call window and reveal chat.
Mobile calls usually have options like flip camera and Speaker, so I suggest we add them on top, along with settings.
Camera, Microphone, Participant list, and end call can be in bottom bar.
Participant list could load from the bottom.
Currently, Share screen for mobile actually makes a recording, so for V1 i suggest we remove it

One of the alternative may be having Mic, Speaker, Camera, Flip and end call in bottom menu, and keep participant list in top right corner

Few elements to consider:

• Adding the length of the call
• Labeling the host on participant view and list

Tabs
A while ago we discussed having tabs for Second brain and calls, instead creating new windows. This may be a good time to implement this. You can see old options we created in this ticket stakwork/sphinx-mac#405

The simple option may be creating tabs similar to ones in Safari browser. Here is an old preview
https://github.com/stakwork/sphinx-mac/assets/13258550/8576ab69-9142-4ada-ba22-588225bfae45