Since the external API now sets preferredWidth/preferredHeight for resizing the large video, we don't need to add chat width to the computed window width when the chat window is closed.
Fixes https://github.com/jitsi/jitsi-meet/issues/7889
If a failure occurs while we are still setting up the UI it's possible the local
thumbnail is still null, and none of the code assumes it may be null, so skip
it.
Get the existing HTMLVideoElement for large video instead of creating a new video element for capturing the screenshot.
This should prevent the video player from getting displayed on mobile Safari.
The stream is attached before the video type change event is fired, so comparing
them is too late. Unconditionally update the screen-sharing indicator, and
perform the check for a change right there, to avoid re-renders.
Adapt to E2EE changes in lib-jitsi-meet. Notably:
---
e2ee: introduce per-participant randomly generated keys
This the second stage in our E2EE journey.
Instead of using a single pre-shared passphrase for deriving the key used for
E2EE, we now establish a secure E2EE communication channel amongst peers.
This channel is implemented using libolm, using XMPP groupchat or JVB channels
as the transport.
Once the secure E2EE channel has been established each participant will generate
a random 32 byte key and exchange it over this channel.
Keys are rotated (well, just re-created at the moment) when a participant joins
or leaves.
---
* Adding responsive to jitsi logo, buttons and hiding some part of the interface
* moving media types thresholds to variables and apply only to screen
* hide chrome extension banner on very small view
* Hide filmstrip only on desktop narrow windows
Up until now we relied on implicit loading of middlewares and reducers, through
having imports in each feature's index.js.
This leads to many complex import cycles which result in (sometimes) hard to fix
bugs in addition to (often) breaking mobile because a web-only feature gets
imported on mobile too, thanks to the implicit loading.
This PR changes that to make the process explicit. Both middlewares and reducers
are imported in a single place, the app entrypoint. They have been divided into
3 categories: any, web and native, which represent each of the platforms
respectively.
Ideally no feature should have an index.js exporting actions, action types and
components, but that's a larger ordeal, so this is just the first step in
getting there. In order to both set example and avoid large cycles the app
feature has been refactored to not have an idex.js itself.
> playinline attr needs to be set to true to stop local video from playing in full screen mode in Safari on iOS.
> This applies to the local video thumbnails and the camera previews from the device selection menu and video preview button
Replaces the .oncanplay listener with addEventListener('canplay', ...).
This is needed because third party libraries (for example callstats)
are brutally overriding the .oncanplay property and replacing our
listener.
* fix(thumbnail): Optimize status bar moderator icon
Moved all moderator functionality to react to optimize the number of
status bar updates.
* fix(RemoteVideoMenuTriggerButton): Use nullish coalescing
Co-Authored-By: Saúl Ibarra Corretgé <saghul@jitsi.org>
* ref(StatusBar): rename to StatusIndicators
* fix(RemoteVideoMenu): isModerator value.
* fix(notification): mobile.
Co-authored-by: Saúl Ibarra Corretgé <s@saghul.net>
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.
* Adds an option to set email through iframe API init and to stats.
* Simplifies configuring email and displayName in stats.
Removes enableStatsID as not needed as when off we are sending as callstats id xmpp resource which is unique per call and id must be something that sticks between calls (callstatsUsername).
* Adds email and displayName in stats config for mobile.
* chore(deps): Updates lib-jitsi-meet to latest dd31f0a.
* Removes enableStatsID from config and whitelist.
This adds an option to disable video autoplay that will be used mostly with maleus (our selenium-based load testing tool for testing the new bridge). Disabling video rendering lowers the resource utilisation of the selenium nodes.
This commit changes how the SmallVideo.isVideoPlayable method works.
1st we remove the check on the video stream muted field (materialized with the
!this.videoStream.isMuted() guard). This check is redundant as it is
already materialized in the !this.isVideoMuted check (the isVideoMuted
field is updated with the return value of the videoStream.isMuted()
method).
2nd we return false if we're in audio only mode, because it's
(obviously) undesirable to have a playable video when in audio only
mode.
* Get participant specific video element
We now have the ability to select the video element for specific participants. I'm tweaking the jitsi-meet-electron app for my use case. I need to open Always On Top windows for specific participants, so the current _getLargeVideo() wont suffice.
I made a post about this in the Developers section on the Jitsi Community Forum, but it got blocked by Akismet.
* Add dots at end of sentence.
* Fixed ESlint errors and add additional check for iframe.
* Use _myUserID instead of string.
* Return the local video by default if participantId is undefined.
* Fixed mistake in string template.
It's an evolution of audio-only mode, where we also allow for receiving a remote
screen-share.
Diving deeper: this basically sets last N to 1 or 0 depending on the
availability of a screen-share.
* ref(feedback): emit api feedback submitted on completion
Compared to firing the event on submission because
the submission ajax will not be completed at that
time..
* squash: update package.json
Multiple requests for checkUserRemoteControlSupport can be in
flight simultaneously. Order of promise resolution is not
guaranteed. It is possible for Request A and Request B to be
in flight and then Request B's promise chain resolves first.
Request A could have encountered errors and then resolve. Then
what could happen is checkUserRemoteControlSupport returns true
for remote control support due to Request B and the UI updates.
But then checkUserRemoteControlSupport returns false for
remote control support due to Request A's error and the UI
updates to hide remote control.
* Updates kick showing who kicked us.
* Notify participants that someone was kicked.
* Shows notification to user who is remotely muted.
* Updates the notification type.
* Muted by notification for mobile.
* Moves code to react and adds the kick notifications to mobile.
* Updates lib-jitsi-meet.
* Updates start silent, turning on startWithAudioMuted and few UI tweaks.
Disabled mic unmute button and removes remote participants volume slider.
* Adds analytics for start silent.
* Removes extra semi colon.
* Updates lib-jitsi-meet and updates meeting info text.
VideoLayout schedules a large video update by passing in
the video stream on the small video instance. When a stream
is removed, the UI is removed from the small video instance
but a reference to the stream is left. So when VideoLayout
schedules the large video update after a stream removal,
the old stream from the small video instance is re-used,
even though it has been removed.
This change also brings balance with RemoteVideo method
"addRemoteStreamElement" which sets the stream on the
small video instance, so now "removeRemoteStreamElement
unsets it.
- Use actions to notify the rest of the app that
a mic or camera error has occurred
- Use middleware to respond to those notifications
of errors by showing in-app notifications and
notifying the external api
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 detecting preferred audio output.
Fixes detecting when a new output device is found and we have stored user preference of using that device.
* Does not store which is the currently open device on save.
Does not save the currently opened device when saving settings dialog, this will be done once we successfully replace the tracks to use the new devices.
* Saves opened audio device after successfully changing it.
If we do it earlier _updateAudioDeviceId is using localAudio and can store wrong value.
* Adds notification for new non preferred devices.
A notification is shown which gives an option to the user to select and use the newly plugged devices.
Adding custom button and handler for the action to the notifications.
* Changes logic to search and handle all newly added devices from array.
* Moves some utility methods to features/base/devices.
The state about currently opened devices is filtered and not stored, where we only store when user selects a device preferences.
Also allow changing input devices for Firefox when we are not in a conference.
When a fade in/out animation is in progress, another large
video update can be queued but can try to force itself onto
large video. For example a pin can be in progress and while
the fade in/out animation plays, local video can change its
video type during the animation and forcing an update of
large video. This results in local video getting forcible
updated onto large video while the pinned video is left on
small video only.
* ref(display-name): do not pass in display name
The component gets the state itself from redux.
* fix(display-name): do not default name to placeholder name
The web display name component supports inline editing of
the name. Problems can occur when the displayed name
differs from the actual saved name, because participants
without a display name, including the local user, have
a different, default display name displayed. So when
editing starts, the input field is populated with the
default name. To workaround such while supporting fetching
the display name using mapStateToProps, pass in both the
name which should be shown and the name value saved in
settings.
* ref(display-name): rename methods
* 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
* feat(screenshare): support remote wireless screensharing
- Pass events to the ProxyConnectionService so it can
handle establishing a peer connection so a remote
participant, not in the conference, can send a
video stream to the local participant to use as a
local desktop stream.
- Modify the existing start screensharing flow to accept
a desktop stream instead of always trying to create one.
* adjust ProxyConnectionService for lib review changes
- Reset some state on the singletons conference
and VideoLayout.
- Add a way for LocalVideo to clean itself up
by sharing logic with the other SmallVideos.
- Add clearing of chat messages so they don't
linger.
- Remove some UI event listeners.
* Fix LoginDialog hidden by gUM-Overlay
Running FF46 on Linux and Android. The gUM Dialog (zIndex 1013) hides the LoginDialog (zIndex 999 by default) , but the gUM Dialog will only be resolved when connection is completed (aka hideUserMediaPermissionsGuidanceOverlay is called once the Promise.all in createInitialLocalTracksAndConnect is resolved and that Promise includes "connect").
Fix this by increasing the connection dialog zIndex.
Alternatively this could by fixed by handling gUM and connection one after the other.
* remove whitespace change
On tile view enter/exit, local video is moved in the DOM (an effect
of not being reactified and moving being easier) and play is called
on its video element. The race condition setup is such: in tile
view with other participants and local video is on large (not
visible in the UI but visible in the app state and pip popout).
The race is such: pin a remote video, large video update is queued,
tile view is exited, local video is moved, play is called,,
onVideoPlaying callback executed, middleware fires mute update,
which checks if local is on large (it is), previous large video
update is cleared, and local is placed on large.
The fix is ensuring the redux representation of local video is
passed in, which holds the boolean videoStarted, which prevents
the onVideoPlaying callback from firing on subsequent plays.
Video elements may have problems scaling to cover pixel fractions,
so there could be a 1px black border line displaying in the
thumbnail. It's most visible in tile view. Flooring the sizing
calculations hides the border.
- Change "features/chat" to support listening for new chat messages
and storing them, removing that logic from conference.js.
- Combine chat.scss and side_toolbar_container.css, and remove unused
scss files. Chat is the only side panel so the two concepts have
been merged.
- Remove direct access to the chat feature from non-react and non-redux
flows.
- Modify the i18n translate function to take in an options object.
By default the option "wait" is set to true, but that causes
components to mount after the parent has been notified of
an update, which means autoscrolling down to the latest rendered
messages does not work. With "wait" set to false, the children
will mount and then the parent will trigger componentDidUpdate.
- Create react components for chat. Chat is the side panel
plus the entiren chat feature. ChatInput is a child of Chat and
is used for composing messages. ChatMessage displays one message
and extends PureComponent to limit re-renders.
- Fix a bug where the toolbar was not showing automatically when
chat is closed and a new message is received.
- Import react-transition-group to time the animation of the
side panel showing/hiding and unmounting the Chat component.
This gets around the issue of having to control autofocus if the
component were always mounted and visibility toggled, but
introduces not being able to store previous scroll state
(without additional work or re-work).
The code for handling device availability has been disabled for a long time,
plus it's ill named since it represents 2 abstractions: lack of permissions and
lack of devices.
Time for it to rest in the git graveyard.
The process for doing a replaceLocalTrack is async. Is it
possible to trigger replaceLocalTrack multiple times before
each call is finished. This leads to situations where
replaceLocalTrack is called multiple times with oldTrack being
null and a new track. In this scenario, each new track will be
added, causing UI issues such as the local participant's
large video not displaying for remote participants.
The action replaceLocalTrack is used when unmuting audio or
video, when creating new tracks on device switch, and when
toggling screensharing. These actions can collide with each
other. One way to fix this would be to queue replaceLocalTrack.
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.
* feat(tile-view): initial implementation for tile view
- Modify the classname on the app root so layout can adjust
depending on the desired layout mode--vertical filmstrip,
horizontal filmstrip, and tile view.
- Create a button for toggling tile view.
- Add a StateListenerRegistry to automatically update the
selected participant and max receiver frame height on tile
view toggle.
- Rezise thumbnails when switching in and out of tile view.
- Move the local video when switching in and out of tile view.
- Update reactified pieces of thumbnails when switching in and
out of tile view.
- Cap the max receiver video quality in tile view based on tile
size.
- Use CSS to hide UI components that should not display in tile
view.
- Signal follow me changes.
* change local video id for tests
* change approach: leverage more css
* squash: fix some formatting
* squash: prevent pinning, hide pin border in tile view
* squash: change logic for maxReceiverQuality due to sidestepping resizing logic
* squash: fix typo, columns configurable, remove unused constants
* squash: resize with js again
* squash: use yana's math for calculating tile size
* ref(filmstrip): create an empty container for local filmstrip move
This might be necessary for tile view. To support making the
local video display at the end of remote videos while in tile
view, but separateed from scrollable remote videos, moving
the local video might be necessary. By creating an empty
container, there is a target for local video to move to.
* squash: rename id
* ref(filmstrip): apply filmstrip class to Conference root
Instead of apply the layout class to the body, it can be
applied to Conference. This will allow easier switching
between tile filmstrip and horizontal/vertical filmstrip.
* squash: fix typo filstrip
* ref(large-video): combine selectParticipant logic from web
Currently native/middleware/redux has its own logic for selecting a participant
on the bridge. To have the logic web respect that logic, a few changes are
needed.
- Web no longer has its own call to selectParticipant.
- To keep in line with web logic selectParticipant action should act even when
there is no track. This makes it so that when a participant does get a track
that the bridge will send high quality. The bridge can already handle when the
selected participant does not have a video track.
- The timing of web is such that on joining an existing conference, a
participant joins and the participant's tracks get updated and then the
conference is joined. The result is selectParticipant does not get fired
because it no-ops when there is no conference. To avoid having to make
uncertain changes (to be lazy), update the selected participant on conference
join as well.
* squash: update comment, pass message to error handler
* ref(device-selection): do not override var that is not reference again
* ref(device-selection): do not override var that is not reference again
* ref(device-selection): always update known devices on device list update
* ref(device-selection): replace call to get devices from legacy to redux
* ref(device-selection): remove unused device list state from mediaDeviceHelper
* ref(device-selection): update store before updating UI
Unfortunately, as the Jitsi Meet development evolved the routing mechanism
became more complex and thre logic ended up spread across multiple parts of the
codebase, which made it hard to follow and extend.
This change aims to fix that by rewriting the routing logic and centralizing it
in (pretty much) a single place, with no implicit inter-dependencies.
In order to arrive there, however, some extra changes were needed, which were
not caught early enough and are thus part of this change:
- JitsiMeetJS initialization is now synchronous: there is nothing async about
it, and the only async requirement (Temasys support) was lifted. See [0].
- WebRTC support can be detected early: building on top of the above, WebRTC
support can now be detected immediately, so take advantage of this to simplify
how we handle unsupported browsers. See [0].
The new router takes decissions based on the Redux state at the time of
invocation. A route can be represented by either a component or a URl reference,
with the latter taking precedence. On mobile, obviously, there is no concept of
URL reference so routing is based solely on components.
[0]: https://github.com/jitsi/lib-jitsi-meet/pull/779
When replace track is called in JitsiConference, there is no
guarantee a videoType update will come in presence before
the track added event. This can lead to the situation in
LargeVideoManager where an update is called with a track
with an undefined videoType.
- Instead of having 4 listeners for local connection status
updates and 1 for remote, remove two of the redundant listeners.
- Instead of calling into 4 separate VideoLayout methods to update a
participant's connection status, expose one handler.
* feat(settings): setting dialog
- Move device selection, profile edit, language select, moderator
options, and server auth into one modal with tabs.
- Remove side panel profile and settings and logic used to update
them.
- Pipe server auth status into redux to display in the settings
dialog.
- Change filmstrip only device selection popup to use the new
stateless settings dialog component.
* squash: do not show profile tab if not guest
* squash: profile button not clickable if no profile to show
* squash: nits
* ref: Settings dialog.
* ref(toolbar): show recording features based on explicit configs
* squash: bring back button configs, use final config names
* squash: update interfaceConfig comment, remove unused config whitelist
* squash: change order of button enabled checks to reduce diff
* squash: fileRecording -> fileRecordings
Hristo Terezov
Jaya Allamsetty
Saúl Ibarra Corretgé
paweldomas
Jaya Allamsetty
Tudor-Ovidiu Avram
Jesús Espino
Bettenbuk Zoltan
Gabriel
Mihai Uscat
Samuel Retika
Vlad Piersec
hmuresan
Alejandro Blanco
Jim Bullington
Ruben Kerkhof
horymury
Arzar
paweldomas
damencho
Leonard Kim
George Politis
virtuacoplenny
Jip-Hop
Karthik Muralidharan
Matthias Herzog
virtuacoplenny
Gabriel-Tiberiu Imre-Lucaci
michael-dev
Roland
yanas
Pratik Shah
Leonard Kim
akshitkrnagpal