audio output selection in safari blocks the UI

It appears that at the time of this writing, creating audio tracks blocks
the browser's main thread for a long time on safari. Wasn't able to confirm
which part of track creation does the blocking exactly, but not creating
the tracks seems to help and makes the UI much more responsive.

react/features/settings/components/web/audio/AudioSettingsContent.js

@@ -4,6 +4,7 @@ import React, { Component } from 'react';
 
 import { translate } from '../../../../base/i18n';
 import { IconMicrophoneEmpty, IconVolumeEmpty } from '../../../../base/icons';
+import JitsiMeetJS from '../../../../base/lib-jitsi-meet';
 import { equals } from '../../../../base/redux';
 import { createLocalAudioTracks } from '../../../functions';
 
@@ -11,6 +12,8 @@ import AudioSettingsHeader from './AudioSettingsHeader';
 import MicrophoneEntry from './MicrophoneEntry';
 import SpeakerEntry from './SpeakerEntry';
 
+const browser = JitsiMeetJS.util.browser;
+
 export type Props = {
 
    /**
@@ -169,6 +172,14 @@ class AudioSettingsContent extends Component<Props, State> {
      * @returns {void}
      */
     async _setTracks() {
+        if (browser.isSafari()) {
+
+            // It appears that at the time of this writing, creating audio tracks blocks the browser's main thread for
+            // long time on safari. Wasn't able to confirm which part of track creation does the blocking exactly, but
+            // not creating the tracks seems to help and makes the UI much more responsive.
+            return;
+        }
+
         this._disposeTracks(this.state.audioTracks);
 
         const audioTracks = await createLocalAudioTracks(
@@ -244,9 +255,11 @@ class AudioSettingsContent extends Component<Props, State> {
                     {this.state.audioTracks.map((data, i) =>
                         this._renderMicrophoneEntry(data, i),
                     )}
-                    <AudioSettingsHeader
-                        IconComponent = { IconVolumeEmpty }
-                        text = { t('settings.speakers') } />
+                    { outputDevices.length > 0 && (
+                        <AudioSettingsHeader
+                            IconComponent = { IconVolumeEmpty }
+                            text = { t('settings.speakers') } />)
+                    }
                     {outputDevices.map((data, i) =>
                         this._renderSpeakerEntry(data, i),
                     )}

react/features/settings/components/web/audio/MicrophoneEntry.js

@@ -140,7 +140,7 @@ export default class MicrophoneEntry extends Component<Props, State> {
      *
      * @inheritdoc
      */
-    compmonentWillUnmount() {
+    componentWillUnmount() {
         this._stopListening(this.props.jitsiTrack);
     }
 
@@ -150,7 +150,7 @@ export default class MicrophoneEntry extends Component<Props, State> {
      * @inheritdoc
      */
     render() {
-        const { children, hasError, isSelected } = this.props;
+        const { children, hasError, isSelected, jitsiTrack } = this.props;
 
         return (
             <div
@@ -161,10 +161,11 @@ export default class MicrophoneEntry extends Component<Props, State> {
                     isSelected = { isSelected }>
                     {children}
                 </AudioSettingsEntry>
-                <Meter
+                { Boolean(jitsiTrack) && <Meter
                     className = 'audio-preview-meter-mic'
                     isDisabled = { hasError }
                     level = { this.state.level } />
+                }
             </div>
         );
     }