Add live voice broadcast indicator to user menu (#9590)

res/css/compound/_Icon.pcss

@@ -25,6 +25,12 @@ limitations under the License.
     padding: 1px;
 }
 
+.mx_Icon_8 {
+    height: 8px;
+    flex: 0 0 8px;
+    width: 8px;
+}
+
 .mx_Icon_16 {
     height: 16px;
     flex: 0 0 16px;

res/css/structures/_UserMenu.pcss

@@ -30,6 +30,20 @@ limitations under the License.
                 pointer-events: none; /* makes the avatar non-draggable */
             }
         }
+
+        .mx_UserMenu_userAvatarLive {
+            align-items: center;
+            background-color: $alert;
+            border-radius: 6px;
+            color: $live-badge-color;
+            display: flex;
+            height: 12px;
+            justify-content: center;
+            left: 25px;
+            position: absolute;
+            top: 20px;
+            width: 12px;
+        }
     }
 
     .mx_UserMenu_name {

src/components/structures/UserMenu.tsx

@@ -51,6 +51,12 @@ import { UPDATE_SELECTED_SPACE } from "../../stores/spaces";
 import UserIdentifierCustomisations from "../../customisations/UserIdentifier";
 import PosthogTrackers from "../../PosthogTrackers";
 import { ViewHomePagePayload } from "../../dispatcher/payloads/ViewHomePagePayload";
+import { Icon as LiveIcon } from "../../../res/img/element-icons/live.svg";
+import {
+    VoiceBroadcastRecording,
+    VoiceBroadcastRecordingsStore,
+    VoiceBroadcastRecordingsStoreEvent,
+} from "../../voice-broadcast";
 
 interface IProps {
     isPanelCollapsed: boolean;
@@ -59,10 +65,11 @@ interface IProps {
 type PartialDOMRect = Pick<DOMRect, "width" | "left" | "top" | "height">;
 
 interface IState {
-    contextMenuPosition: PartialDOMRect;
+    contextMenuPosition: PartialDOMRect | null;
     isDarkTheme: boolean;
     isHighContrast: boolean;
-    selectedSpace?: Room;
+    selectedSpace?: Room | null;
+    showLiveAvatarAddon: boolean;
 }
 
 const toRightOf = (rect: PartialDOMRect) => {
@@ -86,6 +93,7 @@ export default class UserMenu extends React.Component<IProps, IState> {
     private themeWatcherRef: string;
     private readonly dndWatcherRef: string;
     private buttonRef: React.RefObject<HTMLButtonElement> = createRef();
+    private voiceBroadcastRecordingStore = VoiceBroadcastRecordingsStore.instance();
 
     constructor(props: IProps) {
         super(props);
@@ -95,6 +103,7 @@ export default class UserMenu extends React.Component<IProps, IState> {
             isDarkTheme: this.isUserOnDarkTheme(),
             isHighContrast: this.isUserOnHighContrastTheme(),
             selectedSpace: SpaceStore.instance.activeSpaceRoom,
+            showLiveAvatarAddon: this.voiceBroadcastRecordingStore.hasCurrent(),
         };
 
         OwnProfileStore.instance.on(UPDATE_EVENT, this.onProfileUpdate);
@@ -105,7 +114,17 @@ export default class UserMenu extends React.Component<IProps, IState> {
         return !!getHomePageUrl(SdkConfig.get());
     }
 
+    private onCurrentVoiceBroadcastRecordingChanged = (recording: VoiceBroadcastRecording): void => {
+        this.setState({
+            showLiveAvatarAddon: recording !== null,
+        });
+    };
+
     public componentDidMount() {
+        this.voiceBroadcastRecordingStore.on(
+            VoiceBroadcastRecordingsStoreEvent.CurrentChanged,
+            this.onCurrentVoiceBroadcastRecordingChanged,
+        );
         this.dispatcherRef = defaultDispatcher.register(this.onAction);
         this.themeWatcherRef = SettingsStore.watchSetting("theme", null, this.onThemeChanged);
     }
@@ -116,6 +135,10 @@ export default class UserMenu extends React.Component<IProps, IState> {
         if (this.dispatcherRef) defaultDispatcher.unregister(this.dispatcherRef);
         OwnProfileStore.instance.off(UPDATE_EVENT, this.onProfileUpdate);
         SpaceStore.instance.off(UPDATE_SELECTED_SPACE, this.onSelectedSpaceUpdate);
+        this.voiceBroadcastRecordingStore.off(
+            VoiceBroadcastRecordingsStoreEvent.CurrentChanged,
+            this.onCurrentVoiceBroadcastRecordingChanged,
+        );
     }
 
     private isUserOnDarkTheme(): boolean {
@@ -414,6 +437,12 @@ export default class UserMenu extends React.Component<IProps, IState> {
             </div>;
         }
 
+        const liveAvatarAddon = this.state.showLiveAvatarAddon
+            ? <div className="mx_UserMenu_userAvatarLive" data-testid="user-menu-live-vb">
+                <LiveIcon className="mx_Icon_8" />
+            </div>
+            : null;
+
         return <div className="mx_UserMenu">
             <ContextMenuButton
                 onClick={this.onOpenMenuClick}
@@ -432,9 +461,9 @@ export default class UserMenu extends React.Component<IProps, IState> {
                         resizeMethod="crop"
                         className="mx_UserMenu_userAvatar_BaseAvatar"
                     />
+                    { liveAvatarAddon }
                 </div>
                 { name }
-
                 { this.renderContextMenu() }
             </ContextMenuButton>
 

src/voice-broadcast/stores/VoiceBroadcastRecordingsStore.ts

@@ -31,7 +31,7 @@ interface EventMap {
  * This store provides access to the current and specific Voice Broadcast recordings.
  */
 export class VoiceBroadcastRecordingsStore extends TypedEventEmitter<VoiceBroadcastRecordingsStoreEvent, EventMap> {
-    private current: VoiceBroadcastRecording | null;
+    private current: VoiceBroadcastRecording | null = null;
     private recordings = new Map<string, VoiceBroadcastRecording>();
 
     public constructor() {
@@ -55,6 +55,10 @@ export class VoiceBroadcastRecordingsStore extends TypedEventEmitter<VoiceBroadc
         return this.current;
     }
 
+    public hasCurrent(): boolean {
+        return this.current !== null;
+    }
+
     public clearCurrent(): void {
         if (!this.current) return;
 

test/components/structures/UserMenu-test.tsx

@@ -0,0 +1,88 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from "react";
+import { act, render, RenderResult } from "@testing-library/react";
+import { MatrixClient, MatrixEvent } from "matrix-js-sdk/src/matrix";
+
+import UserMenu from "../../../src/components/structures/UserMenu";
+import { stubClient } from "../../test-utils";
+import {
+    VoiceBroadcastInfoState,
+    VoiceBroadcastRecording,
+    VoiceBroadcastRecordingsStore,
+} from "../../../src/voice-broadcast";
+import { mkVoiceBroadcastInfoStateEvent } from "../../voice-broadcast/utils/test-utils";
+
+describe("<UserMenu>", () => {
+    let client: MatrixClient;
+    let renderResult: RenderResult;
+    let voiceBroadcastInfoEvent: MatrixEvent;
+    let voiceBroadcastRecording: VoiceBroadcastRecording;
+    let voiceBroadcastRecordingsStore: VoiceBroadcastRecordingsStore;
+
+    beforeAll(() => {
+        client = stubClient();
+        voiceBroadcastInfoEvent = mkVoiceBroadcastInfoStateEvent(
+            "!room:example.com",
+            VoiceBroadcastInfoState.Started,
+            client.getUserId() || "",
+            client.getDeviceId() || "",
+        );
+        voiceBroadcastRecording = new VoiceBroadcastRecording(
+            voiceBroadcastInfoEvent,
+            client,
+        );
+    });
+
+    beforeEach(() => {
+        voiceBroadcastRecordingsStore = VoiceBroadcastRecordingsStore.instance();
+    });
+
+    describe("when rendered", () => {
+        beforeEach(() => {
+            renderResult = render(<UserMenu isPanelCollapsed={true} />);
+        });
+
+        it("should render as expected", () => {
+            expect(renderResult.container).toMatchSnapshot();
+        });
+
+        describe("and a live voice broadcast starts", () => {
+            beforeEach(() => {
+                act(() => {
+                    voiceBroadcastRecordingsStore.setCurrent(voiceBroadcastRecording);
+                });
+            });
+
+            it("should render the live voice broadcast avatar addon", () => {
+                expect(renderResult.queryByTestId("user-menu-live-vb")).toBeInTheDocument();
+            });
+
+            describe("and the broadcast ends", () => {
+                beforeEach(() => {
+                    act(() => {
+                        voiceBroadcastRecordingsStore.clearCurrent();
+                    });
+                });
+
+                it("should not render the live voice broadcast avatar addon", () => {
+                    expect(renderResult.queryByTestId("user-menu-live-vb")).not.toBeInTheDocument();
+                });
+            });
+        });
+    });
+});

test/components/structures/__snapshots__/UserMenu-test.tsx.snap

@@ -0,0 +1,44 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<UserMenu> when rendered should render as expected 1`] = `
+<div>
+  <div
+    class="mx_UserMenu"
+  >
+    <div
+      aria-expanded="false"
+      aria-haspopup="true"
+      aria-label="User menu"
+      class="mx_AccessibleButton"
+      role="button"
+      tabindex="0"
+      title="User menu"
+    >
+      <div
+        class="mx_UserMenu_userAvatar"
+      >
+        <span
+          class="mx_BaseAvatar mx_UserMenu_userAvatar_BaseAvatar"
+          role="presentation"
+        >
+          <span
+            aria-hidden="true"
+            class="mx_BaseAvatar_initial"
+            style="font-size: 20.8px; width: 32px; line-height: 32px;"
+          >
+            U
+          </span>
+          <img
+            alt=""
+            aria-hidden="true"
+            class="mx_BaseAvatar_image"
+            data-testid="avatar-img"
+            src="data:image/png;base64,00"
+            style="width: 32px; height: 32px;"
+          />
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+`;

test/voice-broadcast/stores/VoiceBroadcastRecordingsStore-test.ts

@@ -75,6 +75,7 @@ describe("VoiceBroadcastRecordingsStore", () => {
         });
 
         it("should return it as current", () => {
+            expect(recordings.hasCurrent()).toBe(true);
             expect(recordings.getCurrent()).toBe(recording);
         });
 
@@ -103,6 +104,7 @@ describe("VoiceBroadcastRecordingsStore", () => {
             });
 
             it("should clear the current recording", () => {
+                expect(recordings.hasCurrent()).toBe(false);
                 expect(recordings.getCurrent()).toBeNull();
             });