nikrozman/element-web
1
0
Fork 0
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Update voice broadcast time display (#9646)

Browse Source
This commit is contained in:
Michael Weimann
2022-11-30 08:47:29 +01:00
committed by GitHub
parent 5f6b1dda8d
commit 70a7961681
8 changed files with 149 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
test/utils/DateUtils-test.ts
View File

@@ -29,12 +29,14 @@ describe("formatSeconds", () => {
expect(formatSeconds((60 * 60 * 3) + (60 * 31) + (55))).toBe("03:31:55");
expect(formatSeconds((60 * 60 * 3) + (60 * 0) + (55))).toBe("03:00:55");
expect(formatSeconds((60 * 60 * 3) + (60 * 31) + (0))).toBe("03:31:00");
expect(formatSeconds(-((60 * 60 * 3) + (60 * 31) + (0)))).toBe("-03:31:00");
});
it("correctly formats time without hours", () => {
expect(formatSeconds((60 * 60 * 0) + (60 * 31) + (55))).toBe("31:55");
expect(formatSeconds((60 * 60 * 0) + (60 * 0) + (55))).toBe("00:55");
expect(formatSeconds((60 * 60 * 0) + (60 * 31) + (0))).toBe("31:00");
expect(formatSeconds(-((60 * 60 * 0) + (60 * 31) + (0)))).toBe("-31:00");
});
});

22
test/voice-broadcast/components/molecules/VoiceBroadcastPlaybackBody-test.tsx
View File

@@ -42,6 +42,7 @@ jest.mock("../../../../src/components/views/avatars/RoomAvatar", () => ({
describe("VoiceBroadcastPlaybackBody", () => {
const userId = "@user:example.com";
const roomId = "!room:example.com";
const duration = 23 * 60 + 42; // 23:42
let client: MatrixClient;
let infoEvent: MatrixEvent;
let playback: VoiceBroadcastPlayback;
@@ -66,7 +67,7 @@ describe("VoiceBroadcastPlaybackBody", () => {
jest.spyOn(playback, "getLiveness");
jest.spyOn(playback, "getState");
jest.spyOn(playback, "skipTo");
jest.spyOn(playback, "durationSeconds", "get").mockReturnValue(23 * 60 + 42); // 23:42
jest.spyOn(playback, "durationSeconds", "get").mockReturnValue(duration);
});
describe("when rendering a buffering voice broadcast", () => {
@@ -95,7 +96,11 @@ describe("VoiceBroadcastPlaybackBody", () => {
describe("and being in the middle of the playback", () => {
beforeEach(() => {
act(() => {
playback.emit(VoiceBroadcastPlaybackEvent.PositionChanged, 10 * 60 * 1000); // 10:00
playback.emit(VoiceBroadcastPlaybackEvent.TimesChanged, {
duration,
position: 10 * 60,
timeLeft: duration - 10 * 60,
});
});
});
@@ -146,15 +151,20 @@ describe("VoiceBroadcastPlaybackBody", () => {
});
});
describe("and the length updated", () => {
describe("and the times update", () => {
beforeEach(() => {
act(() => {
playback.emit(VoiceBroadcastPlaybackEvent.LengthChanged, 42000); // 00:42
playback.emit(VoiceBroadcastPlaybackEvent.TimesChanged, {
duration,
position: 5 * 60 + 13,
timeLeft: 7 * 60 + 5,
});
});
});
it("should render the new length", async () => {
expect(await screen.findByText("00:42")).toBeInTheDocument();
it("should render the times", async () => {
expect(await screen.findByText("05:13")).toBeInTheDocument();
expect(await screen.findByText("-07:05")).toBeInTheDocument();
});
});
});

135
test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastPlaybackBody-test.tsx.snap
View File

@@ -76,23 +76,28 @@ exports[`VoiceBroadcastPlaybackBody when rendering a 0/not-live broadcast should
/>
</div>
</div>
<input
class="mx_SeekBar"
max="1"
min="0"
step="0.001"
style="--fillTo: 0;"
tabindex="0"
type="range"
value="0"
/>
<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
00:00
</span>
<span
class="mx_Clock"
>
-23:42
</span>
</div>
</div>
@@ -183,23 +188,28 @@ exports[`VoiceBroadcastPlaybackBody when rendering a 1/live broadcast should ren
/>
</div>
</div>
<input
class="mx_SeekBar"
max="1"
min="0"
step="0.001"
style="--fillTo: 0;"
tabindex="0"
type="range"
value="0"
/>
<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
00:00
</span>
<span
class="mx_Clock"
>
-23:42
</span>
</div>
</div>
@@ -291,23 +301,28 @@ exports[`VoiceBroadcastPlaybackBody when rendering a buffering voice broadcast s
/>
</div>
</div>
<input
class="mx_SeekBar"
max="1"
min="0"
step="0.001"
style="--fillTo: 0;"
tabindex="0"
type="range"
value="0"
/>
<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
00:00
</span>
<span
class="mx_Clock"
>
-23:42
</span>
</div>
</div>
@@ -390,23 +405,28 @@ exports[`VoiceBroadcastPlaybackBody when rendering a playing broadcast should re
/>
</div>
</div>
<input
class="mx_SeekBar"
max="1"
min="0"
step="0.001"
style="--fillTo: 0;"
tabindex="0"
type="range"
value="0"
/>
<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
00:00
</span>
<span
class="mx_Clock"
>
-23:42
</span>
</div>
</div>
@@ -469,23 +489,28 @@ exports[`VoiceBroadcastPlaybackBody when rendering a stopped broadcast should re
/>
</div>
</div>
<input
class="mx_SeekBar"
max="1"
min="0"
step="0.001"
style="--fillTo: 0;"
tabindex="0"
type="range"
value="0"
/>
<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
00:00
</span>
<span
class="mx_Clock"
>
-23:42
</span>
</div>
</div>