bd793a0970
Since Element Call has now reached production on Element X, Element Web needs to be able to at least participate in group calls. Starting a group call or creating a video room will still require the labs flags, for now. Note that Jitsi-based video rooms are also affected by this change. This is not because we intend to delabs them (rather, we intend to get rid of them in favor of Element Call video rooms), but because it's easiest to handle both video room variants consistently.
106 lines
4.1 KiB
TypeScript
106 lines
4.1 KiB
TypeScript
/*
|
|
Copyright 2024 New Vector Ltd.
|
|
Copyright 2024 The Matrix.org Foundation C.I.C.
|
|
|
|
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
|
|
Please see LICENSE files in the repository root for full details.
|
|
*/
|
|
|
|
import React, { useRef } from "react";
|
|
import { NavBar, NavItem } from "@vector-im/compound-web";
|
|
import { Room } from "matrix-js-sdk/src/matrix";
|
|
|
|
import { _t } from "../../../languageHandler";
|
|
import { RightPanelPhases } from "../../../stores/right-panel/RightPanelStorePhases";
|
|
import RightPanelStore from "../../../stores/right-panel/RightPanelStore";
|
|
import PosthogTrackers from "../../../PosthogTrackers";
|
|
import { useDispatcher } from "../../../hooks/useDispatcher";
|
|
import dispatcher from "../../../dispatcher/dispatcher";
|
|
import { Action } from "../../../dispatcher/actions";
|
|
import SettingsStore from "../../../settings/SettingsStore";
|
|
import { UIComponent, UIFeature } from "../../../settings/UIFeature";
|
|
import { shouldShowComponent } from "../../../customisations/helpers/UIComponents";
|
|
import { isVideoRoom as calcIsVideoRoom } from "../../../utils/video-rooms";
|
|
|
|
function shouldShowTabsForPhase(phase?: RightPanelPhases): boolean {
|
|
const tabs = [
|
|
RightPanelPhases.RoomSummary,
|
|
RightPanelPhases.RoomMemberList,
|
|
RightPanelPhases.ThreadPanel,
|
|
RightPanelPhases.Extensions,
|
|
];
|
|
return !!phase && tabs.includes(phase);
|
|
}
|
|
|
|
type Props = {
|
|
room?: Room;
|
|
phase: RightPanelPhases;
|
|
};
|
|
|
|
export const RightPanelTabs: React.FC<Props> = ({ phase, room }): JSX.Element | null => {
|
|
const threadsTabRef = useRef<HTMLButtonElement | null>(null);
|
|
|
|
useDispatcher(dispatcher, (payload) => {
|
|
// This actually focuses the threads tab, as its the only interactive element,
|
|
// but at least it puts the user in the right area of the app.
|
|
if (payload.action === Action.FocusThreadsPanel) {
|
|
threadsTabRef.current?.focus();
|
|
}
|
|
});
|
|
|
|
const isVideoRoom = room !== undefined && calcIsVideoRoom(room);
|
|
|
|
if (!shouldShowTabsForPhase(phase)) return null;
|
|
|
|
return (
|
|
<NavBar className="mx_RightPanelTabs" aria-label="right panel" role="tablist">
|
|
<NavItem
|
|
aria-controls="room-summary-panel"
|
|
id="room-summary-panel-tab"
|
|
onClick={() => {
|
|
RightPanelStore.instance.pushCard({ phase: RightPanelPhases.RoomSummary }, true);
|
|
}}
|
|
active={phase === RightPanelPhases.RoomSummary}
|
|
>
|
|
{_t("right_panel|info")}
|
|
</NavItem>
|
|
<NavItem
|
|
aria-controls="memberlist-panel"
|
|
id="memberlist-panel-tab"
|
|
onClick={(ev: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
|
|
RightPanelStore.instance.pushCard({ phase: RightPanelPhases.RoomMemberList }, true);
|
|
PosthogTrackers.trackInteraction("WebRightPanelRoomInfoPeopleButton", ev);
|
|
}}
|
|
active={phase === RightPanelPhases.RoomMemberList}
|
|
>
|
|
{_t("common|people")}
|
|
</NavItem>
|
|
<NavItem
|
|
aria-controls="thread-panel"
|
|
id="thread-panel-tab"
|
|
onClick={() => {
|
|
RightPanelStore.instance.pushCard({ phase: RightPanelPhases.ThreadPanel }, true);
|
|
}}
|
|
active={phase === RightPanelPhases.ThreadPanel}
|
|
ref={threadsTabRef}
|
|
>
|
|
{_t("common|threads")}
|
|
</NavItem>
|
|
{SettingsStore.getValue(UIFeature.Widgets) &&
|
|
!isVideoRoom &&
|
|
shouldShowComponent(UIComponent.AddIntegrations) && (
|
|
<NavItem
|
|
aria-controls="thread-panel"
|
|
id="extensions-panel-tab"
|
|
onClick={() => {
|
|
RightPanelStore.instance.pushCard({ phase: RightPanelPhases.Extensions }, true);
|
|
}}
|
|
active={phase === RightPanelPhases.Extensions}
|
|
>
|
|
{_t("common|extensions")}
|
|
</NavItem>
|
|
)}
|
|
</NavBar>
|
|
);
|
|
};
|