Fixes screensharing selection issues. Now when there’s a screen share we just use the old VERTICAL_FILMSTRIP_VIEW layout
Add THUMBAIL_TYPE to determine how to display thumbnails
See multiple participants on stage
Pin and unpin to stage
Automatic selection of participants to be displayed on the stage filmstrip based on dominant speaker changes
Make Filmstrip a reusable component. Used by MainFilmstrip (old functionality) and the new StageFilmstrip
Rename DominantSpeakerName to StageParticipantNameLabel
Active border now showed only for the dominant speaker (no longer for the pinned participant)
Hide video from the vertical filmstrip for the participants on stage
Update video constraints
Updated pinned indicator
* feat: Exposes a method for checking is remote track received and played.
Used for some tests in torture.
* squash: Drop not matching string.
Duplicate translation key with not matching content.
* squash: Moves torture specific functions to features/base/testing.
Listens for media events from the video tag of the large video and stores them in redux.
* squash: Fix comments.
* feat: Listens for media events from the video tag of the remote videos and stores them in redux.
* squash: Fix undefined videoTrack if between switches.
Since the verical filmstrip doesn't set its width explicitly anymore,
calculating the available area for the large video based on the
filmstrip width retrieved from the HTML element was wrong
in the cases when the rendering and cleanup of the filmstrip hasn't
finish yet. For example when switching from tile view to stage view.
* ref(web): removes video blur when ICE is disconnected.
Removes the blur effect from the large video and stops showing
the network connectivity issues message when ICE disconnects.
The feature has been considered too disruptive and there's a plan to
have it replaced with a more subtle indication.
* remove RECONNECTING key from main.json
The vertical alignment was being set with javascript.
Recent changes might make the setting of alignment exit
early due to height 0 video. As position can be set
declaratively with css, use css to set position.
Stop using special case logic for aligning screenshare videos.
It may be possible to have positioning all done using CSS but that
seems to be a more significant refactoring.
* fix(large-video): do not show avatar if no url
By default the large video dominant speaker avatar
has an empty src, which will result in a broken
image displaying. There is also disconnect with
non-react code trying to set an undefined src.
To prevent such until local avatar generation
work is done in the future, just don't show the
avatar.
* fix(conference): set the room instance earlier
Set the room instance on APP.conference before triggering
a redux update of the conference being set,, because
middleware can then fire and call methods on APP.conference
that depend on the room being set.
* get local participant directly from store instead of from global
The instance variable is not accurate. By default isVisible is
set to false but nothing sets the video container to actually
not be visible. As such it is possible for the video element
itself to autoplay, thereby making video visible, while the
isVisible boolean is still false. The fix chosen is to remove
instance variable and always respect calls to show/hide so
that the video container can be set to hidden.
To reduce the amount of motion that has to be blurred, use a canvas
to essentially set the FPS of the video background. This canvas
component is behind a temporary feature flag, as well as being able
to disable the blur, so it can be played around with on deployed
environments.
The animation for toggling filmstrip visibility was lagging on
Safari. Even though the background video is set to hidden, it is
still causing issues. Setting the background to display none
instead does help but might interfere with animations. So instead
do the easy thing and re-use logic used for Firefox to not show
the background video.
* ref(large-video): reactify background
This is pre-requisite work for disabling the background on
certain browsers, namely Firefox. By moving the component
to react, and in general encapsulating background logic,
selectively disabling the background will be easier.
The component was left for LargeVideo to update so it can
continue to coordinate update timing with the actual large
video display. If the background were moved completely into
react and redux with LargeVideo, then background updates would
occur before large video updates causing visual jank.
* fix(large-video): do not show background for Firefox and temasys
Firefox has performance issues with adding filter effects on
animated elements. On temasys, the background videos weren't
really displaying anyway.
* some props refactoring
Instead of passing in classes to LargeVideoBackground, rely on
explicit props. At some point LargeVideo will have to be reactified
and the relationsihp between it and LargeVideoBackground might
change, so for now make use of props to be explicit about
how LargeVideoBackground can be modified.
Also, set the jitsiTrack to display on LargeVideoBackground to
null if the background is not displayed. This was an existing
optimization, although previously done with pausing and playing.
* squash: use newly exposed RTCBrowserType
* squash: rebase and use new lib browser util
* squash: move hiding logic all into LargeVideo
* squash: remove hiding of background on stream change. hopefully doesnt break anything
- Modify Etherpad and SharedVideo so their resizing takes into account
the width of the filmstrip in vertical filmstrip mode.
- Modify Filmstrip's getFilmstripWidth to account for when the filmstrip
is hidden.
- modify VideoContainer so in vertical filmstrip mode it centers the
shared desktop stream in the middle of the available space not taken
by filmstrip.
- Also allow clickthrough on the secondary toolbar itself while still
allowing clicks on the toolbar's buttons. This allows clicks on
shared videos to go through.
ESLint 4.8.0 discovers a lot of error related to formatting. While I
tried to fix as many of them as possible, a portion of them actually go
against our coding style. In such a case, I've disabled the indent rule
which effectively leaves it as it was before ESLint 4.8.0.
Additionally, remove jshint because it's becoming a nuisance with its
lack of understanding of ES2015+.
* feat(presence): display status in thumbnail and large video
- Create a React Component for displaying presence. It currently
connects to the store for participant updates but in the future
should not be as smart once more reactification occurs.
- Modify filmstrip css so the presence status displays horizontal
center and below the avatar.
- Modify videolayout css so the presence status displays horizontal
centered and with a rounded background.
- Dispatch presence updates so the participant state can be update.
- Update message position on large video update to ensure message
positioning is correct.
* squash: do not show presence message if connection message is displayed
