recorder: Show mic connection error in mic settings
When there's no connected mic, show error string in the mic selection
menu.
Bug: b:393635073
Test: manually - python3 cra.py dev ${BOARD}
Change-Id: I92f4c1d3c882085161869141fbd6eb41d56d0989
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6284449
Commit-Queue: Jennifer Ling <hsuanling@google.com>
Reviewed-by: Pi-Hsun Shih <pihsun@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1422916}
This commit is contained in:
hsuanling
committed by
Chromium LUCI CQ
Chromium LUCI CQ
parent
ae11377722
commit
e8e194dd63
ash/webui/recorder_app_ui
chromeos
@ -109,6 +109,8 @@ const webui::LocalizedString kLocalizedStrings[] = {
|
||||
IDS_RECORDER_MIC_SELECTION_MENU_BUTTON_TOOLTIP},
|
||||
{"micSelectionMenuChromebookAudioOption",
|
||||
IDS_RECORDER_MIC_SELECTION_MENU_CHROMEBOOK_AUDIO_OPTION},
|
||||
{"micSelectionMenuMicConnectionErrorDescription",
|
||||
IDS_RECORDER_MIC_SELECTION_MENU_MIC_CONNECTION_ERROR_DESCRIPTION},
|
||||
{"onboardingDialogLanguageSelectionCancelButton",
|
||||
IDS_RECORDER_ONBOARDING_DIALOG_LANGUAGE_SELECTION_CANCEL_BUTTON},
|
||||
{"onboardingDialogLanguageSelectionDescription",
|
||||
|
||||
@ -23,6 +23,7 @@ import {
|
||||
import {MicrophoneInfo} from '../core/microphone_manager.js';
|
||||
import {ReactiveLitElement} from '../core/reactive/lit.js';
|
||||
import {settings} from '../core/state/settings.js';
|
||||
import {assert} from '../core/utils/assert.js';
|
||||
|
||||
import {withTooltip} from './directives/with-tooltip.js';
|
||||
|
||||
@ -42,6 +43,33 @@ export class MicSelectionButton extends ReactiveLitElement {
|
||||
cra-icon-dropdown::part(menu) {
|
||||
--cros-menu-width: 320px;
|
||||
}
|
||||
|
||||
#mic-error-container {
|
||||
align-items: center;
|
||||
background: var(--cros-sys-warning_container);
|
||||
border-radius: 8px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
gap: 16px;
|
||||
margin: 0 8px;
|
||||
padding: 6px 8px;
|
||||
width: var(--cros-menu-width);
|
||||
|
||||
& > cra-icon {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
& > .content {
|
||||
color: var(--cros-sys-on_warning_container);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
& > #text {
|
||||
font: var(--cros-button-2-font);
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
private readonly microphoneManager = useMicrophoneManager();
|
||||
@ -71,7 +99,7 @@ export class MicSelectionButton extends ReactiveLitElement {
|
||||
|
||||
private renderMicrophone(
|
||||
mic: MicrophoneInfo,
|
||||
selectedMic: string|null,
|
||||
selectedMic: string,
|
||||
): RenderResult {
|
||||
const micIcon = mic.isInternal ? 'mic' : 'mic_external_on';
|
||||
const isSelectedMic = mic.deviceId === selectedMic;
|
||||
@ -159,10 +187,28 @@ export class MicSelectionButton extends ReactiveLitElement {
|
||||
`;
|
||||
}
|
||||
|
||||
override render(): RenderResult {
|
||||
const microphones = this.microphoneManager.getMicrophoneList().value;
|
||||
private renderMicList(): RenderResult {
|
||||
const selectedMic = this.microphoneManager.getSelectedMicId().value;
|
||||
if (selectedMic === null) {
|
||||
return html`
|
||||
<div id="mic-error-container">
|
||||
<cra-icon class="content" name="mic_alert"></cra-icon>
|
||||
<div id="text" class="content">
|
||||
${i18n.micSelectionMenuMicConnectionErrorDescription}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
const microphones = this.microphoneManager.getMicrophoneList().value;
|
||||
// `getSelectedMicId` should return null when microphone list is empty.
|
||||
assert(
|
||||
microphones.length !== 0,
|
||||
'No connected mic but `getSelectedMicId` returns non-null id.',
|
||||
);
|
||||
return map(microphones, (mic) => this.renderMicrophone(mic, selectedMic));
|
||||
}
|
||||
|
||||
override render(): RenderResult {
|
||||
return html`
|
||||
<cra-icon-dropdown
|
||||
id="mic-selection-button"
|
||||
@ -174,7 +220,7 @@ export class MicSelectionButton extends ReactiveLitElement {
|
||||
${withTooltip()}
|
||||
>
|
||||
<cra-icon slot="button-icon" name="mic"></cra-icon>
|
||||
${map(microphones, (mic) => this.renderMicrophone(mic, selectedMic))}
|
||||
${this.renderMicList()}
|
||||
${this.renderSystemAudioSwitch()}
|
||||
</cra-icon-dropdown>
|
||||
`;
|
||||
|
||||
@ -67,6 +67,7 @@ const noArgStringNames = [
|
||||
'micConnectionErrorDialogHeader',
|
||||
'micSelectionMenuButtonTooltip',
|
||||
'micSelectionMenuChromebookAudioOption',
|
||||
'micSelectionMenuMicConnectionErrorDescription',
|
||||
'onboardingDialogLanguageSelectionCancelButton',
|
||||
'onboardingDialogLanguageSelectionDescription',
|
||||
'onboardingDialogLanguageSelectionDownloadButton',
|
||||
|
||||
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20"><path d="M7.98 12.23a2.622 2.622 0 0 1-1.897-.772 2.61 2.61 0 0 1-.791-1.916V4.583c0-.75.264-1.389.791-1.916A2.61 2.61 0 0 1 8 1.875c.736 0 1.368.264 1.896.792a2.61 2.61 0 0 1 .791 1.916v4.959a2.61 2.61 0 0 1-.791 1.916 2.647 2.647 0 0 1-1.917.771ZM8 10.5c.264 0 .486-.09.667-.27a.898.898 0 0 0 .291-.688V4.583a.897.897 0 0 0-.291-.687A.906.906 0 0 0 8 3.625c-.278 0-.514.09-.708.27a.935.935 0 0 0-.271.688v4.959c0 .277.09.507.27.687.195.18.431.271.709.271Zm.813 6.813H7.167v-2.084c-1.43-.194-2.611-.826-3.542-1.896-.93-1.083-1.396-2.347-1.396-3.791h1.646c0 1.139.403 2.11 1.208 2.916.806.792 1.778 1.188 2.917 1.188h.396c.139-.014.278-.042.416-.084v3.75Zm5.354-1.042a.54.54 0 0 0 .396-.167.518.518 0 0 0 .166-.375.54.54 0 0 0-.166-.396.54.54 0 0 0-.396-.166.54.54 0 0 0-.396.166.581.581 0 0 0 0 .771.54.54 0 0 0 .396.167Zm-.542-2.104h1.104v-2.104h-1.104v2.104Zm.542 4c-1.111 0-2.056-.39-2.834-1.167-.777-.778-1.166-1.722-1.166-2.833 0-1.111.389-2.056 1.166-2.834.792-.777 1.736-1.166 2.834-1.166 1.11 0 2.055.396 2.833 1.187.778.778 1.167 1.715 1.167 2.813 0 1.11-.39 2.055-1.167 2.833-.778.778-1.722 1.167-2.833 1.167Z"/></svg>
|
||||
|
After 
(image error) Size: 1.2 KiB |
@ -21,6 +21,7 @@ icons = [
|
||||
"language.svg",
|
||||
"laptop_chromebook.svg",
|
||||
"mic.svg",
|
||||
"mic_alert.svg",
|
||||
"mic_external_on.svg",
|
||||
"mic_mute.svg",
|
||||
"more_vertical.svg",
|
||||
|
||||
@ -176,6 +176,9 @@
|
||||
<message desc="Label of the option to include system audio in the recording." name="IDS_RECORDER_MIC_SELECTION_MENU_CHROMEBOOK_AUDIO_OPTION">
|
||||
Chromebook audio
|
||||
</message>
|
||||
<message desc="Description of mic connection error in the mic selection menu." name="IDS_RECORDER_MIC_SELECTION_MENU_MIC_CONNECTION_ERROR_DESCRIPTION">
|
||||
Connect a mic to start recording audio
|
||||
</message>
|
||||
<message desc="Button to defer transcription language selection and go next step in the onboarding dialog." name="IDS_RECORDER_ONBOARDING_DIALOG_LANGUAGE_SELECTION_CANCEL_BUTTON">
|
||||
Cancel
|
||||
</message>
|
||||
|
||||
1
chromeos/recorder_strings_grdp/IDS_RECORDER_MIC_SELECTION_MENU_MIC_CONNECTION_ERROR_DESCRIPTION.png.sha1
Normal file
1
chromeos/recorder_strings_grdp/IDS_RECORDER_MIC_SELECTION_MENU_MIC_CONNECTION_ERROR_DESCRIPTION.png.sha1
Normal file
@ -0,0 +1 @@
|
||||
701f7431ae164c31482d13787f30864c3b1e829c
|
||||
Reference in New Issue
Block a user