Implement a React Component which displays children as an overlay of
local video. The WelcomePage implemented such a component inside of it
among other WelcomePage-specific logic so I split
LocalVideoTrackUnderlay out of it. The new Component is used on the
BlankPage which may be displayed in the future not only when the
WelcomePage is disabled but also when there are long running network
requests, for example.
This only helps iff there is a short transient network error which prevents the
configuration from being loaded. In such case, use the cached version in
localStorage, which may not match the shard, but it's (probably!) better than
nothing.
In case there is no Internet connectivity, an error will be produced as soon as
the XMPP connection is attempted anyway.
It's built on top of React Native's AsyncStorage. They have differing APIs, so
we implement a synchronous API on top of an asynchronous one. This is done by
being optimistic and hoping that operations will happen asynchronously. If one
such operation fails, the error is ignored and life goes on, since operations
are performed in the in-memory cache first.
Note to reviewers: LocalStorage.js lacks Flow annotations because indexable
class declarations are not yet supported:
https://github.com/facebook/flow/issues/1323 and yours truly couldn't find a way
to make the required syntax work without making it unnecessarily complex.
This patch loads the config later than we used to, that is, only once we
know the room the user is about to join.
Due to architectural limitations in lib-jitsi-meet, it needs to be
initialized with a configuration in order to properly function. This is
unfortunate because we need to create a video track in the welcome page,
but don't know the room (hence no config) yet. In order to circumvent
this problem an empty configuration is used, which is later swapped with
the appropriate one, once loaded.
Some interesting side-effects of this change are a perceived speed
increase when the app starts or a conference is hangup. They are both
due to the fact that no config needs to be fetched from a remote server
in those cases.
In order to load the configuration from the shard that will actually
host the conference, it's imperative that we add the room= query
parameter:
https://meet.jit.si/config.js?room=example
This implies a departure from our current model, where the config is
discarded if the domain for the next conference is different, but kept
otherwise.
* feat(filmstrip): show thumbnails with toolbar and on hover
* squash: reduce verbosity of logic for when to display
* squash: remove check for fake participant
Before fake participant (youtube video) would make the filmstrip
always displayed. However, youtube videos already dock the
toolbar, so filmstrip will remain displayed, so the check is
redundant.
* squash: change mouse hover listener targets
* feat(analytics): move to React
The analytics handlers have been moved to JitsiMeetGlobalNS, so now they are
stored in `window.JitsiMeetJS.app.analyticsHandlers`.
The analytics handlers are re-downloaded and re-initialized on every
lib-jitsi-meet initialization, which happens every time the config is changed
(moving between deployments in the mobile app).
* Adds legacy support for old analytics location.
We have already made the implicit decision not to pursue what the
comment describes. If we ever revisit it, it probably won't be handled
where the comment is anyway.
The torture tests were looking for the anchor tag within each
button. However, that anchor could get blown away from a react
re-render. So instead, expose a way for the torture tests
to find the root node of the button.
I'm not saying that the two commits in question were wrong or worse than
what I'm offering. Anyway, I think what I'm offering brings:
* Compliance with expectations i.e. the middleware doesn't compute the
next state from the current state, the reducer does;
* Clarity and/or simplicity i.e. there's no global variable (reqIndex),
there's no need for the term "index" (a.k.a "reqIndex") in the redux
store.
* By renaming net-interceptor to network-activity feels like it's
preparing the feature to implement a NetworkActivityIndicator React
Component which will take on more of the knowledge about the specifics
of what is the network activity redux state exactly, is it maintained by
interception or some other mechanism, and abstracts it in the feature
itself allowing outsiders to merely render a React Component.
Works only for XHR requests, which is the only network request mobile performs
(WebRTC traffic aside). The fetch API is implemented on top of XHR, so that's
covered too.
Requests are kept in the redux store until they complete, at which point they
are removed.
* ref(1-on-1): move remote visibility to a selector
Derive whether or not remote videos should display using a selector
to look across different states. A selector was chosen over using
memoized selectors (reselect) or subscribers as a first step
approach, avoiding additional mutations caused by a subscriber
updating the filmstrip state and avoiding additional api overhead
introduced by reselect.
* rename selector
* ref(recording): convert recording label to react
- Create a RecordingLabel component for displaying the current
recording state, as reflected in the redux store. This is
needed for 1-on-1 mode to be completely in redux.
- Update the store with the recording state so RecordingLabel
can update itself.
- Remove previous logic for updating the non-react label, which
includes event emitting for filmstrip visibility changes,
as RecordingLabel is hooked into redux updates.
* ref(recording): use status and type constants from lib
* make label really dumb, move logic back to Recording
Create empty elements within InlineDialog content that can be
used to bridge mouse movement from the InlineDialog trigger to
the InlineDialog content. The empty elements are positioned
absolute so they can break out of the InlineDialog container
and not affect popper's position calculations.
I see it as the first step in simplifying the route navigate of the
JavaScript app by removing BlankWelcomePage from _getRouteToRender. From
a faraway point of view, the app is at the route at which it is not in a
conference. Historically, the route was known as the Welcome page. But
mobile complicated the route by saying that actually it may not want to
see the room name input and join button.
Additionally, I renamed BlankWelcomePage to BlankPage because I don't
think of it as a WelcomePage alternative but rather as a more generic
BlankPage which may be utilized elsewhere in the future.
I plan for the next steps to:
* Merge Entryway, _interceptComponent, and _getRouteToRender in one
React Component rendered by AbstractApp so that the whole logic is in
one file;
* Get rid of RouteRegistry and routes.
When do we need tracks?
- Welcome page (only the video track)
- Conference (depends if starting with audio / video muted is requested)
When do we need to destroy the tracks?
- When we are not in a conference and there is no welcome page
In order to accommodate all the above use cases, a new component is introduced:
BlankWelcomePage. Its purpose is to take the place of the welcome page when it
is disabled. When this component is mounted local tracks are destroyed.
Analogously, a video track is created when the (real) welcome page is created,
and all the desired tracks are created then the Conference component is created.
What are desired tracks? These are the tracks we'd like to use for the
conference that is about to happen. By default both audio and video are desired.
It's possible, however, the user requested to start the call with no
video/audio, in which case it's muted in base/media and a track is not created.
The first time the app starts (with the welcome page) it will request permission
for video only, since there is no need for audio in the welcome page. Later,
when a conference is joined permission for audio will be requested when an audio
track is to be created. The audio track is not destroyed when the conference
ends. Yours truly thinks this is not needed since it's a stopped track which is
not using system resources.
Iterate over objects and copy over primitives and arrays
instead of using _.merge, as merge will not replace a config
entry completely. For arrays in a target object, the arrays
will have its indices replaced. This means if a source array
is empty, the target array will be left alone. Similarly,
if the target array is longer than a source array, there
will be indices not touched in the target array.
* ref: video muted state
Get rid of 'videoMuted' flag in conference.js
* ref: audio muted state
Get rid of 'audioMuted' flag in conference.js
* fix(conference.js|API): early audio/video muted updates
* ref(conference.js): rename isVideoMuted
Rename isVideoMuted to isLocalVideoMuted to be consistent with
isLocalAudioMuted.
* doc|style(conference.js): comments and space after if
* ref: move 'setTrackMuted' to functions
* fix(tracks/middleware): no-lonely-if
* ref(features/toolbox): get rid of last argument
* ref(defaultToolbarButtons): rename var
- Remove non-redux paths for hiding and showing remote videos.
- Hook web filmstrip to redux to know when to hide remote videos.
This works, even though VideoLayout is handling RemoteVideo
appending, because react is only monitoring filmstrip's declared
JSX which does not change except for attributes (css classes).
Deep/universal linking now utilizes loadURL (when possible). But loadURL
is imperative in the native source code while its JavaScript counterpart
i.e. React App Component prop url is declarative. So there's the
following bug: open a URL, leave the conference (by tapping the hangup
button, for example), and then opening the same URL actually leaves you
on the Welcome page (if enabled; otherwise, a black screen).
The implementation has a flow though: opening the same URL twice in a
row without an intervening leave will leave the first opening and join
the new opening. Which can be improved by not leaving and joining if the
conference is joined, joining, an not leaving. But that can be done
separately as an improvement independent of the current implementation
details.
As https://facebook.github.io/react/docs/typechecking-with-proptypes.html
says, React.PropTypes have moved into the npm package prop-types since
React v15.5. I've already failed to update certain devDependencies
because they mandate the use of prop-types so I'd rather we (gradually
at least) move to prop-types rather than face a lot of work later on.
* fix(quality-slider): prevent resizing by making p2p warning hidden
Instead of removing and appending the p2p warning, make it always
appended but toggle visibility so it always takes up space. This
should prevent resizing when the warning appears. Margin and
padding were adjusted to account for the empty space displayed
by a hidden p2p warning.
* let vertical size change
* ref(invite): use AtlasKit for invite modal buttons and inputs
- Convert button to AK Button.
- Convert inputs to AK FieldText.
* remove noop, replace with custom empty func
* feat(small-video): use InlineDialog for stats and remote menu
- Remove JitsiPopover and use InlineDialog instead.
- Bring the remote menu icon into react.
- Make vertical filmstrip position:fixed so popper (AtlasKit
dependency) sets InlineDialogs and eventually tooltips to
position:fixed.
* ref(remote-menu): hook KickButton to redux
* ref(remote-menu): hook MuteButton to redux
* modify padding, toggle dialogs
* pixel push margins to align dialogs, adjust padding of dialogs
* add comment about margin for dialog, add file I forgot
* modify indicator markup so the icon can be moved down while trigger stays at top of toolbar
- Re-use the native redux pinning implementation for web
- Remove pinning logic from conference.js
- To the native pinning add a check for sharedVideo so
youtube videos do not send a pin event
- Add shared videos as a participant to enable pinning and
so they can eventually get added to the filmstrip
- Emit UIEvents.PINNED_ENDPOINT from middleware
* feat(quality-slider): initial implementation
- Add new menu button with an Inline Dialog slider for
selecting received video quality.
- Place P2P status in redux store for the Inline Dialog
to display a warning about not respecting video quality
selection.
- Respond to data channel open events by setting receive
video quality. This is for lonely call cases where a
setting is set before the data channel is open.
- Remove dropdown menu from video status label and clean
up related js and css.
* first pass at addressing feedback
- Move VideoStatusLabel to video-quality directory.
- Rename VideoStatusLabel to VideoQualityLabel.
- Open VideoQualitydialog from VideoQualityLabel.
- New CSS for making VideoQualityLabel display properly.
- Do not render VideoQualityLabel in filmstrip only instead of hiding with css.
- Remove tooltip from VideoQualityLabel.
- Show LD, SD, HD labels in VideoQualityLabel.
- Remove action SET_LARGE_VIDEO_HD_STATUS from conference.
- Create new action UPDATE_KNOWN_LARGE_VIDEO_RESOLUTION in large-video.
- Move VideoQualityButton into video-quality directory.
- General renaming (medium -> standard, menu -> dialog).
- Render P2P message between title and slider.
- Add padding to slider for displacement caused by P2P message's new placement.
- Fix display issue with VideoQualityButton displaying out of line in the
primary toolbar.
* second pass at addressing feedback
- Fix p2p inline message color
- Force labels to break on words
- Resolve rebase issues, including only dispatching quality
update on change. Before there was double calling of dispatch
produced by an IE11 workaround. This breaks now when setting
audio only mode to true twice.
- Rename some instances of quality to definition
* rename to data channel opened
* do not show p2p in audio only
* stop toggle audio only icon automatically
* remove fixme about toolbar button
* find closest resolution for label
* toggle dialog on button click
* redo last commit for both button and label
* ref(base/conference): add tracks before join
Sometimes it will be suboptimal to add local tracks to the conference,
after the room has been joined. It may slow down the session initiation
process by having to send unnecessary 'source-add' notifications.
* squash: fix typos/comments
* feat(feedback): convert to react and redux
- For styles, remove "aui-dialog2" nesting so existing styles
can be reused.
- Remove Feedback.js and replace with calls to redux for state
storing and accessing.
- Add dispatching to FeedbackButton instead of relying on jquery
clicking handling so the button can be hooked into redux.
* address feedback
* remove calling to not show feedback for recorder and filmstrip
Simplify the code by using a bitfied instead of a couple of boolean flags. This
allows us to mute the video from multiple places and only make the unmute
effective once they have all unmuted.
Alas, this cannot be applied to the web without a massive refactor, because it
uses the track muted state as the source of truth instead of the media state.
Currently lib-jitsi-meet looks there in case the `anonymousdomain` config option
was specified.
While this commit alone doesn't add support for authenticated deployments, it
avoids a failure if `anonymousdomain` was set, regardless of authentication being
turned on or not.
Fixes: https://github.com/jitsi/jitsi-meet/issues/1858
Refactors the previous "[RN] Cache avatars and provide a default in
case load fails" for the purposes of simplification but also modifies
its functionality at the same time. For example:
- Always displays the default avatar immediately which may be seen if
the remote avatar needs to be downloaded.
- Does not use random colors.
- Uses a default avatar image which is not transparent and ugly but at
least it's the same image that's used on Web. I've started talks to
have images/avatar2.png replaced with a transparent and beautiful
so that will land later on and we'll see the automagic colors in all
their glory then.
Avatars are cached to the filesystem and loaded from there when requested again.
The cache is cleaned after a conference ends and on application startup
(defensive move).
In addition, implement a fully local avatar system, which is used as a fallback
when loading a remote avatar fails. It can also be forced using a prop.
The fully local avatars use a user icon as a mask and apply a background color
qhich is picked by hashing the URI passed to the avatar. If no URI is passed a
random color is chosen.
A grace period of 1 second is also implemented so a default local avatar will be
rendered if an Avatar component is mounted but has no URI. If a URI is specified
later on, it will be loaded and displayed. In case loading the remote avatar
fails, the locally generated one will be used.
- Create a notification component for displaying a toggle.
- Create an action for showing the component if allowed by
the local storage setting and for saving the setting to
local storage.
- Remove all notifications having a timeout by default so the
device error notification must be dismissed manually.
- Split the camera and mic error dialog into two separate
notifications.
* 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
Hides the UI component showing dialout codes and uses the dial input without validating it.
Skips printing error when dial-in numbers is not configured.
- Swap the telephone input with FieldText.
- Swap the dropdown trigger input with FieldText for styling
consistency with the telephone input.
- Wrap the dropdown trigger so it can be modified with jitsi css.
- Use flexbox to have the trigger and input align horizontally
but have the input take up width if the trigger is not displayed.
* feat(notifications): implement a react/redux notification system
* squash into impl explicit timeout, style
* ref(notifications): convert toastr notifications to use react
* ref(toastr): remove library
* squash into conversion: pass timeout
* squash into clean remove from debian patch
Make toolbar's microphone button enabled whenever there are any
'audioinput' devices available and allow to add audio during
the conference even if microphone permissions were denied on startup.
Whatever I've tried so far ends up failing in really weird ways, so let's admit
defeat, for now. Destroy containers only on Android.
This shall be revisited when we update RN to version >= 0.43 and we have
"display: 'none'" available.
Web's ExternalAPI accepts an object with properties as one of its
constructor arguments and from which it generated a URL. Mobile's
JitsiMeetView.loadURLObject is supposed to accept pretty much the same
object.
Introduces loadURLObject in JitsiMeetView on Android and iOS which
accepts a Bundle and NSDictionary, respectively, similar in structure to
the JS object accepted by the constructor of Web's ExternalAPI. At this
time, only the property url of the bundle/dictionary is supported.
However, it allows the public API of loadURLObject to be consumed. The
property url will be made optional in the future and other properties
will be supported from which a URL will be constructed.
When a Container is not visible there is no need for it to react to touch
events, thus avoid wrapping it in a touch component.
In addition, simplify the style needed for hiding the component. Moving the view
out of the window boundaries no longer works on RN 0.42 on iOS. Seting the size
to 0 works well on both platforms, but in the future (when we upgrade to RN >=
0.43) we should switch to display: none:
4d69f4b2d1
Because on web video track is stored both in redux and in 'localVideo'
field, video is attempted to be unmuted twice when turning off the audio
only mode. This will crash the app with 'unmute operation is already in
progress'. This commit will prevent from taking action from the web
world if the video track already exists and will make the redux side
rollback unmuted status in case unmute fails.
In another installment of "how on earth?!", using a 1px border instead of a
0.2px border fixes view clipping on a device where it didn't work before
(Moto X Play).
Observations:
- When nothing was rendered, rotating the device made the buttons show up, this
makes me think the Surface is not properly composited with the toolbar view
for some reason. Why this happens in some devices and not in others remains a
mistery.
Other approaches attempted:
- Setting View.collapsed to false so it will remain in the view hierarchy. It
made no effect.
- Setting View.needsOffscreenAlphaCompositing to true. It made no effect.
Just like before, I came up with this workaround by accident, but couldn't find
another way, so here we go again.
This essentially reverts
023359b9d2
In the filmstrip we keep a container full of thumbnail views. Destroying these
every time we want we want to hide it is costly, as new renderers have to be
recreated, and they lack context, so there is an increased chance for "black
thumbnails".
With the upgarde of @atlaskit/icon to 7.0.0, the size prop
essentially became required to maintain its appearance in the
jitsi app, otherwise it'll unexpectedly try to take up the
available space and cause minor display issues.
The speakerStatus field already exists as part of the objects
in the participant reducer. When the library updates the
connection status of a user, plumb that update through to redux.
Instead of passing stats through UI then VideoLayout then the
SmallVideo, pass stats directly to what uses it--ConnectionIndicator.
This also bypasses adding the stats to the store, as they do not
seem to be something that needs to be shared or stored app-wide
just yet.
The end goal of this patch was to avoid opening the camera when there is no
welcome page.
In order to achieve this, the logic for creating the local tracks was
refactored:
Before this patch local tracks were created when lib-jitsi-meet was initialized,
and destroyed when it was deinitialized. As a side note, this meant that when a
conference in a non-default domain was joined, local tracks were destroyed and
recreated in quick succession.
Now, local trans are created and destroyed based on what the next route will be,
and this happens when the target room has been decided. This allows us to create
local tracks the moment we need to render any route, and destroy them when there
is no route to be rendered. As an interesting byproduct, this refactor also
avoids the destruction + recreation of local tracks when a conference in a
non-default domain was left.
* 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.
* 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.
For images < 80 of size forder radius doesn't work properly (it looks like a
square with rounded corders), however, using a duble sized radius does the
trick. Go figure.
The Device Selection modal consists of:
- DeviceSelection, an overly smart component responsible for
triggering stream creation and cleanup.
- DeviceSelector for selector elements.
- VideoInputPreview for displaying a video preview.
- AudioInputPreview for displaying a volume meter.
- AudioOutputPreview for a test sound output link.
Store changes include is primarily storing the list of
available devices in redux. Other app state has been left
alone for future refactoring.
We seemed to be using the names "film strip" and "filmstrip" (and,
consequently, their source code-conscious forms such as film-strip,
FilmStrip, etc.) In order to comply with our coding style which requires
a consistent one name for a given abstraction, choose one name and
rename the uses of the other name.
Wikipedia has a definition of a "filmstrip", I couldn't find a "film
strip". I guess our abstraction can be seen as what's described there.
When I google "film strip", I get results about "filmstrip" at the top.
That's why I chose "filmstrip".
Certain uses of "film strip" such as interfaceConfig.filmStripOnly and
in the external API I left untouched in an attempt to preserve
compatibility.
I wasn't sure whether CSS was tangled in compatibility so I made a
choice and renamed there was well.
When a conference is to happen in a domain which is not the defaut, its config
is loaded and set. As part of this process, lib-jitsi-meet is disposed. Because
disposing is asynchronous, events happen in this sequence:
- set new config
- dispose lib (which effectively wipes the config)
- init lib
This results in the library to be initialized without the loaded config, which
was lost. This commit fixes that by delaying setting the config and
re-initializing the library until it was disposed.
The functionality to use the react-native-webrtc custom API for fast switching
cameras was moved to JitsiLocalTrack in lib-jitsi-meet. Use that.
Ref: https://github.com/jitsi/lib-jitsi-meet/pull/444
The behavior can be triggered with the toggleAudioOnly action, which is
currently fired with a button.
The following aspects of the conference will change when in audio only mode:
- local video is muted
- last N is set to 0 (effectively muting remote video)
- full-screen mode is exited
- audio mode is set to "audio chat" (default output is the earpiece)
- the wake lock is disengaged
One aspect not handled in this patch is disabling the video mute button while in
audio only mode. The user should not be able to turn back video on in that case.
They better represent if a participant has video available or not. There are
cases when even a participant in the last N set would not have video because it
disconnected momentarily, for example.
Use the curstom _switchCamera API provided by react-native-webrtc to toggle the
camera instead of destroying the current track and creating a new one.
_switchCamera is implemented at a low level, so the track perceives no changes,
thus being a lot faster and less involved since the capturer doesn't need to be
destroyed and re-created.
In addition, don't mirror the video for the back camera.
Ref: https://github.com/oney/react-native-webrtc/pull/235
When a new local video track is created an associated video capturer is created
for it. The cause for the freezes seems to be creating mutliple tracks (which
come with a video capturer each). Fix this by first disposing of the previous
video track before creating the new one.
Ref:
https://github.com/oney/react-native-webrtc/issues/209#issuecomment-281482869
Lib-jitsi-meet does not really implement isScreenSharing. Besides,
getCameraFacingMode will already make sure that the video track does not
represent a desktop stream.
It got broken while rewriting the Web toolbar in React Toolbox. There is
a problem with the toolbars and how we construct the intialState of the
buttons. The _getInitialState() in the toolbox reducer gets the list of
buttons from interfaceConfig, but in fact interfaceConfig is meant to be
overriden in several very important cases. One of the cases being the
external API, which we use in several projects in production.
JSDoc comments didn't follow the ESLint rule for properly formatted
sentences.
BTW, I'm not blind to the fact that PasswordRequiredPrompt and
RoomLockPrompt participated in a birthing of source code through
copy+paste. (If we do not copy+paste, we will not have to fix one and
the same source code such as comments multiple times.)
https://github.com/jitsi/jitsi-meet/pull/1397 (React Toolbar) is huge at
the time of this writing. In order to reduce it, I'm extracting changes
not directly related to React-ifying the Toolbar such as added jsdocs
and source code formatting.
This is in preparation for an upcoming "audio only mode" feature. Setting last N
will also be required for it, so this patch factors out the action and makes it
public so other modules can reuse it.
In addition, if the value is set to undefined the configured default value (or
-1 if absent) is picked.
Replaces changeAvatarID, changeAvatarURL and changeEmail with
participantUpdated action.
participantUpdated can be fired for local user without id. This
fixes the problem with updating the local user before the user
join the conference which results in fix for failing to execute
commands for avatarID, avatarURL and email right after the iframe
api creates the iframe with Jitsi Meet.
In this case makes more sense to have overlay frame included in every overlay instead
of abstract class that implements the overlay frame and have to be extended by every
overlay. In addition, mapStateToProps isn't working well with inheritance.
The error raised by JitsiMeetJS.init() is already in the state of
features/base/lib-jitsi-meet so it's not a good design to store the same
error in the state of features/unsupported-browser.
Fixes an issue where immersive mode would be enabled when coming back from the
background on the welcome screen.
Re-fixes c57e713, which was not correct.
On RN we don't use the global APP object, so don't save the store there unless
it's defined, which is the case in the current web version. Also, check for
undefined explicitly, since a "if (!APP)" check will throw a ReferenceError.
The mobile app remembers the domain which hosted the last conference. If
the user specified a full URL first and specified a room name only the
second time, it was not obvious that the second conference would be
hosted on the domain of the first conference.
Looks like Android gets confused as to what surface to blit when we hide or
show toolbars. Setting a border on the container, seems to force the entire
area to blit properly.
Other attempted approaches, with no success:
- zIndex of -100
- width and height of 0
- opacity of 0 and setting 'disabled' on touch containers
This patch applies the workaround in the welcome page and conference containers.
Lib-jitsi-meet uses jQuery's .append method to manipulate Jingle. The
method in question invokes the getter and setter of Element.innerHTML.
Unfortunately, xmldom which we use in React Native to polyfill DOM does
not polyfill Element.innerHTML. So polyfill it ourselves.
Turns out React Native's timers (setTimeout / setInterval) don't run while the
app is in the background: https://github.com/facebook/react-native/issues/167
This patch replaces the global timer functions with those from the
react-native-background-timer package, which work in the background.
These timers won't magically make an application work in the background, but
they will run if an application already happens to run in the background. That's
our case while in a conference, so these timers will run, allowing XMPP pings to
be sent and the conference to stay up as long as the user desires.
- Use 1 name for 1 abstraction. Instead of useFullScreen and enabled use
fullScreen.
- Comments are correct English sentences so no double spaces between
senteces, no capitalization of the work On midsentence.
- Write as little source code as possible if readability is preserved.
- Utilize Facebook's Flow.
- The name of a private function must start with _ and the jsdoc should
state that the function is private.
The implementation varies across platforms, with the same goal: allow the app to
use the entire screen real state while in a conference.
On Android we use immersive mode, which will hide the status and navigation bars.
https://developer.android.com/training/system-ui/immersive.html
On iOS the status bar is hidden, with a slide effect.
The desired behavior of the button 'Start a conference' / 'Join the
conversation' is to launch the mobile app if installed; otherwise, do
nothing i.e. continue to display UnsupportedMobileBrowser.
Anyway, we may change our minds about allowing the user to continue in a
supported mobile browser so preserve the source code that enables that
but give it more appropriate naming.
The files react/index.native.js and react/index.web.js ended up having
very similar source code related to initializing the Redux store. Remove
the duplication.
Additionally, I always wanted the App React Component to be consumed
without the need to provide a Redux store to it.
Simplify the source code (with the idea that source code which does not
exist does not have to be maintained).
Additionally, apply modifications to have the source code comply with the coding
style.
Overall, prepare saghul:audio-mode for merge into jitsi:master.
Recently, we reimplemented the Welcome page in React. Unfortunately, we
broke the checkbox that enables/disables the Welcome page and it would
allow checking but wouldn't allow unchecking.
Recently, we reimplemented the watermarks in React. Unfortunately, we
didn't take into account film strip-only mode.
Additionally, we duplicated watermark-related source code on the Welcome
and Conference pages.
A bug was discovered in d17cc9fa which would raise a failure to push
into the browser's history if a base href was defined. Fix the failure
by removing react-router. Anyway, the usage of react-router was
incorrect because the app must hit the server infrastructure when it
enters a room because the server will choose the very app version then.
The React-based rewrite looks whether there's a room name (in the
window's location) in order to choose between WelcomePage and
Conference. But app.js expects Conference to be rendered before it
builds a room name if WelcomePage is disabled and there's no room name.
A quick and dirty workaround is to render Conference within WelcomePage
so that the rendered result closely resembles index.html before the
React-based rewrite.
Don't use Array.prototype.sort() because (1) it operates in place and,
thus, mutes the Redux state and (2) it is not necessarily stable and,
thus, unnecessarily shuffles the thumbnails.
The audio levels are gathered by lib-jitsi-meet via polling of
RTCPeerConnection.getStats() which is very slow on Android. Since the
mobile app makes no use of audio levels, it is easiest to disable them
for now in order to not penalize the app.
The toolbar's mute buttons depict respective features/base/media states.
However, (un)muting is practically carried out by features/base/tracks.
When the mobile app enters a conference configured to invite the joining
participant to mute themselves, the tracks would be muted but the
toolbar's mute buttons would not reflect that.
Bundle our custom icon font jitsi.ttf in the Android app (which we
already do for the iOS app).
Additionally, remove icon font files which are not in use.
An error was discovered and fixed by GitHub user blackneck in
jitsi/jitsi-meet PR #1017. The faulty source code was a piece of
duplication though. Remove the source code duplication there to reduce
the risks of bugs.
jitsi/lib-jitsi-meet#66b601e disabled the execution of Temasys'
adapter.screenshare.js on browsers on which we don't use Temasys such as
React Native. Henceforth, no Temasys workarounds are necessary on React
Native.
As a step toward merging jitsi-meet-react with jitsi-meet to share as
much source code as possible between mobile and Web, merge the part of
jitsi-meet-react's source tree which supports mobile inside the
jitsi-meet source tree and leave jitsi-meet-react's Web support in the
source code revision history but don't have it in master anymore because
it's different from jitsi-meet's Web support. In other words, the two
projects are mechanically merged at the file level and don't really
share source code between mobile and Web.
As an intermediate step on the path to merging jitsi-meet and
jitsi-meet-react, import the whole source code of jitsi-meet-react as it
stands at
2f23d98424
i.e. the lastest master at the time of this import. No modifications are
applied to the imported source code in order to preserve a complete
snapshot of it in the repository of jitsi-meet and, thus, facilitate
comparison later on. Consequently, the source code of jitsi-meet and/or
jitsi-meet-react may not work. For example, jitsi-meet's jshint may be
unable to parse jitsi-meet-react's source code.
Lyubo Marinov
Saúl Ibarra Corretgé
virtuacoplenny
Дамян Минков
hristoterezov
Saúl Ibarra Corretgé
bbaldino
Paweł Domas
yanas
Aaron van Meerten
George Politis
Ilya Daynatovich
Guus der Kinderen
Любомир Маринов
Lyubomir Marinov
Ilya Daynatovich
Alexander Chernoshej