Update video rooms to new design specs (#8207)

* Remove radio component

* "Voice room" → "video room"

* Remove interactivity from video room tiles

* Update connection state when joining via widget

* Simplify room header buttons for video rooms

* Split out video room creation into a separate menu option

* Simplify room options for video rooms

* Update video room tile layout

* Tell the Jitsi widget whether it's a video channel

* Update tests

* "Voice" → "video" in more places

* Fix tests

* Re-add frame to immersive Jitsi widgets

* Comment ack

* Make updateDevices more readable

* Type FacePile
This commit is contained in:
Robin 2022-04-01 10:36:10 -04:00 committed by GitHub
parent 020c1c6f31
commit 1f64835fab
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
38 changed files with 798 additions and 1305 deletions

View file

@ -15,7 +15,7 @@ limitations under the License.
*/
import React, { RefObject, useContext, useRef, useState } from "react";
import { EventType } from "matrix-js-sdk/src/@types/event";
import { EventType, RoomType } from "matrix-js-sdk/src/@types/event";
import { JoinRule, Preset } from "matrix-js-sdk/src/@types/partials";
import { Room, RoomEvent } from "matrix-js-sdk/src/models/room";
import { logger } from "matrix-js-sdk/src/logger";
@ -29,6 +29,7 @@ import RoomTopic from "../views/elements/RoomTopic";
import InlineSpinner from "../views/elements/InlineSpinner";
import { inviteMultipleToRoom, showRoomInviteDialog } from "../../RoomInvite";
import { useRoomMembers } from "../../hooks/useRoomMembers";
import { useFeatureEnabled } from "../../hooks/useSettings";
import createRoom, { IOpts } from "../../createRoom";
import Field from "../views/elements/Field";
import { useTypedEventEmitter } from "../../hooks/useEventEmitter";
@ -57,7 +58,7 @@ import {
} from "../../utils/space";
import SpaceHierarchy, { showRoom } from "./SpaceHierarchy";
import MemberAvatar from "../views/avatars/MemberAvatar";
import { RoomFacePile } from "../views/elements/FacePile";
import FacePile from "../views/elements/FacePile";
import {
AddExistingToSpace,
defaultDmsRenderer,
@ -297,7 +298,7 @@ const SpacePreview = ({ space, onJoinButtonClicked, onRejectButtonClicked }: ISp
</div>
}
</RoomTopic>
{ space.getJoinRule() === "public" && <RoomFacePile room={space} /> }
{ space.getJoinRule() === "public" && <FacePile room={space} /> }
<div className="mx_SpaceRoomView_preview_joinButtons">
{ joinButtons }
</div>
@ -309,6 +310,7 @@ const SpaceLandingAddButton = ({ space }) => {
const [menuDisplayed, handle, openMenu, closeMenu] = useContextMenu();
const canCreateRoom = shouldShowComponent(UIComponent.CreateRooms);
const canCreateSpace = shouldShowComponent(UIComponent.CreateSpaces);
const videoRoomsEnabled = useFeatureEnabled("feature_video_rooms");
let contextMenu;
if (menuDisplayed) {
@ -322,20 +324,35 @@ const SpaceLandingAddButton = ({ space }) => {
compact
>
<IconizedContextMenuOptionList first>
{ canCreateRoom && <IconizedContextMenuOption
label={_t("Create new room")}
iconClassName="mx_RoomList_iconPlus"
onClick={async (e) => {
e.preventDefault();
e.stopPropagation();
closeMenu();
{ canCreateRoom && <>
<IconizedContextMenuOption
label={_t("New room")}
iconClassName="mx_RoomList_iconPlus"
onClick={async (e) => {
e.preventDefault();
e.stopPropagation();
closeMenu();
PosthogTrackers.trackInteraction("WebSpaceHomeCreateRoomButton", e);
if (await showCreateNewRoom(space)) {
defaultDispatcher.fire(Action.UpdateSpaceHierarchy);
}
}}
/> }
PosthogTrackers.trackInteraction("WebSpaceHomeCreateRoomButton", e);
if (await showCreateNewRoom(space)) {
defaultDispatcher.fire(Action.UpdateSpaceHierarchy);
}
}}
/>
{ videoRoomsEnabled && <IconizedContextMenuOption
label={_t("New video room")}
iconClassName="mx_RoomList_iconNewVideoRoom"
onClick={async (e) => {
e.preventDefault();
e.stopPropagation();
closeMenu();
if (await showCreateNewRoom(space, RoomType.UnstableCall)) {
defaultDispatcher.fire(Action.UpdateSpaceHierarchy);
}
}}
/> }
</> }
<IconizedContextMenuOption
label={_t("Add existing room")}
iconClassName="mx_RoomList_iconAddExistingRoom"
@ -437,7 +454,7 @@ const SpaceLanding = ({ space }: { space: Room }) => {
<div className="mx_SpaceRoomView_landing_infoBar">
<SpaceInfo space={space} />
<div className="mx_SpaceRoomView_landing_infoBar_interactive">
<RoomFacePile room={space} onlyKnownUsers={false} numShown={7} onClick={onMembersClick} />
<FacePile room={space} onlyKnownUsers={false} numShown={7} onClick={onMembersClick} />
{ inviteButton }
{ settingsButton }
</div>