Commit Graph

1040 Commits

Author SHA1 Message Date
damencho 3e1a008399 Adds copy icon next to the meeting url in info dialog. 2019-10-16 17:52:24 +01:00
Mihai Uscat 8be02f9ca1 Implement review changes 2019-10-15 06:54:54 -07:00
Mihai Uscat 3c25a4c08c Naming conventions; Add variables 2019-10-15 06:54:54 -07:00
Mihai Uscat 5ade0cad8b feat(welcome): add posibility to extend settings toolbar 2019-10-15 06:54:54 -07:00
Bettenbuk Zoltan 42271b1b89 feat: private messages 2019-10-08 18:22:45 +02:00
Leonard Kim 92e7be34e3 fix(icons): scope white svgs to Icon components 2019-09-20 07:50:41 -07:00
Bettenbuk Zoltan 8a3ddd8596 feat: SVG icons 2019-09-13 14:07:53 +02:00
Bettenbuk Zoltan a93bd422d3 feat: new invite layout 2019-08-28 13:57:33 +02:00
Bettenbuk Zoltan cfc7210ac8 feat: add send message button 2019-08-22 12:03:39 +02:00
Hristo Terezov 1d42420a36 fix(font): Bring back the missing icons. 2019-07-08 20:03:04 +01:00
Bettenbuk Zoltan a35b36d6df feat: dynamic avatar font size 2019-07-08 16:53:30 +02:00
Cristian Florin Ghita 3b750ddd5a Add video background blur 2019-07-04 06:26:32 -07:00
Bettenbuk Zoltan 72137a2811 feat: initial based avatars 2019-07-01 23:59:16 +02:00
Bettenbuk Zoltan ee2036a2a7 feat: show on stage function 2019-06-20 11:05:34 +02:00
Leonard Kim 1197c26529 fix(always-on-top): enforce circle avatar 2019-06-17 16:08:39 +02:00
Дамян Минков 64eb4b5609
Updates start silent, turning on startWithAudioMuted and few UI tweaks. (#4314)
* Updates start silent, turning on startWithAudioMuted and few UI tweaks.

Disabled mic unmute button and removes remote participants volume slider.

* Adds analytics for start silent.

* Removes extra semi colon.

* Updates lib-jitsi-meet and updates meeting info text.
2019-06-14 12:16:08 +01:00
Leonard Kim df50e7fa69 fix(large-video): make blurred background fit whole screen 2019-06-12 20:27:04 -07:00
Leonard Kim e0fdeea69b fix(large-video): do not stretch dominant speaker avatar 2019-05-24 12:00:35 -07:00
Leonard Kim e3612929f8 fix(avatar): dynamically size avatar in dynamically sizable filmstrip 2019-05-24 12:00:35 -07:00
Leonard Kim dfe5fbb702 ref(chat): change initial input size to 1 line 2019-05-15 08:06:35 -07:00
Leonard Kim e2044074ad Revert "fix(welcome-page): remove watermark container to avoid z-index wars"
This reverts commit 890151fa72.
2019-05-14 12:42:54 -07:00
Leonard Kim 5a53d7f32a fix(chat): re-fix letting long messages wrap 2019-05-14 09:20:25 -07:00
Leonard Kim 504fadaf71 ref(chat): on web, move timestamp to chat message 2019-05-14 09:20:25 -07:00
Leonard Kim a114d55fac fix(chat): ensure really long words can trigger wrapping 2019-05-09 08:25:47 -07:00
Leonard Kim fb5a45f714 feat(chat): on web, group messages by sender 2019-05-09 07:06:27 -07:00
Leonard Kim a49f62238b ref(chat): clean up extra dom 2019-05-08 08:57:00 -07:00
Leonard Kim a8233bdb84 ref(chat): move some colors to css variables 2019-05-08 08:57:00 -07:00
Leonard Kim ec2826e0fc ref(chat): make wider 2019-05-08 08:57:00 -07:00
Leonard Kim 3d9606f6da ref(chat): use somewhat transparent background 2019-05-08 08:57:00 -07:00
Leonard Kim 01458eeff9 ref(chat): add a header for holding the close button 2019-05-08 08:57:00 -07:00
Leonard Kim 0318568a30 ref(chat): add light top border on input for visual separation 2019-05-08 08:57:00 -07:00
Leonard Kim afbc622fb9 ref(chat): differentiate local and remote messages with background color 2019-05-08 08:57:00 -07:00
Leonard Kim fbc7f865ec ref(chat): change chat bubble borders based on sender
For remote chat messages, all corners should be rounded
except the top left. For local messages all corners
should be rounded except the top right.
2019-05-08 08:57:00 -07:00
Leonard Kim 2a4bac7a27 ref(chat): remove chat bubble arrow 2019-05-08 08:57:00 -07:00
Bettenbuk Zoltan 86d0d4fc22 rn: add DialInSummary 2019-05-07 18:02:14 +02:00
Leonard Kim 3f4a71c26d fix(welcome-page): remove watermark container to avoid z-index wars
By making the container 100% height and position relative, that
would cause it to overlap any static-positioned  elements below it.
The 100% makes it so that any watermarks intended for the bottom
of the page show up on the bottom of the page. However, it's not
needed because watermark stylings already try to position the
watermarks at the bottom.
2019-05-04 11:03:48 -07:00
damencho 2219298501 Updates web styling for file recording service sharing option. 2019-04-24 14:54:33 +00:00
virtuacoplenny f6c410610a
fix(toolbar): let click through gradient (#4107)
Otherwise it can eat clicks on elements it is above,
like YouTube and Etherpad controls.
2019-04-17 06:15:08 -07:00
virtuacoplenny 17627291e8
ref(css): use var for desktop drag area margin (#4104) 2019-04-16 11:45:25 -07:00
Bettenbuk Zoltan 2b4ace75ae [RN] Add connection indicator 2019-04-16 17:33:23 +02:00
Leonard Kim fd0eef4c84 fix(chat): change margins to avoid different background color 2019-04-12 22:39:09 +01:00
Leonard Kim ab022c62f5 fix(filmstrip): bring down height to avoid electron drag area 2019-04-12 22:39:09 +01:00
Leonard Kim f9c0c3e2f6 fix(chat): bring down elements to avoid electron drag area 2019-04-12 22:39:09 +01:00
virtuacoplenny ca38bd53fe
fix(chat): use css for arrow (#4097) 2019-04-12 13:59:03 -07:00
Leonard Kim b3cae9a962 fix(chat): allow smiley opener to expand in width
The chat icons are different on windows and mac, with
windows icons being bigger. By settings a specific
width on the smiley container, windows would see
part of the smiley cut off.
2019-04-12 18:29:04 +01:00
damencho f5a7e0bccb Adds provider name to fix welcomepage text.
* Removes unused ADD_PEOPLE_APP_NAME
* Moves deep-link header background and logo size as variables.
* Fixes more numbers page space in the header.
* Fixes left padding on deep-linking mobile page.
2019-03-15 11:24:18 +00:00
damencho f94db0da2c Adjust some paths to respect base. 2019-03-14 11:22:37 +00:00
Hristo Terezov cb8e9eed5e feat(subject): UI 2019-03-12 23:03:58 +00:00
Hristo Terezov 2af1e8da95 fix(remote-video-menu): Icon position 2019-03-11 17:36:58 +00:00
Дамян Минков 12d0aef686 Updates recording dialog. (#3953)
* Updates recording dialog.

* Update config.js doc.

* Adds comment and make a check more intuitive.

* Changes of using enum for recording types.
2019-03-11 09:17:21 -07:00
Hristo Terezov f439ad2999 feat(popover): Make the popover menus customizable. 2019-03-11 16:04:20 +00:00
Hristo Terezov a9d82a79ea fix(toolbar): Move buttons to overflow menu when the space isn't enough 2019-03-06 17:51:31 +00:00
damencho 40f03fedc2 Replaces emoji flags with flag from a png.
Seems like windows does not have emojis for flags.
2019-02-27 16:45:26 +00:00
Bettenbuk Zoltan b6e2701991 [RN] Add invite screen 2019-02-27 13:26:21 +01:00
damencho 555f8b3a99 Fixes toll free position. 2019-02-26 17:08:56 +00:00
Дамян Минков ea4d49f2a0
Adds new format of phoneList service and re-design dial in numbers page. (#3903)
* Adds new format of phoneList service and re-design dial in numbers page.

Adds flags and country names (with translations) for the numbers if using the new format.

* Fixes tests and fixes get default number.

* Updates swagger with new format.

* Moves html back yo table.

Fixes displaying on mobile and also the tel: URI generation. The tel: URI is tested on Android and iOS and seems to work (Android was not interpreting 'p', but both seems to like ',').

* Fixes a wrong return statement.

* Small fixes.
2019-02-26 13:32:46 +00:00
Hristo Terezov 32083fc44d fix(connection-quality): Bring back the icon. 2019-02-21 18:49:49 +00:00
Hristo Terezov c4361ed7da feat(css): configurable Videolayot and overflow menu. 2019-02-21 18:49:49 +00:00
Hristo Terezov 981600a999 fix(toolbar): button distance and colors. 2019-02-21 18:49:49 +00:00
Hristo Terezov 0d674001d2 chore(icons): Cleanup 2019-02-21 16:18:01 +00:00
Hristo Terezov f7b930409b feat(toolbox): Redesign. 2019-02-21 00:42:13 +00:00
virtuacoplenny b7133f5717
fix(large-video): do not show avatar if no url (#3871)
* fix(large-video): do not show avatar if no url

By default the large video dominant speaker avatar
has an empty src, which will result in a broken
image displaying. There is also disconnect with
non-react code trying to set an undefined src.
To prevent such until local avatar generation
work is done in the future, just don't show the
avatar.

* fix(conference): set the room instance earlier

Set the room instance on APP.conference before triggering
a redux update of the conference being set,, because
middleware can then fire and call methods on APP.conference
that depend on the room being set.

* get local participant directly from store instead of from global
2019-02-06 19:19:02 -08:00
virtuacoplenny 4d817fc6c2
fix(home): fix plus button alignment for calendar events (#3869) 2019-02-06 09:33:44 -08:00
Bettenbuk Zoltan 8a241ba2b7 [RN] Add chat functionality
Co-authored-by: DimaG <dgeorgiev06@gmail.com>
2019-01-15 11:33:12 +01:00
Leonard Kim be2bd9e2e6 chore(deps): bump @atlaskit/flag to 9.1.8 from 6.1.0
- Change the existing overrides to move the flags
  so the first flag does not cover the toolbar.
- Add a new override to disable the slide in
  animation, as it will play for each flag once
  it becomes the first flag--instead of playing
  only once when the flag queue has items.
2019-01-03 11:20:46 +00:00
Leonard Kim 50d3f46934 fix(thumbnail): re-override atlaskit theme for top toolbar
A CSS override prevents atlaskit theme from setting a
dark background on the top toolbar. With the upgrade
of the theme package the CSS class names changed.
2019-01-03 11:42:31 +02:00
Leonard Kim eb34b0b11d ref(welcome-page): remove unused atlaskit overrides
WelcomePage used to use @atlaskit/tabs to switch between
recent meetings and calendar meetings. @atlaskit/tabs is
no longer used there so remove the css hacks which made
it look more presentable.
2018-12-29 16:42:55 -08:00
Leonard Kim eeb0697e52 chore(deps): update atlaskit deps with minor or patch bumps 2018-12-20 09:31:24 +01:00
Leonard Kim 07bcb38dd6 fix(live-streaming): show message if no broadcasts are found
It's possible for the YouTube api to return zero broadcasts
or broadcasts without any streams--streams are what are
associated with stream keys. In this case, instead of showing
an empty selector or no selector, show a message with a link
to where the stream key can be obtained.
2018-12-19 22:12:44 +01:00
Leonard Kim 920c179f56 fix(live-streaming): show warning if stream key seems wrong
Provide a client-side notice if the YouTube live stream key
looks like it might be in the wrong format. Normally the
stream key looks like 4 groups of 4 numbers and letters,
each separated by a dash. The warning does not block submission
in case YouTube changes their stream key format.
2018-12-18 12:59:02 -08:00
virtuacoplenny f89f3f144f
Merge pull request #3597 from virtuacoplenny/lenny/handle-calendar-signed-out
fix(calendar): show error message if authorization fails on event fetch
2018-12-10 17:51:08 -08:00
Дамян Минков f11b6cbb1e
Replaces smileys and the logic of replacing links/emails. (#3560)
* Replaces smileys and the logic of replacing links/emails.

Now using react-emoji-render and react-linkify.

* Fixes heart emoji.

It is known that current implementation doesn't work with ascii emojis that contain < or >, like >:( >:-( </3 <\3 <3. Making those work may bring some xss issues.

* Adds '_blank' and 'noopener noreferrer' to the replaced links.

* Fixes package-lock links (http vs https).

* Fixes comments.
2018-12-03 18:01:40 +00:00
Saúl Ibarra Corretgé e452867e12 feat(cleanup): remove no longer used FontAwesome 2018-12-03 11:27:12 +01:00
Leonard Kim 9013c0db39 fix(tile-view): popovers should display over icons in other thumbnails 2018-11-29 10:50:25 -08:00
Leonard Kim 7a2c465c4a fix(calendar): show error message if authorization fails on event fetch 2018-11-06 11:56:25 -08:00
Hristo Terezov b30008e3a5 feat(welcome-page): Redesign. (#3559)
* feat(welcome-page): Redesign.

* Style adjustments.
2018-10-22 13:49:18 -05:00
damencho 2a61968566 Fixes small video's top toolbar background in dark theme. 2018-10-18 09:51:10 +02:00
yanas be4813e10d Revert "feat(cleanup): remove no longer used FontAwesome"
This reverts commit d3c5756f7a.
2018-10-17 16:27:18 -05:00
Saúl Ibarra Corretgé d3c5756f7a feat(cleanup): remove no longer used FontAwesome 2018-10-15 14:14:25 -05:00
hristoterezov af37141e3d feat(dropbox): For mobile.
This involves redesign of the web recording dialog in order to look the
same as the mobile one.
2018-09-27 01:42:59 -05:00
hristoterezov 1928efda11 fix(web/Text): p->span 2018-09-27 01:42:59 -05:00
Pratik Shah b7b43e8d9c feat(chat): convert to use React
- Change "features/chat" to support listening for new chat messages
  and storing them, removing that logic from conference.js.
- Combine chat.scss and side_toolbar_container.css, and remove unused
  scss files. Chat is the only side panel so the two concepts have
  been merged.
- Remove direct access to the chat feature from non-react and non-redux
  flows.
- Modify the i18n translate function to take in an options object.
  By default the option "wait" is set to true, but that causes
  components to mount after the parent has been notified of
  an update, which means autoscrolling down to the latest rendered
  messages does not work. With "wait" set to false, the children
  will mount and then the parent will trigger componentDidUpdate.
- Create react components for chat. Chat is the side panel
  plus the entiren chat feature. ChatInput is a child of Chat and
  is used for composing messages. ChatMessage displays one message
  and extends PureComponent to limit re-renders.
- Fix a bug where the toolbar was not showing automatically when
  chat is closed and a new message is received.
- Import react-transition-group to time the animation of the
  side panel showing/hiding and unmounting the Chat component.
  This gets around the issue of having to control autofocus if the
  component were always mounted and visibility toggled, but
  introduces not being able to store previous scroll state
  (without additional work or re-work).
2018-09-26 14:48:10 -05: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
Leonard Kim 7c88de20fe feat(deps): update atlaskit/tabs to 8.0.8
There are (at least) two changes that are breaking:
- defaultTab is gone
- The re-rendering logic looks to have been re-written so that
  passing in a new array of tabs causes a re-render, which can
  reset the currently selected tab.

The fixes involved removing defaultTab from each tab configuration,
as it is no longer respected anyway. Also, instead of letting Tabs
be uncontrolled and allowing it to set its own selected, which
would result in the first tab automatically being selected on
Tabs re-render, use Tabs a controlled prop to dicate which
tab is selected; this is accomplished by specifying a selected
prop.
2018-09-14 14:50:08 -05:00
Leonard Kim 7b71482b03 feat(deps): update atlaskit/dropdown-menu to 6.1.12
This is a pre-requisite to updating atlaskit/tabs to 8.0.8.
Without updating, clicking a dropdown menu within a tab
component within a modal, such as the language selector in
the settings dialog, will lock the browser.
2018-09-14 14:50:08 -05:00
Leonard Kim 72922130a2 fix(calendar): allow text to wrap and grow tile
Long meeting titles and urls can force text outside of the
tile.
2018-09-11 10:30:24 -05:00
yanas 31cc63b757 Add join button to calendar events. (#3408)
* Add joing button to the calendar events.

* Add space between calendar lines.

* Adjust recent list name.

* Fixes test failure.

* Restyle mobile recent list message.

* Add analytics events.

* Addressing PR review comments.
2018-08-31 18:03:35 -07:00
Leonard Kim deb58798ba fix(tile-view): stop using border on active-speaker, shadow only
The border changes the tile sizing, due to box-sizing, and that
messes with the video aspect ratio.
2018-08-29 12:41:42 -05:00
Leonard Kim 07ccb0a386 fix(tile-view): hide any horizontal overflow 2018-08-29 12:41:42 -05:00
yanas 86caf52d08 Welcome page calendar ui improvements (#3405)
* Welcome page calendar ui improvements

* Addressing PR review comments.
2018-08-27 17:56:17 -07:00
yanas f2cb15ba44
[WiP] Calendar integration ui (#3395)
Calendar integration ui
2018-08-27 10:13:59 -05:00
hristoterezov 2704b2f822 fix(dropbox): Address code review comments. 2018-08-16 13:53:43 -05:00
hristoterezov df0e107ea6 feat(recording): Implement dropbox integration 2018-08-16 13:53:43 -05:00
Дамян Минков 7eda31315f Google & Microsoft calendar API integration (#3340)
* Refactor calendar-sync feature to be loaded on web.

For the web part it just adds new property to enable/disable calendar web integration, disabled by default.

* Initial implementation of retrieving google calendar events.

* Initial implementation of retrieving microsoft calendar events.

* Fixes comments.

* Rework to use the promise part of microsoft-graph-client api.

* Moves dispatching some actions, fixing comments.

* Makes sure we do not initializeClient google-api client multiple times.

* Do not try to login when fetching calendar entries.

The case where there is a calendar type google selected, but not logged in, trying to login on loading welcome page will show a warning that it tried to open a popup, which was denied by browser.

* Updates profile display data on sign in.

* Propagate google-api state to calendar-sync only if we use google cal.

* Adds sign out action.

* Clears the event listener when the popup closes.

* Clears calendarIntegrationInstance on signOut.

* WIP: UI for calendar settings, refactor auth flows

* Clean up some unused constants, functions and exports.

* break circular dependency of function and constant

* Exports only isCalendarEnabled from functions.

* Checks isSignedIn when doing fetchCalendarEntries on web.

* address comments

List microsoftApiApplicationClientID in undocument config.

remove unused SET_CALENDAR_TYPE action

use helper for calendar enabled in bootstrap

reorder actions

reorder imports

change order of signin -> set type -> update profile

add logging for signout error

reword setting dialog desc to avoid redundancy

add jsdoc to microsoft button props

reorder calendar constants

move default state to reducer (not reused anywhere)

update comment about calendar-sync due to removal of getCalendarState

update comment for getCalendarIntegration

remove vague comment

alpha order reducer, return default state on reset

alpha order persistence registry

remove unnecessary getType from apis

update comments in microsoftCalendar

alpha order google-api exports, use api.get in loadGoogleAPI

set jsdoc for google signin props

alpha order googleapi methods

fix calendartab docs

* Moves fetching calendar from APP_WILL_MOUNT to SET_CONFIG.

The web part needs configuration in order to refresh tokens (Microsoft).

* Fixes storing token expire time and refreshing tokens in Microsoft impl.

* Address comments

updateProfile changed to getCurrentEmail

rename result to results

stop storing integration in redux, store if ready for use

use existing helpers to parse redirect url

* update jsdocs, get google app id from redux

* clear integration instead of actual sign out
2018-08-15 13:11:54 -07:00
virtuacoplenny 87c010a9bd
fix(subtitles): adjust styling for tile view (#3365)
- Increase z-index so the subtitles display over tiles.
- Add a background to the subtitle text.
- In general make the subtitles narrower.
2018-08-14 17:44:21 -07:00
Boris Grozev 195462a1a8 Merge branch 'master' into pr/3223 2018-08-08 15:35:40 -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
Radium Zheng dda7568a48 UI: refine LocalRecordingInfoDialog 2018-08-08 09:19:28 +10:00
Radium Zheng 7822831b1e UI: add a "Local Recording" label 2018-08-08 09:19:28 +10:00
hristoterezov fb75180632 ref(RecentList): Improvements after review. 2018-08-03 11:25:03 -05:00
Ritwik Heda 046b06e436 added recent list 2018-08-03 11:25:03 -05:00
Nik b8daf0a9f9 [WEB] add UI for transcription (#3213)
* [WEB] add UI for transcription

* add analytics event for button, do not use global APP object

* use props instead of state, use local conference to kick participant

* put imports in alphabetical order

* add translation for TranscribingLabel

* fix merge conflict

* add closed caption button

* purge OverFlowMenuItem which starts and stops Transcription

* readd closed caption icon and fix small issues due to purge

* delete unused icon in _font.scss
2018-07-26 09:33:40 -07:00
virtuacoplenny 39f1958300
ref(filmstrip): apply filmstrip class to Conference root (#3294)
* ref(filmstrip): apply filmstrip class to Conference root

Instead of apply the layout class to the body, it can be
applied to Conference. This will allow easier switching
between tile filmstrip and horizontal/vertical filmstrip.

* squash: fix typo filstrip
2018-07-25 13:00:00 -07:00
virtuacoplenny a36b341865 ref(popover): allow for popover content from the right (#3302)
* ref(popover): allow for popover content from the right

Popovers contents can display to the left of the trigger
and above the trigger. Add the ability to display to the
right of the trigger my adding mouseover padding. This
may be needed for tile view, depending on where the triggers
are located.

* squash: abstract common css proprties into placeholder class
2018-07-25 13:28:36 -05:00
virtuacoplenny 9a6e5c67f5
feat(tile-view): add new toolbar icon (#3292) 2018-07-25 08:22:18 -07:00
virtuacoplenny 50ea847905 Refactor welcome page in prep for branding (#3230)
* fix(welcome-page): css tweaks in prep for branded welcome page

- Watermarks should no longer depend on toolbar size. The left watermark made
  room for the toolbar when the toolbar was on the left side of the screen, but
  the toolbar has been moved to the bottom. The right watermark...well it'll
  clash with the vertical filmstrip but at least the margins will be consistent
  with the left watermark.
- Apply new font-family so fonts are more likely to be consistent across the
  app. Design likes SF UI and keeps requesting it so use it by default.
- Change sizings of welcome page header to be more responsive. This will help
  the header be scrollable when there is no additional content and the header
  overflows.
- Change colors of the welcome page header and remove background image that
  was in the header. Leave in the dom for the background image in case other
  deployments need to continue showing an image.
- Add a period to the title of the welcome page.
- Move watermarks dom location as it is not part of the header; it's part of the
  whole page.

* [squash] Size and font adjustments. Renaming.
2018-07-24 14:26:17 -05:00
Leonard Kim 2cd1b7f80b fix(presence-label): set position for small video presence label only 2018-07-20 13:27:28 -05:00
virtuacoplenny c62f761d67 fix(dial-in): allow scroll on dial in info page (#3271)
* fix(dial-in): allow scroll on dial in info page

* squash: some more tweaks for flexible sizing
2018-07-20 10:32:28 -05:00
Nik d3dd54ac3b Show subtitles when Jigasi sends transcription results in JSON (#1914)
* Show subtitles when Jigasi sends transcription results in JSON

* fix: Import PropTypes from prop-types.

* apply feedback on initial PR

* Changed Object to Map, alphabetic ordering fixes ,css changes in transcription subtitles

* Sends Map of transcriptMessages as prop to Component

* Documentation fixes and uses config in redux state

* Minor doc fix

* rename feature 'transcription' to 'subtitles'

* Moves subtitles config to interfaceConfig and minor fixes

* minor lint fix
2018-07-17 12:31:12 -05:00
virtuacoplenny 0dcf8ef2f6
fix(device-selection): add hover color for device output test (#3254) 2018-07-13 10:08:35 -07:00
hristoterezov 9331b0870b fix(presence-label):styles 2018-07-09 20:22:43 -05:00
hristoterezov 769e782c6f feat(callee-info): Redesign. 2018-07-09 20:22:43 -05:00
Bettenbuk Zoltan e59761baa2 Implement ToolboxItem features: disabled, tooltip with label 2018-07-03 11:08:37 +01:00
Leonard Kim 2547ee3a04 ref(filmstrip): use explicit class for horizontal filmstrip
This will make it easier to support horizontal, vertical, and
tile layout filmstrip by reducing the css overriding needed
for tile layout.
2018-06-29 20:11:59 +01:00
Leonard Kim 0aa2d81844 ref(filmstrip): move vertical filmstrip container styles to own file 2018-06-29 20:11:59 +01:00
Leonard Kim e1f7d4585e ref(filmstrip): move some video container overrides 2018-06-29 20:11:59 +01:00
Leonard Kim bdae4b9493 ref(filmstrip): remove ie11 css flex hack 2018-06-29 20:11:59 +01:00
Leonard Kim 8f688c3535 ref(filmstrip): move around small video and quality label styles 2018-06-29 20:11:59 +01:00
Leonard Kim 60ae8497c0 ref(filmstrip): move some small video specific styling to own file 2018-06-29 20:11:59 +01:00
Leonard Kim 7c1b7a588e ref(filmstrip): move filmstrip styles to filmstrip folder 2018-06-29 20:11:59 +01:00
Leonard Kim fd05f120ff ref(filmstrip): move vertical filmstrip overrides to new filmstrip folder 2018-06-29 20:11:59 +01:00
Leonard Kim d9fa05f42e ref(filmstrip): move toolbar css to own file 2018-06-29 20:11:59 +01:00
Leonard Kim 12901be6be ref(filmstrip): move presence label styles with similar styles 2018-06-29 20:11:59 +01:00
Zoltan Bettenbuk 009eeccf3c
Merge pull request #3142 from virtuacoplenny/lenny/new-audio-output-icon
feat(device-selection): new icon for audio output
2018-06-29 14:50:46 +02:00
Leonard Kim 98e3bcb691 feat(device-selection): new icon for audio output 2018-06-28 14:59:07 -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
Saúl Ibarra Corretgé 87fa8de815 feat(sanity): axe IE and Temasys plugin support 🔥🔥🔥 2018-06-28 13:55:12 +02:00
Bettenbuk Zoltan ffd0827354 [RN] Implement Notifications on mobile 2018-06-28 12:47:50 +02:00
Leonard Kim e431acda18 ref(css): add height/width reset for html tag
This is needed for newer versions of electron that might
use the iframe integration of jitsi-meet. Newer versions
seem to have some kind of regression with setting height
and width to 100%.
2018-06-21 12:39:55 -05:00
Leonard Kim fecd138a3c fix(recording): red error text for google api errors 2018-06-20 23:09:43 -05:00
Hristo Terezov 1f8fa3b6d4 Refactor settings modal (#3121)
* feat(settings): setting dialog

- Move device selection, profile edit, language select, moderator
  options, and server auth into one modal with tabs.
- Remove side panel profile and settings and logic used to update
  them.
- Pipe server auth status into redux to display in the settings
  dialog.
- Change filmstrip only device selection popup to use the new
  stateless settings dialog component.

* squash: do not show profile tab if not guest

* squash: profile button not clickable if no profile to show

* squash: nits

* ref: Settings dialog.
2018-06-20 13:19:53 -07:00
Дамян Минков ac834326e7
Token based features (#3075)
* Adds an option to disable features based on token data.

Reverts changes from b84e910086, removes disableDesktopSharing option and an interface_config option.

* Disable recording button based on token features data.

Hide recording if local participant isGuest and roles based on token.
When enableUserRolesBasedOnToken is enabled we were not hiding the record button for guests.

* Adds filtering of jibri iqs and rayo based on features.

Moves feature checking in separate utility function.
Renames utility method.

* Adds a footer text when outbound-call is not feature enabled.

* Fixes comments.
2018-06-15 13:10:22 -05:00
Leonard Kim 78866b0dd7 fix(toolbar): ensure centered toolbar
Maybe there is a case that can be triggered somehow where
the toolbar becomes off center.
2018-06-12 13:07:24 -05: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
virtuacoplenny f608ad4e5e
feat(toolbar): add beta tag to live streaming button (#3007)
* feat(toolbar): add beta tag to live streaming button

* tweak colors and border radius
2018-05-21 15:16:38 -07:00
Leonard Kim 12d7ab9026 ref(layout): use css to make video layout containers fit window
Instead of using JS, just use CSS 100% width and height. This
also resolves a jitter that occurs on edge when a modal's
container appends to the body.
2018-05-18 15:34:40 -05:00
virtuacoplenny ee74f11c3d
feat(recording): frontend logic can support live streaming and recording (#2952)
* feat(recording): frontend logic can support live streaming and recording

Instead of either live streaming or recording, now both can live together. The
changes to facilitate such include the following:
- Killing the state storing in Recording.js. Instead state is stored in the lib
  and updated in redux for labels to display the necessary state updates.
- Creating a new container, Labels, for recording labels. Previously labels were
  manually created and positioned. The container can create a reasonable number
  of labels and only the container itself needs to be positioned with CSS. The
  VideoQualityLabel has been shoved into the container as well because it moves
  along with the recording labels.
- The action for updating recording state has been modified to enable updating
  an array of recording sessions to support having multiple sessions.
- Confirmation dialogs for stopping and starting a file recording session have
  been created, as they previously were jquery modals opened by Recording.js.
- Toolbox.web displays live streaming and recording buttons based on
  configuration instead of recording availability.
- VideoQualityLabel and RecordingLabel have been simplified to remove any
  positioning logic, as the Labels container handles such.
- Previous recording state update logic has been moved into the RecordingLabel
  component. Each RecordingLabel is in charge of displaying state for a
  recording session. The display UX has been left alone.
- Sipgw availability is no longer broadcast so remove logic depending on its
  state. Some moving around of code was necessary to get around linting errors
  about the existing code being too deeply nested (even though I didn't touch
  it).

* work around lib-jitsi-meet circular dependency issues

* refactor labels to use html base

* pass in translation keys to video quality label

* add video quality classnames for torture tests

* break up, rearrange recorder session update listener

* add comment about disabling startup resize animation

* rename session to sessionData

* chore(deps): update to latest lib for recording changes
2018-05-16 07:00:16 -07:00
virtuacoplenny d62ac72cfa Various pixel pushing, tooltip copy changes (#2918)
* fix(toolbar): make button hover bigger

* fix(toolbar): make hangup button bigger

* fix(always-on-top): make toolbar and buttons same sizes as main toolbar

* fix(toolbar): change some tooltips

* fix(toolbar): adjust side panel and filmstrip for new toolbar sizes
2018-05-04 13:10:48 -07:00
Leonard Kim 3091d9e6dd fix(feedback): remove textarea overflow hiding to allow scrolling
I'm unsure why all textareas need overflow hidden. Doing so
essentially overrides what I would expect to be standard textarea
behavior. I would rather remove the reset and fix any areas that
have issues.
2018-05-02 16:53:06 -05:00
Leonard Kim 0831c16d7e fix(large-video): apply blur to only one container 2018-05-01 17:11:16 -05:00
virtuacoplenny aaf2f428e6 feat(recording): new label for live streaming (#2890) 2018-04-29 21:30:07 -07:00
virtuacoplenny f4060975d1
feat(device-selection): design tweaks (#2802)
- Change copy
- Add labels to dropdowns
- Adjust color and positioning
2018-04-27 18:43:11 -07:00
virtuacoplenny 0a0256501c feat(recording): new icon when recording is active (#2884)
- Update font files to add new icon.
- Update markup and style so the icon has a small background
  to fill in the text of the icon.
- Remove some css transitions that don't seem to do much.
2018-04-26 14:24:52 -07:00
virtuacoplenny e098ad87f4 feat(icons): add new recording button icon (#2834)
* feat(icons): add new recording button icon

* feat(toolbar): show different rec/streaming icon
2018-04-26 10:26:41 -07:00
virtuacoplenny 2c4a3b0f60 Show the YouTube live stream URL (#2837)
* feat(recording): show the YouTube live stream URL

- From the start live stream dialog, push up the broadcast ID
  of the chosen broadcast. It is assumed the ID can be used to
  create the YouTube link.
- Listen for lib-jitsi-meet to emit updates of the known live
  stream URL, shove it into redux, and have InfoDialog display
  it.

* ref(info): pass in dial in and live stream url

Passing these values in should trigger AtlasKit InlineDialog
to re-render and reposition itself.

* ref(info): use conference existence as trigger for autoshowing dialog

* feat(info): add live stream link to invite copy

* Revert "ref(info): use conference existence as trigger for autoshowing dialog"

This reverts commit 1072102267.

* hidden -> url

* _onClickHiddenURL -> _onClickURLText
2018-04-20 10:28:16 -07:00
Leonard Kim a86ca3f41c fix(toolbar): set recording icon size to prevent resizing flash
There is a slight moment when the recording icon is loading that
its container does not have width. Set the width of the container
so it doesn't collapse. Also, push it a little to the right so
it aligns better with other icons.
2018-04-18 13:57:53 -05:00
Leonard Kim c029663b77 fix(toolbar): move chat counter and stop its pointer events
The chat counter needs to be moved out of the way of the chat
button. The counter started covering the button when all the
toolbar buttons were made smaller. Also, turning off the
counters pointer events should at least make the button
clickable if this ever happens again.
2018-04-18 13:57:45 -05:00
Leonard Kim 09482f053b ref(toolbar): remove main css for old toolbar 2018-04-17 20:22:00 +02:00
virtuacoplenny 8e42a7b034
fix(toolbar): make toolbar smaller (#2808) 2018-04-16 14:17:03 -07:00
virtuacoplenny 4bd94fc94c
fix(invite): tweak invite modal copy and avatar sizes (#2818) 2018-04-16 13:58:20 -07:00
hristoterezov eb19f94598 Deeplinking (#2760)
* feat(Deeplinking): Implement for web.

* ref(unsupported_browser): Move the mobile version to deeplinking feature

* feat(deeplinking_mobile): Redesign.

* fix(deeplinking): Use interface.NATIVE_APP_NAME.

* feat(dial_in_summary): Add the PIN to the number link.

* fix(deep_linking): Handle use case when there isn't deep linking image.

* fix(deep_linking): css

* fix(deep_linking): deeplink -> "deep linking"

* fix(deeplinking_css): Remove position: fixed

* docs(deeplinking): Add comment for the openWebApp action.
2018-04-13 17:00:40 -07:00
virtuacoplenny 2a55548b84 fix(info): hide anchor hover colors for the call url (#2807)
The call url is an anchor element so that right clicking it
can bring up the copy link option in the context menu.
Clicking on it does a no-op so the anchor was colored to
look like plain text. Hovering over it right now makes it
look like an anchor due to some atlaskit color, so supress
the coloring.
2018-04-13 10:15:29 -07:00
Leonard Kim 5cf16a20d3 ref(always-on-top): refactor to stop using old toolbar components 2018-04-13 10:09:04 +02:00
virtuacoplenny 157800c494 fix(toolbar): video quality button shows current video quality (#2761) 2018-04-11 13:04:40 -07:00
virtuacoplenny 3285d647e6 feat(feedback): tweak styling (#2791)
- Green stars
- Label for feedback box
- Adjust margins/padding
2018-04-11 11:31:03 -07:00
Leonard Kim 4f157b71f3 ref(toolbar): remove custom (old) InviteButton dropdown config 2018-04-11 10:35:01 +02:00
Leonard Kim c377219013 feat(info): invite url as an anchor for copying from context menu 2018-04-10 09:41:38 +02:00
Leonard Kim 1eee20dd5a ref(toolbar): remove contact list 2018-04-10 09:34:52 +02:00
virtuacoplenny d8ad39ed3f fix(welcome-page): modify styling for narrow screens (#2724)
* fix(welcome-page): modify styling for narrow screens

* squash: fix autoscrolling on mobile safari
2018-04-09 15:50:57 -05:00
Leonard Kim 0cd32c8155 fix(filmstrip-only): override Atlaskit background for transparency 2018-04-06 15:18:05 -05:00
Leonard Kim 45adf3e26a fix(toolbar): adjust sizings and colors 2018-04-06 15:17:58 -05:00
Leonard Kim 1f0dc6fcd8 fix(feedback): modify user-select none declaration for edge 2018-04-06 15:17:42 -05:00
virtuacoplenny 2f23f8e400 Info dialog: bold labels, no url truncation, only auto show on lonely call (#2619)
* fix(info): bold info labels

* fix(info): do not truncate url

* feat(info): show only during a lonely call
2018-04-04 08:58:54 -07:00
Leonard Kim e7223c49ef fix(feedback): let star label color be inherited from atlaskit 2018-03-30 14:23:01 -05:00
Leonard Kim 40154b1feb fix(toolbar): tweak chat backgrounds to be darker 2018-03-29 13:38:42 -05:00
Leonard Kim b4eae56eed fix(toolbar): css hacks to raise notifications 2018-03-28 13:52:04 -05:00
virtuacoplenny 8bf69d30b7 fix(toolbar): make darker for better text contrast (#2667)
* fix(toolbar): make darker for better text contrast

* squash: borrow some atlaskit colors
2018-03-27 15:30:04 -07:00
Leonard Kim d93782af8a feat(new-toolbars): initial implementation 2018-03-27 00:54:30 -05:00
virtuacoplenny 823481dc1d feat(recording): use google api to get stream key (#2481)
* feat(recording): use google api to get stream key

* squash: renaming pass

* squash: return full load promise

* sqush: use google api state enum

* squash: workaround for lib not loading

* another new design...

* increase timeout workaround for gapi load issue

* styling pass

* tweak copy

* squash: auto select first broadcast
2018-03-21 11:26:52 -07:00
Leonard Kim 71e368f70e squash: override atlaskit styles for dropdowns to display clearer 2018-03-20 16:06:50 -05:00
Leonard Kim 134ff71c78 feat(modals): use dark theme 2018-03-20 16:06:50 -05:00
virtuacoplenny 309fcf9672 fix(filmstrip): fix local video alignment with no invite button (#2629)
Hardcoding an offset from the bottom of 32px causes issues in
horizontal filmstrip when there is no invite button, because
then the local video just displays 32px from the bottom as there
is no button to take up space above it. Instead leverage flex
alignments to align the bottom of the video to the bototm of
the filmstrip.
2018-03-20 12:28:09 -07:00
zbettenbuk 1020a54a33 Add Android navigation bar 2018-03-13 18:04:17 -05:00
zbettenbuk ae0bf876a8 Add conference notification 2018-03-13 18:04:16 -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
Leonard Kim 8f520086e5 fix(info): do not show dial in numbers without a room specified
For the static page an error message displays stating no room
was specified. On mobile for unsupported browsers, the dial in
info will not show.
2018-03-09 17:18:10 -06:00
Leonard Kim 0d3b4eedf8 fix(info): make some text selectable for manual copying 2018-03-06 13:47:55 -06:00
zbettenbuk 04690dfc8f Facelift Welcome screen 2018-02-26 18:39:48 -06:00
Leonard Kim 6fbe78eb34 fix(welcome-page): change font family and spacing 2018-02-23 11:35:02 -06:00
Leonard Kim 1f82ce3d19 feat(unsupported-browser): show dial-in for mobile
- Move the existing components for the static dial in page into
  a separate folder for easier reuse.
- Reuse those components for displaying dial-on numbers on the
  mobile page for unsupported browsers.
- Modify those components to support having tel protocol
  links on the dial-in numbers.
- Have DialInSummary, formerly DialInInfoPage, respect a
  passed in className prop for easier styling differences.
2018-02-22 17:29:03 -06:00
Leonard Kim 68b710a222 fix(dial-in): allow text select in numbers page 2018-02-22 17:29:03 -06:00
virtuacoplenny 74a92f83c7 feat(welcome): new design (#2492)
* feat(welcome): new design

* squash: update strings

* squash: copy/paste error?

* squash: remove welcome page disabling checks

* squash: change strings again

* squash: background var

* squash: title and desc css as variables
2018-02-21 22:58:55 -06:00
virtuacoplenny e47802538e ref(invite): remove InviteDialog (#2483)
* ref(invite): remove InviteDialog

InviteDialog functionality has been moved into InfoDialog.
The InviteButton has been temporarily hacked to show one
of its dropdown options instead as the button. Future
work will bring in a redesigned InviteModal that the button
will open.

* squash: filter invalid options and map valid options

* squash: update strings
2018-02-17 13:53:39 -06:00
virtuacoplenny 59d046dca9 feat(info): new dialog design (#2452)
* feat(info): new dialog design

- Add display of a dial in number.
- Add a static page to show a full list of dial in numbers.
- Add password management.
- Invite modal will be changed soon to remove password and
  dial-in.

* squash: add classes for torture tests

* squash: class for local lock for torture tests

* squash: more classes for torture tests

* squash: more classes, work around linter

* squash: remove unused string?

* squash: work around linter and avoid react warnings

* squash: pixel push, add bold

* squash: font size bump

* squash: NumbersTable -> NumbersList

* squash: document response from fetching numbers

* squash: showEdit -> editEnabled, pixel push padding for alignment

* squash: pin -> conferenceID

* squash: prepare to receive defaultCountry from api
2018-02-13 13:46:47 -06: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 112c856850 Fix settings screen layout on iOS and add soft back button 2018-01-18 15:45:25 -06:00
zbettenbuk 410dc132e1 Fix settings screen layout on iOS and add soft back button 2018-01-18 10:06:26 -06:00
Leonard Kim e217c172f8 ref(toolbar): re-wrap buttons for torture tests
The inline classes for the toolbars were re-arranged
to fix non-rounded corners in the always-on-top window's
toolbar. However, those classes were also used by the
torture tests as a way to find stable elements that will
not get blown away by a react re-render. So re-wrap the
buttons with a div that will not get blown away,
add back the inline classes to those divs, and change
the CSS to round the corners in the always-on-top
window's toolbar.
2017-12-26 16:08:40 -06:00
Lyubo Marinov 1e0550c746 [RN] Add recent-list feature 2017-12-19 19:15:01 -06:00
Zoltan Bettenbuk 45c405de0e [RN] Add recent-list feature 2017-12-19 18:35:51 -06:00
Дамян Минков e0e2104723 Updates mobile browser page buttons. (#2281) 2017-12-11 15:45:57 -08:00
virtuacoplenny 1984f8d0c0 fix(vertical-filmstrip): scope previous Firefox scroll fixes (#2276)
In aa93a783, remote videos not scrolling on Firefox, IE, and
Edge was worked around using CSS. The CSS selector is too vague
and also catches horizontal filmstrip. The selector should
apply to vertical filmstrip only.
2017-12-11 11:03:24 -08:00
Leonard Kim 457b4255b9 fix(welcome-page): leverage existing table display to vertical align 2017-12-06 15:55:32 -08:00
Leonard Kim bed9bd1d5a fix(welcome-page): use inline-block for alignment 2017-12-06 15:51:21 -08:00
damencho 67ac0e8b8a Updates the unsupported mobile browser page. 2017-12-05 09:52:44 -06:00
Leonard Kim b258a9fc5e ref(css): move aui css to jitsi-meet 2017-12-05 08:50:13 -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 d79995e14c fix(aot): Toolbar styles (#2252)
Rounded corners on the first and last buttons. Size of the hangup button
on hover.
2017-12-04 20:23:51 -08:00
hristoterezov 5ffcaca649 feat(aot): Handle video not available use cases (#2242) 2017-12-04 19:27:17 -08:00
Leonard Kim 40df5f97d4 fix(vertical-filmstrip): no scrollbars on Firefox from single thumbnail
Something is causing firefox to show scrollbars on the remote videos
container even though there is plenty of room. I lost this battle
and just made the container taller...
2017-12-04 21:12:57 -06: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 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
Leonard Kim f0d3abffc5 ref(overlay): convert progress bar to react 2017-11-21 14:45:43 -08:00
Leonard Kim 30be46326a fix(remote-menu): show volume slider whenever available 2017-11-15 16:25:44 -06:00
Leonard Kim 77f9a0641a fix(welcome-page): allow scrolling
Overflow on body was set to hidden, likely because of
various tricks used to hide elements off screen in the
SPA. Overflow hidden also has the benefit of hiding
scroll bounce when using a MacBook touchpad. The
welcome page is the exception that needs scrolling,
so style welcome page to scroll.

A couple others had made pull requests to addrses this issue
but there hasn't been follow up.
2017-11-15 15:07:04 -06:00
virtuacoplenny dc26b17d8b feat(keyboard-shortcuts): show help in a react dialog (#2148)
* feat(keyboard-shortcuts): show help in a react dialog

- Move shortcut help dom declaration to a react component
- Let open/close logic be handled by AtlasKit Dialog
- Remove static html for help from index.html
- Consolidate keyboard shortcut css

* squash: use lozenge for key styling

* squash: use different iteration style

* squash: update package-lock for lozenge
2017-11-13 16:58:00 -06:00
virtuacoplenny 5c464a7bda feat(audio-only): be able to lock a browser into capturing audio only (#2125)
* feat(audio-only): be able to lock a browser into capturing audio only

* squash: try to make string more clear about audio only support

* squash: final strings
2017-11-09 13:59:16 -08:00
Leonard Kim 92dbdade39 fix(filmstrip-only): set width for toolbar popovers
The popovers in filmstrip only are displaying thinly.
As a quick workaround, set a width on them. There
should only be one anyway, which shows up when
talking while muted.
2017-10-31 14:42:16 -05:00
Leonard Kim c345c0d5e8 fix(filmstrip): do not apply flex on local video for horizontal mode
Firefox flex behaves differently from chrome. In firefox, flex
is not allowing the local video and invite button to exceed
the height of the parent, causing the local video to display
shorter than expected due to the invite button. Flex doesn't
need to be applied for local video in horizontal filmstrip
mode as it's only needed in vertical filmstrip mode to
flip the position of the invite button from above the local
video to below. Honestly, this could be better off done
declaratively in the html, but that's not as straigtforward
in this jquery+react world.
2017-10-31 14:42:16 -05:00
Leonard Kim a8cc65ab9a fix(filmstrip-only): do not re-align local video for invite button
The bottom alignment of the local video container is adjusted
in horizontal filmstrip mode so that the videos remain evenly
aligned at the top but the invite button sticks out. With
the invite button hidden in filmstrip only, this only caused
misalignment. Re-adjust the local video container back down
and put transitions on the filmstrip wrapper itself, instead
of on the thumbnail wrapper level to avoid transitions
when re-adjusting.
2017-10-31 14:42:16 -05:00
Leonard Kim 9233a1026a fix(filmstrip-only): first and last toolbar buttons get rounded edges
All toolbar buttons (which have the class .button) got wrapped
in additional elements due to atlaskit tooltips. This changed
parent/child relationships within the html hierarchy, and the
filmstrip only toolbar selectors needed updating.
2017-10-31 14:42:16 -05:00
yanas e09949be9f feat(dark-theme): Applies dark theme on inline-dialogs, tooltips, flags and more 2017-10-20 15:29:16 -05:00
hristoterezov c7b0028652 feat(desktop-picker): Add spinner and disable button if sources aren't initialized. 2017-10-20 13:52: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
virtuacoplenny cfe4564ab3 feat(info): automatically show the info dialog (#2018)
* ref(info): be able to open dialog through store

* feat(info): automatically show the info dialog

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

* squash: change to show on start, hide later

* squash: update naming and comment
2017-09-29 15:27:23 -05:00
virtuacoplenny 802d347574 ref(contact-list): remove invite functionality (#2017)
* ref(contact-list): remove invite functionality

Removing becuase there is already a toolbar button dedicated
to opening the invite dialog. Now the contact list focuses
on showing current participants.

* squash: remove unused strings and styling

* squash: add plural to panel title
2017-09-29 13:29:44 -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 46b75e5178 ref(info): new component for showing meeting info 2017-09-25 08:42:00 -05:00
Leonard Kim 31729d7949 feat(contact-list): convert to react
- Remove references to the model ContactList.
- Replace ContactListView with an empty element for attaching
  the React Component ContactListPanel, which has the same
  features as the old ContactListView.
- Create new selector for getting non-fake participants for
  ContactListPanel's props.
- Create a ParticipantCounter component to place in the contact
  list button. Previously ContactListView updated that but now
  it's a react component hooked into the participant state.
- Remove pub/sub that was used only by ContactListView.
2017-09-06 12:11:33 -05:00
Leonard Kim 4938d1b6de fix(contact-list): update avatar sizing
With interfaceConfig.SHOW_CONTACTLIST_AVATARS, the avatars in the
contact list are too big and will overlap each other. Constrain
the avatar sizes and make each contact a little taller to better
space each out.
2017-08-31 16:21:31 -05:00
yanas b9f2ab7692 Make watermark size configurable 2017-08-30 14:01:41 -05:00
Leonard Kim af92ba5e86 fix(toolbar): push buttons further from top of side toolbar 2017-08-30 11:10:28 -05:00
Leonard Kim 5e4f921e1b ref(video-quality-label): do not show quality dialog 2017-08-30 11:10:28 -05:00
hristoterezov 70422f4a47 fix(alwaysontop): change the size of the toolbar 2017-08-28 14:52:31 -05: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
Leonard Kim 85f0ad2791 feat(popover): create a wrapper around InlineDialog 2017-08-24 22:00:14 -05:00
Leonard Kim c54879d605 fix(video-quality-label): push around z-indexes for firefox 2017-08-24 22:00:14 -05:00
Leonard Kim fdee6dc360 fix(inline-dialog): reimplement popover display on mouse move
Create empty elements within InlineDialog content that can be
used to bridge mouse movement from the InlineDialog trigger to
the InlineDialog content. The empty elements are positioned
absolute so they can break out of the InlineDialog container
and not affect popper's position calculations.
2017-08-24 22:00:14 -05: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
Leonard Kim 20379da236 ref(css): remove unused popover.scss 2017-08-17 17:22:38 -05:00
virtuacoplenny 3e3577766d fix(quality-slider): prevent resizing by making p2p warning hidden (#1890)
* fix(quality-slider): prevent resizing by making p2p warning hidden

Instead of removing and appending the p2p warning, make it always
appended but toggle visibility so it always takes up space. This
should prevent resizing when the warning appears. Margin and
padding were adjusted to account for the empty space displayed
by a hidden p2p warning.

* let vertical size change
2017-08-15 15:22:32 -05:00
Leonard Kim 5e4d3de8fd fix(filmstrip): re-adjust z-indexes for tooltip display 2017-08-15 14:36:53 -05:00
virtuacoplenny 1b7973a28e ref(invite): use AtlasKit for invite modal buttons and inputs (#1868)
* ref(invite): use AtlasKit for invite modal buttons and inputs

- Convert button to AK Button.
- Convert inputs to AK FieldText.

* remove noop, replace with custom empty func
2017-08-15 14:30:57 -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
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 bd4766648a fix(filmstip-only): apply background color to toolbar 2017-08-04 13:55:42 -05: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
Leonard Kim 3e84d8b3b6 ref(dial-out): use AtlasKit FieldText for inputs
- Swap the telephone input with FieldText.
- Swap the dropdown trigger input with FieldText for styling
  consistency with the telephone input.
- Wrap the dropdown trigger so it can be modified with jitsi css.
- Use flexbox to have the trigger and input align horizontally
  but have the input take up width if the trigger is not displayed.
2017-07-31 11:44:56 -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
yanas b0ffe2e63f Remove primary toolbar splitter (#1811) 2017-07-21 14:21:39 -07:00
yanas 06234066b6 Fixes some styles and variables (#1809)
* Fixes some toolbox/toolbar styles and variables

* [squash] Fixes variable name to fit better its purpose

* [squash] Fixes secondary toolbar variable name
2017-07-21 12:45:04 -07:00
yanas 3e1dc298c8 Removes unneeded css styles 2017-07-14 14:49:28 -05: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
yanas 7ebd2b2cd4 Fix(base.scss): Don't restyle inputs, selects and buttons 2017-07-13 14:15:07 -05:00
yanas 2e2b1d47c0 Changes video thumbnail menu icon 2017-07-12 17:22:07 -05:00
yanas 4ccd5c6072 Fix(AddPeopleDialog): Close dialog on submit (#1761)
* Fix(AddPeopleDialog): Fixes error state and close dialog

* (to-squash) Addresses comments
2017-07-12 08:35:00 -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
yanas f5d443d194 User Picker Implementation 2017-07-10 09:56:38 -07: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 129e54e262 fix(remote-menu): position volume slider in vertical center for firefox 2017-07-05 15:34:11 -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
Leonard Kim ae67b2b28e fix(vertical-filmstrip): enable hardware acceleration for icons
Icons on the thumbnails can flicker when scrolling through videos.
To give rendering a bit more power, and thereby help with rendering
icons without flickering, force hardware acceleration.
2017-07-05 13:24:08 -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
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 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
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 1a87ee5f93 fix(filmstrip): adjust filmstrip remote videos positioning
- For horizontal mode, remove extra spacing created by borders
  around local video and remote videos.
- For vertical mode, ensure remote videos grow only to fill the
  parent height.
2017-06-13 14:52:43 -05:00
Leonard Kim 9837181d5d fix(popover): z-index should be greater than toasts
Currently, the JitsiPopover z-index will cause it to display below
any toast notifications so this changes modifies the z-index
values so JitsiPopover is higher than the notification toasts.
2017-06-08 09:37:40 -05:00
hristoterezov 96e83989a5 feat(device_selection): Implement popup 2017-06-07 09:23:40 -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
paweldomas 5c5864e94a font(jitsi): add ninja icon 2017-06-06 11:13:02 -05:00
yanas e128c03f56 Merge pull request #1602 from virtuacoplenny/lenny/video-label-hover
fix(video-label): Show darker background on hover
2017-05-24 20:58:49 -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 346980308b fix(video-label): Show darker background on hover 2017-05-24 15:32:58 -07:00
Leonard Kim 27f968e753 fix(filmstrip-only): hide video label, always show remote thumbnails 2017-05-24 13:23:21 -07:00
yanas a2ebc169e4 Merge pull request #1598 from virtuacoplenny/lenny/status-label-z
fix(video-label): modify z-index and cursor
2017-05-24 14:52:11 -05:00
Leonard Kim 3d0226ccd0 fix(video-label): modify z-index and cursor
- Change z-index so any tooltips that display over the label,
  particularly in vertical filmstrip mode, actually hide the label.
- Change the cursor to be a pointer so the label looks clickable.
- Remove unused audio-only-label styling.
2017-05-24 10:33:26 -07:00
Leonard Kim acb4d12928 fix(vertical-filmstrip): do not move recording label if not in the corner 2017-05-23 17:14:48 -07:00
yanas 600f7bcf7b Merge pull request #1594 from jitsi/fix-scrollbars
Re-styles scrollbars
2017-05-23 16:26:29 -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
yanas dc5a29a976 Re-styles scrollbars 2017-05-23 15:17:46 -05: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 1d60300016 Merge pull request #1592 from virtuacoplenny/lenny/slider-width
fix(volume-slider): modify positioning so slider fits popup width
2017-05-23 10:15:36 -05:00
yanas 4464a11314 Changes telephone icon 2017-05-23 09:00:40 -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 a1476c68f1 fix(audio-only): remove button from toolbar and set label cursor
Audio only mode will be toggleable only from the VideoStatusLabel,
so remove AudioOnlyButton from the toolbar and delete the component
itself. As a result of the button being removed, a truthy check in
VideoStatusLabel was also removed to ensure it will display as it
is now the only way to toggle audio only mode. Also set the cursor
on VideoStatusLabel to always be default, so it can never show the
text cursor.
2017-05-22 14:46:05 -05:00
yanas 7900b9c294 Merge pull request #1577 from virtuacoplenny/lenny/invite-conference-number
feat(invite): Add conference id to dial-in numbers display
2017-05-22 11:08:18 -05:00
Leonard Kim 3a99ef512e SQUASH: add comment to styling and alpha order 2017-05-19 15:41:42 -07:00
Leonard Kim 80989147ad feat(video-label): Add dropdown for toggling audio only
Add a menu that displays when hovering over VideoStatusLabel. The menu's
display is controlled by CSS. As the existing AudioOnlyLabel no longer needs
needs its own tooltip, it has been removed and label display logic has been
moved into VideoStatusLabel.
2017-05-18 13:09:34 -05:00
Leonard Kim 47c07c2e76 feat(invite): Add conference id to dial-in numbers display
DialInNumbersForm has been modified to display a conference id to be used for
dialing into the conference. The changes include:
- Requesting the conference id and adding the conference id to the redux store
- Displaying the conference id in DialInNumbersForm
- Modifying the copy behavior to support copying the new message to clipboard
- DialInNumbersForm does not display until all ajax requests have completed
  successfully. This eliminates the need for the REQUESTING state.
2017-05-17 10:25:07 -07:00
Leonard Kim 929bc8b8b9 fix(device-selection): do not reuse tracks in previews
Device selection has live previews that reuse the current local
audio and video tracks for the sake of internet explorer. This
means when the local video was muted, device selection would
show a muted message. It is preferred to show a live preview
even when muted.

The changes include:
- Passing device ids into DeviceSelectionDialog, not tracks.
- Setting default selected devices to use for live previews.
- Removing all checks in DeviceSelectionDialog involving local tracks.
- Catching and displaying errors when creating a live video preview.
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
Leonard Kim 8ada06cfe3 fix(filmstrip): Set avatar container height within inlay
In the filmstrip inlay, the avatar container holds the avatar
image. The image is set to 100% height, so it displays entirely
in the container. However, this does not adjust the horizontal
space created by the image in firefox, leaving whitespace to the
right of the avatar. The fix is to set the container height to
100% so that all its content will fit inside, automatically
adjusting the space created by the image width.
2017-05-04 11:46:10 -07:00
Leonard Kim d7cccacc12 feat(invite): include dial-in numbers in the invite modal
Create a new React Component for displaying a list of dial-in
numbers. The Component will fetch the numbers from a new
numberRetreviewUrl key/value set in config. If not present in
config, the Component will not be displayed.
2017-05-01 12:47:35 -07:00
Leonard Kim 4e95dbf0e5 fix(device-selection): do not create a dropdown menu if disabled
AtlasKit DropdownMenu cannot be disabled, unlike Single Select.
The result is the isDisabled prop was not being honored. The
workaround is returning only the trigger element for the dropdown
and styling it to look like the dropdown is disabled. The text
for disabled device selection was changed along the way to fit
into the trigger.
2017-04-26 14:29:32 -07:00
yanas e804548b22 Merge pull request #1529 from virtuacoplenny/lenny/device-overflow-stopgap
fix(device-selection): convert trigger element to a div
2017-04-21 17:05:33 -05:00
Leonard Kim 283140d16a fix: do not apply user-select none to inputs
Safari will prevent proper input behavior when user-select none
is applied. It prevents such actions as putting in a room lock
password or setting a room lock password. Other browsers allow
selecting on inputs while user-select is none.
2017-04-21 11:10:47 -07:00
Leonard Kim 17fc28b020 fix(device-selection): convert trigger element to a div
AtlasKit Dropdown was recently updated to support fitting the
width of its container. However, AtlasKit Button, the trigger
element currently used for the dropdowns, does not fit the width
of AtlasKit Dropdown and stll has text overflowing out of its
button when there is an iconBefore prop passed in. Instead of
using AtlasKit Button, use a div and mimic the button look. This
allows the "button" to fit the container width and can display
ellipsized text within itself.
2017-04-20 19:34:02 -07:00
Saúl Ibarra Corretgé 7be8e3e1e9 Merge pull request #1523 from virtuacoplenny/lenny/mute-overlay-black
fix(device-selection): show black background only when video muted
2017-04-20 15:16:53 +02: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
hristoterezov f6ef727573 fix(overlay): Make the overlays on top of everything 2017-04-19 17:09:22 -05:00
Leonard Kim 1045cb56fe fix(device-selection): show black background only when video muted
On certain modal dimensions, the black background of the video
preview could peek through, making it look like the video has a
black line. The change is to remove the black background from
showing by default and having it only display when the video is
muted. Also, the video preview dimension stylings have been
changed to facilitiate smoother size adjusting with modal size
changes.
2017-04-19 14:51:51 -07:00
Leonard Kim 3e518e8040 feat: convert device selection modal to use AtlasKit Dropdown
Instead of using AtlasKit Single-Select, use Dropdown. Dropdown
differs in that an icon can be specified for the trigger element,
whereas Single-Select currently supports icons for all elements,
and Dropdown can show all options incuding the already-selected
option.

This change does introduce the issue of the trigger element not
taking up 100% width of the parent. Supporting such would involve
overriding AtlasKit CSS. The compromise made here was to do a
generic override of max-width so the trigger elements at least
stay within the parent and aligning the trigger elements to the
right.
2017-04-18 16:08:03 -05:00
Leonard Kim f9585430bb fix: set a default color for text in modal dialogs
Some atlaskit components, such as field-text, inherit text color.
This is a problem with components that are white as they will
inherit $defaultColor, which is a light gray. So instead, for
the atlaskit modal, set a color for all the form content so it
can be inherited instead.
2017-04-18 14:14:26 -05:00
Ilya Daynatovich adc2260b63 Add dialpad icon 2017-04-14 14:21:16 +03:00
Leonard Kim 07cd6a8b88 fix: set button font-size for modals
Atlaskit at times will have localized styling for font-size and
sometimes will not. The button component will inherit its
font-size whereas selectors have localized font-size of 14px. For
consistency, the cancel/submit buttons on the atlaskit modals
will also have 14px. The atlaskit story book examples also use
buttons with 14px font-size.
2017-04-11 10:35:59 -07: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
yanas 77b789e26a Implements a filmstrip-only mode for the toolbox 2017-04-10 09:36:25 -05:00
yanas 8be85de6ef Changes scss variable name 2017-04-10 09:31:26 -05:00
Ilya Daynatovich da4425b5c0 React Toolbar 2017-04-03 13:05:21 -05:00
virtuacoplenny 2301732e2d style: catalog all z-indexes and move toolbar down
All z-indexes found in css files have been moved into css
variables. If the z-index is used only once, the variable
name will be the same as the selector it is used in. If
the z-index is used multiple times, then the plain name
of $zindex# was used. This allowed a more confident
moving down of the toolbar so that the new modal dialog,
with z-index 500, could display on top of it.

#1436
2017-03-30 18:13:00 +01:00
virtuacoplenny 24ee8eb16a electron: add desktop picker
#1411
2017-03-30 17:58:31 +01:00
hristoterezov 3ae99ea0b9 feat(overlays): for filmstrip only mode 2017-03-27 14:20:25 -05:00
Leonard Kim 989161159d Modal dialog for displaying dominant speaker times 2017-03-20 12:47:20 -05:00
Ilya Daynatovich 59a74153dc Toolbar notice as React Component 2017-03-20 11:27:08 -05:00
Ilya Daynatovich 905212b109 Enable flow for written code 2017-02-27 21:50:20 -06:00
Ilya Daynatovich 05b7df26e6 Add no mobile app component 2017-02-27 21:50:20 -06:00
Ilya Daynatovich 1268afd3f8 Added unsuported browser and plugin required pages 2017-02-27 21:50:20 -06:00
yanas 4979666a89 Merge pull request #1342 from jitsi/filmstriponly_transparent
fix(filmstriponly): Set the background to transparent
2017-02-23 16:11:35 -06:00
Leonard Kim 02b26a65bb Volume slider for remote participant audio elements 2017-02-23 09:01:40 -08:00
Дамян Минков 554595acd7 Merge pull request #1348 from jitsi/restyle-range-inputs
Re-styles range inputs for Chrome and FF.
2017-02-22 21:44:46 -06:00
yanas ee4ddd5446 Fixes indentation 2017-02-22 17:14:09 -06:00
yanas ebab617a12 Re-styles range inputs for Chrome and FF. 2017-02-22 16:49:56 -06:00
hristoterezov b6990e9e5d fix(filmstriponly): Set the background to transparent 2017-02-21 13:45:46 -06:00
hristoterezov 92d0589a37 ref(overlay): The overlays to use React 2017-02-18 17:03:50 -06:00
yanas d84901f196 Font size adjustment and moving link to config param 2017-02-15 17:57:57 -06:00
damencho a1b3c56de7 Uses tooltip to show custom popups for mute mic button/shared video button. 2017-02-15 11:29:26 +02:00
yanas f6f730b994 Lower the margin between video thumbnails 2017-02-06 15:34:05 -06:00
yanas 542e61357e Adds new combined camera and mic icon 2017-02-02 17:10:02 -06:00
Дамян Минков 900a675864 Merge pull request #1269 from jitsi/border-radius-fix
Fixes border radius.
2017-01-26 17:55:01 -06:00
yanas 23935d3d39 Fixes border radius. 2017-01-26 17:04:29 -06:00
Дамян Минков 3fd33d0f50 Merge pull request #1262 from jitsi/ui-fixes
Ui fixes
2017-01-26 10:15:39 -06:00
Lyubomir Marinov cbcee201f0 Comply w/ coding style 2017-01-26 07:58:46 -06:00
Ilya Daynatovich 2e81b8493e Introduce unsupported browser page 2017-01-26 07:27:31 -06:00
Lyubomir Marinov 7de5c9c1d2 Comply w/ coding style 2017-01-26 07:27:31 -06:00
Ilya Daynatovich 58a4f59fd8 Implement Landing component 2017-01-26 07:27:31 -06:00
Ilya Daynatovich 0c851934fb layout for mobile landing 2017-01-26 07:27:31 -06:00
yanas cd5e84e4ef Fixes network problem message position 2017-01-25 16:54:51 -06:00
yanas 09ba14eb04 Fixes video thumbnail border and large video background color 2017-01-25 16:53:58 -06:00
hristoterezov a4d5c41b3a feat(remotecontrol): UI for requesting permissions 2017-01-23 15:29:25 -06:00
Lyubomir Marinov 28b44cf67c Consistency 2017-01-15 12:09:02 -06:00
yanas 1604fa6584 Fixes and adjustments of UI layout 2017-01-09 15:32:25 -06:00