Commit Graph

542 Commits

Author SHA1 Message Date
virtuacoplenny 907cb013a8 fix(hangup): ensure large video exists before getting displayed id (#2799)
On hangup while audio only, audio only is set to false on
conference leave to reset redux state on mobile. Large video will
update itself on conference leave, but large video has been cleaned
up by that time so trying to directly access the user ID on large
video will fail. Be defensive about this check, because its
callers are already defensive about its return value.
2018-04-12 14:23:03 -07:00
Leonard Kim 2ce3c2d459 ref(filmstirp): remove animate flag from resizeThumbnails
The flag is always false.
2018-04-10 16:18:45 -05:00
Leonard Kim 8363f3cfeb ref(toolbar): remove all jquery filmstrip animations
The animate flag is always being passed in as false, so
essentially the animation isn't needed, unless a setTimeout 0
behavior is for some reason required...
2018-04-10 16:18:45 -05:00
Leonard Kim f8537dde6b fix(filmstrip): set SmallVideo styles instead of using animate
jquery animate during animations sets an element's overflow to
hidden and then back to the overflow declared before the start
of the animation. If multiple animations are fired, then the
overflow could be set to hidden permanently. No calls
to Filmstrip#resizeThumbnails have animate set to true, so the
animate call is not even needed.
2018-04-10 16:18:45 -05:00
Leonard Kim 1eee20dd5a ref(toolbar): remove contact list 2018-04-10 09:34:52 +02:00
virtuacoplenny bfb45ed0e8 fix(large-video): do not try to show background on safari with webrtc (#2606)
The animation for toggling filmstrip visibility was lagging on
Safari. Even though the background video is set to hidden, it is
still causing issues. Setting the background to display none
instead does help but might interfere with animations. So instead
do the easy thing and re-use logic used for Firefox to not show
the background video.
2018-03-13 14:37:35 -07:00
Leonard Kim ce6e8472f0 Revert "fix(hangup): destroy local tracks on conference leave (#2502)"
This reverts commit 88325aeef2.
Turns out a conference with a password triggers a failed conference
join. It's going to be tricky to decipher when to do actual
cleanup, and where to shove that code, so reverting is easier for
now.
2018-03-01 14:07:30 -06:00
virtuacoplenny 88325aeef2 fix(hangup): destroy local tracks on conference leave (#2502)
Destroy local tracks and also destroy large video so the
user does not wonder why camera (and mic) are still enabled
even though hangup has been pressed.
2018-02-26 21:10:49 -08:00
virtuacoplenny 4fb37c38eb fix(large-video): do not show background for Firefox and temasys (#2316)
* ref(large-video): reactify background

This is pre-requisite work for disabling the background on
certain browsers, namely Firefox. By moving the component
to react, and in general encapsulating background logic,
selectively disabling the background will be easier.

The component was left for LargeVideo to update so it can
continue to coordinate update timing with the actual large
video display. If the background were moved completely into
react and redux with LargeVideo, then background updates would
occur before large video updates causing visual jank.

* fix(large-video): do not show background for Firefox and temasys

Firefox has performance issues with adding filter effects on
animated elements. On temasys, the background videos weren't
really displaying anyway.

* some props refactoring

Instead of passing in classes to LargeVideoBackground, rely on
explicit props. At some point LargeVideo will have to be reactified
and the relationsihp between it and LargeVideoBackground might
change, so for now make use of props to be explicit about
how LargeVideoBackground can be modified.

Also, set the jitsiTrack to display on LargeVideoBackground to
null if the background is not displayed. This was an existing
optimization, although previously done with pausing and playing.

* squash: use newly exposed RTCBrowserType

* squash: rebase and use new lib browser util

* squash: move hiding logic all into LargeVideo

* squash: remove hiding of background on stream change. hopefully doesnt break anything
2018-02-12 16:29:29 -08:00
Lyubo Marinov aa314c10ac Coding style: consistent naming, one name per abstraction
Instead of having visible and visibility and setToolboxVisible and
setFilmstripVisibility, have only visible as a name.
2018-02-05 15:55:04 -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 3aedce11f2 fix(filmstrip): prevent error on updating indicators for shared video
Shared video (youtube videos) do not have indicator icons about
dominant speaker and raised hand. Add a check to see if the
indicator icon container exists before trying to attach react
icons to it. The error thrown didn't seem to be causing any
UI issues though.

While this truthy check before doing ReactDOM.render seems
like it should be a general practice, I'm hesistatnt to make
the change broadly because it hasn't been a problem so far.
2017-12-19 17:14:42 -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
Leonard Kim ceeefb33c1 fix(display-name): allow editing only if guest 2017-12-18 23:16:38 -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
Leonard Kim a653816f90 fix(vertical-filmstrip): prevent shared videos from displaying under avatars
- Modify Etherpad and SharedVideo so their resizing takes into account
  the width of the filmstrip in vertical filmstrip mode.
- Modify Filmstrip's getFilmstripWidth to account for when the filmstrip
  is hidden.
- modify VideoContainer so in vertical filmstrip mode it centers the
  shared desktop stream in the middle of the available space not taken
  by filmstrip.
- Also allow clickthrough on the secondary toolbar itself while still
  allowing clicks on the toolbar's buttons. This allows clicks on
  shared videos to go through.
2017-12-05 08:45:45 -06:00
hristoterezov 5ffcaca649 feat(aot): Handle video not available use cases (#2242) 2017-12-04 19:27:17 -08:00
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 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
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 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
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 969f5d67ab feat(eslint): Enable for non react files 2017-10-16 14:36:29 -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
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
Leonard Kim 21d419e517 fix(pinning): bind the callback for contact list clicking 2017-09-20 10:35:29 -07: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
bbaldino f616b0b71b few tweaks to fix some exceptions in edge 2017-08-28 21:52:52 +00: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 38e2443ab7 feat(small-video): use AtlasKit tooltip 2017-08-21 15:16:09 -05: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
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