From ed06ed018578a04efcd5c6908997e40e3ac0395b Mon Sep 17 00:00:00 2001
From: Michael Weimann <michaelw@matrix.org>
Date: Mon, 23 Jan 2023 17:28:31 +0100
Subject: [PATCH] Fix seekbar position for zero length audio (#9949)

---
 src/utils/numbers.ts                             |  3 ++-
 .../views/audio_messages/SeekBar-test.tsx        | 16 +++++++++++++++-
 .../__snapshots__/SeekBar-test.tsx.snap          | 15 +++++++++++++++
 test/test-utils/audio.ts                         |  3 ++-
 test/utils/numbers-test.ts                       |  4 ++++
 5 files changed, 38 insertions(+), 3 deletions(-)

diff --git a/src/utils/numbers.ts b/src/utils/numbers.ts
index 180e4f7950..e2a89833fd 100644
--- a/src/utils/numbers.ts
+++ b/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;
 }
diff --git a/test/components/views/audio_messages/SeekBar-test.tsx b/test/components/views/audio_messages/SeekBar-test.tsx
index e957daf0fe..44f6967c5a 100644
--- a/test/components/views/audio_messages/SeekBar-test.tsx
+++ b/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} />);
         });
 
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 8c66fda4d7..866fc65708 100644
--- a/test/components/views/audio_messages/__snapshots__/SeekBar-test.tsx.snap
+++ b/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
diff --git a/test/test-utils/audio.ts b/test/test-utils/audio.ts
index a49a275e4c..aaab0ec56d 100644
--- a/test/test-utils/audio.ts
+++ b/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;
 };
 
diff --git a/test/utils/numbers-test.ts b/test/utils/numbers-test.ts
index 34ffaaa4ee..cfd594d5d0 100644
--- a/test/utils/numbers-test.ts
+++ b/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);
+        });
     });
 });