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%.
* 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.
* 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.
* 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
* 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
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.
- 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.
* 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
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.
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.
* 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
* 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.
Leonard Kim
Zoltan Bettenbuk
Saúl Ibarra Corretgé
Hristo Terezov
Дамян Минков
Lyubo Marinov
yanas
Ilya Daynatovich