Expire video member events after 1 hour (#8776)
* Expire video member events after 1 hour * Iterate based on feedback * Validate the types of video member events better * Even more parentheses
This commit is contained in:
Robin
GitHub
parent
12dd5a7ef0
commit
d9396b0b54
12 changed files with 344 additions and 244 deletions
|
|
@ -19,8 +19,6 @@ import React, { createRef } from "react";
|
|||
import { Room, RoomEvent } from "matrix-js-sdk/src/models/room";
|
||||
import classNames from "classnames";
|
||||
import { logger } from "matrix-js-sdk/src/logger";
|
||||
import { RoomMember } from "matrix-js-sdk/src/models/room-member";
|
||||
import { RoomStateEvent } from "matrix-js-sdk/src/models/room-state";
|
||||
|
||||
import { RovingTabIndexWrapper } from "../../../accessibility/RovingTabIndex";
|
||||
import AccessibleButton, { ButtonEvent } from "../../views/elements/AccessibleButton";
|
||||
|
|
@ -50,19 +48,12 @@ import IconizedContextMenu, {
|
|||
IconizedContextMenuOptionList,
|
||||
IconizedContextMenuRadio,
|
||||
} from "../context_menus/IconizedContextMenu";
|
||||
import VideoChannelStore, { VideoChannelEvent, IJitsiParticipant } from "../../../stores/VideoChannelStore";
|
||||
import { getConnectedMembers } from "../../../utils/VideoChannelUtils";
|
||||
import PosthogTrackers from "../../../PosthogTrackers";
|
||||
import { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload";
|
||||
import { KeyBindingAction } from "../../../accessibility/KeyboardShortcuts";
|
||||
import { getKeyBindingsManager } from "../../../KeyBindingsManager";
|
||||
import { RoomViewStore } from "../../../stores/RoomViewStore";
|
||||
|
||||
enum VideoStatus {
|
||||
Disconnected,
|
||||
Connecting,
|
||||
Connected,
|
||||
}
|
||||
import VideoRoomSummary from "./VideoRoomSummary";
|
||||
|
||||
interface IProps {
|
||||
room: Room;
|
||||
|
|
@ -78,11 +69,6 @@ interface IState {
|
|||
notificationsMenuPosition: PartialDOMRect;
|
||||
generalMenuPosition: PartialDOMRect;
|
||||
messagePreview?: string;
|
||||
videoStatus: VideoStatus;
|
||||
// Active video channel members, according to room state
|
||||
videoMembers: Set<RoomMember>;
|
||||
// Active video channel members, according to Jitsi
|
||||
jitsiParticipants: IJitsiParticipant[];
|
||||
}
|
||||
|
||||
const messagePreviewId = (roomId: string) => `mx_RoomTile_messagePreview_${roomId}`;
|
||||
|
|
@ -105,26 +91,12 @@ export default class RoomTile extends React.PureComponent<IProps, IState> {
|
|||
constructor(props: IProps) {
|
||||
super(props);
|
||||
|
||||
let videoStatus;
|
||||
if (VideoChannelStore.instance.roomId === this.props.room.roomId) {
|
||||
if (VideoChannelStore.instance.connected) {
|
||||
videoStatus = VideoStatus.Connected;
|
||||
} else {
|
||||
videoStatus = VideoStatus.Connecting;
|
||||
}
|
||||
} else {
|
||||
videoStatus = VideoStatus.Disconnected;
|
||||
}
|
||||
|
||||
this.state = {
|
||||
selected: RoomViewStore.instance.getRoomId() === this.props.room.roomId,
|
||||
notificationsMenuPosition: null,
|
||||
generalMenuPosition: null,
|
||||
// generatePreview() will return nothing if the user has previews disabled
|
||||
messagePreview: "",
|
||||
videoStatus,
|
||||
videoMembers: getConnectedMembers(this.props.room, videoStatus === VideoStatus.Connected),
|
||||
jitsiParticipants: VideoChannelStore.instance.participants,
|
||||
};
|
||||
this.generatePreview();
|
||||
|
||||
|
|
@ -169,9 +141,6 @@ export default class RoomTile extends React.PureComponent<IProps, IState> {
|
|||
MessagePreviewStore.getPreviewChangedEventName(this.props.room),
|
||||
this.onRoomPreviewChanged,
|
||||
);
|
||||
prevProps.room?.currentState?.off(RoomStateEvent.Events, this.updateVideoMembers);
|
||||
this.props.room?.currentState?.on(RoomStateEvent.Events, this.updateVideoMembers);
|
||||
this.updateVideoStatus();
|
||||
prevProps.room?.off(RoomEvent.Name, this.onRoomNameUpdate);
|
||||
this.props.room?.on(RoomEvent.Name, this.onRoomNameUpdate);
|
||||
}
|
||||
|
|
@ -192,14 +161,6 @@ export default class RoomTile extends React.PureComponent<IProps, IState> {
|
|||
this.notificationState.on(NotificationStateEvents.Update, this.onNotificationUpdate);
|
||||
this.roomProps.on(PROPERTY_UPDATED, this.onRoomPropertyUpdate);
|
||||
this.props.room.on(RoomEvent.Name, this.onRoomNameUpdate);
|
||||
this.props.room.currentState.on(RoomStateEvent.Events, this.updateVideoMembers);
|
||||
|
||||
VideoChannelStore.instance.on(VideoChannelEvent.Connect, this.onConnectVideo);
|
||||
VideoChannelStore.instance.on(VideoChannelEvent.StartConnect, this.onStartConnectVideo);
|
||||
VideoChannelStore.instance.on(VideoChannelEvent.Disconnect, this.onDisconnectVideo);
|
||||
if (VideoChannelStore.instance.roomId === this.props.room.roomId) {
|
||||
VideoChannelStore.instance.on(VideoChannelEvent.Participants, this.updateJitsiParticipants);
|
||||
}
|
||||
}
|
||||
|
||||
public componentWillUnmount() {
|
||||
|
|
@ -209,14 +170,9 @@ export default class RoomTile extends React.PureComponent<IProps, IState> {
|
|||
this.onRoomPreviewChanged,
|
||||
);
|
||||
this.props.room.off(RoomEvent.Name, this.onRoomNameUpdate);
|
||||
this.props.room.currentState.off(RoomStateEvent.Events, this.updateVideoMembers);
|
||||
defaultDispatcher.unregister(this.dispatcherRef);
|
||||
this.notificationState.off(NotificationStateEvents.Update, this.onNotificationUpdate);
|
||||
this.roomProps.off(PROPERTY_UPDATED, this.onRoomPropertyUpdate);
|
||||
|
||||
VideoChannelStore.instance.off(VideoChannelEvent.Connect, this.onConnectVideo);
|
||||
VideoChannelStore.instance.off(VideoChannelEvent.StartConnect, this.onStartConnectVideo);
|
||||
VideoChannelStore.instance.off(VideoChannelEvent.Disconnect, this.onDisconnectVideo);
|
||||
}
|
||||
|
||||
private onAction = (payload: ActionPayload) => {
|
||||
|
|
@ -591,54 +547,6 @@ export default class RoomTile extends React.PureComponent<IProps, IState> {
|
|||
);
|
||||
}
|
||||
|
||||
private updateVideoMembers = () => {
|
||||
this.setState(state => ({
|
||||
videoMembers: getConnectedMembers(this.props.room, state.videoStatus === VideoStatus.Connected),
|
||||
}));
|
||||
};
|
||||
|
||||
private updateVideoStatus = () => {
|
||||
if (VideoChannelStore.instance.roomId === this.props.room?.roomId) {
|
||||
if (VideoChannelStore.instance.connected) {
|
||||
this.onConnectVideo(this.props.room?.roomId);
|
||||
} else {
|
||||
this.onStartConnectVideo(this.props.room?.roomId);
|
||||
}
|
||||
} else {
|
||||
this.onDisconnectVideo(this.props.room?.roomId);
|
||||
}
|
||||
};
|
||||
|
||||
private onConnectVideo = (roomId: string) => {
|
||||
if (roomId === this.props.room?.roomId) {
|
||||
this.setState({
|
||||
videoStatus: VideoStatus.Connected,
|
||||
videoMembers: getConnectedMembers(this.props.room, true),
|
||||
});
|
||||
VideoChannelStore.instance.on(VideoChannelEvent.Participants, this.updateJitsiParticipants);
|
||||
}
|
||||
};
|
||||
|
||||
private onStartConnectVideo = (roomId: string) => {
|
||||
if (roomId === this.props.room?.roomId) {
|
||||
this.setState({ videoStatus: VideoStatus.Connecting });
|
||||
}
|
||||
};
|
||||
|
||||
private onDisconnectVideo = (roomId: string) => {
|
||||
if (roomId === this.props.room?.roomId) {
|
||||
this.setState({
|
||||
videoStatus: VideoStatus.Disconnected,
|
||||
videoMembers: getConnectedMembers(this.props.room, false),
|
||||
});
|
||||
VideoChannelStore.instance.off(VideoChannelEvent.Participants, this.updateJitsiParticipants);
|
||||
}
|
||||
};
|
||||
|
||||
private updateJitsiParticipants = (roomId: string, participants: IJitsiParticipant[]) => {
|
||||
this.setState({ jitsiParticipants: participants });
|
||||
};
|
||||
|
||||
public render(): React.ReactElement {
|
||||
const classes = classNames({
|
||||
'mx_RoomTile': true,
|
||||
|
|
@ -667,46 +575,9 @@ export default class RoomTile extends React.PureComponent<IProps, IState> {
|
|||
|
||||
let subtitle;
|
||||
if (this.isVideoRoom) {
|
||||
let videoText: string;
|
||||
let videoActive: boolean;
|
||||
let participantCount: number;
|
||||
|
||||
switch (this.state.videoStatus) {
|
||||
case VideoStatus.Disconnected:
|
||||
videoText = _t("Video");
|
||||
videoActive = false;
|
||||
participantCount = this.state.videoMembers.size;
|
||||
break;
|
||||
case VideoStatus.Connecting:
|
||||
videoText = _t("Joining…");
|
||||
videoActive = true;
|
||||
participantCount = this.state.videoMembers.size;
|
||||
break;
|
||||
case VideoStatus.Connected:
|
||||
videoText = _t("Joined");
|
||||
videoActive = true;
|
||||
participantCount = this.state.jitsiParticipants.length;
|
||||
}
|
||||
|
||||
subtitle = (
|
||||
<div className="mx_RoomTile_subtitle">
|
||||
<span
|
||||
className={classNames({
|
||||
"mx_RoomTile_videoIndicator": true,
|
||||
"mx_RoomTile_videoIndicator_active": videoActive,
|
||||
})}
|
||||
>
|
||||
{ videoText }
|
||||
</span>
|
||||
{ participantCount ? <>
|
||||
{ " · " }
|
||||
<span
|
||||
className="mx_RoomTile_videoParticipants"
|
||||
aria-label={_t("%(count)s participants", { count: participantCount })}
|
||||
>
|
||||
{ participantCount }
|
||||
</span>
|
||||
</> : null }
|
||||
<VideoRoomSummary room={this.props.room} />
|
||||
</div>
|
||||
);
|
||||
} else if (this.showMessagePreview && this.state.messagePreview) {
|
||||
|
|
|
|||
81
src/components/views/rooms/VideoRoomSummary.tsx
Normal file
81
src/components/views/rooms/VideoRoomSummary.tsx
Normal file
|
|
@ -0,0 +1,81 @@
|
|||
/*
|
||||
Copyright 2022 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, { FC } from "react";
|
||||
import classNames from "classnames";
|
||||
import { Room } from "matrix-js-sdk/src/models/room";
|
||||
|
||||
import { _t, TranslatedString } from "../../../languageHandler";
|
||||
import {
|
||||
ConnectionState,
|
||||
useConnectionState,
|
||||
useConnectedMembers,
|
||||
useJitsiParticipants,
|
||||
} from "../../../utils/VideoChannelUtils";
|
||||
|
||||
interface IProps {
|
||||
room: Room;
|
||||
}
|
||||
|
||||
const VideoRoomSummary: FC<IProps> = ({ room }) => {
|
||||
const connectionState = useConnectionState(room);
|
||||
const videoMembers = useConnectedMembers(room, connectionState === ConnectionState.Connected);
|
||||
const jitsiParticipants = useJitsiParticipants(room);
|
||||
|
||||
let indicator: TranslatedString;
|
||||
let active: boolean;
|
||||
let participantCount: number;
|
||||
|
||||
switch (connectionState) {
|
||||
case ConnectionState.Disconnected:
|
||||
indicator = _t("Video");
|
||||
active = false;
|
||||
participantCount = videoMembers.size;
|
||||
break;
|
||||
case ConnectionState.Connecting:
|
||||
indicator = _t("Joining…");
|
||||
active = true;
|
||||
participantCount = videoMembers.size;
|
||||
break;
|
||||
case ConnectionState.Connected:
|
||||
indicator = _t("Joined");
|
||||
active = true;
|
||||
participantCount = jitsiParticipants.length;
|
||||
break;
|
||||
}
|
||||
|
||||
return <span className="mx_VideoRoomSummary">
|
||||
<span
|
||||
className={classNames(
|
||||
"mx_VideoRoomSummary_indicator",
|
||||
{ "mx_VideoRoomSummary_indicator_active": active },
|
||||
)}
|
||||
>
|
||||
{ indicator }
|
||||
</span>
|
||||
{ participantCount ? <>
|
||||
{ " · " }
|
||||
<span
|
||||
className="mx_VideoRoomSummary_participants"
|
||||
aria-label={_t("%(count)s participants", { count: participantCount })}
|
||||
>
|
||||
{ participantCount }
|
||||
</span>
|
||||
</> : null }
|
||||
</span>;
|
||||
};
|
||||
|
||||
export default VideoRoomSummary;
|
||||
Loading…
Add table
Add a link
Reference in a new issue