fix(device-selection): do not reuse tracks in previews
Device selection has live previews that reuse the current local
audio and video tracks for the sake of internet explorer. This
means when the local video was muted, device selection would
show a muted message. It is preferred to show a live preview
even when muted.
The changes include:
- Passing device ids into DeviceSelectionDialog, not tracks.
- Setting default selected devices to use for live previews.
- Removing all checks in DeviceSelectionDialog involving local tracks.
- Catching and displaying errors when creating a live video preview.
fix(device-selection): do not create a dropdown menu if disabled
AtlasKit DropdownMenu cannot be disabled, unlike Single Select.
The result is the isDisabled prop was not being honored. The
workaround is returning only the trigger element for the dropdown
and styling it to look like the dropdown is disabled. The text
for disabled device selection was changed along the way to fit
into the trigger.
fix(device-selection): convert trigger element to a div
AtlasKit Dropdown was recently updated to support fitting the
width of its container. However, AtlasKit Button, the trigger
element currently used for the dropdowns, does not fit the width
of AtlasKit Dropdown and stll has text overflowing out of its
button when there is an iconBefore prop passed in. Instead of
using AtlasKit Button, use a div and mimic the button look. This
allows the "button" to fit the container width and can display
ellipsized text within itself.
fix(device-selection): show black background only when video muted
On certain modal dimensions, the black background of the video
preview could peek through, making it look like the video has a
black line. The change is to remove the black background from
showing by default and having it only display when the video is
muted. Also, the video preview dimension stylings have been
changed to facilitiate smoother size adjusting with modal size
changes.
feat: convert device selection modal to use AtlasKit Dropdown
Instead of using AtlasKit Single-Select, use Dropdown. Dropdown
differs in that an icon can be specified for the trigger element,
whereas Single-Select currently supports icons for all elements,
and Dropdown can show all options incuding the already-selected
option.
This change does introduce the issue of the trigger element not
taking up 100% width of the parent. Supporting such would involve
overriding AtlasKit CSS. The compromise made here was to do a
generic override of max-width so the trigger elements at least
stay within the parent and aligning the trigger elements to the
right.
The Device Selection modal consists of:
- DeviceSelection, an overly smart component responsible for
triggering stream creation and cleanup.
- DeviceSelector for selector elements.
- VideoInputPreview for displaying a video preview.
- AudioInputPreview for displaying a volume meter.
- AudioOutputPreview for a test sound output link.
Store changes include is primarily storing the list of
available devices in redux. Other app state has been left
alone for future refactoring.
Steffen Kolmer
Mihai-Andrei Uscat
virtuacoplenny