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

132
test/stores/VideoChannelStore-test.ts
View file

@ -14,24 +14,22 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import { ClientWidgetApi, MatrixWidgetType } from "matrix-widget-api";
import { mocked } from "jest-mock";
import { Widget, ClientWidgetApi, MatrixWidgetType, IWidgetApiRequest } from "matrix-widget-api";
import { stubClient, mkRoom } from "../test-utils";
import { stubClient, setupAsyncStoreWithClient } from "../test-utils";
import { MatrixClientPeg } from "../../src/MatrixClientPeg";
import WidgetStore from "../../src/stores/WidgetStore";
import ActiveWidgetStore from "../../src/stores/ActiveWidgetStore";
import WidgetStore, { IApp } from "../../src/stores/WidgetStore";
import { WidgetMessagingStore } from "../../src/stores/widgets/WidgetMessagingStore";
import { ElementWidgetActions } from "../../src/stores/widgets/ElementWidgetActions";
import VideoChannelStore, { VideoChannelEvent } from "../../src/stores/VideoChannelStore";
import { VIDEO_CHANNEL } from "../../src/utils/VideoChannelUtils";
describe("VideoChannelStore", () => {
stubClient();
mkRoom(MatrixClientPeg.get(), "!1:example.org");
const store = VideoChannelStore.instance;
const videoStore = VideoChannelStore.instance;
const widgetStore = ActiveWidgetStore.instance;
jest.spyOn(WidgetStore.instance, "getApps").mockReturnValue([{
const widget = { id: VIDEO_CHANNEL } as unknown as Widget;
const app = {
id: VIDEO_CHANNEL,
eventId: "$1:example.org",
roomId: "!1:example.org",
@ -40,43 +38,103 @@ describe("VideoChannelStore", () => {
name: "Video channel",
creatorUserId: "@alice:example.org",
avatar_url: null,
}]);
jest.spyOn(WidgetMessagingStore.instance, "getMessagingForUid").mockReturnValue({
on: () => {},
off: () => {},
once: () => {},
transport: {
send: () => {},
reply: () => {},
},
} as unknown as ClientWidgetApi);
} as IApp;
// Set up mocks to simulate the remote end of the widget API
let messageSent: Promise<void>;
let messageSendMock: () => void;
let onMock: (action: string, listener: (ev: CustomEvent<IWidgetApiRequest>) => void) => void;
let onceMock: (action: string, listener: (ev: CustomEvent<IWidgetApiRequest>) => void) => void;
let messaging: ClientWidgetApi;
beforeEach(() => {
videoStore.start();
stubClient();
const cli = MatrixClientPeg.get();
setupAsyncStoreWithClient(WidgetMessagingStore.instance, cli);
setupAsyncStoreWithClient(store, cli);
let resolveMessageSent: () => void;
messageSent = new Promise(resolve => resolveMessageSent = resolve);
messageSendMock = jest.fn().mockImplementation(() => resolveMessageSent());
onMock = jest.fn();
onceMock = jest.fn();
jest.spyOn(WidgetStore.instance, "getApps").mockReturnValue([app]);
messaging = {
on: onMock,
off: () => {},
stop: () => {},
once: onceMock,
transport: {
send: messageSendMock,
reply: () => {},
},
} as unknown as ClientWidgetApi;
});
afterEach(() => {
videoStore.stop();
jest.clearAllMocks();
});
it("tracks connection state", async () => {
expect(videoStore.roomId).toBeFalsy();
const widgetReady = () => {
// Tell the WidgetStore that the widget is ready
const [, ready] = mocked(onceMock).mock.calls.find(([action]) =>
action === `action:${ElementWidgetActions.WidgetReady}`,
);
ready({ detail: {} } as unknown as CustomEvent<IWidgetApiRequest>);
};
const confirmConnect = async () => {
// Wait for the store to contact the widget API
await messageSent;
// Then, locate the callback that will confirm the join
const [, join] = mocked(onMock).mock.calls.find(([action]) =>
action === `action:${ElementWidgetActions.JoinCall}`,
);
// Confirm the join, and wait for the store to update
const waitForConnect = new Promise<void>(resolve =>
videoStore.once(VideoChannelEvent.Connect, resolve),
store.once(VideoChannelEvent.Connect, resolve),
);
widgetStore.setWidgetPersistence(VIDEO_CHANNEL, "!1:example.org", true);
join({ detail: {} } as unknown as CustomEvent<IWidgetApiRequest>);
await waitForConnect;
};
expect(videoStore.roomId).toEqual("!1:example.org");
const waitForDisconnect = new Promise<void>(resolve =>
videoStore.once(VideoChannelEvent.Disconnect, resolve),
const confirmDisconnect = async () => {
// Locate the callback that will perform the hangup
const [, hangup] = mocked(onceMock).mock.calls.find(([action]) =>
action === `action:${ElementWidgetActions.HangupCall}`,
);
widgetStore.setWidgetPersistence(VIDEO_CHANNEL, "!1:example.org", false);
await waitForDisconnect;
// Hangup and wait for the store, once again
const waitForHangup = new Promise<void>(resolve =>
store.once(VideoChannelEvent.Disconnect, resolve),
);
hangup({ detail: {} } as unknown as CustomEvent<IWidgetApiRequest>);
await waitForHangup;
};
expect(videoStore.roomId).toBeFalsy();
it("connects and disconnects", async () => {
WidgetMessagingStore.instance.storeMessaging(widget, "!1:example.org", messaging);
widgetReady();
expect(store.roomId).toBeFalsy();
expect(store.connected).toEqual(false);
store.connect("!1:example.org", null, null);
await confirmConnect();
expect(store.roomId).toEqual("!1:example.org");
expect(store.connected).toEqual(true);
store.disconnect();
await confirmDisconnect();
expect(store.roomId).toBeFalsy();
expect(store.connected).toEqual(false);
WidgetMessagingStore.instance.stopMessaging(widget, "!1:example.org");
});
it("waits for messaging when connecting", async () => {
store.connect("!1:example.org", null, null);
WidgetMessagingStore.instance.storeMessaging(widget, "!1:example.org", messaging);
widgetReady();
await confirmConnect();
expect(store.roomId).toEqual("!1:example.org");
expect(store.connected).toEqual(true);
store.disconnect();
await confirmDisconnect();
WidgetMessagingStore.instance.stopMessaging(widget, "!1:example.org");
});
});