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
Show stats Download patch file Download diff file Expand all files Collapse all files

41
stylesheets/_modules.scss
View file

@ -6959,8 +6959,10 @@ button.module-image__border-overlay:focus {
z-index: $z-index-above-base;
@include keyboard-mode {
&:focus {
outline: 2px solid $color-ultramarine;
&:focus,
&:active,
&:hover {
background-color: $color-ultramarine;
}
}
}
@ -6980,41 +6982,6 @@ button.module-image__border-overlay:focus {
.module-calling-device-selection__select {
margin-bottom: 20px;
position: relative;
select {
@include font-body-1;
background: $color-gray-75;
color: $color-gray-02;
-webkit-appearance: none;
border-radius: 4px;
border: 1px solid $color-gray-45;
cursor: pointer;
height: 40px;
outline: 0;
padding: 10px;
padding-inline-end: 32px;
text-overflow: ellipsis;
width: 100%;
}
&::after {
border: 2px solid $color-gray-75;
border-radius: 2px;
border-inline-end: 0;
border-top: 0;
content: ' ';
display: block;
height: 10px;
pointer-events: none;
position: absolute;
inset-inline-end: 15px;
top: 16px;
transform-origin: center;
transform: rotate(-45deg);
width: 10px;
z-index: $z-index-above-base;
}
}
// Module: GroupV1 Disabled Actions

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>
);