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

Update video rooms to new design specs (#8207)

Browse source 
* Remove radio component

* "Voice room" → "video room"

* Remove interactivity from video room tiles

* Update connection state when joining via widget

* Simplify room header buttons for video rooms

* Split out video room creation into a separate menu option

* Simplify room options for video rooms

* Update video room tile layout

* Tell the Jitsi widget whether it's a video channel

* Update tests

* "Voice" → "video" in more places

* Fix tests

* Re-add frame to immersive Jitsi widgets

* Comment ack

* Make updateDevices more readable

* Type FacePile
This commit is contained in:
Robin 2022-04-01 10:36:10 -04:00 • committed by GitHub
parent 020c1c6f31
commit 1f64835fab
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
38 changed files with 798 additions and 1305 deletions
Download patch file Download diff file Expand all files Collapse all files

38
src/components/views/dialogs/CreateRoomDialog.tsx
View file

@ -21,15 +21,12 @@ import { RoomType } from "matrix-js-sdk/src/@types/event";
import { JoinRule, Preset, Visibility } from "matrix-js-sdk/src/@types/partials";
import SdkConfig from '../../../SdkConfig';
import SettingsStore from "../../../settings/SettingsStore";
import withValidation, { IFieldState } from '../elements/Validation';
import { _t } from '../../../languageHandler';
import { MatrixClientPeg } from '../../../MatrixClientPeg';
import { IOpts, privateShouldBeEncrypted } from "../../../createRoom";
import { replaceableComponent } from "../../../utils/replaceableComponent";
import Heading from "../typography/Heading";
import Field from "../elements/Field";
import StyledRadioGroup from "../elements/StyledRadioGroup";
import RoomAliasField from "../elements/RoomAliasField";
import LabelledToggleSwitch from "../elements/LabelledToggleSwitch";
import DialogButtons from "../elements/DialogButtons";
@ -40,6 +37,7 @@ import { getKeyBindingsManager } from "../../../KeyBindingsManager";
import { KeyBindingAction } from "../../../accessibility/KeyboardShortcuts";
interface IProps {
type?: RoomType;
defaultPublic?: boolean;
defaultName?: string;
parentSpace?: Room;
@ -48,7 +46,6 @@ interface IProps {
}
interface IState {
type?: RoomType;
joinRule: JoinRule;
isPublic: boolean;
isEncrypted: boolean;
@ -80,7 +77,6 @@ export default class CreateRoomDialog extends React.Component<IProps, IState> {
}
this.state = {
type: null,
isPublic: this.props.defaultPublic || false,
isEncrypted: this.props.defaultEncrypted ?? privateShouldBeEncrypted(),
joinRule,
@ -100,7 +96,7 @@ export default class CreateRoomDialog extends React.Component<IProps, IState> {
private roomCreateOptions() {
const opts: IOpts = {};
const createOpts: IOpts["createOpts"] = opts.createOpts = {};
opts.roomType = this.state.type;
opts.roomType = this.props.type;
createOpts.name = this.state.name;
if (this.state.joinRule === JoinRule.Public) {
@ -180,10 +176,6 @@ export default class CreateRoomDialog extends React.Component<IProps, IState> {
this.props.onFinished(false);
};
private onTypeChange = (type: RoomType | "text") => {
this.setState({ type: type === "text" ? null : type });
};
private onNameChange = (ev: ChangeEvent<HTMLInputElement>) => {
this.setState({ name: ev.target.value });
};
@ -229,6 +221,8 @@ export default class CreateRoomDialog extends React.Component<IProps, IState> {
});
render() {
const isVideoRoom = this.props.type === RoomType.UnstableCall;
let aliasField;
if (this.state.joinRule === JoinRule.Public) {
const domain = MatrixClientPeg.get().getDomain();
@ -319,8 +313,12 @@ export default class CreateRoomDialog extends React.Component<IProps, IState> {
);
}
let title = _t("Create a room");
if (!this.props.parentSpace) {
let title;
if (isVideoRoom) {
title = _t("Create a video room");
} else if (this.props.parentSpace) {
title = _t("Create a room");
} else {
title = this.state.joinRule === JoinRule.Public ? _t('Create a public room') : _t('Create a private room');
}
@ -333,20 +331,6 @@ export default class CreateRoomDialog extends React.Component<IProps, IState> {
>
<form onSubmit={this.onOk} onKeyDown={this.onKeyDown}>
<div className="mx_Dialog_content">
{ SettingsStore.getValue("feature_voice_rooms") ? <>
<Heading size="h3">{ _t("Room type") }</Heading>
<StyledRadioGroup
name="type"
value={this.state.type ?? "text"}
onChange={this.onTypeChange}
definitions={[
{ value: "text", label: _t("Text room") },
{ value: RoomType.UnstableCall, label: _t("Voice & video room") },
]}
/>
<Heading size="h3">{ _t("Room details") }</Heading>
</> : null }
<Field
ref={this.nameField}
label={_t('Name')}
@ -390,7 +374,7 @@ export default class CreateRoomDialog extends React.Component<IProps, IState> {
</details>
</div>
</form>
<DialogButtons primaryButton={_t('Create Room')}
<DialogButtons primaryButton={isVideoRoom ? _t('Create video room') : _t('Create room')}
onPrimaryButtonClick={this.onOk}
onCancel={this.onCancel} />
</BaseDialog>