mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-10-23 03:05:45 +03:00
Code Issues Projects Releases Packages Wiki Activity

Show initial broadcast position in seekbar (#9796)

Browse source
This commit is contained in:
Michael Weimann 2022-12-22 15:30:42 +01:00 committed by GitHub
parent e9224f6fce
commit b07bd4d102
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 40 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/components/views/audio_messages/SeekBar.tsx
View file

@ -60,7 +60,7 @@ export default class SeekBar extends React.PureComponent<IProps, IState> {
super(props);
this.state = {
percentage: 0,
percentage: percentageOf(this.props.playback.timeSeconds, 0, this.props.playback.durationSeconds),
};
// We don't need to de-register: the class handles this for us internally

30
test/components/views/audio_messages/SeekBar-test.tsx
View file

@ -42,24 +42,36 @@ describe("SeekBar", () => {
});
describe("when rendering a SeekBar", () => {
beforeEach(async () => {
beforeEach(() => {
renderResult = render(<SeekBar ref={seekBarRef} playback={playback} />);
act(() => {
playback.liveData.update([playback.timeSeconds, playback.durationSeconds]);
frameRequestCallback(0);
});
});
it("should render as expected", () => {
it("should render the initial position", () => {
// expected value 3141 / 31415 ~ 0.099984084
expect(renderResult.container).toMatchSnapshot();
});
describe("and the playback proceeds", () => {
beforeEach(async () => {
// @ts-ignore
playback.timeSeconds = 6969;
act(() => {
playback.liveData.update([playback.timeSeconds, playback.durationSeconds]);
frameRequestCallback(0);
});
});
it("should render as expected", () => {
// expected value 6969 / 31415 ~ 0.221836702
expect(renderResult.container).toMatchSnapshot();
});
});
describe("and seeking position with the slider", () => {
beforeEach(() => {
const rangeInput = renderResult.container.querySelector("[type='range']");
act(() => {
fireEvent.change(rangeInput, { target: { value: 0.5 } });
fireEvent.change(rangeInput!, { target: { value: 0.5 } });
});
});
@ -71,7 +83,7 @@ describe("SeekBar", () => {
beforeEach(() => {
mocked(playback.skipTo).mockClear();
act(() => {
seekBarRef.current.left();
seekBarRef.current!.left();
});
});
@ -84,7 +96,7 @@ describe("SeekBar", () => {
beforeEach(() => {
mocked(playback.skipTo).mockClear();
act(() => {
seekBarRef.current.right();
seekBarRef.current!.right();
});
});

21
test/components/views/audio_messages/__snapshots__/SeekBar-test.tsx.snap
View file

@ -1,6 +1,21 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`SeekBar when rendering a SeekBar should render as expected 1`] = `
exports[`SeekBar when rendering a SeekBar and the playback proceeds should render as expected 1`] = `
<div>
<input
class="mx_SeekBar"
max="1"
min="0"
step="0.001"
style="--fillTo: 0.22183670221231896;"
tabindex="0"
type="range"
value="0.22183670221231896"
/>
</div>
`;
exports[`SeekBar when rendering a SeekBar should render the initial position 1`] = `
<div>
<input
class="mx_SeekBar"
@ -23,10 +38,10 @@ exports[`SeekBar when rendering a disabled SeekBar should render as expected 1`]
max="1"
min="0"
step="0.001"
style="--fillTo: 0;"
style="--fillTo: 0.0999840840362884;"
tabindex="0"
type="range"
value="0"
value="0.0999840840362884"
/>
</div>
`;