Commit Graph

155 Commits

Author SHA1 Message Date
Bettenbuk Zoltan 240b033e76 feat: auto tile view 2020-07-24 11:06:34 +02:00
Bettenbuk Zoltan 0598e7369b ref: eslint-config-jitsi@1.0.3 2020-05-20 17:14:29 +02:00
Hristo Terezov 4fda428be1 fix(largeVideo): update don't depend on thumbnails 2020-04-17 15:33:13 -05:00
Hristo Terezov f972ebfe9e fix(thumbnail): videos on safari. 2020-04-17 13:15:25 -05:00
Jaya Allamsetty b7eda8df7a fix(safari): set playsInline attribute to true on the video element
The playsInline attribute needs to be set to true for video to be rendered on Safari on iOS
2020-04-14 12:28:09 -04:00
Hristo Terezov a7ac7790a8 fix(avatars): optimise 2020-02-26 14:32:37 +00:00
Hristo Terezov bbf1927c70
fix(thumbnail): Optimize status bar moderator icon (#5076)
* fix(thumbnail): Optimize status bar moderator icon

Moved all moderator functionality to react to optimize the number of
status bar updates.

* fix(RemoteVideoMenuTriggerButton): Use nullish coalescing

Co-Authored-By: Saúl Ibarra Corretgé <saghul@jitsi.org>

* ref(StatusBar): rename to StatusIndicators

* fix(RemoteVideoMenu): isModerator value.

* fix(notification): mobile.

Co-authored-by: Saúl Ibarra Corretgé <s@saghul.net>
2020-02-18 16:31:04 +00:00
Hristo Terezov 31d9fb12c8
ref(Filmstrip): Optimize resizes. (#4992)
* ref(Filmstrip): Optimize resizes.

* fix(thumbnails): resize.

* fix(thumbnails): Issue with height 0, width 0.

* doc(Filmstrip): Improve JSDoc.
2020-01-24 16:28:47 +00:00
Hristo Terezov 1333fd1975 fix(thumbnails): es6 support & cleanup. 2019-12-16 16:51:59 +00:00
George Politis d210f2f2e7
Adds a noAutoPlayVideo configuration option (used in testing). (#4714)
This adds an option to disable video autoplay that will be used mostly with maleus (our selenium-based load testing tool for testing the new bridge). Disabling video rendering lowers the resource utilisation of the selenium nodes.
2019-10-08 11:34:25 +02:00
George Politis 2a7c6681ad ref: Changes how isVideoPlayable is computed.
This commit changes how the SmallVideo.isVideoPlayable method works.

1st we remove the check on the video stream muted field (materialized with the
!this.videoStream.isMuted() guard). This check is redundant as it is
already materialized in the !this.isVideoMuted check (the isVideoMuted
field is updated with the return value of the videoStream.isMuted()
method).

2nd we return false if we're in audio only mode, because it's
(obviously) undesirable to have a playable video when in audio only
mode.
2019-09-17 18:18:44 +02:00
George Politis 324a9eba91 minor change in debug log wording 2019-09-17 18:18:44 +02:00
George Politis fb1ed22c6c ref: Tweak logging logic for thumbnail display mode and tile view. 2019-09-17 18:18:44 +02:00
Saúl Ibarra Corretgé c1f7bf75c1 thumbnail: don't render dominant speaker indicator on 1-1 calls 2019-09-13 17:37:23 +02:00
Hristo Terezov c3e52f32f9 feat: Add logging for thumbnail display mode and tile view. 2019-08-09 01:08:19 -07:00
Saúl Ibarra Corretgé fd0ca76255 web,avatar: fix setting avatar size
Use the width of its container as the size, so the font icons can be rendered at
a good size.
2019-08-07 20:16:13 +02:00
Bettenbuk Zoltan 72137a2811 feat: initial based avatars 2019-07-01 23:59:16 +02:00
Leonard Kim 4cea7018f5 fix(tile-view): back to single click to pin
Undoes the logic added in:
ebcde745ef
2019-06-18 15:14:20 -07:00
damencho faee1c139e Adds a config param startSilent to disable audio output. 2019-06-05 18:01:18 +01:00
Bettenbuk Zoltan 2b4ace75ae [RN] Add connection indicator 2019-04-16 17:33:23 +02:00
Bettenbuk Zoltan 50d7c1521f Remove legacy web raise hand code 2019-04-01 21:03:36 +02:00
Bettenbuk Zoltan e65918564b [RN] Add UI for raised hand feature 2019-04-01 21:03:36 +02:00
virtuacoplenny d7e112aaf0
fix(display-name): do not default name to placeholder name (#4027)
* ref(display-name): do not pass in display name

The component gets the state itself from redux.

* fix(display-name): do not default name to placeholder name

The web display name component supports inline editing of
the name. Problems can occur when the displayed name
differs from the actual saved name, because participants
without a display name, including the local user, have
a different, default display name displayed. So when
editing starts, the input field is populated with the
default name. To workaround such while supporting fetching
the display name using mapStateToProps, pass in both the
name which should be shown and the name value saved in
settings.

* ref(display-name): rename methods
2019-03-26 09:34:02 -07:00
Leonard Kim 14cc4ea54a ref(hangup): clean up some UI state on hangup
- Reset some state on the singletons conference
  and VideoLayout.
- Add a way for LocalVideo to clean itself up
  by sharing logic with the other SmallVideos.
- Add clearing of chat messages so they don't
  linger.
- Remove some UI event listeners.
2019-01-02 09:54:05 -08:00
Leonard Kim ebcde745ef feat(tile-view): double click to pin 2019-01-02 09:43:20 +01:00
Saúl Ibarra Corretgé 2101f70a09 cleanup: remove no longer used code 🔥🔥🔥
The code for handling device availability has been disabled for a long time,
plus it's ill named since it represents 2 abstractions: lack of permissions and
lack of devices.

Time for it to rest in the git graveyard.
2018-09-19 15:12:31 +00:00
virtuacoplenny e63cd8c81b feat(tile-view): exit tile view on pin (#3430)
* feat(tile-view): exit tile view on pin

* Try out this other ux impl
2018-09-11 13:09:07 -05:00
virtuacoplenny c353e9377f feat(tile-view): initial implementation for tile view (#3317)
* feat(tile-view): initial implementation for tile view

- Modify the classname on the app root so layout can adjust
  depending on the desired layout mode--vertical filmstrip,
  horizontal filmstrip, and tile view.
- Create a button for toggling tile view.
- Add a StateListenerRegistry to automatically update the
  selected participant and max receiver frame height on tile
  view toggle.
- Rezise thumbnails when switching in and out of tile view.
- Move the local video when switching in and out of tile view.
- Update reactified pieces of thumbnails when switching in and
  out of tile view.
- Cap the max receiver video quality in tile view based on tile
  size.
- Use CSS to hide UI components that should not display in tile
  view.
- Signal follow me changes.

* change local video id for tests

* change approach: leverage more css

* squash: fix some formatting

* squash: prevent pinning, hide pin border in tile view

* squash: change logic for maxReceiverQuality due to sidestepping resizing logic

* squash: fix typo, columns configurable, remove unused constants

* squash: resize with js again

* squash: use yana's math for calculating tile size
2018-08-08 13:48:23 -05:00
virtuacoplenny afe7c4470d
feat(small-video): add flag to hide connection indicators (#3225) 2018-07-06 08:24:38 -07:00
Saúl Ibarra Corretgé 87fa8de815 feat(sanity): axe IE and Temasys plugin support 🔥🔥🔥 2018-06-28 13:55:12 +02:00
Leonard Kim c65ccb0af5 fix(filmstrip): do not show video for large video speaker in audio only
When in audio only, the video should not be shown and instead the
avatar should display.
2018-06-22 17:03:25 -05:00
Leonard Kim 05801711a7 ref(video-layout): get pinned ID directly from redux 2018-06-01 10:42:57 -07:00
Leonard Kim 57f7abc6dd ref(video-layout): get dominant speaker state from redux
Instead of keeping dominant speaker locally, get it from redux and be
updated when the dominant speaker changes. This is in an attempt to mimic
the video layout being reactified and connected to redux.
2018-06-01 10:42:57 -07:00
Leonard Kim 7de8b96a07 feat(filmstrip): participant on stage displays with transparent video, not hidden 2018-05-29 14:27:07 -05:00
virtuacoplenny d4d5ef202a
ref(small-video): use css to set component visibility (#3039) 2018-05-25 13:19:51 -07: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
yanas e09949be9f feat(dark-theme): Applies dark theme on inline-dialogs, tooltips, flags and more 2017-10-20 15:29:16 -05:00
hristoterezov 969f5d67ab feat(eslint): Enable for non react files 2017-10-16 14:36:29 -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 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 38e2443ab7 feat(small-video): use AtlasKit tooltip 2017-08-21 15:16:09 -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 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
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
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