* fix(large-video): trigger update after timeout for 1-on-1 calls
Currently no video switch happens if a user joins audio and video
muted. For example, User A is in a call and User B joins with no
mic and camera. User A will keep seeing local video on large video.
The fix is to set a timeout, of a somewhat arbitrary 3 seconds, to
show User B on large video.
* SQUASH: wrap videoElement access in if
* SQUASH: split out remoteVideoActive logic
We've had Filmstrip & LargeVideo React Components on mobile/React Native
from the start. We didn't have them on Web (because the rewrite in React
is not complete yet). However, that led to differences in the React
Component Conference on Web and mobile. In an effort to get closer to
merging the React Component Conference on Web and mobile, introduce the
React Components Filmstrip & LargeVideo on Web even if a minimal
render-only form at this time.
* 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
- Change z-index so any tooltips that display over the label,
particularly in vertical filmstrip mode, actually hide the label.
- Change the cursor to be a pointer so the label looks clickable.
- Remove unused audio-only-label styling.
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.
- Expose an api on Filmstrip to hide the remote videos container, which does so
by adding a class
- Modify listeners for user join, leave, share video to call the api
- Hide the container when there is 1 or fewer remote participants
- Always show the container if self view is in focus
- Show the container if the number of remote thumbnails does not match the count
of remote participants, such as the case of sharing a video
- 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
The 1:1 call UI and vertical filmstrip act on remote videos
while leaving local video alone. To facilitate acting only on
remote videos, place remote videos into their own container element.
Audio only mode will be toggleable only from the VideoStatusLabel,
so remove AudioOnlyButton from the toolbar and delete the component
itself. As a result of the button being removed, a truthy check in
VideoStatusLabel was also removed to ensure it will display as it
is now the only way to toggle audio only mode. Also set the cursor
on VideoStatusLabel to always be default, so it can never show the
text cursor.
Add a menu that displays when hovering over VideoStatusLabel. The menu's
display is controlled by CSS. As the existing AudioOnlyLabel no longer needs
needs its own tooltip, it has been removed and label display logic has been
moved into VideoStatusLabel.
DialInNumbersForm has been modified to display a conference id to be used for
dialing into the conference. The changes include:
- Requesting the conference id and adding the conference id to the redux store
- Displaying the conference id in DialInNumbersForm
- Modifying the copy behavior to support copying the new message to clipboard
- DialInNumbersForm does not display until all ajax requests have completed
successfully. This eliminates the need for the REQUESTING state.
In its current implementation, the VideoStatusLabel shows HD based on peer
connection stats. These stats will be available on temasys browsers soon but
will remain unavailable on Firefox, which does not collect height/width stats.
To support VideoStatusLabel showing cross-browser, move the high-definition
detection out of stat sniffing and instead check the video element itself using
an interval in LargeVideoManager. (An interval was used because the temasys
video object does not support the onresize event.) Also, add a cleanup path from
conference.web to LargeVideoManager to remove the interval.
Leonard Kim
Lyubo Marinov
yanas
damencho
hristoterezov
jitsi-pootle
Любомир Маринов
Saúl Ibarra Corretgé