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.
* 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
* 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
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.
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.
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.
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.
* 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
* 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
* 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
* 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.
- 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.
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.
* 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
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.
* 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
* 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
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.
* 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
* 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
* 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
* 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
- 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.
* 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
* Fixes some toolbox/toolbar styles and variables
* [squash] Fixes variable name to fit better its purpose
* [squash] Fixes secondary toolbar variable name
* 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
* 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
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.
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.
- 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.
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.
- 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.
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.
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.
* 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
- 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.
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.
- 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
- 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
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
@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.
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.
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.
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.
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.
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.
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.
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.
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.
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
Leonard Kim
yanas
hristoterezov
Ilya Daynatovich
paweldomas
Saúl Ibarra Corretgé
Lyubo Marinov
Дамян Минков
Lyubomir Marinov