Commit Graph

432 Commits

Author SHA1 Message Date
Saúl Ibarra Corretgé b3683068d4 [RN] Add Picture-in-Picture support
This only works automatically on Android >= 8. On other platforms / versions, it
relies on the SDK user on implementing a "reduced UI" mode and reacting to the
"request PIP" delegate method.
2018-02-23 11:21:25 -06:00
Lyubo Marinov a370a88d19 [RN] Add ability to enable /disable the toolbox (Coding style: comments, consistency) 2018-02-12 11:53:42 -06:00
Saúl Ibarra Corretgé 7153d94dad [RN] Add ability to enable /disable the toolbox 2018-02-12 11:52:54 -06:00
Lyubo Marinov c9d8b5c827 Finally! Let there be... responsive-ui!
We started on the way to responsive UI and its design with aspect ratio
and keeping the filmstrip on the short side of the app's visible
rectangle.

Shortly, we're going to introduce reduced UI for Picture-in-Picture. And
that's where we'll need another dimensions-based detector akin to the
aspect ratio detector.

While the AspectRatioDetector, the up-and-coming ReducedUIDetector, and
their base DimensionsDetector are definitely separate abstractions and
implementations not mixed for the purposes of easy extensibility and
maintenance, the three of them are our building blocks on top of which
we'll build our responsive UI.
2018-02-06 15:53:27 -06:00
bgrozev 090f2f9ccb Restructures the analytics events (#2333)
* ref: Restructures the pinned/unpinned events.

* ref: Refactors the "audio only disabled" event.

* ref: Refactors the "stream switch delay" event.

* ref: Refactors the "select participant failed" event.

* ref: Refactors the "initially muted" events.

* ref: Refactors the screen sharing started/stopped events.

* ref: Restructures the "device list changed" events.

* ref: Restructures the "shared video" events.

* ref: Restructures the "start muted" events.

* ref: Restructures the "start audio only" event.

* ref: Restructures the "sync track state" event.

* ref: Restructures the "callkit" events.

* ref: Restructures the "replace track".

* ref: Restructures keyboard shortcuts events.

* ref: Restructures most of the toolbar events.

* ref: Refactors the API events.

* ref: Restructures the video quality, profile button and invite dialog events.

* ref: Refactors the "device changed" events.

* ref: Refactors the page reload event.

* ref: Removes an unused function.

* ref: Removes a method which is needlessly exposed under a different name.

* ref: Refactors the events from the remote video menu.

* ref: Refactors the events from the profile pane.

* ref: Restructures the recording-related events.

Removes events fired when recording with something other than jibri
(which isn't currently supported anyway).

* ref: Cleans up AnalyticsEvents.js.

* ref: Removes an unused function and adds documentation.

* feat: Adds events for all API calls.

* fix: Addresses feedback.

* fix: Brings back mistakenly removed code.

* fix: Simplifies code and fixes a bug in toggleFilmstrip

when the 'visible' parameter is defined.

* feat: Removes the resolution change application log.

* ref: Uses consistent naming for events' attributes.

Uses "_" as a separator instead of camel case or ".".

* ref: Don't add the user agent and conference name

as permanent properties. The library does this on its own now.

* ref: Adapts the GA handler to changes in lib-jitsi-meet.

* ref: Removes unused fields from the analytics handler initializaiton.

* ref: Renames the google analytics file and add docs.

* fix: Fixes the push-to-talk events and logs.

* npm: Updates lib-jitsi-meet to 515374c8d383cb17df8ed76427e6f0fb5ea6ff1e.

* fix: Fixes a recently introduced bug in the google analytics handler.

* ref: Uses "value" instead of "delay" since this is friendlier to GA.
2018-01-03 13:24:07 -08:00
Leonard Kim e217c172f8 ref(toolbar): re-wrap buttons for torture tests
The inline classes for the toolbars were re-arranged
to fix non-rounded corners in the always-on-top window's
toolbar. However, those classes were also used by the
torture tests as a way to find stable elements that will
not get blown away by a react re-render. So re-wrap the
buttons with a div that will not get blown away,
add back the inline classes to those divs, and change
the CSS to round the corners in the always-on-top
window's toolbar.
2017-12-26 16:08:40 -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
virtuacoplenny 9b67e796bd ref(analytics): centralize all event names (#2272)
* ref(analytics): centralize all event names

* squash: fix typo and alpha ordering

* squash: rename file to AnalyticsEvents to parallel lib-jitsi-meet
2017-12-11 12:48:32 -06:00
hristoterezov d79995e14c fix(aot): Toolbar styles (#2252)
Rounded corners on the first and last buttons. Size of the hangup button
on hover.
2017-12-04 20:23:51 -08:00
Lyubo Marinov d8bc26a8ea Upgrade NPM dependencies/packages: ESLint 2017-12-04 00:21:01 -06:00
paweldomas cd48ee3dbf feat: add more accessibility labels
Adds more accessibility labels required for mobile automated testing.
2017-11-28 12:28:37 -06:00
Lyubo Marinov e7aff1d8e1 [RN] Group the secondary toobar buttons
Rearrange the ToolbarButtons in the secondary Toolbar in order to mostly
group the media-related ones such as the AudioRouteButton, the
switchCamera button, and the audio-only mode button.
2017-11-15 09:31:40 -06:00
Saúl Ibarra Corretgé f973a695d8 [RN] Add audio route picker
Due to the difference in nature, the iOS and Android implementations are
completely different:

iOS: MPVolumeView is used, which allows us to place a button which will launch a
native route picker provided by iOS itself. This view is different depending on
the iOS version, with the iOS 11 version being more complete.

Android: A completely custom component is used, which displays a bottom sheet
with the device categories, not devices individually. This is akin to the sheet
in the builtin dialer.
2017-11-15 09:31:40 -06:00
Lyubo Marinov 70d064cfa2 [RN] Fix React warnings 2017-11-07 17:28:28 -06:00
Lyubo Marinov 2b8a770163 [RN] Consistent margins for Filmstrip and Toolbox
With the introduction of wide and narrow layouts the margins of the
Filmstrip and the Toolbox became inconsistent. For example, the
Filmstrip's top in the wide layout was nearer to the top than the
secondary Toolbar.
2017-11-07 17:27:58 -06:00
Lyubo Marinov d0c079dba5 Coding style 2017-11-07 17:27:58 -06:00
Lyubo Marinov bce2a9fba9 [RN] Fix eslint & flow errors 2017-11-07 17:27:58 -06:00
paweldomas 3e9d26b525 ref(Toolbox.native): extract _renderToolbars 2017-11-07 08:28:18 -06:00
paweldomas 320cfe4745 ref(base/react/Container): return null for not visible
Now that we no longer hide the filmstrip it is fine to return null
instead of trying to hide with some tricks.
2017-11-07 08:28:18 -06:00
paweldomas c0a7d6144a feat: display filmstrip on the short side
Adds the ability to detect app area's aspect ratio on react-native
through the features/base/aspect-ratio.

Makes conference, filmstrip and toolbox react to the aspect ratio
changes and display filmstrip on the shorter side of the screen.
2017-11-07 08:28:18 -06:00
paweldomas b74bede0e7 feat(web/RN): update React to v16 and React Native to 0.49 2017-11-02 14:32:35 +01:00
Leonard Kim 92dbdade39 fix(filmstrip-only): set width for toolbar popovers
The popovers in filmstrip only are displaying thinly.
As a quick workaround, set a width on them. There
should only be one anyway, which shows up when
talking while muted.
2017-10-31 14:42:16 -05:00
yanas e09949be9f feat(dark-theme): Applies dark theme on inline-dialogs, tooltips, flags and more 2017-10-20 15:29:16 -05:00
hristoterezov 0b50578de9 style(analytics): sendEvent -> sendAnalyticsEvent 2017-10-17 19:33:32 -05:00
hristoterezov 0eddef4d62 feat(mute): Add analytics and console logs for audio/video mutes 2017-10-13 09:50:48 -05:00
hristoterezov df1437f018 ref(analytics): Use analytics from features/analytics 2017-10-13 09:50:48 -05:00
paweldomas 122be9e0e0 ref: move 'jwt' feature to 'base' 2017-10-12 14:43:09 -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
virtuacoplenny cfe4564ab3 feat(info): automatically show the info dialog (#2018)
* ref(info): be able to open dialog through store

* feat(info): automatically show the info dialog

Conditions:
- Lonely call
- Has not opened the info dialog yet

* squash: change to show on start, hide later

* squash: update naming and comment
2017-09-29 15:27:23 -05:00
Lyubo Marinov 2e2129fa44 Import PropTypes from prop-types
Prepare for React 16.
2017-09-27 16:24:53 -05:00
Leonard Kim eae3bead87 fix(toolbar): fix proptype warning
The implementation of ToolbarButtonWithDialog expects a
constructor function for now, not the object returned
from calling a constructor function.
2017-09-26 11:56:43 -05:00
Leonard Kim 46b75e5178 ref(info): new component for showing meeting info 2017-09-25 08:42:00 -05:00
hristoterezov 66da77bcf5 fix(profile_button): unclickable 2017-09-24 21:50:30 -05:00
Lyubo Marinov 9049f52402 [RN] Allow share-room ToolbarButton to not be rendered 2017-09-07 12:49:35 -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
Leonard Kim 05f8c69fe6 ref(toolbar): add wrapper around buttons for torture tests
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.
2017-08-30 11:31:15 -05:00
Leonard Kim 7063f144ef feat(tooltips): add for video quality label and feedback button 2017-08-30 11:10:28 -05:00
Saúl Ibarra Corretgé 3102ea6818 [RN] Try to create local tracks when unmuting, if track is missing
This is only desired when the unmuting action took place due to a manual user
intervention or the audio-only mode being disengaged.
2017-08-22 07:28:19 -05:00
Leonard Kim e3361e2f3b feat(tooltips): convert popup tooltips to InlineDialog 2017-08-21 15:16:09 -05:00
Leonard Kim c3a4a38414 feat(toolbar): use AtlasKit tooltip 2017-08-21 15:16:09 -05:00
Saúl Ibarra Corretgé 2e3a5b1c35 [RN] Fix jsdocs 2017-08-14 12:23:46 +02:00
hristoterezov 1782030936 feat(alwaysontop): Toolbar. 2017-08-11 17:07:24 -07:00
hristoterezov b81dc4e59b ref(toolbar): Implement stateless toolbar 2017-08-11 17:07:24 -07:00
hristoterezov 53f675fbe0 ref(ToolbarButton): Remove unnecessary check. 2017-08-11 17:07:24 -07:00
hristoterezov f18b42b286 fix(ToolbarButton): Don't register shortcut if APP is not defined. 2017-08-11 17:07:24 -07:00
hristoterezov 91e75bf7b9 ref(UIUtil): Move all tooltip functions into another file 2017-08-11 17:07:24 -07:00
hristoterezov fe59084979 ref(isButtonEnable): UIUtil -> toolbox 2017-08-11 17:07:24 -07:00
hristoterezov 025f7204d5 ref(ToolbarButton): Remove dispatch 2017-08-11 17:07:24 -07:00
virtuacoplenny d8cd3e75b4 feat(quality-slider): initial implementation (#1817)
* 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
2017-08-09 14:40:03 -05:00
virtuacoplenny ff442853a2 feat(feedback): convert to react and redux (#1833)
* 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
2017-08-07 11:20:44 -05:00
Lyubo Marinov 85a168d51b [RN] base/media is intent, base/tracks is reality 2017-08-04 16:07:48 -05:00
yanas b0ffe2e63f Remove primary toolbar splitter (#1811) 2017-07-21 14:21:39 -07:00
Lyubo Marinov 0b5431b795 [RN] Bind event handler once per instance, not per render 2017-07-19 16:33:57 -05:00
Lyubo Marinov e7fc4739c4 Fixes jsdocs 2017-07-19 16:25:06 -05:00
Saúl Ibarra Corretgé ffc12ccc0e [RN] Disable camera switch button when video is muted 2017-07-19 14:30:36 +02:00
Saúl Ibarra Corretgé 03da40b56a [RN] Disable video mute and camera switch buttons when in audio only mode 2017-07-19 11:58:08 +02:00
Saúl Ibarra Corretgé 055df1c12e [RN] Add ability to disable a ToolbarButton 2017-07-19 11:50:24 +02:00
Lyubo Marinov 72691eb2dc misc: fix dispatching actions twice when mapDispatchToProps is used 2017-07-17 13:59:04 -05:00
Saúl Ibarra Corretgé 0bf9a78e4c misc: fix dispatching actions twice when mapDispatchToProps is used
The functions need not return anything, or it will be dispatched as another
action.
2017-07-17 13:51:35 -05:00
paweldomas b84e910086 feat: add option to disable desktop sharing
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.
2017-07-14 10:14:00 -05:00
Saúl Ibarra Corretgé f878f54b4d [RN] Toggle audio-only icon based on state 2017-07-06 17:18:49 -05:00
Saúl Ibarra Corretgé 46a87e42ce [RN] Update audio-only icon
Match the one on the web.
2017-07-06 17:14:00 -05:00
virtuacoplenny 84ae7df8f1 fix(filmstrip-only): vertically align center the toolbar (#1700)
* 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
2017-07-05 21:07:00 -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
Saúl Ibarra Corretgé f6ccacb7df [RN] Fix regression handling ToolbarButton onPress
Introduced in
96e83989a5
as part of a refactor + feature.
2017-06-08 09:36:58 -05:00
hristoterezov 96e83989a5 feat(device_selection): Implement popup 2017-06-07 09:23:40 -05:00
Lyubo Marinov 87b488a12b Comply w/ coding style 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
yanas d1737745c2 Fix raise hand toggled state 2017-05-31 07:50:18 -05:00
Leonard Kim a1476c68f1 fix(audio-only): remove button from toolbar and set label cursor
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.
2017-05-22 14:46:05 -05:00
Ilya Daynatovich ab5c2e9ded Add jwt module to react 2017-05-09 00:21:14 -05:00
Saúl Ibarra Corretgé 9ba3a1c4ff feat(conference): add audio only mode
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.
2017-05-05 09:27:59 -07:00
Leonard Kim 44b81b20e3 feat: convert invite dialog to react and redux
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.
2017-04-19 20:41:23 -05:00
Lyubo Marinov 1ec06f4bf0 React (Native) optimizations/performance
Remove toolbar button and icon style literals from the render method of
Toolbox.native.js.

Additionally, comply w/ coding style.
2017-04-11 12:00:41 -05:00
Saúl Ibarra Corretgé 849f93375c [RN] Use a handset icon for audio-only mode button 2017-04-11 16:15:33 +02:00
yanas 2ffef3bdda Fixes toolbar tooltip positioning 2017-04-10 09:37:10 -05:00
yanas 77b789e26a Implements a filmstrip-only mode for the toolbox 2017-04-10 09:36:25 -05:00
Saúl Ibarra Corretgé 54bb5f1879 [RN] Add ability to share the URL for a conference 2017-04-06 00:24:26 -05:00
Saúl Ibarra Corretgé 8fe3dce649 [RN] Add audio only mode for conferences
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.
2017-04-05 15:07:34 -05:00
Saúl Ibarra Corretgé f5973e0eee [RN] Fix toggling camera
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
2017-04-05 00:20:17 -05:00
Ilya Daynatovich bcbdaaa6ea Fix interface_config.js/interfaceConfig overriding
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.
2017-04-04 17:00:39 -05:00
Lyubo Marinov 1e2d88cd5d React Toolbox 2017-04-03 13:29:33 -05:00