Implement new voice broadcast header design

matrix-org · Oct 14, 2022 · 607f0dd · 607f0dd
1 parent 88d116c
commit 607f0dd
Show file tree

Hide file tree

Showing 14 changed files with 113 additions and 119 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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<VoiceBroadcastHeaderProps> = ({
     live,
     sender,
-    roomName,
+    room,
     showBroadcast = false,
 }) => {
     const broadcast = showBroadcast
@@ -40,13 +40,14 @@ export const VoiceBroadcastHeader: React.FC<VoiceBroadcastHeaderProps> = ({
         : null;
     const liveBadge = live ? <LiveBadge /> : null;
     return <div className="mx_VoiceBroadcastHeader">
-        <MemberAvatar member={sender} fallbackUserId={sender.userId} />
+        <RoomAvatar room={room} width={32} height={32} />
         <div className="mx_VoiceBroadcastHeader_content">
-            <div className="mx_VoiceBroadcastHeader_sender">
-                { sender.name }
-            </div>
             <div className="mx_VoiceBroadcastHeader_room">
-                { roomName }
+                { room.name }
+            </div>
+            <div className="mx_VoiceBroadcastHeader_line">
+                <Icon type={IconType.Microphone} colour={IconColour.CompoundSecondaryContent} />
+                { sender.name }
             </div>
             { broadcast }
         </div>

diff --git 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<VoiceBroadcastPlaybackBodyProp
     playback,
 }) => {
     const {
-        roomName,
+        room,
         sender,
         toggle,
         playbackState,
@@ -42,7 +42,7 @@ export const VoiceBroadcastPlaybackBody: React.FC<VoiceBroadcastPlaybackBodyProp
             <VoiceBroadcastHeader
                 live={false}
                 sender={sender}
-                roomName={roomName}
+                room={room}
                 showBroadcast={true}
             />
             <div className="mx_VoiceBroadcastPlaybackBody_controls">

diff --git 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<VoiceBroadcastRecordingBodyProps> = ({ recording }) => {
     const {
         live,
-        roomName,
+        room,
         sender,
         stopRecording,
     } = useVoiceBroadcastRecording(recording);
@@ -35,7 +35,7 @@ export const VoiceBroadcastRecordingBody: React.FC<VoiceBroadcastRecordingBodyPr
             <VoiceBroadcastHeader
                 live={live}
                 sender={sender}
-                roomName={roomName}
+                room={room}
             />
         </div>
     );

diff --git 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
@@ -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
@@ -13,28 +13,40 @@ 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 <div data-testid="room-avatar">room avatar: { room.name }</div>;
+    }),
+}));
 
 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;
 
     const renderHeader = (live: boolean, showBroadcast: boolean = undefined): RenderResult => {
         return render(<VoiceBroadcastHeader
             live={live}
             sender={sender}
-            roomName={roomName}
+            room={room}
             showBroadcast={showBroadcast}
         />);
     };
 
     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
@@ -5,38 +5,30 @@ exports[`VoiceBroadcastHeader when rendering a live broadcast header with broadc
   <div
     class="mx_VoiceBroadcastHeader"
   >
-    <span
-      class="mx_BaseAvatar"
-      role="presentation"
+    <div
+      data-testid="room-avatar"
     >
-      <span
-        aria-hidden="true"
-        class="mx_BaseAvatar_initial"
-        style="font-size: 26px; width: 40px; line-height: 40px;"
-      >
-        T
-      </span>
-      <img
-        alt=""
-        aria-hidden="true"
-        class="mx_BaseAvatar_image"
-        src="data:image/png;base64,00"
-        style="width: 40px; height: 40px;"
-        title="@user:example.com"
-      />
-    </span>
+      room avatar: 
+      !room:example.com
+    </div>
     <div
       class="mx_VoiceBroadcastHeader_content"
     >
       <div
-        class="mx_VoiceBroadcastHeader_sender"
+        class="mx_VoiceBroadcastHeader_room"
       >
-        test user
+        !room:example.com
       </div>
       <div
-        class="mx_VoiceBroadcastHeader_room"
+        class="mx_VoiceBroadcastHeader_line"
       >
-        test room
+        <i
+          aria-hidden="true"
+          class="mx_Icon mx_Icon_16 mx_Icon_compound-secondary-content"
+          role="presentation"
+          style="mask-image: url(\\"image-file-stub\\");"
+        />
+        test user
       </div>
       <div
         class="mx_VoiceBroadcastHeader_line"
@@ -70,38 +62,30 @@ exports[`VoiceBroadcastHeader when rendering a non-live broadcast header should
   <div
     class="mx_VoiceBroadcastHeader"
   >
-    <span
-      class="mx_BaseAvatar"
-      role="presentation"
+    <div
+      data-testid="room-avatar"
     >
-      <span
-        aria-hidden="true"
-        class="mx_BaseAvatar_initial"
-        style="font-size: 26px; width: 40px; line-height: 40px;"
-      >
-        T
-      </span>
-      <img
-        alt=""
-        aria-hidden="true"
-        class="mx_BaseAvatar_image"
-        src="data:image/png;base64,00"
-        style="width: 40px; height: 40px;"
-        title="@user:example.com"
-      />
-    </span>
+      room avatar: 
+      !room:example.com
+    </div>
     <div
       class="mx_VoiceBroadcastHeader_content"
     >
       <div
-        class="mx_VoiceBroadcastHeader_sender"
+        class="mx_VoiceBroadcastHeader_room"
       >
-        test user
+        !room:example.com
       </div>
       <div
-        class="mx_VoiceBroadcastHeader_room"
+        class="mx_VoiceBroadcastHeader_line"
       >
-        test room
+        <i
+          aria-hidden="true"
+          class="mx_Icon mx_Icon_16 mx_Icon_compound-secondary-content"
+          role="presentation"
+          style="mask-image: url(\\"image-file-stub\\");"
+        />
+        test user
       </div>
     </div>
   </div>

diff --git a/test/voice-broadcast/components/molecules/VoiceBroadcastPlaybackBody-test.tsx b/test/voice-broadcast/components/molecules/VoiceBroadcastPlaybackBody-test.tsx
@@ -27,6 +27,14 @@ import {
 } from "../../../../src/voice-broadcast";
 import { mkEvent, 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 <div data-testid="room-avatar">room avatar: { room.name }</div>;
+    }),
+}));
+
 describe("VoiceBroadcastPlaybackBody", () => {
     const userId = "@user:example.com";
     const roomId = "!room:example.com";

diff --git a/test/voice-broadcast/components/molecules/VoiceBroadcastRecordingBody-test.tsx b/test/voice-broadcast/components/molecules/VoiceBroadcastRecordingBody-test.tsx
@@ -27,6 +27,14 @@ import {
 } from "../../../../src/voice-broadcast";
 import { mkEvent, 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 <div data-testid="room-avatar">room avatar: { room.name }</div>;
+    }),
+}));
+
 describe("VoiceBroadcastRecordingBody", () => {
     const userId = "@user:example.com";
     const roomId = "!room:example.com";

diff --git a/...ice-broadcast/components/molecules/__snapshots__/VoiceBroadcastPlaybackBody-test.tsx.snap b/...ice-broadcast/components/molecules/__snapshots__/VoiceBroadcastPlaybackBody-test.tsx.snap
@@ -8,38 +8,30 @@ exports[`VoiceBroadcastPlaybackBody when rendering a broadcast should render as
     <div
       class="mx_VoiceBroadcastHeader"
     >
-      <span
-        class="mx_BaseAvatar"
-        role="presentation"
+      <div
+        data-testid="room-avatar"
       >
-        <span
-          aria-hidden="true"
-          class="mx_BaseAvatar_initial"
-          style="font-size: 26px; width: 40px; line-height: 40px;"
-        >
-          U
-        </span>
-        <img
-          alt=""
-          aria-hidden="true"
-          class="mx_BaseAvatar_image"
-          src="data:image/png;base64,00"
-          style="width: 40px; height: 40px;"
-          title="@user:example.com"
-        />
-      </span>
+        room avatar: 
+        My room
+      </div>
       <div
         class="mx_VoiceBroadcastHeader_content"
       >
         <div
-          class="mx_VoiceBroadcastHeader_sender"
+          class="mx_VoiceBroadcastHeader_room"
         >
-          @user:example.com
+          My room
         </div>
         <div
-          class="mx_VoiceBroadcastHeader_room"
+          class="mx_VoiceBroadcastHeader_line"
         >
-          My room
+          <i
+            aria-hidden="true"
+            class="mx_Icon mx_Icon_16 mx_Icon_compound-secondary-content"
+            role="presentation"
+            style="mask-image: url(\\"image-file-stub\\");"
+          />
+          @user:example.com
         </div>
         <div
           class="mx_VoiceBroadcastHeader_line"