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

27
src/components/structures/RoomView.tsx
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}

6
src/components/structures/SpaceRoomView.tsx
View file

@ -58,7 +58,7 @@ import {
} from "../../utils/space";
import SpaceHierarchy, { showRoom } from "./SpaceHierarchy";
import MemberAvatar from "../views/avatars/MemberAvatar";
import FacePile from "../views/elements/FacePile";
import RoomFacePile from "../views/elements/RoomFacePile";
import {
AddExistingToSpace,
defaultDmsRenderer,
@ -298,7 +298,7 @@ const SpacePreview = ({ space, onJoinButtonClicked, onRejectButtonClicked }: ISp
</div>
}
</RoomTopic>
{ space.getJoinRule() === "public" && <FacePile room={space} /> }
{ space.getJoinRule() === "public" && <RoomFacePile room={space} /> }
<div className="mx_SpaceRoomView_preview_joinButtons">
{ joinButtons }
</div>
@ -454,7 +454,7 @@ const SpaceLanding = ({ space }: { space: Room }) => {
<div className="mx_SpaceRoomView_landing_infoBar">
<SpaceInfo space={space} />
<div className="mx_SpaceRoomView_landing_infoBar_interactive">
<FacePile room={space} onlyKnownUsers={false} numShown={7} onClick={onMembersClick} />
<RoomFacePile room={space} onlyKnownUsers={false} numShown={7} onClick={onMembersClick} />
{ inviteButton }
{ settingsButton }
</div>

67
src/components/structures/VideoRoomView.tsx Normal file
View file

@ -0,0 +1,67 @@
/*
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, useContext, useState, useMemo } from "react";
import { logger } from "matrix-js-sdk/src/logger";
import { Room } from "matrix-js-sdk/src/models/room";
import MatrixClientContext from "../../contexts/MatrixClientContext";
import { useEventEmitter } from "../../hooks/useEventEmitter";
import { getVideoChannel } from "../../utils/VideoChannelUtils";
import WidgetStore from "../../stores/WidgetStore";
import { UPDATE_EVENT } from "../../stores/AsyncStore";
import VideoChannelStore, { VideoChannelEvent } from "../../stores/VideoChannelStore";
import AppTile from "../views/elements/AppTile";
import VideoLobby from "../views/voip/VideoLobby";
const VideoRoomView: FC<{ room: Room, resizing: boolean }> = ({ room, resizing }) => {
const cli = useContext(MatrixClientContext);
const store = VideoChannelStore.instance;
// In case we mount before the WidgetStore knows about our Jitsi widget
const [widgetLoaded, setWidgetLoaded] = useState(false);
useEventEmitter(WidgetStore.instance, UPDATE_EVENT, (roomId: string) => {
if (roomId === null || roomId === room.roomId) setWidgetLoaded(true);
});
const app = useMemo(() => {
const app = getVideoChannel(room.roomId);
if (!app) logger.warn(`No video channel for room ${room.roomId}`);
return app;
}, [room, widgetLoaded]); // eslint-disable-line react-hooks/exhaustive-deps
const [connected, setConnected] = useState(store.connected && store.roomId === room.roomId);
useEventEmitter(store, VideoChannelEvent.Connect, () => setConnected(store.roomId === room.roomId));
useEventEmitter(store, VideoChannelEvent.Disconnect, () => setConnected(false));
if (!app) return null;
return <div className="mx_VideoRoomView">
{ connected ? null : <VideoLobby room={room} /> }
{ /* We render the widget even if we're disconnected, so it stays loaded */ }
<AppTile
app={app}
room={room}
userId={cli.credentials.userId}
creatorUserId={app.creatorUserId}
waitForIframeLoad={app.waitForIframeLoad}
showMenubar={false}
pointerEvents={resizing ? "none" : null}
/>
</div>;
};
export default VideoRoomView;