您最多选择25个主题 主题必须以字母或数字开头,可以包含连字符 (-),并且长度不得超过35个字符

AudioDevicesSelection.web.tsx 12KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387
  1. import { Theme } from '@mui/material';
  2. import { withStyles } from '@mui/styles';
  3. import React from 'react';
  4. import { WithTranslation } from 'react-i18next';
  5. import { connect } from 'react-redux';
  6. import { IReduxState, IStore } from '../../app/types';
  7. import { getAvailableDevices } from '../../base/devices/actions.web';
  8. import AbstractDialogTab, {
  9. type IProps as AbstractDialogTabProps
  10. } from '../../base/dialog/components/web/AbstractDialogTab';
  11. import { translate } from '../../base/i18n/functions';
  12. import { createLocalTrack } from '../../base/lib-jitsi-meet/functions.web';
  13. import Checkbox from '../../base/ui/components/web/Checkbox';
  14. import logger from '../logger';
  15. import AudioInputPreview from './AudioInputPreview';
  16. import AudioOutputPreview from './AudioOutputPreview';
  17. import DeviceHidContainer from './DeviceHidContainer.web';
  18. import DeviceSelector from './DeviceSelector.web';
  19. /**
  20. * The type of the React {@code Component} props of {@link AudioDevicesSelection}.
  21. */
  22. interface IProps extends AbstractDialogTabProps, WithTranslation {
  23. /**
  24. * All known audio and video devices split by type. This prop comes from
  25. * the app state.
  26. */
  27. availableDevices: {
  28. audioInput?: MediaDeviceInfo[];
  29. audioOutput?: MediaDeviceInfo[];
  30. };
  31. /**
  32. * CSS classes object.
  33. */
  34. classes: any;
  35. /**
  36. * Whether or not the audio selector can be interacted with. If true,
  37. * the audio input selector will be rendered as disabled. This is
  38. * specifically used to prevent audio device changing in Firefox, which
  39. * currently does not work due to a browser-side regression.
  40. */
  41. disableAudioInputChange: boolean;
  42. /**
  43. * True if device changing is configured to be disallowed. Selectors
  44. * will display as disabled.
  45. */
  46. disableDeviceChange: boolean;
  47. /**
  48. * Redux dispatch function.
  49. */
  50. dispatch: IStore['dispatch'];
  51. /**
  52. * Whether or not the audio permission was granted.
  53. */
  54. hasAudioPermission: boolean;
  55. /**
  56. * If true, the audio meter will not display. Necessary for browsers or
  57. * configurations that do not support local stats to prevent a
  58. * non-responsive mic preview from displaying.
  59. */
  60. hideAudioInputPreview: boolean;
  61. /**
  62. * If true, the button to play a test sound on the selected speaker will not be displayed.
  63. * This needs to be hidden on browsers that do not support selecting an audio output device.
  64. */
  65. hideAudioOutputPreview: boolean;
  66. /**
  67. * Whether or not the audio output source selector should display. If
  68. * true, the audio output selector and test audio link will not be
  69. * rendered.
  70. */
  71. hideAudioOutputSelect: boolean;
  72. /**
  73. * Whether or not the hid device container should display.
  74. */
  75. hideDeviceHIDContainer: boolean;
  76. /**
  77. * Whether to hide noise suppression checkbox or not.
  78. */
  79. hideNoiseSuppression: boolean;
  80. /**
  81. * Wether noise suppression is on or not.
  82. */
  83. noiseSuppressionEnabled: boolean;
  84. /**
  85. * The id of the audio input device to preview.
  86. */
  87. selectedAudioInputId: string;
  88. /**
  89. * The id of the audio output device to preview.
  90. */
  91. selectedAudioOutputId: string;
  92. }
  93. /**
  94. * The type of the React {@code Component} state of {@link AudioDevicesSelection}.
  95. */
  96. type State = {
  97. /**
  98. * The JitsiTrack to use for previewing audio input.
  99. */
  100. previewAudioTrack?: any | null;
  101. };
  102. const styles = (theme: Theme) => {
  103. return {
  104. container: {
  105. display: 'flex',
  106. flexDirection: 'column' as const,
  107. padding: '0 2px',
  108. width: '100%'
  109. },
  110. inputContainer: {
  111. marginBottom: theme.spacing(3)
  112. },
  113. outputContainer: {
  114. margin: `${theme.spacing(5)} 0`,
  115. display: 'flex',
  116. alignItems: 'flex-end'
  117. },
  118. outputButton: {
  119. marginLeft: theme.spacing(3)
  120. },
  121. noiseSuppressionContainer: {
  122. marginBottom: theme.spacing(5)
  123. }
  124. };
  125. };
  126. /**
  127. * React {@code Component} for previewing audio and video input/output devices.
  128. *
  129. * @augments Component
  130. */
  131. class AudioDevicesSelection extends AbstractDialogTab<IProps, State> {
  132. /**
  133. * Whether current component is mounted or not.
  134. *
  135. * In component did mount we start a Promise to create tracks and
  136. * set the tracks in the state, if we unmount the component in the meanwhile
  137. * tracks will be created and will never been disposed (dispose tracks is
  138. * in componentWillUnmount). When tracks are created and component is
  139. * unmounted we dispose the tracks.
  140. */
  141. _unMounted: boolean;
  142. /**
  143. * Initializes a new DeviceSelection instance.
  144. *
  145. * @param {Object} props - The read-only React Component props with which
  146. * the new instance is to be initialized.
  147. */
  148. constructor(props: IProps) {
  149. super(props);
  150. this.state = {
  151. previewAudioTrack: null
  152. };
  153. this._unMounted = true;
  154. }
  155. /**
  156. * Generate the initial previews for audio input and video input.
  157. *
  158. * @inheritdoc
  159. */
  160. componentDidMount() {
  161. this._unMounted = false;
  162. Promise.all([
  163. this._createAudioInputTrack(this.props.selectedAudioInputId)
  164. ])
  165. .catch(err => logger.warn('Failed to initialize preview tracks', err))
  166. .then(() => {
  167. this.props.dispatch(getAvailableDevices());
  168. });
  169. }
  170. /**
  171. * Checks if audio / video permissions were granted. Updates audio input and
  172. * video input previews.
  173. *
  174. * @param {Object} prevProps - Previous props this component received.
  175. * @returns {void}
  176. */
  177. componentDidUpdate(prevProps: IProps) {
  178. if (prevProps.selectedAudioInputId
  179. !== this.props.selectedAudioInputId) {
  180. this._createAudioInputTrack(this.props.selectedAudioInputId);
  181. }
  182. }
  183. /**
  184. * Ensure preview tracks are destroyed to prevent continued use.
  185. *
  186. * @inheritdoc
  187. */
  188. componentWillUnmount() {
  189. this._unMounted = true;
  190. this._disposeAudioInputPreview();
  191. }
  192. /**
  193. * Implements React's {@link Component#render()}.
  194. *
  195. * @inheritdoc
  196. */
  197. render() {
  198. const {
  199. classes,
  200. hasAudioPermission,
  201. hideAudioInputPreview,
  202. hideAudioOutputPreview,
  203. hideDeviceHIDContainer,
  204. hideNoiseSuppression,
  205. noiseSuppressionEnabled,
  206. selectedAudioOutputId,
  207. t
  208. } = this.props;
  209. const { audioInput, audioOutput } = this._getSelectors();
  210. return (
  211. <div className = { classes.container }>
  212. <div
  213. aria-live = 'polite'
  214. className = { classes.inputContainer }>
  215. {this._renderSelector(audioInput)}
  216. </div>
  217. {!hideAudioInputPreview && hasAudioPermission
  218. && <AudioInputPreview
  219. track = { this.state.previewAudioTrack } />}
  220. <div
  221. aria-live = 'polite'
  222. className = { classes.outputContainer }>
  223. {this._renderSelector(audioOutput)}
  224. {!hideAudioOutputPreview && hasAudioPermission
  225. && <AudioOutputPreview
  226. className = { classes.outputButton }
  227. deviceId = { selectedAudioOutputId } />}
  228. </div>
  229. {!hideNoiseSuppression && (
  230. <div className = { classes.noiseSuppressionContainer }>
  231. <Checkbox
  232. checked = { noiseSuppressionEnabled }
  233. label = { t('toolbar.enableNoiseSuppression') }
  234. // eslint-disable-next-line react/jsx-no-bind
  235. onChange = { () => super._onChange({
  236. noiseSuppressionEnabled: !noiseSuppressionEnabled
  237. }) } />
  238. </div>
  239. )}
  240. {!hideDeviceHIDContainer
  241. && <DeviceHidContainer />}
  242. </div>
  243. );
  244. }
  245. /**
  246. * Creates the JitsiTrack for the audio input preview.
  247. *
  248. * @param {string} deviceId - The id of audio input device to preview.
  249. * @private
  250. * @returns {void}
  251. */
  252. _createAudioInputTrack(deviceId: string) {
  253. const { hideAudioInputPreview } = this.props;
  254. if (hideAudioInputPreview) {
  255. return;
  256. }
  257. return this._disposeAudioInputPreview()
  258. .then(() => createLocalTrack('audio', deviceId, 5000))
  259. .then(jitsiLocalTrack => {
  260. if (this._unMounted) {
  261. jitsiLocalTrack.dispose();
  262. return;
  263. }
  264. this.setState({
  265. previewAudioTrack: jitsiLocalTrack
  266. });
  267. })
  268. .catch(() => {
  269. this.setState({
  270. previewAudioTrack: null
  271. });
  272. });
  273. }
  274. /**
  275. * Utility function for disposing the current audio input preview.
  276. *
  277. * @private
  278. * @returns {Promise}
  279. */
  280. _disposeAudioInputPreview(): Promise<any> {
  281. return this.state.previewAudioTrack
  282. ? this.state.previewAudioTrack.dispose() : Promise.resolve();
  283. }
  284. /**
  285. * Creates a DeviceSelector instance based on the passed in configuration.
  286. *
  287. * @private
  288. * @param {Object} deviceSelectorProps - The props for the DeviceSelector.
  289. * @returns {ReactElement}
  290. */
  291. _renderSelector(deviceSelectorProps: any) {
  292. return deviceSelectorProps ? (
  293. <DeviceSelector
  294. { ...deviceSelectorProps }
  295. key = { deviceSelectorProps.id } />
  296. ) : null;
  297. }
  298. /**
  299. * Returns object configurations for audio input and output.
  300. *
  301. * @private
  302. * @returns {Object} Configurations.
  303. */
  304. _getSelectors() {
  305. const { availableDevices, hasAudioPermission } = this.props;
  306. const audioInput = {
  307. devices: availableDevices.audioInput,
  308. hasPermission: hasAudioPermission,
  309. icon: 'icon-microphone',
  310. isDisabled: this.props.disableAudioInputChange || this.props.disableDeviceChange,
  311. key: 'audioInput',
  312. id: 'audioInput',
  313. label: 'settings.selectMic',
  314. onSelect: (selectedAudioInputId: string) => super._onChange({ selectedAudioInputId }),
  315. selectedDeviceId: this.state.previewAudioTrack
  316. ? this.state.previewAudioTrack.getDeviceId() : this.props.selectedAudioInputId
  317. };
  318. let audioOutput;
  319. if (!this.props.hideAudioOutputSelect) {
  320. audioOutput = {
  321. devices: availableDevices.audioOutput,
  322. hasPermission: hasAudioPermission,
  323. icon: 'icon-speaker',
  324. isDisabled: this.props.disableDeviceChange,
  325. key: 'audioOutput',
  326. id: 'audioOutput',
  327. label: 'settings.selectAudioOutput',
  328. onSelect: (selectedAudioOutputId: string) => super._onChange({ selectedAudioOutputId }),
  329. selectedDeviceId: this.props.selectedAudioOutputId
  330. };
  331. }
  332. return { audioInput,
  333. audioOutput };
  334. }
  335. }
  336. const mapStateToProps = (state: IReduxState) => {
  337. return {
  338. availableDevices: state['features/base/devices'].availableDevices ?? {}
  339. };
  340. };
  341. export default connect(mapStateToProps)(withStyles(styles)(translate(AudioDevicesSelection)));