From 88d116c0833386eead44689d53c6467fac4488a0 Mon Sep 17 00:00:00 2001 From: Michael Weimann Date: Thu, 13 Oct 2022 14:04:46 +0200 Subject: [PATCH 1/2] Implement Voice Broadcast UI --- src/voice-broadcast/models/VoiceBroadcastPlayback.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/voice-broadcast/models/VoiceBroadcastPlayback.ts b/src/voice-broadcast/models/VoiceBroadcastPlayback.ts index 28bea62e101..67a3e7c626f 100644 --- a/src/voice-broadcast/models/VoiceBroadcastPlayback.ts +++ b/src/voice-broadcast/models/VoiceBroadcastPlayback.ts @@ -70,7 +70,7 @@ export class VoiceBroadcastPlayback this.emit(VoiceBroadcastPlaybackEvent.StateChanged, state); } - public destroy(): void { + destroy(): void { this.removeAllListeners(); } } From 607f0dd03afc9a31f92754f6c964f6bbe27820db Mon Sep 17 00:00:00 2001 From: Michael Weimann Date: Thu, 13 Oct 2022 20:48:48 +0200 Subject: [PATCH 2/2] Implement new voice broadcast header design --- .../atoms/_PlaybackControlButton.pcss | 1 + .../atoms/_VoiceBroadcastHeader.pcss | 11 +-- src/components/atoms/Icon.tsx | 3 + .../components/atoms/VoiceBroadcastHeader.tsx | 19 ++--- .../molecules/VoiceBroadcastPlaybackBody.tsx | 4 +- .../molecules/VoiceBroadcastRecordingBody.tsx | 4 +- .../hooks/useVoiceBroadcastPlayback.ts | 2 +- .../hooks/useVoiceBroadcastRecording.ts | 2 +- .../atoms/VoiceBroadcastHeader-test.tsx | 18 ++++- .../VoiceBroadcastHeader-test.tsx.snap | 76 ++++++++----------- .../VoiceBroadcastPlaybackBody-test.tsx | 8 ++ .../VoiceBroadcastRecordingBody-test.tsx | 8 ++ .../VoiceBroadcastPlaybackBody-test.tsx.snap | 38 ++++------ .../VoiceBroadcastRecordingBody-test.tsx.snap | 38 ++++------ 14 files changed, 113 insertions(+), 119 deletions(-) diff --git a/res/css/voice-broadcast/atoms/_PlaybackControlButton.pcss b/res/css/voice-broadcast/atoms/_PlaybackControlButton.pcss index fc4c1386b6e..fd2c3ad73c5 100644 --- a/res/css/voice-broadcast/atoms/_PlaybackControlButton.pcss +++ b/res/css/voice-broadcast/atoms/_PlaybackControlButton.pcss @@ -21,5 +21,6 @@ limitations under the License. display: flex; height: 32px; justify-content: center; + margin-bottom: $spacing-8; width: 32px; } diff --git a/res/css/voice-broadcast/atoms/_VoiceBroadcastHeader.pcss b/res/css/voice-broadcast/atoms/_VoiceBroadcastHeader.pcss index dc1522811c4..b7d934a414a 100644 --- a/res/css/voice-broadcast/atoms/_VoiceBroadcastHeader.pcss +++ b/res/css/voice-broadcast/atoms/_VoiceBroadcastHeader.pcss @@ -16,20 +16,13 @@ limitations under the License. display: flex; gap: $spacing-8; line-height: 20px; - margin-bottom: $spacing-8; + margin-bottom: $spacing-16; width: 266px; } -.mx_VoiceBroadcastHeader_sender { - font-size: $font-12px; - font-weight: $font-semi-bold; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - .mx_VoiceBroadcastHeader_room { font-size: $font-12px; + font-weight: $font-semi-bold; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; diff --git a/src/components/atoms/Icon.tsx b/src/components/atoms/Icon.tsx index 9f5f3e2d3c3..2241a711cab 100644 --- a/src/components/atoms/Icon.tsx +++ b/src/components/atoms/Icon.tsx @@ -17,17 +17,20 @@ limitations under the License. import React from "react"; import liveIcon from "../../../res/img/element-icons/live.svg"; +import microphoneIcon from "../../../res/img/voip/call-view/mic-on.svg"; import pauseIcon from "../../../res/img/element-icons/pause.svg"; import playIcon from "../../../res/img/element-icons/play.svg"; export enum IconType { Live, + Microphone, Pause, Play, } const iconTypeMap = new Map([ [IconType.Live, liveIcon], + [IconType.Microphone, microphoneIcon], [IconType.Pause, pauseIcon], [IconType.Play, playIcon], ]); diff --git a/src/voice-broadcast/components/atoms/VoiceBroadcastHeader.tsx b/src/voice-broadcast/components/atoms/VoiceBroadcastHeader.tsx index d7175db30ba..4f91efc8d9d 100644 --- a/src/voice-broadcast/components/atoms/VoiceBroadcastHeader.tsx +++ b/src/voice-broadcast/components/atoms/VoiceBroadcastHeader.tsx @@ -12,24 +12,24 @@ limitations under the License. */ import React from "react"; -import { RoomMember } from "matrix-js-sdk/src/matrix"; +import { Room, RoomMember } from "matrix-js-sdk/src/matrix"; -import MemberAvatar from "../../../components/views/avatars/MemberAvatar"; import { LiveBadge } from "../.."; import { Icon, IconColour, IconType } from "../../../components/atoms/Icon"; import { _t } from "../../../languageHandler"; +import RoomAvatar from "../../../components/views/avatars/RoomAvatar"; interface VoiceBroadcastHeaderProps { live: boolean; sender: RoomMember; - roomName: string; + room: Room; showBroadcast?: boolean; } export const VoiceBroadcastHeader: React.FC = ({ live, sender, - roomName, + room, showBroadcast = false, }) => { const broadcast = showBroadcast @@ -40,13 +40,14 @@ export const VoiceBroadcastHeader: React.FC = ({ : null; const liveBadge = live ? : null; return
- +
-
- { sender.name } -
- { roomName } + { room.name } +
+
+ + { sender.name }
{ broadcast }
diff --git a/src/voice-broadcast/components/molecules/VoiceBroadcastPlaybackBody.tsx b/src/voice-broadcast/components/molecules/VoiceBroadcastPlaybackBody.tsx index 6ebc67ee63b..ed9f5bef65a 100644 --- a/src/voice-broadcast/components/molecules/VoiceBroadcastPlaybackBody.tsx +++ b/src/voice-broadcast/components/molecules/VoiceBroadcastPlaybackBody.tsx @@ -31,7 +31,7 @@ export const VoiceBroadcastPlaybackBody: React.FC { const { - roomName, + room, sender, toggle, playbackState, @@ -42,7 +42,7 @@ export const VoiceBroadcastPlaybackBody: React.FC
diff --git a/src/voice-broadcast/components/molecules/VoiceBroadcastRecordingBody.tsx b/src/voice-broadcast/components/molecules/VoiceBroadcastRecordingBody.tsx index 45ee289103d..1c81e295c6f 100644 --- a/src/voice-broadcast/components/molecules/VoiceBroadcastRecordingBody.tsx +++ b/src/voice-broadcast/components/molecules/VoiceBroadcastRecordingBody.tsx @@ -22,7 +22,7 @@ interface VoiceBroadcastRecordingBodyProps { export const VoiceBroadcastRecordingBody: React.FC = ({ recording }) => { const { live, - roomName, + room, sender, stopRecording, } = useVoiceBroadcastRecording(recording); @@ -35,7 +35,7 @@ export const VoiceBroadcastRecordingBody: React.FC
); diff --git a/src/voice-broadcast/hooks/useVoiceBroadcastPlayback.ts b/src/voice-broadcast/hooks/useVoiceBroadcastPlayback.ts index 25fcb93d51a..3ac21366c0f 100644 --- a/src/voice-broadcast/hooks/useVoiceBroadcastPlayback.ts +++ b/src/voice-broadcast/hooks/useVoiceBroadcastPlayback.ts @@ -41,7 +41,7 @@ export const useVoiceBroadcastPlayback = (playback: VoiceBroadcastPlayback) => { ); return { - roomName: room.name, + room: room, sender: playback.infoEvent.sender, toggle: playbackToggle, playbackState, diff --git a/src/voice-broadcast/hooks/useVoiceBroadcastRecording.ts b/src/voice-broadcast/hooks/useVoiceBroadcastRecording.ts index 57caae03fe2..fcf6a36876d 100644 --- a/src/voice-broadcast/hooks/useVoiceBroadcastRecording.ts +++ b/src/voice-broadcast/hooks/useVoiceBroadcastRecording.ts @@ -44,7 +44,7 @@ export const useVoiceBroadcastRecording = (recording: VoiceBroadcastRecording) = return { live, - roomName: room.name, + room, sender: recording.infoEvent.sender, stopRecording, }; diff --git a/test/voice-broadcast/components/atoms/VoiceBroadcastHeader-test.tsx b/test/voice-broadcast/components/atoms/VoiceBroadcastHeader-test.tsx index 6b07b213f71..d3a3133ec68 100644 --- a/test/voice-broadcast/components/atoms/VoiceBroadcastHeader-test.tsx +++ b/test/voice-broadcast/components/atoms/VoiceBroadcastHeader-test.tsx @@ -13,15 +13,25 @@ limitations under the License. import React from "react"; import { Container } from "react-dom"; -import { RoomMember } from "matrix-js-sdk/src/matrix"; +import { MatrixClient, Room, RoomMember } from "matrix-js-sdk/src/matrix"; import { render, RenderResult } from "@testing-library/react"; import { VoiceBroadcastHeader } from "../../../../src/voice-broadcast"; +import { mkRoom, stubClient } from "../../../test-utils"; + +// mock RoomAvatar, because it is doing too much fancy stuff +jest.mock("../../../../src/components/views/avatars/RoomAvatar", () => ({ + __esModule: true, + default: jest.fn().mockImplementation(({ room }) => { + return
room avatar: { room.name }
; + }), +})); describe("VoiceBroadcastHeader", () => { const userId = "@user:example.com"; const roomId = "!room:example.com"; - const roomName = "test room"; + let client: MatrixClient; + let room: Room; const sender = new RoomMember(roomId, userId); let container: Container; @@ -29,12 +39,14 @@ describe("VoiceBroadcastHeader", () => { return render(); }; beforeAll(() => { + client = stubClient(); + room = mkRoom(client, roomId); sender.name = "test user"; }); diff --git a/test/voice-broadcast/components/atoms/__snapshots__/VoiceBroadcastHeader-test.tsx.snap b/test/voice-broadcast/components/atoms/__snapshots__/VoiceBroadcastHeader-test.tsx.snap index 3e3bd2b1d28..601dfd86064 100644 --- a/test/voice-broadcast/components/atoms/__snapshots__/VoiceBroadcastHeader-test.tsx.snap +++ b/test/voice-broadcast/components/atoms/__snapshots__/VoiceBroadcastHeader-test.tsx.snap @@ -5,38 +5,30 @@ exports[`VoiceBroadcastHeader when rendering a live broadcast header with broadc
- - - - + room avatar: + !room:example.com +
- test user + !room:example.com
- test room +