imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add Element Call room settings (#9347)

Browse source 
Co-authored-by: Robin <robin@robin.town>
This commit is contained in:
Šimon Brandner 2022-10-07 20:10:17 +02:00 • committed by GitHub
parent 4ff9681408
commit 26a74a193f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
21 changed files with 539 additions and 67 deletions
Download patch file Download diff file Expand all files Collapse all files

10
src/components/views/dialogs/RoomSettingsDialog.tsx
View file

@ -32,8 +32,10 @@ import SettingsStore from "../../../settings/SettingsStore";
import { UIFeature } from "../../../settings/UIFeature";
import BaseDialog from "./BaseDialog";
import { Action } from '../../../dispatcher/actions';
import { VoipRoomSettingsTab } from "../settings/tabs/room/VoipRoomSettingsTab";
export const ROOM_GENERAL_TAB = "ROOM_GENERAL_TAB";
export const ROOM_VOIP_TAB = "ROOM_VOIP_TAB";
export const ROOM_SECURITY_TAB = "ROOM_SECURITY_TAB";
export const ROOM_ROLES_TAB = "ROOM_ROLES_TAB";
export const ROOM_NOTIFICATIONS_TAB = "ROOM_NOTIFICATIONS_TAB";
@ -96,6 +98,14 @@ export default class RoomSettingsDialog extends React.Component<IProps, IState>
<GeneralRoomSettingsTab roomId={this.props.roomId} />,
"RoomSettingsGeneral",
));
if (SettingsStore.getValue("feature_group_calls")) {
tabs.push(new Tab(
ROOM_VOIP_TAB,
_td("Voice & Video"),
"mx_RoomSettingsDialog_voiceIcon",
<VoipRoomSettingsTab roomId={this.props.roomId} />,
));
}
tabs.push(new Tab(
ROOM_SECURITY_TAB,
_td("Security & Privacy"),

14
src/components/views/elements/AccessibleTooltipButton.tsx
View file

@ -21,7 +21,7 @@ import AccessibleButton from "./AccessibleButton";
import Tooltip, { Alignment } from './Tooltip';
interface IProps extends React.ComponentProps<typeof AccessibleButton> {
title: string;
title?: string;
tooltip?: React.ReactNode;
label?: string;
tooltipClassName?: string;
@ -78,7 +78,7 @@ export default class AccessibleTooltipButton extends React.PureComponent<IProps,
const { title, tooltip, children, tooltipClassName, forceHide, alignment, onHideTooltip,
...props } = this.props;
const tip = this.state.hover && <Tooltip
const tip = this.state.hover && (title || tooltip) && <Tooltip
tooltipClassName={tooltipClassName}
label={tooltip || title}
alignment={alignment}
@ -86,11 +86,11 @@ export default class AccessibleTooltipButton extends React.PureComponent<IProps,
return (
<AccessibleButton
{...props}
onMouseOver={this.showTooltip}
onMouseLeave={this.hideTooltip}
onFocus={this.onFocus}
onBlur={this.hideTooltip}
aria-label={title}
onMouseOver={this.showTooltip || props.onMouseOver}
onMouseLeave={this.hideTooltip || props.onMouseLeave}
onFocus={this.onFocus || props.onFocus}
onBlur={this.hideTooltip || props.onBlur}
aria-label={title || props["aria-label"]}
>
{ children }
{ this.props.label }

7
src/components/views/elements/LabelledToggleSwitch.tsx
View file

@ -27,6 +27,8 @@ interface IProps {
label: string;
// The translated caption for the switch
caption?: string;
// Tooltip to display
tooltip?: string;
// Whether or not to disable the toggle switch
disabled?: boolean;
// True to put the toggle in front of the label
@ -53,7 +55,8 @@ export default class LabelledToggleSwitch extends React.PureComponent<IProps> {
checked={this.props.value}
disabled={this.props.disabled}
onChange={this.props.onChange}
aria-label={this.props.label}
title={this.props.label}
tooltip={this.props.tooltip}
/>;
if (this.props.toggleInFront) {
@ -66,7 +69,7 @@ export default class LabelledToggleSwitch extends React.PureComponent<IProps> {
"mx_SettingsFlag_toggleInFront": this.props.toggleInFront,
});
return (
<div className={classes}>
<div data-testid={this.props["data-testid"]} className={classes}>
{ firstPart }
{ secondPart }
</div>

2
src/components/views/elements/SettingsFlag.tsx
View file

@ -114,7 +114,7 @@ export default class SettingsFlag extends React.Component<IProps, IState> {
checked={this.state.value}
onChange={this.onChange}
disabled={this.props.disabled || !canChange}
aria-label={label}
title={label}
/>
</div>
);

16
src/components/views/elements/ToggleSwitch.tsx
View file

@ -18,21 +18,27 @@ limitations under the License.
import React from "react";
import classNames from "classnames";
import AccessibleButton from "./AccessibleButton";
import AccessibleTooltipButton from "./AccessibleTooltipButton";
interface IProps {
// Whether or not this toggle is in the 'on' position.
checked: boolean;
// Title to use
title?: string;
// Whether or not the user can interact with the switch
disabled?: boolean;
// Tooltip to show
tooltip?: string;
// Called when the checked state changes. First argument will be the new state.
onChange(checked: boolean): void;
}
// Controlled Toggle Switch element, written with Accessibility in mind
export default ({ checked, disabled = false, onChange, ...props }: IProps) => {
export default ({ checked, disabled = false, title, tooltip, onChange, ...props }: IProps) => {
const _onClick = () => {
if (disabled) return;
onChange(!checked);
@ -45,14 +51,16 @@ export default ({ checked, disabled = false, onChange, ...props }: IProps) => {
});
return (
<AccessibleButton {...props}
<AccessibleTooltipButton {...props}
className={classes}
onClick={_onClick}
role="switch"
aria-checked={checked}
aria-disabled={disabled}
title={title}
tooltip={tooltip}
>
<div className="mx_ToggleSwitch_ball" />
</AccessibleButton>
</AccessibleTooltipButton>
);
};

3
src/components/views/rooms/RoomHeader.tsx
View file

@ -195,10 +195,11 @@ const VideoCallButton: FC<VideoCallButtonProps> = ({ room, busy, setBusy, behavi
let menu: JSX.Element | null = null;
if (menuOpen) {
const buttonRect = buttonRef.current!.getBoundingClientRect();
const brand = SdkConfig.get("element_call").brand;
menu = <IconizedContextMenu {...aboveLeftOf(buttonRect)} onFinished={closeMenu}>
<IconizedContextMenuOptionList>
<IconizedContextMenuOption label={_t("Video call (Jitsi)")} onClick={onJitsiClick} />
<IconizedContextMenuOption label={_t("Video call (Element Call)")} onClick={onElementClick} />
<IconizedContextMenuOption label={_t("Video call (%(brand)s)", { brand })} onClick={onElementClick} />
</IconizedContextMenuOptionList>
</IconizedContextMenu>;
}

2
src/components/views/settings/devices/DeviceDetails.tsx
View file

@ -153,7 +153,7 @@ const DeviceDetails: React.FC<Props> = ({
checked={isPushNotificationsEnabled(pusher, localNotificationSettings)}
disabled={isCheckboxDisabled(pusher, localNotificationSettings)}
onChange={checked => setPushNotifications?.(device.device_id, checked)}
aria-label={_t("Toggle push notifications on this session.")}
title={_t("Toggle push notifications on this session.")}
data-testid='device-detail-push-notification-checkbox'
/>
<p className='mx_DeviceDetails_sectionHeading'>

14
src/components/views/settings/tabs/room/RolesRoomSettingsTab.tsx
View file

@ -31,6 +31,8 @@ import PowerSelector from "../../../elements/PowerSelector";
import SettingsFieldset from '../../SettingsFieldset';
import SettingsStore from "../../../../../settings/SettingsStore";
import { VoiceBroadcastInfoEventType } from '../../../../../voice-broadcast';
import { ElementCall } from "../../../../../models/Call";
import SdkConfig from "../../../../../SdkConfig";
interface IEventShowOpts {
isState?: boolean;
@ -60,6 +62,10 @@ const plEventsToShow: Record<string, IEventShowOpts> = {
[EventType.Reaction]: { isState: false, hideForSpace: true },
[EventType.RoomRedaction]: { isState: false, hideForSpace: true },
// MSC3401: Native Group VoIP signaling
[ElementCall.CALL_EVENT_TYPE.name]: { isState: true, hideForSpace: true },
[ElementCall.MEMBER_EVENT_TYPE.name]: { isState: true, hideForSpace: true },
// TODO: Enable support for m.widget event type (https://github.com/vector-im/element-web/issues/13111)
"im.vector.modular.widgets": { isState: true, hideForSpace: true },
[VoiceBroadcastInfoEventType]: { isState: true, hideForSpace: true },
@ -252,6 +258,11 @@ export default class RolesRoomSettingsTab extends React.Component<IProps> {
if (SettingsStore.getValue("feature_pinning")) {
plEventsToLabels[EventType.RoomPinnedEvents] = _td("Manage pinned events");
}
// MSC3401: Native Group VoIP signaling
if (SettingsStore.getValue("feature_group_calls")) {
plEventsToLabels[ElementCall.CALL_EVENT_TYPE.name] = _td("Start %(brand)s calls");
plEventsToLabels[ElementCall.MEMBER_EVENT_TYPE.name] = _td("Join %(brand)s calls");
}
const powerLevelDescriptors: Record<string, IPowerLevelDescriptor> = {
"users_default": {
@ -435,7 +446,8 @@ export default class RolesRoomSettingsTab extends React.Component<IProps> {
let label = plEventsToLabels[eventType];
if (label) {
label = _t(label);
const brand = SdkConfig.get("element_call").brand;
label = _t(label, { brand });
} else {
label = _t("Send %(eventType)s events", { eventType });
}

99
src/components/views/settings/tabs/room/VoipRoomSettingsTab.tsx Normal file
View file

@ -0,0 +1,99 @@
/*
Copyright 2022 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
import React, { useCallback, useMemo, useState } from 'react';
import { JoinRule } from "matrix-js-sdk/src/@types/partials";
import { EventType } from "matrix-js-sdk/src/@types/event";
import { _t } from "../../../../../languageHandler";
import { MatrixClientPeg } from "../../../../../MatrixClientPeg";
import LabelledToggleSwitch from "../../../elements/LabelledToggleSwitch";
import SettingsSubsection from "../../shared/SettingsSubsection";
import SettingsTab from "../SettingsTab";
import { ElementCall } from "../../../../../models/Call";
import { useRoomState } from "../../../../../hooks/useRoomState";
import SdkConfig from "../../../../../SdkConfig";
interface ElementCallSwitchProps {
roomId: string;
}
const ElementCallSwitch: React.FC<ElementCallSwitchProps> = ({ roomId }) => {
const room = useMemo(() => MatrixClientPeg.get().getRoom(roomId), [roomId]);
const isPublic = useMemo(() => room.getJoinRule() === JoinRule.Public, [room]);
const [content, events, maySend] = useRoomState(room, useCallback((state) => {
const content = state?.getStateEvents(EventType.RoomPowerLevels, "")?.getContent();
return [
content ?? {},
content?.["events"] ?? {},
state?.maySendStateEvent(EventType.RoomPowerLevels, MatrixClientPeg.get().getUserId()),
];
}, []));
const [elementCallEnabled, setElementCallEnabled] = useState<boolean>(() => {
return events[ElementCall.MEMBER_EVENT_TYPE.name] === 0;
});
const onChange = useCallback((enabled: boolean): void => {
setElementCallEnabled(enabled);
if (enabled) {
const userLevel = events[EventType.RoomMessage] ?? content.users_default ?? 0;
const moderatorLevel = content.kick ?? 50;
events[ElementCall.CALL_EVENT_TYPE.name] = isPublic ? moderatorLevel : userLevel;
events[ElementCall.MEMBER_EVENT_TYPE.name] = userLevel;
} else {
const adminLevel = events[EventType.RoomPowerLevels] ?? content.state_default ?? 100;
events[ElementCall.CALL_EVENT_TYPE.name] = adminLevel;
events[ElementCall.MEMBER_EVENT_TYPE.name] = adminLevel;
}
MatrixClientPeg.get().sendStateEvent(roomId, EventType.RoomPowerLevels, {
"events": events,
...content,
});
}, [roomId, content, events, isPublic]);
const brand = SdkConfig.get("element_call").brand;
return <LabelledToggleSwitch
data-testid="element-call-switch"
label={_t("Enable %(brand)s as an additional calling option in this room", { brand })}
caption={_t(
"%(brand)s is end-to-end encrypted, " +
"but is currently limited to smaller numbers of users.",
{ brand },
)}
value={elementCallEnabled}
onChange={onChange}
disabled={!maySend}
tooltip={_t("You do not have sufficient permissions to change this.")}
/>;
};
interface Props {
roomId: string;
}
export const VoipRoomSettingsTab: React.FC<Props> = ({ roomId }) => {
return <SettingsTab heading={_t("Voice & Video")}>
<SettingsSubsection heading={_t("Call type")}>
<ElementCallSwitch roomId={roomId} />
</SettingsSubsection>
</SettingsTab>;
};