mirrors/signal-desktop
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 2 Wiki Activity Actions

Moves calling device settings to use Select component

Browse source
This commit is contained in:
Josh Perez 2023-04-24 14:02:11 -04:00 • committed by GitHub
parent 7d334ae3a2
commit dc6e6e4f00
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 51 additions and 104 deletions
Download patch file Download diff file Expand all files Collapse all files

114
ts/components/CallingDeviceSelection.tsx
View file

@ -4,7 +4,9 @@
import * as React from 'react';
import type { AudioDevice } from '@signalapp/ringrtc';
import type { Option } from './Select';
import { Modal } from './Modal';
import { Select } from './Select';
import type { LocalizerType } from '../types/Util';
import type {
ChangeIODevicePayloadType,
@ -30,66 +32,44 @@ function localizeDefault(i18n: LocalizerType, deviceLabel: string): string {
function renderAudioOptions(
devices: Array<AudioDevice>,
i18n: LocalizerType,
selectedDevice: AudioDevice | undefined
): JSX.Element {
i18n: LocalizerType
): Array<Option> {
if (!devices.length) {
return (
<option aria-selected>
{i18n('icu:callingDeviceSelection__select--no-device')}
</option>
);
return [
{
text: i18n('icu:callingDeviceSelection__select--no-device'),
value: '',
},
];
}
return (
<>
{devices.map((device: AudioDevice) => {
const isSelected =
selectedDevice && selectedDevice.index === device.index;
return (
<option
aria-selected={isSelected}
key={device.index}
value={device.index}
>
{localizeDefault(i18n, device.name)}
</option>
);
})}
</>
);
return devices.map(device => {
return {
text: localizeDefault(i18n, device.name),
value: device.index,
};
});
}
function renderVideoOptions(
devices: Array<MediaDeviceInfo>,
i18n: LocalizerType,
selectedCamera: string | undefined
): JSX.Element {
i18n: LocalizerType
): Array<Option> {
if (!devices.length) {
return (
<option aria-selected>
{i18n('icu:callingDeviceSelection__select--no-device')}
</option>
);
return [
{
text: i18n('icu:callingDeviceSelection__select--no-device'),
value: '',
},
];
}
return (
<>
{devices.map((device: MediaDeviceInfo) => {
const isSelected = selectedCamera === device.deviceId;
return (
<option
aria-selected={isSelected}
key={device.deviceId}
value={device.deviceId}
>
{localizeDefault(i18n, device.label)}
</option>
);
})}
</>
);
return devices.map((device: MediaDeviceInfo) => {
return {
text: localizeDefault(i18n, device.label),
value: device.deviceId,
};
});
}
function createAudioChangeHandler(
@ -97,10 +77,10 @@ function createAudioChangeHandler(
changeIODevice: (payload: ChangeIODevicePayloadType) => void,
type: CallingDeviceType.SPEAKER | CallingDeviceType.MICROPHONE
) {
return (ev: React.FormEvent<HTMLSelectElement>): void => {
return (value: string): void => {
changeIODevice({
type,
selectedDevice: devices[Number(ev.currentTarget.value)],
selectedDevice: devices[Number(value)],
});
};
}
@ -108,10 +88,10 @@ function createAudioChangeHandler(
function createCameraChangeHandler(
changeIODevice: (payload: ChangeIODevicePayloadType) => void
) {
return (ev: React.FormEvent<HTMLSelectElement>): void => {
return (value: string): void => {
changeIODevice({
type: CallingDeviceType.CAMERA,
selectedDevice: String(ev.currentTarget.value),
selectedDevice: value,
});
};
}
@ -159,14 +139,14 @@ export function CallingDeviceSelection({
{i18n('icu:callingDeviceSelection__label--video')}
</label>
<div className="module-calling-device-selection__select">
<select
<Select
disabled={!availableCameras.length}
name="video"
id="camera"
name="camera"
onChange={createCameraChangeHandler(changeIODevice)}
options={renderVideoOptions(availableCameras, i18n)}
value={selectedCamera}
>
{renderVideoOptions(availableCameras, i18n, selectedCamera)}
</select>
/>
</div>
<label
@ -176,18 +156,18 @@ export function CallingDeviceSelection({
{i18n('icu:callingDeviceSelection__label--audio-input')}
</label>
<div className="module-calling-device-selection__select">
<select
<Select
disabled={!availableMicrophones.length}
id="audio-input"
name="audio-input"
onChange={createAudioChangeHandler(
availableMicrophones,
changeIODevice,
CallingDeviceType.MICROPHONE
)}
options={renderAudioOptions(availableMicrophones, i18n)}
value={selectedMicrophoneIndex}
>
{renderAudioOptions(availableMicrophones, i18n, selectedMicrophone)}
</select>
/>
</div>
<label
@ -197,18 +177,18 @@ export function CallingDeviceSelection({
{i18n('icu:callingDeviceSelection__label--audio-output')}
</label>
<div className="module-calling-device-selection__select">
<select
<Select
disabled={!availableSpeakers.length}
id="audio-output"
name="audio-output"
onChange={createAudioChangeHandler(
availableSpeakers,
changeIODevice,
CallingDeviceType.SPEAKER
)}
options={renderAudioOptions(availableSpeakers, i18n)}
value={selectedSpeakerIndex}
>
{renderAudioOptions(availableSpeakers, i18n, selectedSpeaker)}
</select>
/>
</div>
</Modal>
);