feat: more user friendly default device label
Also fixes an issue where starting Chrome 90 air pods no longer have the "Default -" prefix and the default entry looks like a buggy duplicated one.
This commit is contained in:
parent
e33674fb2e
commit
6f5e0b0321
|
@ -674,6 +674,7 @@
|
|||
"more": "More",
|
||||
"name": "Name",
|
||||
"noDevice": "None",
|
||||
"sameAsSystem": "Same as system ({{label}})",
|
||||
"selectAudioOutput": "Audio output",
|
||||
"selectCamera": "Camera",
|
||||
"selectMic": "Microphone",
|
||||
|
|
|
@ -14,6 +14,20 @@ import SpeakerEntry from './SpeakerEntry';
|
|||
|
||||
const browser = JitsiMeetJS.util.browser;
|
||||
|
||||
/**
|
||||
* Translates the default device label into a more user friendly one.
|
||||
*
|
||||
* @param {string} deviceId - The device Id.
|
||||
* @param {string} label - The device label.
|
||||
* @param {Function} t - The translation function.
|
||||
* @returns {string}
|
||||
*/
|
||||
function transformDefaultDeviceLabel(deviceId, label, t) {
|
||||
return deviceId === 'default'
|
||||
? t('settings.sameAsSystem', { label: label.replace('Default - ', '') })
|
||||
: label;
|
||||
}
|
||||
|
||||
export type Props = {
|
||||
|
||||
/**
|
||||
|
@ -125,10 +139,12 @@ class AudioSettingsContent extends Component<Props, State> {
|
|||
*
|
||||
* @param {Object} data - An object with the deviceId, jitsiTrack & label of the microphone.
|
||||
* @param {number} index - The index of the element, used for creating a key.
|
||||
* @param {Function} t - The translation function.
|
||||
* @returns {React$Node}
|
||||
*/
|
||||
_renderMicrophoneEntry(data, index) {
|
||||
const { deviceId, label, jitsiTrack, hasError } = data;
|
||||
_renderMicrophoneEntry(data, index, t) {
|
||||
const { deviceId, jitsiTrack, hasError } = data;
|
||||
const label = transformDefaultDeviceLabel(deviceId, data.label, t);
|
||||
const isSelected = deviceId === this.props.currentMicDeviceId;
|
||||
|
||||
return (
|
||||
|
@ -149,10 +165,12 @@ class AudioSettingsContent extends Component<Props, State> {
|
|||
*
|
||||
* @param {Object} data - An object with the deviceId and label of the speaker.
|
||||
* @param {number} index - The index of the element, used for creating a key.
|
||||
* @param {Function} t - The translation function.
|
||||
* @returns {React$Node}
|
||||
*/
|
||||
_renderSpeakerEntry(data, index) {
|
||||
const { deviceId, label } = data;
|
||||
_renderSpeakerEntry(data, index, t) {
|
||||
const { deviceId } = data;
|
||||
const label = transformDefaultDeviceLabel(deviceId, data.label, t);
|
||||
const key = `se-${index}`;
|
||||
|
||||
return (
|
||||
|
@ -251,7 +269,7 @@ class AudioSettingsContent extends Component<Props, State> {
|
|||
IconComponent = { IconMicrophoneHollow }
|
||||
text = { t('settings.microphones') } />
|
||||
{this.state.audioTracks.map((data, i) =>
|
||||
this._renderMicrophoneEntry(data, i),
|
||||
this._renderMicrophoneEntry(data, i, t),
|
||||
)}
|
||||
{ outputDevices.length > 0 && (
|
||||
<>
|
||||
|
@ -263,7 +281,7 @@ class AudioSettingsContent extends Component<Props, State> {
|
|||
)
|
||||
}
|
||||
{outputDevices.map((data, i) =>
|
||||
this._renderSpeakerEntry(data, i),
|
||||
this._renderSpeakerEntry(data, i, t),
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
|
Loading…
Reference in New Issue