Live Kit call UI redesign

[tomastiminskas]

Implement new design for Live Kit call

Base branch: develop

Figma designs:

• https://www.figma.com/design/L1oq8hh8kYU90bQxPAin3G/Mobile-Design-System---Dark-Version?node-id=7915-719&p=f&t=dKi1eXnxe9Q0lHsa-0

Requirements

• Implement new design on Live Kit call
• Hide/remove unused buttons
• Add new participants count button and new participants view
• Adapt UI to PiP mode based on iOS screenshot

Screenshot references

Control buttons:

TOP BAR

• Chat with arrow button: takes user to PiP mode
• Volume button: unsubscribes to all participants audio. This means user won't listen to unmuted participants until subscribing again
• Camera switch button: it shows just when own camera is enabled and allows to switch between from and back camera
• 3 dots buttons: shows menu with more options (use iOS as reference)
  BOTTOM BAR
• Camera button: toggles camera enabled/disabled
• Microphone button: toggles microphone
• Participants button: shows participants count and toggles participant view from bottom
• End Call button

Participant box:

Each participant on the call show up as a box in the call. Changing the way this boxes are placed is not required, but making each box look as in the designs (or the iOS app) is. This includes:

• Circular image in the middle
• Initials colored circle if no image is set
• Microphone state icon and nickname at the bottom
• Speaking mode: blue border and icon replacing microphone while speaking

Participants list view:

• Total of participants label and X button to close
• List of participants with nickname and picture
• Microphone icon: enabled and disabled state. When enabled it becomes a button with a semi transparent background allowing user to unsubscribe/subscribe to that participant audio
• Camera icon: enabled state (it will be hidden when camera is disabled by the participant). When enabled it becomes a button with a semi transparent background allowing user to unsubscribe/subscribe to that participant audio.

Pip Mode:

• No top bar
• Participant boxes
• Bottom bar with: camera button, microphone button, Pip toggle button and end call button

Elements in the Figma designs not implemented on iOS can be excluded from Android implementation like "All Cameras Off" and "Mute all" buttons in the participants list.