Fix seekbar position for zero length audio (#9949)

Author: weeman1337

src/utils/numbers.ts

@@ -38,5 +38,6 @@ export function percentageWithin(pct: number, min: number, max: number): number
 }
 
 export function percentageOf(val: number, min: number, max: number): number {
-    return (val - min) / (max - min);
+    const percentage = (val - min) / (max - min);
+    return Number.isNaN(percentage) ? 0 : percentage;
 }

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

@@ -34,15 +34,29 @@ describe("SeekBar", () => {
             frameRequestCallback = callback;
             return 0;
         });
-        playback = createTestPlayback();
     });
 
     afterEach(() => {
         mocked(window.requestAnimationFrame).mockRestore();
     });
 
+    describe("when rendering a SeekBar for an empty playback", () => {
+        beforeEach(() => {
+            playback = createTestPlayback({
+                durationSeconds: 0,
+                timeSeconds: 0,
+            });
+            renderResult = render(<SeekBar ref={seekBarRef} playback={playback} />);
+        });
+
+        it("should render correctly", () => {
+            expect(renderResult.container).toMatchSnapshot();
+        });
+    });
+
     describe("when rendering a SeekBar", () => {
         beforeEach(() => {
+            playback = createTestPlayback();
             renderResult = render(<SeekBar ref={seekBarRef} playback={playback} />);
         });
 

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

@@ -15,6 +15,21 @@ exports[`SeekBar when rendering a SeekBar and the playback proceeds should rende
 </div>
 `;
 
+exports[`SeekBar when rendering a SeekBar for an empty playback should render correctly 1`] = `
+<div>
+  <input
+    class="mx_SeekBar"
+    max="1"
+    min="0"
+    step="0.001"
+    style="--fillTo: 0;"
+    tabindex="0"
+    type="range"
+    value="0"
+  />
+</div>
+`;
+
 exports[`SeekBar when rendering a SeekBar should render the initial position 1`] = `
 <div>
   <input

test/test-utils/audio.ts

@@ -22,7 +22,7 @@ import { PlaybackClock } from "../../src/audio/PlaybackClock";
 import { UPDATE_EVENT } from "../../src/stores/AsyncStore";
 import { PublicInterface } from "../@types/common";
 
-export const createTestPlayback = (): Playback => {
+export const createTestPlayback = (overrides: Partial<Playback> = {}): Playback => {
     const eventEmitter = new EventEmitter();
 
     return {
@@ -63,6 +63,7 @@ export const createTestPlayback = (): Playback => {
         liveData: new SimpleObservable<number[]>(),
         durationSeconds: 31415,
         timeSeconds: 3141,
+        ...overrides,
     } as PublicInterface<Playback> as Playback;
 };
 

test/utils/numbers-test.ts

@@ -160,5 +160,9 @@ describe("numbers", () => {
             const result = percentageOf(14.28, 10.2, 20.4);
             expect(result).toBe(0.4);
         });
+
+        it("should return 0 for values that cause a division by zero", () => {
+            expect(percentageOf(0, 0, 0)).toBe(0);
+        });
     });
 });