Skip to content

Commit

Permalink
Moves calling device settings to use Select component
Browse files Browse the repository at this point in the history
  • Loading branch information
@josh-signal
josh-signal committed Apr 24, 2023
1 parent 7d334ae commit dc6e6e4
Show file tree
Hide file tree
Showing 2 changed files with 51 additions and 104 deletions.
41 changes: 4 additions & 37 deletions stylesheets/_modules.scss
View file
Expand Up @@ -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;
}
}
}
Expand All @@ -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
Expand Down
114 changes: 47 additions & 67 deletions ts/components/CallingDeviceSelection.tsx
View file
Expand Up @@ -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,
Expand All @@ -30,88 +32,66 @@ 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(
devices: Array<AudioDevice>,
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)],
});
};
}

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,
});
};
}
Expand Down Expand Up @@ -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
Expand All @@ -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
Expand All @@ -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>
);
Expand Down

0 comments on commit dc6e6e4

Please sign in to comment.