* 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
Instead of keeping dominant speaker locally, get it from redux and be
updated when the dominant speaker changes. This is in an attempt to mimic
the video layout being reactified and connected to redux.
With so many abstractions called conference, I'm not surprised I made a
mistake and my reviewer didn't catch it.
As we are transitioning from remote participants identified by ID alone
to an ID-conference pair, the subsequent commits "Protect against late
PARTICIPANT_JOINED" and "Refine PARTICIPANT_LEFT for ID collisions"
caught the error.
The plan set in motion here is to associate remote participants with the
JitsiConference instances that created them in order to be able to
remove remote participants when a JitsiConference is no longer the
primary focus of the jitsi-meet app. And that's supposed to alleviate a
problem with multiplying remote thumbnails.
Doing all of the above in a single commit is a bit of a high order. So
I'm splitting the whole into multiple successive commits for the
purposes of observability, comprehension. Each commit is supposed to be
safe even if subsequent commits are not accepted, are reverted,
whatever. Obviously, without the successive commits, a commit may be
"unused".
One of the important pieces of the multiplying remote thumbnails "fix"
offered is removing remote participants who are no longer of interest
i.e. PARTICIPANT_LEFT. But in order for _LEFT to be implemented, _JOINED
must be implemented first.
* feat(recording): frontend logic can support live streaming and recording
Instead of either live streaming or recording, now both can live together. The
changes to facilitate such include the following:
- Killing the state storing in Recording.js. Instead state is stored in the lib
and updated in redux for labels to display the necessary state updates.
- Creating a new container, Labels, for recording labels. Previously labels were
manually created and positioned. The container can create a reasonable number
of labels and only the container itself needs to be positioned with CSS. The
VideoQualityLabel has been shoved into the container as well because it moves
along with the recording labels.
- The action for updating recording state has been modified to enable updating
an array of recording sessions to support having multiple sessions.
- Confirmation dialogs for stopping and starting a file recording session have
been created, as they previously were jquery modals opened by Recording.js.
- Toolbox.web displays live streaming and recording buttons based on
configuration instead of recording availability.
- VideoQualityLabel and RecordingLabel have been simplified to remove any
positioning logic, as the Labels container handles such.
- Previous recording state update logic has been moved into the RecordingLabel
component. Each RecordingLabel is in charge of displaying state for a
recording session. The display UX has been left alone.
- Sipgw availability is no longer broadcast so remove logic depending on its
state. Some moving around of code was necessary to get around linting errors
about the existing code being too deeply nested (even though I didn't touch
it).
* work around lib-jitsi-meet circular dependency issues
* refactor labels to use html base
* pass in translation keys to video quality label
* add video quality classnames for torture tests
* break up, rearrange recorder session update listener
* add comment about disabling startup resize animation
* rename session to sessionData
* chore(deps): update to latest lib for recording changes
Hristo Terezov, Chris Cordle, and I/Lyubomir Marinov agreed that we'd
try to use "invite" & "invitee(s)" in Web/React's iframe API,
mobile/react-native's SDK invite API, and internally for the purposes of
consistency, ease of understanding, etc.
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.
* Adds in memory log storage, to be used while testing.
Enabling it only when config.debug is set, a configuration provided by jitsi-meet-torture.
* Moves to using config.testing.testMode property for logs storage.
* Fixes comments.
* feat(recording): show the YouTube live stream URL
- From the start live stream dialog, push up the broadcast ID
of the chosen broadcast. It is assumed the ID can be used to
create the YouTube link.
- Listen for lib-jitsi-meet to emit updates of the known live
stream URL, shove it into redux, and have InfoDialog display
it.
* ref(info): pass in dial in and live stream url
Passing these values in should trigger AtlasKit InlineDialog
to re-render and reposition itself.
* ref(info): use conference existence as trigger for autoshowing dialog
* feat(info): add live stream link to invite copy
* Revert "ref(info): use conference existence as trigger for autoshowing dialog"
This reverts commit 1072102267.
* hidden -> url
* _onClickHiddenURL -> _onClickURLText
* fix(keyboard-shortcuts): process Unidentified keys
When processing keyboard events for keyboard shortcuts,
if the value of an event's "key" attribute is "Unidentified",
the event should be further processed instead of the "key"
being returned to be mapped to a registered keyboard shortcut.
This occurs on edge, where question mark has the key
"Unidentified" but has the proper keyCode of 191.
* squash: add comment
On hangup while audio only, audio only is set to false on
conference leave to reset redux state on mobile. Large video will
update itself on conference leave, but large video has been cleaned
up by that time so trying to directly access the user ID on large
video will fail. Be defensive about this check, because its
callers are already defensive about its return value.
The feature was not ported to the new toolbar. Arguable these
can all be moved into notification but for now simply the
logic will be removed and worked on again as demand arised.
The animate flag is always being passed in as false, so
essentially the animation isn't needed, unless a setTimeout 0
behavior is for some reason required...
jquery animate during animations sets an element's overflow to
hidden and then back to the overflow declared before the start
of the animation. If multiple animations are fired, then the
overflow could be set to hidden permanently. No calls
to Filmstrip#resizeThumbnails have animate set to true, so the
animate call is not even needed.
* feat(recording): use google api to get stream key
* squash: renaming pass
* squash: return full load promise
* sqush: use google api state enum
* squash: workaround for lib not loading
* another new design...
* increase timeout workaround for gapi load issue
* styling pass
* tweak copy
* squash: auto select first broadcast
Adds base/sounds feature which allows other features to register a sound
source under specified id. A new SoundsCollection component will then
render corresponding HTMLAudioElement for each such sound. Once "setRef"
callback is called by the HTMLAudioElement, this element will be added
to the Redux store. When that happens sound can be played through the
new 'playSound' action which will call play() method on the stored
HTMLAudioElement instance.
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.
* deps: update jquery version
* squash: resize thumbnails after appending shared thumb
This forces jquery animate to show the thumbnail somehow...
Remote thumbnails basically work this way (append to filmstrip
and then resize filmstrip thumbnails) so I just copied that
implementation. ... So I admit I lost this fight because
even after looking at jquery I couldn't understand why
it doesn't work on the first resize but does on the second.
Plus I'm being put on a strict timebox to update jquery.
* squash: getJSON no longer supports .success
The difference from this change and 88325ae is there is no
attempt to do this in redux. This is the safer change in that
the cleanup logic is known only to trigger on hangup.
This reverts commit 88325aeef2.
Turns out a conference with a password triggers a failed conference
join. It's going to be tricky to decipher when to do actual
cleanup, and where to shove that code, so reverting is easier for
now.
Destroy local tracks and also destroy large video so the
user does not wonder why camera (and mic) are still enabled
even though hangup has been pressed.
* 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
Passing around of the component was used when there were two
independent Notification components. Now that there is only
one Notification component, it is not necessary to pass
around the component.
Spot will need a way to submit call feedback using the iframe
api. For now expose a method on conference.js to submit that
feedback. Exposing on conference.js looks to be the existing
pattern... Also add an event to notify consumers of the iframe
api that feedback was submitted, as postMessage is async
and the notification can at least give some guarantee maybe.
I haven't updated documentation yet as I'm not confident
about this api.
* ref: Restructures the pinned/unpinned events.
* ref: Refactors the "audio only disabled" event.
* ref: Refactors the "stream switch delay" event.
* ref: Refactors the "select participant failed" event.
* ref: Refactors the "initially muted" events.
* ref: Refactors the screen sharing started/stopped events.
* ref: Restructures the "device list changed" events.
* ref: Restructures the "shared video" events.
* ref: Restructures the "start muted" events.
* ref: Restructures the "start audio only" event.
* ref: Restructures the "sync track state" event.
* ref: Restructures the "callkit" events.
* ref: Restructures the "replace track".
* ref: Restructures keyboard shortcuts events.
* ref: Restructures most of the toolbar events.
* ref: Refactors the API events.
* ref: Restructures the video quality, profile button and invite dialog events.
* ref: Refactors the "device changed" events.
* ref: Refactors the page reload event.
* ref: Removes an unused function.
* ref: Removes a method which is needlessly exposed under a different name.
* ref: Refactors the events from the remote video menu.
* ref: Refactors the events from the profile pane.
* ref: Restructures the recording-related events.
Removes events fired when recording with something other than jibri
(which isn't currently supported anyway).
* ref: Cleans up AnalyticsEvents.js.
* ref: Removes an unused function and adds documentation.
* feat: Adds events for all API calls.
* fix: Addresses feedback.
* fix: Brings back mistakenly removed code.
* fix: Simplifies code and fixes a bug in toggleFilmstrip
when the 'visible' parameter is defined.
* feat: Removes the resolution change application log.
* ref: Uses consistent naming for events' attributes.
Uses "_" as a separator instead of camel case or ".".
* ref: Don't add the user agent and conference name
as permanent properties. The library does this on its own now.
* ref: Adapts the GA handler to changes in lib-jitsi-meet.
* ref: Removes unused fields from the analytics handler initializaiton.
* ref: Renames the google analytics file and add docs.
* fix: Fixes the push-to-talk events and logs.
* npm: Updates lib-jitsi-meet to 515374c8d383cb17df8ed76427e6f0fb5ea6ff1e.
* fix: Fixes a recently introduced bug in the google analytics handler.
* ref: Uses "value" instead of "delay" since this is friendlier to GA.
Shared video (youtube videos) do not have indicator icons about
dominant speaker and raised hand. Add a check to see if the
indicator icon container exists before trying to attach react
icons to it. The error thrown didn't seem to be causing any
UI issues though.
While this truthy check before doing ReactDOM.render seems
like it should be a general practice, I'm hesistatnt to make
the change broadly because it hasn't been a problem so far.
* ref(avatars): remove Avatar.js
- Rely on redux getting updated with new participant state
and any calls to getAvatarURL passing in the redux
participant state. This way the state within Avatar.js can
be removed.
- Clean up methods on UI.js. Because all state is in the
store, separate methods for updating the avatar aren't as
necessary. Instead centralize accessing of the avatar for
components outside of redux and centralize the call to
update avatars for non-react components.
- Controversial: cache a participant's avatarURL on the
participant state. Currently the participant's avatarURL
that is generated without jwt (which sets the avatarURL directly)
is not cached. Without cache, there can be many redundant
calls to APP.API.notifyAvatarChanged.
* Leverage middleware timing to diff avatars
One alternative implementation is to leverage middleware's
ability to intercept updates before and after redux has
upated and then compare avatarURLs.
* kill UI.getAvatarUrl
* profile button sets its own avatar url (solves update timing)
* remove calls to updating avatar outside of middleware
* update UI.js doc
* remove left over logic from initial implementation
* try to move local user fallback into selector func
* default to id 'local' in selector
- 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.
Using column-reverse prevents proper scrolling on browsers other than Safari
and Chrome. Additionally, Firefox has an issue where flex containers have
dimensions set to auto, preventing resize. So, add hacks to maintain Chrome
and Safari's behavior while allowing for some kind of scrolling on other
browsers.
The goal is to reduce usage on atlassian/aui. New components
have been created to display the settings panel. Language
selection will reach into i18n for state whereas moderator
options will keep state in redux.
* On adding participant show the initial status text if any.
When participant joins and there is an initial status we show it, instead of the connected notification. If initial status is missing proceed with the default user connected notification.
* Updates to latest lib-jitsi-meet (365bd886ee).
* Adds a fixme comment.
* Updates to latest lib-jitsi-meet (365bd886ee).
* Adds initial documentation for sipgw jibri.
Also explains enabling the people search service and the request/response that are made around sipgw jibri service.
* Fixes add people dialog to invite users and rooms.
No invitation is sent when there is nobody to invite.
* Reuse some recording strings, by using arguments.
* Make sure web also dispatches CONFERENCE_WILL_JOIN.
* Introduces new feature videosipgw.
* Fixes lint errors.
* Renames methods to use people, chatRooms and videoRooms.
* Updates to latest lib-jitsi-meet (dc3397b18b).
It was decided along with the mute participant dialog reactification
that these types of warning messages should not be toggleable--that
they should simply always display because there is no undo action.
As such, the component NotificationWithToggle is no longer needed.
* fix(notifications): throttle and batch join notifications
Instead of directly calling to show a join notification,
go through a specific method. This method will queue
names for display while a throttled function pulls
the names and shows a notification.
* squash: remove unused translation key
* squash: use default display name
* squash: move into participant actions
After looking at the jquery-ui documentation, I believe it
is being used only in one place, when toggling the smiley
menu. That toggling has been quickly replaced with a normal
jquery call.
Note: @atlassian/aui also uses jquery-ui but killing that
off will be more difficult due to its CSS being used.
Click handling was added to the local thumbnail only after
receiving video. Click handling was added to remote thumbnails
only after receiving a stream. To allow for pinning through
the filmstrip in any case, always attach the click handler
on thumbnail init.
Hristo Terezov
virtuacoplenny
paweldomas
Gabriel-Tiberiu Imre-Lucaci
damencho
Bettenbuk Zoltan
Leonard Kim
michael-dev
Saúl Ibarra Corretgé
Roland
yanas
Pratik Shah
Leonard Kim
akshitkrnagpal
Lyubo Marinov
Saúl Ibarra Corretgé
Slava Kisel
Boris Grozev