From 1fe089721f85ae083e6c4f777234810f1d516315 Mon Sep 17 00:00:00 2001
From: Michael Weimann <michaelw@matrix.org>
Date: Mon, 19 Dec 2022 13:44:28 +0100
Subject: [PATCH 1/2] Set initial seekbar value

---
 .../views/audio_messages/SeekBar.tsx          |  2 +-
 .../views/audio_messages/SeekBar-test.tsx     | 24 ++++++++++++++-----
 .../__snapshots__/SeekBar-test.tsx.snap       | 21 +++++++++++++---
 3 files changed, 37 insertions(+), 10 deletions(-)

diff --git a/src/components/views/audio_messages/SeekBar.tsx b/src/components/views/audio_messages/SeekBar.tsx
index 9006016b14b..a7bbc20c463 100644
--- a/src/components/views/audio_messages/SeekBar.tsx
+++ b/src/components/views/audio_messages/SeekBar.tsx
@@ -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
diff --git a/test/components/views/audio_messages/SeekBar-test.tsx b/test/components/views/audio_messages/SeekBar-test.tsx
index fae947483b6..a2bad0f996f 100644
--- a/test/components/views/audio_messages/SeekBar-test.tsx
+++ b/test/components/views/audio_messages/SeekBar-test.tsx
@@ -42,19 +42,31 @@ 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']");
diff --git a/test/components/views/audio_messages/__snapshots__/SeekBar-test.tsx.snap b/test/components/views/audio_messages/__snapshots__/SeekBar-test.tsx.snap
index f545f94d74c..8c66fda4d7f 100644
--- a/test/components/views/audio_messages/__snapshots__/SeekBar-test.tsx.snap
+++ b/test/components/views/audio_messages/__snapshots__/SeekBar-test.tsx.snap
@@ -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>
 `;

From 0c4c3c8275b3ec6b2347a103af9af5179a9a57ae Mon Sep 17 00:00:00 2001
From: Michael Weimann <michaelw@matrix.org>
Date: Mon, 19 Dec 2022 13:45:45 +0100
Subject: [PATCH 2/2] Fix stric type errors

---
 test/components/views/audio_messages/SeekBar-test.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/test/components/views/audio_messages/SeekBar-test.tsx b/test/components/views/audio_messages/SeekBar-test.tsx
index a2bad0f996f..e957daf0fe7 100644
--- a/test/components/views/audio_messages/SeekBar-test.tsx
+++ b/test/components/views/audio_messages/SeekBar-test.tsx
@@ -71,7 +71,7 @@ describe("SeekBar", () => {
             beforeEach(() => {
                 const rangeInput = renderResult.container.querySelector("[type='range']");
                 act(() => {
-                    fireEvent.change(rangeInput, { target: { value: 0.5 } });
+                    fireEvent.change(rangeInput!, { target: { value: 0.5 } });
                 });
             });
 
@@ -83,7 +83,7 @@ describe("SeekBar", () => {
                 beforeEach(() => {
                     mocked(playback.skipTo).mockClear();
                     act(() => {
-                        seekBarRef.current.left();
+                        seekBarRef.current!.left();
                     });
                 });
 
@@ -96,7 +96,7 @@ describe("SeekBar", () => {
                 beforeEach(() => {
                     mocked(playback.skipTo).mockClear();
                     act(() => {
-                        seekBarRef.current.right();
+                        seekBarRef.current!.right();
                     });
                 });