Show a lobby screen in video rooms (#8287)

* 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

View file

@ -75,8 +75,7 @@ import EffectsOverlay from "../views/elements/EffectsOverlay";
import { containsEmoji } from '../../effects/utils';
import { CHAT_EFFECTS } from '../../effects';
import WidgetStore from "../../stores/WidgetStore";
import { getVideoChannel } from "../../utils/VideoChannelUtils";
import AppTile from "../views/elements/AppTile";
import VideoRoomView from "./VideoRoomView";
import { UPDATE_EVENT } from "../../stores/AsyncStore";
import Notifier from "../../Notifier";
import { showToast as showNotificationsToast } from "../../toasts/DesktopNotificationsToast";
@ -1249,7 +1248,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
}
};
private onInviteButtonClick = () => {
private onInviteClick = () => {
// open the room inviter
dis.dispatch({
action: 'view_invite',
@ -1904,7 +1903,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
statusBar = <RoomStatusBar
room={this.state.room}
isPeeking={myMembership !== "join"}
onInviteClick={this.onInviteButtonClick}
onInviteClick={this.onInviteClick}
onVisible={this.onStatusBarVisible}
onHidden={this.onStatusBarHidden}
/>;
@ -2169,18 +2168,11 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
</>;
break;
case MainSplitContentType.Video: {
const app = getVideoChannel(this.state.room.roomId);
if (!app) break;
mainSplitContentClassName = "mx_MainSplit_video";
mainSplitBody = <AppTile
app={app}
room={this.state.room}
userId={this.context.credentials.userId}
creatorUserId={app.creatorUserId}
waitForIframeLoad={app.waitForIframeLoad}
showMenubar={false}
pointerEvents={this.state.resizing ? "none" : null}
/>;
mainSplitBody = <>
<VideoRoomView room={this.state.room} resizing={this.state.resizing} />
{ previewBar }
</>;
}
}
const mainSplitContentClasses = classNames("mx_RoomView_body", mainSplitContentClassName);
@ -2190,6 +2182,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
let onAppsClick = this.onAppsClick;
let onForgetClick = this.onForgetClick;
let onSearchClick = this.onSearchClick;
let onInviteClick = null;
// Simplify the header for other main split types
switch (this.state.mainSplitContentType) {
@ -2212,6 +2205,9 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
onAppsClick = null;
onForgetClick = null;
onSearchClick = null;
if (this.state.room.canInvite(this.context.credentials.userId)) {
onInviteClick = this.onInviteClick;
}
}
return (
@ -2227,6 +2223,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
oobData={this.props.oobData}
inRoom={myMembership === 'join'}
onSearchClick={onSearchClick}
onInviteClick={onInviteClick}
onForgetClick={(myMembership === "leave") ? onForgetClick : null}
e2eStatus={this.state.e2eStatus}
onAppsClick={this.state.hasPinnedWidgets ? onAppsClick : null}