- { badge }
+
+
+ { nameContainer }
+
+ { badge }
+
+
diff --git a/src/components/views/rooms/RoomTile.tsx b/src/components/views/rooms/RoomTile.tsx
index dababf8e75b..35101410439 100644
--- a/src/components/views/rooms/RoomTile.tsx
+++ b/src/components/views/rooms/RoomTile.tsx
@@ -25,12 +25,15 @@ import AccessibleButton, { ButtonEvent } from "../../views/elements/AccessibleBu
import dis from '../../../dispatcher/dispatcher';
import defaultDispatcher from '../../../dispatcher/dispatcher';
import { Action } from "../../../dispatcher/actions";
+import SettingsStore from "../../../settings/SettingsStore";
import ActiveRoomObserver from "../../../ActiveRoomObserver";
import { _t } from "../../../languageHandler";
import { ChevronFace, ContextMenuTooltipButton } from "../../structures/ContextMenu";
import { DefaultTagID, TagID } from "../../../stores/room-list/models";
import { MessagePreviewStore } from "../../../stores/room-list/MessagePreviewStore";
+import BaseAvatar from "../avatars/BaseAvatar";
import DecoratedRoomAvatar from "../avatars/DecoratedRoomAvatar";
+import FacePile from "../elements/FacePile";
import { RoomNotifState } from "../../../RoomNotifs";
import { MatrixClientPeg } from "../../../MatrixClientPeg";
import NotificationBadge from "./NotificationBadge";
@@ -50,12 +53,19 @@ import IconizedContextMenu, {
IconizedContextMenuRadio,
} from "../context_menus/IconizedContextMenu";
import { CommunityPrototypeStore, IRoomProfile } from "../../../stores/CommunityPrototypeStore";
+import VoiceChannelStore, { VoiceChannelEvent, IJitsiParticipant } from "../../../stores/VoiceChannelStore";
import { replaceableComponent } from "../../../utils/replaceableComponent";
import PosthogTrackers from "../../../PosthogTrackers";
import { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload";
import { KeyBindingAction } from "../../../accessibility/KeyboardShortcuts";
import { getKeyBindingsManager } from "../../../KeyBindingsManager";
+enum VoiceConnectionState {
+ Disconnected,
+ Connecting,
+ Connected,
+}
+
interface IProps {
room: Room;
showMessagePreview: boolean;
@@ -70,6 +80,8 @@ interface IState {
notificationsMenuPosition: PartialDOMRect;
generalMenuPosition: PartialDOMRect;
messagePreview?: string;
+ voiceConnectionState: VoiceConnectionState;
+ voiceParticipants: IJitsiParticipant[];
}
const messagePreviewId = (roomId: string) => `mx_RoomTile_messagePreview_${roomId}`;
@@ -88,6 +100,7 @@ export default class RoomTile extends React.PureComponent
{
private roomTileRef = createRef();
private notificationState: NotificationState;
private roomProps: RoomEchoChamber;
+ private isVoiceRoom: boolean;
constructor(props: IProps) {
super(props);
@@ -96,14 +109,17 @@ export default class RoomTile extends React.PureComponent {
selected: ActiveRoomObserver.activeRoomId === this.props.room.roomId,
notificationsMenuPosition: null,
generalMenuPosition: null,
-
// generatePreview() will return nothing if the user has previews disabled
messagePreview: "",
+ voiceConnectionState: VoiceChannelStore.instance.roomId === this.props.room.roomId ?
+ VoiceConnectionState.Connected : VoiceConnectionState.Disconnected,
+ voiceParticipants: [],
};
this.generatePreview();
this.notificationState = RoomNotificationStateStore.instance.getRoomState(this.props.room);
this.roomProps = EchoChamber.forRoom(this.props.room);
+ this.isVoiceRoom = SettingsStore.getValue("feature_voice_rooms") && this.props.room.isCallRoom();
}
private onRoomNameUpdate = (room: Room) => {
@@ -238,7 +254,7 @@ export default class RoomTile extends React.PureComponent {
});
};
- private onTileClick = (ev: React.KeyboardEvent) => {
+ private onTileClick = async (ev: React.KeyboardEvent) => {
ev.preventDefault();
ev.stopPropagation();
@@ -252,6 +268,11 @@ export default class RoomTile extends React.PureComponent {
metricsTrigger: "RoomList",
metricsViaKeyboard: ev.type !== "click",
});
+
+ // Connect to the voice channel if this is a voice room
+ if (this.isVoiceRoom && this.state.voiceConnectionState === VoiceConnectionState.Disconnected) {
+ await this.connectVoice();
+ }
};
private onActiveRoomUpdate = (isActive: boolean) => {
@@ -576,6 +597,68 @@ export default class RoomTile extends React.PureComponent {
);
}
+ private updateVoiceParticipants = (participants: IJitsiParticipant[]) => {
+ this.setState({ voiceParticipants: participants });
+ };
+
+ private renderVoiceChannel(): React.ReactElement {
+ if (!this.state.voiceParticipants.length) return null;
+
+ const faces = this.state.voiceParticipants.map(p =>
+ ,
+ );
+
+ // TODO: The below "join" button will eventually show up on text rooms
+ // with an active voice channel, but that isn't implemented yet
+ return
+
+ { this.isVoiceRoom ? null : (
+
+ { _t("Join") }
+
+ ) }
+
+ { _t("Voice room") }
+
+ );
+ break;
+ case VoiceConnectionState.Connecting:
+ subtitle = (
+
+ { _t("Connecting...") }
+
+ );
+ break;
+ case VoiceConnectionState.Connected:
+ subtitle = (
+
+ { _t("Connected") }
+
+ );
+ }
+ } else if (this.showMessagePreview && this.state.messagePreview) {
+ subtitle = (
@@ -620,21 +731,20 @@ export default class RoomTile extends React.PureComponent
{
);
}
- const nameClasses = classNames({
- "mx_RoomTile_name": true,
- "mx_RoomTile_nameWithPreview": !!messagePreview,
- "mx_RoomTile_nameHasUnreadEvents": this.notificationState.isUnread,
+ const titleClasses = classNames({
+ "mx_RoomTile_title": true,
+ "mx_RoomTile_titleWithSubtitle": !!subtitle,
+ "mx_RoomTile_titleHasUnreadEvents": this.notificationState.isUnread,
});
- let nameContainer = (
-
-
+ const titleContainer = this.props.isMinimized ? null : (
+
+
{ name }
- { messagePreview }
+ { subtitle }
);
- if (this.props.isMinimized) nameContainer = null;
let ariaLabel = name;
// The following labels are written in such a fashion to increase screen reader efficiency (speed).
@@ -690,10 +800,15 @@ export default class RoomTile extends React.PureComponent
{
oobData={({ avatarUrl: roomProfile.avatarMxc })}
tooltipProps={{ tabIndex: isActive ? 0 : -1 }}
/>
- { nameContainer }
- { badge }
- { this.renderGeneralMenu() }
- { this.renderNotificationsMenu(isActive) }
+
+
+ { titleContainer }
+ { badge }
+ { this.renderGeneralMenu() }
+ { this.renderNotificationsMenu(isActive) }
+
+ { this.renderVoiceChannel() }
+
+
+
+
+
{ _t("Connected") }
+
{ room.name }
+
+
store.disconnect()}
+ />
+
+
+
videoMuted ? store.unmuteVideo() : store.muteVideo()}
+ >
+ { videoMuted ? _t("Video off") : _t("Video") }
+
+
audioMuted ? store.unmuteAudio() : store.muteAudio()}
+ >
+ { audioMuted ? _t("Mic off") : _t("Mic") }
+
+
+