2019-02-12 13:04:25 +03:00
|
|
|
/*
|
2019-02-12 14:21:40 +03:00
|
|
|
Copyright 2019 New Vector Ltd
|
2019-02-12 13:04:25 +03:00
|
|
|
|
|
|
|
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.
|
|
|
|
*/
|
|
|
|
|
|
|
|
'use strict';
|
|
|
|
import React from "react";
|
|
|
|
import dis from "../../../dispatcher";
|
|
|
|
import MatrixClientPeg from "../../../MatrixClientPeg";
|
|
|
|
import AccessibleButton from '../elements/AccessibleButton';
|
|
|
|
import RoomAvatar from '../avatars/RoomAvatar';
|
2019-02-12 14:16:56 +03:00
|
|
|
import classNames from 'classnames';
|
2019-03-28 02:46:34 +03:00
|
|
|
import sdk from "../../../index";
|
2019-04-02 01:06:33 +03:00
|
|
|
import * as RoomNotifs from '../../../RoomNotifs';
|
|
|
|
import * as FormattingUtils from "../../../utils/FormattingUtils";
|
2019-04-04 23:17:15 +03:00
|
|
|
import Analytics from "../../../Analytics";
|
2019-02-12 13:04:25 +03:00
|
|
|
|
|
|
|
const MAX_ROOMS = 20;
|
|
|
|
|
|
|
|
export default class RoomBreadcrumbs extends React.Component {
|
|
|
|
constructor(props) {
|
|
|
|
super(props);
|
|
|
|
this.state = {rooms: []};
|
|
|
|
this.onAction = this.onAction.bind(this);
|
|
|
|
this._dispatcherRef = null;
|
|
|
|
}
|
|
|
|
|
|
|
|
componentWillMount() {
|
|
|
|
this._dispatcherRef = dis.register(this.onAction);
|
2019-03-28 00:32:51 +03:00
|
|
|
|
|
|
|
const roomStr = localStorage.getItem("mx_breadcrumb_rooms");
|
|
|
|
if (roomStr) {
|
|
|
|
try {
|
|
|
|
const roomIds = JSON.parse(roomStr);
|
|
|
|
this.setState({
|
|
|
|
rooms: roomIds.map((r) => {
|
|
|
|
return {
|
|
|
|
room: MatrixClientPeg.get().getRoom(r),
|
|
|
|
animated: false,
|
|
|
|
};
|
|
|
|
}).filter((r) => r.room),
|
|
|
|
});
|
|
|
|
} catch (e) {
|
|
|
|
console.error("Failed to parse breadcrumbs:", e);
|
|
|
|
}
|
|
|
|
}
|
2019-03-29 04:19:12 +03:00
|
|
|
|
|
|
|
MatrixClientPeg.get().on("Room.myMembership", this.onMyMembership);
|
2019-04-02 01:06:33 +03:00
|
|
|
MatrixClientPeg.get().on("Room.receipt", this.onRoomReceipt);
|
|
|
|
MatrixClientPeg.get().on("Room.timeline", this.onRoomTimeline);
|
|
|
|
MatrixClientPeg.get().on("Event.decrypted", this.onEventDecrypted);
|
2019-02-12 13:04:25 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
componentWillUnmount() {
|
|
|
|
dis.unregister(this._dispatcherRef);
|
2019-03-29 04:19:12 +03:00
|
|
|
|
|
|
|
const client = MatrixClientPeg.get();
|
2019-04-02 01:06:33 +03:00
|
|
|
if (client) {
|
|
|
|
client.removeListener("Room.myMembership", this.onMyMembership);
|
|
|
|
client.removeListener("Room.receipt", this.onRoomReceipt);
|
|
|
|
client.removeListener("Room.timeline", this.onRoomTimeline);
|
|
|
|
client.removeListener("Event.decrypted", this.onEventDecrypted);
|
|
|
|
}
|
2019-02-12 13:04:25 +03:00
|
|
|
}
|
|
|
|
|
2019-02-12 14:16:56 +03:00
|
|
|
componentDidUpdate() {
|
|
|
|
const rooms = this.state.rooms.slice();
|
2019-03-28 00:32:51 +03:00
|
|
|
|
2019-02-12 14:16:56 +03:00
|
|
|
if (rooms.length) {
|
|
|
|
const {room, animated} = rooms[0];
|
|
|
|
if (!animated) {
|
|
|
|
rooms[0] = {room, animated: true};
|
|
|
|
setTimeout(() => this.setState({rooms}), 0);
|
|
|
|
}
|
|
|
|
}
|
2019-03-28 00:32:51 +03:00
|
|
|
|
|
|
|
const roomStr = JSON.stringify(rooms.map((r) => r.room.roomId));
|
|
|
|
localStorage.setItem("mx_breadcrumb_rooms", roomStr);
|
2019-02-12 14:16:56 +03:00
|
|
|
}
|
|
|
|
|
2019-02-12 13:04:25 +03:00
|
|
|
onAction(payload) {
|
|
|
|
switch (payload.action) {
|
|
|
|
case 'view_room':
|
2019-03-28 00:38:42 +03:00
|
|
|
this._appendRoomId(payload.room_id);
|
|
|
|
break;
|
2019-02-12 13:04:25 +03:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2019-03-29 04:19:12 +03:00
|
|
|
onMyMembership = (room, membership) => {
|
|
|
|
if (membership === "leave" || membership === "ban") {
|
2019-04-02 19:47:39 +03:00
|
|
|
const rooms = this.state.rooms.slice();
|
|
|
|
const roomState = rooms.find((r) => r.room.roomId === room.roomId);
|
|
|
|
if (roomState) {
|
|
|
|
roomState.left = true;
|
|
|
|
this.setState({rooms});
|
|
|
|
}
|
2019-03-29 04:19:12 +03:00
|
|
|
}
|
|
|
|
};
|
|
|
|
|
2019-04-02 01:06:33 +03:00
|
|
|
onRoomReceipt = (event, room) => {
|
|
|
|
if (this.state.rooms.map(r => r.room.roomId).includes(room.roomId)) {
|
2019-04-04 01:13:09 +03:00
|
|
|
this._calculateRoomBadges(room);
|
2019-04-02 01:06:33 +03:00
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
onRoomTimeline = (event, room) => {
|
|
|
|
if (this.state.rooms.map(r => r.room.roomId).includes(room.roomId)) {
|
2019-04-04 01:13:09 +03:00
|
|
|
this._calculateRoomBadges(room);
|
2019-04-02 01:06:33 +03:00
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
onEventDecrypted = (event) => {
|
|
|
|
if (this.state.rooms.map(r => r.room.roomId).includes(event.getRoomId())) {
|
2019-04-04 01:13:09 +03:00
|
|
|
this._calculateRoomBadges(MatrixClientPeg.get().getRoom(event.getRoomId()));
|
2019-04-02 01:06:33 +03:00
|
|
|
}
|
|
|
|
};
|
|
|
|
|
2019-04-04 01:13:09 +03:00
|
|
|
_calculateRoomBadges(room) {
|
|
|
|
if (!room) return;
|
|
|
|
|
|
|
|
const rooms = this.state.rooms.slice();
|
|
|
|
const roomModel = rooms.find((r) => r.room.roomId === room.roomId);
|
|
|
|
if (!roomModel) return; // No applicable room, so don't do math on it
|
|
|
|
|
|
|
|
// Reset the notification variables for simplicity
|
|
|
|
roomModel.redBadge = false;
|
|
|
|
roomModel.formattedCount = "0";
|
|
|
|
roomModel.showCount = false;
|
|
|
|
|
|
|
|
const notifState = RoomNotifs.getRoomNotifsState(room.roomId);
|
|
|
|
if (RoomNotifs.MENTION_BADGE_STATES.includes(notifState)) {
|
|
|
|
const highlightNotifs = RoomNotifs.getUnreadNotificationCount(room, 'highlight');
|
|
|
|
const unreadNotifs = RoomNotifs.getUnreadNotificationCount(room);
|
|
|
|
|
|
|
|
const redBadge = highlightNotifs > 0;
|
|
|
|
const greyBadge = redBadge || (unreadNotifs > 0 && RoomNotifs.BADGE_STATES.includes(notifState));
|
|
|
|
|
|
|
|
if (redBadge || greyBadge) {
|
|
|
|
const notifCount = redBadge ? highlightNotifs : unreadNotifs;
|
|
|
|
const limitedCount = FormattingUtils.formatCount(notifCount);
|
|
|
|
|
|
|
|
roomModel.redBadge = redBadge;
|
|
|
|
roomModel.formattedCount = limitedCount;
|
|
|
|
roomModel.showCount = true;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
this.setState({rooms});
|
|
|
|
}
|
|
|
|
|
2019-02-12 13:04:25 +03:00
|
|
|
_appendRoomId(roomId) {
|
|
|
|
const room = MatrixClientPeg.get().getRoom(roomId);
|
|
|
|
if (!room) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
const rooms = this.state.rooms.slice();
|
2019-02-12 14:16:56 +03:00
|
|
|
const existingIdx = rooms.findIndex((r) => r.room.roomId === room.roomId);
|
2019-02-12 13:04:25 +03:00
|
|
|
if (existingIdx !== -1) {
|
|
|
|
rooms.splice(existingIdx, 1);
|
|
|
|
}
|
2019-02-12 14:16:56 +03:00
|
|
|
rooms.splice(0, 0, {room, animated: false});
|
2019-02-12 13:04:25 +03:00
|
|
|
if (rooms.length > MAX_ROOMS) {
|
2019-02-12 13:26:46 +03:00
|
|
|
rooms.splice(MAX_ROOMS, rooms.length - MAX_ROOMS);
|
2019-02-12 13:04:25 +03:00
|
|
|
}
|
|
|
|
this.setState({rooms});
|
|
|
|
}
|
|
|
|
|
2019-04-04 23:17:15 +03:00
|
|
|
_viewRoom(room, index) {
|
|
|
|
Analytics.trackEvent("Breadcrumbs", "click_node", index);
|
2019-02-12 13:04:25 +03:00
|
|
|
dis.dispatch({action: "view_room", room_id: room.roomId});
|
|
|
|
}
|
|
|
|
|
2019-03-28 02:46:34 +03:00
|
|
|
_onMouseEnter(room) {
|
|
|
|
this._onHover(room);
|
|
|
|
}
|
|
|
|
|
|
|
|
_onMouseLeave(room) {
|
|
|
|
this._onHover(null); // clear hover states
|
|
|
|
}
|
|
|
|
|
|
|
|
_onHover(room) {
|
|
|
|
const rooms = this.state.rooms.slice();
|
|
|
|
for (const r of rooms) {
|
|
|
|
r.hover = room && r.room.roomId === room.roomId;
|
|
|
|
}
|
|
|
|
this.setState({rooms});
|
|
|
|
}
|
|
|
|
|
2019-02-12 13:04:25 +03:00
|
|
|
render() {
|
2019-03-28 02:46:34 +03:00
|
|
|
const Tooltip = sdk.getComponent('elements.Tooltip');
|
2019-03-28 02:51:23 +03:00
|
|
|
const IndicatorScrollbar = sdk.getComponent('structures.IndicatorScrollbar');
|
|
|
|
|
2019-04-02 01:06:33 +03:00
|
|
|
// check for collapsed here and not at parent so we keep rooms in our state
|
2019-02-12 13:31:50 +03:00
|
|
|
// when collapsing and expanding
|
|
|
|
if (this.props.collapsed) {
|
|
|
|
return null;
|
|
|
|
}
|
2019-04-02 01:06:33 +03:00
|
|
|
|
2019-02-12 14:16:56 +03:00
|
|
|
const rooms = this.state.rooms;
|
2019-04-02 19:47:39 +03:00
|
|
|
const avatars = rooms.map((r, i) => {
|
2019-02-12 14:16:56 +03:00
|
|
|
const isFirst = i === 0;
|
|
|
|
const classes = classNames({
|
2019-03-28 02:51:23 +03:00
|
|
|
"mx_RoomBreadcrumbs_crumb": true,
|
2019-04-02 19:47:39 +03:00
|
|
|
"mx_RoomBreadcrumbs_preAnimate": isFirst && !r.animated,
|
2019-02-12 14:16:56 +03:00
|
|
|
"mx_RoomBreadcrumbs_animate": isFirst,
|
2019-04-02 19:47:39 +03:00
|
|
|
"mx_RoomBreadcrumbs_left": r.left,
|
2019-02-12 14:16:56 +03:00
|
|
|
});
|
2019-03-28 02:46:34 +03:00
|
|
|
|
|
|
|
let tooltip = null;
|
2019-04-02 19:47:39 +03:00
|
|
|
if (r.hover) {
|
|
|
|
tooltip = <Tooltip label={r.room.name} />;
|
2019-03-28 02:46:34 +03:00
|
|
|
}
|
|
|
|
|
2019-04-02 01:06:33 +03:00
|
|
|
let badge;
|
2019-04-04 01:13:09 +03:00
|
|
|
if (r.showCount) {
|
|
|
|
const badgeClasses = classNames({
|
|
|
|
'mx_RoomTile_badge': true,
|
|
|
|
'mx_RoomTile_badgeButton': true,
|
|
|
|
'mx_RoomTile_badgeRed': r.redBadge,
|
|
|
|
'mx_RoomTile_badgeUnread': !r.redBadge,
|
|
|
|
});
|
|
|
|
|
|
|
|
badge = <div className={badgeClasses}>{r.formattedCount}</div>;
|
2019-04-02 01:06:33 +03:00
|
|
|
}
|
|
|
|
|
2019-02-12 13:04:25 +03:00
|
|
|
return (
|
2019-04-04 23:17:15 +03:00
|
|
|
<AccessibleButton className={classes} key={r.room.roomId} onClick={() => this._viewRoom(r.room, i)}
|
2019-04-02 19:47:39 +03:00
|
|
|
onMouseEnter={() => this._onMouseEnter(r.room)} onMouseLeave={() => this._onMouseLeave(r.room)}>
|
|
|
|
<RoomAvatar room={r.room} width={32} height={32} />
|
2019-04-02 01:06:33 +03:00
|
|
|
{badge}
|
2019-03-28 02:46:34 +03:00
|
|
|
{tooltip}
|
2019-02-12 13:04:25 +03:00
|
|
|
</AccessibleButton>
|
|
|
|
);
|
|
|
|
});
|
2019-03-28 02:51:23 +03:00
|
|
|
return (
|
2019-03-28 19:43:01 +03:00
|
|
|
<IndicatorScrollbar ref="scroller" className="mx_RoomBreadcrumbs" trackHorizontalOverflow={true}>
|
2019-03-28 02:51:23 +03:00
|
|
|
{ avatars }
|
|
|
|
</IndicatorScrollbar>
|
|
|
|
);
|
2019-02-12 13:04:25 +03:00
|
|
|
}
|
|
|
|
}
|