From f8d43eb829f7b8f4caa4b48bbceffe4c0dce6e8f Mon Sep 17 00:00:00 2001 From: Michael Weimann Date: Mon, 17 Oct 2022 20:24:18 +0200 Subject: [PATCH 1/2] Implement VoiceBroadcastBody updat --- .../components/VoiceBroadcastBody.tsx | 35 ++++++++++++++----- .../components/VoiceBroadcastBody-test.tsx | 30 +++++++++++----- 2 files changed, 47 insertions(+), 18 deletions(-) diff --git a/src/voice-broadcast/components/VoiceBroadcastBody.tsx b/src/voice-broadcast/components/VoiceBroadcastBody.tsx index 3bd0dd6ed18..b05c6c894b9 100644 --- a/src/voice-broadcast/components/VoiceBroadcastBody.tsx +++ b/src/voice-broadcast/components/VoiceBroadcastBody.tsx @@ -14,8 +14,8 @@ See the License for the specific language governing permissions and limitations under the License. */ -import React from "react"; -import { MatrixEvent } from "matrix-js-sdk/src/matrix"; +import React, { useEffect, useState } from "react"; +import { MatrixEvent, RelationType } from "matrix-js-sdk/src/matrix"; import { VoiceBroadcastRecordingBody, @@ -28,17 +28,34 @@ import { } from ".."; import { IBodyProps } from "../../components/views/messages/IBodyProps"; import { MatrixClientPeg } from "../../MatrixClientPeg"; -import { getReferenceRelationsForEvent } from "../../events"; +import { RelationsHelper, RelationsHelperEvent } from "../../events/RelationsHelper"; export const VoiceBroadcastBody: React.FC = ({ mxEvent }) => { const client = MatrixClientPeg.get(); - const relations = getReferenceRelationsForEvent(mxEvent, VoiceBroadcastInfoEventType, client); - const relatedEvents = relations?.getRelations(); - const state = !relatedEvents?.find((event: MatrixEvent) => { - return event.getContent()?.state === VoiceBroadcastInfoState.Stopped; - }) ? VoiceBroadcastInfoState.Started : VoiceBroadcastInfoState.Stopped; + const [infoState, setInfoState] = useState(mxEvent.getContent()?.state || VoiceBroadcastInfoState.Stopped); - if (shouldDisplayAsVoiceBroadcastRecordingTile(state, client, mxEvent)) { + useEffect(() => { + const onInfoEvent = (event: MatrixEvent) => { + if (event.getContent()?.state === VoiceBroadcastInfoState.Stopped) { + // only a stopped event can change the tile state + setInfoState(VoiceBroadcastInfoState.Stopped); + } + }; + + const relationsHelper = new RelationsHelper( + mxEvent, + RelationType.Reference, + VoiceBroadcastInfoEventType, + client, + ); + relationsHelper.on(RelationsHelperEvent.Add, onInfoEvent); + + return () => { + relationsHelper.destroy(); + }; + }); + + if (shouldDisplayAsVoiceBroadcastRecordingTile(infoState, client, mxEvent)) { const recording = VoiceBroadcastRecordingsStore.instance().getByInfoEvent(mxEvent, client); return ({ VoiceBroadcastRecordingBody: jest.fn(), @@ -41,9 +41,7 @@ jest.mock("../../../src/voice-broadcast/components/molecules/VoiceBroadcastPlayb VoiceBroadcastPlaybackBody: jest.fn(), })); -jest.mock("../../../src/voice-broadcast/utils/shouldDisplayAsVoiceBroadcastRecordingTile", () => ({ - shouldDisplayAsVoiceBroadcastRecordingTile: jest.fn(), -})); +jest.mock("../../../src/events/RelationsHelper"); describe("VoiceBroadcastBody", () => { const roomId = "!room:example.com"; @@ -111,22 +109,36 @@ describe("VoiceBroadcastBody", () => { describe("when displaying a voice broadcast recording", () => { beforeEach(() => { - mocked(shouldDisplayAsVoiceBroadcastRecordingTile).mockReturnValue(true); + renderVoiceBroadcast(); }); it("should render a voice broadcast recording body", () => { - renderVoiceBroadcast(); screen.getByTestId("voice-broadcast-recording-body"); }); + + describe("and the recordings ends", () => { + beforeEach(() => { + const stoppedEvent = mkVoiceBroadcastInfoEvent(VoiceBroadcastInfoState.Stopped); + const relationsHelper = mocked(RelationsHelper).mock.instances[5]; + act(() => { + // @ts-ignore + mocked(relationsHelper.on).mock.calls[0][1](stoppedEvent); + }); + }); + + it("should render a voice broadcast playback body", () => { + screen.getByTestId("voice-broadcast-playback-body"); + }); + }); }); describe("when displaying a voice broadcast playback", () => { beforeEach(() => { - mocked(shouldDisplayAsVoiceBroadcastRecordingTile).mockReturnValue(false); + mocked(client).getUserId.mockReturnValue("@other:example.com"); + renderVoiceBroadcast(); }); it("should render a voice broadcast playback body", () => { - renderVoiceBroadcast(); screen.getByTestId("voice-broadcast-playback-body"); }); }); From c94cd3c9b863f8736dc67c04b5737358271b0578 Mon Sep 17 00:00:00 2001 From: Michael Weimann Date: Mon, 17 Oct 2022 20:37:17 +0200 Subject: [PATCH 2/2] Add doc in VoiceBroadcastBody-test --- test/voice-broadcast/components/VoiceBroadcastBody-test.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/test/voice-broadcast/components/VoiceBroadcastBody-test.tsx b/test/voice-broadcast/components/VoiceBroadcastBody-test.tsx index 55154c6773c..7b01dd58bed 100644 --- a/test/voice-broadcast/components/VoiceBroadcastBody-test.tsx +++ b/test/voice-broadcast/components/VoiceBroadcastBody-test.tsx @@ -119,8 +119,10 @@ describe("VoiceBroadcastBody", () => { describe("and the recordings ends", () => { beforeEach(() => { const stoppedEvent = mkVoiceBroadcastInfoEvent(VoiceBroadcastInfoState.Stopped); + // get the RelationsHelper instanced used in VoiceBroadcastBody const relationsHelper = mocked(RelationsHelper).mock.instances[5]; act(() => { + // invoke the callback of the VoiceBroadcastBody hook to simulate an ended broadcast // @ts-ignore mocked(relationsHelper.on).mock.calls[0][1](stoppedEvent); });