From bbb02c30d96316bf89c656bd09b07cf0427e36c2 Mon Sep 17 00:00:00 2001 From: Michael Weimann Date: Fri, 14 Oct 2022 10:09:38 +0200 Subject: [PATCH] Update voice broadcast header to new design (#9415) --- .../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 +- .../models/VoiceBroadcastPlayback.ts | 2 +- .../atoms/VoiceBroadcastHeader-test.tsx | 18 +++- .../VoiceBroadcastHeader-test.tsx.snap | 84 ++++++++----------- .../VoiceBroadcastPlaybackBody-test.tsx | 8 ++ .../VoiceBroadcastRecordingBody-test.tsx | 8 ++ .../VoiceBroadcastPlaybackBody-test.tsx.snap | 40 ++++----- .../VoiceBroadcastRecordingBody-test.tsx.snap | 40 ++++----- 15 files changed, 120 insertions(+), 126 deletions(-) diff --git a/res/css/voice-broadcast/atoms/_PlaybackControlButton.pcss b/res/css/voice-broadcast/atoms/_PlaybackControlButton.pcss index fc4c1386b6..fd2c3ad73c 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 dc1522811c..b7d934a414 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 9f5f3e2d3c..2241a711ca 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 d7175db30b..4f91efc8d9 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 6ebc67ee63..ed9f5bef65 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 45ee289103..1c81e295c6 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 25fcb93d51..3ac21366c0 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 57caae03fe..fcf6a36876 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/src/voice-broadcast/models/VoiceBroadcastPlayback.ts b/src/voice-broadcast/models/VoiceBroadcastPlayback.ts index 28bea62e10..67a3e7c626 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(); } } diff --git a/test/voice-broadcast/components/atoms/VoiceBroadcastHeader-test.tsx b/test/voice-broadcast/components/atoms/VoiceBroadcastHeader-test.tsx index 6b07b213f7..d3a3133ec6 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 3e3bd2b1d2..601dfd8606 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 -
- test room + !room:example.com +
+
+