fix(calls): 設定を右端の歯車から一般タブで開く

packages/frontend/src/components/MkCallsControls.vue

@@ -22,9 +22,9 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<button type="button" class="_button" :class="[$style.action, state.screenOn && $style.active]" :aria-label="state.screenOn ? i18n.ts._calls.stopScreenSharing : i18n.ts._calls.startScreenSharing" :title="state.screenOn ? i18n.ts._calls.stopScreenSharing : i18n.ts._calls.startScreenSharing" :aria-pressed="state.screenOn" :disabled="videoDisabled" @click="emit('screen')"><i class="ti ti-screen-share"></i></button>
 		<button type="button" class="_button" :class="$style.settings" :aria-label="i18n.ts._calls.screenSettings" :title="i18n.ts._calls.screenSettings" aria-haspopup="menu" :disabled="videoDisabled" @click="emit('screenSettings', $event)"><i class="ti ti-chevron-down"></i></button>
 	</div>
-	<button type="button" class="_button" :class="$style.action" :aria-label="i18n.ts._calls.connectionInfo" :title="i18n.ts._calls.connectionInfo" @click="emit('connectionInfo')"><i class="ti ti-network" aria-hidden="true"></i></button>
 	<slot></slot>
 	<button type="button" class="_button" :class="[$style.action, $style.leave]" :aria-label="state.role === 'host' ? i18n.ts._calls.endRoom : i18n.ts._calls.leaveRoom" :title="state.role === 'host' ? i18n.ts._calls.endRoom : i18n.ts._calls.leaveRoom" :disabled="state.joining" @click="emit('leave')"><i class="ti ti-phone-off"></i></button>
+	<button type="button" class="_button" :class="$style.action" :aria-label="i18n.ts._calls.settings" :title="i18n.ts._calls.settings" @click="emit('connectionInfo')"><i class="ti ti-settings" aria-hidden="true"></i></button>
 </div>
 </template>
 

packages/frontend/src/components/MkCallsMicrophoneTest.vue

@@ -7,12 +7,12 @@ SPDX-License-Identifier: AGPL-3.0-only
 <div :class="$style.root">
 	<div :class="$style.row">
 		<button class="_button" :class="$style.button" :disabled="state.busy && !testing" @click="testing ? stop() : start()">{{ testing ? i18n.ts._calls.stopMicrophoneTest : i18n.ts._calls.microphoneTest }}</button>
-		<div :class="$style.meter" role="meter" :aria-label="i18n.ts._calls.inputLevel" aria-valuemin="-100" aria-valuemax="0" :aria-valuenow="Math.round(level)">
-			<div :class="$style.fill" :style="{ width: `${Math.min(100, Math.max(0, level + 100))}%` }"></div>
+		<div v-if="testing" :class="$style.meter" role="meter" :aria-label="i18n.ts._calls.inputLevel" aria-valuemin="-100" aria-valuemax="0" :aria-valuenow="Math.round(testLevel)">
+			<div :class="$style.fill" :style="{ width: `${Math.min(100, Math.max(0, testLevel + 100))}%` }"></div>
 		</div>
 	</div>
 	<p :class="$style.description">{{ i18n.ts._calls.microphoneTestDescription }}</p>
-	<small>{{ Math.round(level) }} dBFS · {{ transmitting ? i18n.ts._calls.inputTransmitting : i18n.ts._calls.inputNotTransmitting }}</small>
+	<small v-if="testing">{{ testTransmitting ? i18n.ts._calls.inputTransmitting : i18n.ts._calls.inputNotTransmitting }}</small>
 </div>
 </template>
 
@@ -29,8 +29,6 @@ const state = computed(() => props.getSettings());
 const testing = ref(false);
 const testLevel = ref(-100);
 const testTransmitting = ref(false);
-const level = computed(() => testing.value ? testLevel.value : state.value.inputLevel);
-const transmitting = computed(() => testing.value ? testTransmitting.value : state.value.transmitting);
 let abort: AbortController | null = null;
 let stream: MediaStream | null = null;
 let processing: CallsNoiseSuppression | null = null;

packages/frontend/src/components/MkCallsRoomWindow.vue

@@ -529,7 +529,7 @@ watch(roomVideos, videos => { if (!videos.some(video => video.id === focusedVide
 
 function openConnectionInfo(): void {
 	if (popoutWindow != null) window.focus();
-	void session.openAudioSettings('statistics');
+	void session.openAudioSettings('general');
 }
 
 </script>

packages/frontend/src/components/MkCallsSettings.vue

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <template>
 <MkModalWindow ref="dialog" :width="800" :height="780" @close="close" @esc="close" @closed="emit('closed')">
-	<template #header><i class="ti ti-adjustments" aria-hidden="true"></i> {{ i18n.ts._calls.settings }}</template>
+	<template #header><i class="ti ti-settings" aria-hidden="true"></i> {{ i18n.ts._calls.settings }}</template>
 	<div :class="$style.layout">
 		<nav :class="$style.sidebar" :aria-label="i18n.ts._calls.settings">
 			<button class="_button" :class="{ [$style.active]: page === 'general' }" :aria-current="page === 'general' ? 'page' : undefined" @click="page = 'general'"><i class="ti ti-adjustments" aria-hidden="true"></i> {{ i18n.ts._calls.generalSettings }}</button>

packages/frontend/src/ui/_common_/CallsDock.vue

@@ -199,7 +199,7 @@ onMounted(() => window.addEventListener('pointerdown', onWindowPointerDown));
 onBeforeUnmount(() => window.removeEventListener('pointerdown', onWindowPointerDown));
 
 function openConnectionInfo(): void {
-	void session.openAudioSettings('statistics');
+	void session.openAudioSettings('general');
 }
 
 </script>

packages/frontend/test/unit/calls-audio-settings.test.ts

@@ -15,7 +15,7 @@ vi.mock('@/components/MkModalWindow.vue', () => ({ default: { template: '<sectio
 vi.mock('@/i18n.js', () => ({ i18n: { ts: { _calls: { autoGainControl: 'Automatic gain control', autoGainControlDescription: 'Adjust loudness', settings: 'Call settings', audioSection: 'Audio', microphoneTest: 'Microphone test', stopMicrophoneTest: 'Stop test', microphoneTestDescription: 'Loopback', previewCamera: 'Preview camera', selectCamera: 'Select camera', generalSettings: 'General', statisticsSettings: 'Statistics', microphone: 'Microphone', camera: 'Camera', outputDevice: 'Speaker', systemDefaultDevice: 'Default', inputVolume: 'Input volume', outputVolume: 'Output volume', refreshDevices: 'Refresh devices', noiseSuppressionMode: 'Noise cancellation', rnnoiseMode: 'RNNoise', webrtcMode: 'WebRTC', noNoiseSuppression: 'None', noiseSuppressionDescription: 'Choose processing', inputSensitivity: 'Threshold', inputGateDisabled: 'All input', inputSensitivityDescription: 'Minimum volume', inputLevel: 'Input level', inputTransmitting: 'Transmitting', inputNotTransmitting: 'Below threshold or muted' } } } }));
 afterEach(cleanup);
 
-test('selects processing and threshold, shows the input meter, and disables changes while switching', async () => {
+test('selects processing and a static threshold, and disables changes while switching', async () => {
 	const state = reactive({ autoGainControl: true, noiseSuppression: 'rnnoise' as CallsNoiseSuppressionMode, inputSensitivity: -45, inputLevel: -32, transmitting: true, busy: false, microphones: [{ deviceId: 'mic-1', label: 'USB microphone' } as MediaDeviceInfo], cameras: [], outputDevices: [], microphoneId: '', cameraId: '', outputDeviceId: '', inputVolume: 100, outputVolume: 100, supportsOutputDevice: true });
 	const setNoiseSuppression = vi.fn(async (mode: CallsNoiseSuppressionMode) => { state.noiseSuppression = mode; });
 	const setInputSensitivity = vi.fn((value: number) => { state.inputSensitivity = value; });
@@ -37,7 +37,12 @@ test('selects processing and threshold, shows the input meter, and disables chan
 	await fireEvent.update(view.getByRole('slider', { name: /Threshold/ }), '-35');
 	expect(setInputSensitivity).toHaveBeenCalledWith(-35);
 	expect(view.getByText('-35 dBFS')).toBeTruthy();
-	expect(view.getByLabelText('Input level').getAttribute('aria-valuenow')).toBe('-32');
+	expect(view.queryByRole('meter')).toBeNull();
+	state.inputLevel = -14;
+	state.transmitting = false;
+	await nextTick();
+	expect(view.getByText('-35 dBFS')).toBeTruthy();
+	expect(view.queryByText('-14 dBFS')).toBeNull();
 	state.busy = true;
 	await nextTick();
 	expect((view.getByRole('combobox', { name: 'Noise cancellation' }) as HTMLSelectElement).disabled).toBe(true);

packages/frontend/test/unit/calls-microphone-test.test.ts

@@ -26,15 +26,19 @@ test('loops the selected microphone through processing, adjusts volumes, and sto
 	const state = reactive({ autoGainControl: true, noiseSuppression: 'none' as const, inputSensitivity: -45, inputLevel: -100, transmitting: false, busy: false, microphones: [], cameras: [], outputDevices: [], microphoneId: 'usb-microphone', cameraId: '', outputDeviceId: '', inputVolume: 100, outputVolume: 50, supportsOutputDevice: false });
 	const view = render(MkCallsMicrophoneTest, { props: { getSettings: () => state } });
 	expect(capture).not.toHaveBeenCalled();
+	expect(view.queryByRole('meter')).toBeNull();
 	await fireEvent.click(view.getByRole('button', { name: 'Test microphone' }));
 	await waitFor(() => expect(play).toHaveBeenCalledOnce());
 	expect(capture).toHaveBeenCalledWith({ audio: { deviceId: { exact: 'usb-microphone' }, echoCancellation: true, autoGainControl: true, noiseSuppression: false }, video: false });
 	const options = vi.mocked(createCallsNoiseSuppression).mock.calls[0][3]!;
 	expect(options).toMatchObject({ rnnoise: false, inputSensitivity: -45, inputVolume: 100 });
 	options.onLevel?.(-30, true);
 	await waitFor(() => expect(view.getByLabelText('Input level').getAttribute('aria-valuenow')).toBe('-30'));
+	expect(view.queryByText(/dBFS/)).toBeNull();
 	state.inputVolume = 150;
 	await waitFor(() => expect(processor.setInputVolume).toHaveBeenCalledWith(150));
+	await fireEvent.click(view.getByRole('button', { name: 'Stop' }));
+	expect(view.queryByRole('meter')).toBeNull();
 	view.unmount();
 	expect(processor.close).toHaveBeenCalledOnce();
 	expect(track.stop).toHaveBeenCalledOnce();