Commit Graph

511 Commits

Author SHA1 Message Date
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
yanas dfe1666530 feat(fonts): Adds a new icon to the font 2016-12-21 15:00:24 -06:00
Ilya Daynatovich 984a6519fc Move welcome page logic from jquery to react 2016-12-15 07:55:43 -06:00
yanas c9488d5ee9 Separate disconnect overlay. 2016-12-05 23:38:30 -06:00
yanas 835d3c6a25 fix(PageReloadOverlay):Basic layout fix 2016-11-28 10:08:47 -06:00
Ilya Daynatovich 141c64cd00 Add new variable 2016-11-23 12:32:59 +02:00
Ilya Daynatovich 51b802da84 fix problem with popover 2016-11-23 12:27:34 +02:00
Ilya Daynatovich e2ea16ea3f Fix some ui bugs 2016-11-15 16:37:09 +02:00
yanas 5098b64666 Merge pull request #1137 from BeatC/thumbnail-avatars
Thumbnail avatars
2016-11-14 17:47:59 -06:00
Ilya Daynatovich 9bc24e1caa Fix aligning of indicator icon; Update logic for dynamically change of thumb indicators via font-size 2016-11-14 12:45:28 +02:00
Ilya Daynatovich 3bd4f1d5d8 Updated layout 2016-11-14 11:09:07 +02:00
Ilya Daynatovich f3dbeea091 Make filmstrip indicators to resize dynamically 2016-11-14 11:09:07 +02:00
Ilya Daynatovich d2ef94a7eb Fix problem with hint 2016-11-14 11:02:11 +02:00
Ilya Daynatovich 1d1d8defda Updated calculation of offset 2016-11-14 11:01:50 +02:00
Ilya Daynatovich d0127b879d fixed dropdown colors 2016-11-14 11:01:50 +02:00
Ilya Daynatovich cbc6943305 work on colors 2016-11-14 11:01:50 +02:00
Maxim Voloshin 9124aa2c87 Adjusted CSS for side toolbar elements 2016-11-14 11:01:50 +02:00
yanas 686ee1111a Merge pull request #1129 from BeatC/make-identical-text-input
Make identical text input
2016-11-11 15:45:46 -06:00
Ilya Daynatovich 5b0777d4db Made inputs identical 2016-11-11 17:22:47 +02:00
Ilya Daynatovich 12c1574f07 renamed files 2016-11-11 17:13:18 +02:00
Ilya Daynatovich 5623a06996 renamed input-control block to form-control 2016-11-11 17:13:18 +02:00
yanas ff8c6690ef Comment and empty lines removed 2016-11-10 17:27:19 -06:00
yanas 8caae4bfde Merge pull request #1111 from BeatC/FIX-clean-js-from-styles-1
Fix clean js from styles 1
2016-11-10 15:40:07 -06:00
hristoterezov 4549b766f5 Merge pull request #1131 from jitsi/suspended-detection
Suspended detection
2016-11-10 13:45:14 -06:00
yanas 45126d4f3d Merge pull request #1132 from jitsi/calculate-correct-size-for-thumbnails
Calculate correct size for thumbnails
2016-11-10 13:17:32 -06:00
yanas 42604971dc Merge pull request #1125 from BeatC/small-avatar-images
Fixed problem with resizing thumb avatars
2016-11-10 13:12:03 -06:00
Ilya Daynatovich d3df082e3d Fix thumbnail overflow 2016-11-10 11:13:31 -06:00
Ilya Daynatovich fb4e9b3c6d Work on fixing the tests 2016-11-10 13:32:12 +02:00
damencho 96b280668d Adds suspend overlay. 2016-11-09 16:32:09 -06:00
Дамян Минков 70c3c1a21c Merge pull request #1102 from jitsi/limit_display_name
Limit long display names
2016-11-09 10:51:46 -06:00