Signal-Desktop/ts/components/MediaPermissionsModal.tsx

83 lines
2.4 KiB
TypeScript

// Copyright 2025 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
import React, { useCallback } from 'react';
import { Modal } from './Modal';
import type { LocalizerType } from '../types/Util';
import { missingCaseError } from '../util/missingCaseError';
import { Button } from './Button';
export type PropsType = {
i18n: LocalizerType;
mediaType: 'camera' | 'microphone';
requestor: 'call' | 'voiceNote';
openSystemMediaPermissions: (mediaType: 'camera' | 'microphone') => void;
onClose: () => void;
};
export function MediaPermissionsModal({
i18n,
mediaType,
requestor,
openSystemMediaPermissions,
onClose,
}: PropsType): JSX.Element {
let title: string;
if (mediaType === 'camera') {
title = i18n('icu:MediaPermissionsModal__title--camera');
} else if (mediaType === 'microphone') {
title = i18n('icu:MediaPermissionsModal__title--microphone');
} else {
throw missingCaseError(mediaType);
}
let subtitle: string;
if (requestor === 'call') {
if (mediaType === 'camera') {
subtitle = i18n('icu:MediaPermissionsModal__subtitle--call--camera');
} else if (mediaType === 'microphone') {
subtitle = i18n('icu:MediaPermissionsModal__subtitle--call');
} else {
throw missingCaseError(mediaType);
}
} else if (requestor === 'voiceNote') {
subtitle = i18n('icu:MediaPermissionsModal__subtitle--voice-note');
} else {
throw missingCaseError(requestor);
}
const onClick = useCallback(
() => openSystemMediaPermissions(mediaType),
[openSystemMediaPermissions, mediaType]
);
return (
<Modal
modalName="MediaPermissionsModal"
hasXButton
i18n={i18n}
onClose={onClose}
moduleClassName="MediaPermissionsModal"
>
<div className="MediaPermissionsModal__body">
<h1>{title}</h1>
<p className="MediaPermissionsModal__subtitle">{subtitle}</p>
<ol>
<li>
{i18n('icu:MediaPermissionsModal__step-1', {
buttonName: i18n('icu:MediaPermissionsModal__open'),
})}
</li>
<li>
<img alt="" src="images/macos-switch.svg" width={28} height={17} />
{i18n('icu:MediaPermissionsModal__step-2')}
</li>
</ol>
<Button onClick={onClick}>
{i18n('icu:MediaPermissionsModal__open')}
</Button>
</div>
</Modal>
);
}