* feat(local-video): convert to react
- Create a VideoTrack component for displaying a video element.
This mirrors native also having a VideoTrack component.
- The VideoTrack component does not let React update it to prevent
the video element from re-rendering, which could cause flickers
and would not work with temasys's overriding of the video element.
- VideoTrack extends AbstractVideoTrack to mirror native
implementation and to get the dispatch of the onplaying event.
- Remove the onclick handler on the video element. Honestly, I
didn't get it to work, and did not try, but it is also unnecessary
because another handler already exists on the video wrapper.
* ref(device-selection): VideoInputPreview uses VideoTrack to show video
* squash into conversion: change css selectors
* squash into conversion: mix in abstract props
* squash into conversion: change shouldComponentUpdate check
* squash: update comment about why triggerOnPlayingUpdate is used
config.disableDesktopSharing - when set to false will disable desktop
sharing
interfaceConfig.DESKTOP_SHARING_BUTTON_DISABLED_TOOLTIP - when value is
assigned, will not hide the desktop sharing button completely, but show
as disabled with this value used as the tooltip text.
Listeners were set for when a track muted or changed its video
type, but the listeners were never removed. This would could
cause events to keep firing on the removed tracks, which would
cause redux to fire and error because the tracks were no longer
known. That the tracks still fire events after removal is
another issue...
Chrome has deprecated line breaks in requests. The template
literal used for the searchPeople url has a line breaks. Instead
of line breaking the request url, concatenate it together.
Dynamically enables/disables the toolbar video button. Prior to that
commit if we would start with no video there would be no way to enable
it later on.
Keep track of the connection and conference objects so we can leave and / or
disconnect early, before the connection is established or the conference joined.
React (pun intended) to prop changes, that is, load the new specified URL.
In addition, fix a hidden bug in loading the initial URL from the linking
module: we prefer a prop to the URL the app was launched with, in case somehow
both are specified. We (the Jitsi Meet app) are not going to run into this
corner case, but let's be defensive just in case.
React (pun intended) to prop changes, that is, load the new specified URL.
In addition, fix a hidden bug in loading the initial URL from the linking
module: we prefer a prop to the URL the app was launched with, in case somehow
both are specified. We (the Jitsi Meet app) are not going to run into this
corner case, but let's be defensive just in case.
* 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
Apparently iOS doesn't like dangling background tasks very much, so update the
background timers plugin with a version which fixes this.
https://github.com/ocetnik/react-native-background-timer/pull/38
Also accomodate for the API changes upstream.
Credits to @lyubomir for finding the needle in the haystack.
* feat(display-name): convert to React
- Create a new React Component for displaying and updating display
names on small videos
- The updating of the Component is defined in the parent class
SmallVideo, which children will get access to through prototype
copying
- Create a new actionType and middleware so name changes that occur
in DisplayName can be propogated to outside redux
- Update the local video's DisplayName when a conference is joined
or else the component may keep an undefined user id
* squash: query for the container, not the el owned by react
- Create a new ConnectionIndicator component for displaying an
icon for connection quality and for triggering a popover. The
popover handling has been left in ConnectionIndicator for now,
which follows the existing implementation.
- Remove the unused method "connectionIndicatorShowMore"
- Change the implementation of existing methods that update the
connection indicator to call the same method which will rerender
the indicator completely.
- Add tracks to the redux store by intercepting where the
tracks actually get used via conference.replaceTrack
- While the replace call is unique to web, the _dispose and
_addTracks calls use existing native code implementations
- Between _dispose and addTracks is a call to update mute state.
Without it, when changing devices or videoType while muted,
the user will stay muted (whereas existing web behavior
causes unmute). This is due to middelware calling
_syncTrackMutedState to make the track mute if the user is
currently muted.
- Move the rest of ConferenceEvents.TRACK_MUTE_CHANGED into
middleware so the event is no longer used
- Note: This change does not guarantee the track state in the
redux store will be 100% accurate, specifically the attribute
videoStarted. Muted and videoType should be accurate.
- Use actions trackAdded and trackRemoved to add and remove remote
tracks from the redux store
- Emit out to non-react components on track added and removed in
the track middleware
- Emit out to existing non-react components on track mute and
video type changes
Move all logic related to displaying a table of connection stats to a React
Component. The actual parsing logic was modified as little as possible as the
focus is moving display to React.
- Create new React Components for RemoteVideoMenu and its
buttons
- Remove existing menu creation from RemoteVideo
- Refactor RemoteVideo so all function binding happens once in
the constructor, removing the need to rebind when updating
the RemoteVideoMenu
- Allow popover to append and remove React Components from itself
- Refactor popover so post-popover creation calls are broken out and
popover removal behavior is all done in one function.
When entering audio-only mode, VideoBridge is instructed to stop sending
remote videos. However, if the instruction fails because DataChannels do
not work, for example, then the app continues to display the remote
videos. Even though they're received in the case of such a failure, no
videos are to be displayed in audio-only mode.
The value of inviteURL is derived from locationURL by removing the hash
and query/search params in order to make it fit for display and/or
public purposes. The Jitsi Meet SDK consumers do not fall into that
category and our intention is to provide them with the URL they used
with JitsiMeetView.openURL(URL) anyway.
Also rewrites to remove repetition. I'm not saying the new source code
is better really but at least I got to examine it and comment on some of
its weaknesses.
The current implementation doesn't use the API and Transport modules. This is
due to the fact that they are too tied to APP at the moment, which is web only.
Once API is refactored and moved into the Redux store this will be adjusted,
though it's unlikely that the lowest level React Native module (ExternalAPI)
changes drastically.
This commit also introduces a stopgap limitation of only allowing a single
instance for JitsiMeetView objects on both Android and iOS. React Native doesn't
really play well with having multiple instances of the same modules on the same
bridge, since they behave a bit like singletons. Even if we were to use multiple
bridges, some features depend on system-level global state, such as the
AVAudioSession mode or Android's immersive mode. Further attempts will be made
at lifting this limitation in the future, though.
Introduce certain React Components which may be used to write
cross-platform source code such as Audio like Web's audio, Container
like Web's div, Text like Web's p, etc.
The counterpart of the external API in the Jitsi Meet Web app uses the
search URL param jwt to heuristically detect that the Web app is very
likely embedded (as an iframe) and, consequently, needs to forcefully
enable itself. It was looking at whether there was a JSON Web Token
(JWT) but that logic got broken when the JWT support was rewritten
because the check started happening before the search URL param jwt was
parsed.
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
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.
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.
There were getDomain, setDomain, SET_DOMAIN, setRoomURL, SET_ROOM_URL
which together were repeating one and the same information and in the
case of the 'room URL' abstraction was not 100% accurate because it
would exist even when there was no room. Replace them all with a
'location URL' abstraction which exists with or without a room.
Then the 'room URL' abstraction was not used in (mobile) feature
share-room. Use the 'location URL' there now.
Finally, removes source code duplication in supporting the Web
application context root.
Device selection has live previews that reuse the current local
audio and video tracks for the sake of internet explorer. This
means when the local video was muted, device selection would
show a muted message. It is preferred to show a live preview
even when muted.
The changes include:
- Passing device ids into DeviceSelectionDialog, not tracks.
- Setting default selected devices to use for live previews.
- Removing all checks in DeviceSelectionDialog involving local tracks.
- Catching and displaying errors when creating a live video preview.
Move the HD label into the newly renamed VideoStatusLabel
component. That way it cannot be possible for the audio only
label and the HD label to display simultaneously.
Audio only mode can be used to save bandwidth. In this mode local video is muted
and last N is set to 0, thus disabling all remote video.
When this mode is enabled avatars are shown.
* fix(react/participant): store display name in redux
* feat(remotecontrol): Add option to display the authorization dialog in meet
* feat(remotecontrol): Enable ESLint and Flow
toolbox/functions has functions that are specific only to web,
specifically defaultToolbarButtons. This has caused the native
build to attempt to bring in a web dependency which leads to a
build error. The fix for now is splitting web functions from
native functions to resolve the build error.
Create a new React Component for displaying a list of dial-in
numbers. The Component will fetch the numbers from a new
numberRetreviewUrl key/value set in config. If not present in
config, the Component will not be displayed.
AtlasKit DropdownMenu cannot be disabled, unlike Single Select.
The result is the isDisabled prop was not being honored. The
workaround is returning only the trigger element for the dropdown
and styling it to look like the dropdown is disabled. The text
for disabled device selection was changed along the way to fit
into the trigger.
Watermarks can be used to link to an external site by configuring a URL.
However, the URL is optional. When it is not set, the watermark should
not be clickable. This prevents users from reloading the room by
clicking on a watermark (caused by an HTML anchor element without an
href).
The functionality around logging including logging_config.js i.e.
loggingConfig and the other classes and/or functions that initialize
loggers for Jits Meet truly deserves a feature of its own. Start getting
in that direction on both Web and mobile by introducing
features/base/logging and bringing loggingConfig to mobile.
The config object defined by lib-jitsi-meet is not used by
lib-jitsi-meet only, jitsi-meet respects its values as well.
Moreover, jitsi-meet defined classes and/or functions which manipulate
that config object. Consequently, it makes sense to move the config
object and the associated classes and functions in a dedicated feature.
AtlasKit Dropdown was recently updated to support fitting the
width of its container. However, AtlasKit Button, the trigger
element currently used for the dropdowns, does not fit the width
of AtlasKit Dropdown and stll has text overflowing out of its
button when there is an iconBefore prop passed in. Instead of
using AtlasKit Button, use a div and mimic the button look. This
allows the "button" to fit the container width and can display
ellipsized text within itself.
@virtuacoplenny, the changes of this commit are not necessarily in
source code that you introduced in
https://github.com/jitsi/jitsi-meet/pull/1499 but I saw violations in
files modified in the PR which I had to read in order to understand the
PR.
Converting the invite modal includes the following:
- Creating new react components to display InviteDialog. The
main parent components are ShareLink and PasswordOverview,
the later handles displaying lock state and password editing.
These components do not make use of atlaskit as the component
for input does not yet support readonly, so for consistency
within the modal content no atlaskit was used.
- Using redux for keeping and accessing lock state instead of
RoomLocker.
- Publicly exposing the redux action lockStateChanged for direct
calling on lock events experienced on the web client.
- Removing Invite, InviteDialogView, and RoomLocker and references
to them.
- Handling errors that occur when setting a password to preserve
existing web funtionality.
When a dialog is opened on Android, full-screen mode is exited but we (the app)
know nothing about this. Make sure we re-enter full-screen mode once a dialog is
closed, if the conditions to be in such mode are still met.
Instead of using AtlasKit Single-Select, use Dropdown. Dropdown
differs in that an icon can be specified for the trigger element,
whereas Single-Select currently supports icons for all elements,
and Dropdown can show all options incuding the already-selected
option.
This change does introduce the issue of the trigger element not
taking up 100% width of the parent. Supporting such would involve
overriding AtlasKit CSS. The compromise made here was to do a
generic override of max-width so the trigger elements at least
stay within the parent and aligning the trigger elements to the
right.
Some atlaskit components, such as field-text, inherit text color.
This is a problem with components that are white as they will
inherit $defaultColor, which is a light gray. So instead, for
the atlaskit modal, set a color for all the form content so it
can be inherited instead.
Dialog does not currently support displaying dynamic strings
for titles, only static strings listed for translation. Accept
a new prop that explicitly states it is for setting the title
and have the web dialog prefer it over the titleKey.
When the prosody setting has muc_allowners, everyone joins as a
moderator. In this case, the local user will not be set as a
moderator in the redux store as the USER_ROLE_CHANGE event will
trigger with the local user id before the redux store has set
the actual local user id--something that happens on
CONFERENCE_JOINED. The fix is to explicitly signal the local user
role has changed to the redux store, which follows the
implementation of pre-existing web logic.
Device Selection re-uses the local video track for its preview.
When displaying Device Selection while video muted, the text
"muted" displays within the video preview, but some translations
may mistake this to mean audio muted. The text has been changed
to be explicit about video mute. This is a temporary solution;
at some point Device Selection should not re-use the local track
except for IE, the one browser that cannot get multiple tracks
from the same video input.
Over time features/base/util became a bucket where people seemed to dump
just about anything they couldn't think of a better place for. That's a
trend I don't like encouraging. Given that roomnameGenerator.js is
currently used in features/welcome only, I'm fine with moving it there
for the greater good.
Because timeUtil.js computes hours, minutes, and seconds out of a single
time/duration using three separate functions, I wouldn't recommend using
it, especially reusing it. That's why I'm even making the functions
private to their current use location.
I don't like the file/function name, I'm not excited about the
complexity of the logic it implements, and it's definitely a reusable
piece worthy of being called a utility.
Move logic to open device selection outside of SettingsMenu so
it can be called independently by either SettingsMenu or by
the settings button itself if no other settings but devices will
be displayed.
Saúl Ibarra Corretgé reported that Recording shows an error dialog
stating "There was an error connecting to your camera". Hristo Terezov
and Yana Stamcheva traced that the problem originates in
da4425b5c0
and, more specifically, is caused by a different order of execution due
to the move of the invocation of the function Recording.init.
The solution is to bring back the execution location of Recording.init.
Atlaskit at times will have localized styling for font-size and
sometimes will not. The button component will inherit its
font-size whereas selectors have localized font-size of 14px. For
consistency, the cancel/submit buttons on the atlaskit modals
will also have 14px. The atlaskit story book examples also use
buttons with 14px font-size.
Lyubo Marinov
Saúl Ibarra Corretgé
virtuacoplenny
paweldomas
Aaron van Meerten
George Politis
yanas
hristoterezov
Saúl Ibarra Corretgé
Ilya Daynatovich
damencho
Guus der Kinderen