Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Commit

Permalink
Expire video member events after 1 hour (#8776)
Browse files Browse the repository at this point in the history
* Expire video member events after 1 hour

* Iterate based on feedback

* Validate the types of video member events better

* Even more parentheses
  • Loading branch information
robintown authored Jun 9, 2022
1 parent 12dd5a7 commit d9396b0
Show file tree
Hide file tree
Showing 12 changed files with 344 additions and 244 deletions.
1 change: 1 addition & 0 deletions res/css/_components.scss
Original file line number Diff line number Diff line change
Expand Up @@ -275,6 +275,7 @@
@import "./views/rooms/_ThreadSummary.scss";
@import "./views/rooms/_TopUnreadMessagesBar.scss";
@import "./views/rooms/_VoiceRecordComposerTile.scss";
@import "./views/rooms/_VideoRoomSummary.scss";
@import "./views/rooms/_WhoIsTypingTile.scss";
@import "./views/settings/_AvatarSetting.scss";
@import "./views/settings/_CrossSigningPanel.scss";
Expand Down
34 changes: 0 additions & 34 deletions res/css/views/rooms/_RoomTile.scss
Original file line number Diff line number Diff line change
Expand Up @@ -75,40 +75,6 @@ limitations under the License.
.mx_RoomTile_subtitle {
line-height: $font-18px;
color: $secondary-content;

.mx_RoomTile_videoIndicator {
&::before {
display: inline-block;
vertical-align: text-bottom;
content: '';
background-color: $secondary-content;
mask-image: url('$(res)/img/element-icons/call/video-call.svg');
mask-size: 16px;
width: 16px;
height: 16px;
margin-right: 4px;
}

&.mx_RoomTile_videoIndicator_active {
color: $accent;

&::before {
background-color: $accent;
}
}
}

.mx_RoomTile_videoParticipants::before {
display: inline-block;
vertical-align: text-bottom;
content: '';
background-color: $secondary-content;
mask-image: url('$(res)/img/element-icons/group-members.svg');
mask-size: 16px;
width: 16px;
height: 16px;
margin-right: 2px;
}
}

.mx_RoomTile_titleWithSubtitle {
Expand Down
51 changes: 51 additions & 0 deletions res/css/views/rooms/_VideoRoomSummary.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
/*
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.
*/

.mx_VideoRoomSummary {
.mx_VideoRoomSummary_indicator {
&::before {
display: inline-block;
vertical-align: text-bottom;
content: '';
background-color: $secondary-content;
mask-image: url('$(res)/img/element-icons/call/video-call.svg');
mask-size: 16px;
width: 16px;
height: 16px;
margin-right: 4px;
}

&.mx_VideoRoomSummary_indicator_active {
color: $accent;

&::before {
background-color: $accent;
}
}
}

.mx_VideoRoomSummary_participants::before {
display: inline-block;
vertical-align: text-bottom;
content: '';
background-color: $secondary-content;
mask-image: url('$(res)/img/element-icons/group-members.svg');
mask-size: 16px;
width: 16px;
height: 16px;
margin-right: 2px;
}
}
133 changes: 2 additions & 131 deletions src/components/views/rooms/RoomTile.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -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;
Expand All @@ -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}`;
Expand All @@ -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();

Expand Down Expand Up @@ -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);
}
Expand All @@ -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() {
Expand All @@ -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) => {
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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) {
Expand Down
81 changes: 81 additions & 0 deletions src/components/views/rooms/VideoRoomSummary.tsx
Original file line number Diff line number Diff line change
@@ -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

0 comments on commit d9396b0

Please sign in to comment.