Extract PlaybackInterface (#9526)

test/audio/Playback-test.ts

@@ -36,6 +36,7 @@ describe('Playback', () => {
         suspend: jest.fn(),
         resume: jest.fn(),
         createBufferSource: jest.fn().mockReturnValue(mockAudioBufferSourceNode),
+        currentTime: 1337,
     };
 
     const mockAudioBuffer = {
@@ -61,9 +62,12 @@ describe('Playback', () => {
         const buffer = new ArrayBuffer(8);
 
         const playback = new Playback(buffer);
+        playback.clockInfo.durationSeconds = mockAudioBuffer.duration;
 
         expect(playback.sizeBytes).toEqual(8);
         expect(playback.clockInfo).toBeTruthy();
+        expect(playback.liveData).toBe(playback.clockInfo.liveData);
+        expect(playback.timeSeconds).toBe(1337 % 99);
         expect(playback.currentState).toEqual(PlaybackState.Decoding);
     });
 
@@ -118,6 +122,7 @@ describe('Playback', () => {
 
             // clock was updated
             expect(playback.clockInfo.durationSeconds).toEqual(mockAudioBuffer.duration);
+            expect(playback.durationSeconds).toEqual(mockAudioBuffer.duration);
 
             expect(playback.currentState).toEqual(PlaybackState.Stopped);
         });
@@ -144,6 +149,7 @@ describe('Playback', () => {
 
             // clock was updated
             expect(playback.clockInfo.durationSeconds).toEqual(mockAudioBuffer.duration);
+            expect(playback.durationSeconds).toEqual(mockAudioBuffer.duration);
 
             expect(playback.currentState).toEqual(PlaybackState.Stopped);
         });

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

@@ -0,0 +1,106 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React, { createRef, RefObject } from "react";
+import { mocked } from "jest-mock";
+import { act, fireEvent, render, RenderResult } from "@testing-library/react";
+
+import { Playback } from "../../../../src/audio/Playback";
+import { createTestPlayback } from "../../../test-utils/audio";
+import SeekBar from "../../../../src/components/views/audio_messages/SeekBar";
+
+describe("SeekBar", () => {
+    let playback: Playback;
+    let renderResult: RenderResult;
+    let frameRequestCallback: FrameRequestCallback;
+    let seekBarRef: RefObject<SeekBar>;
+
+    beforeEach(() => {
+        seekBarRef = createRef();
+        jest.spyOn(window, "requestAnimationFrame").mockImplementation(
+            (callback: FrameRequestCallback) => { frameRequestCallback = callback; return 0; },
+        );
+        playback = createTestPlayback();
+    });
+
+    afterEach(() => {
+        mocked(window.requestAnimationFrame).mockRestore();
+    });
+
+    describe("when rendering a SeekBar", () => {
+        beforeEach(async () => {
+            renderResult = render(<SeekBar ref={seekBarRef} playback={playback} />);
+            act(() => {
+                playback.liveData.update([playback.timeSeconds, playback.durationSeconds]);
+                frameRequestCallback(0);
+            });
+        });
+
+        it("should render as expected", () => {
+            // expected value 3141 / 31415 ~ 0.099984084
+            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 } });
+                });
+            });
+
+            it("should update the playback", () => {
+                expect(playback.skipTo).toHaveBeenCalledWith(0.5 * playback.durationSeconds);
+            });
+
+            describe("and seeking left", () => {
+                beforeEach(() => {
+                    mocked(playback.skipTo).mockClear();
+                    act(() => {
+                        seekBarRef.current.left();
+                    });
+                });
+
+                it("should skip to minus 5 seconds", () => {
+                    expect(playback.skipTo).toHaveBeenCalledWith(playback.timeSeconds - 5);
+                });
+            });
+
+            describe("and seeking right", () => {
+                beforeEach(() => {
+                    mocked(playback.skipTo).mockClear();
+                    act(() => {
+                        seekBarRef.current.right();
+                    });
+                });
+
+                it("should skip to plus 5 seconds", () => {
+                    expect(playback.skipTo).toHaveBeenCalledWith(playback.timeSeconds + 5);
+                });
+            });
+        });
+    });
+
+    describe("when rendering a disabled SeekBar", () => {
+        beforeEach(async () => {
+            renderResult = render(<SeekBar disabled={true} playback={playback} />);
+        });
+
+        it("should render as expected", () => {
+            expect(renderResult.container).toMatchSnapshot();
+        });
+    });
+});

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

@@ -0,0 +1,32 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SeekBar when rendering a SeekBar should render as expected 1`] = `
+<div>
+  <input
+    class="mx_SeekBar"
+    max="1"
+    min="0"
+    step="0.001"
+    style="--fillTo: 0.0999840840362884;"
+    tabindex="0"
+    type="range"
+    value="0.0999840840362884"
+  />
+</div>
+`;
+
+exports[`SeekBar when rendering a disabled SeekBar should render as expected 1`] = `
+<div>
+  <input
+    class="mx_SeekBar"
+    disabled=""
+    max="1"
+    min="0"
+    step="0.001"
+    style="--fillTo: 0;"
+    tabindex="0"
+    type="range"
+    value="0"
+  />
+</div>
+`;

test/test-utils/audio.ts

@@ -63,6 +63,9 @@ export const createTestPlayback = (): Playback => {
         eventNames: eventEmitter.eventNames.bind(eventEmitter),
         prependListener: eventEmitter.prependListener.bind(eventEmitter),
         prependOnceListener: eventEmitter.prependOnceListener.bind(eventEmitter),
+        liveData: new SimpleObservable<number[]>(),
+        durationSeconds: 31415,
+        timeSeconds: 3141,
     } as PublicInterface<Playback> as Playback;
 };