Update voice broadcast header to new design (#9415)

2022-10-14 10:09:38 +02:00 · 2022-10-14 10:09:38 +02:00 · bbb02c30d9
parent 583d1b0318
commit bbb02c30d9
15 changed files with 120 additions and 126 deletions
--- 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;
 }
--- 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;
--- 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],
 ]);
--- 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>
--- 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">
--- 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>
    );
--- 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,
--- 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,
    };
--- 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();
    }
 }
--- 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 <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;

@ -29,12 +39,14 @@ describe("VoiceBroadcastHeader", () => {
        return render(<VoiceBroadcastHeader
            live={live}
            sender={sender}
-            roomName={roomName}
+            room={room}
            showBroadcast={showBroadcast}
        />);
    };

    beforeAll(() => {
+        client = stubClient();
+        room = mkRoom(client, roomId);
        sender.name = "test user";
    });

--- 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"
-      >
-        test user
-      </div>
      <div
        class="mx_VoiceBroadcastHeader_room"
      >
-        test room
+        !room:example.com
+      </div>
+      <div
+        class="mx_VoiceBroadcastHeader_line"
+      >
+        <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"
-      >
-        test user
-      </div>
      <div
        class="mx_VoiceBroadcastHeader_room"
      >
-        test room
+        !room:example.com
+      </div>
+      <div
+        class="mx_VoiceBroadcastHeader_line"
+      >
+        <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>
--- 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";
--- 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";
--- a/test/voice-broadcast/components/molecules/snapshots/VoiceBroadcastPlaybackBody-test.tsx.snap
+++ b/test/voice-broadcast/components/molecules/snapshots/VoiceBroadcastPlaybackBody-test.tsx.snap
@ -8,39 +8,31 @@ 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"
-        >
-          @user:example.com
-        </div>
        <div
          class="mx_VoiceBroadcastHeader_room"
        >
          My room
        </div>
+        <div
+          class="mx_VoiceBroadcastHeader_line"
+        >
+          <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"
        >
--- a/test/voice-broadcast/components/molecules/snapshots/VoiceBroadcastRecordingBody-test.tsx.snap
+++ b/test/voice-broadcast/components/molecules/snapshots/VoiceBroadcastRecordingBody-test.tsx.snap
@ -8,39 +8,31 @@ exports[`VoiceBroadcastRecordingBody when rendering a live broadcast should rend
    <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"
-        >
-          @user:example.com
-        </div>
        <div
          class="mx_VoiceBroadcastHeader_room"
        >
          My room
        </div>
+        <div
+          class="mx_VoiceBroadcastHeader_line"
+        >
+          <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>
      <div
        class="mx_LiveBadge"