Commit Graph

261 Commits

Author SHA1 Message Date
robertpin 5f5cac0e01
fix(config,notifications) fix rendering moderator notifications (#9986)
Move DISABLE_FOCUS_INDICATOR from interface_config.js to config.js (disableModeratorIndicator).
2021-09-21 17:38:06 +02:00
Vlad Piersec 0a9b9bb41d fix(responsive-ui): Shrink self view when in portrait mode on mobile web 2021-09-21 16:47:47 +03:00
Hristo Terezov e791c4f70c fix(recorder): tile view
In the case of the recorder we were not taking into account that the
local thumbnail is not visible. This was braking the rendering  and
positioning of the thumbnails in tile view.
2021-09-17 18:20:00 -05:00
Hristo Terezov 32ed2bccec
fix(Filmstrip) fix not being able to scroll 2021-09-17 11:22:20 +02:00
Horatiu Muresan b801e0115d
fix(context-menus) Fix participant context menus/toolbar overflow menu
- on ipads, long touch open dialog now opens the context menu to the left of the thumbnail as expected
- on ipads, now we close context menus on tap out
- fix case when participant context menu's height > tileview videos' height causing scroll on videos pane
- keep toolbox open while the overflow menu is shown
- keep remote participant video thumbnail in filmstrip visible even if toolbox is hidden, if context menu is opened
- Fix bug where toolbox could be completely disabled
2021-09-14 10:43:52 +03:00
Jaya Allamsetty 40a485ec6c
Thumbnail reordering and participant pane enhancements.
* fix(participant-pane) Use the sorted participant list from redux instead of sorting it on every render making it better performant. Match the participant order with that of the order in the filmstrip. Also move the participants with raised hand to the top of the list.

* ref(filmstrip) Move enableThumbnailReordering flag to testing section.

* fix(participants) Add new selectors for getting sorted participants.
2021-09-10 13:37:05 -04:00
vp8x8 07d023968a
feat(responsive-ui): Keep aspect ratio for filmstrip self view on mobile web (#9848)
* feat(responsive-ui): Keep aspect ratio for filmstrip self view on mobile web

Right now filmstrip displays self view in landscape mode.
With these changes the aspect ratio of the self view will be maintained
so on portrait mode the thumbnail will be displayed vertically.
Of course this makes sense only on mobile web.

* Code review

* Fix height
2021-09-09 16:14:09 +03:00
Tudor D. Pop d95d52843f
feat(config) add connection indicators flags 2021-09-09 14:50:22 +02:00
Saúl Ibarra Corretgé 20a1833c6c fix(rn,filmstrip) simplify code
viewableItems always comes in order and indexes are always ascending. In
addition, if the array comes empty (I saw it happen on Android at least, when
scrolling like a maniac) we'd calculate the right value, instead of Infinity.
2021-09-01 23:35:44 +02:00
Saúl Ibarra Corretgé 36f604aab8 fix(rn,filmstrip) avoid fast scroll trigggering visibility notifications
An item won't be considered visible until it has been visible for 500ms.
2021-09-01 23:35:44 +02:00
Saúl Ibarra Corretgé 5249998ec5 fix(rn,humbnail) add key prop to array items
Fixes a React warning
2021-09-01 14:12:13 +02:00
Hristo Terezov a2bac9c3ac fix(filmstrip): sort alphabetically. 2021-08-30 11:32:16 -05:00
Hristo Terezov c2ffcdc67e fix(mobile-pagination): Disable bounce effect. 2021-08-30 11:32:16 -05:00
Hristo Terezov bb670fd90d Apply suggestions from code review
Co-authored-by: Saúl Ibarra Corretgé <saghul@jitsi.org>
2021-08-30 11:32:16 -05:00
Hristo Terezov b31ed40309 fix(mobile-pagination): address PR review comments 2021-08-30 11:32:16 -05:00
Hristo Terezov 7dd43d93b6 feat(filmstrip-pagination): mobile support. 2021-08-30 11:32:16 -05:00
Jaya Allamsetty 7827c3d1ad fix(filmstrip): Move thumbnails reordering behind a config.js flag.
enableThumbnailReordering flag (enabled by default) will be used to check if the thumbnails needs to be reodred in the UI.
2021-08-26 18:28:10 -04:00
Hristo Terezov 88a11b9f3e fix(TileView): not showing all participants. 2021-08-24 15:40:29 -05:00
Jaya Allamsetty 40099e97ec
feat(Filmstrip): Reorder the visible participants in the filmstrip. (#9707)
* feat(Filmstrip): Reorder the visible participants in the filmstrip.
The participants are ordered alphabetically and the endpoints with screenshares, shared-videos and dominant speakers (in that order) are bumped to the top of the list. The local participant is also moved to the top left corner as opposed to the bottom right corner.

* squash: Implement review comments.

* squash: store alphabetically sorted list in redux and move shared videos to top.

* squash: Use the DEFAULT_REMOTE_DISPLAY_NAME from interfaceConfig for users without a display name.
2021-08-18 18:34:01 -04:00
Calin Chitu 036ef0f387 fix(video-menu) fixed position for horizontal filmstrip view 2021-08-17 13:54:54 +03:00
Saúl Ibarra Corretgé 1433a1ee5d feat(rn,filmstrip) add 1on1 mode
When there are only 2 participants in a call, don't show the remote thumbnail,
unless the `disable1On1Mode` config option is set or the local participant pin
themselves.
2021-08-06 13:31:00 +02:00
Calinteodor 4e43a31ec9
fix(rn,bottom-sheet) fixed surface color
Also fix properly showing the remote menu.
2021-08-04 15:11:32 +02:00
Calinteodor 3c2ad24652
fix(shared-video,video-menu) add ability to stop shared video from video menu
Specifically, in the bottom sheet (on mobile) and participants pane.
2021-08-04 10:51:05 +02:00
Hristo Terezov 619acaca24 fix(Filmstrip): Send only visible endpoints to jvb 2021-07-30 11:44:16 -05:00
Mihai-Andrei Uscat 2209394d09
feat(Filmstrip): Collapse filmstrip to avoid toolbar overlap on mobile 2021-07-22 09:37:44 +03:00
Mihai-Andrei Uscat b7ab3ea052 fix(Thumbnail, Drawer): Remove hover state; Prevent outside propagation 2021-07-21 09:05:47 +03:00
Hristo Terezov 0bdc7d42c5
feat: Participants optimisations (#9515)
* fix(participants): Change from array to Map

* fix(unload): optimise

* feat: Introduces new states for e2ee feature.

Stores everyoneSupportsE2EE and everyoneEnabledE2EE to minimize looping through participants list.

squash: Uses participants map and go over the elements only once.

* feat: Optimizes isEveryoneModerator to do less frequent checks in all participants.

* fix: Drops deep equal from participants pane and uses the map.

* fix(SharedVideo): isVideoPlaying

* fix(participants): Optimise isEveryoneModerator

* fix(e2e): Optimise everyoneEnabledE2EE

* fix: JS errors.

* ref(participants): remove getParticipants

* fix(participants): Prepare for PR.

* fix: Changes participants pane to be component.

The functional component was always rendered:
`prev props: {} !== {} :next props`.

* feat: Optimization to skip participants list on pane closed.

* fix: The participants list shows and the local participant.

* fix: Fix wrong action name for av-moderation.

* fix: Minimizes the number of render calls of av moderation notification.

* fix: Fix iterating over remote participants.

* fix: Fixes lint error.

* fix: Reflects participant updates for av-moderation.

* fix(ParticipantPane): to work with IDs.

* fix(av-moderation): on PARTCIPANT_UPDATE

* fix(ParticipantPane): close delay.

* fix: address code review comments

* fix(API): mute-everyone

* fix: bugs

* fix(Thumbnail): on mobile.

* fix(ParticipantPane): Close context menu on click.

* fix: Handles few error when local participant is undefined.

* feat: Hides AV moderation if not supported.

* fix: Show mute all video.

* fix: Fixes updating participant for av moderation.

Co-authored-by: damencho <damencho@jitsi.org>
2021-07-09 15:36:19 +03:00
hmuresan f2f545a57f fix(connection-indicator) Fix detecting local/remote participant 2021-07-08 20:28:39 +03:00
Hristo Terezov e1fef8d848 fix(tile-view): when iAmRecorder=true. 2021-07-08 09:06:53 -05:00
hmuresan b995221a2b feat(thumbnails) Add changes to mobile context menu
- long touch on thumbnail opens context menu
- hide context menu icon
- add button for connection info to context menu
2021-07-06 16:46:53 +03:00
Hristo Terezov 07a69ba040 fix(pagination): keys 2021-06-23 16:57:26 -05:00
Hristo Terezov 2d319d18c3 feat: request video only for visible thumbnails. 2021-06-23 16:57:26 -05:00
Hristo Terezov 16cfda3c7a feat(Filmstrip): Pagination. 2021-06-23 16:57:26 -05:00
Steffen Kolmer e9675453e1
feat: Make Jitsi WCAG 2.1 compliant (#8921)
* Make Jitsi WCAG 2.1 compliant

* Fixed password form keypress handling

* Added keypress handler to name form

* Removed unneccessary dom query

* Fixed mouse hove style

* Removed obsolete css rules

* accessibilty background feature

* Merge remote-tracking branch 'upstream/master' into nic/fix/merge-conflicts

* fix error

* add german translation

* Fixed merge issue

* Add id prop back to device selection

* Fixed lockfile

Co-authored-by: AHMAD KADRI <52747422+ahmadkadri@users.noreply.github.com>
2021-06-10 07:48:44 -05:00
Tudor-Ovidiu Avram 3ebfb1de70 code review 2021-05-21 12:55:45 +03:00
Tudor-Ovidiu Avram 4e4ff0f60f feat(share-video) Add capability for sharing any direct link video 2021-05-20 13:00:54 +03:00
Hristo Terezov dec90bdeb8 fix(Thumbnail): Display mode typo. 2021-05-06 15:27:27 -05:00
Saúl Ibarra Corretgé 49c38a73aa fix(filmstrip) make sure it's not rendered outside of a safe area 2021-03-19 11:32:00 +01:00
Saúl Ibarra Corretgé fc27300132 fix(rn,filmstrip) simplify thumbnail height calculations 2021-03-19 11:32:00 +01:00
Saúl Ibarra Corretgé effa878fa4 fix(rn,filmstrip) simplify visibility calculation 2021-03-19 11:32:00 +01:00
Hristo Terezov f50872285d ref(Filmstrip): Use Thumbnail component. 2021-03-18 09:37:55 -05:00
hmuresan ab6790bdaa (external_api) Add command for overwriting config values. 2021-03-10 18:30:14 +02:00
Mihai-Andrei Uscat c370c05701
fix(Filmstrip): Prevent Toolbox from being shown indefinitely when hovering filmstrip 2021-01-29 15:34:37 +02:00
Steffen Kolmer ef7d425859 feat(ui) update AtlasKit components 2021-01-26 16:47:55 +01:00
Hristo Terezov db48dc3ed3 fix(Thumbnail): volume & audioLevel default values 2021-01-12 13:42:31 -06:00
Hristo Terezov e990f6984a fix(Thumbnail): Improve naming. 2021-01-12 13:42:31 -06:00
Hristo Terezov 3d97bef308 style(Thumbnail): improve readability
Co-authored-by: Saúl Ibarra Corretgé <saghul@jitsi.org>
2021-01-12 13:42:31 -06:00
Hristo Terezov 51e381a0b1 ref(Thumbnail): Create React component. 2021-01-12 13:42:31 -06:00
Tudor-Ovidiu Avram 35a586df3c fix(filmstrip) fix button not considering interface config settings 2021-01-07 14:53:11 +02:00
tmoldovan8x8 5ecb5717c7
feat(stats) add stats for mobile 2020-12-22 10:12:52 +01:00
Дамян Минков 12c835dd91
feat: Drops filmStripOnly mode. (#8074)
* feat: Drops filmStripOnly mode.

* squash: Let's make lint happy again.

* squash: Drop some css.
2020-11-10 16:21:07 -06:00
Hristo Terezov b9ccc3ad8c fix(StatusIndicators): Improve isScreenSharing check
Co-authored-by: Saúl Ibarra Corretgé <saghul@jitsi.org>
2020-10-27 13:19:52 -05:00
Hristo Terezov 68a0bdce2c ref(StatusIndicators): isScreenSharing -> redux. 2020-10-27 13:19:52 -05:00
Hristo Terezov b71d92a139 ref(StatusIndicators): Use audio muted from redux. 2020-10-27 10:16:16 -05:00
Hristo Terezov ca2343c31a ref(StatusIndicators): Use video muted from redux. 2020-10-26 11:03:31 -05:00
Saúl Ibarra Corretgé fdffb688c1 web,small-video: introduce screen-sharing indicator 2020-09-09 18:59:12 +02:00
Saúl Ibarra Corretgé 4807badac8 rn,thumbnail: introduce screen-sharing indicator 2020-09-09 18:59:12 +02:00
Saúl Ibarra Corretgé a67d0fbf6c chore: remove some cycles 2020-07-29 09:31:38 +02:00
Saúl Ibarra Corretgé 76e4929add rn,tile-view: render display name on top of participant view
Makes the tiles consistent as the participant view is equally sized and the
avatar is always centered in the tile.
2020-07-21 13:18:48 +02:00
Saúl Ibarra Corretgé e39c8d8ed6 rn,tile-view: render a larger avatar in tile view mode 2020-07-21 13:18:48 +02:00
Mihai Uscat f9d545c531 feat(chat): Make chat push content to the side in tile view 2020-07-17 11:19:18 +03:00
paweldomas bf7aa39947 ref: one place for setting max recv frame height
Moves the logic from all different places into single state
listener to combine all inputs into a single output.
2020-07-16 10:14:59 -05:00
tmoldovan8x8 df64dd8f18
rn: add youtube player for mobile app 2020-06-12 12:15:16 +02:00
Saúl Ibarra Corretgé d740752522 rn,responsive-ui: refactor dimensions detection
Use a dimensions detecting root component. The Dimensions module does not
measure the app's view size, but the Window, which may not be the same, for
example on iOS when PiP is used.

Also refactor the aspect ratio wrap component since it can be taken directly
from the store.

Last, remove the use of DimensionsDetector on LargeVideo and TileView since they
occupy the full-screen anyway.

Fixes PiP mode on iOS.
2020-06-02 16:54:28 +02:00
Bettenbuk Zoltan 0598e7369b ref: eslint-config-jitsi@1.0.3 2020-05-20 17:14:29 +02:00
paweldomas c170970992 feat(Filmstrip): accessibility label for toggle filmstrip button 2020-04-01 08:49:12 -05:00
Saúl Ibarra Corretgé d7ece58c6f fix(optimise): cope with URL interface config overrides
Regresssion from bd8a7edbd2.

When the toolbar buttons are overridden with URL parameters, our computed set of
buttons will be wrong. Thus, compute it every time and check for the
differences.
2020-03-04 07:43:52 -06:00
Hristo Terezov bd8a7edbd2
fix(optimise): mapStateToProps for some components (#5085) 2020-02-25 15:09:52 +00:00
Saúl Ibarra Corretgé bde2343951 filmstrip: don't display toolbar for SIP gateways
Note that in the usual (vertical) setup, the "toolbar" is just the hide button.
2020-02-25 15:45:41 +01:00
Saúl Ibarra Corretgé 9b141816d6 filmstrip: hide scrollbar on SIP gateways 2020-02-25 15:45:41 +01: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 5940f2890a fix(remote-control): mouse events 2020-02-07 18:57:59 +02: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
Bettenbuk Zoltan d11735b04c feat: make the hangup button first 2019-10-21 19:00:12 +02:00
Saúl Ibarra Corretgé efddb36164 thumbnail: fix accessing props 2019-09-16 13:27:10 +02:00
Saúl Ibarra Corretgé bcc1be675f thumbnail: use a functional component
Simplifies the code a bit, and we use no lifecycle methods.
2019-09-13 17:37:23 +02:00
Saúl Ibarra Corretgé d1be5742ba thumbnail: remove dead code
Audio streams are automatically played by WebRTC and this won't change, probably
ever. There is no point in having checks and an Audio component which does
nothing.
2019-09-13 17:37:23 +02:00
Saúl Ibarra Corretgé 1b27e331da thumbnail: use a more explicit prop 2019-09-13 17:37:23 +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
Bettenbuk Zoltan 8a3ddd8596 feat: SVG icons 2019-09-13 14:07:53 +02:00
Saúl Ibarra Corretgé 67dca97d1d rn,participants: don't render thumbnnail for screen-shares 2019-08-07 20:16:13 +02:00
Bettenbuk Zoltan ee2036a2a7 feat: show on stage function 2019-06-20 11:05:34 +02:00
Bettenbuk Zoltan 4c3ed190f3 feat: add ability to toggle toolbox from tile view 2019-06-20 11:05:34 +02:00
Bettenbuk Zoltan 5101f69e4e feat: don’t render moderator icon if everyone is moderator 2019-05-22 14:08:52 +02:00
Bettenbuk Zoltan 2b4ace75ae [RN] Add connection indicator 2019-04-16 17:33:23 +02:00
Bettenbuk Zoltan e5caca9cfd [RN] Add display name label to tile view 2019-04-15 18:58:15 +02:00
Bettenbuk Zoltan b791fc32fd [RN] Make BaseIndicator render simpler 2019-04-01 21:03:36 +02:00
Bettenbuk Zoltan 4e78502c9e Generalize indicators 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
Bettenbuk Zoltan 2a5adfc601 Remove some Flow annotations 2019-03-25 13:53:08 +01:00
Saúl Ibarra Corretgé c025c7e132 flow: tame the beast
🔥🔥🔥
2019-03-21 14:47:55 +01:00
Bettenbuk Zoltan e094b6516a [RN] Add color scheme support - Components 2019-02-08 11:43:21 +01:00
Bettenbuk Zoltan 5c0ae10ccb Remote video menu post-PR improvements 2019-01-09 12:13:30 +01:00
Bettenbuk Zoltan 82f6931ee8 [RN] Fix a react warning on remote video menu 2019-01-09 12:13:30 +01:00
Saúl Ibarra Corretgé 937c74f49e rn: disable touch feedback on Thumbnail
Touch feedback manifests in some ugly black border bleeding out of the thumbnail
itself. Since we already provide feedback (be that by adding the blue border in
case of pinning, or showing the menu in case of long press) the perception is
the same, without the graphical glitch.
2019-01-03 13:10:51 +01:00
Bettenbuk Zoltan 6b68fba220 [RN] Add remote video menu 2018-12-20 17:23:07 +01:00
Saúl Ibarra Corretgé 2b91745af1 [RN] Fix dominant speaker and moderator indicators
They are part of the Jitsi font now, there is no need to load them from
FontAwesome.
2018-12-03 11:27:12 +01:00
Saúl Ibarra Corretgé e452867e12 feat(cleanup): remove no longer used FontAwesome 2018-12-03 11:27:12 +01:00
Leonard Kim 486e8e35d9 ref: move all prop type declaration to flow
For the most part the changes are taking the "static propTypes" declaration off
of components and declaring them as Flow types. Sometimes to support flow some
method signatures had to be added. There are some exceptions in which more had
to be done to tame the beast:
- AbstractVideoTrack: put in additional truthy checks for videoTrack.
- Video: add truthy checks for the _videoElement ref.
- shouldRenderVideoTrack function: Some component could pass null for the
  videoTrack argument and Flow wanted that called out explicitly.
- DisplayName: Add a truthy check for the input ref before acting on it.
- NumbersList: Move array checks inline for Flow to comprehend array methods
  could be called. Add type checks in the Object.entries loop as the value is
  assumed to be a mixed type by Flow.
- AbstractToolbarButton: add additional truthy check for passed in type.
2018-11-07 17:38:10 +01:00
Leonard Kim 3bb3b4500d provide the exact classname match the tests are looking for 2018-09-14 14:40:41 -05:00
Leonard Kim 0fca0f392d feat(filmstrip): reactify the filmstrip toggle button 2018-09-14 14:40:41 -05:00
virtuacoplenny c25d6eb9a8 [RN] Implement tile view
* feat(tile-view): initial implementation for mobile

- Create a tile view component for displaying thumbnails in a
  two-dimensional grid.
- Update the existing TileViewButton so it shows a label in the
  overflow menu.
- Modify conference so it can display TileView while hiding
  Filmstrip.
- Modify Thumbnail so its width/height can be set and to prevent
  pinning while in tile view mode.

* use style array for thumbnail styles

* change ternary to math.min for expressiveness

* use dimensiondetector

* pass explicit disableTint prop

* use makeAspectRatioAware instead of aspectRatio prop

* update docs

* fix docs again (fix laziest copy/paste job I've ever done)

* large-video: rename onPress prop to onClick

* change forEach to for...of

* use truthy check fallthrough logic instead of explicit if

* put tile view button second to last in menu

* move spacer to a constant

* the magical incantation to make flow shut up
2018-09-13 17:20:22 +02:00
Ritwik Heda 1d99abc4a4 removes need for `eslint-disable-next-line react/jsx-wrap-multilines` and `eslint-diable-line no extra-parens` 2018-08-12 17:06:35 -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 34d1eb6768 ref(filmstrip): create an empty container for local filmstrip move (#3303)
* ref(filmstrip): create an empty container for local filmstrip move

This might be necessary for tile view. To support making the
local video display at the end of remote videos while in tile
view, but separateed from scrollable remote videos, moving
the local video might be necessary. By creating an empty
container, there is a target for local video to move to.

* squash: rename id
2018-07-26 12:51:15 -05:00
Bettenbuk Zoltan 96a837801e [RN] Tint active speaker thumbnail 2018-07-12 09:43:29 +02:00
Leonard Kim 880d3525db squash: pass class name into filmstrip 2018-06-28 11:06:10 -07:00
Leonard Kim c958c64ba8 ref(toolbar): remove use-new-toolbox class
Very likely I broke something subtle and I'm prepared to fix it.
2018-06-28 11:06:10 -07:00
Bettenbuk Zoltan ffd0827354 [RN] Implement Notifications on mobile 2018-06-28 12:47:50 +02:00
Bettenbuk Zoltan c95cb0e9cf [RN] Disable filmstrip separation on Android
This zOrder change fixes the issue that the scrollable filmstrip videos
rendered in front of the local participant, however there is still an
issue that needs to be fixed later: The rendered videos should have
overflow: 'hidden' property applied so then they don't get rendered when
scrolled out of the ScrollView, that property however doesn't seem to
work for Video components.
2018-05-25 09:21:26 -05:00
Saúl Ibarra Corretgé f54f5df428 [RN] Implement a new UI for the Toolbox
- 5 buttons in the (now single) toolbar
- Overflow menu in the form of a BottomSheet
- Filmstrip on the right when in wide mode
2018-05-16 12:18:38 -05:00
Lyubo Marinov 3aff4967f1 Keep buttons in their associated features
Contributing all buttons in one place goes against the designs that we
set out at the beginning of the project's rewrite and that multiple of
us have been following since then.
2018-05-15 14:12:38 -05:00
Lyubo Marinov a42496ba53 Coding style 2018-05-15 14:12:38 -05:00
Saúl Ibarra Corretgé 450400b768 feat(filmstrip): refactor filmstrip only toolbar
- Move the toolbar to the filmstrip feature
- Use all the buttons from the toolbox feature
2018-05-15 14:12:38 -05:00
Zoltan Bettenbuk 4f8fd1019b Separate local thumbnail in filmstrip (#2848)
* Separate local thumbnail in filmstrip

* style(Filmstrip.native): utilize full line length
2018-04-26 07:44:23 -05:00
virtuacoplenny 41e1c3a2e2 fix(tooltip): description prop deprecated, use content instead (#2806) 2018-04-16 10:21:01 -07:00
Saúl Ibarra Corretgé b73b51f1f4 feat(toolbox): axe the old toolbox (#2731)
This PR takes The Bulldozer Approach (R): removes the old toolbox and lots of
associated code, though not all of it. Subsequent cleanups will follow.
2018-04-08 22:03:26 -07:00
Leonard Kim d93782af8a feat(new-toolbars): initial implementation 2018-03-27 00:54:30 -05:00
paweldomas 60e03e3dec feat: add join/leave sounds on mobile
Adds base/sounds feature which allows other features to register a sound
source under specified id. A new SoundsCollection component will then
render corresponding HTMLAudioElement for each such sound. Once "setRef"
callback is called by the HTMLAudioElement, this element will be added
to the Redux store. When that happens sound can be played through the
new 'playSound' action which will call play() method on the stored
HTMLAudioElement instance.
2018-03-13 16:57:28 -05:00
virtuacoplenny 4e4713c3e2 feat(invite): be able to call numbers from the invite dialog (#2555)
* feat(invite): be able to call numbers from the invite dialog

The major changes:
- Remove DialOutDialog, its views, redux hooks, css, and images.
  Its main functionality has been moved into AddPeopleDialog.
- Modify the AppPeopleDialog styling a bit so it is wider.
- Add phone numbers to AddPeopleDialog search results. Phone
  numbers are validated in parallel with the request for people
  and then appended to the result. The validation includes
  an ajax to validate the number is recognized as dialable by
  the server. The trigger for the validation is essentially if
  the entered input is numbers only.
- AddPeopleDialog holds onto the full object representation of
  an item selected in MultiSelectAutocomplete. This is so
  selected items can be removed on successful invite, leaving
  only unsuccessful items.
- More granular error handling on invite so individual invitees
  can be removed from the selected items list.

* squash: change load state, new regex for numbers

* squash: change strings, auto prepend 1 if no country code, add reminders
2018-03-12 12:23:40 -07:00
Lyubo Marinov cacc4bd769 [RN] Dynamically adjust LargeView's Avatar to available size (Coding style: comments, flow)
Flow caught an incorrect function call.
2018-02-13 09:58:43 -06:00
Saúl Ibarra Corretgé 1419247801 [RN] Dynamically adjust LargeView's Avatar to available size
When in PiP mode the LargeView will not be large enough to hold the avatar (for
those interested in the details, our avatar's size is 200, and in PiP mode the
app is resized to about 150).

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

In addition, the LargeView component now uses DimensionsDetector to check its
own size and adjust the size prop passed to the Avatar component as needed.
2018-02-13 09:58:43 -06:00
Lyubo Marinov 240fff74c7 [RN] Add ability to enable / disable the filmstrip (Coding style: comments, naming) 2018-02-12 11:52:46 -06:00
Saúl Ibarra Corretgé 7bd8b7948f [RN] Add ability to enable / disable the filmstrip
This is only implemented for mobile at the moment, since web doesn't handle
visibility within the Filmstrip component yet, so this should be added right
then, too.
2018-02-12 10:02:34 -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
Saúl Ibarra Corretgé 9e53d40b9c [RN] Honor filmstrip visibility state 2018-02-05 15:55:05 -06:00
Saúl Ibarra Corretgé 7001208d87 [RN] Adjust filmstrip ordering based on aspect ratio
When in wide aspect ratio,, show it with the local participant on top, and the
remote ones after, sorted by join order.
2017-12-14 12:36:03 -06:00
Дамян Минков 5dbabbe44a Hides call info and invite button in iAmRecorder mode. (#2154) 2017-11-10 11:43:40 -08: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 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
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
paweldomas b74bede0e7 feat(web/RN): update React to v16 and React Native to 0.49 2017-11-02 14:32:35 +01: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
Lyubo Marinov 4bf19d73fd [RN] Fix documentation comments
* Javadoc introduced @code as a replacement of <code> and <tt> which is
  better aligned with other javadoc tags such as @link. Use it in the
  Java source code. If we switch to Kotlin, then we'll definitely use
  Markdown.

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

* Xcode is plain confused by @code and @link. The Internet says that
  Xcode supports the backquote character to denote the beginning and end
  of a string of characters which should be formatted for display as
  code but it doesn't work for me. <tt> is not rendered at all. So use
  the backquote which is rendered itself. Hopefully, if we switch to
  Markdown, then it'll be common between JavaScript and Objective-C
  source code.
2017-10-01 01:35:19 -05:00
Lyubo Marinov 2e2129fa44 Import PropTypes from prop-types
Prepare for React 16.
2017-09-27 16:24:53 -05:00
virtuacoplenny bf03e73876 feat(filmstrip): show thumbnails with toolbar and on hover (#1944)
* feat(filmstrip): show thumbnails with toolbar and on hover

* squash: reduce verbosity of logic for when to display

* squash: remove check for fake participant

Before fake participant (youtube video) would make the filmstrip
always displayed. However, youtube videos already dock the
toolbar, so filmstrip will remain displayed, so the check is
redundant.

* squash: change mouse hover listener targets
2017-09-01 16:40:05 -05:00
virtuacoplenny ef1b8fdb77 ref(1-on-1): move remote video visibility to a selector (#1922)
* ref(1-on-1): move remote visibility to a selector

Derive whether or not remote videos should display using a selector
to look across different states. A selector was chosen over using
memoized selectors (reselect) or subscribers as a first step
approach, avoiding additional mutations caused by a subscriber
updating the filmstrip state and avoiding additional api overhead
introduced by reselect.

* rename selector
2017-08-29 10:08:16 -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
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
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
Saúl Ibarra Corretgé 2968f8edf8 [RN] Make the audio muted icon consistent with the web 2017-07-07 12:27:28 -05:00
Saúl Ibarra Corretgé 8d1d3a9c42 [RN] Use same video mute indicator icon as on the web 2017-07-06 17:10:32 -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
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