Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Add Element Call room settings #9347

Merged
merged 28 commits into from
Oct 7, 2022
Merged
Show file tree
Hide file tree
Changes from 21 commits
Commits
Show all changes
28 commits
Select commit Hold shift + click to select a range
b421911
Correctly setup EC perms on room creation
SimonBrandner Oct 4, 2022
055faf6
Add `VoipRoomSettingsTab`
SimonBrandner Oct 4, 2022
0cdf7ca
Show `VoipRoomSettingsTab`
SimonBrandner Oct 4, 2022
ebcd2d5
Show MSC3401 perms in room settings
SimonBrandner Oct 4, 2022
88c3666
i18n
SimonBrandner Oct 4, 2022
761e528
Remove `ScreenName`
SimonBrandner Oct 4, 2022
adf9f19
Hide behind labs flag
SimonBrandner Oct 4, 2022
b92a576
Add `testid`
SimonBrandner Oct 4, 2022
5491451
Add tests
SimonBrandner Oct 4, 2022
eb8b242
i18n
SimonBrandner Oct 4, 2022
1b19491
Don't mix `"` and `'`
SimonBrandner Oct 5, 2022
1e56fbc
Fix indent
SimonBrandner Oct 5, 2022
278f0fd
Fix test name
SimonBrandner Oct 5, 2022
9983434
Try to use existing power levels
SimonBrandner Oct 5, 2022
d4f0789
Fix MSC number
SimonBrandner Oct 6, 2022
940095b
Fix MSC number
SimonBrandner Oct 6, 2022
deabd80
Gate behind flag
SimonBrandner Oct 6, 2022
512b07a
Add missing `DEFAULT_EVENT_POWER_LEVELS`
SimonBrandner Oct 6, 2022
938498f
Mock `SettingsStore`
SimonBrandner Oct 6, 2022
2a6bbda
Disable when insufficient perms
SimonBrandner Oct 6, 2022
756bdaf
Fix tests
SimonBrandner Oct 6, 2022
14d9bab
Don't cast as `any`
SimonBrandner Oct 7, 2022
b62e74b
Merge branch 'develop' into SimonBrandner/feat/ec-perms
SimonBrandner Oct 7, 2022
2bcdbf7
Add EC brand
SimonBrandner Oct 7, 2022
e7000b6
i18n
SimonBrandner Oct 7, 2022
d5ee3d6
Delint
SimonBrandner Oct 7, 2022
dfd4031
Fix tests
SimonBrandner Oct 7, 2022
e19e015
Merge branch 'develop' into SimonBrandner/feat/ec-perms
SimonBrandner Oct 7, 2022
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions res/css/views/dialogs/_RoomSettingsDialog.pcss
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,10 @@ limitations under the License.
mask-image: url('$(res)/img/element-icons/settings.svg');
}

.mx_RoomSettingsDialog_voiceIcon::before {
mask-image: url('$(res)/img/element-icons/call/voice-call.svg');
}

.mx_RoomSettingsDialog_securityIcon::before {
mask-image: url('$(res)/img/element-icons/security.svg');
}
Expand Down
10 changes: 10 additions & 0 deletions src/components/views/dialogs/RoomSettingsDialog.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -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"),
Expand Down
14 changes: 7 additions & 7 deletions src/components/views/elements/AccessibleTooltipButton.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -78,19 +78,19 @@ 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}
/>;
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 }
Expand Down
7 changes: 5 additions & 2 deletions src/components/views/elements/LabelledToggleSwitch.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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) {
Expand All @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion src/components/views/elements/SettingsFlag.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
Expand Down
16 changes: 12 additions & 4 deletions src/components/views/elements/ToggleSwitch.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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>
);
};
2 changes: 1 addition & 1 deletion src/components/views/settings/devices/DeviceDetails.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -131,7 +131,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'>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ import PowerSelector from "../../../elements/PowerSelector";
import SettingsFieldset from '../../SettingsFieldset';
import SettingsStore from "../../../../../settings/SettingsStore";
import { VoiceBroadcastInfoEventType } from '../../../../../voice-broadcast';
import { ElementCall } from "../../../../../models/Call";

interface IEventShowOpts {
isState?: boolean;
Expand Down Expand Up @@ -60,6 +61,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 },
Expand Down Expand Up @@ -252,6 +257,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 Element calls");
plEventsToLabels[ElementCall.MEMBER_EVENT_TYPE.name] = _td("Join Element calls");
SimonBrandner marked this conversation as resolved.
Show resolved Hide resolved
}

const powerLevelDescriptors: Record<string, IPowerLevelDescriptor> = {
"users_default": {
Expand Down
95 changes: 95 additions & 0 deletions src/components/views/settings/tabs/room/VoipRoomSettingsTab.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,95 @@
/*
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";

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

return <LabelledToggleSwitch
data-testid="element-call-switch"
label={_t("Enable Element Call as an additional calling option in this room")}
caption={_t(
"Element Call is end-to-end encrypted, " +
"but is currently limited to smaller numbers of users.",
)}
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>;
};
11 changes: 11 additions & 0 deletions src/createRoom.ts
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,7 @@ import { findDMForUser } from "./utils/dm/findDMForUser";
import { privateShouldBeEncrypted } from "./utils/rooms";
import { waitForMember } from "./utils/membership";
import { PreferredRoomVersions } from "./utils/PreferredRoomVersions";
import SettingsStore from "./settings/SettingsStore";

// we define a number of interfaces which take their names from the js-sdk
/* eslint-disable camelcase */
Expand Down Expand Up @@ -168,6 +169,16 @@ export default async function createRoom(opts: IOpts): Promise<string | null> {
},
};
}
} else if (SettingsStore.getValue("feature_group_calls")) {
createOpts.power_level_content_override = {
events: {
SimonBrandner marked this conversation as resolved.
Show resolved Hide resolved
...DEFAULT_EVENT_POWER_LEVELS,
// Element Call should be disabled by default
[ElementCall.MEMBER_EVENT_TYPE.name]: 100,
// Make sure only admins can enable it
[ElementCall.CALL_EVENT_TYPE.name]: 100,
robintown marked this conversation as resolved.
Show resolved Hide resolved
},
};
}

// By default, view the room after creating it
Expand Down
6 changes: 6 additions & 0 deletions src/i18n/strings/en_EN.json
Original file line number Diff line number Diff line change
Expand Up @@ -1647,6 +1647,8 @@
"Modify widgets": "Modify widgets",
"Voice broadcasts": "Voice broadcasts",
"Manage pinned events": "Manage pinned events",
"Start Element calls": "Start Element calls",
"Join Element calls": "Join Element calls",
"Default role": "Default role",
"Send messages": "Send messages",
"Invite users": "Invite users",
Expand Down Expand Up @@ -1686,6 +1688,10 @@
"Security & Privacy": "Security & Privacy",
"Once enabled, encryption cannot be disabled.": "Once enabled, encryption cannot be disabled.",
"Encrypted": "Encrypted",
"Enable Element Call as an additional calling option in this room": "Enable Element Call as an additional calling option in this room",
"Element Call is end-to-end encrypted, but is currently limited to smaller numbers of users.": "Element Call is end-to-end encrypted, but is currently limited to smaller numbers of users.",
"You do not have sufficient permissions to change this.": "You do not have sufficient permissions to change this.",
"Call type": "Call type",
"Unable to revoke sharing for email address": "Unable to revoke sharing for email address",
"Unable to share email address": "Unable to share email address",
"Your email address hasn't been verified yet": "Your email address hasn't been verified yet",
Expand Down
Loading