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

Show a lobby screen in video rooms (#8287)

Browse source 
* Show a lobby screen in video rooms

* Add connecting state

* Test VideoRoomView

* Test VideoLobby

* Get the local video stream with useAsyncMemo

* Clean up code review nits

* Explicitly state what !important is overriding

* Use spacing variables

* Wait for video channel messaging

* Update join button copy

* Show frame on both the lobby and widget

* Force dark theme for video lobby

* Wait for the widget to be ready

* Make VideoChannelStore constructor private

* Allow video lobby to shrink

* Add invite button to video room header

* Show connected members on lobby screen

* Make avatars in video lobby clickable

* Increase video channel store timeout

* Fix Jitsi Meet getting wedged on startup in Chrome and Safari

* Revert "Fix Jitsi Meet getting wedged on startup in Chrome and Safari"

This reverts commit 9f77b8c227c1a5bffa5d91b0c48bf3bbc44d4cec.

* Disable device buttons while connecting

* Factor RoomFacePile into a separate file

* Fix i18n lint

* Fix switching video channels while connected

* Properly limit number of connected members in face pile

* Fix CSS lint
This commit is contained in:
Robin 2022-04-20 11:03:33 -04:00 • committed by GitHub
parent 9a065581e5
commit 6e86a14cc9
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
30 changed files with 1338 additions and 267 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -61,6 +61,7 @@ import { RoomViewStore } from "../../../stores/RoomViewStore";
enum VideoStatus {
Disconnected,
Connecting,
Connected,
}
@ -105,7 +106,16 @@ export default class RoomTile extends React.PureComponent<IProps, IState> {
constructor(props: IProps) {
super(props);
const videoConnected = VideoChannelStore.instance.roomId === this.props.room.roomId;
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,
@ -113,9 +123,9 @@ export default class RoomTile extends React.PureComponent<IProps, IState> {
generalMenuPosition: null,
// generatePreview() will return nothing if the user has previews disabled
messagePreview: "",
videoStatus: videoConnected ? VideoStatus.Connected : VideoStatus.Disconnected,
videoStatus,
videoMembers: getConnectedMembers(this.props.room.currentState),
jitsiParticipants: videoConnected ? VideoChannelStore.instance.participants : [],
jitsiParticipants: VideoChannelStore.instance.participants,
};
this.generatePreview();
@ -185,8 +195,9 @@ export default class RoomTile extends React.PureComponent<IProps, IState> {
this.props.room.on(RoomEvent.Name, this.onRoomNameUpdate);
this.props.room.currentState.on(RoomStateEvent.Events, this.updateVideoMembers);
VideoChannelStore.instance.on(VideoChannelEvent.Connect, this.updateVideoStatus);
VideoChannelStore.instance.on(VideoChannelEvent.Disconnect, this.updateVideoStatus);
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);
}
@ -204,8 +215,9 @@ export default class RoomTile extends React.PureComponent<IProps, IState> {
this.notificationState.off(NotificationStateEvents.Update, this.onNotificationUpdate);
this.roomProps.off(PROPERTY_UPDATED, this.onRoomPropertyUpdate);
VideoChannelStore.instance.off(VideoChannelEvent.Connect, this.updateVideoStatus);
VideoChannelStore.instance.off(VideoChannelEvent.Disconnect, this.updateVideoStatus);
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) => {
@ -586,15 +598,37 @@ export default class RoomTile extends React.PureComponent<IProps, IState> {
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 });
VideoChannelStore.instance.on(VideoChannelEvent.Participants, this.updateJitsiParticipants);
} else {
}
};
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 });
VideoChannelStore.instance.off(VideoChannelEvent.Participants, this.updateJitsiParticipants);
}
};
private updateJitsiParticipants = (participants: IJitsiParticipant[]) => {
private updateJitsiParticipants = (roomId: string, participants: IJitsiParticipant[]) => {
this.setState({ jitsiParticipants: participants });
};
@ -636,6 +670,11 @@ export default class RoomTile extends React.PureComponent<IProps, IState> {
videoActive = false;
participantCount = this.state.videoMembers.length;
break;
case VideoStatus.Connecting:
videoText = _t("Connecting...");
videoActive = true;
participantCount = this.state.videoMembers.length;
break;
case VideoStatus.Connected:
videoText = _t("Connected");
videoActive = true;