feat(audio-menu) Redesign audio picker menu (#12899)

Convert some files to TS
Remove unnecessary files
Implement redesign
Add noise suppression to picker menu
Fix Popover placement on browser resize
This commit is contained in:
Robert Pintilii 2023-02-13 16:01:08 +02:00 committed by GitHub
parent 533deea5fd
commit 22ded30b61
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
17 changed files with 438 additions and 619 deletions

View File

@ -2,13 +2,13 @@
display: inline-block;
&-content {
background: $menuBG;
border-radius: 3px;
font-size: 14px;
line-height: 24px;
position: relative;
right: auto;
margin-bottom: 8px;
max-height: 456px;
overflow: auto;
width: 300px;
&-ul {
margin:0;
padding:0;
@ -16,90 +16,37 @@
}
}
&-header {
color: #fff;
align-items: center;
display: flex;
margin-top: 8px;
padding: 8px 16px;
&-icon {
display: inline-block;
svg {
fill: #fff;
}
}
&--bordered {
border-bottom: 1px solid #4C4D50;
}
&-text {
margin-left: 12px;
}
}
&-entry {
align-items: center;
color: #fff;
cursor: pointer;
display: flex;
padding: 8px 0;
margin-left: 48px;
&--selected {
background: #131519;
&-header:hover {
background-color: initial;
cursor: initial;
margin-left: 0;
padding-left: 18px;
}
&-text {
color: #fff;
&-entry-text {
display: inline-block;
line-height: 24px;
text-overflow: ellipsis;
max-width: 213px;
overflow: hidden;
white-space: nowrap;
&.left-margin {
margin-left: 36px;
}
}
&-speaker {
position: relative;
&-ul {
margin:0;
padding:0;
list-style-type: none;
}
&:hover, &:focus-within, &:focus {
.audio-preview-entry {
background: #36383C;
margin-left: 0;
padding-left: 48px;
&--selected {
padding-left: 18px;
background: $newToolbarBackgroundColor;
}
}
.audio-preview-test-button {
display: inline-block;
}
.audio-preview-entry-text {
max-width: 178px;
margin-right: 0;
}
}
&:last-child {
padding-bottom: 8px;
}
.audio-preview-entry-text {
max-width: 238px;
}
@ -108,19 +55,6 @@
&-microphone {
position: relative;
&:hover {
.audio-preview-entry {
background: #36383C;
margin-left: 0;
padding-left: 48px;
&--selected {
background: $newToolbarBackgroundColor;
padding-left: 18px;
}
}
}
&--nometer {
.audio-preview-entry-text {
max-width: 238px;
@ -140,42 +74,21 @@
display: inline-block;
width: 14px;
& svg {
fill: #1C2025;
}
&--check {
background: #31B76A;
margin-right: 16px;
}
&--exclamation {
margin-left: 6px;
& svg {
fill: #E54B4B;
}
}
}
&-hr {
border-top: 1px solid #4C4D50;
border-bottom: 0;
}
&-test-button {
display: none;
background: #FFF;
border: 1px solid #D1DBE8;
border-radius: 3px;
color: #1C2025;
cursor: pointer;
font-weight: 600;
font-size: 0.8rem;
line-height: 24px;
padding: 2px 8px;
padding: 4px 10px;
position: absolute;
right: 16px;
top: 5px;
top: 6px;
}
&-meter-mic {
@ -184,9 +97,7 @@
top: 14px;
}
// Override @atlaskit/InlineDialog container which is made with styled components
& > div:nth-child(2) {
outline: none;
padding: 0;
&-checkbox-container {
padding: 10px 16px;
}
}

View File

@ -3,28 +3,28 @@
display: inline-block;
& > svg {
fill: #4E5E6C;
fill: #525252;
width: 38px;
}
}
&.metr--disabled {
& > svg {
fill: #4E5E6C;
fill: #525252;
}
}
}
.metr-l-0 {
rect:first-child {
fill: #31B76A;
fill: #1EC26A;
}
}
@for $i from 1 through 7 {
.metr-l-#{$i} {
rect:nth-child(-n+#{$i+1}) {
fill: #31B76A;
fill: #1EC26A;
}
}
}

View File

@ -1,4 +1,4 @@
<svg width="38" height="12" viewBox="0 0 38 12" fill="#5E6D7A" xmlns="http://www.w3.org/2000/svg">
<svg width="38" height="12" viewBox="0 0 38 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="3" height="12" rx="1" />
<rect x="5" width="3" height="12" rx="1" />
<rect x="10" width="3" height="12" rx="1" />

Before

Width:  |  Height:  |  Size: 457 B

After

Width:  |  Height:  |  Size: 487 B

View File

@ -52,7 +52,7 @@ const DEFAULT_STATE: ISettingsState = {
};
export interface ISettingsState {
audioOutputDeviceId?: string | boolean;
audioOutputDeviceId?: string;
audioSettingsVisible?: boolean;
avatarURL?: string;
cameraDeviceId?: string | boolean;
@ -108,6 +108,7 @@ Object.keys(DEFAULT_STATE).forEach(key => {
// we want to filter these props, to not be stored as they represent
// what is currently opened/used as devices
// @ts-ignore
filterSubtree.audioOutputDeviceId = false;
filterSubtree.cameraDeviceId = false;
filterSubtree.micDeviceId = false;

View File

@ -34,6 +34,8 @@ const getComputedOuterHeight = (element: HTMLElement) => {
interface IProps {
[key: `aria-${string}`]: string;
/**
* Accessibility label for menu container.
*/
@ -59,6 +61,11 @@ interface IProps {
*/
hidden?: boolean;
/**
* Optional id.
*/
id?: string;
/**
* Whether or not the menu is already in a drawer.
*/
@ -98,6 +105,11 @@ interface IProps {
* Callback for the mouse leaving the component.
*/
onMouseLeave?: (e?: React.MouseEvent) => void;
/**
* Tab index for the menu.
*/
tabIndex?: number;
}
const MAX_HEIGHT = 400;
@ -146,6 +158,7 @@ const ContextMenu = ({
className,
entity,
hidden,
id,
inDrawer,
isDrawerOpen,
offsetTarget,
@ -153,7 +166,8 @@ const ContextMenu = ({
onKeyDown,
onDrawerClose,
onMouseEnter,
onMouseLeave
onMouseLeave,
tabIndex
}: IProps) => {
const [ isHidden, setIsHidden ] = useState(true);
const containerRef = useRef<HTMLDivElement | null>(null);
@ -217,11 +231,14 @@ const ContextMenu = ({
isHidden && styles.contextMenuHidden,
className
) }
id = { id }
onClick = { onClick }
onKeyDown = { onKeyDown }
onMouseEnter = { onMouseEnter }
onMouseLeave = { onMouseLeave }
ref = { containerRef }>
ref = { containerRef }
role = 'menu'
tabIndex = { tabIndex }>
{children}
</div>;
};

View File

@ -13,6 +13,11 @@ export interface IProps {
*/
accessibilityLabel: string;
/**
* Component children.
*/
children?: ReactNode;
/**
* CSS class name used for custom styles.
*/
@ -54,6 +59,11 @@ export interface IProps {
*/
onKeyPress?: (e?: React.KeyboardEvent) => void;
/**
* Whether the item is marked as selected.
*/
selected?: boolean;
/**
* TestId of the element, if any.
*/
@ -62,7 +72,7 @@ export interface IProps {
/**
* Action text.
*/
text: string;
text?: string;
/**
* Class name for the text.
@ -97,6 +107,12 @@ const useStyles = makeStyles()(theme => {
}
},
selected: {
borderLeft: `3px solid ${theme.palette.action01Hover}`,
paddingLeft: '13px',
backgroundColor: theme.palette.ui02
},
contextMenuItemDisabled: {
pointerEvents: 'none'
},
@ -124,6 +140,7 @@ const useStyles = makeStyles()(theme => {
const ContextMenuItem = ({
accessibilityLabel,
children,
className,
customIcon,
disabled,
@ -132,6 +149,7 @@ const ContextMenuItem = ({
onClick,
onKeyDown,
onKeyPress,
selected,
testId,
text,
textClassName }: IProps) => {
@ -145,6 +163,7 @@ const ContextMenuItem = ({
className = { cx(styles.contextMenuItem,
_overflowDrawer && styles.contextMenuItemDrawer,
disabled && styles.contextMenuItemDisabled,
selected && styles.selected,
className
) }
data-testid = { testId }
@ -152,13 +171,15 @@ const ContextMenuItem = ({
key = { text }
onClick = { disabled ? undefined : onClick }
onKeyDown = { disabled ? undefined : onKeyDown }
onKeyPress = { disabled ? undefined : onKeyPress }>
onKeyPress = { disabled ? undefined : onKeyPress }
role = 'menuitem'>
{customIcon ? customIcon
: icon && <Icon
className = { styles.contextMenuItemIcon }
size = { 20 }
src = { icon } />}
<span className = { cx(styles.text, textClassName) }>{text}</span>
{text && <span className = { cx(styles.text, textClassName) }>{text}</span>}
{children}
</div>
);
};

View File

@ -1,14 +1,21 @@
// @flow
import React, { Component } from 'react';
import { WithTranslation } from 'react-i18next';
import { connect } from 'react-redux';
import { translate } from '../../../../base/i18n';
import { IconMic, IconVolumeUp } from '../../../../base/icons';
import { IReduxState, IStore } from '../../../../app/types';
import { translate } from '../../../../base/i18n/functions';
import { IconMic, IconVolumeUp } from '../../../../base/icons/svg';
import JitsiMeetJS from '../../../../base/lib-jitsi-meet';
import { equals } from '../../../../base/redux';
import { createLocalAudioTracks } from '../../../functions';
import { equals } from '../../../../base/redux/functions';
import Checkbox from '../../../../base/ui/components/web/Checkbox';
import ContextMenu from '../../../../base/ui/components/web/ContextMenu';
import ContextMenuItem from '../../../../base/ui/components/web/ContextMenuItem';
import ContextMenuItemGroup from '../../../../base/ui/components/web/ContextMenuItemGroup';
import { toggleNoiseSuppression } from '../../../../noise-suppression/actions';
import { isNoiseSuppressionEnabled } from '../../../../noise-suppression/functions';
import { isPrejoinPageVisible } from '../../../../prejoin/functions';
import { createLocalAudioTracks } from '../../../functions.web';
import AudioSettingsHeader from './AudioSettingsHeader';
import MicrophoneEntry from './MicrophoneEntry';
import SpeakerEntry from './SpeakerEntry';
@ -22,56 +29,66 @@ const browser = JitsiMeetJS.util.browser;
* @param {Function} t - The translation function.
* @returns {string}
*/
function transformDefaultDeviceLabel(deviceId, label, t) {
function transformDefaultDeviceLabel(deviceId: string, label: string, t: Function) {
return deviceId === 'default'
? t('settings.sameAsSystem', { label: label.replace('Default - ', '') })
: label;
}
export type Props = {
export interface IProps extends WithTranslation {
/**
* The deviceId of the microphone in use.
*/
currentMicDeviceId: string,
currentMicDeviceId: string;
/**
* The deviceId of the output device in use.
*/
currentOutputDeviceId: string,
currentOutputDeviceId?: string;
/**
* Used to decide whether to measure audio levels for microphone devices.
*/
measureAudioLevels: boolean,
/**
* Used to set a new microphone as the current one.
*/
setAudioInputDevice: Function,
/**
* Used to set a new output device as the current one.
*/
setAudioOutputDevice: Function,
/**
* A list of objects containing the labels and deviceIds
* of all the output devices.
*/
outputDevices: Object[],
measureAudioLevels: boolean;
/**
* A list with objects containing the labels and deviceIds
* of all the input devices.
*/
microphoneDevices: Object[],
microphoneDevices: Array<{ deviceId: string; label: string; }>;
/**
* Invoked to obtain translated strings.
* Whether noise suppression is enabled or not.
*/
t: Function
};
noiseSuppressionEnabled: boolean;
/**
* A list of objects containing the labels and deviceIds
* of all the output devices.
*/
outputDevices: Array<{ deviceId: string; label: string; }>;
/**
* Whether the prejoin page is visible or not.
*/
prejoinVisible: boolean;
/**
* Used to set a new microphone as the current one.
*/
setAudioInputDevice: Function;
/**
* Used to set a new output device as the current one.
*/
setAudioOutputDevice: Function;
/**
* Function to toggle noise suppression.
*/
toggleSuppression: () => void;
}
type State = {
@ -79,8 +96,8 @@ type State = {
* An list of objects, each containing the microphone label, audio track, device id
* and track error if the case.
*/
audioTracks: Object[]
}
audioTracks: Array<{ deviceId: string; hasError: boolean; jitsiTrack: any; label: string; }>;
};
/**
* Implements a React {@link Component} which displays a list of all
@ -88,9 +105,8 @@ type State = {
*
* @augments Component
*/
class AudioSettingsContent extends Component<Props, State> {
class AudioSettingsContent extends Component<IProps, State> {
_componentWasUnmounted: boolean;
_audioContentRef: Object;
microphoneHeaderId = 'microphone_settings_header';
speakerHeaderId = 'speaker_settings_header';
@ -101,13 +117,11 @@ class AudioSettingsContent extends Component<Props, State> {
* @param {Object} props - The read-only properties with which the new
* instance is to be initialized.
*/
constructor(props) {
constructor(props: IProps) {
super(props);
this._onMicrophoneEntryClick = this._onMicrophoneEntryClick.bind(this);
this._onSpeakerEntryClick = this._onSpeakerEntryClick.bind(this);
this._onEscClick = this._onEscClick.bind(this);
this._audioContentRef = React.createRef();
this.state = {
audioTracks: props.microphoneDevices.map(({ deviceId, label }) => {
@ -120,23 +134,6 @@ class AudioSettingsContent extends Component<Props, State> {
})
};
}
_onEscClick: (KeyboardEvent) => void;
/**
* Click handler for the speaker entries.
*
* @param {KeyboardEvent} event - Esc key click to close the popup.
* @returns {void}
*/
_onEscClick(event) {
if (event.key === 'Escape') {
event.preventDefault();
event.stopPropagation();
this._audioContentRef.current.style.display = 'none';
}
}
_onMicrophoneEntryClick: (string) => void;
/**
* Click handler for the microphone entries.
@ -144,19 +141,17 @@ class AudioSettingsContent extends Component<Props, State> {
* @param {string} deviceId - The deviceId for the clicked microphone.
* @returns {void}
*/
_onMicrophoneEntryClick(deviceId) {
_onMicrophoneEntryClick(deviceId: string) {
this.props.setAudioInputDevice(deviceId);
}
_onSpeakerEntryClick: (string) => void;
/**
* Click handler for the speaker entries.
*
* @param {string} deviceId - The deviceId for the clicked speaker.
* @returns {void}
*/
_onSpeakerEntryClick(deviceId) {
_onSpeakerEntryClick(deviceId: string) {
this.props.setAudioOutputDevice(deviceId);
}
@ -169,7 +164,8 @@ class AudioSettingsContent extends Component<Props, State> {
* @param {Function} t - The translation function.
* @returns {React$Node}
*/
_renderMicrophoneEntry(data, index, length, t) {
_renderMicrophoneEntry(data: { deviceId: string; hasError: boolean; jitsiTrack: any; label: string; },
index: number, length: number, t: Function) {
const { deviceId, jitsiTrack, hasError } = data;
const label = transformDefaultDeviceLabel(deviceId, data.label, t);
const isSelected = deviceId === this.props.currentMicDeviceId;
@ -200,7 +196,7 @@ class AudioSettingsContent extends Component<Props, State> {
* @param {Function} t - The translation function.
* @returns {React$Node}
*/
_renderSpeakerEntry(data, index, length, t) {
_renderSpeakerEntry(data: { deviceId: string; label: string; }, index: number, length: number, t: Function) {
const { deviceId } = data;
const label = transformDefaultDeviceLabel(deviceId, data.label, t);
const key = `se-${index}`;
@ -253,9 +249,9 @@ class AudioSettingsContent extends Component<Props, State> {
* @param {Object} audioTracks - The object holding the audio tracks.
* @returns {void}
*/
_disposeTracks(audioTracks) {
_disposeTracks(audioTracks: Array<{ jitsiTrack: any; }>) {
audioTracks.forEach(({ jitsiTrack }) => {
jitsiTrack && jitsiTrack.dispose();
jitsiTrack?.dispose();
});
}
@ -283,7 +279,7 @@ class AudioSettingsContent extends Component<Props, State> {
*
* @inheritdoc
*/
componentDidUpdate(prevProps) {
componentDidUpdate(prevProps: IProps) {
if (!equals(this.props.microphoneDevices, prevProps.microphoneDevices)) {
this._setTracks();
}
@ -296,55 +292,82 @@ class AudioSettingsContent extends Component<Props, State> {
* @inheritdoc
*/
render() {
const { outputDevices, t } = this.props;
const { outputDevices, t, noiseSuppressionEnabled, toggleSuppression, prejoinVisible } = this.props;
return (
<div>
<div
<ContextMenu
aria-labelledby = 'audio-settings-button'
className = 'audio-preview-content'
hidden = { false }
id = 'audio-settings-dialog'
onKeyDown = { this._onEscClick }
ref = { this._audioContentRef }
role = 'menu'
tabIndex = { -1 }>
<div role = 'menuitem'>
<AudioSettingsHeader
IconComponent = { IconMic }
<ContextMenuItemGroup>
<ContextMenuItem
accessibilityLabel = { t('settings.microphones') }
className = 'audio-preview-header'
icon = { IconMic }
id = { this.microphoneHeaderId }
text = { t('settings.microphones') } />
<ul
aria-labelledby = 'microphone_settings_header'
aria-labelledby = { this.microphoneHeaderId }
className = 'audio-preview-content-ul'
role = 'radiogroup'
tabIndex = '-1'>
tabIndex = { -1 }>
{this.state.audioTracks.map((data, i) =>
this._renderMicrophoneEntry(data, i, this.state.audioTracks.length, t)
)}
</ul>
</div>
</ContextMenuItemGroup>
{ outputDevices.length > 0 && (
<div role = 'menuitem'>
<hr className = 'audio-preview-hr' />
<AudioSettingsHeader
IconComponent = { IconVolumeUp }
<ContextMenuItemGroup>
<ContextMenuItem
accessibilityLabel = { t('settings.speakers') }
className = 'audio-preview-header'
icon = { IconVolumeUp }
id = { this.speakerHeaderId }
text = { t('settings.speakers') } />
<ul
aria-labelledby = 'speaker_settings_header'
aria-labelledby = { this.speakerHeaderId }
className = 'audio-preview-content-ul'
role = 'radiogroup'
tabIndex = '-1'>
tabIndex = { -1 }>
{ outputDevices.map((data, i) =>
this._renderSpeakerEntry(data, i, outputDevices.length, t)
)}
</ul>
</div>)
</ContextMenuItemGroup>)
}
{!prejoinVisible && (
<ContextMenuItemGroup>
<div
className = 'audio-preview-checkbox-container'
// eslint-disable-next-line react/jsx-no-bind
onClick = { e => e.stopPropagation() }>
<Checkbox
checked = { noiseSuppressionEnabled }
label = { t('toolbar.noiseSuppression') }
onChange = { toggleSuppression } />
</div>
</div>
</ContextMenuItemGroup>
)}
</ContextMenu>
);
}
}
export default translate(AudioSettingsContent);
const mapStateToProps = (state: IReduxState) => {
return {
noiseSuppressionEnabled: isNoiseSuppressionEnabled(state),
prejoinVisible: isPrejoinPageVisible(state)
};
};
const mapDispatchToProps = (dispatch: IStore['dispatch']) => {
return {
toggleSuppression() {
dispatch(toggleNoiseSuppression());
}
};
};
export default translate(connect(mapStateToProps, mapDispatchToProps)(AudioSettingsContent));

View File

@ -1,64 +0,0 @@
// @flow
import React from 'react';
import { Icon, IconCheck, IconExclamationSolid } from '../../../../base/icons';
/**
* The type of the React {@code Component} props of {@link AudioSettingsEntry}.
*/
export type Props = {
/**
* The text for this component.
*/
children: React$Node,
/**
* Flag indicating an error.
*/
hasError?: boolean,
/**
* The id for the label, that contains the item text.
*/
labelId?: string,
/**
* Flag indicating the selection state.
*/
isSelected: boolean,
};
/**
* React {@code Component} representing an entry for the audio settings.
*
* @returns { ReactElement}
*/
export default function AudioSettingsEntry(
{ children, hasError, labelId, isSelected }: Props) {
const className = `audio-preview-entry ${isSelected
? 'audio-preview-entry--selected' : ''}`;
return (
<div className = { className }>
{isSelected && (
<Icon
className = 'audio-preview-icon audio-preview-icon--check'
color = '#1C2025'
size = { 14 }
src = { IconCheck } />
)}
<span
className = 'audio-preview-entry-text'
id = { labelId }>
{children}
</span>
{hasError && <Icon
className = 'audio-preview-icon audio-preview-icon--exclamation'
size = { 16 }
src = { IconExclamationSolid } />}
</div>
);
}

View File

@ -1,48 +0,0 @@
// @flow
import React from 'react';
import { Icon } from '../../../../base/icons';
/**
* The type of the React {@code Component} props of {@link AudioSettingsHeader}.
*/
type Props = {
/**
* The id used for the Header-text.
*/
id?: string,
/**
* The Icon used for the Header.
*/
IconComponent: Function,
/**
* The text of the Header.
*/
text: string,
};
/**
* React {@code Component} representing the Header of an audio option group.
*
* @returns { ReactElement}
*/
export default function AudioSettingsHeader({ IconComponent, id, text }: Props) {
return (
<div
className = 'audio-preview-header'
role = 'heading'>
<div className = 'audio-preview-header-icon'>
{ <Icon
size = { 20 }
src = { IconComponent } />}
</div>
<div
className = 'audio-preview-header-text'
id = { id } >{text}</div>
</div>
);
}

View File

@ -1,8 +1,8 @@
// @flow
import React, { ReactNode } from 'react';
import { connect } from 'react-redux';
import React from 'react';
import { areAudioLevelsEnabled } from '../../../../base/config/functions';
import { IReduxState } from '../../../../app/types';
import { areAudioLevelsEnabled } from '../../../../base/config/functions.web';
import {
setAudioInputDeviceAndUpdateSettings,
setAudioOutputDevice as setAudioOutputDeviceAction
@ -12,39 +12,38 @@ import {
getAudioOutputDeviceData
} from '../../../../base/devices/functions.web';
import Popover from '../../../../base/popover/components/Popover.web';
import { connect } from '../../../../base/redux';
import { SMALL_MOBILE_WIDTH } from '../../../../base/responsive-ui/constants';
import {
getCurrentMicDeviceId,
getCurrentOutputDeviceId
} from '../../../../base/settings';
} from '../../../../base/settings/functions.web';
import { toggleAudioSettings } from '../../../actions';
import { getAudioSettingsVisibility } from '../../../functions';
import { getAudioSettingsVisibility } from '../../../functions.web';
import AudioSettingsContent, { type Props as AudioSettingsContentProps } from './AudioSettingsContent';
import AudioSettingsContent, { type IProps as AudioSettingsContentProps } from './AudioSettingsContent';
type Props = AudioSettingsContentProps & {
interface IProps extends AudioSettingsContentProps {
/**
* Component's children (the audio button).
*/
children: React$Node,
children: ReactNode;
/**
* Flag controlling the visibility of the popup.
*/
isOpen: boolean,
isOpen: boolean;
/**
* Callback executed when the popup closes.
*/
onClose: Function,
onClose: Function;
/**
* The popup placement enum value.
*/
popupPlacement: string
popupPlacement: string;
}
/**
@ -64,7 +63,7 @@ function AudioSettingsPopup({
outputDevices,
popupPlacement,
measureAudioLevels
}: Props) {
}: IProps) {
return (
<div className = 'audio-preview'>
<Popover
@ -92,16 +91,16 @@ function AudioSettingsPopup({
* @param {Object} state - Redux state.
* @returns {Object}
*/
function mapStateToProps(state) {
function mapStateToProps(state: IReduxState) {
const { clientWidth } = state['features/base/responsive-ui'];
return {
popupPlacement: clientWidth <= SMALL_MOBILE_WIDTH ? 'auto' : 'top-end',
popupPlacement: clientWidth <= Number(SMALL_MOBILE_WIDTH) ? 'auto' : 'top-end',
currentMicDeviceId: getCurrentMicDeviceId(state),
currentOutputDeviceId: getCurrentOutputDeviceId(state),
isOpen: getAudioSettingsVisibility(state),
microphoneDevices: getAudioInputDeviceData(state),
outputDevices: getAudioOutputDeviceData(state),
isOpen: Boolean(getAudioSettingsVisibility(state)),
microphoneDevices: getAudioInputDeviceData(state) ?? [],
outputDevices: getAudioOutputDeviceData(state) ?? [],
measureAudioLevels: areAudioLevelsEnabled(state)
};
}

View File

@ -1,34 +1,33 @@
// @flow
import React from 'react';
import { Icon, IconMeter } from '../../../../base/icons';
import Icon from '../../../../base/icons/components/Icon';
import { IconMeter } from '../../../../base/icons/svg';
type Props = {
interface IProps {
/**
* Own class name for the component.
*/
className: string,
className: string;
/**
* Flag indicating whether the component is greyed out/disabled.
*/
isDisabled?: boolean,
isDisabled?: boolean;
/**
* The level of the meter.
* Should be between 0 and 7 as per the used SVG.
*/
level: number,
};
level: number;
}
/**
* React {@code Component} representing an audio level meter.
*
* @returns { ReactElement}
*/
export default function({ className, isDisabled, level }: Props) {
export default function({ className, isDisabled, level }: IProps) {
let ownClassName;
if (level > -1) {

View File

@ -1,61 +1,80 @@
// @flow
import clsx from 'clsx';
import React, { Component } from 'react';
import Icon from '../../../../base/icons/components/Icon';
import { IconCheck, IconExclamationSolid } from '../../../../base/icons/svg';
// eslint-disable-next-line lines-around-comment
// @ts-ignore
import JitsiMeetJS from '../../../../base/lib-jitsi-meet/_';
import ContextMenuItem from '../../../../base/ui/components/web/ContextMenuItem';
import AudioSettingsEntry, { type Props as AudioSettingsEntryProps } from './AudioSettingsEntry';
import Meter from './Meter';
const JitsiTrackEvents = JitsiMeetJS.events.track;
type Props = AudioSettingsEntryProps & {
type Props = {
/**
* The text for this component.
*/
children: string;
/**
* The deviceId of the microphone.
*/
deviceId: string,
deviceId: string;
/**
* Flag indicating if there is a problem with the device.
*/
hasError?: boolean,
hasError?: boolean;
/**
* Flag indicating if there is a problem with the device.
*/
index?: number,
index?: number;
/**
* Flag indicating the selection state.
*/
isSelected: boolean;
/**
* The audio track for the current entry.
*/
jitsiTrack: Object,
jitsiTrack: any;
/**
* The id for the label, that contains the item text.
*/
labelId?: string;
/**
* The length of the microphone list.
*/
length: number,
length: number;
/**
* Click handler for component.
*/
onClick: Function,
listHeaderId: string,
listHeaderId: string;
/**
* Used to decide whether to listen to audio level changes.
*/
measureAudioLevels: boolean,
}
measureAudioLevels: boolean;
/**
* Click handler for component.
*/
onClick: Function;
};
type State = {
/**
* The audio level.
*/
level: number
}
level: number;
};
/**
* React {@code Component} representing an entry for the microphone audio settings.
@ -81,8 +100,6 @@ export default class MicrophoneEntry extends Component<Props, State> {
this._updateLevel = this._updateLevel.bind(this);
}
_onClick: () => void;
/**
* Click handler for the entry.
*
@ -92,13 +109,6 @@ export default class MicrophoneEntry extends Component<Props, State> {
this.props.onClick(this.props.deviceId);
}
/**
* Key pressed handler for the entry.
*
* @returns {void}
*/
_onKeyPress: (KeyboardEvent) => void;
/**
* Key pressed handler for the entry.
*
@ -107,22 +117,20 @@ export default class MicrophoneEntry extends Component<Props, State> {
*
* @returns {void}
*/
_onKeyPress(e) {
_onKeyPress(e: React.KeyboardEvent) {
if (e.key === ' ') {
e.preventDefault();
this.props.onClick(this.props.deviceId);
}
}
_updateLevel: (number) => void;
/**
* Updates the level of the meter.
*
* @param {number} num - The audio level provided by the jitsiTrack.
* @returns {void}
*/
_updateLevel(num) {
_updateLevel(num: number) {
this.setState({
level: Math.floor(num / 0.125)
});
@ -147,8 +155,8 @@ export default class MicrophoneEntry extends Component<Props, State> {
* @param {Object} jitsiTrack - The jitsiTrack to unsubscribe from.
* @returns {void}
*/
_stopListening(jitsiTrack) {
jitsiTrack && jitsiTrack.off(JitsiTrackEvents.TRACK_AUDIO_LEVEL_CHANGED, this._updateLevel);
_stopListening(jitsiTrack?: any) {
jitsiTrack?.off(JitsiTrackEvents.TRACK_AUDIO_LEVEL_CHANGED, this._updateLevel);
this.setState({
level: -1
});
@ -202,9 +210,9 @@ export default class MicrophoneEntry extends Component<Props, State> {
measureAudioLevels
} = this.props;
const deviceTextId: string = `choose_microphone${deviceId}`;
const deviceTextId = `choose_microphone${deviceId}`;
const labelledby: string = `${listHeaderId} ${deviceTextId} `;
const labelledby = `${listHeaderId} ${deviceTextId} `;
const className = `audio-preview-microphone ${measureAudioLevels
? 'audio-preview-microphone--withmeter' : 'audio-preview-microphone--nometer'}`;
@ -220,12 +228,17 @@ export default class MicrophoneEntry extends Component<Props, State> {
onKeyPress = { this._onKeyPress }
role = 'radio'
tabIndex = { 0 }>
<AudioSettingsEntry
hasError = { hasError }
isSelected = { isSelected }
labelId = { deviceTextId }>
{children}
</AudioSettingsEntry>
<ContextMenuItem
accessibilityLabel = ''
icon = { isSelected ? IconCheck : undefined }
selected = { isSelected }
text = { children }
textClassName = { clsx('audio-preview-entry-text', !isSelected && 'left-margin') }>
{hasError && <Icon
className = 'audio-preview-icon audio-preview-icon--exclamation'
size = { 16 }
src = { IconExclamationSolid } />}
</ContextMenuItem>
{ Boolean(jitsiTrack) && measureAudioLevels && <Meter
className = 'audio-preview-meter-mic'
isDisabled = { hasError }

View File

@ -1,163 +0,0 @@
// @flow
import React, { Component } from 'react';
import logger from '../../../logger';
import AudioSettingsEntry from './AudioSettingsEntry';
import TestButton from './TestButton';
const TEST_SOUND_PATH = 'sounds/ring.mp3';
/**
* The type of the React {@code Component} props of {@link SpeakerEntry}.
*/
type Props = {
/**
* The text label for the entry.
*/
children: React$Node,
/**
* Flag controlling the selection state of the entry.
*/
isSelected: boolean,
/**
* Flag controlling the selection state of the entry.
*/
index: number,
/**
* Flag controlling the selection state of the entry.
*/
length: number,
/**
* The deviceId of the speaker.
*/
deviceId: string,
/**
* Click handler for the component.
*/
onClick: Function,
listHeaderId: string
};
/**
* Implements a React {@link Component} which displays an audio
* output settings entry. The user can click and play a test sound.
*
* @augments Component
*/
export default class SpeakerEntry extends Component<Props> {
/**
* A React ref to the HTML element containing the {@code audio} instance.
*/
audioRef: Object;
/**
* Initializes a new {@code SpeakerEntry} instance.
*
* @param {Object} props - The read-only properties with which the new
* instance is to be initialized.
*/
constructor(props: Props) {
super(props);
this.audioRef = React.createRef();
this._onTestButtonClick = this._onTestButtonClick.bind(this);
this._onClick = this._onClick.bind(this);
this._onKeyPress = this._onKeyPress.bind(this);
}
_onClick: () => void;
/**
* Click handler for the entry.
*
* @returns {void}
*/
_onClick() {
this.props.onClick(this.props.deviceId);
}
_onKeyPress: () => void;
/**
* Key pressed handler for the entry.
*
* @param {Object} e - The event.
* @private
*
* @returns {void}
*/
_onKeyPress(e) {
if (e.key === ' ') {
e.preventDefault();
this.props.onClick(this.props.deviceId);
}
}
_onTestButtonClick: Object => void;
/**
* Click handler for Test button.
* Sets the current audio output id and plays a sound.
*
* @param {Object} e - The sythetic event.
* @returns {void}
*/
async _onTestButtonClick(e) {
e.stopPropagation();
try {
await this.audioRef.current.setSinkId(this.props.deviceId);
this.audioRef.current.play();
} catch (err) {
logger.log('Could not set sink id', err);
}
}
/**
* Implements React's {@link Component#render}.
*
* @inheritdoc
*/
render() {
const { children, isSelected, index, deviceId, length, listHeaderId } = this.props;
const deviceTextId: string = `choose_speaker${deviceId}`;
const labelledby: string = `${listHeaderId} ${deviceTextId} `;
return (
<li
aria-checked = { isSelected }
aria-labelledby = { labelledby }
aria-posinset = { index }
aria-setsize = { length }
className = 'audio-preview-speaker'
onClick = { this._onClick }
onKeyPress = { this._onKeyPress }
role = 'radio'
tabIndex = { 0 }>
<AudioSettingsEntry
isSelected = { isSelected }
key = { deviceId }
labelId = { deviceTextId }>
{children}
</AudioSettingsEntry>
<TestButton
onClick = { this._onTestButtonClick }
onKeyPress = { this._onTestButtonClick } />
<audio
preload = 'auto'
ref = { this.audioRef }
src = { TEST_SOUND_PATH } />
</li>
);
}
}

View File

@ -0,0 +1,140 @@
import clsx from 'clsx';
import React, { useRef } from 'react';
import { IconCheck } from '../../../../base/icons/svg';
import Button from '../../../../base/ui/components/web/Button';
import ContextMenuItem from '../../../../base/ui/components/web/ContextMenuItem';
import { BUTTON_TYPES } from '../../../../base/ui/constants.any';
import logger from '../../../logger';
const TEST_SOUND_PATH = 'sounds/ring.mp3';
/**
* The type of the React {@code Component} props of {@link SpeakerEntry}.
*/
interface IProps {
/**
* The text label for the entry.
*/
children: string;
/**
* The deviceId of the speaker.
*/
deviceId: string;
/**
* Flag controlling the selection state of the entry.
*/
index: number;
/**
* Flag controlling the selection state of the entry.
*/
isSelected: boolean;
/**
* Flag controlling the selection state of the entry.
*/
length: number;
listHeaderId: string;
/**
* Click handler for the component.
*/
onClick: Function;
}
/**
* Implements a React {@link Component} which displays an audio
* output settings entry. The user can click and play a test sound.
*
* @param {IProps} props - Component props.
* @returns {JSX.Element}
*/
const SpeakerEntry = (props: IProps) => {
const audioRef = useRef<HTMLAudioElement | null>(null);
/**
* Click handler for the entry.
*
* @returns {void}
*/
function _onClick() {
props.onClick(props.deviceId);
}
/**
* Key pressed handler for the entry.
*
* @param {Object} e - The event.
* @private
*
* @returns {void}
*/
function _onKeyPress(e: React.KeyboardEvent) {
if (e.key === ' ') {
e.preventDefault();
props.onClick(props.deviceId);
}
}
/**
* Click handler for Test button.
* Sets the current audio output id and plays a sound.
*
* @param {Object} e - The synthetic event.
* @returns {void}
*/
async function _onTestButtonClick(e: React.KeyboardEvent | React.MouseEvent) {
e.stopPropagation();
try { // @ts-ignore
await audioRef.current?.setSinkId(props.deviceId);
audioRef.current?.play();
} catch (err) {
logger.log('Could not set sink id', err);
}
}
const { children, isSelected, index, deviceId, length, listHeaderId } = props;
const deviceTextId = `choose_speaker${deviceId}`;
const labelledby = `${listHeaderId} ${deviceTextId} `;
/* eslint-disable react/jsx-no-bind */
return (
<li
aria-checked = { isSelected }
aria-labelledby = { labelledby }
aria-posinset = { index }
aria-setsize = { length }
className = 'audio-preview-speaker'
onClick = { _onClick }
onKeyPress = { _onKeyPress }
role = 'radio'
tabIndex = { 0 }>
<ContextMenuItem
accessibilityLabel = ''
icon = { isSelected ? IconCheck : undefined }
selected = { isSelected }
text = { children }
textClassName = { clsx('audio-preview-entry-text', !isSelected && 'left-margin') }>
<Button
className = 'audio-preview-test-button'
label = 'Test'
onClick = { _onTestButtonClick }
onKeyPress = { _onTestButtonClick }
type = { BUTTON_TYPES.SECONDARY } />
</ContextMenuItem>
<audio
preload = 'auto'
ref = { audioRef }
src = { TEST_SOUND_PATH } />
</li>
);
};
export default SpeakerEntry;

View File

@ -1,34 +0,0 @@
// @flow
import React from 'react';
type Props = {
/**
* Click handler for the button.
*/
onClick: Function,
/**
* Keypress handler for the button.
*/
onKeyPress: Function,
};
/**
* React {@code Component} representing an button used for testing output sound.
*
* @returns { ReactElement}
*/
export default function TestButton({ onClick, onKeyPress }: Props) {
return (
<div
className = 'audio-preview-test-button'
onClick = { onClick }
onKeyPress = { onKeyPress }
role = 'button'
tabIndex = { 0 }>
Test
</div>
);
}

View File

@ -42,7 +42,7 @@ export function createLocalVideoTracks(ids: string[], timeout?: number) {
* label: string
* }[]>}
*/
export function createLocalAudioTracks(devices: MediaDeviceInfo[], timeout?: number) {
export function createLocalAudioTracks(devices: Array<{ deviceId: string; label: string; }>, timeout?: number) {
return Promise.all(
devices.map(async ({ deviceId, label }) => {
let jitsiTrack = null;

View File

@ -1,5 +1,8 @@
import { ReactNode, useEffect, useRef, useState } from 'react';
import ReactDOM from 'react-dom';
import { useSelector } from 'react-redux';
import { IReduxState } from '../../../app/types';
type Props = {
@ -36,6 +39,7 @@ type Props = {
* @returns {ReactElement}
*/
function DialogPortal({ children, className, style, getRef, setSize }: Props) {
const clientWidth = useSelector((state: IReduxState) => state['features/base/responsive-ui'].clientWidth);
const [ portalTarget ] = useState(() => {
const portalDiv = document.createElement('div');
@ -92,7 +96,7 @@ function DialogPortal({ children, className, style, getRef, setSize }: Props) {
document.body.removeChild(portalTarget);
}
};
}, []);
}, [ clientWidth ]);
return ReactDOM.createPortal(
children,