* 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.
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.
* 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
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.
* 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
- 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.
* 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
* 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
* 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
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.
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.
- 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.
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...
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.
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.
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
virtuacoplenny
hristoterezov
zbettenbuk
Lyubo Marinov
Дамян Минков
yanas