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

Update video rooms to new design specs (#8207)

Browse source 
* 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
Download patch file Download diff file Expand all files Collapse all files

68
test/components/views/rooms/RoomTile-test.tsx
View file

@ -28,21 +28,19 @@ import {
mkRoom,
mkEvent,
} from "../../../test-utils";
import { stubVoiceChannelStore } from "../../../test-utils/voice";
import { stubVideoChannelStore } from "../../../test-utils/video";
import RoomTile from "../../../../src/components/views/rooms/RoomTile";
import MemberAvatar from "../../../../src/components/views/avatars/MemberAvatar";
import SettingsStore from "../../../../src/settings/SettingsStore";
import VoiceChannelStore, { VoiceChannelEvent } from "../../../../src/stores/VoiceChannelStore";
import { DefaultTagID } from "../../../../src/stores/room-list/models";
import DMRoomMap from "../../../../src/utils/DMRoomMap";
import { VOICE_CHANNEL_MEMBER } from "../../../../src/utils/VoiceChannelUtils";
import { VIDEO_CHANNEL_MEMBER } from "../../../../src/utils/VideoChannelUtils";
import { MatrixClientPeg } from "../../../../src/MatrixClientPeg";
import PlatformPeg from "../../../../src/PlatformPeg";
import BasePlatform from "../../../../src/BasePlatform";
const mkVoiceChannelMember = (userId: string, devices: string[]): MatrixEvent => mkEvent({
const mkVideoChannelMember = (userId: string, devices: string[]): MatrixEvent => mkEvent({
event: true,
type: VOICE_CHANNEL_MEMBER,
type: VIDEO_CHANNEL_MEMBER,
room: "!1:example.org",
user: userId,
skey: userId,
@ -59,36 +57,25 @@ describe("RoomTile", () => {
beforeEach(() => {
const realGetValue = SettingsStore.getValue;
SettingsStore.getValue = <T, >(name: string, roomId?: string): T => {
if (name === "feature_voice_rooms") {
if (name === "feature_video_rooms") {
return true as unknown as T;
}
return realGetValue(name, roomId);
};
stubClient();
stubVoiceChannelStore();
DMRoomMap.makeShared();
cli = mocked(MatrixClientPeg.get());
store = VoiceChannelStore.instance;
store = stubVideoChannelStore();
DMRoomMap.makeShared();
});
afterEach(() => jest.clearAllMocks());
describe("voice rooms", () => {
describe("video rooms", () => {
const room = mkRoom(cli, "!1:example.org");
room.isCallRoom.mockReturnValue(true);
it("tracks connection state", async () => {
// Insert a breakpoint in the connect method, so we can see the intermediate connecting state
let continueJoin;
const breakpoint = new Promise(resolve => continueJoin = resolve);
const realConnect = store.connect;
store.connect = async () => {
await breakpoint;
await realConnect();
};
it("tracks connection state", () => {
const tile = mount(
<RoomTile
room={room}
@ -97,39 +84,25 @@ describe("RoomTile", () => {
tag={DefaultTagID.Untagged}
/>,
);
expect(tile.find(".mx_RoomTile_voiceIndicator").text()).toEqual("Voice room");
expect(tile.find(".mx_RoomTile_videoIndicator").text()).toEqual("Video");
act(() => { tile.simulate("click"); });
act(() => { store.connect("!1:example.org"); });
tile.update();
expect(tile.find(".mx_RoomTile_voiceIndicator").text()).toEqual("Connecting...");
// Now we confirm the join and wait for the store to update
const waitForConnect = new Promise<void>(resolve =>
store.once(VoiceChannelEvent.Connect, resolve),
);
continueJoin();
await waitForConnect;
// Wait exactly 2 ticks for the room tile to update
await Promise.resolve();
await Promise.resolve();
expect(tile.find(".mx_RoomTile_videoIndicator").text()).toEqual("Connected");
act(() => { store.disconnect(); });
tile.update();
expect(tile.find(".mx_RoomTile_voiceIndicator").text()).toEqual("Connected");
await store.disconnect();
tile.update();
expect(tile.find(".mx_RoomTile_voiceIndicator").text()).toEqual("Voice room");
expect(tile.find(".mx_RoomTile_videoIndicator").text()).toEqual("Video");
});
it("displays connected members", async () => {
it("displays connected members", () => {
mocked(room.currentState).getStateEvents.mockImplementation(mockStateEventImplementation([
// A user connected from 2 devices
mkVoiceChannelMember("@alice:example.org", ["device 1", "device 2"]),
mkVideoChannelMember("@alice:example.org", ["device 1", "device 2"]),
// A disconnected user
mkVoiceChannelMember("@bob:example.org", []),
mkVideoChannelMember("@bob:example.org", []),
// A user that claims to have a connected device, but has left the room
mkVoiceChannelMember("@chris:example.org", ["device 1"]),
mkVideoChannelMember("@chris:example.org", ["device 1"]),
]));
mocked(room.currentState).getMember.mockImplementation(userId => ({
@ -152,9 +125,8 @@ describe("RoomTile", () => {
);
// Only Alice should display as connected
const avatar = tile.find(MemberAvatar);
expect(avatar.length).toEqual(1);
expect(avatar.props().member.userId).toEqual("@alice:example.org");
const participants = tile.find(".mx_RoomTile_videoParticipants");
expect(participants.text()).toEqual("1");
});
});
});