+ { children }
+
;
+};
diff --git a/src/accessibility/context_menu/MenuItem.tsx b/src/accessibility/context_menu/MenuItem.tsx
new file mode 100644
index 0000000000..64233e51ad
--- /dev/null
+++ b/src/accessibility/context_menu/MenuItem.tsx
@@ -0,0 +1,35 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2018 New Vector Ltd
+Copyright 2019 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 from "react";
+
+import AccessibleButton from "../../components/views/elements/AccessibleButton";
+
+interface IProps extends React.ComponentProps
- {
private openSearch = () => {
defaultDispatcher.dispatch({action: "show_left_panel"});
+ defaultDispatcher.dispatch({action: "focus_room_filter"});
};
private onChange = () => {
@@ -104,7 +105,7 @@ export default class RoomSearch extends React.PureComponent {
ev.target.select();
};
- private onBlur = () => {
+ private onBlur = (ev: React.FocusEvent) => {
this.setState({focused: false});
};
diff --git a/src/components/structures/RoomView.js b/src/components/structures/RoomView.js
index 519c4c1f8e..a9f75ce632 100644
--- a/src/components/structures/RoomView.js
+++ b/src/components/structures/RoomView.js
@@ -2044,6 +2044,7 @@ export default createReactClass({
if (!this.state.atEndOfLiveTimeline && !this.state.searchResults) {
const JumpToBottomButton = sdk.getComponent('rooms.JumpToBottomButton');
jumpToBottom = ( 0}
numUnreadMessages={this.state.numUnreadMessages}
onScrollToBottomClick={this.jumpToLiveTimeline}
/>);
diff --git a/src/components/structures/UserMenu.tsx b/src/components/structures/UserMenu.tsx
index 221ec07439..a6eabe25f7 100644
--- a/src/components/structures/UserMenu.tsx
+++ b/src/components/structures/UserMenu.tsx
@@ -14,14 +14,13 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
-import * as React from "react";
+import React, { createRef } from "react";
import { MatrixClientPeg } from "../../MatrixClientPeg";
import defaultDispatcher from "../../dispatcher/dispatcher";
import { ActionPayload } from "../../dispatcher/payloads";
import { Action } from "../../dispatcher/actions";
-import { createRef } from "react";
import { _t } from "../../languageHandler";
-import {ContextMenu, ContextMenuButton, MenuItem} from "./ContextMenu";
+import { ChevronFace, ContextMenu, ContextMenuButton, MenuItem } from "./ContextMenu";
import {USER_NOTIFICATIONS_TAB, USER_SECURITY_TAB} from "../views/dialogs/UserSettingsDialog";
import { OpenToTabPayload } from "../../dispatcher/payloads/OpenToTabPayload";
import RedesignFeedbackDialog from "../views/dialogs/RedesignFeedbackDialog";
@@ -122,7 +121,7 @@ export default class UserMenu extends React.Component {
}
};
- private onOpenMenuClick = (ev: InputEvent) => {
+ private onOpenMenuClick = (ev: React.MouseEvent) => {
ev.preventDefault();
ev.stopPropagation();
const target = ev.target as HTMLButtonElement;
@@ -235,7 +234,7 @@ export default class UserMenu extends React.Component {
return (
{
label={_t("All settings")}
onClick={(e) => this.onSettingsOpen(e, null)}
/>
- {
{name}
{buttons}
- {this.renderContextMenu()}
+ {this.renderContextMenu()}
);
}
diff --git a/src/components/views/avatars/BaseAvatar.js b/src/components/views/avatars/BaseAvatar.tsx
similarity index 78%
rename from src/components/views/avatars/BaseAvatar.js
rename to src/components/views/avatars/BaseAvatar.tsx
index 53e8d0072b..aa2c0ea954 100644
--- a/src/components/views/avatars/BaseAvatar.js
+++ b/src/components/views/avatars/BaseAvatar.tsx
@@ -18,7 +18,7 @@ limitations under the License.
*/
import React, {useCallback, useContext, useEffect, useMemo, useState} from 'react';
-import PropTypes from 'prop-types';
+import classNames from 'classnames';
import * as AvatarLogic from '../../../Avatar';
import SettingsStore from "../../../settings/SettingsStore";
import AccessibleButton from '../elements/AccessibleButton';
@@ -26,9 +26,25 @@ import MatrixClientContext from "../../../contexts/MatrixClientContext";
import {useEventEmitter} from "../../../hooks/useEventEmitter";
import {toPx} from "../../../utils/units";
-const useImageUrl = ({url, urls}) => {
- const [imageUrls, setUrls] = useState([]);
- const [urlsIndex, setIndex] = useState();
+interface IProps {
+ name: string; // The name (first initial used as default)
+ idName?: string; // ID for generating hash colours
+ title?: string; // onHover title text
+ url?: string; // highest priority of them all, shortcut to set in urls[0]
+ urls?: string[]; // [highest_priority, ... , lowest_priority]
+ width?: number;
+ height?: number;
+ // XXX: resizeMethod not actually used.
+ resizeMethod?: string;
+ defaultToInitialLetter?: boolean; // true to add default url
+ onClick?: React.MouseEventHandler;
+ inputRef?: React.RefObject
+
+
+
- { children }
-
- );
-};
-ContextMenuButton.propTypes = {
- ...AccessibleButton.propTypes,
- label: PropTypes.string,
- isExpanded: PropTypes.bool.isRequired, // whether or not the context menu is currently open
-};
-
-// Semantic component for representing a role=menuitem
-export const MenuItem = ({children, label, ...props}) => {
- const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
- return (
-
- { children }
-
- );
-};
-MenuItem.propTypes = {
- ...AccessibleButton.propTypes,
- label: PropTypes.string, // optional
- className: PropTypes.string, // optional
- onClick: PropTypes.func.isRequired,
-};
-
-// Semantic component for representing a role=group for grouping menu radios/checkboxes
-export const MenuGroup = ({children, label, ...props}) => {
- return
- { children }
-
- );
-};
-MenuItemCheckbox.propTypes = {
- ...AccessibleButton.propTypes,
- label: PropTypes.string, // optional
- active: PropTypes.bool.isRequired,
- disabled: PropTypes.bool, // optional
- className: PropTypes.string, // optional
- onClick: PropTypes.func.isRequired,
-};
-
-// Semantic component for representing a styled role=menuitemcheckbox
-export const StyledMenuItemCheckbox = ({children, label, onChange, onClose, checked, disabled=false, ...props}) => {
- const onKeyDown = (e) => {
- if (e.key === Key.ENTER || e.key === Key.SPACE) {
- e.stopPropagation();
- e.preventDefault();
- onChange();
- // Implements https://www.w3.org/TR/wai-aria-practices/#keyboard-interaction-12
- if (e.key === Key.ENTER) {
- onClose();
- }
- }
- };
- const onKeyUp = (e) => {
- // prevent the input default handler as we handle it on keydown to match
- // https://www.w3.org/TR/wai-aria-practices/examples/menubar/menubar-2/menubar-2.html
- if (e.key === Key.SPACE || e.key === Key.ENTER) {
- e.stopPropagation();
- e.preventDefault();
- }
- };
- return (
-
- { children }
-
- );
-};
-StyledMenuItemCheckbox.propTypes = {
- ...StyledCheckbox.propTypes,
- label: PropTypes.string, // optional
- checked: PropTypes.bool.isRequired,
- disabled: PropTypes.bool, // optional
- className: PropTypes.string, // optional
- onChange: PropTypes.func.isRequired,
- onClose: PropTypes.func.isRequired, // gets called after onChange on Key.ENTER
-};
-
-// Semantic component for representing a role=menuitemradio
-export const MenuItemRadio = ({children, label, active=false, disabled=false, ...props}) => {
- const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
- return (
-
- { children }
-
- );
-};
-MenuItemRadio.propTypes = {
- ...AccessibleButton.propTypes,
- label: PropTypes.string, // optional
- active: PropTypes.bool.isRequired,
- disabled: PropTypes.bool, // optional
- className: PropTypes.string, // optional
- onClick: PropTypes.func.isRequired,
-};
-
-// Semantic component for representing a styled role=menuitemradio
-export const StyledMenuItemRadio = ({children, label, onChange, onClose, checked=false, disabled=false, ...props}) => {
- const onKeyDown = (e) => {
- if (e.key === Key.ENTER || e.key === Key.SPACE) {
- e.stopPropagation();
- e.preventDefault();
- onChange();
- // Implements https://www.w3.org/TR/wai-aria-practices/#keyboard-interaction-12
- if (e.key === Key.ENTER) {
- onClose();
- }
- }
- };
- const onKeyUp = (e) => {
- // prevent the input default handler as we handle it on keydown to match
- // https://www.w3.org/TR/wai-aria-practices/examples/menubar/menubar-2/menubar-2.html
- if (e.key === Key.SPACE || e.key === Key.ENTER) {
- e.stopPropagation();
- e.preventDefault();
- }
- };
- return (
-
- { children }
-
- );
-};
-StyledMenuItemRadio.propTypes = {
- ...StyledMenuItemRadio.propTypes,
- label: PropTypes.string, // optional
- checked: PropTypes.bool.isRequired,
- disabled: PropTypes.bool, // optional
- className: PropTypes.string, // optional
- onChange: PropTypes.func.isRequired,
- onClose: PropTypes.func.isRequired, // gets called after onChange on Key.ENTER
-};
-
// Placement method for {
};
private handleStickyHeaders(list: HTMLDivElement) {
- // TODO: Evaluate if this has any performance benefit or detriment.
- // See https://github.com/vector-im/riot-web/issues/14035
-
if (this.isDoingStickyHeaders) return;
this.isDoingStickyHeaders = true;
- if (window.requestAnimationFrame) {
- window.requestAnimationFrame(() => {
- this.doStickyHeaders(list);
- this.isDoingStickyHeaders = false;
- });
- } else {
+ window.requestAnimationFrame(() => {
this.doStickyHeaders(list);
this.isDoingStickyHeaders = false;
- }
+ });
}
private doStickyHeaders(list: HTMLDivElement) {
- const rlRect = list.getBoundingClientRect();
- const bottom = rlRect.bottom;
- const top = rlRect.top;
+ const topEdge = list.scrollTop;
+ const bottomEdge = list.offsetHeight + list.scrollTop;
const sublists = list.querySelectorAll(".mx_RoomSublist2");
- const headerHeight = 32; // Note: must match the CSS!
- const headerRightMargin = 24; // calculated from margins and widths to align with non-sticky tiles
- const headerStickyWidth = rlRect.width - headerRightMargin;
+ const headerRightMargin = 16; // calculated from margins and widths to align with non-sticky tiles
+ const headerStickyWidth = list.clientWidth - headerRightMargin;
+
+ // We track which styles we want on a target before making the changes to avoid
+ // excessive layout updates.
+ const targetStyles = new Map();
- let gotBottom = false;
let lastTopHeader;
+ let firstBottomHeader;
for (const sublist of sublists) {
- const slRect = sublist.getBoundingClientRect();
-
const header = sublist.querySelector(".mx_RoomSublist2_stickable");
+ header.style.removeProperty("display"); // always clear display:none first
- if (slRect.top + headerHeight > bottom && !gotBottom) {
- header.classList.add("mx_RoomSublist2_headerContainer_sticky");
- header.classList.add("mx_RoomSublist2_headerContainer_stickyBottom");
- header.style.width = `${headerStickyWidth}px`;
- header.style.removeProperty("top");
- gotBottom = true;
- } else if ((slRect.top - (headerHeight / 3)) < top) {
- header.classList.add("mx_RoomSublist2_headerContainer_sticky");
- header.classList.add("mx_RoomSublist2_headerContainer_stickyTop");
- header.style.width = `${headerStickyWidth}px`;
- header.style.top = `${rlRect.top}px`;
+ // When an element is <=40% off screen, make it take over
+ const offScreenFactor = 0.4;
+ const isOffTop = (sublist.offsetTop + (offScreenFactor * HEADER_HEIGHT)) <= topEdge;
+ const isOffBottom = (sublist.offsetTop + (offScreenFactor * HEADER_HEIGHT)) >= bottomEdge;
+
+ if (isOffTop || sublist === sublists[0]) {
+ targetStyles.set(header, { stickyTop: true });
if (lastTopHeader) {
lastTopHeader.style.display = "none";
+ targetStyles.set(lastTopHeader, { makeInvisible: true });
}
- // first unset it, if set in last iteration
- header.style.removeProperty("display");
lastTopHeader = header;
+ } else if (isOffBottom && !firstBottomHeader) {
+ targetStyles.set(header, { stickyBottom: true });
+ firstBottomHeader = header;
} else {
- header.classList.remove("mx_RoomSublist2_headerContainer_sticky");
- header.classList.remove("mx_RoomSublist2_headerContainer_stickyTop");
- header.classList.remove("mx_RoomSublist2_headerContainer_stickyBottom");
- header.style.removeProperty("width");
- header.style.removeProperty("top");
+ targetStyles.set(header, {}); // nothing == clear
}
}
+
+ // Run over the style changes and make them reality. We check to see if we're about to
+ // cause a no-op update, as adding/removing properties that are/aren't there cause
+ // layout updates.
+ for (const header of targetStyles.keys()) {
+ const style = targetStyles.get(header);
+ const headerContainer = header.parentElement; // .mx_RoomSublist2_headerContainer
+
+ if (style.makeInvisible) {
+ // we will have already removed the 'display: none', so add it back.
+ header.style.display = "none";
+ continue; // nothing else to do, even if sticky somehow
+ }
+
+ if (style.stickyTop) {
+ if (!header.classList.contains("mx_RoomSublist2_headerContainer_stickyTop")) {
+ header.classList.add("mx_RoomSublist2_headerContainer_stickyTop");
+ }
+
+ const newTop = `${list.parentElement.offsetTop}px`;
+ if (header.style.top !== newTop) {
+ header.style.top = newTop;
+ }
+ } else if (style.stickyBottom) {
+ if (!header.classList.contains("mx_RoomSublist2_headerContainer_stickyBottom")) {
+ header.classList.add("mx_RoomSublist2_headerContainer_stickyBottom");
+ }
+ }
+
+ if (style.stickyTop || style.stickyBottom) {
+ if (!header.classList.contains("mx_RoomSublist2_headerContainer_sticky")) {
+ header.classList.add("mx_RoomSublist2_headerContainer_sticky");
+ }
+ if (!headerContainer.classList.contains("mx_RoomSublist2_headerContainer_hasSticky")) {
+ headerContainer.classList.add("mx_RoomSublist2_headerContainer_hasSticky");
+ }
+
+ const newWidth = `${headerStickyWidth}px`;
+ if (header.style.width !== newWidth) {
+ header.style.width = newWidth;
+ }
+ } else if (!style.stickyTop && !style.stickyBottom) {
+ if (header.classList.contains("mx_RoomSublist2_headerContainer_sticky")) {
+ header.classList.remove("mx_RoomSublist2_headerContainer_sticky");
+ }
+ if (header.classList.contains("mx_RoomSublist2_headerContainer_stickyTop")) {
+ header.classList.remove("mx_RoomSublist2_headerContainer_stickyTop");
+ }
+ if (header.classList.contains("mx_RoomSublist2_headerContainer_stickyBottom")) {
+ header.classList.remove("mx_RoomSublist2_headerContainer_stickyBottom");
+ }
+ if (headerContainer.classList.contains("mx_RoomSublist2_headerContainer_hasSticky")) {
+ headerContainer.classList.remove("mx_RoomSublist2_headerContainer_hasSticky");
+ }
+ if (header.style.width) {
+ header.style.removeProperty('width');
+ }
+ if (header.style.top) {
+ header.style.removeProperty('top');
+ }
+ }
+ }
+
+ // add appropriate sticky classes to wrapper so it has
+ // the necessary top/bottom padding to put the sticky header in
+ const listWrapper = list.parentElement; // .mx_LeftPanel2_roomListWrapper
+ if (lastTopHeader) {
+ listWrapper.classList.add("mx_LeftPanel2_roomListWrapper_stickyTop");
+ } else {
+ listWrapper.classList.remove("mx_LeftPanel2_roomListWrapper_stickyTop");
+ }
+ if (firstBottomHeader) {
+ listWrapper.classList.add("mx_LeftPanel2_roomListWrapper_stickyBottom");
+ } else {
+ listWrapper.classList.remove("mx_LeftPanel2_roomListWrapper_stickyBottom");
+ }
}
// TODO: Improve header reliability: https://github.com/vector-im/riot-web/issues/14232
@@ -325,15 +393,17 @@ export default class LeftPanel2 extends React.Component {
{ chevron }
{ props.children }
@@ -350,195 +382,13 @@ export class ContextMenu extends React.Component {
);
}
- render() {
+ render(): React.ReactChild {
return ReactDOM.createPortal(this.renderMenu(), getOrCreateContainer());
}
}
-// Semantic component for representing the AccessibleButton which launches a
- { children }
-
;
-};
-MenuGroup.propTypes = {
- label: PropTypes.string.isRequired,
- className: PropTypes.string, // optional
-};
-
-// Semantic component for representing a role=menuitemcheckbox
-export const MenuItemCheckbox = ({children, label, active=false, disabled=false, ...props}) => {
- const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
- return (
-
+ {props.children}
+
;
+};
+
+export default PulsedAvatar;
\ No newline at end of file
diff --git a/src/components/views/avatars/RoomAvatar.js b/src/components/views/avatars/RoomAvatar.tsx
similarity index 59%
rename from src/components/views/avatars/RoomAvatar.js
rename to src/components/views/avatars/RoomAvatar.tsx
index a72d318b8d..0947157652 100644
--- a/src/components/views/avatars/RoomAvatar.js
+++ b/src/components/views/avatars/RoomAvatar.tsx
@@ -13,90 +13,96 @@ 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 from "react";
-import PropTypes from 'prop-types';
-import createReactClass from 'create-react-class';
-import {MatrixClientPeg} from "../../../MatrixClientPeg";
+import React from 'react';
+import Room from 'matrix-js-sdk/src/models/room';
+import {getHttpUriForMxc} from 'matrix-js-sdk/src/content-repo';
+
+import BaseAvatar from './BaseAvatar';
+import ImageView from '../elements/ImageView';
+import {MatrixClientPeg} from '../../../MatrixClientPeg';
import Modal from '../../../Modal';
-import * as sdk from "../../../index";
import * as Avatar from '../../../Avatar';
-import {getHttpUriForMxc} from "matrix-js-sdk/src/content-repo";
-
-export default createReactClass({
- displayName: 'RoomAvatar',
+interface IProps {
// Room may be left unset here, but if it is,
// oobData.avatarUrl should be set (else there
// would be nowhere to get the avatar from)
- propTypes: {
- room: PropTypes.object,
- oobData: PropTypes.object,
- width: PropTypes.number,
- height: PropTypes.number,
- resizeMethod: PropTypes.string,
- viewAvatarOnClick: PropTypes.bool,
- },
+ room?: Room;
+ // TODO: type when js-sdk has types
+ oobData?: any;
+ width?: number;
+ height?: number;
+ resizeMethod?: string;
+ viewAvatarOnClick?: boolean;
+}
- getDefaultProps: function() {
- return {
- width: 36,
- height: 36,
- resizeMethod: 'crop',
- oobData: {},
+interface IState {
+ urls: string[];
+}
+
+export default class RoomAvatar extends React.Component{props.numUnreadMessages}
);
}
- return (
+ return (
diff --git a/src/components/views/rooms/NotificationBadge.tsx b/src/components/views/rooms/NotificationBadge.tsx
index 829b05fbfc..941a057927 100644
--- a/src/components/views/rooms/NotificationBadge.tsx
+++ b/src/components/views/rooms/NotificationBadge.tsx
@@ -22,11 +22,10 @@ import { DefaultTagID, TagID } from "../../../stores/room-list/models";
import { readReceiptChangeIsFor } from "../../../utils/read-receipts";
import AccessibleButton from "../elements/AccessibleButton";
import { XOR } from "../../../@types/common";
-import { INotificationState, NOTIFICATION_STATE_UPDATE } from "../../../stores/notifications/INotificationState";
-import { NotificationColor } from "../../../stores/notifications/NotificationColor";
+import { NOTIFICATION_STATE_UPDATE, NotificationState } from "../../../stores/notifications/NotificationState";
interface IProps {
- notification: INotificationState;
+ notification: NotificationState;
/**
* If true, the badge will show a count if at all possible. This is typically
@@ -97,19 +96,17 @@ export default class NotificationBadge extends React.PureComponent= NotificationColor.Red;
- const hasCount = notification.color >= NotificationColor.Grey;
const hasAnySymbol = notification.symbol || notification.count > 0;
- let isEmptyBadge = !hasAnySymbol || !hasCount;
+ let isEmptyBadge = !hasAnySymbol || !notification.hasUnreadCount;
if (forceCount) {
isEmptyBadge = false;
- if (!hasCount) return null; // Can't render a badge
+ if (!notification.hasUnreadCount) return null; // Can't render a badge
}
let symbol = notification.symbol || formatMinimalBadgeCount(notification.count);
@@ -117,8 +114,8 @@ export default class NotificationBadge extends React.PureComponent 0 && symbol.length < 3,
'mx_NotificationBadge_3char': symbol.length > 2,
diff --git a/src/components/views/rooms/RoomBreadcrumbs2.tsx b/src/components/views/rooms/RoomBreadcrumbs2.tsx
index fce8c6ee3a..7d0584ef66 100644
--- a/src/components/views/rooms/RoomBreadcrumbs2.tsx
+++ b/src/components/views/rooms/RoomBreadcrumbs2.tsx
@@ -16,7 +16,6 @@ limitations under the License.
import React from "react";
import { BreadcrumbsStore } from "../../../stores/BreadcrumbsStore";
-import AccessibleButton from "../elements/AccessibleButton";
import DecoratedRoomAvatar from "../avatars/DecoratedRoomAvatar";
import { _t } from "../../../languageHandler";
import { Room } from "matrix-js-sdk/src/models/room";
@@ -92,9 +91,6 @@ export default class RoomBreadcrumbs2 extends React.PureComponent {
const roomTags = RoomListStore.instance.getTagsForRoom(r);
const roomTag = roomTags.includes(DefaultTagID.DM) ? DefaultTagID.DM : roomTags[0];
diff --git a/src/components/views/rooms/RoomList2.tsx b/src/components/views/rooms/RoomList2.tsx
index db246b182d..710af076cd 100644
--- a/src/components/views/rooms/RoomList2.tsx
+++ b/src/components/views/rooms/RoomList2.tsx
@@ -32,15 +32,14 @@ import defaultDispatcher from "../../../dispatcher/dispatcher";
import RoomSublist2 from "./RoomSublist2";
import { ActionPayload } from "../../../dispatcher/payloads";
import { NameFilterCondition } from "../../../stores/room-list/filters/NameFilterCondition";
-import { ListLayout } from "../../../stores/room-list/ListLayout";
import { MatrixClientPeg } from "../../../MatrixClientPeg";
import GroupAvatar from "../avatars/GroupAvatar";
import TemporaryTile from "./TemporaryTile";
import { StaticNotificationState } from "../../../stores/notifications/StaticNotificationState";
import { NotificationColor } from "../../../stores/notifications/NotificationColor";
-import { TagSpecificNotificationState } from "../../../stores/notifications/TagSpecificNotificationState";
import { Action } from "../../../dispatcher/actions";
import { ViewRoomDeltaPayload } from "../../../dispatcher/payloads/ViewRoomDeltaPayload";
+import { RoomNotificationStateStore } from "../../../stores/notifications/RoomNotificationStateStore";
// TODO: Remove banner on launch: https://github.com/vector-im/riot-web/issues/14367
// TODO: Rename on launch: https://github.com/vector-im/riot-web/issues/14367
@@ -66,7 +65,6 @@ interface IProps {
interface IState {
sublists: ITagMap;
- layouts: Map;
}
const TAG_ORDER: TagID[] = [
@@ -151,7 +149,6 @@ export default class RoomList2 extends React.Component {
this.state = {
sublists: {},
- layouts: new Map(),
};
this.dispatcherRef = defaultDispatcher.register(this.onAction);
@@ -204,14 +201,11 @@ export default class RoomList2 extends React.Component {
let listRooms = lists[t];
if (unread) {
- // TODO Be smarter and not spin up a bunch of wasted listeners just to kill them 4 lines later
- // https://github.com/vector-im/riot-web/issues/14035
- const notificationStates = rooms.map(r => new TagSpecificNotificationState(r, t));
// filter to only notification rooms (and our current active room so we can index properly)
- listRooms = notificationStates.filter(state => {
- return state.room.roomId === roomId || state.color >= NotificationColor.Bold;
+ listRooms = listRooms.filter(r => {
+ const state = RoomNotificationStateStore.instance.getRoomState(r, t);
+ return state.room.roomId === roomId || state.isUnread;
});
- notificationStates.forEach(state => state.destroy());
}
rooms.push(...listRooms);
@@ -227,12 +221,7 @@ export default class RoomList2 extends React.Component {
const newLists = RoomListStore.instance.orderedLists;
console.log("new lists", newLists);
- const layoutMap = new Map();
- for (const tagId of Object.keys(newLists)) {
- layoutMap.set(tagId, new ListLayout(tagId));
- }
-
- this.setState({sublists: newLists, layouts: layoutMap}, () => {
+ this.setState({sublists: newLists}, () => {
this.props.onResize();
});
};
@@ -301,11 +290,10 @@ export default class RoomList2 extends React.Component {
label={_t(aesthetics.sectionLabel)}
onAddRoom={onAddRoomFn}
addRoomLabel={aesthetics.addRoomLabel}
- isInvite={aesthetics.isInvite}
- layout={this.state.layouts.get(orderedTagId)}
isMinimized={this.props.isMinimized}
onResize={this.props.onResize}
extraBadTilesThatShouldntExist={extraTiles}
+ isFiltered={!!this.searchFilter.search}
/>
);
}
diff --git a/src/components/views/rooms/RoomSublist2.tsx b/src/components/views/rooms/RoomSublist2.tsx
index 60d4e307a1..6d55c41c44 100644
--- a/src/components/views/rooms/RoomSublist2.tsx
+++ b/src/components/views/rooms/RoomSublist2.tsx
@@ -24,9 +24,9 @@ import {RovingAccessibleButton, RovingTabIndexWrapper} from "../../../accessibil
import { _t } from "../../../languageHandler";
import AccessibleButton from "../../views/elements/AccessibleButton";
import RoomTile2 from "./RoomTile2";
-import { ResizableBox, ResizeCallbackData } from "react-resizable";
import { ListLayout } from "../../../stores/room-list/ListLayout";
import {
+ ChevronFace,
ContextMenu,
ContextMenuButton,
StyledMenuItemCheckbox,
@@ -40,7 +40,13 @@ import NotificationBadge from "./NotificationBadge";
import { ListNotificationState } from "../../../stores/notifications/ListNotificationState";
import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
import { Key } from "../../../Keyboard";
-import StyledCheckbox from "../elements/StyledCheckbox";
+import defaultDispatcher from "../../../dispatcher/dispatcher";
+import {ActionPayload} from "../../../dispatcher/payloads";
+import { Enable, Resizable } from "re-resizable";
+import { Direction } from "re-resizable/lib/resizer";
+import { polyfillTouchEvent } from "../../../@types/polyfill";
+import { RoomNotificationStateStore } from "../../../stores/notifications/RoomNotificationStateStore";
+import RoomListLayoutStore from "../../../stores/room-list/RoomListLayoutStore";
// TODO: Remove banner on launch: https://github.com/vector-im/riot-web/issues/14367
// TODO: Rename on launch: https://github.com/vector-im/riot-web/issues/14367
@@ -55,9 +61,13 @@ import StyledCheckbox from "../elements/StyledCheckbox";
const SHOW_N_BUTTON_HEIGHT = 32; // As defined by CSS
const RESIZE_HANDLE_HEIGHT = 4; // As defined by CSS
+export const HEADER_HEIGHT = 32; // As defined by CSS
const MAX_PADDING_HEIGHT = SHOW_N_BUTTON_HEIGHT + RESIZE_HANDLE_HEIGHT;
+// HACK: We really shouldn't have to do this.
+polyfillTouchEvent();
+
interface IProps {
forRooms: boolean;
rooms?: Room[];
@@ -65,11 +75,10 @@ interface IProps {
label: string;
onAddRoom?: () => void;
addRoomLabel: string;
- isInvite: boolean;
- layout?: ListLayout;
isMinimized: boolean;
tagId: TagID;
onResize: () => void;
+ isFiltered: boolean;
// TODO: Don't use this. It's for community invites, and community invites shouldn't be here.
// You should feel bad if you use this.
@@ -84,21 +93,28 @@ interface IState {
notificationState: ListNotificationState;
contextMenuPosition: PartialDOMRect;
isResizing: boolean;
+ isExpanded: boolean; // used for the for expand of the sublist when the room list is being filtered
}
export default class RoomSublist2 extends React.Component {
private headerButton = createRef();
private sublistRef = createRef();
+ private dispatcherRef: string;
+ private layout: ListLayout;
constructor(props: IProps) {
super(props);
+ this.layout = RoomListLayoutStore.instance.getLayoutFor(this.props.tagId);
+
this.state = {
- notificationState: new ListNotificationState(this.props.isInvite, this.props.tagId),
+ notificationState: RoomNotificationStateStore.instance.getListState(this.props.tagId),
contextMenuPosition: null,
isResizing: false,
+ isExpanded: this.props.isFiltered ? this.props.isFiltered : !this.layout.isCollapsed
};
this.state.notificationState.setRooms(this.props.rooms);
+ this.dispatcherRef = defaultDispatcher.register(this.onAction);
}
private get numTiles(): number {
@@ -106,28 +122,69 @@ export default class RoomSublist2 extends React.Component {
}
private get numVisibleTiles(): number {
- if (!this.props.layout) return 0;
- const nVisible = Math.floor(this.props.layout.visibleTiles);
+ const nVisible = Math.floor(this.layout.visibleTiles);
return Math.min(nVisible, this.numTiles);
}
- public componentDidUpdate() {
+ public componentDidUpdate(prevProps: Readonly) {
this.state.notificationState.setRooms(this.props.rooms);
+ if (prevProps.isFiltered !== this.props.isFiltered) {
+ if (this.props.isFiltered) {
+ this.setState({isExpanded: true});
+ } else {
+ this.setState({isExpanded: !this.layout.isCollapsed});
+ }
+ }
}
public componentWillUnmount() {
this.state.notificationState.destroy();
+ defaultDispatcher.unregister(this.dispatcherRef);
}
+ private onAction = (payload: ActionPayload) => {
+ if (payload.action === "view_room" && payload.show_room_tile && this.props.rooms) {
+ // XXX: we have to do this a tick later because we have incorrect intermediate props during a room change
+ // where we lose the room we are changing from temporarily and then it comes back in an update right after.
+ setImmediate(() => {
+ const roomIndex = this.props.rooms.findIndex((r) => r.roomId === payload.room_id);
+
+ if (!this.state.isExpanded && roomIndex > -1) {
+ this.toggleCollapsed();
+ }
+ // extend the visible section to include the room if it is entirely invisible
+ if (roomIndex >= this.numVisibleTiles) {
+ this.layout.visibleTiles = this.layout.tilesWithPadding(roomIndex + 1, MAX_PADDING_HEIGHT);
+ this.forceUpdate(); // because the layout doesn't trigger a re-render
+ }
+ });
+ }
+ };
+
private onAddRoom = (e) => {
e.stopPropagation();
if (this.props.onAddRoom) this.props.onAddRoom();
};
- private onResize = (e: React.MouseEvent, data: ResizeCallbackData) => {
- const direction = e.movementY < 0 ? -1 : +1;
- const tileDiff = this.props.layout.pixelsToTiles(Math.abs(e.movementY)) * direction;
- this.props.layout.setVisibleTilesWithin(tileDiff, this.numTiles);
+ private onResize = (
+ e: MouseEvent | TouchEvent,
+ travelDirection: Direction,
+ refToElement: HTMLDivElement,
+ delta: { width: number, height: number }, // TODO: Use re-resizer's NumberSize when it is exposed as the type
+ ) => {
+ // Do some sanity checks, but in reality we shouldn't need these.
+ if (travelDirection !== "bottom") return;
+ if (delta.height === 0) return; // something went wrong, so just ignore it.
+
+ // NOTE: the movement in the MouseEvent (not present on a TouchEvent) is inaccurate
+ // for our purposes. The delta provided by the library is also a change *from when
+ // resizing started*, meaning it is fairly useless for us. This is why we just use
+ // the client height and run with it.
+
+ const heightBefore = this.layout.visibleTiles;
+ const heightInTiles = this.layout.pixelsToTiles(refToElement.clientHeight);
+ this.layout.setVisibleTilesWithin(heightInTiles, this.numTiles);
+ if (heightBefore === this.layout.visibleTiles) return; // no-op
this.forceUpdate(); // because the layout doesn't trigger a re-render
};
@@ -141,13 +198,13 @@ export default class RoomSublist2 extends React.Component {
private onShowAllClick = () => {
const numVisibleTiles = this.numVisibleTiles;
- this.props.layout.visibleTiles = this.props.layout.tilesWithPadding(this.numTiles, MAX_PADDING_HEIGHT);
+ this.layout.visibleTiles = this.layout.tilesWithPadding(this.numTiles, MAX_PADDING_HEIGHT);
this.forceUpdate(); // because the layout doesn't trigger a re-render
setImmediate(this.focusRoomTile, numVisibleTiles); // focus the tile after the current bottom one
};
private onShowLessClick = () => {
- this.props.layout.visibleTiles = this.props.layout.defaultVisibleTiles;
+ this.layout.visibleTiles = this.layout.defaultVisibleTiles;
this.forceUpdate(); // because the layout doesn't trigger a re-render
// focus will flow to the show more button here
};
@@ -161,7 +218,7 @@ export default class RoomSublist2 extends React.Component {
}
};
- private onOpenMenuClick = (ev: InputEvent) => {
+ private onOpenMenuClick = (ev: React.MouseEvent) => {
ev.preventDefault();
ev.stopPropagation();
const target = ev.target as HTMLButtonElement;
@@ -195,7 +252,7 @@ export default class RoomSublist2 extends React.Component {
};
private onMessagePreviewChanged = () => {
- this.props.layout.showPreviews = !this.props.layout.showPreviews;
+ this.layout.showPreviews = !this.layout.showPreviews;
this.forceUpdate(); // because the layout doesn't trigger a re-render
};
@@ -233,7 +290,11 @@ export default class RoomSublist2 extends React.Component {
const possibleSticky = target.parentElement;
const sublist = possibleSticky.parentElement.parentElement;
- if (possibleSticky.classList.contains('mx_RoomSublist2_headerContainer_sticky')) {
+ const list = sublist.parentElement.parentElement;
+ // the scrollTop is capped at the height of the header in LeftPanel2
+ const isAtTop = list.scrollTop <= HEADER_HEIGHT;
+ const isSticky = possibleSticky.classList.contains('mx_RoomSublist2_headerContainer_sticky');
+ if (isSticky && !isAtTop) {
// is sticky - jump to list
sublist.scrollIntoView({behavior: 'smooth'});
} else {
@@ -243,24 +304,23 @@ export default class RoomSublist2 extends React.Component {
};
private toggleCollapsed = () => {
- this.props.layout.isCollapsed = !this.props.layout.isCollapsed;
- this.forceUpdate(); // because the layout doesn't trigger an update
+ this.layout.isCollapsed = this.state.isExpanded;
+ this.setState({isExpanded: !this.layout.isCollapsed});
setImmediate(() => this.props.onResize()); // needs to happen when the DOM is updated
};
private onHeaderKeyDown = (ev: React.KeyboardEvent) => {
- const isCollapsed = this.props.layout && this.props.layout.isCollapsed;
switch (ev.key) {
case Key.ARROW_LEFT:
ev.stopPropagation();
- if (!isCollapsed) {
+ if (this.state.isExpanded) {
// On ARROW_LEFT collapse the room sublist if it isn't already
this.toggleCollapsed();
}
break;
case Key.ARROW_RIGHT: {
ev.stopPropagation();
- if (isCollapsed) {
+ if (!this.state.isExpanded) {
// On ARROW_RIGHT expand the room sublist if it isn't already
this.toggleCollapsed();
} else if (this.sublistRef.current) {
@@ -289,7 +349,7 @@ export default class RoomSublist2 extends React.Component {
};
private renderVisibleTiles(): React.ReactElement[] {
- if (this.props.layout && this.props.layout.isCollapsed) {
+ if (!this.state.isExpanded) {
// don't waste time on rendering
return [];
}
@@ -303,7 +363,7 @@ export default class RoomSublist2 extends React.Component {
{
{_t("Message preview")}
@@ -365,7 +425,7 @@ export default class RoomSublist2 extends React.Component {
contextMenu = (
{
const collapseClasses = classNames({
'mx_RoomSublist2_collapseBtn': true,
- 'mx_RoomSublist2_collapseBtn_collapsed': this.props.layout && this.props.layout.isCollapsed,
+ 'mx_RoomSublist2_collapseBtn_collapsed': !this.state.isExpanded,
});
const classes = classNames({
@@ -474,7 +534,7 @@ export default class RoomSublist2 extends React.Component {
tabIndex={tabIndex}
className="mx_RoomSublist2_headerText"
role="treeitem"
- aria-expanded={!this.props.layout || !this.props.layout.isCollapsed}
+ aria-expanded={this.state.isExpanded}
aria-level={1}
onClick={this.onHeaderClick}
onContextMenu={this.onContextMenu}
@@ -508,12 +568,10 @@ export default class RoomSublist2 extends React.Component {
let content = null;
if (visibleTiles.length > 0) {
- const layout = this.props.layout; // to shorten calls
+ const layout = this.layout; // to shorten calls
- const maxTilesFactored = layout.tilesWithResizerBoxFactor(this.numTiles);
const showMoreBtnClasses = classNames({
'mx_RoomSublist2_showNButton': true,
- 'mx_RoomSublist2_isCutting': this.state.isResizing && layout.visibleTiles < maxTilesFactored,
});
// If we're hiding rooms, show a 'show more' button to the user. This button
@@ -537,7 +595,7 @@ export default class RoomSublist2 extends React.Component {
{showMoreText}
);
- } else if (this.numTiles <= visibleTiles.length && this.numTiles > this.props.layout.defaultVisibleTiles) {
+ } else if (this.numTiles <= visibleTiles.length && this.numTiles > this.layout.defaultVisibleTiles) {
// we have all tiles visible - add a button to show less
let showLessText = (
@@ -556,9 +614,19 @@ export default class RoomSublist2 extends React.Component {
}
// Figure out if we need a handle
- let handles = ['s'];
+ const handles: Enable = {
+ bottom: true, // the only one we need, but the others must be explicitly false
+ bottomLeft: false,
+ bottomRight: false,
+ left: false,
+ right: false,
+ top: false,
+ topLeft: false,
+ topRight: false,
+ };
if (layout.visibleTiles >= this.numTiles && this.numTiles <= layout.minVisibleTiles) {
- handles = []; // no handles, we're at a minimum
+ // we're at a minimum, don't have a bottom handle
+ handles.bottom = false;
}
// We have to account for padding so we can accommodate a 'show more' button and
@@ -582,22 +650,33 @@ export default class RoomSublist2 extends React.Component {
const tilesWithoutPadding = Math.min(relativeTiles, layout.visibleTiles);
const tilesPx = layout.calculateTilesToPixelsMin(relativeTiles, tilesWithoutPadding, padding);
+ // Now that we know our padding constraints, let's find out if we need to chop off the
+ // last rendered visible tile so it doesn't collide with the 'show more' button
+ let visibleUnpaddedTiles = Math.round(layout.visibleTiles - layout.pixelsToTiles(padding));
+ if (visibleUnpaddedTiles === visibleTiles.length - 1) {
+ const placeholder = ;
+ visibleTiles.splice(visibleUnpaddedTiles, 1, placeholder);
+ }
+
+ const dimensions = {
+ height: tilesPx,
+ };
content = (
-
{visibleTiles}
{showNButton}
-
+
);
}
diff --git a/src/components/views/rooms/RoomTile2.tsx b/src/components/views/rooms/RoomTile2.tsx
index 3b15d7b27a..54395fa2b7 100644
--- a/src/components/views/rooms/RoomTile2.tsx
+++ b/src/components/views/rooms/RoomTile2.tsx
@@ -17,7 +17,7 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
-import React from "react";
+import React, {createRef} from "react";
import { Room } from "matrix-js-sdk/src/models/room";
import classNames from "classnames";
import { RovingTabIndexWrapper } from "../../../accessibility/RovingTabIndex";
@@ -27,6 +27,7 @@ import { Key } from "../../../Keyboard";
import ActiveRoomObserver from "../../../ActiveRoomObserver";
import { _t } from "../../../languageHandler";
import {
+ ChevronFace,
ContextMenu,
ContextMenuButton,
MenuItemRadio,
@@ -45,11 +46,14 @@ import {
MUTE,
} from "../../../RoomNotifs";
import { MatrixClientPeg } from "../../../MatrixClientPeg";
-import { TagSpecificNotificationState } from "../../../stores/notifications/TagSpecificNotificationState";
-import { INotificationState } from "../../../stores/notifications/INotificationState";
import NotificationBadge from "./NotificationBadge";
-import { NotificationColor } from "../../../stores/notifications/NotificationColor";
import { Volume } from "../../../RoomNotifsTypes";
+import RoomListStore from "../../../stores/room-list/RoomListStore2";
+import RoomListActions from "../../../actions/RoomListActions";
+import defaultDispatcher from "../../../dispatcher/dispatcher";
+import {ActionPayload} from "../../../dispatcher/payloads";
+import { RoomNotificationStateStore } from "../../../stores/notifications/RoomNotificationStateStore";
+import { NotificationState } from "../../../stores/notifications/NotificationState";
// TODO: Remove banner on launch: https://github.com/vector-im/riot-web/issues/14367
// TODO: Rename on launch: https://github.com/vector-im/riot-web/issues/14367
@@ -75,7 +79,7 @@ type PartialDOMRect = Pick;
interface IState {
hover: boolean;
- notificationState: INotificationState;
+ notificationState: NotificationState;
selected: boolean;
notificationsMenuPosition: PartialDOMRect;
generalMenuPosition: PartialDOMRect;
@@ -87,7 +91,7 @@ const contextMenuBelow = (elementRect: PartialDOMRect) => {
// align the context menu's icons with the icon which opened the context menu
const left = elementRect.left + window.pageXOffset - 9;
const top = elementRect.bottom + window.pageYOffset + 17;
- const chevronFace = "none";
+ const chevronFace = ChevronFace.None;
return {left, top, chevronFace};
};
@@ -118,18 +122,23 @@ const NotifOption: React.FC = ({active, onClick, iconClassNam
};
export default class RoomTile2 extends React.Component {
+ private dispatcherRef: string;
+ private roomTileRef = createRef();
+ // TODO: a11y: https://github.com/vector-im/riot-web/issues/14180
+
constructor(props: IProps) {
super(props);
this.state = {
hover: false,
- notificationState: new TagSpecificNotificationState(this.props.room, this.props.tag),
+ notificationState: RoomNotificationStateStore.instance.getRoomState(this.props.room, this.props.tag),
selected: ActiveRoomObserver.activeRoomId === this.props.room.roomId,
notificationsMenuPosition: null,
generalMenuPosition: null,
};
ActiveRoomObserver.addListener(this.props.room.roomId, this.onActiveRoomUpdate);
+ this.dispatcherRef = defaultDispatcher.register(this.onAction);
}
private get showContextMenu(): boolean {
@@ -140,12 +149,36 @@ export default class RoomTile2 extends React.Component {
return !this.props.isMinimized && this.props.showMessagePreview;
}
+ public componentDidMount() {
+ // when we're first rendered (or our sublist is expanded) make sure we are visible if we're active
+ if (this.state.selected) {
+ this.scrollIntoView();
+ }
+ }
+
public componentWillUnmount() {
if (this.props.room) {
ActiveRoomObserver.removeListener(this.props.room.roomId, this.onActiveRoomUpdate);
}
+ defaultDispatcher.unregister(this.dispatcherRef);
}
+ private onAction = (payload: ActionPayload) => {
+ if (payload.action === "view_room" && payload.room_id === this.props.room.roomId && payload.show_room_tile) {
+ setImmediate(() => {
+ this.scrollIntoView();
+ });
+ }
+ };
+
+ private scrollIntoView = () => {
+ if (!this.roomTileRef.current) return;
+ this.roomTileRef.current.scrollIntoView({
+ block: "nearest",
+ behavior: "auto",
+ });
+ };
+
private onTileMouseEnter = () => {
this.setState({hover: true});
};
@@ -159,7 +192,6 @@ export default class RoomTile2 extends React.Component {
ev.stopPropagation();
dis.dispatch({
action: 'view_room',
- // TODO: Support show_room_tile in new room list: https://github.com/vector-im/riot-web/issues/14233
show_room_tile: true, // make sure the room is visible in the list
room_id: this.props.room.roomId,
clear_search: (ev && (ev.key === Key.ENTER || ev.key === Key.SPACE)),
@@ -170,7 +202,7 @@ export default class RoomTile2 extends React.Component {
this.setState({selected: isActive});
};
- private onNotificationsMenuOpenClick = (ev: InputEvent) => {
+ private onNotificationsMenuOpenClick = (ev: React.MouseEvent) => {
ev.preventDefault();
ev.stopPropagation();
const target = ev.target as HTMLButtonElement;
@@ -181,7 +213,7 @@ export default class RoomTile2 extends React.Component {
this.setState({notificationsMenuPosition: null});
};
- private onGeneralMenuOpenClick = (ev: InputEvent) => {
+ private onGeneralMenuOpenClick = (ev: React.MouseEvent) => {
ev.preventDefault();
ev.stopPropagation();
const target = ev.target as HTMLButtonElement;
@@ -210,8 +242,22 @@ export default class RoomTile2 extends React.Component {
ev.preventDefault();
ev.stopPropagation();
- // TODO: Support tagging: https://github.com/vector-im/riot-web/issues/14211
- // TODO: XOR favourites and low priority: https://github.com/vector-im/riot-web/issues/14210
+ if (tagId === DefaultTagID.Favourite) {
+ const roomTags = RoomListStore.instance.getTagsForRoom(this.props.room);
+ const isFavourite = roomTags.includes(DefaultTagID.Favourite);
+ const removeTag = isFavourite ? DefaultTagID.Favourite : DefaultTagID.LowPriority;
+ const addTag = isFavourite ? null : DefaultTagID.Favourite;
+ dis.dispatch(RoomListActions.tagRoom(
+ MatrixClientPeg.get(),
+ this.props.room,
+ removeTag,
+ addTag,
+ undefined,
+ 0
+ ));
+ } else {
+ console.log(`Unexpected tag ${tagId} applied to ${this.props.room.room_id}`);
+ }
if ((ev as React.KeyboardEvent).key === Key.ENTER) {
// Implements https://www.w3.org/TR/wai-aria-practices/#keyboard-interaction-12
@@ -343,6 +389,13 @@ export default class RoomTile2 extends React.Component {
// TODO: We could do with a proper invite context menu, unlike what showContextMenu suggests
+ const roomTags = RoomListStore.instance.getTagsForRoom(this.props.room);
+
+ const isFavorite = roomTags.includes(DefaultTagID.Favourite);
+ const favouriteIconClassName = isFavorite ? "mx_RoomTile2_iconFavorite" : "mx_RoomTile2_iconStar";
+ const favouriteLabelClassName = isFavorite ? "mx_RoomTile2_contextMenu_activeRow" : "";
+ const favouriteLabel = isFavorite ? _t("Favourited") : _t("Favourite");
+
let contextMenu = null;
if (this.state.generalMenuPosition) {
contextMenu = (
@@ -350,12 +403,13 @@ export default class RoomTile2 extends React.Component {
this.onTagRoom(e, DefaultTagID.Favourite)}
- active={false} // TODO: https://github.com/vector-im/riot-web/issues/14283
- label={_t("Favourite")}
+ active={isFavorite}
+ label={favouriteLabel}
>
-
- {_t("Favourite")}
+
+ {favouriteLabel}
+
);
}
diff --git a/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx b/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx
index 9bed2fb039..3cb0028f45 100644
--- a/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx
+++ b/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx
@@ -402,6 +402,12 @@ export default class AppearanceUserSettingsTab extends React.Component this.setState({useIRCLayout: checked})}
+ />
{this.renderThemeSection()}
{SettingsStore.isFeatureEnabled("feature_font_scaling") ? this.renderFontSection() : null}
- {SettingsStore.isFeatureEnabled("feature_irc_ui") ? this.renderLayoutSection() : null}
{this.renderAdvancedSection()}
);
diff --git a/src/components/views/voip/CallContainer.tsx b/src/components/views/voip/CallContainer.tsx
new file mode 100644
index 0000000000..0e901fac7d
--- /dev/null
+++ b/src/components/views/voip/CallContainer.tsx
@@ -0,0 +1,37 @@
+/*
+Copyright 2020 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 from 'react';
+import IncomingCallBox2 from './IncomingCallBox2';
+import CallPreview from './CallPreview2';
+import * as VectorConferenceHandler from '../../../VectorConferenceHandler';
+
+interface IProps {
+
+}
+
+interface IState {
+
+}
+
+export default class CallContainer extends React.PureComponent {
+ public render() {
+ return {
+ private roomStoreToken: any;
+ private dispatcherRef: string;
+ private settingsWatcherRef: string;
+
+ constructor(props: IProps) {
+ super(props);
+
+ this.state = {
+ roomId: RoomViewStore.getRoomId(),
+ activeCall: CallHandler.getAnyActiveCall(),
+ newRoomListActive: SettingsStore.getValue("feature_new_room_list"),
+ };
+
+ this.settingsWatcherRef = SettingsStore.watchSetting("feature_new_room_list", null, (name, roomId, level, valAtLevel, newVal) => this.setState({
+ newRoomListActive: newVal,
+ }));
+ }
+
+ public componentDidMount() {
+ this.roomStoreToken = RoomViewStore.addListener(this.onRoomViewStoreUpdate);
+ this.dispatcherRef = dis.register(this.onAction);
+ }
+
+ public componentWillUnmount() {
+ if (this.roomStoreToken) {
+ this.roomStoreToken.remove();
+ }
+ dis.unregister(this.dispatcherRef);
+ SettingsStore.unwatchSetting(this.settingsWatcherRef);
+ }
+
+ private onRoomViewStoreUpdate = (payload) => {
+ if (RoomViewStore.getRoomId() === this.state.roomId) return;
+ this.setState({
+ roomId: RoomViewStore.getRoomId(),
+ });
+ };
+
+ private onAction = (payload: ActionPayload) => {
+ switch (payload.action) {
+ // listen for call state changes to prod the render method, which
+ // may hide the global CallView if the call it is tracking is dead
+ case 'call_state':
+ this.setState({
+ activeCall: CallHandler.getAnyActiveCall(),
+ });
+ break;
+ }
+ };
+
+ private onCallViewClick = () => {
+ const call = CallHandler.getAnyActiveCall();
+ if (call) {
+ dis.dispatch({
+ action: 'view_room',
+ room_id: call.groupRoomId || call.roomId,
+ });
+ }
+ };
+
+ public render() {
+ if (this.state.newRoomListActive) {
+ const callForRoom = CallHandler.getCallForRoom(this.state.roomId);
+ const showCall = (
+ this.state.activeCall &&
+ this.state.activeCall.call_state === 'connected' &&
+ !callForRoom
+ );
+
+ if (showCall) {
+ return (
+ {
+ private videoref: React.RefObject;
+ private dispatcherRef: string;
+ public call: any;
+
+ constructor(props: IProps) {
+ super(props);
+
+ this.state = {
+ // the call this view is displaying (if any)
+ call: null,
+ };
+
+ this.videoref = createRef();
+ }
+
+ public componentDidMount() {
+ this.dispatcherRef = dis.register(this.onAction);
+ this.showCall();
+ }
+
+ public componentWillUnmount() {
+ dis.unregister(this.dispatcherRef);
+ }
+
+ private onAction = (payload) => {
+ // don't filter out payloads for room IDs other than props.room because
+ // we may be interested in the conf 1:1 room
+ if (payload.action !== 'call_state') {
+ return;
+ }
+ this.showCall();
+ };
+
+ private showCall() {
+ let call;
+
+ if (this.props.room) {
+ const roomId = this.props.room.roomId;
+ call = CallHandler.getCallForRoom(roomId) ||
+ (this.props.ConferenceHandler ?
+ this.props.ConferenceHandler.getConferenceCallForRoom(roomId) :
+ null
+ );
+
+ if (this.call) {
+ this.setState({ call: call });
+ }
+ } else {
+ call = CallHandler.getAnyActiveCall();
+ // Ignore calls if we can't get the room associated with them.
+ // I think the underlying problem is that the js-sdk sends events
+ // for calls before it has made the rooms available in the store,
+ // although this isn't confirmed.
+ if (MatrixClientPeg.get().getRoom(call.roomId) === null) {
+ call = null;
+ }
+ this.setState({ call: call });
+ }
+
+ if (call) {
+ call.setLocalVideoElement(this.getVideoView().getLocalVideoElement());
+ call.setRemoteVideoElement(this.getVideoView().getRemoteVideoElement());
+ // always use a separate element for audio stream playback.
+ // this is to let us move CallView around the DOM without interrupting remote audio
+ // during playback, by having the audio rendered by a top-level element.
+ // rather than being rendered by the main remoteVideo element.
+ call.setRemoteAudioElement(this.getVideoView().getRemoteAudioElement());
+ }
+ if (call && call.type === "video" && call.call_state !== "ended" && call.call_state !== "ringing") {
+ // if this call is a conf call, don't display local video as the
+ // conference will have us in it
+ this.getVideoView().getLocalVideoElement().style.display = (
+ call.confUserId ? "none" : "block"
+ );
+ this.getVideoView().getRemoteVideoElement().style.display = "block";
+ } else {
+ this.getVideoView().getLocalVideoElement().style.display = "none";
+ this.getVideoView().getRemoteVideoElement().style.display = "none";
+ dis.dispatch({action: 'video_fullscreen', fullscreen: false});
+ }
+
+ if (this.props.onResize) {
+ this.props.onResize();
+ }
+ }
+
+ private getVideoView() {
+ return this.videoref.current;
+ }
+
+ public render() {
+ let view: React.ReactNode;
+ if (this.state.call && this.state.call.type === "voice") {
+ const client = MatrixClientPeg.get();
+ const callRoom = client.getRoom(this.state.call.roomId);
+
+ view =
+
+
+ ;
+ } else {
+ view =
+ {_t('Make this room low priority')}
+
+
;
+ }
+}
\ No newline at end of file
diff --git a/src/components/views/voip/CallPreview2.tsx b/src/components/views/voip/CallPreview2.tsx
new file mode 100644
index 0000000000..1f2caf5ef8
--- /dev/null
+++ b/src/components/views/voip/CallPreview2.tsx
@@ -0,0 +1,129 @@
+/*
+Copyright 2017, 2018 New Vector Ltd
+Copyright 2019, 2020 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.
+*/
+
+// TODO: Rename on launch: https://github.com/vector-im/riot-web/issues/14231
+
+import React from 'react';
+
+import CallView from "./CallView2";
+import RoomViewStore from '../../../stores/RoomViewStore';
+import CallHandler from '../../../CallHandler';
+import dis from '../../../dispatcher/dispatcher';
+import { ActionPayload } from '../../../dispatcher/payloads';
+import PersistentApp from "../elements/PersistentApp";
+import SettingsStore from "../../../settings/SettingsStore";
+
+interface IProps {
+ // A Conference Handler implementation
+ // Must have a function signature:
+ // getConferenceCallForRoom(roomId: string): MatrixCall
+ ConferenceHandler: any;
+}
+
+interface IState {
+ roomId: string;
+ activeCall: any;
+ newRoomListActive: boolean;
+}
+
+export default class CallPreview extends React.Component
+
+ {callRoom.name}
+{ _t("Active call") }
+ {
+ dis.dispatch({
+ action: 'hangup',
+ room_id: this.state.call.roomId,
+ });
+ }}
+ />;
+ }
+
+ return {
+ private dispatcherRef: string;
+
+ constructor(props: IProps) {
+ super(props);
+
+ this.dispatcherRef = dis.register(this.onAction);
+ this.state = {
+ incomingCall: null,
+ };
+ }
+
+ public componentWillUnmount() {
+ dis.unregister(this.dispatcherRef);
+ }
+
+ private onAction = (payload: ActionPayload) => {
+ switch (payload.action) {
+ case 'call_state':
+ const call = CallHandler.getCall(payload.room_id);
+ if (call && call.call_state === 'ringing') {
+ this.setState({
+ incomingCall: call,
+ });
+ } else {
+ this.setState({
+ incomingCall: null,
+ });
+ }
+ }
+ };
+
+ private onAnswerClick: React.MouseEventHandler = (e) => {
+ e.stopPropagation();
+ dis.dispatch({
+ action: 'answer',
+ room_id: this.state.incomingCall.roomId,
+ });
+ };
+
+ private onRejectClick: React.MouseEventHandler = (e) => {
+ e.stopPropagation();
+ dis.dispatch({
+ action: 'hangup',
+ room_id: this.state.incomingCall.roomId,
+ });
+ };
+
+ public render() {
+ if (!this.state.incomingCall) {
+ return null;
+ }
+
+ let room = null;
+ if (this.state.incomingCall) {
+ room = MatrixClientPeg.get().getRoom(this.state.incomingCall.roomId);
+ }
+
+ const caller = room ? room.name : _t("Unknown caller");
+
+ let incomingCallText = null;
+ if (this.state.incomingCall) {
+ if (this.state.incomingCall.type === "voice") {
+ incomingCallText = _t("Incoming voice call");
+ } else if (this.state.incomingCall.type === "video") {
+ incomingCallText = _t("Incoming video call");
+ } else {
+ incomingCallText = _t("Incoming call");
+ }
+ }
+
+ return Resend all or cancel all now. You can also select individual messages to resend or cancel.|one": "Resend message or cancel message now.",
"Connectivity to the server has been lost.": "Connectivity to the server has been lost.",
"Sent messages will be stored until your connection has returned.": "Sent messages will be stored until your connection has returned.",
- "Active call": "Active call",
"There's no one else here! Would you like to invite others or stop warning about the empty room ?": "There's no one else here! Would you like to invite others or stop warning about the empty room ?",
"You seem to be uploading files, are you sure you want to quit?": "You seem to be uploading files, are you sure you want to quit?",
"You seem to be in a call, are you sure you want to quit?": "You seem to be in a call, are you sure you want to quit?",
@@ -2130,7 +2136,6 @@
"Switch theme": "Switch theme",
"Security & privacy": "Security & privacy",
"All settings": "All settings",
- "Archived rooms": "Archived rooms",
"Feedback": "Feedback",
"User menu": "User menu",
"Could not load user profile": "Could not load user profile",
diff --git a/src/settings/Settings.js b/src/settings/Settings.js
index ad380509f0..49a7140acf 100644
--- a/src/settings/Settings.js
+++ b/src/settings/Settings.js
@@ -160,12 +160,6 @@ export const SETTINGS = {
supportedLevels: LEVELS_FEATURE,
default: false,
},
- "feature_irc_ui": {
- supportedLevels: LEVELS_ACCOUNT_SETTINGS,
- displayName: _td('Enable IRC layout option in the appearance tab'),
- default: false,
- isFeature: true,
- },
"mjolnirRooms": {
supportedLevels: ['account'],
default: [],
@@ -575,7 +569,7 @@ export const SETTINGS = {
},
"useIRCLayout": {
supportedLevels: LEVELS_ACCOUNT_SETTINGS,
- displayName: _td("Use IRC layout"),
+ displayName: _td("Enable experimental, compact IRC style layout"),
default: false,
},
};
diff --git a/src/stores/BreadcrumbsStore.ts b/src/stores/BreadcrumbsStore.ts
index 70d4e19a32..48ef75cb59 100644
--- a/src/stores/BreadcrumbsStore.ts
+++ b/src/stores/BreadcrumbsStore.ts
@@ -125,6 +125,7 @@ export class BreadcrumbsStore extends AsyncStoreWithClient {
}
private async appendRoom(room: Room) {
+ let updated = false;
const rooms = (this.state.rooms || []).slice(); // cheap clone
// If the room is upgraded, use that room instead. We'll also splice out
@@ -136,30 +137,42 @@ export class BreadcrumbsStore extends AsyncStoreWithClient {
// Take out any room that isn't the most recent room
for (let i = 0; i < history.length - 1; i++) {
const idx = rooms.findIndex(r => r.roomId === history[i].roomId);
- if (idx !== -1) rooms.splice(idx, 1);
+ if (idx !== -1) {
+ rooms.splice(idx, 1);
+ updated = true;
+ }
}
}
// Remove the existing room, if it is present
const existingIdx = rooms.findIndex(r => r.roomId === room.roomId);
- if (existingIdx !== -1) {
- rooms.splice(existingIdx, 1);
- }
- // Splice the room to the start of the list
- rooms.splice(0, 0, room);
+ // If we're focusing on the first room no-op
+ if (existingIdx !== 0) {
+ if (existingIdx !== -1) {
+ rooms.splice(existingIdx, 1);
+ }
+
+ // Splice the room to the start of the list
+ rooms.splice(0, 0, room);
+ updated = true;
+ }
if (rooms.length > MAX_ROOMS) {
// This looks weird, but it's saying to start at the MAX_ROOMS point in the
// list and delete everything after it.
rooms.splice(MAX_ROOMS, rooms.length - MAX_ROOMS);
+ updated = true;
}
- // Update the breadcrumbs
- await this.updateState({rooms});
- const roomIds = rooms.map(r => r.roomId);
- if (roomIds.length > 0) {
- await SettingsStore.setValue("breadcrumb_rooms", null, SettingLevel.ACCOUNT, roomIds);
+
+ if (updated) {
+ // Update the breadcrumbs
+ await this.updateState({rooms});
+ const roomIds = rooms.map(r => r.roomId);
+ if (roomIds.length > 0) {
+ await SettingsStore.setValue("breadcrumb_rooms", null, SettingLevel.ACCOUNT, roomIds);
+ }
}
}
diff --git a/src/stores/notifications/ListNotificationState.ts b/src/stores/notifications/ListNotificationState.ts
index 5773693b47..6c67dbdd08 100644
--- a/src/stores/notifications/ListNotificationState.ts
+++ b/src/stores/notifications/ListNotificationState.ts
@@ -14,23 +14,20 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
-import { EventEmitter } from "events";
-import { INotificationState, NOTIFICATION_STATE_UPDATE } from "./INotificationState";
import { NotificationColor } from "./NotificationColor";
-import { IDestroyable } from "../../utils/IDestroyable";
import { TagID } from "../room-list/models";
import { Room } from "matrix-js-sdk/src/models/room";
import { arrayDiff } from "../../utils/arrays";
import { RoomNotificationState } from "./RoomNotificationState";
-import { TagSpecificNotificationState } from "./TagSpecificNotificationState";
+import { NOTIFICATION_STATE_UPDATE, NotificationState } from "./NotificationState";
-export class ListNotificationState extends EventEmitter implements IDestroyable, INotificationState {
- private _count: number;
- private _color: NotificationColor;
+export type FetchRoomFn = (room: Room) => RoomNotificationState;
+
+export class ListNotificationState extends NotificationState {
private rooms: Room[] = [];
private states: { [roomId: string]: RoomNotificationState } = {};
- constructor(private byTileCount = false, private tagId: TagID) {
+ constructor(private byTileCount = false, private tagId: TagID, private getRoomFn: FetchRoomFn) {
super();
}
@@ -38,14 +35,6 @@ export class ListNotificationState extends EventEmitter implements IDestroyable,
return null; // This notification state doesn't support symbols
}
- public get count(): number {
- return this._count;
- }
-
- public get color(): NotificationColor {
- return this._color;
- }
-
public setRooms(rooms: Room[]) {
// If we're only concerned about the tile count, don't bother setting up listeners.
if (this.byTileCount) {
@@ -62,16 +51,10 @@ export class ListNotificationState extends EventEmitter implements IDestroyable,
if (!state) continue; // We likely just didn't have a badge (race condition)
delete this.states[oldRoom.roomId];
state.off(NOTIFICATION_STATE_UPDATE, this.onRoomNotificationStateUpdate);
- state.destroy();
}
for (const newRoom of diff.added) {
- const state = new TagSpecificNotificationState(newRoom, this.tagId);
+ const state = this.getRoomFn(newRoom);
state.on(NOTIFICATION_STATE_UPDATE, this.onRoomNotificationStateUpdate);
- if (this.states[newRoom.roomId]) {
- // "Should never happen" disclaimer.
- console.warn("Overwriting notification state for room:", newRoom.roomId);
- this.states[newRoom.roomId].destroy();
- }
this.states[newRoom.roomId] = state;
}
@@ -85,8 +68,9 @@ export class ListNotificationState extends EventEmitter implements IDestroyable,
}
public destroy() {
+ super.destroy();
for (const state of Object.values(this.states)) {
- state.destroy();
+ state.off(NOTIFICATION_STATE_UPDATE, this.onRoomNotificationStateUpdate);
}
this.states = {};
}
@@ -96,7 +80,7 @@ export class ListNotificationState extends EventEmitter implements IDestroyable,
};
private calculateTotalState() {
- const before = {count: this.count, symbol: this.symbol, color: this.color};
+ const snapshot = this.snapshot();
if (this.byTileCount) {
this._color = NotificationColor.Red;
@@ -111,10 +95,7 @@ export class ListNotificationState extends EventEmitter implements IDestroyable,
}
// finally, publish an update if needed
- const after = {count: this.count, symbol: this.symbol, color: this.color};
- if (JSON.stringify(before) !== JSON.stringify(after)) {
- this.emit(NOTIFICATION_STATE_UPDATE);
- }
+ this.emitIfUpdated(snapshot);
}
}
diff --git a/src/stores/notifications/NotificationState.ts b/src/stores/notifications/NotificationState.ts
new file mode 100644
index 0000000000..c8ef0ba859
--- /dev/null
+++ b/src/stores/notifications/NotificationState.ts
@@ -0,0 +1,87 @@
+/*
+Copyright 2020 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 { EventEmitter } from "events";
+import { NotificationColor } from "./NotificationColor";
+import { IDestroyable } from "../../utils/IDestroyable";
+
+export const NOTIFICATION_STATE_UPDATE = "update";
+
+export abstract class NotificationState extends EventEmitter implements IDestroyable {
+ protected _symbol: string;
+ protected _count: number;
+ protected _color: NotificationColor;
+
+ public get symbol(): string {
+ return this._symbol;
+ }
+
+ public get count(): number {
+ return this._count;
+ }
+
+ public get color(): NotificationColor {
+ return this._color;
+ }
+
+ public get isIdle(): boolean {
+ return this.color <= NotificationColor.None;
+ }
+
+ public get isUnread(): boolean {
+ return this.color >= NotificationColor.Bold;
+ }
+
+ public get hasUnreadCount(): boolean {
+ return this.color >= NotificationColor.Grey && (!!this.count || !!this.symbol);
+ }
+
+ public get hasMentions(): boolean {
+ return this.color >= NotificationColor.Red;
+ }
+
+ protected emitIfUpdated(snapshot: NotificationStateSnapshot) {
+ if (snapshot.isDifferentFrom(this)) {
+ this.emit(NOTIFICATION_STATE_UPDATE);
+ }
+ }
+
+ protected snapshot(): NotificationStateSnapshot {
+ return new NotificationStateSnapshot(this);
+ }
+
+ public destroy(): void {
+ this.removeAllListeners(NOTIFICATION_STATE_UPDATE);
+ }
+}
+
+export class NotificationStateSnapshot {
+ private readonly symbol: string;
+ private readonly count: number;
+ private readonly color: NotificationColor;
+
+ constructor(state: NotificationState) {
+ this.symbol = state.symbol;
+ this.count = state.count;
+ this.color = state.color;
+ }
+
+ public isDifferentFrom(other: NotificationState): boolean {
+ const before = {count: this.count, symbol: this.symbol, color: this.color};
+ const after = {count: other.count, symbol: other.symbol, color: other.color};
+ return JSON.stringify(before) !== JSON.stringify(after);
+ }
+}
diff --git a/src/stores/notifications/RoomNotificationState.ts b/src/stores/notifications/RoomNotificationState.ts
index 51355a2d4d..ab354c0e93 100644
--- a/src/stores/notifications/RoomNotificationState.ts
+++ b/src/stores/notifications/RoomNotificationState.ts
@@ -14,8 +14,6 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
-import { EventEmitter } from "events";
-import { INotificationState, NOTIFICATION_STATE_UPDATE } from "./INotificationState";
import { NotificationColor } from "./NotificationColor";
import { IDestroyable } from "../../utils/IDestroyable";
import { MatrixClientPeg } from "../../MatrixClientPeg";
@@ -25,12 +23,9 @@ import { MatrixEvent } from "matrix-js-sdk/src/models/event";
import { Room } from "matrix-js-sdk/src/models/room";
import * as RoomNotifs from '../../RoomNotifs';
import * as Unread from '../../Unread';
+import { NotificationState } from "./NotificationState";
-export class RoomNotificationState extends EventEmitter implements IDestroyable, INotificationState {
- private _symbol: string;
- private _count: number;
- private _color: NotificationColor;
-
+export class RoomNotificationState extends NotificationState implements IDestroyable {
constructor(public readonly room: Room) {
super();
this.room.on("Room.receipt", this.handleReadReceipt);
@@ -41,23 +36,12 @@ export class RoomNotificationState extends EventEmitter implements IDestroyable,
this.updateNotificationState();
}
- public get symbol(): string {
- return this._symbol;
- }
-
- public get count(): number {
- return this._count;
- }
-
- public get color(): NotificationColor {
- return this._color;
- }
-
private get roomIsInvite(): boolean {
return getEffectiveMembership(this.room.getMyMembership()) === EffectiveMembership.Invite;
}
public destroy(): void {
+ super.destroy();
this.room.removeListener("Room.receipt", this.handleReadReceipt);
this.room.removeListener("Room.timeline", this.handleRoomEventUpdate);
this.room.removeListener("Room.redaction", this.handleRoomEventUpdate);
@@ -87,7 +71,7 @@ export class RoomNotificationState extends EventEmitter implements IDestroyable,
};
private updateNotificationState() {
- const before = {count: this.count, symbol: this.symbol, color: this.color};
+ const snapshot = this.snapshot();
if (RoomNotifs.getRoomNotifsState(this.room.roomId) === RoomNotifs.MUTE) {
// When muted we suppress all notification states, even if we have context on them.
@@ -136,9 +120,6 @@ export class RoomNotificationState extends EventEmitter implements IDestroyable,
}
// finally, publish an update if needed
- const after = {count: this.count, symbol: this.symbol, color: this.color};
- if (JSON.stringify(before) !== JSON.stringify(after)) {
- this.emit(NOTIFICATION_STATE_UPDATE);
- }
+ this.emitIfUpdated(snapshot);
}
}
diff --git a/src/stores/notifications/RoomNotificationStateStore.ts b/src/stores/notifications/RoomNotificationStateStore.ts
new file mode 100644
index 0000000000..311dcdf2d6
--- /dev/null
+++ b/src/stores/notifications/RoomNotificationStateStore.ts
@@ -0,0 +1,101 @@
+/*
+Copyright 2020 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 { ActionPayload } from "../../dispatcher/payloads";
+import { AsyncStoreWithClient } from "../AsyncStoreWithClient";
+import defaultDispatcher from "../../dispatcher/dispatcher";
+import { DefaultTagID, TagID } from "../room-list/models";
+import { FetchRoomFn, ListNotificationState } from "./ListNotificationState";
+import { Room } from "matrix-js-sdk/src/models/room";
+import { RoomNotificationState } from "./RoomNotificationState";
+import { TagSpecificNotificationState } from "./TagSpecificNotificationState";
+
+const INSPECIFIC_TAG = "INSPECIFIC_TAG";
+type INSPECIFIC_TAG = "INSPECIFIC_TAG";
+
+interface IState {}
+
+export class RoomNotificationStateStore extends AsyncStoreWithClient {
+ private static internalInstance = new RoomNotificationStateStore();
+
+ private roomMap = new Map>();
+
+ private constructor() {
+ super(defaultDispatcher, {});
+ }
+
+ /**
+ * Creates a new list notification state. The consumer is expected to set the rooms
+ * on the notification state, and destroy the state when it no longer needs it.
+ * @param tagId The tag to create the notification state for.
+ * @returns The notification state for the tag.
+ */
+ public getListState(tagId: TagID): ListNotificationState {
+ // Note: we don't cache these notification states as the consumer is expected to call
+ // .setRooms() on the returned object, which could confuse other consumers.
+
+ // TODO: Update if/when invites move out of the room list.
+ const useTileCount = tagId === DefaultTagID.Invite;
+ const getRoomFn: FetchRoomFn = (room: Room) => {
+ return this.getRoomState(room, tagId);
+ };
+ return new ListNotificationState(useTileCount, tagId, getRoomFn);
+ }
+
+ /**
+ * Gets a copy of the notification state for a room. The consumer should not
+ * attempt to destroy the returned state as it may be shared with other
+ * consumers.
+ * @param room The room to get the notification state for.
+ * @param inTagId Optional tag ID to scope the notification state to.
+ * @returns The room's notification state.
+ */
+ public getRoomState(room: Room, inTagId?: TagID): RoomNotificationState {
+ if (!this.roomMap.has(room)) {
+ this.roomMap.set(room, new Map());
+ }
+
+ const targetTag = inTagId ? inTagId : INSPECIFIC_TAG;
+
+ const forRoomMap = this.roomMap.get(room);
+ if (!forRoomMap.has(targetTag)) {
+ if (inTagId) {
+ forRoomMap.set(inTagId, new TagSpecificNotificationState(room, inTagId));
+ } else {
+ forRoomMap.set(INSPECIFIC_TAG, new RoomNotificationState(room));
+ }
+ }
+
+ return forRoomMap.get(targetTag);
+ }
+
+ public static get instance(): RoomNotificationStateStore {
+ return RoomNotificationStateStore.internalInstance;
+ }
+
+ protected async onNotReady(): Promise {
+ for (const roomMap of this.roomMap.values()) {
+ for (const roomState of roomMap.values()) {
+ roomState.destroy();
+ }
+ }
+ }
+
+ // We don't need this, but our contract says we do.
+ protected async onAction(payload: ActionPayload) {
+ return Promise.resolve();
+ }
+}
diff --git a/src/stores/notifications/StaticNotificationState.ts b/src/stores/notifications/StaticNotificationState.ts
index 51902688fe..0392ed3716 100644
--- a/src/stores/notifications/StaticNotificationState.ts
+++ b/src/stores/notifications/StaticNotificationState.ts
@@ -14,13 +14,15 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
-import { EventEmitter } from "events";
-import { INotificationState } from "./INotificationState";
import { NotificationColor } from "./NotificationColor";
+import { NotificationState } from "./NotificationState";
-export class StaticNotificationState extends EventEmitter implements INotificationState {
- constructor(public symbol: string, public count: number, public color: NotificationColor) {
+export class StaticNotificationState extends NotificationState {
+ constructor(symbol: string, count: number, color: NotificationColor) {
super();
+ this._symbol = symbol;
+ this._count = count;
+ this._color = color;
}
public static forCount(count: number, color: NotificationColor): StaticNotificationState {
diff --git a/src/stores/room-list/ListLayout.ts b/src/stores/room-list/ListLayout.ts
index f31e92b8ae..5169c5e4e5 100644
--- a/src/stores/room-list/ListLayout.ts
+++ b/src/stores/room-list/ListLayout.ts
@@ -89,11 +89,12 @@ export class ListLayout {
return 5 + RESIZER_BOX_FACTOR;
}
- public setVisibleTilesWithin(diff: number, maxPossible: number) {
- if (this.visibleTiles > maxPossible) {
- this.visibleTiles = maxPossible + diff;
+ public setVisibleTilesWithin(newVal: number, maxPossible: number) {
+ maxPossible = maxPossible + RESIZER_BOX_FACTOR;
+ if (newVal > maxPossible) {
+ this.visibleTiles = maxPossible;
} else {
- this.visibleTiles += diff;
+ this.visibleTiles = newVal;
}
}
@@ -108,10 +109,6 @@ export class ListLayout {
return this.tilesToPixels(Math.min(maxTiles, n)) + padding;
}
- public tilesWithResizerBoxFactor(n: number): number {
- return n + RESIZER_BOX_FACTOR;
- }
-
public tilesWithPadding(n: number, paddingPx: number): number {
return this.pixelsToTiles(this.tilesToPixelsWithPadding(n, paddingPx));
}
diff --git a/src/stores/room-list/RoomListLayoutStore.ts b/src/stores/room-list/RoomListLayoutStore.ts
new file mode 100644
index 0000000000..fbc7d7719d
--- /dev/null
+++ b/src/stores/room-list/RoomListLayoutStore.ts
@@ -0,0 +1,73 @@
+/*
+Copyright 2020 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 { TagID } from "./models";
+import { ListLayout } from "./ListLayout";
+import { AsyncStoreWithClient } from "../AsyncStoreWithClient";
+import defaultDispatcher from "../../dispatcher/dispatcher";
+import { ActionPayload } from "../../dispatcher/payloads";
+
+interface IState {}
+
+export default class RoomListLayoutStore extends AsyncStoreWithClient {
+ private static internalInstance: RoomListLayoutStore;
+
+ private readonly layoutMap = new Map();
+
+ constructor() {
+ super(defaultDispatcher);
+ }
+
+ public static get instance(): RoomListLayoutStore {
+ if (!RoomListLayoutStore.internalInstance) {
+ RoomListLayoutStore.internalInstance = new RoomListLayoutStore();
+ }
+ return RoomListLayoutStore.internalInstance;
+ }
+
+ public ensureLayoutExists(tagId: TagID) {
+ if (!this.layoutMap.has(tagId)) {
+ this.layoutMap.set(tagId, new ListLayout(tagId));
+ }
+ }
+
+ public getLayoutFor(tagId: TagID): ListLayout {
+ if (!this.layoutMap.has(tagId)) {
+ this.layoutMap.set(tagId, new ListLayout(tagId));
+ }
+ return this.layoutMap.get(tagId);
+ }
+
+ // Note: this primarily exists for debugging, and isn't really intended to be used by anything.
+ public async resetLayouts() {
+ console.warn("Resetting layouts for room list");
+ for (const layout of this.layoutMap.values()) {
+ layout.reset();
+ }
+ }
+
+ protected async onNotReady(): Promise {
+ // On logout, clear the map.
+ this.layoutMap.clear();
+ }
+
+ // We don't need this function, but our contract says we do
+ protected async onAction(payload: ActionPayload): Promise {
+ return Promise.resolve();
+ }
+}
+
+window.mx_RoomListLayoutStore = RoomListLayoutStore.instance;
diff --git a/src/stores/room-list/RoomListStore2.ts b/src/stores/room-list/RoomListStore2.ts
index 5185e08759..bb3cd63ceb 100644
--- a/src/stores/room-list/RoomListStore2.ts
+++ b/src/stores/room-list/RoomListStore2.ts
@@ -32,6 +32,7 @@ import { Algorithm, LIST_UPDATED_EVENT } from "./algorithms/Algorithm";
import { EffectiveMembership, getEffectiveMembership } from "./membership";
import { ListLayout } from "./ListLayout";
import { isNullOrUndefined } from "matrix-js-sdk/src/utils";
+import RoomListLayoutStore from "./RoomListLayoutStore";
interface IState {
tagsEnabled?: boolean;
@@ -50,6 +51,7 @@ export class RoomListStore2 extends AsyncStore {
private algorithm = new Algorithm();
private filterConditions: IFilterCondition[] = [];
private tagWatcher = new TagWatcher(this);
+ private layoutMap: Map = new Map();
private readonly watchedSettings = [
'feature_custom_tags',
@@ -435,6 +437,8 @@ export class RoomListStore2 extends AsyncStore {
for (const tagId of OrderedDefaultTagIDs) {
sorts[tagId] = this.calculateTagSorting(tagId);
orders[tagId] = this.calculateListOrder(tagId);
+
+ RoomListLayoutStore.instance.ensureLayoutExists(tagId);
}
if (this.state.tagsEnabled) {
@@ -453,15 +457,6 @@ export class RoomListStore2 extends AsyncStore {
this.emit(LISTS_UPDATE_EVENT, this);
}
- // Note: this primarily exists for debugging, and isn't really intended to be used by anything.
- public async resetLayouts() {
- console.warn("Resetting layouts for room list");
- for (const tagId of Object.keys(this.orderedLists)) {
- new ListLayout(tagId).reset();
- }
- await this.regenerateAllLists();
- }
-
public addFilter(filter: IFilterCondition): void {
// TODO: Remove debug: https://github.com/vector-im/riot-web/issues/14035
console.log("Adding filter condition:", filter);
diff --git a/src/stores/room-list/algorithms/Algorithm.ts b/src/stores/room-list/algorithms/Algorithm.ts
index 8c7bbc8615..35511a461d 100644
--- a/src/stores/room-list/algorithms/Algorithm.ts
+++ b/src/stores/room-list/algorithms/Algorithm.ts
@@ -41,6 +41,17 @@ import { getListAlgorithmInstance } from "./list-ordering";
*/
export const LIST_UPDATED_EVENT = "list_updated_event";
+// These are the causes which require a room to be known in order for us to handle them. If
+// a cause in this list is raised and we don't know about the room, we don't handle the update.
+//
+// Note: these typically happen when a new room is coming in, such as the user creating or
+// joining the room. For these cases, we need to know about the room prior to handling it otherwise
+// we'll make bad assumptions.
+const CAUSES_REQUIRING_ROOM = [
+ RoomUpdateCause.Timeline,
+ RoomUpdateCause.ReadReceipt,
+];
+
interface IStickyRoom {
room: Room;
position: number;
@@ -655,24 +666,36 @@ export class Algorithm extends EventEmitter {
cause = RoomUpdateCause.PossibleTagChange;
}
- // If we have tags for a room and don't have the room referenced, the room reference
- // probably changed. We need to swap out the problematic reference.
- if (hasTags && !this.rooms.includes(room) && !isSticky) {
- console.warn(`${room.roomId} is missing from room array but is known - trying to find duplicate`);
+ // Check to see if the room is known first
+ let knownRoomRef = this.rooms.includes(room);
+ if (hasTags && !knownRoomRef) {
+ console.warn(`${room.roomId} might be a reference change - attempting to update reference`);
this.rooms = this.rooms.map(r => r.roomId === room.roomId ? room : r);
-
- // Sanity check
- if (!this.rooms.includes(room)) {
- throw new Error(`Failed to replace ${room.roomId} with an updated reference`);
+ knownRoomRef = this.rooms.includes(room);
+ if (!knownRoomRef) {
+ console.warn(`${room.roomId} is still not referenced. It may be sticky.`);
}
}
+ // If we have tags for a room and don't have the room referenced, something went horribly
+ // wrong - the reference should have been updated above.
+ if (hasTags && !knownRoomRef && !isSticky) {
+ throw new Error(`${room.roomId} is missing from room array but is known - trying to find duplicate`);
+ }
+
// Like above, update the reference to the sticky room if we need to
if (hasTags && isSticky) {
// Go directly in and set the sticky room's new reference, being careful not
// to trigger a sticky room update ourselves.
this._stickyRoom.room = room;
}
+
+ // If after all that we're still a NewRoom update, add the room if applicable.
+ // We don't do this for the sticky room (because it causes duplication issues)
+ // or if we know about the reference (as it should be replaced).
+ if (cause === RoomUpdateCause.NewRoom && !isSticky && !knownRoomRef) {
+ this.rooms.push(room);
+ }
}
if (cause === RoomUpdateCause.PossibleTagChange) {
@@ -687,6 +710,7 @@ export class Algorithm extends EventEmitter {
const algorithm: OrderingAlgorithm = this.algorithms[rmTag];
if (!algorithm) throw new Error(`No algorithm for ${rmTag}`);
await algorithm.handleRoomUpdate(room, RoomUpdateCause.RoomRemoved);
+ this.cachedRooms[rmTag] = algorithm.orderedRooms;
}
for (const addTag of diff.added) {
// TODO: Remove debug: https://github.com/vector-im/riot-web/issues/14035
@@ -694,6 +718,7 @@ export class Algorithm extends EventEmitter {
const algorithm: OrderingAlgorithm = this.algorithms[addTag];
if (!algorithm) throw new Error(`No algorithm for ${addTag}`);
await algorithm.handleRoomUpdate(room, RoomUpdateCause.NewRoom);
+ this.cachedRooms[addTag] = algorithm.orderedRooms;
}
// Update the tag map so we don't regen it in a moment
@@ -738,6 +763,11 @@ export class Algorithm extends EventEmitter {
}
if (!this.roomIdsToTags[room.roomId]) {
+ if (CAUSES_REQUIRING_ROOM.includes(cause)) {
+ console.warn(`Skipping tag update for ${room.roomId} because we don't know about the room`);
+ return false;
+ }
+
// TODO: Remove debug: https://github.com/vector-im/riot-web/issues/14035
console.log(`[RoomListDebug] Updating tags for room ${room.roomId} (${room.name})`);
diff --git a/src/stores/room-list/algorithms/list-ordering/ImportanceAlgorithm.ts b/src/stores/room-list/algorithms/list-ordering/ImportanceAlgorithm.ts
index e95f92f985..3acd9f924e 100644
--- a/src/stores/room-list/algorithms/list-ordering/ImportanceAlgorithm.ts
+++ b/src/stores/room-list/algorithms/list-ordering/ImportanceAlgorithm.ts
@@ -160,7 +160,10 @@ export class ImportanceAlgorithm extends OrderingAlgorithm {
this.cachedOrderedRooms.splice(this.indices[category], 0, room); // splice in the new room (pre-adjusted)
} else if (cause === RoomUpdateCause.RoomRemoved) {
const roomIdx = this.getRoomIndex(room);
- if (roomIdx === -1) return false; // no change
+ if (roomIdx === -1) {
+ console.warn(`Tried to remove unknown room from ${this.tagId}: ${room.roomId}`);
+ return false; // no change
+ }
const oldCategory = this.getCategoryFromIndices(roomIdx, this.indices);
this.alterCategoryPositionBy(oldCategory, -1, this.indices);
this.cachedOrderedRooms.splice(roomIdx, 1); // remove the room
@@ -169,15 +172,6 @@ export class ImportanceAlgorithm extends OrderingAlgorithm {
}
}
- private getRoomIndex(room: Room): number {
- let roomIdx = this.cachedOrderedRooms.indexOf(room);
- if (roomIdx === -1) { // can only happen if the js-sdk's store goes sideways.
- console.warn(`Degrading performance to find missing room in "${this.tagId}": ${room.roomId}`);
- roomIdx = this.cachedOrderedRooms.findIndex(r => r.roomId === room.roomId);
- }
- return roomIdx;
- }
-
public async handleRoomUpdate(room: Room, cause: RoomUpdateCause): Promise {
try {
await this.updateLock.acquireAsync();
diff --git a/src/stores/room-list/algorithms/list-ordering/NaturalAlgorithm.ts b/src/stores/room-list/algorithms/list-ordering/NaturalAlgorithm.ts
index f74329cb4d..849c8a2877 100644
--- a/src/stores/room-list/algorithms/list-ordering/NaturalAlgorithm.ts
+++ b/src/stores/room-list/algorithms/list-ordering/NaturalAlgorithm.ts
@@ -50,8 +50,12 @@ export class NaturalAlgorithm extends OrderingAlgorithm {
if (cause === RoomUpdateCause.NewRoom) {
this.cachedOrderedRooms.push(room);
} else if (cause === RoomUpdateCause.RoomRemoved) {
- const idx = this.cachedOrderedRooms.indexOf(room);
- if (idx >= 0) this.cachedOrderedRooms.splice(idx, 1);
+ const idx = this.getRoomIndex(room);
+ if (idx >= 0) {
+ this.cachedOrderedRooms.splice(idx, 1);
+ } else {
+ console.warn(`Tried to remove unknown room from ${this.tagId}: ${room.roomId}`);
+ }
}
// TODO: Optimize this to avoid useless operations: https://github.com/vector-im/riot-web/issues/14035
diff --git a/src/stores/room-list/algorithms/list-ordering/OrderingAlgorithm.ts b/src/stores/room-list/algorithms/list-ordering/OrderingAlgorithm.ts
index 4ab7650367..c47a35523c 100644
--- a/src/stores/room-list/algorithms/list-ordering/OrderingAlgorithm.ts
+++ b/src/stores/room-list/algorithms/list-ordering/OrderingAlgorithm.ts
@@ -70,4 +70,13 @@ export abstract class OrderingAlgorithm {
* @returns True if the update requires the Algorithm to update the presentation layers.
*/
public abstract handleRoomUpdate(room: Room, cause: RoomUpdateCause): Promise;
+
+ protected getRoomIndex(room: Room): number {
+ let roomIdx = this.cachedOrderedRooms.indexOf(room);
+ if (roomIdx === -1) { // can only happen if the js-sdk's store goes sideways.
+ console.warn(`Degrading performance to find missing room in "${this.tagId}": ${room.roomId}`);
+ roomIdx = this.cachedOrderedRooms.findIndex(r => r.roomId === room.roomId);
+ }
+ return roomIdx;
+ }
}
diff --git a/src/stores/room-list/previews/MessageEventPreview.ts b/src/stores/room-list/previews/MessageEventPreview.ts
index 86ec4c539b..86cb51ef15 100644
--- a/src/stores/room-list/previews/MessageEventPreview.ts
+++ b/src/stores/room-list/previews/MessageEventPreview.ts
@@ -20,6 +20,7 @@ import { MatrixEvent } from "matrix-js-sdk/src/models/event";
import { _t } from "../../../languageHandler";
import { getSenderName, isSelf, shouldPrefixMessagesIn } from "./utils";
import ReplyThread from "../../../components/views/elements/ReplyThread";
+import { sanitizedHtmlNodeInnerText } from "../../../HtmlUtils";
export class MessageEventPreview implements IPreview {
public getTextFor(event: MatrixEvent, tagId?: TagID): string {
@@ -36,14 +37,27 @@ export class MessageEventPreview implements IPreview {
const msgtype = eventContent['msgtype'];
if (!body || !msgtype) return null; // invalid event, no preview
+ const hasHtml = eventContent.format === "org.matrix.custom.html" && eventContent.formatted_body;
+ if (hasHtml) {
+ body = eventContent.formatted_body;
+ }
+
// XXX: Newer relations have a getRelation() function which is not compatible with replies.
const mRelatesTo = event.getWireContent()['m.relates_to'];
if (mRelatesTo && mRelatesTo['m.in_reply_to']) {
// If this is a reply, get the real reply and use that
- body = (ReplyThread.stripPlainReply(body) || '').trim();
+ if (hasHtml) {
+ body = (ReplyThread.stripHTMLReply(body) || '').trim();
+ } else {
+ body = (ReplyThread.stripPlainReply(body) || '').trim();
+ }
if (!body) return null; // invalid event, no preview
}
+ if (hasHtml) {
+ body = sanitizedHtmlNodeInnerText(body);
+ }
+
if (msgtype === 'm.emote') {
return _t("%(senderName)s %(emote)s", {senderName: getSenderName(event), emote: body});
}
diff --git a/test/components/views/messages/TextualBody-test.js b/test/components/views/messages/TextualBody-test.js
index 07cd51edbd..1f0749aff5 100644
--- a/test/components/views/messages/TextualBody-test.js
+++ b/test/components/views/messages/TextualBody-test.js
@@ -205,8 +205,9 @@ describe("
+ {view}
+ {hangup}
+
;
+ }
+}
+
diff --git a/src/components/views/voip/IncomingCallBox2.tsx b/src/components/views/voip/IncomingCallBox2.tsx
new file mode 100644
index 0000000000..6dfcb4bcee
--- /dev/null
+++ b/src/components/views/voip/IncomingCallBox2.tsx
@@ -0,0 +1,141 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2018 New Vector Ltd
+Copyright 2019, 2020 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.
+*/
+
+// TODO: Rename on launch: https://github.com/vector-im/riot-web/issues/14231
+
+import React from 'react';
+import {MatrixClientPeg} from '../../../MatrixClientPeg';
+import dis from '../../../dispatcher/dispatcher';
+import { _t } from '../../../languageHandler';
+import { ActionPayload } from '../../../dispatcher/payloads';
+import CallHandler from '../../../CallHandler';
+import PulsedAvatar from '../avatars/PulsedAvatar';
+import RoomAvatar from '../avatars/RoomAvatar';
+import FormButton from '../elements/FormButton';
+
+interface IProps {
+}
+
+interface IState {
+ incomingCall: any;
+}
+
+export default class IncomingCallBox2 extends React.Component
+
;
+ }
+}
+
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index f16fb38f86..fb97bfa26c 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -489,7 +489,6 @@
"Try out new ways to ignore people (experimental)": "Try out new ways to ignore people (experimental)",
"Use the improved room list (will refresh to apply changes)": "Use the improved room list (will refresh to apply changes)",
"Support adding custom themes": "Support adding custom themes",
- "Enable IRC layout option in the appearance tab": "Enable IRC layout option in the appearance tab",
"Show info about bridges in room settings": "Show info about bridges in room settings",
"Font size": "Font size",
"Use custom size": "Use custom size",
@@ -539,7 +538,7 @@
"How fast should messages be downloaded.": "How fast should messages be downloaded.",
"Manually verify all remote sessions": "Manually verify all remote sessions",
"IRC display name width": "IRC display name width",
- "Use IRC layout": "Use IRC layout",
+ "Enable experimental, compact IRC style layout": "Enable experimental, compact IRC style layout",
"Collecting app version information": "Collecting app version information",
"Collecting logs": "Collecting logs",
"Uploading report": "Uploading report",
@@ -558,12 +557,17 @@
"My Ban List": "My Ban List",
"This is your list of users/servers you have blocked - don't leave the room!": "This is your list of users/servers you have blocked - don't leave the room!",
"Active call (%(roomName)s)": "Active call (%(roomName)s)",
+ "Active call": "Active call",
"unknown caller": "unknown caller",
"Incoming voice call from %(name)s": "Incoming voice call from %(name)s",
"Incoming video call from %(name)s": "Incoming video call from %(name)s",
"Incoming call from %(name)s": "Incoming call from %(name)s",
"Decline": "Decline",
"Accept": "Accept",
+ "Unknown caller": "Unknown caller",
+ "Incoming voice call": "Incoming voice call",
+ "Incoming video call": "Incoming video call",
+ "Incoming call": "Incoming call",
"The other party cancelled the verification.": "The other party cancelled the verification.",
"Verified!": "Verified!",
"You've successfully verified this user.": "You've successfully verified this user.",
@@ -966,6 +970,8 @@
"Room version:": "Room version:",
"Developer options": "Developer options",
"Open Devtools": "Open Devtools",
+ "Make this room low priority": "Make this room low priority",
+ "Low priority rooms show up at the bottom of your room list in a dedicated section at the bottom of your room list": "Low priority rooms show up at the bottom of your room list in a dedicated section at the bottom of your room list",
"This room is bridging messages to the following platforms. Learn more.": "This room is bridging messages to the following platforms. Learn more.",
"This room isn’t bridging messages to any platforms. Learn more.": "This room isn’t bridging messages to any platforms. Learn more.",
"Bridges": "Bridges",
@@ -1224,6 +1230,7 @@
"All messages": "All messages",
"Mentions & Keywords": "Mentions & Keywords",
"Notification options": "Notification options",
+ "Favourited": "Favourited",
"Favourite": "Favourite",
"Leave Room": "Leave Room",
"Room options": "Room options",
@@ -2102,7 +2109,6 @@
"%(count)s
+
+
+
+
+
+ {caller}
+{incomingCallText}
+
+
+ 
Member