Add input device selection during voice broadcast (#9620)
This commit is contained in:
Michael Weimann
GitHub
parent
5b5c3ab33c
commit
b302275289
12 changed files with 486 additions and 87 deletions
|
|
@ -0,0 +1,138 @@
|
|||
/*
|
||||
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 from "react";
|
||||
import { mocked } from "jest-mock";
|
||||
import { MatrixClient, Room, RoomMember } from "matrix-js-sdk/src/matrix";
|
||||
import { act, render, RenderResult, screen } from "@testing-library/react";
|
||||
import userEvent from "@testing-library/user-event";
|
||||
|
||||
import {
|
||||
VoiceBroadcastPreRecording,
|
||||
VoiceBroadcastPreRecordingPip,
|
||||
VoiceBroadcastRecordingsStore,
|
||||
} from "../../../../src/voice-broadcast";
|
||||
import { flushPromises, stubClient } from "../../../test-utils";
|
||||
import { requestMediaPermissions } from "../../../../src/utils/media/requestMediaPermissions";
|
||||
import MediaDeviceHandler, { MediaDeviceKindEnum } from "../../../../src/MediaDeviceHandler";
|
||||
|
||||
jest.mock("../../../../src/utils/media/requestMediaPermissions");
|
||||
|
||||
// mock RoomAvatar, because it is doing too much fancy stuff
|
||||
jest.mock("../../../../src/components/views/avatars/RoomAvatar", () => ({
|
||||
__esModule: true,
|
||||
default: jest.fn().mockImplementation(({ room }) => {
|
||||
return <div data-testid="room-avatar">room avatar: { room.name }</div>;
|
||||
}),
|
||||
}));
|
||||
|
||||
describe("VoiceBroadcastPreRecordingPip", () => {
|
||||
let renderResult: RenderResult;
|
||||
let preRecording: VoiceBroadcastPreRecording;
|
||||
let recordingsStore: VoiceBroadcastRecordingsStore;
|
||||
let client: MatrixClient;
|
||||
let room: Room;
|
||||
let sender: RoomMember;
|
||||
|
||||
beforeEach(() => {
|
||||
client = stubClient();
|
||||
room = new Room("!room@example.com", client, client.getUserId() || "");
|
||||
sender = new RoomMember(room.roomId, client.getUserId() || "");
|
||||
recordingsStore = new VoiceBroadcastRecordingsStore();
|
||||
mocked(requestMediaPermissions).mockReturnValue(new Promise<MediaStream>((r) => {
|
||||
r({
|
||||
getTracks: () => [],
|
||||
} as unknown as MediaStream);
|
||||
}));
|
||||
jest.spyOn(MediaDeviceHandler, "getDevices").mockResolvedValue({
|
||||
[MediaDeviceKindEnum.AudioInput]: [
|
||||
{
|
||||
deviceId: "d1",
|
||||
label: "Device 1",
|
||||
} as MediaDeviceInfo,
|
||||
{
|
||||
deviceId: "d2",
|
||||
label: "Device 2",
|
||||
} as MediaDeviceInfo,
|
||||
],
|
||||
[MediaDeviceKindEnum.AudioOutput]: [],
|
||||
[MediaDeviceKindEnum.VideoInput]: [],
|
||||
});
|
||||
jest.spyOn(MediaDeviceHandler.instance, "setDevice").mockImplementation();
|
||||
preRecording = new VoiceBroadcastPreRecording(
|
||||
room,
|
||||
sender,
|
||||
client,
|
||||
recordingsStore,
|
||||
);
|
||||
});
|
||||
|
||||
afterAll(() => {
|
||||
jest.resetAllMocks();
|
||||
});
|
||||
|
||||
describe("when rendered", () => {
|
||||
beforeEach(async () => {
|
||||
renderResult = render(<VoiceBroadcastPreRecordingPip
|
||||
voiceBroadcastPreRecording={preRecording}
|
||||
/>);
|
||||
|
||||
await act(async () => {
|
||||
flushPromises();
|
||||
});
|
||||
});
|
||||
|
||||
it("should match the snapshot", () => {
|
||||
expect(renderResult.container).toMatchSnapshot();
|
||||
});
|
||||
|
||||
describe("and clicking the device label", () => {
|
||||
beforeEach(async () => {
|
||||
await act(async () => {
|
||||
await userEvent.click(screen.getByText("Default Device"));
|
||||
});
|
||||
});
|
||||
|
||||
it("should display the device selection", () => {
|
||||
expect(screen.queryAllByText("Default Device").length).toBe(2);
|
||||
expect(screen.queryByText("Device 1")).toBeInTheDocument();
|
||||
expect(screen.queryByText("Device 2")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
describe("and selecting a device", () => {
|
||||
beforeEach(async () => {
|
||||
await act(async () => {
|
||||
await userEvent.click(screen.getByText("Device 1"));
|
||||
});
|
||||
});
|
||||
|
||||
it("should set it as current device", () => {
|
||||
expect(MediaDeviceHandler.instance.setDevice).toHaveBeenCalledWith(
|
||||
"d1",
|
||||
MediaDeviceKindEnum.AudioInput,
|
||||
);
|
||||
});
|
||||
|
||||
it("should not show the device selection", () => {
|
||||
expect(screen.queryByText("Default Device")).not.toBeInTheDocument();
|
||||
// expected to be one in the document, displayed in the pip directly
|
||||
expect(screen.queryByText("Device 1")).toBeInTheDocument();
|
||||
expect(screen.queryByText("Device 2")).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
@ -16,18 +16,23 @@ limitations under the License.
|
|||
//
|
||||
|
||||
import React from "react";
|
||||
import { render, RenderResult, screen } from "@testing-library/react";
|
||||
import { act, render, RenderResult, screen } from "@testing-library/react";
|
||||
import userEvent from "@testing-library/user-event";
|
||||
import { MatrixClient, MatrixEvent } from "matrix-js-sdk/src/matrix";
|
||||
import { sleep } from "matrix-js-sdk/src/utils";
|
||||
import { mocked } from "jest-mock";
|
||||
|
||||
import {
|
||||
VoiceBroadcastInfoState,
|
||||
VoiceBroadcastRecording,
|
||||
VoiceBroadcastRecordingPip,
|
||||
} from "../../../../src/voice-broadcast";
|
||||
import { stubClient } from "../../../test-utils";
|
||||
import { filterConsole, flushPromises, stubClient } from "../../../test-utils";
|
||||
import { mkVoiceBroadcastInfoStateEvent } from "../../utils/test-utils";
|
||||
import { requestMediaPermissions } from "../../../../src/utils/media/requestMediaPermissions";
|
||||
import MediaDeviceHandler, { MediaDeviceKindEnum } from "../../../../src/MediaDeviceHandler";
|
||||
|
||||
jest.mock("../../../../src/utils/media/requestMediaPermissions");
|
||||
|
||||
// mock RoomAvatar, because it is doing too much fancy stuff
|
||||
jest.mock("../../../../src/components/views/avatars/RoomAvatar", () => ({
|
||||
|
|
@ -54,31 +59,80 @@ describe("VoiceBroadcastRecordingPip", () => {
|
|||
let infoEvent: MatrixEvent;
|
||||
let recording: VoiceBroadcastRecording;
|
||||
let renderResult: RenderResult;
|
||||
let restoreConsole: () => void;
|
||||
|
||||
const renderPip = (state: VoiceBroadcastInfoState) => {
|
||||
const renderPip = async (state: VoiceBroadcastInfoState) => {
|
||||
infoEvent = mkVoiceBroadcastInfoStateEvent(
|
||||
roomId,
|
||||
state,
|
||||
client.getUserId(),
|
||||
client.getDeviceId(),
|
||||
client.getUserId() || "",
|
||||
client.getDeviceId() || "",
|
||||
);
|
||||
recording = new VoiceBroadcastRecording(infoEvent, client, state);
|
||||
jest.spyOn(recording, "pause");
|
||||
jest.spyOn(recording, "resume");
|
||||
renderResult = render(<VoiceBroadcastRecordingPip recording={recording} />);
|
||||
await act(async () => {
|
||||
flushPromises();
|
||||
});
|
||||
};
|
||||
|
||||
beforeAll(() => {
|
||||
client = stubClient();
|
||||
mocked(requestMediaPermissions).mockReturnValue(new Promise<MediaStream>((r) => {
|
||||
r({
|
||||
getTracks: () => [],
|
||||
} as unknown as MediaStream);
|
||||
}));
|
||||
jest.spyOn(MediaDeviceHandler, "getDevices").mockResolvedValue({
|
||||
[MediaDeviceKindEnum.AudioInput]: [
|
||||
{
|
||||
deviceId: "d1",
|
||||
label: "Device 1",
|
||||
} as MediaDeviceInfo,
|
||||
{
|
||||
deviceId: "d2",
|
||||
label: "Device 2",
|
||||
} as MediaDeviceInfo,
|
||||
],
|
||||
[MediaDeviceKindEnum.AudioOutput]: [],
|
||||
[MediaDeviceKindEnum.VideoInput]: [],
|
||||
});
|
||||
jest.spyOn(MediaDeviceHandler.instance, "setDevice").mockImplementation();
|
||||
restoreConsole = filterConsole("Starting load of AsyncWrapper for modal");
|
||||
});
|
||||
|
||||
afterAll(() => {
|
||||
restoreConsole();
|
||||
});
|
||||
|
||||
describe("when rendering a started recording", () => {
|
||||
beforeEach(() => {
|
||||
renderPip(VoiceBroadcastInfoState.Started);
|
||||
beforeEach(async () => {
|
||||
await renderPip(VoiceBroadcastInfoState.Started);
|
||||
});
|
||||
|
||||
it("should render as expected", () => {
|
||||
expect(renderResult.container).toMatchSnapshot();
|
||||
});
|
||||
|
||||
describe("and selecting another input device", () => {
|
||||
beforeEach(async () => {
|
||||
await act(async () => {
|
||||
await userEvent.click(screen.getByLabelText("Change input device"));
|
||||
await userEvent.click(screen.getByText("Device 1"));
|
||||
});
|
||||
});
|
||||
|
||||
it("should select the device and pause and resume the broadcast", () => {
|
||||
expect(MediaDeviceHandler.instance.setDevice).toHaveBeenCalledWith(
|
||||
"d1",
|
||||
MediaDeviceKindEnum.AudioInput,
|
||||
);
|
||||
expect(recording.pause).toHaveBeenCalled();
|
||||
expect(recording.resume).toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
|
||||
describe("and clicking the pause button", () => {
|
||||
beforeEach(async () => {
|
||||
await userEvent.click(screen.getByLabelText("pause voice broadcast"));
|
||||
|
|
@ -113,8 +167,8 @@ describe("VoiceBroadcastRecordingPip", () => {
|
|||
});
|
||||
|
||||
describe("when rendering a paused recording", () => {
|
||||
beforeEach(() => {
|
||||
renderPip(VoiceBroadcastInfoState.Paused);
|
||||
beforeEach(async () => {
|
||||
await renderPip(VoiceBroadcastInfoState.Paused);
|
||||
});
|
||||
|
||||
it("should render as expected", () => {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,58 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`VoiceBroadcastPreRecordingPip when rendered should match the snapshot 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="mx_VoiceBroadcastBody mx_VoiceBroadcastBody--pip"
|
||||
>
|
||||
<div
|
||||
class="mx_VoiceBroadcastHeader"
|
||||
>
|
||||
<div
|
||||
data-testid="room-avatar"
|
||||
>
|
||||
room avatar:
|
||||
!room@example.com
|
||||
</div>
|
||||
<div
|
||||
class="mx_VoiceBroadcastHeader_content"
|
||||
>
|
||||
<div
|
||||
class="mx_VoiceBroadcastHeader_room"
|
||||
>
|
||||
!room@example.com
|
||||
</div>
|
||||
<div
|
||||
class="mx_VoiceBroadcastHeader_line mx_VoiceBroadcastHeader_mic--clickable"
|
||||
>
|
||||
<div
|
||||
class="mx_Icon mx_Icon_16"
|
||||
/>
|
||||
<span>
|
||||
Default Device
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="mx_AccessibleButton"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
class="mx_Icon mx_Icon_16"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="mx_AccessibleButton mx_VoiceBroadcastBody_blockButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_danger"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
class="mx_Icon mx_Icon_16"
|
||||
/>
|
||||
Go live
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
|
@ -60,6 +60,16 @@ exports[`VoiceBroadcastRecordingPip when rendering a paused recording should ren
|
|||
class="mx_Icon mx_Icon_16"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
aria-label="Change input device"
|
||||
class="mx_AccessibleButton"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
class="mx_Icon mx_Icon_16 mx_Icon_alert"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
aria-label="Stop Recording"
|
||||
class="mx_AccessibleButton mx_VoiceBroadcastControl"
|
||||
|
|
@ -135,6 +145,16 @@ exports[`VoiceBroadcastRecordingPip when rendering a started recording should re
|
|||
class="mx_Icon mx_Icon_16"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
aria-label="Change input device"
|
||||
class="mx_AccessibleButton"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
class="mx_Icon mx_Icon_16 mx_Icon_alert"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
aria-label="Stop Recording"
|
||||
class="mx_AccessibleButton mx_VoiceBroadcastControl"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue