Commit Graph

270 Commits

Author SHA1 Message Date
paweldomas 8b2ce21e1a fix(RN): bundle sound files in release build
On Android the files will be copied to the assets/sounds directory of
the SDK bundle on build time. To play the "asset:/" prefix has to be
used to locate the files correctly.

On iOS each sound file must be added to the SDK's Xcode project in order
to be bundled correctly. To playback we need to know the path of the SDK
bundle which is now exposed by the AppInfo iOS module.
2018-04-10 10:59:52 +02:00
Zoltan Bettenbuk 79b7e1641d Add pinch zoom functionality 2018-04-10 01:20:53 -05:00
Zoltan Bettenbuk decbcefbd4 [RN] Don't press on Conference in preparation for 'pinch to zoom'
TouchableWithoutFeedback and TouchableHighlight interfere with the
implementation of 'pinch to zoom' to come. We prepare for it by driving
the onClick/onPress handler(s) out of Conference, through LargeVideo and
ParticipantView into Video itself where the bulk of 'pinch to zoom' will
be implemented.
2018-04-10 01:20:52 -05:00
Zoltan Bettenbuk cb70c084b3 [RN] "The View is never the target of touch events"
In preparation for "pinch to zoom" support in desktop streams on mobile, make
certain Views not intervene in touch event handling. While the modification is
necessary for "pinch to zoom" which is coming later, it really makes sense for
the modified Views to not be involved in touching because they're used to aid
layout and/or animations and are to behave to the user as if they're not there.
2018-04-10 01:20:52 -05:00
Leonard Kim d93782af8a feat(new-toolbars): initial implementation 2018-03-27 00:54:30 -05:00
paweldomas 60e03e3dec feat: add join/leave sounds on mobile
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.
2018-03-13 16:57:28 -05:00
Lyubo Marinov cacc4bd769 [RN] Dynamically adjust LargeView's Avatar to available size (Coding style: comments, flow)
Flow caught an incorrect function call.
2018-02-13 09:58:43 -06:00
Saúl Ibarra Corretgé 1419247801 [RN] Dynamically adjust LargeView's Avatar to available size
When in PiP mode the LargeView will not be large enough to hold the avatar (for
those interested in the details, our avatar's size is 200, and in PiP mode the
app is resized to about 150).

In order to solve it, this PR refactors how the avatar style is passed along,
reducing it to a single "size" prop. With this only prop, the Avatar compononent
will compute the width, height and borderRadius, plus deal with some Android
shenanigans.

In addition, the LargeView component now uses DimensionsDetector to check its
own size and adjust the size prop passed to the Avatar component as needed.
2018-02-13 09:58:43 -06:00
Leonard Kim 7341c7bf84 ref(notifications): stop passing around Notifications component
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.
2018-02-12 17:53:29 -06:00
Leonard Kim 698ec1e2d7 Revert "feat(avatars): use initials service for getting images (#2312)"
There is more avatar work coming down the line for mobile,
which should also affect web, assuming the same getAvatarURL
helper will be used. As such, instead of continuing to
support the initials service and tweaking UI, revert to
make way for the future avatar work.

This reverts commit 2ea5ad68a5.
2017-12-28 14:17:33 -06:00
virtuacoplenny 2ea5ad68a5 feat(avatars): use initials service for getting images (#2312)
* feat(avatars): use initial service for getting images

* squash: capitalize and minor refactor of string concat
2017-12-21 13:36:00 -06:00
virtuacoplenny 28013f6ffa ref(avatars): remove Avatar.js (#2289)
* 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
2017-12-19 17:11:54 -06:00
Saúl Ibarra Corretgé 5640524647 [RN] Show an indication when connectivity problems occur
The video will switch to the avatar and be tinted with gray. On the large view,
a text message indicating the user has connectivity issues will be shown.
2017-12-19 09:10:58 -06:00
virtuacoplenny fe411398e3 fix(notifications): throttle and batch join notifications (#2182)
* 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
2017-11-21 11:38:40 -06:00
Lyubo Marinov 78bc8121ff [RN] Fix "Error: Provided an image that is available locally already." 2017-11-17 13:33:04 -06:00
yanas db71de97af Reactify mute remote participant (#2145)
* fix(remote-mute): Moves remote participant mute to react

* fix(translation): Removes unused strings

* [squash] Addressing comments
2017-11-09 09:23:17 -08:00
hristoterezov a4e7f3d992 ref(strophe): Remove and cleanup all strophe related code.
Everything strophe related is now handled in lib-jitsi-meet project.
2017-10-23 16:27:30 -05:00
Lyubo Marinov 8948c837d3 Coding style 2017-10-18 13:21:46 -05:00
Lyubo Marinov ce1a8e7567 [RN] Don't tell everyone we're called "me"
Recently/as part of the work on taking into account the user defined by
JWT, the local participant (on mobile) started telling the remote
participants that he/she had the display name "me". Obviously, that's
incorrect. Do not store the default display name in redux. While it may
be argues that redux is the place for all states, base/participants and
the name property of Participant is not meant to be that display name
because that is being sent to remote participants, the default name
needs to be internationalized, etc. So it's better to not store the
default display name at this time at all because it's not used by mobile
anyway and Web already deals with remote participants who don't share
their display names.
2017-10-18 13:15:49 -05:00
Lyubo Marinov 003eb68e28 Flow, coding style 2017-10-13 14:34:09 -05:00
paweldomas 8a4e6a7ec0 feat: override email, display name and avatar on mobile
Will override email, display name and avatar URL with the values
provided in 'context.user' structure of the JWT token.

Settings will no longer be used to retrieve local display name,
email and avatar URL. Now those values will be obtained from
the /features/base/participants Redux state.

fix(jwt/middleware): use const for default name

fix: wrong default display name on web

ref(base/participants): remove getDisplayName functions

ref(jwt): do not accept unknown user fields
2017-10-13 14:31:44 -05:00
Lyubo Marinov 2d73e9ace4 Flow, coding style 2017-10-09 10:39:31 -05:00
Lyubo Marinov dfebd692f3 eslint 4.8.0
ESLint 4.8.0 discovers a lot of error related to formatting. While I
tried to fix as many of them as possible, a portion of them actually go
against our coding style. In such a case, I've disabled the indent rule
which effectively leaves it as it was before ESLint 4.8.0.

Additionally, remove jshint because it's becoming a nuisance with its
lack of understanding of ES2015+.
2017-10-02 18:12:38 -05:00
Lyubo Marinov 4bf19d73fd [RN] Fix documentation comments
* Javadoc introduced @code as a replacement of <code> and <tt> which is
  better aligned with other javadoc tags such as @link. Use it in the
  Java source code. If we switch to Kotlin, then we'll definitely use
  Markdown.

* There are more uses of @code in the JavaScript source code than <tt>
  so use @code for the sake of consistency. Eventually, I'd rather we
  switch to Markdown because it's easier on my eyes.

* Xcode is plain confused by @code and @link. The Internet says that
  Xcode supports the backquote character to denote the beginning and end
  of a string of characters which should be formatted for display as
  code but it doesn't work for me. <tt> is not rendered at all. So use
  the backquote which is rendered itself. Hopefully, if we switch to
  Markdown, then it'll be common between JavaScript and Objective-C
  source code.
2017-10-01 01:35:19 -05:00
Lyubo Marinov 2e2129fa44 Import PropTypes from prop-types
Prepare for React 16.
2017-09-27 16:24:53 -05:00
Leonard Kim 31729d7949 feat(contact-list): convert to react
- Remove references to the model ContactList.
- Replace ContactListView with an empty element for attaching
  the React Component ContactListPanel, which has the same
  features as the old ContactListView.
- Create new selector for getting non-fake participants for
  ContactListPanel's props.
- Create a ParticipantCounter component to place in the contact
  list button. Previously ContactListView updated that but now
  it's a react component hooked into the participant state.
- Remove pub/sub that was used only by ContactListView.
2017-09-06 12:11:33 -05:00
Lyubo Marinov 6545a7a1bb Remove duplication 2017-09-01 23:55:25 -05:00
Saúl Ibarra Corretgé 531b638a8a [RN] Switch default avatars to meeples 2017-08-29 09:27:28 +01:00
Lyubo Marinov 2818520c8f [RN] Make react-native-img-cache optional at bundle time 2017-08-18 14:54:25 -05:00
Lyubo Marinov 131e5af01e [RN] Fix a strange import of a feature by itself 2017-08-18 14:52:41 -05:00
Lyubo Marinov c1fbbc4571 Reduce duplication 2017-08-16 16:28:39 -05:00
yanas 3d397a28e6 Updates default avatar image 2017-08-16 14:42:41 -05:00
virtuacoplenny 725d39ddcd feat(jitsipopover): convert to InlineDialog (#1804)
* 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
2017-08-14 10:02:58 -05:00
Leonard Kim f1f46e0af5 feat(pinning): move web pinning logic into redux
- 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
2017-08-11 10:43:35 +01:00
Lyubo Marinov 97832e0eef [RN] Prefetch remote avatar images 1/2 2017-08-03 13:45:41 -05:00
Lyubo Marinov 00e058d392 [RN] Cache avatars and provide a default in case load fails (2)
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.
2017-08-03 13:45:41 -05:00
Lyubo Marinov 504646fff0 Coding style 2017-08-03 13:45:41 -05:00
Saúl Ibarra Corretgé 122ebe48c7 [RN] Cache avatars and provide a default in case load fails
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.
2017-08-03 13:45:41 -05:00
virtuacoplenny c04ef05058 feat(presence): display status in thumbnail and large video (#1828)
* 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
2017-07-31 18:33:22 -05:00
Leonard Kim 955542f4a5 feat(speaker-status): update speaker status in redux
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.
2017-07-21 14:12:15 +02:00
virtuacoplenny 928181cd7a feat(display-name): convert to React (#1672)
* 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
2017-06-28 22:35:43 -05:00
Lyubo Marinov ca94563c51 [RN] Coding style
The files styles.js are used (pretty much) on React Native only and each
of them exports 1 name. Export it as default to cut down on source code.
2017-06-10 18:07:51 -05:00
Lyubo Marinov 718de31e04 [RN] Fix video in audion-only mode
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.
2017-06-10 18:07:51 -05:00
Lyubo Marinov 409255f056 [React] Cross-platform Components
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.
2017-06-06 00:11:39 -05:00
Lyubo Marinov ec454d1da0 Move ConferenceUrl.inviteURL into React and redux 2017-06-01 21:04:31 -05:00
Lyubo Marinov 4dc658c270 Fix 'Missing JSDoc comment  require-jsdoc' 2017-06-01 21:01:50 -05:00
Lyubo Marinov ec2e6525ac Fix jsdocs 2017-05-31 00:53:53 -05:00
Saúl Ibarra Corretgé 5304660e14 [RN] Polyfill Symbol 2017-05-26 16:37:22 -05:00
Lyubo Marinov bce1610794 Simplify, comply w/ coding style
Rename setStateProperties and setStateProperty to assign and set,
respectively. Inspired by Object.assign, _.assign, and _.set.
2017-04-22 17:57:08 -05:00
Leonard Kim a82bc1df64 fix: honor updates of the local user role before conference join
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.
2017-04-18 14:14:04 -05:00
Lyubo Marinov 35ba6cef4e React (Native) optimizations/performance 2017-04-10 19:16:35 -05:00
Saúl Ibarra Corretgé 50fea44ce2 [RN] Use rounded avatars in the film strip
Also move (native) avatar style to film-strip styles, since  that's where it
applies. This is analogous to how the large-view avatar is styled.
2017-04-10 19:13:40 -05:00
Lyubo Marinov 95667ef98e Revert "[RN] Use rounded avatars in the film strip"
This reverts commit 739298c782.
2017-04-09 12:58:27 -05:00
Saúl Ibarra Corretgé 739298c782 [RN] Use rounded avatars in the film strip 2017-04-09 11:55:57 -05:00
Lyubo Marinov 0e9509ae9b Comply w/ coding style 2017-04-05 04:01:57 -05:00
Saúl Ibarra Corretgé 618dedc58e [RN] Use participant connection status events instead of last N
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.
2017-04-05 01:41:46 -05:00
Saúl Ibarra Corretgé 623b7a8d6f [RN] Show avatar if a participant is not in last N 2017-04-05 01:21:23 -05:00
hristoterezov 4ab4aa04da fix(avatar): Avatar properties not updated before local user join
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.
2017-03-29 10:23:07 -05:00
Lyubo Marinov e6f906b9ca [RN] Fix undefined.avatarID in ParticipantView 2017-03-08 17:05:55 -06:00
hristoterezov d74e43ddcc [RN] fix(Avatar): Match the implementation for web 2017-03-08 13:21:34 -06:00
Lyubo Marinov 23ddce122b Comply w/ coding style 2017-03-07 21:54:37 -06:00
hristoterezov 814bd26c07 feat(Avatar): Implement Avatar for web 2017-03-07 21:54:37 -06:00
hristoterezov 9ea224412d ref(avatar): Move Avatar and Participant view to base/participants 2017-03-02 16:57:43 -06:00
Lyubomir Marinov 55a8b44224 Consistent middleware and reducer imports 2017-02-10 11:04:40 -06:00
Lyubomir Marinov 349c04d8d1 Consistent naming of functions
Until we make a decision on access modifier hints and adopt a respective
coding style, consistency is king.
2017-01-28 17:28:13 -06:00
Lyubomir Marinov 9f93ce86be [RN] Simplify the source code 2016-12-11 22:21:51 -06:00
Lyubomir Marinov daf56455a5 Use Symbol for Redux action types to prevent conflicts 2016-12-11 22:21:51 -06:00
Lyubomir Marinov 02e3f6b3a2 Reduce the complexity of the source code 2016-12-06 15:42:06 -06:00
Lyubomir Marinov 4d335e086b Reduce the number of unnecessary Redux state changes 2016-11-04 13:28:47 -05:00
Lyubomir Marinov d55e0f70d9 Import jitsi/jitsi-meet-react#2f23d98
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.
2016-10-12 10:31:52 -05:00