imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add local echo of connected devices in video rooms (#8368)

Browse source
This commit is contained in:
Robin 2022-04-21 07:41:38 -04:00 • committed by GitHub
parent 5d6143aaa7
commit c83ad1faa7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 126 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

22
src/components/views/rooms/RoomTile.tsx
View file

@ -81,7 +81,7 @@ interface IState {
messagePreview?: string;
videoStatus: VideoStatus;
// Active video channel members, according to room state
videoMembers: RoomMember[];
videoMembers: Set<RoomMember>;
// Active video channel members, according to Jitsi
jitsiParticipants: IJitsiParticipant[];
}
@ -124,7 +124,7 @@ export default class RoomTile extends React.PureComponent<IProps, IState> {
// generatePreview() will return nothing if the user has previews disabled
messagePreview: "",
videoStatus,
videoMembers: getConnectedMembers(this.props.room.currentState),
videoMembers: getConnectedMembers(this.props.room, videoStatus === VideoStatus.Connected),
jitsiParticipants: VideoChannelStore.instance.participants,
};
this.generatePreview();
@ -593,7 +593,9 @@ export default class RoomTile extends React.PureComponent<IProps, IState> {
}
private updateVideoMembers = () => {
this.setState({ videoMembers: getConnectedMembers(this.props.room.currentState) });
this.setState(state => ({
videoMembers: getConnectedMembers(this.props.room, state.videoStatus === VideoStatus.Connected),
}));
};
private updateVideoStatus = () => {
@ -610,7 +612,10 @@ export default class RoomTile extends React.PureComponent<IProps, IState> {
private onConnectVideo = (roomId: string) => {
if (roomId === this.props.room?.roomId) {
this.setState({ videoStatus: VideoStatus.Connected });
this.setState({
videoStatus: VideoStatus.Connected,
videoMembers: getConnectedMembers(this.props.room, true),
});
VideoChannelStore.instance.on(VideoChannelEvent.Participants, this.updateJitsiParticipants);
}
};
@ -623,7 +628,10 @@ export default class RoomTile extends React.PureComponent<IProps, IState> {
private onDisconnectVideo = (roomId: string) => {
if (roomId === this.props.room?.roomId) {
this.setState({ videoStatus: VideoStatus.Disconnected });
this.setState({
videoStatus: VideoStatus.Disconnected,
videoMembers: getConnectedMembers(this.props.room, false),
});
VideoChannelStore.instance.off(VideoChannelEvent.Participants, this.updateJitsiParticipants);
}
};
@ -668,12 +676,12 @@ export default class RoomTile extends React.PureComponent<IProps, IState> {
case VideoStatus.Disconnected:
videoText = _t("Video");
videoActive = false;
participantCount = this.state.videoMembers.length;
participantCount = this.state.videoMembers.size;
break;
case VideoStatus.Connecting:
videoText = _t("Connecting...");
videoActive = true;
participantCount = this.state.videoMembers.length;
participantCount = this.state.videoMembers.size;
break;
case VideoStatus.Connected:
videoText = _t("Connected");

10
src/components/views/voip/VideoLobby.tsx
View file

@ -110,7 +110,7 @@ const MAX_FACES = 8;
const VideoLobby: FC<{ room: Room }> = ({ room }) => {
const [connecting, setConnecting] = useState(false);
const me = useMemo(() => room.getMember(room.myUserId), [room]);
const connectedMembers = useConnectedMembers(room.currentState);
const connectedMembers = useConnectedMembers(room, false);
const videoRef = useRef<HTMLVideoElement>();
const devices = useAsyncMemo(async () => {
@ -172,12 +172,12 @@ const VideoLobby: FC<{ room: Room }> = ({ room }) => {
};
let facePile;
if (connectedMembers.length) {
const shownMembers = connectedMembers.slice(0, MAX_FACES);
const overflow = connectedMembers.length > shownMembers.length;
if (connectedMembers.size) {
const shownMembers = [...connectedMembers].slice(0, MAX_FACES);
const overflow = connectedMembers.size > shownMembers.length;
facePile = <div className="mx_VideoLobby_connectedMembers">
{ _t("%(count)s people connected", { count: connectedMembers.length }) }
{ _t("%(count)s people connected", { count: connectedMembers.size }) }
<FacePile members={shownMembers} faceSize={24} overflow={overflow} />
</div>;
}

38
src/utils/VideoChannelUtils.ts
View file

@ -17,7 +17,8 @@ limitations under the License.
import { useState } from "react";
import { throttle } from "lodash";
import { CallType } from "matrix-js-sdk/src/webrtc/call";
import { RoomState, RoomStateEvent } from "matrix-js-sdk/src/models/room-state";
import { Room } from "matrix-js-sdk/src/models/room";
import { RoomStateEvent } from "matrix-js-sdk/src/models/room-state";
import { RoomMember } from "matrix-js-sdk/src/models/room-member";
import { useTypedEventEmitter } from "../hooks/useEventEmitter";
@ -42,17 +43,32 @@ export const addVideoChannel = async (roomId: string, roomName: string) => {
await WidgetUtils.addJitsiWidget(roomId, CallType.Video, "Video channel", VIDEO_CHANNEL, roomName);
};
export const getConnectedMembers = (state: RoomState): RoomMember[] =>
state.getStateEvents(VIDEO_CHANNEL_MEMBER)
// Must have a device connected and still be joined to the room
.filter(e => e.getContent<IVideoChannelMemberContent>()?.devices?.length)
.map(e => state.getMember(e.getStateKey()))
.filter(member => member?.membership === "join");
export const getConnectedMembers = (room: Room, connectedLocalEcho: boolean): Set<RoomMember> => {
const members = new Set<RoomMember>();
export const useConnectedMembers = (state: RoomState, throttleMs = 100) => {
const [members, setMembers] = useState<RoomMember[]>(getConnectedMembers(state));
useTypedEventEmitter(state, RoomStateEvent.Update, throttle(() => {
setMembers(getConnectedMembers(state));
for (const e of room.currentState.getStateEvents(VIDEO_CHANNEL_MEMBER)) {
const member = room.getMember(e.getStateKey());
let devices = e.getContent<IVideoChannelMemberContent>()?.devices ?? [];
// Apply local echo for the disconnected case
if (!connectedLocalEcho && member?.userId === room.client.getUserId()) {
devices = devices.filter(d => d !== room.client.getDeviceId());
}
// Must have a device connected and still be joined to the room
if (devices.length && member?.membership === "join") members.add(member);
}
// Apply local echo for the connected case
if (connectedLocalEcho) members.add(room.getMember(room.client.getUserId()));
return members;
};
export const useConnectedMembers = (
room: Room, connectedLocalEcho: boolean, throttleMs = 100,
): Set<RoomMember> => {
const [members, setMembers] = useState<Set<RoomMember>>(getConnectedMembers(room, connectedLocalEcho));
useTypedEventEmitter(room.currentState, RoomStateEvent.Update, throttle(() => {
setMembers(getConnectedMembers(room, connectedLocalEcho));
}, throttleMs, { leading: true, trailing: true }));
return members;
};