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:
Pawel Domas 2021-05-14 16:37:48 -05:00 committed by Paweł Domas
parent e33674fb2e
commit 6f5e0b0321
2 changed files with 25 additions and 6 deletions

View File

@ -674,6 +674,7 @@
"more": "More",
"name": "Name",
"noDevice": "None",
"sameAsSystem": "Same as system ({{label}})",
"selectAudioOutput": "Audio output",
"selectCamera": "Camera",
"selectMic": "Microphone",

View File

@ -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>