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

Add voice broadcast seek 30s forward/backward buttons (#9592)

Browse source
This commit is contained in:
Michael Weimann 2022-11-21 08:47:09 +01:00 • committed by GitHub
parent caac059479
commit d699f5607b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
13 changed files with 316 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

57
test/voice-broadcast/components/molecules/VoiceBroadcastPlaybackBody-test.tsx
View file

@ -16,7 +16,7 @@ limitations under the License.
import React from "react";
import { MatrixClient, MatrixEvent } from "matrix-js-sdk/src/matrix";
import { act, render, RenderResult } from "@testing-library/react";
import { act, render, RenderResult, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { mocked } from "jest-mock";
@ -54,7 +54,7 @@ describe("VoiceBroadcastPlaybackBody", () => {
infoEvent = mkVoiceBroadcastInfoStateEvent(
roomId,
VoiceBroadcastInfoState.Started,
VoiceBroadcastInfoState.Stopped,
userId,
client.getDeviceId(),
);
@ -65,6 +65,7 @@ describe("VoiceBroadcastPlaybackBody", () => {
jest.spyOn(playback, "toggle").mockImplementation(() => Promise.resolve());
jest.spyOn(playback, "getLiveness");
jest.spyOn(playback, "getState");
jest.spyOn(playback, "skipTo");
jest.spyOn(playback, "durationSeconds", "get").mockReturnValue(23 * 60 + 42); // 23:42
});
@ -80,6 +81,50 @@ describe("VoiceBroadcastPlaybackBody", () => {
});
});
describe("when rendering a playing broadcast", () => {
beforeEach(() => {
mocked(playback.getState).mockReturnValue(VoiceBroadcastPlaybackState.Playing);
mocked(playback.getLiveness).mockReturnValue("not-live");
renderResult = render(<VoiceBroadcastPlaybackBody playback={playback} />);
});
it("should render as expected", () => {
expect(renderResult.container).toMatchSnapshot();
});
describe("and being in the middle of the playback", () => {
beforeEach(() => {
act(() => {
playback.emit(VoiceBroadcastPlaybackEvent.PositionChanged, 10 * 60 * 1000); // 10:00
});
});
describe("and clicking 30s backward", () => {
beforeEach(async () => {
await act(async () => {
await userEvent.click(screen.getByLabelText("30s backward"));
});
});
it("should seek 30s backward", () => {
expect(playback.skipTo).toHaveBeenCalledWith(9 * 60 + 30);
});
});
describe("and clicking 30s forward", () => {
beforeEach(async () => {
await act(async () => {
await userEvent.click(screen.getByLabelText("30s forward"));
});
});
it("should seek 30s forward", () => {
expect(playback.skipTo).toHaveBeenCalledWith(10 * 60 + 30);
});
});
});
});
describe(`when rendering a stopped broadcast`, () => {
beforeEach(() => {
mocked(playback.getState).mockReturnValue(VoiceBroadcastPlaybackState.Stopped);
@ -87,6 +132,10 @@ describe("VoiceBroadcastPlaybackBody", () => {
renderResult = render(<VoiceBroadcastPlaybackBody playback={playback} />);
});
it("should render as expected", () => {
expect(renderResult.container).toMatchSnapshot();
});
describe("and clicking the play button", () => {
beforeEach(async () => {
await userEvent.click(renderResult.getByLabelText("play voice broadcast"));
@ -104,8 +153,8 @@ describe("VoiceBroadcastPlaybackBody", () => {
});
});
it("should render as expected", () => {
expect(renderResult.container).toMatchSnapshot();
it("should render the new length", async () => {
expect(await screen.findByText("00:42")).toBeInTheDocument();
});
});
});

163
test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastPlaybackBody-test.tsx.snap
View file

@ -45,6 +45,16 @@ exports[`VoiceBroadcastPlaybackBody when rendering a 0/not-live broadcast should
<div
class="mx_VoiceBroadcastBody_controls"
>
<div
aria-label="30s backward"
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_secondary_content"
role="button"
tabindex="0"
>
<div
class="mx_Icon mx_Icon_24"
/>
</div>
<div
aria-label="resume voice broadcast"
class="mx_AccessibleButton mx_VoiceBroadcastControl"
@ -55,6 +65,16 @@ exports[`VoiceBroadcastPlaybackBody when rendering a 0/not-live broadcast should
class="mx_Icon mx_Icon_16"
/>
</div>
<div
aria-label="30s forward"
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_secondary_content"
role="button"
tabindex="0"
>
<div
class="mx_Icon mx_Icon_24"
/>
</div>
</div>
<div
class="mx_VoiceBroadcastBody_timerow"
@ -132,6 +152,16 @@ exports[`VoiceBroadcastPlaybackBody when rendering a 1/live broadcast should ren
<div
class="mx_VoiceBroadcastBody_controls"
>
<div
aria-label="30s backward"
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_secondary_content"
role="button"
tabindex="0"
>
<div
class="mx_Icon mx_Icon_24"
/>
</div>
<div
aria-label="pause voice broadcast"
class="mx_AccessibleButton mx_VoiceBroadcastControl"
@ -142,6 +172,16 @@ exports[`VoiceBroadcastPlaybackBody when rendering a 1/live broadcast should ren
class="mx_Icon mx_Icon_16"
/>
</div>
<div
aria-label="30s forward"
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_secondary_content"
role="button"
tabindex="0"
>
<div
class="mx_Icon mx_Icon_24"
/>
</div>
</div>
<div
class="mx_VoiceBroadcastBody_timerow"
@ -219,6 +259,16 @@ exports[`VoiceBroadcastPlaybackBody when rendering a buffering voice broadcast s
<div
class="mx_VoiceBroadcastBody_controls"
>
<div
aria-label="30s backward"
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_secondary_content"
role="button"
tabindex="0"
>
<div
class="mx_Icon mx_Icon_24"
/>
</div>
<div
class="mx_Spinner"
>
@ -230,6 +280,16 @@ exports[`VoiceBroadcastPlaybackBody when rendering a buffering voice broadcast s
style="width: 32px; height: 32px;"
/>
</div>
<div
aria-label="30s forward"
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_secondary_content"
role="button"
tabindex="0"
>
<div
class="mx_Icon mx_Icon_24"
/>
</div>
</div>
<div
class="mx_VoiceBroadcastBody_timerow"
@ -254,7 +314,106 @@ exports[`VoiceBroadcastPlaybackBody when rendering a buffering voice broadcast s
</div>
`;
exports[`VoiceBroadcastPlaybackBody when rendering a stopped broadcast and the length updated should render as expected 1`] = `
exports[`VoiceBroadcastPlaybackBody when rendering a playing broadcast should render as expected 1`] = `
<div>
<div
class="mx_VoiceBroadcastBody"
>
<div
class="mx_VoiceBroadcastHeader"
>
<div
data-testid="room-avatar"
>
room avatar:
My room
</div>
<div
class="mx_VoiceBroadcastHeader_content"
>
<div
class="mx_VoiceBroadcastHeader_room"
>
My room
</div>
<div
class="mx_VoiceBroadcastHeader_line"
>
<div
class="mx_Icon mx_Icon_16"
/>
<span>
@user:example.com
</span>
</div>
<div
class="mx_VoiceBroadcastHeader_line"
>
<div
class="mx_Icon mx_Icon_16"
/>
Voice broadcast
</div>
</div>
</div>
<div
class="mx_VoiceBroadcastBody_controls"
>
<div
aria-label="30s backward"
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_secondary_content"
role="button"
tabindex="0"
>
<div
class="mx_Icon mx_Icon_24"
/>
</div>
<div
aria-label="pause voice broadcast"
class="mx_AccessibleButton mx_VoiceBroadcastControl"
role="button"
tabindex="0"
>
<div
class="mx_Icon mx_Icon_16"
/>
</div>
<div
aria-label="30s forward"
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_secondary_content"
role="button"
tabindex="0"
>
<div
class="mx_Icon mx_Icon_24"
/>
</div>
</div>
<div
class="mx_VoiceBroadcastBody_timerow"
>
<input
class="mx_SeekBar"
max="1"
min="0"
step="0.001"
style="--fillTo: 0;"
tabindex="0"
type="range"
value="0"
/>
<span
class="mx_Clock"
>
23:42
</span>
</div>
</div>
</div>
`;
exports[`VoiceBroadcastPlaybackBody when rendering a stopped broadcast should render as expected 1`] = `
<div>
<div
class="mx_VoiceBroadcastBody"
@ -326,7 +485,7 @@ exports[`VoiceBroadcastPlaybackBody when rendering a stopped broadcast and the l
<span
class="mx_Clock"
>
00:42
23:42
</span>
</div>
</div>