element-web/src/components/views/rooms/AuxPanel.tsx

226 lines
7 KiB
TypeScript
Raw Normal View History

/*
Copyright 2015, 2016, 2017, 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.
*/
More i18n strings (#963) * Add i18n for E2E import and Export Dialogs Signed-off-by: MTRNord <mtrnord1@gmail.com> * Add various previous missing i18n strings Signed-off-by: MTRNord <mtrnord1@gmail.com> * Translate CreateRoomButton Signed-off-by: MTRNord <mtrnord1@gmail.com> * Add ChatInviteDialog and fix missing to. Signed-off-by: MTRNord <mtrnord1@gmail.com> * Add ConfitmRedactDialog translations Signed-off-by: MTRNord <mtrnord1@gmail.com> * Add DeactivateAccountDialog translations Signed-off-by: MTRNord <mtrnord1@gmail.com> * Add DeviceVerifyDialog translations Signed-off-by: MTRNord <mtrnord1@gmail.com> * Add SessionRestoreErrorDialog translations Signed-off-by: MTRNord <mtrnord1@gmail.com> * Add SetDisplayNameDialog translations Signed-off-by: MTRNord <mtrnord1@gmail.com> * Add UnknownDeviceDialog translations Signed-off-by: MTRNord <mtrnord1@gmail.com> * Add AddressTile translations Signed-off-by: MTRNord <mtrnord1@gmail.com> * Add DeviceVerifyButtons translations Signed-off-by: MTRNord <mtrnord1@gmail.com> * Add Dropdown translations Signed-off-by: MTRNord <mtrnord1@gmail.com> * Add UserSelector translations Signed-off-by: MTRNord <mtrnord1@gmail.com> * Add CaptchaForm translations Signed-off-by: MTRNord <mtrnord1@gmail.com> * Add CasLogin translations Signed-off-by: MTRNord <mtrnord1@gmail.com> * Add CustomServerDialog translations Signed-off-by: MTRNord <mtrnord1@gmail.com> * Add InteractiveAuthEntryComponents translations Signed-off-by: MTRNord <mtrnord1@gmail.com> * Add LoginFooter translations Signed-off-by: MTRNord <mtrnord1@gmail.com> * Add RegistrationForm translations Signed-off-by: MTRNord <mtrnord1@gmail.com> * Add ServerConfig translations Signed-off-by: MTRNord <mtrnord1@gmail.com> * Add MAudioBody translations Signed-off-by: MTRNord <mtrnord1@gmail.com> * Add MImageBody translations Signed-off-by: MTRNord <mtrnord1@gmail.com> * Add MVideoBody translations Signed-off-by: MTRNord <mtrnord1@gmail.com> * Add TextualBody translations Signed-off-by: MTRNord <mtrnord1@gmail.com> * Add UnknownBody translations Signed-off-by: MTRNord <mtrnord1@gmail.com> * Add UrlPreviewSettings translations Signed-off-by: MTRNord <mtrnord1@gmail.com> * Add AuxPanel translations Signed-off-by: MTRNord <mtrnord1@gmail.com> * Add PresenceLabel translations Signed-off-by: MTRNord <mtrnord1@gmail.com> * fix syntax error * weird space :P * missing ',' * fix missing value * fix json fail * remove acidential added file * fix another json fail
2017-05-30 17:09:57 +03:00
import React from 'react';
import classNames from 'classnames';
import { lexicographicCompare } from 'matrix-js-sdk/src/utils';
import { Room } from 'matrix-js-sdk/src/models/room'
import { MatrixClientPeg } from "../../../MatrixClientPeg";
2017-06-09 13:06:44 +03:00
import AppsDrawer from './AppsDrawer';
import RateLimitedFunc from '../../../ratelimitedfunc';
2018-12-24 18:09:10 +03:00
import SettingsStore from "../../../settings/SettingsStore";
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";
import CallViewForRoom from '../voip/CallViewForRoom';
2021-06-16 14:07:58 +03:00
import { objectHasDiff } from "../../../utils/objects";
import { replaceableComponent } from "../../../utils/replaceableComponent";
More i18n strings (#963) * Add i18n for E2E import and Export Dialogs Signed-off-by: MTRNord <mtrnord1@gmail.com> * Add various previous missing i18n strings Signed-off-by: MTRNord <mtrnord1@gmail.com> * Translate CreateRoomButton Signed-off-by: MTRNord <mtrnord1@gmail.com> * Add ChatInviteDialog and fix missing to. Signed-off-by: MTRNord <mtrnord1@gmail.com> * Add ConfitmRedactDialog translations Signed-off-by: MTRNord <mtrnord1@gmail.com> * Add DeactivateAccountDialog translations Signed-off-by: MTRNord <mtrnord1@gmail.com> * Add DeviceVerifyDialog translations Signed-off-by: MTRNord <mtrnord1@gmail.com> * Add SessionRestoreErrorDialog translations Signed-off-by: MTRNord <mtrnord1@gmail.com> * Add SetDisplayNameDialog translations Signed-off-by: MTRNord <mtrnord1@gmail.com> * Add UnknownDeviceDialog translations Signed-off-by: MTRNord <mtrnord1@gmail.com> * Add AddressTile translations Signed-off-by: MTRNord <mtrnord1@gmail.com> * Add DeviceVerifyButtons translations Signed-off-by: MTRNord <mtrnord1@gmail.com> * Add Dropdown translations Signed-off-by: MTRNord <mtrnord1@gmail.com> * Add UserSelector translations Signed-off-by: MTRNord <mtrnord1@gmail.com> * Add CaptchaForm translations Signed-off-by: MTRNord <mtrnord1@gmail.com> * Add CasLogin translations Signed-off-by: MTRNord <mtrnord1@gmail.com> * Add CustomServerDialog translations Signed-off-by: MTRNord <mtrnord1@gmail.com> * Add InteractiveAuthEntryComponents translations Signed-off-by: MTRNord <mtrnord1@gmail.com> * Add LoginFooter translations Signed-off-by: MTRNord <mtrnord1@gmail.com> * Add RegistrationForm translations Signed-off-by: MTRNord <mtrnord1@gmail.com> * Add ServerConfig translations Signed-off-by: MTRNord <mtrnord1@gmail.com> * Add MAudioBody translations Signed-off-by: MTRNord <mtrnord1@gmail.com> * Add MImageBody translations Signed-off-by: MTRNord <mtrnord1@gmail.com> * Add MVideoBody translations Signed-off-by: MTRNord <mtrnord1@gmail.com> * Add TextualBody translations Signed-off-by: MTRNord <mtrnord1@gmail.com> * Add UnknownBody translations Signed-off-by: MTRNord <mtrnord1@gmail.com> * Add UrlPreviewSettings translations Signed-off-by: MTRNord <mtrnord1@gmail.com> * Add AuxPanel translations Signed-off-by: MTRNord <mtrnord1@gmail.com> * Add PresenceLabel translations Signed-off-by: MTRNord <mtrnord1@gmail.com> * fix syntax error * weird space :P * missing ',' * fix missing value * fix json fail * remove acidential added file * fix another json fail
2017-05-30 17:09:57 +03:00
interface IProps {
// js-sdk room object
room: Room,
userId: string,
showApps: boolean, // Render apps
More i18n strings (#963) * Add i18n for E2E import and Export Dialogs Signed-off-by: MTRNord <mtrnord1@gmail.com> * Add various previous missing i18n strings Signed-off-by: MTRNord <mtrnord1@gmail.com> * Translate CreateRoomButton Signed-off-by: MTRNord <mtrnord1@gmail.com> * Add ChatInviteDialog and fix missing to. Signed-off-by: MTRNord <mtrnord1@gmail.com> * Add ConfitmRedactDialog translations Signed-off-by: MTRNord <mtrnord1@gmail.com> * Add DeactivateAccountDialog translations Signed-off-by: MTRNord <mtrnord1@gmail.com> * Add DeviceVerifyDialog translations Signed-off-by: MTRNord <mtrnord1@gmail.com> * Add SessionRestoreErrorDialog translations Signed-off-by: MTRNord <mtrnord1@gmail.com> * Add SetDisplayNameDialog translations Signed-off-by: MTRNord <mtrnord1@gmail.com> * Add UnknownDeviceDialog translations Signed-off-by: MTRNord <mtrnord1@gmail.com> * Add AddressTile translations Signed-off-by: MTRNord <mtrnord1@gmail.com> * Add DeviceVerifyButtons translations Signed-off-by: MTRNord <mtrnord1@gmail.com> * Add Dropdown translations Signed-off-by: MTRNord <mtrnord1@gmail.com> * Add UserSelector translations Signed-off-by: MTRNord <mtrnord1@gmail.com> * Add CaptchaForm translations Signed-off-by: MTRNord <mtrnord1@gmail.com> * Add CasLogin translations Signed-off-by: MTRNord <mtrnord1@gmail.com> * Add CustomServerDialog translations Signed-off-by: MTRNord <mtrnord1@gmail.com> * Add InteractiveAuthEntryComponents translations Signed-off-by: MTRNord <mtrnord1@gmail.com> * Add LoginFooter translations Signed-off-by: MTRNord <mtrnord1@gmail.com> * Add RegistrationForm translations Signed-off-by: MTRNord <mtrnord1@gmail.com> * Add ServerConfig translations Signed-off-by: MTRNord <mtrnord1@gmail.com> * Add MAudioBody translations Signed-off-by: MTRNord <mtrnord1@gmail.com> * Add MImageBody translations Signed-off-by: MTRNord <mtrnord1@gmail.com> * Add MVideoBody translations Signed-off-by: MTRNord <mtrnord1@gmail.com> * Add TextualBody translations Signed-off-by: MTRNord <mtrnord1@gmail.com> * Add UnknownBody translations Signed-off-by: MTRNord <mtrnord1@gmail.com> * Add UrlPreviewSettings translations Signed-off-by: MTRNord <mtrnord1@gmail.com> * Add AuxPanel translations Signed-off-by: MTRNord <mtrnord1@gmail.com> * Add PresenceLabel translations Signed-off-by: MTRNord <mtrnord1@gmail.com> * fix syntax error * weird space :P * missing ',' * fix missing value * fix json fail * remove acidential added file * fix another json fail
2017-05-30 17:09:57 +03:00
// maxHeight attribute for the aux panel and the video
// therein
maxHeight: number,
// 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,
resizeNotifier: ResizeNotifier,
}
interface Counter {
title: string,
value: number,
link: string,
severity: string,
stateKey: string,
}
interface IState {
counters: Counter[],
}
@replaceableComponent("views.rooms.AuxPanel")
export default class AuxPanel extends React.Component<IProps, IState> {
2020-08-29 14:14:16 +03:00
static defaultProps = {
showApps: true,
2020-08-29 14:14:16 +03:00
};
constructor(props) {
super(props);
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() {
const cli = MatrixClientPeg.get();
if (SettingsStore.getValue("feature_state_counters")) {
2021-06-16 14:07:58 +03:00
cli.on("RoomState.events", this.rateLimitedUpdate);
}
2020-08-29 14:14:16 +03:00
}
2020-08-29 14:14:16 +03:00
componentWillUnmount() {
const cli = MatrixClientPeg.get();
if (cli && SettingsStore.getValue("feature_state_counters")) {
2021-06-16 14:07:58 +03:00
cli.removeListener("RoomState.events", this.rateLimitedUpdate);
}
2020-08-29 14:14:16 +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
}
2020-08-29 14:14:16 +03:00
componentDidUpdate(prevProps, prevState) {
// most changes are likely to cause a resize
if (this.props.onResize) {
this.props.onResize();
}
2020-08-29 14:14:16 +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);
2021-06-16 14:07:58 +03:00
private computeCounters() {
const counters = [];
2019-01-08 14:14:31 +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');
stateEvs.sort((a, b) => lexicographicCompare(a.getStateKey(), b.getStateKey()));
2019-01-08 14:14:31 +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();
// 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({
title,
value,
link,
severity,
stateKey,
2019-01-08 14:14:31 +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() {
const callView = (
<CallViewForRoom
roomId={this.props.room.roomId}
maxVideoHeight={this.props.maxHeight}
resizeNotifier={this.props.resizeNotifier}
/>
);
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}
/>;
}
let stateViews = null;
if (this.state.counters && SettingsStore.getValue("feature_state_counters")) {
const counters = [];
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;
let span = <span>{ title }: { value }</span>;
if (link) {
span = (
<a href={link} target="_blank" rel="noreferrer noopener">
{ span }
</a>
);
}
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}
> </span>,
);
});
if (counters.length > 0) {
counters.pop(); // remove last deliminator
stateViews = (
<div className="m_RoomView_auxPanel_stateViews">
{ counters }
</div>
);
}
}
const classes = classNames({
"mx_RoomView_auxPanel": true,
"mx_RoomView_auxPanel_fullHeight": this.props.fullHeight,
});
const style: React.CSSProperties = {};
if (!this.props.fullHeight) {
style.maxHeight = this.props.maxHeight;
}
return (
<AutoHideScrollbar className={classes} style={style}>
{ stateViews }
{ appsDrawer }
{ callView }
{ this.props.children }
</AutoHideScrollbar>
);
2020-08-29 14:14:16 +03:00
}
}