Room call banner

res/css/_components.pcss

@@ -281,6 +281,7 @@
 @import "./views/rooms/_ReplyPreview.pcss";
 @import "./views/rooms/_ReplyTile.pcss";
 @import "./views/rooms/_RoomBreadcrumbs.pcss";
+@import "./views/rooms/_RoomCallBanner.pcss";
 @import "./views/rooms/_RoomHeader.pcss";
 @import "./views/rooms/_RoomInfoLine.pcss";
 @import "./views/rooms/_RoomList.pcss";

res/css/views/rooms/_RoomCallBanner.pcss

@@ -0,0 +1,44 @@
+/*
+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.
+*/
+
+.mx_RoomCallBanner {
+    .mx_RoomCallBanner_text {
+        display: flex;
+        flex: 1;
+        align-items: center;
+    }
+    .mx_RoomCallBanner_label {
+        color: $primary-content;
+        font-weight: 600;
+        padding-right: 8px;
+
+        &::before {
+            display: inline-block;
+            vertical-align: text-top;
+            content: "";
+            background-color: $secondary-content;
+            mask-size: 16px;
+            width: 16px;
+            height: 16px;
+            margin-right: 4px;
+            bottom: 2px;
+            mask-image: url("$(res)/img/element-icons/call/video-call.svg");
+        }
+    }
+    .mx_RoomCallBanner_button {
+        left: 16px;
+    }
+}

src/components/views/beacon/RoomCallBanner.tsx

@@ -0,0 +1,180 @@
+/*
+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, { Fragment, useCallback } from "react";
+import { MatrixEvent, Room } from "matrix-js-sdk/src/matrix";
+
+import { _t } from "../../../languageHandler";
+import AccessibleButton, { ButtonEvent } from "../elements/AccessibleButton";
+import dispatcher, { defaultDispatcher } from "../../../dispatcher/dispatcher";
+import { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload";
+import { Action } from "../../../dispatcher/actions";
+import { Call, ConnectionState, ElementCall } from "../../../models/Call";
+import { useCall } from "../../../hooks/useCall";
+import { RoomViewStore } from "../../../stores/RoomViewStore";
+import { useEventEmitterState } from "../../../hooks/useEventEmitter";
+import {
+    OwnBeaconStore,
+    OwnBeaconStoreEvent,
+} from "../../../stores/OwnBeaconStore";
+import { CallDurationFromEvent } from "../voip/CallDuration";
+import { MockedCall } from "../../../../test/test-utils/call";
+
+interface RoomCallBannerProps {
+    roomId: Room["roomId"];
+    call: Call;
+}
+
+const RoomCallBannerInner: React.FC<RoomCallBannerProps> = ({
+    roomId,
+    call,
+}) => {
+    let callEvent: MatrixEvent | null = null;
+
+    if (!!(call as ElementCall).groupCall) {
+        callEvent = (call as ElementCall).groupCall;
+    }
+    if (!!(call as MockedCall).event) {
+        callEvent = (call as MockedCall).event;
+    }
+
+    const connect = useCallback(
+        (ev: ButtonEvent) => {
+            ev.preventDefault();
+            defaultDispatcher.dispatch<ViewRoomPayload>({
+                action: Action.ViewRoom,
+                room_id: roomId,
+                view_call: true,
+                metricsTrigger: undefined,
+            });
+        },
+        [roomId],
+    );
+
+    const disconnect = useCallback(
+        (ev: ButtonEvent) => {
+            ev.preventDefault();
+            call?.disconnect();
+        },
+        [call],
+    );
+
+    const onClick = () => {
+        dispatcher.dispatch<ViewRoomPayload>({
+            action: Action.ViewRoom,
+            room_id: roomId,
+            metricsTrigger: undefined,
+            event_id: callEvent.getId(),
+            scroll_into_view: true,
+            highlighted: true,
+        });
+    };
+
+    let [buttonText, buttonKind, onButtonClick] = [null, null, null, null];
+
+    switch (call.connectionState) {
+        case ConnectionState.Disconnected:
+            [buttonText, buttonKind, onButtonClick] = [
+                _t("Join"),
+                "primary",
+                connect,
+            ];
+            break;
+        case ConnectionState.Connecting:
+            [buttonText, buttonKind, onButtonClick] = [
+                _t("Join"),
+                "primary",
+                null,
+            ];
+            break;
+        case ConnectionState.Connected:
+            [buttonText, buttonKind, onButtonClick] = [
+                _t("Leave"),
+                "danger",
+                disconnect,
+            ];
+            break;
+        case ConnectionState.Disconnecting:
+            [buttonText, buttonKind, onButtonClick] = [
+                _t("Leave"),
+                "danger",
+                null,
+            ];
+            break;
+    }
+    if (!call) return <Fragment />;
+
+    return (
+        <div
+            className="mx_RoomLiveShareWarning mx_RoomCallBanner"
+            onClick={onClick}
+        >
+            <div className="mx_RoomCallBanner_text">
+                <span className="mx_RoomCallBanner_label">{ _t("Video call") }</span>
+                <CallDurationFromEvent mxEvent={callEvent} />
+            </div>
+
+            <AccessibleButton
+                className="mx_RoomCallBanner_button"
+                data-test-id="room-live-share-primary-button"
+                onClick={onButtonClick}
+                kind={buttonKind}
+                element="button"
+                disabled={false}
+            >
+                { buttonText }
+            </AccessibleButton>
+        </div>
+    );
+};
+
+interface Props {
+    roomId: Room["roomId"];
+}
+
+const RoomCallBanner: React.FC<Props> = ({ roomId }) => {
+    const call = useCall(roomId);
+
+    // this section is to check if we have a live location share. If so, we dont show the call banner
+    const isMonitoringLiveLocation = useEventEmitterState(
+        OwnBeaconStore.instance,
+        OwnBeaconStoreEvent.MonitoringLivePosition,
+        () => OwnBeaconStore.instance.isMonitoringLiveLocation,
+    );
+
+    const liveBeaconIds = useEventEmitterState(
+        OwnBeaconStore.instance,
+        OwnBeaconStoreEvent.LivenessChange,
+        () => OwnBeaconStore.instance.getLiveBeaconIds(roomId),
+    );
+
+    if (isMonitoringLiveLocation && liveBeaconIds.length) {
+        return null;
+    }
+
+    // Check if the call is already showing. No banner is needed in this case.
+    if (RoomViewStore.instance.isViewingCall()) {
+        return null;
+    }
+
+    // split into outer/inner to avoid watching various parts if there is no call
+    if (call) {
+        return <RoomCallBannerInner call={call} roomId={roomId} />;
+    }
+    return null;
+};
+
+export default RoomCallBanner;

src/components/views/rooms/RoomHeader.tsx

@@ -67,6 +67,7 @@ import IconizedContextMenu, {
 import { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload";
 import { CallDurationFromEvent } from "../voip/CallDuration";
 import { Alignment } from "../elements/Tooltip";
+import RoomCallBanner from '../beacon/RoomCallBanner';
 
 class DisabledWithReason {
     constructor(public readonly reason: string) { }
@@ -733,6 +734,7 @@ export default class RoomHeader extends React.Component<IProps, IState> {
                     { betaPill }
                     { buttons }
                 </div>
+                <RoomCallBanner roomId={this.props.room.roomId} />
                 <RoomLiveShareWarning roomId={this.props.room.roomId} />
             </header>
         );

test/components/views/beacon/RoomCallBanner-test.tsx

@@ -0,0 +1,143 @@
+/*
+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 } from "react-dom/test-utils";
+import {
+    Room,
+    PendingEventOrdering,
+    MatrixClient,
+    RoomMember,
+    RoomStateEvent,
+} from "matrix-js-sdk/src/matrix";
+import { ClientWidgetApi, Widget } from "matrix-widget-api";
+import {
+    cleanup,
+    render,
+    screen,
+} from "@testing-library/react";
+import { mocked, Mocked } from "jest-mock";
+
+import {
+    mkRoomMember,
+    MockedCall,
+    setupAsyncStoreWithClient,
+    stubClient,
+    useMockedCalls,
+} from "../../../test-utils";
+import RoomCallBanner from "../../../../src/components/views/beacon/RoomCallBanner";
+import { CallStore } from "../../../../src/stores/CallStore";
+import { WidgetMessagingStore } from "../../../../src/stores/widgets/WidgetMessagingStore";
+import { MatrixClientPeg } from "../../../../src/MatrixClientPeg";
+import { RoomViewStore } from "../../../../src/stores/RoomViewStore";
+import { ConnectionState } from "../../../../src/models/Call";
+
+describe("<RoomCallBanner />", () => {
+    let client: Mocked<MatrixClient>;
+    let room: Room;
+    let alice: RoomMember;
+    useMockedCalls();
+
+    const defaultProps = {
+        roomId: "!1:example.org",
+    };
+
+    beforeEach(() => {
+        stubClient();
+
+        client = mocked(MatrixClientPeg.get());
+
+        room = new Room("!1:example.org", client, "@alice:example.org", {
+            pendingEventOrdering: PendingEventOrdering.Detached,
+        });
+        alice = mkRoomMember(room.roomId, "@alice:example.org");
+        jest.spyOn(room, "getMember").mockImplementation((userId) =>
+            userId === alice.userId ? alice : null,
+        );
+
+        client.getRoom.mockImplementation((roomId) =>
+            roomId === room.roomId ? room : null,
+        );
+        client.getRooms.mockReturnValue([room]);
+        client.reEmitter.reEmit(room, [RoomStateEvent.Events]);
+
+        setupAsyncStoreWithClient(CallStore.instance, client);
+        setupAsyncStoreWithClient(WidgetMessagingStore.instance, client);
+    });
+
+    afterEach(async () => {
+        client.reEmitter.stopReEmitting(room, [RoomStateEvent.Events]);
+    });
+
+    const renderBanner = async (props = {}): Promise<void> => {
+        render(<RoomCallBanner {...defaultProps} {...props} />);
+        await act(() => Promise.resolve()); // Let effects settle
+    };
+
+    it("renders nothing when there is no call", async () => {
+        await renderBanner();
+        const banner = await screen.queryByText("Video call");
+        expect(banner).toBeFalsy();
+    });
+
+    describe("call started", () => {
+        let call: MockedCall;
+        let widget: Widget;
+
+        beforeEach(() => {
+            MockedCall.create(room, "1");
+            const maybeCall = CallStore.instance.getCall(room.roomId);
+            if (!(maybeCall instanceof MockedCall)) {throw new Error("Failed to create call");}
+            call = maybeCall;
+
+            widget = new Widget(call.widget);
+            WidgetMessagingStore.instance.storeMessaging(widget, room.roomId, {
+                stop: () => {},
+            } as unknown as ClientWidgetApi);
+        });
+        afterEach(() => {
+            cleanup(); // Unmount before we do any cleanup that might update the component
+            call.destroy();
+            WidgetMessagingStore.instance.stopMessaging(widget, room.roomId);
+        });
+
+        it("renders if there is a call", async () => {
+            await renderBanner();
+            await screen.findByText("Video call");
+        });
+
+        it("shows Join button if the user has not joined", async () => {
+            await renderBanner();
+            const videoCallLabel = await screen.findByText("Join");
+            expect(videoCallLabel.innerHTML).toBe("Join");
+        });
+
+        it("shows Leave button if the user has not joined", async () => {
+            call.setConnectionState(ConnectionState.Connected);
+            await renderBanner();
+            const videoCallLabel = await screen.findByText("Leave");
+            expect(videoCallLabel.innerHTML).toBe("Leave");
+        });
+
+        it("dont show banner if the call is shown", async () => {
+            jest.spyOn(RoomViewStore.instance, 'isViewingCall').mockReturnValue(false);
+            await renderBanner();
+            const videoCallLabel = await screen.findByText("Video call");
+            expect(videoCallLabel.innerHTML).toBe("Video call");
+        });
+    });
+    // TODO: add live location share warning test (should not render if there is an active live location share)
+});