This commit adds a new small button over the "Phone/audio" button. Currently
this button pops up the device audio selector, which contains the "Leave audio"
option. This commit brings back the "Leave audio" behavior to the phone
button, using a new smaller button to switch between audio devices.
This issue address the problem reported by #12320 and complements the work done
for #9723.
Some technical details:
Added a new component : ButtonEmoji. This allow us to add an emoji inside
another button.
Modified dropdown trigger a bit: if the trigger contains a ButtonEmoji,
then we will use the emoji to trigger the dropdown (instead of the button
itself). This commit doens't change the default behavior of dropdown (when
the trigger doesn't have a ButtonEmoji component), to avoid regressions with
current dropdowns; this will only change it's behavior when used with
the new ButtonEmoji component.
Allow listenonly users to change output devices
Fixed dynamic audio device change for firefox
Fixed shortcuts for audio join/leave
Show (with a bold font) the current selected device
[performance] Prevent calling mediaDevices.enumerateDevices every time we render
the selector. This adds a delay (~200ms, on my chrome setup) to render this component
[performance] Do not call enumerateDevices to search for new devices, instead we listen on mediaDevices.deviceChange event
Small refactoring and fixed a few errors that were being throw in browser's console
Fixed device selection when this is done in audio-settings modal
Fallback to default device when current device is removed
Truncate device name length
Renamed "Input","Output" labels to "Microphone","Speakers", respectively
Update eslint rule for accessKey
On mobile if you clicked on a user or your own user to set their status, the tethered modal would keep it's z-index, which would prevent the user from interacting with anything because the tethered modal would overlap the whole site.
