Commit Graph

1262 Commits

Author SHA1 Message Date
Leonard Kim aa93a78372 fix(vertical-filmstrip): allow overflow scrolling on firefox, edge, and ie
Using column-reverse prevents proper scrolling on browsers other than Safari
and Chrome. Additionally, Firefox has an issue where flex containers have
dimensions set to auto, preventing resize. So, add hacks to maintain Chrome
and Safari's behavior while allowing for some kind of scrolling on other
browsers.
2017-12-04 21:12:57 -06:00
Leonard Kim c9b54845d9 ref(settings): convert panel to react
The goal is to reduce usage on atlassian/aui. New components
have been created to display the settings panel. Language
selection will reach into i18n for state whereas moderator
options will keep state in redux.
2017-12-04 16:19:18 -06:00
Дамян Минков 345fcefa7d On adding participant show the initial status text if any. (#2220)
* On adding participant show the initial status text if any.

When participant joins and there is an initial status we show it, instead of the connected notification. If initial status is missing proceed with the default user connected notification.

* Updates to latest lib-jitsi-meet (365bd886ee).

* Adds a fixme comment.

* Updates to latest lib-jitsi-meet (365bd886ee).
2017-11-27 15:05:53 -08:00
Дамян Минков 7b1b873b6e VideoSIPGW updates (#2201)
* Adds initial documentation for sipgw jibri.

Also explains enabling the people search service and the request/response that are made around sipgw jibri service.

* Fixes add people dialog to invite users and rooms.

No invitation is sent when there is nobody to invite.

* Reuse some recording strings, by using arguments.

* Make sure web also dispatches CONFERENCE_WILL_JOIN.

* Introduces new feature videosipgw.

* Fixes lint errors.

* Renames methods to use people, chatRooms and videoRooms.

* Updates to latest lib-jitsi-meet (dc3397b18b).
2017-11-21 14:45:14 -08:00
Leonard Kim 28b153facf ref(remote-video): remove redundant method 2017-11-21 15:06:30 -06:00
Leonard Kim c2f5afe9c2 fix(large-video): switch to dominant speaker with no video
On DOMINANT_SPEAKER_CHANGED events, switch to the new
dominant speaker regardless of if the speaker has video;
it's okay to show the speaker's avatar.
2017-11-21 15:06:30 -06:00
Leonard Kim fcb3ca836f fix(large-video): return to dominant speaker without video
Always switch to the dominant speaker after unpinning
instead of conditionally checking if the current dominant
speaker has video.
2017-11-21 15:06:30 -06:00
Leonard Kim ef813fbf71 ref(notifications): replace NotificationWithToggle with Notification
It was decided along with the mute participant dialog reactification
that these types of warning messages should not be toggleable--that
they should simply always display because there is no undo action.
As such, the component NotificationWithToggle is no longer needed.
2017-11-21 11:55:45 -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
Leonard Kim 917fdcaa10 ref(deps): remove jquery-ui
After looking at the jquery-ui documentation, I believe it
is being used only in one place, when toggling the smiley
menu. That toggling has been quickly replaced with a normal
jquery call.

Note: @atlassian/aui also uses jquery-ui but killing that
off will be more difficult due to its CSS being used.
2017-11-17 16:49:10 -06:00
Lyubo Marinov 8fd91573fc Fix eslint & flow errors
Prepares for the latest eslint & flow-related npm packages which cause
these errors.
2017-11-16 12:27:54 -06:00
Leonard Kim b37bbcc622 fix(filmstrip): allow pinning of participants without streams
Click handling was added to the local thumbnail only after
receiving video. Click handling was added to remote thumbnails
only after receiving a stream. To allow for pinning through
the filmstrip in any case, always attach the click handler
on thumbnail init.
2017-11-15 14:56:59 -06:00
Leonard Kim 95fcc7702f fix(video-layout): contact list click behaves like thumbnail click
Checks exist when clicking a contact list to prevent the pinning
UI from updating if a remote thumbnail has not loaded video.
This was unexpected UX so instead go ahead and pin. This is
accomplished by having contact list clicks to more directly
trigger the flow of a thumbnail being clicked.
2017-11-15 14:56:59 -06:00
Leonard Kim aec22b8ed9 fix(shared-video): hardcode shared video name
The YouTube api removed player#getVideoData years ago.
I am completely baffled as to how the feature kept working.
The title of the video is no longer obtainable through
the player itself, so instead call the bot participant
"YouTube."
2017-11-13 19:56:41 -06:00
Дамян Минков 6991eff963 Show local video if both iAmRecorder and iAmSipGateway are set. (#2157) 2017-11-10 13:40:53 -08:00
virtuacoplenny 510334fa7f ref(notifications): convert some dialogs to error or warning notifica… (#1991)
* ref(notifications): convert some dialogs to error or warning notifications

- Expand the configurability of the Notification component so warnings
  and errors can be displayed.
- Allow Notification to take in arbitrary text for the body.
- Rename defaultTitleKey to titleKey for consistency with descriptionKey.

* ref(notifications): remove openReportDialog method

openReportDialog is a wrapper around showError that adds
a logger statement. It is being called in one place only
so remove the method and have that one place call logger.

* ref(notifications): UI.showTrackNotWorkingDialog takes a boolean

Change UI.showTrackNotWorkingDialog so it takes a boolean
arguments instead of the entire track. A small refactor so
the method needs to know less.

* [squash] Fixes eslint errors

* WiP: Fixes desktop sharing error strings and adds support button

* [squash] Fix icons appearances

* [squash] Fix translate titles and messages

* [squash] fix(translation): Fixes incorrect password string

* [squash] fix(recording): Fixes recording message

* [squash] fix(warning): Turns some warnings to errors and makes support link optional.

* [squash] fix(translation): Addressing language comments

* [squash] Fixes jsdoc and formatting

* [squash] fix(noopener): Fixes window.open noopener

* [squash] fix(constants): Extract constants and refactor NotificationWithToggle

* [squash] fix(lang): Fixes camera and mic error titles

* [squash] fix(supportLink): Renames addSupportLink to hideErrorSupportLink
2017-11-03 14:05:03 -05:00
Leonard Kim 4a90e6dc71 fix(filmstrip): create a specific target for local video appending
Instead of targetting a div that contains multiple elements
and risking the elements appearing out of order, create a
specific div for local video to append to.
2017-11-02 14:24:29 -05:00
Дамян Минков 90070d9e9f Fixes a problem not showing remote video menu in case of all moderators. (#2130)
Removes hasRemoteVideoMenu from RemoteVideo.
In some cases where mod_muc_allowners is enabled we do not see the remote video menu. The problem was in the order of initialization of remote video component.
RemoteVideo#constructor -> Remotevideo#addaddRemoteVideoContainer -> Remotevideo#addRemoteVideoMenu  -> RemoteVideo#hasRemoteVideoMenu = true
Then in VideoLayout#showModeratorIndicator -> !remoteVideo.hasRemoteVideoMenu -> remoteVideo.addRemoteVideoMenu().
2017-11-02 12:07:31 -07:00
damencho fda52f7160 Moves login state of dialog to be first, to be the initial state.
By default impromptu uses the first state as the default one to show.
2017-10-30 13:01:06 -05:00
paweldomas 6890414bad fix(LoginDialog.web): 'states' is passed as undefined 2017-10-23 15:25:00 -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
Lyubo Marinov 5d313a8cd8 Coding style
A few occurrences of coding style/formatting which I noticed while
reviewing 'feat(eslint): Enable for non react files'. These are
definitely not all occurrences I could've noticed during the review
but... we're talking about files outside react/ anyway.
2017-10-16 15:37:13 -05:00
hristoterezov 969f5d67ab feat(eslint): Enable for non react files 2017-10-16 14:36:29 -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
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
hristoterezov a3a871d4b3 fix(lib-jitsi-meet): Use the exported constants 2017-10-13 09:50:48 -05:00
paweldomas 122be9e0e0 ref: move 'jwt' feature to 'base' 2017-10-12 14:43:09 -05:00
Leonard Kim 323d38ac94 ref(conference): move mousemove handler to react 2017-10-11 15:51:58 -05:00
yanas 86fcfcc535 WiP(invite-ui): Initial move of invite UI to invite button (#1950)
* WiP(invite-ui): Initial move of invite UI to invite button

* Adjusts styling to fit both horizontal and vertical filmstrip

* Removes comment and functions not needed

* [squash] Addressing various review comments

* [squash] Move invite options to a separate config

* [squash] Adjust invite button styles until we fix the whole UI theme

* [squash] Fix the remote videos scroll

* [squash]:Do not show popup menu when 1 option is available

* [squash]: Disable the invite button in filmstrip mode

* feat(connection-indicator): implement automatic hiding on good connection (#2009)

* ref(connection-stats): use PropTypes package

* feat(connection-stats): display a summary of the connection quality

* feat(connection-indicator): show empty bars for interrupted connection

* feat(connection-indicator): change background color based on status

* feat(connection-indicator): implement automatic hiding on good connection

* fix(connection-indicator): explicitly set font size

Currently non-react code will set an icon size on ConnectionIndicator.
This doesn't work on initial call join in vertical filmstrip after
some changes to support hiding the indicator. The chosen fix is
passing in the icon size to mirror what would happe with full
filmstrip reactification.

* ref(connection-stats): rename statuses

* feat(connection-indicator): make hiding behavior configurable

The original implementation made the auto hiding of the indicator
configured in interfaceConfig.

* fix(connection-indicator): readd class expected by torture tests

* fix(connection-indicator): change connection quality display styling

Bold the connection summary in the stats popover so it stands out.
Change the summaries so there are only three--strong, nonoptimal,
poor.

* fix(connection-indicator): gray background on lost connection

* feat(icons): add new gsm bars icon

* feat(connection-indicator): use new 3-bar icon

* ref(icons): remove icon-connection and icon-connection-lost

Both have been replaced by icon-gsm-bars so they are not
being referenced anymore. Mobile looks to have connect-lost
as a separate icon in font-icons/jitsi.json.

* fix(defaultToolbarButtons): Fixes unresolved InfoDialogButton component problem

* [squash]: Makes invite button fit the container

* [squash]:Addressing invite truncate, remote menu position and comment

* [squash]:Fix z-index in horizontal mode, z-index in lonely call

* [squash]: Fix filmstripOnly property, remove important from css
2017-10-03 11:30:42 -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 483e2ee202 feat(connection-indicator): implement automatic hiding on good connection (#2009)
* ref(connection-stats): use PropTypes package

* feat(connection-stats): display a summary of the connection quality

* feat(connection-indicator): show empty bars for interrupted connection

* feat(connection-indicator): change background color based on status

* feat(connection-indicator): implement automatic hiding on good connection

* fix(connection-indicator): explicitly set font size

Currently non-react code will set an icon size on ConnectionIndicator.
This doesn't work on initial call join in vertical filmstrip after
some changes to support hiding the indicator. The chosen fix is
passing in the icon size to mirror what would happe with full
filmstrip reactification.

* ref(connection-stats): rename statuses

* feat(connection-indicator): make hiding behavior configurable

The original implementation made the auto hiding of the indicator
configured in interfaceConfig.

* fix(connection-indicator): readd class expected by torture tests

* fix(connection-indicator): change connection quality display styling

Bold the connection summary in the stats popover so it stands out.
Change the summaries so there are only three--strong, nonoptimal,
poor.

* fix(connection-indicator): gray background on lost connection

* feat(icons): add new gsm bars icon

* feat(connection-indicator): use new 3-bar icon

* ref(icons): remove icon-connection and icon-connection-lost

Both have been replaced by icon-gsm-bars so they are not
being referenced anymore. Mobile looks to have connect-lost
as a separate icon in font-icons/jitsi.json.
2017-09-26 11:55:09 -05:00
hristoterezov 66da77bcf5 fix(profile_button): unclickable 2017-09-24 21:50:30 -05:00
Leonard Kim 21d419e517 fix(pinning): bind the callback for contact list clicking 2017-09-20 10:35:29 -07:00
Lyubo Marinov 241dc3b147 [RN] Support XMPP authentication 2017-09-19 23:04:45 -05:00
paweldomas 141acea194 [RN] Support XMPP authentication 2017-09-19 14:38:45 -05:00
yanas 0c08f96755 fix(Filmstrip.js):Make sure the local thumbnail is there before getting the height 2017-09-18 17:26:24 -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
bbaldino f616b0b71b few tweaks to fix some exceptions in edge 2017-08-28 21:52:52 +00:00
virtuacoplenny 735a596afe ref(recording): convert recording label to react (#1915)
* 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
2017-08-25 11:45:30 -05:00
Saúl Ibarra Corretgé e04129bf4d Merge pull request #1916 from virtuacoplenny/lenny/no-custom-debounce
ref(toolbar): replace custom debounce with lodash throttle
2017-08-25 15:31:16 +02:00
damencho 6e37fe175d Skips showing empty statuses. Updates poltergeist to report connected. 2017-08-23 14:10:10 -05:00
Leonard Kim 7cea557416 ref(shared-video): move SharedVideoThumb to own file 2017-08-22 10:27:34 -05:00
Leonard Kim 52ee8fd473 ref(small-video): remove some global jquery dom querying
Create a reference to the jquery element instead of querying for
it globally. This is to better encapsulate the small video
component.
2017-08-22 10:27:34 -05:00
Leonard Kim 670d575bcb ref(remote-video): set inner html instead of creating elements
This better mimics declarative jsx.
2017-08-22 10:27:34 -05:00
Leonard Kim 16fbf90a00 ref(local-audio): remove rendering of local audio
The local audio stream is attached to an audio element that is
always muted. As such, local audio is not being rendered and
the attaching may just not be needed at all.
2017-08-22 10:27:34 -05:00
Leonard Kim ec22329408 ref(local-video): generate html instead of hardcoding in filmstrip
This would better mimic React behavior where each component has
its own markup, instead of relying on markup existing elsewhere.
2017-08-22 10:27:34 -05:00
Leonard Kim ec7c10c99b ref(toolbar): replace custom debounce with lodash throttle
The current custom debounce function sets a timeout and ensures
additional calls are not executed while the timeout is pending.
Regulating the call of a function while also ensuring it gets
called at a certain time is a throttle.
2017-08-21 17:20:52 -07:00
Leonard Kim 28b4595561 ref(tooltips): remove old tooltips 2017-08-21 15:16:09 -05:00
Leonard Kim e3361e2f3b feat(tooltips): convert popup tooltips to InlineDialog 2017-08-21 15:16:09 -05:00
Leonard Kim 38e2443ab7 feat(small-video): use AtlasKit tooltip 2017-08-21 15:16:09 -05:00
Paweł Domas 99ce46cfa8 feat(conference, toolbox, API) get rid of {audio,video}Muted' flags
* 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
2017-08-18 13:30:30 +02:00
Leonard Kim 27deb97c5c ref(filmstrip): hook filmstrip to redux for 1-on-1 mode
- 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).
2017-08-17 17:27:30 -05:00
hristoterezov 378a8d014e feat(remotecontrol): Prevent multiple remote control sessions (#1875) 2017-08-17 09:43:22 -07:00
Lyubo Marinov ba61876b13 Log an error using less scary words 2017-08-16 16:38:07 -05:00
Lyubo Marinov f54e87d975 Coding style 2017-08-16 16:36:46 -05:00
Leonard Kim 995a25ee15 fix(video-quality-label): adjust z-indexing clashes with filmstrip
With AtlasKit InlineDialog, the filmstrip z-index in vertical
filmstrip mode was adjusted as it had to be set to fixed position
for the dialogs to automagically be position fixed. This left
behind a regression where the filmstrip z-index was the same as
the video quality label, but came later in the dom, so the label
was not clickable. This commit modifies the z-index of the
vertical filmstrip to account for clicking of the video quality
label.
2017-08-14 15:12:06 -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
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
Leonard Kim d7bccd0c93 ref(pinning): remove pinnedId state from VideoLayout
Instead have VideoLayout reach into redux.
2017-08-11 10:43:35 +01: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
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
Leonard Kim 002e48b886 feat(display-name): convert prompt to react
Create a new component that uses Dialog. Reuse existing actions
for updating a participant's display name.
2017-08-04 10:21:18 -05:00
Leonard Kim cd66a7fcb7 ref(notifications): bring hiding of notifications into redux 2017-08-02 11:19:38 -07:00
Leonard Kim 74ddae4a6a feat(device-errors): move device error dialogs to notifications
- 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.
2017-08-01 16:33:00 -07: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
virtuacoplenny da1c760abf feat(notifications): implement a react/redux notification system (#1786)
* 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
2017-07-28 12:56:49 -05:00
paweldomas 68f4a4ae9f ref: enable/disable microphone button
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.
2017-07-28 12:06:42 -05:00
Saúl Ibarra Corretgé 2525bb2805 Merge pull request #1802 from jitsi/start_in_audio_only
Start in audio only
2017-07-24 14:32:20 +02:00
paweldomas 00d3d3c09a fix(VideoLayout): muted for no tracks
Will make the UI display audio/video muted icon for remote participants
with no audio/video track.
2017-07-21 15:04:03 +02:00
George Politis 68d40b4fa4 Merge pull request #1738 from virtuacoplenny/lenny/connection-stats-pub-sub
ref(stats): process stats through one pub/sub
2017-07-21 12:22:55 +02:00
Leonard Kim 44bbd26c96 ref(stats): process stats through one pub/sub
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.
2017-07-19 15:11:35 -07:00
Leonard Kim 364ab5431c fix(connection-indicator): rename calls to hiding the indicator 2017-07-18 13:27:48 -07:00
Saúl Ibarra Corretgé c97daff506 Merge pull request #1775 from jitsi/start_screen
Add config.startScreenSharing
2017-07-18 13:51:57 +02:00
paweldomas 3926d705ad feat: add config.startScreenSharing
Will try to use screensharing instead of camera video from
the beginning.
2017-07-17 15:32:01 +02:00
virtuacoplenny 244de8096f feat(local-video): convert to react (#1705)
* 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
2017-07-14 14:22:27 -05:00
virtuacoplenny 37328b3995 Merge pull request #1757 from jitsi/rc_dialog_to_notification
fix(remotecontrol): Replace info dialogs with notifications.
2017-07-14 11:32:54 -07:00
hristoterezov b8d3e82ae7 fix(remotecontrol): Replace info dialogs with notifications. 2017-07-14 12:58:37 -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
yanas 2e2b1d47c0 Changes video thumbnail menu icon 2017-07-12 17:22:07 -05:00
paweldomas de2eee2e61 ref(VideoLayout): reduce 'forceUpdate' usage 2017-07-12 10:29:18 -07:00
paweldomas badbedf0f5 ref(LargeVideoManager): getCurrentContainer
Remove duplication and direct access to kind of private 'state' field by
introducing 'getCurrentContainer' method.
2017-07-12 10:29:18 -07:00
paweldomas 2281b1acd2 ref: enable/disable video button
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.
2017-07-12 10:29:18 -07:00
paweldomas 751f27644f fix(VideoLayout): store userID in container
The container needs to store user's ID in order for the 'isOnLargeVideo'
logic to work correctly when user has no stream (previously it was
obtained from stream which can be null/undefined).
2017-07-12 10:29:18 -07:00
virtuacoplenny 0481e4cf00 feat(indicators): move the "top toolbar" indicators to react (#1699)
* feat(indicators): move the "top toolbar" indicators to react

* wrap baseindicator
2017-07-10 17:29:44 -05:00
Emil Ivov 66eac19058 Merge pull request #1739 from bgrozev/no-tabnabbing
No tabnabbing
2017-07-05 15:44:20 -05:00
Boris Grozev aee5a9ca43 fix: Use https for links without a scheme. 2017-07-05 15:39:53 -05:00
Leonard Kim 0d4b77d7b1 fix(popover): set display before calculating width
Popover works by first creating a DOM element with display none
then having jquery calculate its width and new position and
then setting display to table. This does not work with p2p
connection stats, which are much wider than the default width
of the popover. What will happen is when display table is set,
the width will increase greatly so the positioning will be off.
The workaround here is to set display table as the default
display but toggle visibility instead.
2017-07-05 15:34:11 -05:00
Boris Grozev b0eeb8a207 fix: Avoid tabnabbing
Reported by Manav.
2017-07-05 15:15:59 -05:00
Sergio Garcia Murillo a97d02e0fd Change messageString to msgString in _requestRecordingToken
#1730
2017-07-05 10:05:22 -05:00
Leonard Kim 152427e01b feat(small-video): convert the "toolbar" to react
Move display of audio muted, video muted, and moderator icons,
which make up the elements of the small video toolbar, into React
Components.
2017-06-30 14:21:44 -05:00
virtuacoplenny 0de032ebd7 feat(avatar): SmallVideo uses the existing Avatar component. (#1712)
* feat(avatar): SmallVideo uses the existing Avatar component.
2017-06-29 13:21:03 -05: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
Leonard Kim 4ce5888b4c feat(connection-indicator): convert to 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.
2017-06-27 15:58:00 -05:00
Leonard Kim 4a1efed4a8 feat(audio-level): convert SmallVideo AudioLevelIndicator to React 2017-06-22 11:14:41 -05:00
hristoterezov 486d0802a8 fix(largevideo): show the background video only for video container type 2017-06-21 16:19:30 -05:00
hristoterezov c250da59d5 fix(videolayout): Resize calculations 2017-06-21 16:19:30 -05:00
Ilya Daynatovich 0aee5e5b48 Add blurring effect 2017-06-21 16:19:30 -05:00
Ilya Daynatovich 292c1689ba Add maximum zooming coefficient 2017-06-21 16:19:30 -05:00
Leonard Kim 0a1bd5a0c7 feat(popover): do not remove the popover on every update
With popover usage now only passing in React Components, the
logic of removing the popover and recreating its html with
every update is not necessary. Instead allow React to update
the popover contents.

Because of this change, mouse event handlers are not recreated
on each update, so it is possible for mouseleave to fire after
the size of the popover shrinks when collapsing to hide more stats,
forcing the mouse out of the popover. To prevent this, padding has
been added to the top of the popover so on resize the mouse will
still be over the popover. The padding has the added bonus of
fixing an issue where the popover would not close until mouseenter
was triggered after size collapse, but it adds the drawback of
requiring more upward mouse travel to close the popover.
2017-06-20 13:49:02 -05:00
Leonard Kim e0d641a787 feat(connection-stats): convert connection stats display to react
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.
2017-06-20 13:49:02 -05:00
Lyubo Marinov 25ec8ac6a7 Prepare for eslint 4 2017-06-14 22:17:35 -05:00
hristoterezov 4d329b510f ref: module.exports -> export for the ES6 modules 2017-06-14 19:37:13 -05:00
Leonard Kim 5d1087e464 fix(vertical-filmstrip): prevent scaling based on video count
Vertical filmstrip has a scrollbar to scroll through all remote
video thumbnails instead of scaling width and height to force all
thumbnails to display on screen. The scaling is not necessary in
vertical filmstrip mode and instead causes some UI spacing issues
with the video status label.

Also addressed a typo in "removeVideoWidth" near the area of the
changed logic.
2017-06-13 15:17:55 -05:00
Leonard Kim da99f3b939 feat(remote-video): convert remote video menu 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.
2017-06-13 14:54:19 -05:00
Leonard Kim 73dd7440d0 fix(remote-video): update remote video menu if it exists
In RemoteVideo, creation of the RemoteVideoMenu (popover) is
skipped if in filmstrip only mode. However, updateRemoteVideoMenu
is called by other components, and that tries to access popover
and will error.

Add a defensive check for now as filmstrip is being rewritten
for react.
2017-06-13 14:54:03 -05:00
Leonard Kim 2e08815644 fix(video): use onplaying to ensure video height and width are set
When using onplay in firefox, the event fires before data is flowing,
which can cause videoHeight and videoWidth to be 0 during resizing.
By using onplaying, there is some assurance data is being received,
so videoHeight and videoWidth should be set.
2017-06-07 10:44:05 -05:00
paweldomas 2c002c875d fix(SmallVideo): remove invalid character
Removes ' character which should not be there.
2017-06-06 11:15:39 -05:00
paweldomas e38dd0e9d3 ref(LargeVideoManager): remove unused method
'_isConnectionActive' is not used anymore
2017-06-06 11:13:02 -05:00
paweldomas a2a2a583de doc(LargeVideoManager): invalid default
The default for 'show' argument of 'showRemoteConnectionMessage' is
undefined (unspecified).
2017-06-06 11:13:02 -05:00
paweldomas a3ba28f507 ref(LargeVideoManager): simplify
Simplify 'updateParticipantConnStatusIndication' by getting rid of
'showMessage' argument.
2017-06-06 11:13:02 -05:00
paweldomas 6865b03338 fix(RemoteVideo): broken grey avatar
Also moves the logic about participant connection status from SmallVideo
to RemoteVideo, because it doesn't make sense for local videos.
2017-06-06 11:13:02 -05:00
paweldomas 12d7e61362 feat(VideoLayout): add ninja icon
Add ninja icon which wil be displayed when user's connection status is
inactive.

Apply grey filter only for interrupted state.

Do not use isLastN directly, but check ParticipantConnectionStatus.
2017-06-06 11:13:02 -05:00
Lyubo Marinov d437f3db03 [React] Call/ring overlay
Rewrite the non-React RingOverlay into the React Component CallOverlay
in a way which makes it easier to port to React Native.
2017-06-06 00:11:39 -05:00
virtuacoplenny d1ea29beeb fix(large-video): ensure switch to local video when all others leave (#1607)
* fix(large-video): ensure switch to local video when all others leave

This handles the case where User A and B are in a call and B has
no audio or video. Then B leaves. User A would see User B left
on large video. Instead, User A should see self view on large.

* squash: always update large video if it is empty

* squash: add largeVideo check for filmstrip only mode
2017-06-05 18:47:26 -05:00
Lyubo Marinov ec2e6525ac Fix jsdocs 2017-05-31 00:53:53 -05:00
Leonard Kim 538da92eae fix(large-video): attempt to update large video on all connection updates
It is possible for a connection update to come during a large video update,
between its promises, which would result in the update NOT triggering another
large video update because an update is in progress. This can cause a state
where a connection status overlay is displayed over a video in a state that
does not match the actual video state, like the restoring overlay displaying
on active video.
2017-05-26 15:31:34 -05:00
damencho 2a0973a897 Fixes chat when on join we receive messages.
Fixes a TypeError: Cannot set property 'innerHTML' of undefined
                    at o (Chat.js:61)
                    at Object.updateChatConversation (Chat.js:271)
that is thrown when joining a conference with messages already set to the chat. The error used to remove a strophe handler and chat was not working at all for those seeing the error.
2017-05-25 15:22:49 -05:00
Leonard Kim 42b51e3c5c fix(1-on-1): remove torture test workaround, add new tests 2017-05-25 15:15:52 -05:00
virtuacoplenny 1da95d2e37 fix(large-video): trigger update after timeout for 1-on-1 calls (#1599)
* fix(large-video): trigger update after timeout for 1-on-1 calls

Currently no video switch happens if a user joins audio and video
muted. For example, User A is in a call and User B joins with no
mic and camera. User A will keep seeing local video on large video.
The fix is to set a timeout, of a somewhat arbitrary 3 seconds, to
show User B on large video.

* SQUASH: wrap videoElement access in if

* SQUASH: split out remoteVideoActive logic
2017-05-25 11:50:52 -05:00
Lyubo Marinov 66ababc6c8 Comply w/ codying style: naming, formatting, etc. 2017-05-25 10:56:08 -05:00
virtuacoplenny d5b40280ab fix(vertical-filmstrip): different label animations for filmstrip states (#1596)
* 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
2017-05-24 20:57:55 -05:00
Leonard Kim 56b12bd969 fix(vertical-filmstrip): move video status labels back to top right
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.
2017-05-23 13:28:27 -07:00
Leonard Kim 2333249b05 feat(1-on-1): Initial implementation
- Expose an api on Filmstrip to hide the remote videos container, which does so
  by adding a class
- Modify listeners for user join, leave, share video to call the api
- Hide the container when there is 1 or fewer remote participants
- Always show the container if self view is in focus
- Show the container if the number of remote thumbnails does not match the count
  of remote participants, such as the case of sharing a video
2017-05-23 13:28:27 -07:00
Leonard Kim aabe641047 feat(vertical-filmstrip): Initial implementation
- Add a class to the body when in vertical filmstrip mode
- Override styles as necessary to support the mode
- Add an option to make tooltips display from the left
- Move the HD Label to the bottom left
- Move the remote video menu to the bottom left, move the mute
  icons to the bottom right
- Scale the local video's height and width to fit the filmstrip
2017-05-23 13:28:27 -07:00
Leonard Kim 82ecfac4ee fix(filmstrip): Separate remote videos and local video
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.
2017-05-23 09:07:41 -07:00
hristoterezov 23fea490aa Merge pull request #1585 from jitsi/dial-out-ui
Adds dial-out UI.
2017-05-23 10:29:23 -05:00
yanas 2855ea1500 Adds dial-out UI. 2017-05-23 09:00:40 -05:00
Leonard Kim 258dc594dd fix(volume-slider): modify positioning so slider fits popup width 2017-05-22 14:16:06 -07:00
Leonard Kim 0f0ff6788c fix(config): Bring back minHDHeight 2017-05-17 16:13:16 -05:00
Leonard Kim 896dcde2b2 fix(video-label): Listen to resize events on video elements when possible 2017-05-17 11:54:22 -05:00
Leonard Kim a88409bbfa fix(video-label): Display based on video dimensions in LargeVideoManager
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.
2017-05-17 11:54:22 -05:00
Leonard Kim 92eeba5392 fix(filmstrip): Disable keyboard shortcut for hiding videos 2017-05-10 14:04:09 -07:00
Ilya Daynatovich ab5c2e9ded Add jwt module to react 2017-05-09 00:21:14 -05:00
Leonard Kim ef9f145cb5 fix(video-layout): always honor local video changes
During the implementation of starting as video muted, a check
was put in place to update the local thumbnail view container's
known local track only if the track was not muted. This can
cause the container to become desynced with the current local
track.(Ideally in the future all state would be in redux so this
manual syncing would not be needed.) Removing the if-muted
check seems to cause no side-effects and makes implementation of
device-switch-while-audio-only a lot simpler because new tracks
can be muted and used immediately.
2017-05-05 09:27:59 -07:00
Leonard Kim d24d5d95dd fix(audio-only): combine video status labels
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.
2017-05-05 09:27:59 -07: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
damencho 653f1dae4c Fixes #1549, toggles smileys menu. 2017-05-04 11:19:46 -05:00
Lyubo Marinov 55c3f5ddff Comply w/ coding style
@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.
2017-04-19 20:56:19 -05: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
Leonard Kim 7db1c9b8eb fix: open device selection if it is the only available setting
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.
2017-04-13 11:43:06 -07:00
Lyubo Marinov ae06a6ce41 Fix Recording regression caused by 'React Toolbar'
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.
2017-04-12 14:10:00 -05:00
yanas 98004c2328 Merge pull request #1447 from virtuacoplenny/device-picker
New device selection modal
2017-04-10 17:31:59 -05:00
Leonard Kim eb7dda85a1 feat: replace device selection in settings with button for modal
Cleanup existing logic for displaying and updating device
selection settings in the settings menu. In its place
is a button to open the device selection modal.
2017-04-10 13:30:00 -07:00
Leonard Kim 2f994b1227 feat: new device selection modal with previews
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.
2017-04-10 13:30:00 -07:00
Lyubo Marinov a9bdde193d Approach consistent filmstrip naming
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.
2017-04-10 12:59:44 -05:00