Show initial broadcast position in seekbar (#9796)

Author: weeman1337

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

test/components/views/audio_messages/SeekBar-test.tsx

@@ -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();
                     });
                 });
 

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>
 `;