2020-05-08 21:53:05 +03:00
|
|
|
/*
|
|
|
|
Copyright 2015, 2016 OpenMarket Ltd
|
|
|
|
Copyright 2017 New Vector Ltd
|
|
|
|
Copyright 2018 Michael Telatynski <7t3chguy@gmail.com>
|
|
|
|
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.
|
|
|
|
*/
|
|
|
|
|
|
|
|
import React, { createRef } from "react";
|
|
|
|
import { Room } from "matrix-js-sdk/src/models/room";
|
|
|
|
import classNames from "classnames";
|
|
|
|
import { RovingTabIndexWrapper } from "../../../accessibility/RovingTabIndex";
|
|
|
|
import AccessibleButton from "../../views/elements/AccessibleButton";
|
|
|
|
import RoomAvatar from "../../views/avatars/RoomAvatar";
|
2020-05-12 01:20:26 +03:00
|
|
|
import Tooltip from "../../views/elements/Tooltip";
|
2020-05-14 22:45:17 +03:00
|
|
|
import dis from '../../../dispatcher/dispatcher';
|
2020-05-12 01:29:32 +03:00
|
|
|
import { Key } from "../../../Keyboard";
|
2020-05-12 06:09:32 +03:00
|
|
|
import * as RoomNotifs from '../../../RoomNotifs';
|
|
|
|
import { EffectiveMembership, getEffectiveMembership } from "../../../stores/room-list/membership";
|
|
|
|
import * as Unread from '../../../Unread';
|
|
|
|
import * as FormattingUtils from "../../../utils/FormattingUtils";
|
2020-05-26 00:54:02 +03:00
|
|
|
import { MatrixClientPeg } from "../../../MatrixClientPeg";
|
|
|
|
import { MatrixEvent } from "matrix-js-sdk/src/models/event";
|
2020-05-08 21:53:05 +03:00
|
|
|
|
2020-05-14 21:53:00 +03:00
|
|
|
/*******************************************************************
|
|
|
|
* CAUTION *
|
|
|
|
*******************************************************************
|
|
|
|
* This is a work in progress implementation and isn't complete or *
|
|
|
|
* even useful as a component. Please avoid using it until this *
|
|
|
|
* warning disappears. *
|
2020-05-21 20:53:16 +03:00
|
|
|
*******************************************************************/
|
2020-05-14 21:53:00 +03:00
|
|
|
|
2020-05-23 03:05:09 +03:00
|
|
|
enum NotificationColor {
|
|
|
|
// Inverted (None -> Red) because we do integer comparisons on this
|
|
|
|
None, // nothing special
|
|
|
|
Bold, // no badge, show as unread
|
|
|
|
Grey, // unread notified messages
|
|
|
|
Red, // unread pings
|
|
|
|
}
|
|
|
|
|
2020-05-08 21:53:05 +03:00
|
|
|
interface IProps {
|
|
|
|
room: Room;
|
2020-06-05 06:21:04 +03:00
|
|
|
showMessagePreview: boolean;
|
2020-05-08 21:53:05 +03:00
|
|
|
|
2020-05-14 21:53:00 +03:00
|
|
|
// TODO: Allow falsifying counts (for invites and stuff)
|
|
|
|
// TODO: Transparency? Was this ever used?
|
|
|
|
// TODO: Incoming call boxes?
|
2020-05-08 21:53:05 +03:00
|
|
|
}
|
|
|
|
|
2020-05-23 03:05:09 +03:00
|
|
|
interface INotificationState {
|
|
|
|
symbol: string;
|
|
|
|
color: NotificationColor;
|
2020-05-12 06:09:32 +03:00
|
|
|
}
|
|
|
|
|
2020-05-23 03:05:09 +03:00
|
|
|
interface IState {
|
2020-05-12 01:20:26 +03:00
|
|
|
hover: boolean;
|
2020-05-23 03:05:09 +03:00
|
|
|
notificationState: INotificationState;
|
2020-05-08 21:53:05 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
export default class RoomTile2 extends React.Component<IProps, IState> {
|
|
|
|
private roomTile = createRef();
|
|
|
|
|
|
|
|
// TODO: Custom status
|
|
|
|
// TODO: Lock icon
|
|
|
|
// TODO: Presence indicator
|
|
|
|
// TODO: e2e shields
|
|
|
|
// TODO: Handle changes to room aesthetics (name, join rules, etc)
|
|
|
|
// TODO: scrollIntoView?
|
|
|
|
// TODO: hover, badge, etc
|
|
|
|
// TODO: isSelected for hover effects
|
|
|
|
// TODO: Context menu
|
|
|
|
// TODO: a11y
|
|
|
|
|
2020-05-12 01:20:26 +03:00
|
|
|
constructor(props: IProps) {
|
|
|
|
super(props);
|
|
|
|
|
|
|
|
this.state = {
|
|
|
|
hover: false,
|
2020-05-23 03:05:09 +03:00
|
|
|
notificationState: this.getNotificationState(),
|
2020-05-12 06:09:32 +03:00
|
|
|
};
|
2020-05-26 00:54:02 +03:00
|
|
|
|
2020-05-27 01:20:51 +03:00
|
|
|
this.props.room.on("Room.receipt", this.handleRoomEventUpdate);
|
|
|
|
this.props.room.on("Room.timeline", this.handleRoomEventUpdate);
|
|
|
|
this.props.room.on("Room.redaction", this.handleRoomEventUpdate);
|
2020-05-27 04:56:56 +03:00
|
|
|
MatrixClientPeg.get().on("Event.decrypted", this.handleRoomEventUpdate);
|
2020-05-12 06:09:32 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
public componentWillUnmount() {
|
2020-05-27 01:20:51 +03:00
|
|
|
if (this.props.room) {
|
|
|
|
this.props.room.removeListener("Room.receipt", this.handleRoomEventUpdate);
|
|
|
|
this.props.room.removeListener("Room.timeline", this.handleRoomEventUpdate);
|
|
|
|
this.props.room.removeListener("Room.redaction", this.handleRoomEventUpdate);
|
2020-05-26 00:54:02 +03:00
|
|
|
}
|
2020-05-27 04:56:56 +03:00
|
|
|
if (MatrixClientPeg.get()) {
|
|
|
|
MatrixClientPeg.get().removeListener("Event.decrypted", this.handleRoomEventUpdate);
|
|
|
|
}
|
2020-05-12 06:09:32 +03:00
|
|
|
}
|
|
|
|
|
2020-05-23 03:05:09 +03:00
|
|
|
// XXX: This is a bit of an awful-looking hack. We should probably be using state for
|
|
|
|
// this, but instead we're kinda forced to either duplicate the code or thread a variable
|
2020-05-23 03:10:30 +03:00
|
|
|
// through the code paths. This feels like the least evil option.
|
2020-05-23 03:05:09 +03:00
|
|
|
private get roomIsInvite(): boolean {
|
|
|
|
return getEffectiveMembership(this.props.room.getMyMembership()) === EffectiveMembership.Invite;
|
|
|
|
}
|
|
|
|
|
2020-05-27 01:20:51 +03:00
|
|
|
private handleRoomEventUpdate = (event: MatrixEvent) => {
|
2020-05-26 00:54:02 +03:00
|
|
|
const roomId = event.getRoomId();
|
2020-05-27 01:20:51 +03:00
|
|
|
|
|
|
|
// Sanity check: should never happen
|
2020-05-26 00:54:02 +03:00
|
|
|
if (roomId !== this.props.room.roomId) return;
|
|
|
|
|
|
|
|
this.updateNotificationState();
|
|
|
|
};
|
|
|
|
|
2020-05-23 03:05:09 +03:00
|
|
|
private updateNotificationState() {
|
|
|
|
this.setState({notificationState: this.getNotificationState()});
|
2020-05-12 06:09:32 +03:00
|
|
|
}
|
|
|
|
|
2020-05-23 03:05:09 +03:00
|
|
|
private getNotificationState(): INotificationState {
|
|
|
|
const state: INotificationState = {
|
|
|
|
color: NotificationColor.None,
|
|
|
|
symbol: null,
|
2020-05-12 01:20:26 +03:00
|
|
|
};
|
2020-05-23 03:05:09 +03:00
|
|
|
|
|
|
|
if (this.roomIsInvite) {
|
|
|
|
state.color = NotificationColor.Red;
|
|
|
|
state.symbol = "!";
|
|
|
|
} else {
|
|
|
|
const redNotifs = RoomNotifs.getUnreadNotificationCount(this.props.room, 'highlight');
|
|
|
|
const greyNotifs = RoomNotifs.getUnreadNotificationCount(this.props.room, 'total');
|
|
|
|
|
|
|
|
// For a 'true count' we pick the grey notifications first because they include the
|
|
|
|
// red notifications. If we don't have a grey count for some reason we use the red
|
|
|
|
// count. If that count is broken for some reason, assume zero. This avoids us showing
|
|
|
|
// a badge for 'NaN' (which formats as 'NaNB' for NaN Billion).
|
|
|
|
const trueCount = greyNotifs ? greyNotifs : (redNotifs ? redNotifs : 0);
|
|
|
|
|
|
|
|
// Note: we only set the symbol if we have an actual count. We don't want to show
|
|
|
|
// zero on badges.
|
|
|
|
|
|
|
|
if (redNotifs > 0) {
|
|
|
|
state.color = NotificationColor.Red;
|
|
|
|
state.symbol = FormattingUtils.formatCount(trueCount);
|
|
|
|
} else if (greyNotifs > 0) {
|
|
|
|
state.color = NotificationColor.Grey;
|
|
|
|
state.symbol = FormattingUtils.formatCount(trueCount);
|
|
|
|
} else {
|
|
|
|
// We don't have any notified messages, but we might have unread messages. Let's
|
|
|
|
// find out.
|
|
|
|
const hasUnread = Unread.doesRoomHaveUnreadMessages(this.props.room);
|
|
|
|
if (hasUnread) {
|
|
|
|
state.color = NotificationColor.Bold;
|
|
|
|
// no symbol for this state
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
return state;
|
2020-05-12 01:20:26 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
private onTileMouseEnter = () => {
|
|
|
|
this.setState({hover: true});
|
|
|
|
};
|
|
|
|
|
|
|
|
private onTileMouseLeave = () => {
|
|
|
|
this.setState({hover: false});
|
|
|
|
};
|
|
|
|
|
2020-05-12 01:29:32 +03:00
|
|
|
private onTileClick = (ev: React.KeyboardEvent) => {
|
|
|
|
dis.dispatch({
|
|
|
|
action: 'view_room',
|
|
|
|
// TODO: Support show_room_tile in new room list
|
|
|
|
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)),
|
|
|
|
});
|
|
|
|
};
|
|
|
|
|
2020-05-08 21:53:05 +03:00
|
|
|
public render(): React.ReactElement {
|
|
|
|
// TODO: Collapsed state
|
|
|
|
// TODO: Invites
|
|
|
|
// TODO: a11y proper
|
|
|
|
// TODO: Render more than bare minimum
|
|
|
|
|
|
|
|
const classes = classNames({
|
2020-06-05 01:34:04 +03:00
|
|
|
'mx_RoomTile2': true,
|
2020-05-08 21:53:05 +03:00
|
|
|
});
|
|
|
|
|
2020-05-12 06:09:32 +03:00
|
|
|
let badge;
|
2020-06-05 06:21:04 +03:00
|
|
|
const hasBadge = this.state.notificationState.color > NotificationColor.Bold;
|
2020-05-23 03:05:09 +03:00
|
|
|
if (hasBadge) {
|
2020-06-05 06:21:04 +03:00
|
|
|
const hasNotif = this.state.notificationState.color >= NotificationColor.Red;
|
|
|
|
const isEmptyBadge = !localStorage.getItem("mx_rl_rt_badgeCount");
|
2020-05-12 06:09:32 +03:00
|
|
|
const badgeClasses = classNames({
|
2020-06-05 01:34:04 +03:00
|
|
|
'mx_RoomTile2_badge': true,
|
2020-06-05 06:21:04 +03:00
|
|
|
'mx_RoomTile2_badgeHighlight': hasNotif,
|
|
|
|
'mx_RoomTile2_badgeEmpty': isEmptyBadge,
|
2020-05-12 06:09:32 +03:00
|
|
|
});
|
2020-06-05 06:21:04 +03:00
|
|
|
const symbol = this.state.notificationState.symbol;
|
|
|
|
badge = <div className={badgeClasses}>{isEmptyBadge ? null : symbol}</div>;
|
2020-05-12 06:09:32 +03:00
|
|
|
}
|
|
|
|
|
2020-05-08 21:53:05 +03:00
|
|
|
// TODO: the original RoomTile uses state for the room name. Do we need to?
|
|
|
|
let name = this.props.room.name;
|
|
|
|
if (typeof name !== 'string') name = '';
|
|
|
|
name = name.replace(":", ":\u200b"); // add a zero-width space to allow linewrapping after the colon
|
|
|
|
|
2020-05-14 21:53:00 +03:00
|
|
|
// TODO: Support collapsed state properly
|
2020-06-05 06:21:04 +03:00
|
|
|
// TODO: Tooltip?
|
|
|
|
|
|
|
|
let messagePreview = null;
|
|
|
|
if (this.props.showMessagePreview) {
|
|
|
|
// TODO: Actually get the real message preview from state
|
|
|
|
messagePreview = <div className="mx_RoomTile2_messagePreview">I just ate a pie.</div>;
|
2020-05-12 01:20:26 +03:00
|
|
|
}
|
|
|
|
|
2020-06-05 06:21:04 +03:00
|
|
|
const nameClasses = classNames({
|
|
|
|
"mx_RoomTile2_name": true,
|
|
|
|
"mx_RoomTile2_nameWithPreview": !!messagePreview,
|
|
|
|
});
|
|
|
|
|
|
|
|
const avatarSize = 32;
|
2020-05-08 21:53:05 +03:00
|
|
|
return (
|
|
|
|
<React.Fragment>
|
|
|
|
<RovingTabIndexWrapper inputRef={this.roomTile}>
|
|
|
|
{({onFocus, isActive, ref}) =>
|
|
|
|
<AccessibleButton
|
|
|
|
onFocus={onFocus}
|
|
|
|
tabIndex={isActive ? 0 : -1}
|
|
|
|
inputRef={ref}
|
|
|
|
className={classes}
|
2020-05-12 01:20:26 +03:00
|
|
|
onMouseEnter={this.onTileMouseEnter}
|
|
|
|
onMouseLeave={this.onTileMouseLeave}
|
2020-05-12 01:29:32 +03:00
|
|
|
onClick={this.onTileClick}
|
2020-05-08 21:53:05 +03:00
|
|
|
role="treeitem"
|
|
|
|
>
|
2020-06-05 06:21:04 +03:00
|
|
|
<div className="mx_RoomTile2_avatarContainer">
|
|
|
|
<RoomAvatar room={this.props.room} width={avatarSize} height={avatarSize}/>
|
2020-05-08 21:53:05 +03:00
|
|
|
</div>
|
2020-06-05 01:34:04 +03:00
|
|
|
<div className="mx_RoomTile2_nameContainer">
|
2020-06-05 06:21:04 +03:00
|
|
|
<div title={name} className={nameClasses} tabIndex={-1} dir="auto">
|
|
|
|
{name}
|
2020-05-08 21:53:05 +03:00
|
|
|
</div>
|
2020-06-05 06:21:04 +03:00
|
|
|
{messagePreview}
|
|
|
|
</div>
|
|
|
|
<div className="mx_RoomTile2_badgeContainer">
|
2020-05-12 06:09:32 +03:00
|
|
|
{badge}
|
2020-05-08 21:53:05 +03:00
|
|
|
</div>
|
|
|
|
</AccessibleButton>
|
|
|
|
}
|
|
|
|
</RovingTabIndexWrapper>
|
|
|
|
</React.Fragment>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|