2016-02-23 18:46:27 +03:00
|
|
|
/*
|
2020-10-30 20:29:32 +03:00
|
|
|
Copyright 2015, 2016, 2017, 2020 The Matrix.org Foundation C.I.C.
|
2016-02-23 18:46:27 +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.
|
|
|
|
*/
|
|
|
|
|
2017-05-30 17:09:57 +03:00
|
|
|
import React from 'react';
|
2021-06-18 18:22:31 +03:00
|
|
|
import classNames from 'classnames';
|
|
|
|
import { lexicographicCompare } from 'matrix-js-sdk/src/utils';
|
2020-10-30 20:29:32 +03:00
|
|
|
import { Room } from 'matrix-js-sdk/src/models/room'
|
2021-06-18 18:22:31 +03:00
|
|
|
|
|
|
|
import { MatrixClientPeg } from "../../../MatrixClientPeg";
|
2017-06-09 13:06:44 +03:00
|
|
|
import AppsDrawer from './AppsDrawer';
|
2018-12-24 17:27:50 +03:00
|
|
|
import RateLimitedFunc from '../../../ratelimitedfunc';
|
2018-12-24 18:09:10 +03:00
|
|
|
import SettingsStore from "../../../settings/SettingsStore";
|
2020-03-28 03:51:01 +03:00
|
|
|
import AutoHideScrollbar from "../../structures/AutoHideScrollbar";
|
2021-06-16 14:07:58 +03:00
|
|
|
import { UIFeature } from "../../../settings/UIFeature";
|
2021-06-22 19:23:13 +03:00
|
|
|
import ResizeNotifier from "../../../utils/ResizeNotifier";
|
2020-12-03 20:45:49 +03:00
|
|
|
import CallViewForRoom from '../voip/CallViewForRoom';
|
2021-06-16 14:07:58 +03:00
|
|
|
import { objectHasDiff } from "../../../utils/objects";
|
|
|
|
import { replaceableComponent } from "../../../utils/replaceableComponent";
|
2017-05-30 17:09:57 +03:00
|
|
|
|
2020-10-30 20:29:32 +03:00
|
|
|
interface IProps {
|
|
|
|
// js-sdk room object
|
|
|
|
room: Room,
|
|
|
|
userId: string,
|
|
|
|
showApps: boolean, // Render apps
|
2017-05-30 17:09:57 +03:00
|
|
|
|
2020-10-30 20:29:32 +03:00
|
|
|
// maxHeight attribute for the aux panel and the video
|
|
|
|
// therein
|
|
|
|
maxHeight: number,
|
2016-02-23 18:46:27 +03:00
|
|
|
|
2020-10-30 20:29:32 +03:00
|
|
|
// a callback which is called when the content of the aux panel changes
|
|
|
|
// content in a way that is likely to make it change size.
|
|
|
|
onResize: () => void,
|
|
|
|
fullHeight: boolean,
|
2016-02-23 18:46:27 +03:00
|
|
|
|
2020-10-30 20:29:32 +03:00
|
|
|
resizeNotifier: ResizeNotifier,
|
|
|
|
}
|
|
|
|
|
|
|
|
interface Counter {
|
|
|
|
title: string,
|
|
|
|
value: number,
|
|
|
|
link: string,
|
|
|
|
severity: string,
|
|
|
|
stateKey: string,
|
|
|
|
}
|
2016-03-08 15:16:34 +03:00
|
|
|
|
2020-10-30 20:29:32 +03:00
|
|
|
interface IState {
|
|
|
|
counters: Counter[],
|
|
|
|
}
|
|
|
|
|
2021-03-09 06:12:00 +03:00
|
|
|
@replaceableComponent("views.rooms.AuxPanel")
|
2020-10-30 20:29:32 +03:00
|
|
|
export default class AuxPanel extends React.Component<IProps, IState> {
|
2020-08-29 14:14:16 +03:00
|
|
|
static defaultProps = {
|
2018-02-09 16:23:34 +03:00
|
|
|
showApps: true,
|
2020-08-29 14:14:16 +03:00
|
|
|
};
|
|
|
|
|
|
|
|
constructor(props) {
|
|
|
|
super(props);
|
2018-02-09 16:23:34 +03:00
|
|
|
|
2020-08-29 14:14:16 +03:00
|
|
|
this.state = {
|
2021-06-16 14:07:58 +03:00
|
|
|
counters: this.computeCounters(),
|
2020-08-29 14:14:16 +03:00
|
|
|
};
|
|
|
|
}
|
2019-01-08 14:14:31 +03:00
|
|
|
|
2020-08-29 14:14:16 +03:00
|
|
|
componentDidMount() {
|
2018-12-24 17:27:50 +03:00
|
|
|
const cli = MatrixClientPeg.get();
|
2021-06-16 14:06:41 +03:00
|
|
|
if (SettingsStore.getValue("feature_state_counters")) {
|
2021-06-16 14:07:58 +03:00
|
|
|
cli.on("RoomState.events", this.rateLimitedUpdate);
|
2021-06-16 14:06:41 +03:00
|
|
|
}
|
2020-08-29 14:14:16 +03:00
|
|
|
}
|
2018-12-24 17:27:50 +03:00
|
|
|
|
2020-08-29 14:14:16 +03:00
|
|
|
componentWillUnmount() {
|
2018-12-24 17:27:50 +03:00
|
|
|
const cli = MatrixClientPeg.get();
|
2021-06-16 14:06:41 +03:00
|
|
|
if (cli && SettingsStore.getValue("feature_state_counters")) {
|
2021-06-16 14:07:58 +03:00
|
|
|
cli.removeListener("RoomState.events", this.rateLimitedUpdate);
|
2018-12-24 17:27:50 +03:00
|
|
|
}
|
2020-08-29 14:14:16 +03:00
|
|
|
}
|
2018-12-24 17:27:50 +03:00
|
|
|
|
2020-08-29 14:14:16 +03:00
|
|
|
shouldComponentUpdate(nextProps, nextState) {
|
2021-02-19 03:00:10 +03:00
|
|
|
return objectHasDiff(this.props, nextProps) || objectHasDiff(this.state, nextState);
|
2020-08-29 14:14:16 +03:00
|
|
|
}
|
2016-03-08 15:16:34 +03:00
|
|
|
|
2020-08-29 14:14:16 +03:00
|
|
|
componentDidUpdate(prevProps, prevState) {
|
2016-03-08 15:16:34 +03:00
|
|
|
// most changes are likely to cause a resize
|
|
|
|
if (this.props.onResize) {
|
|
|
|
this.props.onResize();
|
|
|
|
}
|
2020-08-29 14:14:16 +03:00
|
|
|
}
|
2016-02-23 18:46:27 +03:00
|
|
|
|
2021-06-16 14:07:58 +03:00
|
|
|
private rateLimitedUpdate = new RateLimitedFunc(() => {
|
|
|
|
this.setState({ counters: this.computeCounters() });
|
2020-08-29 14:14:16 +03:00
|
|
|
}, 500);
|
2018-12-24 17:27:50 +03:00
|
|
|
|
2021-06-16 14:07:58 +03:00
|
|
|
private computeCounters() {
|
2020-10-30 20:29:32 +03:00
|
|
|
const counters = [];
|
2019-01-08 14:14:31 +03:00
|
|
|
|
2020-08-17 22:12:18 +03:00
|
|
|
if (this.props.room && SettingsStore.getValue("feature_state_counters")) {
|
2019-01-08 14:14:31 +03:00
|
|
|
const stateEvs = this.props.room.currentState.getStateEvents('re.jki.counter');
|
2021-06-18 18:22:31 +03:00
|
|
|
stateEvs.sort((a, b) => lexicographicCompare(a.getStateKey(), b.getStateKey()));
|
2019-01-08 14:14:31 +03:00
|
|
|
|
2020-10-30 20:29:32 +03:00
|
|
|
for (const ev of stateEvs) {
|
2019-01-08 14:14:31 +03:00
|
|
|
const title = ev.getContent().title;
|
|
|
|
const value = ev.getContent().value;
|
|
|
|
const link = ev.getContent().link;
|
|
|
|
const severity = ev.getContent().severity || "normal";
|
|
|
|
const stateKey = ev.getStateKey();
|
|
|
|
|
2019-03-11 17:04:12 +03:00
|
|
|
// We want a non-empty title but can accept falsey values (e.g.
|
|
|
|
// zero)
|
|
|
|
if (title && value !== undefined) {
|
2019-01-08 14:14:31 +03:00
|
|
|
counters.push({
|
2020-10-30 20:29:32 +03:00
|
|
|
title,
|
|
|
|
value,
|
|
|
|
link,
|
|
|
|
severity,
|
|
|
|
stateKey,
|
2019-01-08 14:14:31 +03:00
|
|
|
})
|
|
|
|
}
|
2020-10-30 20:29:32 +03:00
|
|
|
}
|
2019-01-08 14:14:31 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
return counters;
|
2020-08-29 14:14:16 +03:00
|
|
|
}
|
2019-01-08 14:14:31 +03:00
|
|
|
|
2020-08-29 14:14:16 +03:00
|
|
|
render() {
|
2017-05-17 23:15:57 +03:00
|
|
|
const callView = (
|
2020-12-03 20:45:49 +03:00
|
|
|
<CallViewForRoom
|
|
|
|
roomId={this.props.room.roomId}
|
2016-02-23 18:46:27 +03:00
|
|
|
maxVideoHeight={this.props.maxHeight}
|
2021-03-02 16:09:11 +03:00
|
|
|
resizeNotifier={this.props.resizeNotifier}
|
2016-02-23 18:46:27 +03:00
|
|
|
/>
|
|
|
|
);
|
|
|
|
|
2020-09-16 13:38:50 +03:00
|
|
|
let appsDrawer;
|
|
|
|
if (SettingsStore.getValue(UIFeature.Widgets)) {
|
|
|
|
appsDrawer = <AppsDrawer
|
|
|
|
room={this.props.room}
|
|
|
|
userId={this.props.userId}
|
|
|
|
maxHeight={this.props.maxHeight}
|
|
|
|
showApps={this.props.showApps}
|
|
|
|
resizeNotifier={this.props.resizeNotifier}
|
|
|
|
/>;
|
|
|
|
}
|
2017-05-17 23:15:57 +03:00
|
|
|
|
2018-12-24 17:27:50 +03:00
|
|
|
let stateViews = null;
|
2020-08-17 22:12:18 +03:00
|
|
|
if (this.state.counters && SettingsStore.getValue("feature_state_counters")) {
|
2020-09-16 13:38:50 +03:00
|
|
|
const counters = [];
|
2018-12-24 17:27:50 +03:00
|
|
|
|
2019-01-08 14:14:31 +03:00
|
|
|
this.state.counters.forEach((counter, idx) => {
|
|
|
|
const title = counter.title;
|
|
|
|
const value = counter.value;
|
|
|
|
const link = counter.link;
|
|
|
|
const severity = counter.severity;
|
|
|
|
const stateKey = counter.stateKey;
|
2018-12-24 17:27:50 +03:00
|
|
|
|
2020-09-16 13:38:50 +03:00
|
|
|
let span = <span>{ title }: { value }</span>;
|
2018-12-24 17:27:50 +03:00
|
|
|
|
2019-03-12 13:00:10 +03:00
|
|
|
if (link) {
|
2018-12-24 17:27:50 +03:00
|
|
|
span = (
|
2020-02-24 01:14:29 +03:00
|
|
|
<a href={link} target="_blank" rel="noreferrer noopener">
|
2019-03-12 13:00:10 +03:00
|
|
|
{ span }
|
|
|
|
</a>
|
2018-12-24 17:27:50 +03:00
|
|
|
);
|
|
|
|
}
|
2019-03-12 13:00:10 +03:00
|
|
|
|
|
|
|
span = (
|
|
|
|
<span
|
|
|
|
className="m_RoomView_auxPanel_stateViews_span"
|
|
|
|
data-severity={severity}
|
|
|
|
key={ "x-" + stateKey }
|
|
|
|
>
|
|
|
|
{span}
|
|
|
|
</span>
|
|
|
|
);
|
|
|
|
|
|
|
|
counters.push(span);
|
|
|
|
counters.push(
|
|
|
|
<span
|
|
|
|
className="m_RoomView_auxPanel_stateViews_delim"
|
|
|
|
key={"delim" + idx}
|
2020-10-30 20:29:32 +03:00
|
|
|
> ─ </span>,
|
2019-03-12 13:00:10 +03:00
|
|
|
);
|
2018-12-24 17:27:50 +03:00
|
|
|
});
|
|
|
|
|
|
|
|
if (counters.length > 0) {
|
|
|
|
counters.pop(); // remove last deliminator
|
|
|
|
stateViews = (
|
|
|
|
<div className="m_RoomView_auxPanel_stateViews">
|
|
|
|
{ counters }
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2018-11-26 19:58:51 +03:00
|
|
|
const classes = classNames({
|
|
|
|
"mx_RoomView_auxPanel": true,
|
|
|
|
"mx_RoomView_auxPanel_fullHeight": this.props.fullHeight,
|
|
|
|
});
|
2020-10-30 20:35:16 +03:00
|
|
|
const style: React.CSSProperties = {};
|
2018-11-26 19:58:51 +03:00
|
|
|
if (!this.props.fullHeight) {
|
|
|
|
style.maxHeight = this.props.maxHeight;
|
|
|
|
}
|
|
|
|
|
2016-02-23 18:46:27 +03:00
|
|
|
return (
|
2021-06-16 14:06:41 +03:00
|
|
|
<AutoHideScrollbar className={classes} style={style}>
|
2018-12-24 17:27:50 +03:00
|
|
|
{ stateViews }
|
2017-05-17 23:15:57 +03:00
|
|
|
{ appsDrawer }
|
2016-02-23 18:46:27 +03:00
|
|
|
{ callView }
|
|
|
|
{ this.props.children }
|
2020-03-28 03:51:01 +03:00
|
|
|
</AutoHideScrollbar>
|
2016-02-23 18:46:27 +03:00
|
|
|
);
|
2020-08-29 14:14:16 +03:00
|
|
|
}
|
|
|
|
}
|