With AtlasKit InlineDialog, the filmstrip z-index in vertical
filmstrip mode was adjusted as it had to be set to fixed position
for the dialogs to automagically be position fixed. This left
behind a regression where the filmstrip z-index was the same as
the video quality label, but came later in the dom, so the label
was not clickable. This commit modifies the z-index of the
vertical filmstrip to account for clicking of the video quality
label.
* feat(small-video): use InlineDialog for stats and remote menu
- Remove JitsiPopover and use InlineDialog instead.
- Bring the remote menu icon into react.
- Make vertical filmstrip position:fixed so popper (AtlasKit
dependency) sets InlineDialogs and eventually tooltips to
position:fixed.
* ref(remote-menu): hook KickButton to redux
* ref(remote-menu): hook MuteButton to redux
* modify padding, toggle dialogs
* pixel push margins to align dialogs, adjust padding of dialogs
* add comment about margin for dialog, add file I forgot
* modify indicator markup so the icon can be moved down while trigger stays at top of toolbar
* feat(notifications): implement a react/redux notification system
* squash into impl explicit timeout, style
* ref(notifications): convert toastr notifications to use react
* ref(toastr): remove library
* squash into conversion: pass timeout
* squash into clean remove from debian patch
* fix(filmstrip-only): vertically align center the toolbar
Use top 50% to position the toolbar's top at the vertical center
of the iframe. Then use transform 50% to move the toolbar itself
up 50% so its middle matches the middle of the iframe.
* squash: toolbox should center with filmstrip
Icons on the thumbnails can flicker when scrolling through videos.
To give rendering a bit more power, and thereby help with rendering
icons without flickering, force hardware acceleration.
- For horizontal mode, remove extra spacing created by borders
around local video and remote videos.
- For vertical mode, ensure remote videos grow only to fill the
parent height.
* fix(vertical-filmstrip): different label animations for filmstrip states
Instead of one timing for sliding the video status label left and right,
have different timings depending on the filmstrip state. To facilitate
triggering the different animations, add more classes to the labels
that need to move that specify the filmstrip state.
- Faster transition if focusing on self-view with videos present so
the label does not overlap videos transitioning from 0 opacity.
- Transition delay when de-focusing on self-view with videos present
so videos have time to go away before the label moves over them.
- Maintain no movement if there are no videos, regardless of
filmstrip toggle state.
- Different delays for when the filmstrip is being toggled visible
and hidden if there are remote videos visible.
* SQUASH: remove remote videos count
* SQUASH: add docs to scss
The video status labels, which include recording and hd status,
have been moved back to the top left while in vertical filmstrip
mode. The following had to be done:
- Remove styling to move the labels to the bottom left
- For VideoStatusLabel, move filmstrip remote video count, toggle
state, and 1:1 state into redux.
- Use middleware to emit out to the Recording label when the
filmstrip changes.
- Create an empty Filmstrip file for web and identify the existing
Filmstrip component as native.
- Add a class to the body when in vertical filmstrip mode
- Override styles as necessary to support the mode
- Add an option to make tooltips display from the left
- Move the HD Label to the bottom left
- Move the remote video menu to the bottom left, move the mute
icons to the bottom right
- Scale the local video's height and width to fit the filmstrip
Leonard Kim
yanas