Lotus CIandClaude Opus 5.5
3c33169297
CI / Build & Quality Checks (push) Skipped
CI / Secret scan (gitleaks) (push) Skipped
CI / Playwright smoke (e2e) (push) Skipped
CI / Secret scan (gitleaks) (pull_request) Successful in 10s
CI / Build & Quality Checks (pull_request) Successful in 2m44s
CI / Trigger Desktop Build (pull_request) Skipped
CI / Docker image build & smoke test (pull_request) Skipped
CI / Playwright smoke (e2e) (pull_request) Successful in 17m26s
People who come in from Discord through mautrix-discord now carry a Discord icon next to their name in the timeline, member list and profile, and a room bridged to a Discord channel shows a "Discord" chip in its header that names the channel and server and opens it in Discord. Ghosts are recognised by mautrix-discord's @discord_<snowflake> user IDs; rooms by their m.bridge / uk.half-shot.bridge state (protocol discordgo). Only http(s) channel links are made clickable. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_017PCb59uY3UKqDqt7B6hzd5
1002 lines
35 KiB
TypeScript
1002 lines
35 KiB
TypeScript
import React, { MouseEventHandler, forwardRef, useState } from 'react';
|
||
import FocusTrap from 'focus-trap-react';
|
||
import {
|
||
Box,
|
||
Avatar,
|
||
Text,
|
||
Overlay,
|
||
OverlayCenter,
|
||
OverlayBackdrop,
|
||
IconButton,
|
||
Icon,
|
||
Icons,
|
||
Tooltip,
|
||
TooltipProvider,
|
||
Menu,
|
||
MenuItem,
|
||
toRem,
|
||
config,
|
||
Line,
|
||
PopOut,
|
||
RectCords,
|
||
Badge,
|
||
Chip,
|
||
Spinner,
|
||
Button,
|
||
} from 'folds';
|
||
import { useAtom } from 'jotai';
|
||
import { useNavigate } from 'react-router-dom';
|
||
import { Room } from 'matrix-js-sdk';
|
||
import { useVoiceChannelFull } from '../../hooks/useVoiceChannelFull';
|
||
import { useRoomCallPolicy } from '../../hooks/useRoomCallPolicy';
|
||
import { useStateEvent } from '../../hooks/useStateEvent';
|
||
import { PageHeader } from '../../components/page';
|
||
import { RoomAvatar, RoomIcon } from '../../components/room-avatar';
|
||
import { UseStateProvider } from '../../components/UseStateProvider';
|
||
import { RoomTopicViewer } from '../../components/room-topic-viewer';
|
||
import { RoomBridgeChip } from '../../components/bridge';
|
||
import { StateEvent } from '../../../types/matrix/room';
|
||
import { useMatrixClient } from '../../hooks/useMatrixClient';
|
||
import { useIsDirectRoom, useRoom } from '../../hooks/useRoom';
|
||
import { useSetting } from '../../state/hooks/settings';
|
||
import { settingsAtom } from '../../state/settings';
|
||
import { useSpaceOptionally } from '../../hooks/useSpace';
|
||
import { getHomeSearchPath, getSpaceSearchPath, withSearchParam } from '../../pages/pathUtils';
|
||
import { getCanonicalAliasOrRoomId, mxcUrlToHttp } from '../../utils/matrix';
|
||
import { getStateEvents } from '../../utils/room';
|
||
import { _SearchPathSearchParams } from '../../pages/paths';
|
||
import * as css from './RoomViewHeader.css';
|
||
import { useRoomUnread } from '../../state/hooks/unread';
|
||
import { usePowerLevelsContext } from '../../hooks/usePowerLevels';
|
||
import { markAsRead } from '../../utils/notifications';
|
||
import { roomToUnreadAtom } from '../../state/room/roomToUnread';
|
||
import { LeaveRoomPrompt } from '../../components/leave-room-prompt';
|
||
import { useRoomAvatar, useLocalRoomName, useRoomTopic } from '../../hooks/useRoomMeta';
|
||
import { ScreenSize, useScreenSizeContext } from '../../hooks/useScreenSize';
|
||
import { stopPropagation } from '../../utils/keyboard';
|
||
import { BackRouteHandler } from '../../components/BackRouteHandler';
|
||
import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
|
||
import { useRoomPinnedEvents } from '../../hooks/useRoomPinnedEvents';
|
||
import { RoomPinMenu } from './room-pin-menu';
|
||
import { useOpenRoomSettings } from '../../state/hooks/roomSettings';
|
||
import { RoomNotificationModeSwitcher } from '../../components/RoomNotificationSwitcher';
|
||
import {
|
||
getRoomNotificationMode,
|
||
getRoomNotificationModeIcon,
|
||
useRoomsNotificationPreferencesContext,
|
||
} from '../../hooks/useRoomsNotificationPreferences';
|
||
import { JumpToTime } from './jump-to-time';
|
||
import { useRoomNavigate } from '../../hooks/useRoomNavigate';
|
||
import { useRoomCreators } from '../../hooks/useRoomCreators';
|
||
import { useRoomPermissions } from '../../hooks/useRoomPermissions';
|
||
import { ReportRoomModal } from './ReportRoomModal';
|
||
import { InviteUserPrompt } from '../../components/invite-user-prompt';
|
||
import { ContainerColor } from '../../styles/ContainerColor.css';
|
||
import { RoomSettingsPage } from '../../state/roomSettings';
|
||
import { useCallEmbed, useCallStart } from '../../hooks/useCallEmbed';
|
||
import { useLivekitSupport } from '../../hooks/useLivekitSupport';
|
||
import { webRTCSupported } from '../../utils/rtc';
|
||
import { mediaGalleryAtom } from '../../state/mediaGallery';
|
||
import { widgetsPanelAtom } from '../../state/widgetsPanel';
|
||
import { mobileMembersPanelAtom } from '../../state/mobileMembersPanel';
|
||
import { threadsListAtom } from '../../state/threadsList';
|
||
import { usePendingKnocks } from '../../hooks/usePendingKnocks';
|
||
import { openCallInBrowser, useCallInBrowserUrl } from '../call/CallsUnavailable';
|
||
import { bookmarksPanelAtom } from '../../state/bookmarksPanel';
|
||
|
||
type RoomMenuProps = {
|
||
room: Room;
|
||
requestClose: () => void;
|
||
galleryOpen?: boolean;
|
||
onToggleGallery?: () => void;
|
||
};
|
||
const RoomMenu = forwardRef<HTMLDivElement, RoomMenuProps>(
|
||
({ room, requestClose, galleryOpen, onToggleGallery }, ref) => {
|
||
const mx = useMatrixClient();
|
||
const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
|
||
const screenSize = useScreenSizeContext();
|
||
const unread = useRoomUnread(room.roomId, roomToUnreadAtom);
|
||
const powerLevels = usePowerLevelsContext();
|
||
const creators = useRoomCreators(room);
|
||
|
||
const permissions = useRoomPermissions(creators, powerLevels);
|
||
const canInvite = permissions.action('invite', mx.getSafeUserId());
|
||
const isServerNotice = room.getType() === 'm.server_notice';
|
||
const isCreator = creators.has(mx.getSafeUserId());
|
||
const notificationPreferences = useRoomsNotificationPreferencesContext();
|
||
const notificationMode = getRoomNotificationMode(notificationPreferences, room.roomId);
|
||
const { navigateRoom } = useRoomNavigate();
|
||
|
||
const [invitePrompt, setInvitePrompt] = useState(false);
|
||
const [reportRoomOpen, setReportRoomOpen] = useState(false);
|
||
const [bookmarksOpen, setBookmarksOpen] = useAtom(bookmarksPanelAtom);
|
||
const [mobileMembers, setMobileMembers] = useAtom(mobileMembersPanelAtom);
|
||
// [Gitea #165 / #211] Threads list and Widgets had desktop-only header
|
||
// buttons and no mobile entry point at all.
|
||
const [threadsList, setThreadsList] = useAtom(threadsListAtom);
|
||
const [widgets, setWidgets] = useAtom(widgetsPanelAtom);
|
||
|
||
const handleMarkAsRead = () => {
|
||
markAsRead(mx, room.roomId, hideActivity);
|
||
requestClose();
|
||
};
|
||
|
||
const handleInvite = () => {
|
||
setInvitePrompt(true);
|
||
};
|
||
|
||
const openSettings = useOpenRoomSettings();
|
||
const parentSpace = useSpaceOptionally();
|
||
const handleOpenSettings = () => {
|
||
openSettings(room.roomId, parentSpace?.roomId);
|
||
requestClose();
|
||
};
|
||
|
||
return (
|
||
<Menu ref={ref} style={{ maxWidth: toRem(160), width: '100vw' }}>
|
||
{invitePrompt && (
|
||
<InviteUserPrompt
|
||
room={room}
|
||
requestClose={() => {
|
||
setInvitePrompt(false);
|
||
requestClose();
|
||
}}
|
||
/>
|
||
)}
|
||
{reportRoomOpen && (
|
||
<ReportRoomModal
|
||
roomId={room.roomId}
|
||
onClose={() => {
|
||
setReportRoomOpen(false);
|
||
requestClose();
|
||
}}
|
||
/>
|
||
)}
|
||
<Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
|
||
<MenuItem
|
||
onClick={handleMarkAsRead}
|
||
size="300"
|
||
after={<Icon size="100" src={Icons.CheckTwice} />}
|
||
radii="300"
|
||
disabled={!unread}
|
||
>
|
||
<Text style={{ flexGrow: 1 }} as="span" size="T300" truncate>
|
||
Mark as Read
|
||
</Text>
|
||
</MenuItem>
|
||
<RoomNotificationModeSwitcher roomId={room.roomId} value={notificationMode}>
|
||
{(handleOpen, opened, changing) => (
|
||
<MenuItem
|
||
size="300"
|
||
after={
|
||
changing ? (
|
||
<Spinner size="100" variant="Secondary" />
|
||
) : (
|
||
<Icon size="100" src={getRoomNotificationModeIcon(notificationMode)} />
|
||
)
|
||
}
|
||
radii="300"
|
||
aria-pressed={opened}
|
||
onClick={handleOpen}
|
||
>
|
||
<Text style={{ flexGrow: 1 }} as="span" size="T300" truncate>
|
||
Notifications
|
||
</Text>
|
||
</MenuItem>
|
||
)}
|
||
</RoomNotificationModeSwitcher>
|
||
</Box>
|
||
<Line variant="Surface" size="300" />
|
||
<Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
|
||
<MenuItem
|
||
onClick={() => {
|
||
setBookmarksOpen((v) => !v);
|
||
requestClose();
|
||
}}
|
||
size="300"
|
||
after={<Icon size="100" src={Icons.Star} filled={bookmarksOpen} />}
|
||
radii="300"
|
||
aria-pressed={bookmarksOpen}
|
||
>
|
||
<Text style={{ flexGrow: 1 }} as="span" size="T300" truncate>
|
||
Saved Messages
|
||
</Text>
|
||
</MenuItem>
|
||
{screenSize === ScreenSize.Mobile && (
|
||
<MenuItem
|
||
onClick={() => {
|
||
setMobileMembers(!mobileMembers);
|
||
requestClose();
|
||
}}
|
||
size="300"
|
||
after={<Icon size="100" src={Icons.User} filled={mobileMembers} />}
|
||
radii="300"
|
||
aria-pressed={mobileMembers}
|
||
>
|
||
<Text style={{ flexGrow: 1 }} as="span" size="T300" truncate>
|
||
Members
|
||
</Text>
|
||
</MenuItem>
|
||
)}
|
||
{screenSize === ScreenSize.Mobile && onToggleGallery && (
|
||
<MenuItem
|
||
onClick={() => {
|
||
onToggleGallery();
|
||
requestClose();
|
||
}}
|
||
size="300"
|
||
after={<Icon size="100" src={Icons.Photo} filled={galleryOpen} />}
|
||
radii="300"
|
||
aria-pressed={galleryOpen}
|
||
>
|
||
<Text style={{ flexGrow: 1 }} as="span" size="T300" truncate>
|
||
Media Gallery
|
||
</Text>
|
||
</MenuItem>
|
||
)}
|
||
{screenSize === ScreenSize.Mobile && (
|
||
<MenuItem
|
||
onClick={() => {
|
||
setThreadsList(!threadsList);
|
||
requestClose();
|
||
}}
|
||
size="300"
|
||
after={<Icon size="100" src={Icons.Thread} filled={threadsList} />}
|
||
radii="300"
|
||
aria-pressed={threadsList}
|
||
>
|
||
<Text style={{ flexGrow: 1 }} as="span" size="T300" truncate>
|
||
Threads
|
||
</Text>
|
||
</MenuItem>
|
||
)}
|
||
{screenSize === ScreenSize.Mobile && (
|
||
<MenuItem
|
||
onClick={() => {
|
||
setWidgets(!widgets);
|
||
requestClose();
|
||
}}
|
||
size="300"
|
||
after={<Icon size="100" src={Icons.Category} filled={widgets} />}
|
||
radii="300"
|
||
aria-pressed={widgets}
|
||
>
|
||
<Text style={{ flexGrow: 1 }} as="span" size="T300" truncate>
|
||
Widgets
|
||
</Text>
|
||
</MenuItem>
|
||
)}
|
||
{!isServerNotice && (
|
||
<MenuItem
|
||
onClick={handleInvite}
|
||
variant="Primary"
|
||
fill="None"
|
||
size="300"
|
||
after={<Icon size="100" src={Icons.UserPlus} />}
|
||
radii="300"
|
||
aria-pressed={invitePrompt}
|
||
disabled={!canInvite}
|
||
>
|
||
<Text style={{ flexGrow: 1 }} as="span" size="T300" truncate>
|
||
Invite
|
||
</Text>
|
||
</MenuItem>
|
||
)}
|
||
{!isServerNotice && (
|
||
<MenuItem
|
||
onClick={handleOpenSettings}
|
||
size="300"
|
||
after={<Icon size="100" src={Icons.Setting} />}
|
||
radii="300"
|
||
>
|
||
<Text style={{ flexGrow: 1 }} as="span" size="T300" truncate>
|
||
Room Settings
|
||
</Text>
|
||
</MenuItem>
|
||
)}
|
||
<UseStateProvider initial={false}>
|
||
{(promptJump, setPromptJump) => (
|
||
<>
|
||
<MenuItem
|
||
onClick={() => setPromptJump(true)}
|
||
size="300"
|
||
after={<Icon size="100" src={Icons.RecentClock} />}
|
||
radii="300"
|
||
aria-pressed={promptJump}
|
||
>
|
||
<Text style={{ flexGrow: 1 }} as="span" size="T300" truncate>
|
||
Jump to Time
|
||
</Text>
|
||
</MenuItem>
|
||
{promptJump && (
|
||
<JumpToTime
|
||
onSubmit={(eventId) => {
|
||
setPromptJump(false);
|
||
navigateRoom(room.roomId, eventId);
|
||
requestClose();
|
||
}}
|
||
onCancel={() => setPromptJump(false)}
|
||
/>
|
||
)}
|
||
</>
|
||
)}
|
||
</UseStateProvider>
|
||
</Box>
|
||
<Line variant="Surface" size="300" />
|
||
<Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
|
||
{!isServerNotice && !isCreator && (
|
||
<MenuItem
|
||
onClick={() => setReportRoomOpen(true)}
|
||
variant="Critical"
|
||
fill="None"
|
||
size="300"
|
||
after={<Icon size="100" src={Icons.Warning} />}
|
||
radii="300"
|
||
aria-pressed={reportRoomOpen}
|
||
>
|
||
<Text style={{ flexGrow: 1 }} as="span" size="T300" truncate>
|
||
Report Room
|
||
</Text>
|
||
</MenuItem>
|
||
)}
|
||
<UseStateProvider initial={false}>
|
||
{(promptLeave, setPromptLeave) => (
|
||
<>
|
||
<MenuItem
|
||
onClick={() => setPromptLeave(true)}
|
||
variant="Critical"
|
||
fill="None"
|
||
size="300"
|
||
after={<Icon size="100" src={Icons.ArrowGoLeft} />}
|
||
radii="300"
|
||
aria-pressed={promptLeave}
|
||
>
|
||
<Text style={{ flexGrow: 1 }} as="span" size="T300" truncate>
|
||
Leave Room
|
||
</Text>
|
||
</MenuItem>
|
||
{promptLeave && (
|
||
<LeaveRoomPrompt
|
||
roomId={room.roomId}
|
||
onDone={requestClose}
|
||
onCancel={() => setPromptLeave(false)}
|
||
/>
|
||
)}
|
||
</>
|
||
)}
|
||
</UseStateProvider>
|
||
</Box>
|
||
</Menu>
|
||
);
|
||
},
|
||
);
|
||
|
||
type CallMenuProps = {
|
||
onVoiceCall: () => void;
|
||
onVideoCall: () => void;
|
||
requestClose: () => void;
|
||
};
|
||
const CallMenu = forwardRef<HTMLDivElement, CallMenuProps>(
|
||
({ requestClose, onVoiceCall, onVideoCall }, ref) => {
|
||
const handleVoice = () => {
|
||
onVoiceCall();
|
||
requestClose();
|
||
};
|
||
const handleVideo = () => {
|
||
onVideoCall();
|
||
requestClose();
|
||
};
|
||
|
||
return (
|
||
<Menu ref={ref} style={{ padding: config.space.S200, minWidth: toRem(150) }}>
|
||
<Box direction="Column" gap="200">
|
||
<Text size="L400">Start Call</Text>
|
||
<Box direction="Column" gap="200">
|
||
<Button
|
||
size="300"
|
||
variant="Success"
|
||
fill="Soft"
|
||
outlined
|
||
radii="300"
|
||
before={<Icon size="100" src={Icons.Phone} filled />}
|
||
onClick={handleVoice}
|
||
>
|
||
<Text size="B300">Voice</Text>
|
||
</Button>
|
||
<Button
|
||
size="300"
|
||
variant="Success"
|
||
radii="300"
|
||
before={<Icon size="100" src={Icons.VideoCamera} filled />}
|
||
onClick={handleVideo}
|
||
>
|
||
<Text size="B300">Video</Text>
|
||
</Button>
|
||
</Box>
|
||
</Box>
|
||
</Menu>
|
||
);
|
||
},
|
||
);
|
||
|
||
/**
|
||
* [Gitea #134] One small chip that tells members a room's call rules before
|
||
* they hit the server-side guard: "8/10" when a voice limit is set, a muted
|
||
* camera glyph when the room is audio-only. Nothing when no rule exists; the
|
||
* tooltip carries the words. Desktop only (the mobile header is tight).
|
||
*/
|
||
function CallRulesChip({ room }: { room: Room }) {
|
||
const { current, max } = useVoiceChannelFull(room);
|
||
const { allowCamera, allowScreenshare } = useRoomCallPolicy(room);
|
||
const audioOnly = !allowCamera && !allowScreenshare;
|
||
if (max <= 0 && !audioOnly) return null;
|
||
const words = [
|
||
max > 0 ? `Voice limit ${max} (${current} in call)` : undefined,
|
||
audioOnly ? 'Audio-only room' : undefined,
|
||
]
|
||
.filter(Boolean)
|
||
.join(' · ');
|
||
return (
|
||
<TooltipProvider
|
||
position="Bottom"
|
||
offset={4}
|
||
tooltip={
|
||
<Tooltip>
|
||
<Text>{words}</Text>
|
||
</Tooltip>
|
||
}
|
||
>
|
||
{(triggerRef) => (
|
||
<Chip
|
||
ref={triggerRef}
|
||
variant="Surface"
|
||
size="400"
|
||
radii="Pill"
|
||
aria-label={words}
|
||
tabIndex={0}
|
||
before={audioOnly ? <Icon size="50" src={Icons.VideoCameraMute} /> : undefined}
|
||
>
|
||
{max > 0 && (
|
||
<Text size="T200">
|
||
{current}/{max}
|
||
</Text>
|
||
)}
|
||
</Chip>
|
||
)}
|
||
</TooltipProvider>
|
||
);
|
||
}
|
||
|
||
/**
|
||
* [cinny-desktop: Linux calls] Stand-in for CallButton where this app can't
|
||
* make calls (desktop on WebKitGTK): opens the room in the web app instead.
|
||
*/
|
||
function CallInBrowserButton({ url }: { url: string }) {
|
||
return (
|
||
<TooltipProvider
|
||
position="Bottom"
|
||
offset={4}
|
||
tooltip={
|
||
<Tooltip>
|
||
<Text>Call in your browser (this desktop app can’t make calls here)</Text>
|
||
</Tooltip>
|
||
}
|
||
>
|
||
{(triggerRef) => (
|
||
<IconButton
|
||
variant="Surface"
|
||
fill="None"
|
||
ref={triggerRef}
|
||
aria-label="Start call in browser"
|
||
onClick={() => openCallInBrowser(url)}
|
||
>
|
||
<Icon size="400" src={Icons.VideoCamera} />
|
||
</IconButton>
|
||
)}
|
||
</TooltipProvider>
|
||
);
|
||
}
|
||
|
||
function CallButton() {
|
||
const room = useRoom();
|
||
const direct = useIsDirectRoom();
|
||
|
||
const callEmbed = useCallEmbed();
|
||
const startCall = useCallStart(direct);
|
||
const callStarted = callEmbed && callEmbed.roomId === room.roomId;
|
||
const inAnotherCall = callEmbed && !callStarted;
|
||
const [menuAnchor, setMenuAnchor] = useState<RectCords>();
|
||
|
||
const handleOpenMenu: MouseEventHandler<HTMLButtonElement> = (evt) => {
|
||
setMenuAnchor(evt.currentTarget.getBoundingClientRect());
|
||
};
|
||
|
||
return (
|
||
<>
|
||
<TooltipProvider
|
||
position="Bottom"
|
||
offset={4}
|
||
tooltip={
|
||
<Tooltip>
|
||
{inAnotherCall ? (
|
||
<Text size="L400">Already in another call — End the current call to join!</Text>
|
||
) : (
|
||
<Text>Call</Text>
|
||
)}
|
||
</Tooltip>
|
||
}
|
||
>
|
||
{(triggerRef) => (
|
||
<IconButton
|
||
variant="Surface"
|
||
fill="None"
|
||
ref={triggerRef}
|
||
aria-label="Start call"
|
||
onClick={handleOpenMenu}
|
||
// Gitea #25 — removed an undiscoverable onContextMenu shortcut that
|
||
// started a camera-on video call directly, bypassing cameraOnJoin and
|
||
// the room camera policy. The popout menu already offers Voice/Video.
|
||
disabled={inAnotherCall || callStarted}
|
||
aria-pressed={!!menuAnchor}
|
||
>
|
||
<Icon size="400" src={Icons.VideoCamera} filled={!!menuAnchor} />
|
||
</IconButton>
|
||
)}
|
||
</TooltipProvider>
|
||
<PopOut
|
||
anchor={menuAnchor}
|
||
position="Bottom"
|
||
align="Center"
|
||
content={
|
||
<FocusTrap
|
||
focusTrapOptions={{
|
||
initialFocus: false,
|
||
onDeactivate: () => setMenuAnchor(undefined),
|
||
clickOutsideDeactivates: true,
|
||
isKeyForward: (evt: KeyboardEvent) => evt.key === 'ArrowDown',
|
||
isKeyBackward: (evt: KeyboardEvent) => evt.key === 'ArrowUp',
|
||
escapeDeactivates: stopPropagation,
|
||
}}
|
||
>
|
||
<CallMenu
|
||
onVideoCall={() => startCall(room, { microphone: true, video: true, sound: true })}
|
||
onVoiceCall={() => startCall(room, { microphone: true, video: false, sound: true })}
|
||
requestClose={() => setMenuAnchor(undefined)}
|
||
/>
|
||
</FocusTrap>
|
||
}
|
||
/>
|
||
</>
|
||
);
|
||
}
|
||
|
||
export function RoomViewHeader({ callView }: { callView?: boolean }) {
|
||
const navigate = useNavigate();
|
||
const mx = useMatrixClient();
|
||
const useAuthentication = useMediaAuthentication();
|
||
const screenSize = useScreenSizeContext();
|
||
const room = useRoom();
|
||
const space = useSpaceOptionally();
|
||
const powerLevels = usePowerLevelsContext();
|
||
const creators = useRoomCreators(room);
|
||
const permissions = useRoomPermissions(creators, powerLevels);
|
||
|
||
const hasCallPermission = permissions.stateEvent(
|
||
StateEvent.GroupCallMemberPrefix,
|
||
mx.getSafeUserId(),
|
||
);
|
||
const livekitSupported = useLivekitSupport();
|
||
const rtcSupported = webRTCSupported();
|
||
const callInBrowserUrl = useCallInBrowserUrl(room.roomId);
|
||
|
||
const [menuAnchor, setMenuAnchor] = useState<RectCords>();
|
||
const [pinMenuAnchor, setPinMenuAnchor] = useState<RectCords>();
|
||
const direct = useIsDirectRoom();
|
||
|
||
const pinnedEvents = useRoomPinnedEvents(room);
|
||
const encryptionEvent = useStateEvent(room, StateEvent.RoomEncryption);
|
||
const _encryptedRoom = !!encryptionEvent;
|
||
const avatarMxc = useRoomAvatar(room, direct);
|
||
const name = useLocalRoomName(room);
|
||
const topic = useRoomTopic(room);
|
||
const avatarUrl = avatarMxc
|
||
? (mxcUrlToHttp(mx, avatarMxc, useAuthentication, 96, 96, 'crop') ?? undefined)
|
||
: undefined;
|
||
|
||
const [peopleDrawer, setPeopleDrawer] = useSetting(settingsAtom, 'isPeopleDrawer');
|
||
const [galleryOpen, setGalleryOpen] = useAtom(mediaGalleryAtom);
|
||
const [widgetsOpen, setWidgetsOpen] = useAtom(widgetsPanelAtom);
|
||
const [threadsListOpen, setThreadsListOpen] = useAtom(threadsListAtom);
|
||
const pendingKnocks = usePendingKnocks(room);
|
||
|
||
const handleSearchClick = () => {
|
||
const searchParams: _SearchPathSearchParams = {
|
||
rooms: room.roomId,
|
||
};
|
||
const path = space
|
||
? getSpaceSearchPath(getCanonicalAliasOrRoomId(mx, space.roomId))
|
||
: getHomeSearchPath();
|
||
navigate(withSearchParam(path, searchParams));
|
||
};
|
||
|
||
const handleOpenMenu: MouseEventHandler<HTMLButtonElement> = (evt) => {
|
||
setMenuAnchor(evt.currentTarget.getBoundingClientRect());
|
||
};
|
||
|
||
const handleOpenPinMenu: MouseEventHandler<HTMLButtonElement> = (evt) => {
|
||
setPinMenuAnchor(evt.currentTarget.getBoundingClientRect());
|
||
};
|
||
|
||
const openSettings = useOpenRoomSettings();
|
||
const parentSpace = useSpaceOptionally();
|
||
const handleMemberToggle = () => {
|
||
if (callView) {
|
||
openSettings(room.roomId, parentSpace?.roomId, RoomSettingsPage.MembersPage);
|
||
return;
|
||
}
|
||
setPeopleDrawer(!peopleDrawer);
|
||
};
|
||
|
||
return (
|
||
<>
|
||
<PageHeader
|
||
className={ContainerColor({ variant: 'Surface' })}
|
||
balance={screenSize === ScreenSize.Mobile}
|
||
aria-label={`${name} room header`}
|
||
>
|
||
<Box grow="Yes" gap="300">
|
||
{screenSize === ScreenSize.Mobile && (
|
||
<BackRouteHandler>
|
||
{(onBack) => (
|
||
<Box shrink="No" alignItems="Center">
|
||
<IconButton fill="None" onClick={onBack} aria-label="Back">
|
||
<Icon src={Icons.ArrowLeft} />
|
||
</IconButton>
|
||
</Box>
|
||
)}
|
||
</BackRouteHandler>
|
||
)}
|
||
<Box grow="Yes" alignItems="Center" gap="300">
|
||
{screenSize !== ScreenSize.Mobile && (
|
||
<Avatar size="300">
|
||
<RoomAvatar
|
||
roomId={room.roomId}
|
||
src={avatarUrl}
|
||
alt={name}
|
||
renderFallback={() => (
|
||
<RoomIcon size="200" joinRule={room.getJoinRule()} roomType={room.getType()} />
|
||
)}
|
||
/>
|
||
</Avatar>
|
||
)}
|
||
<Box direction="Column">
|
||
<Box alignItems="Center" gap="200">
|
||
<Text size={topic ? 'H5' : 'H3'} truncate>
|
||
{name}
|
||
</Text>
|
||
{room.getType() === 'm.server_notice' && (
|
||
<TooltipProvider
|
||
position="Bottom"
|
||
offset={4}
|
||
tooltip={
|
||
<Tooltip>
|
||
<Text>System messages from your homeserver administrator.</Text>
|
||
</Tooltip>
|
||
}
|
||
>
|
||
{(triggerRef) => (
|
||
<Chip ref={triggerRef} size="400" variant="Warning" radii="300" outlined>
|
||
<Text size="T200">Server Notice</Text>
|
||
</Chip>
|
||
)}
|
||
</TooltipProvider>
|
||
)}
|
||
<RoomBridgeChip room={room} />
|
||
</Box>
|
||
{topic && (
|
||
<UseStateProvider initial={false}>
|
||
{(viewTopic, setViewTopic) => (
|
||
<>
|
||
<Overlay open={viewTopic} backdrop={<OverlayBackdrop />}>
|
||
<OverlayCenter>
|
||
<FocusTrap
|
||
focusTrapOptions={{
|
||
initialFocus: false,
|
||
clickOutsideDeactivates: true,
|
||
onDeactivate: () => setViewTopic(false),
|
||
escapeDeactivates: stopPropagation,
|
||
}}
|
||
>
|
||
<RoomTopicViewer
|
||
name={name}
|
||
topic={topic}
|
||
requestClose={() => setViewTopic(false)}
|
||
/>
|
||
</FocusTrap>
|
||
</OverlayCenter>
|
||
</Overlay>
|
||
<Text
|
||
as="button"
|
||
type="button"
|
||
onClick={() => setViewTopic(true)}
|
||
className={css.HeaderTopic}
|
||
size="T200"
|
||
priority="300"
|
||
truncate
|
||
>
|
||
{topic.topic}
|
||
</Text>
|
||
</>
|
||
)}
|
||
</UseStateProvider>
|
||
)}
|
||
</Box>
|
||
</Box>
|
||
|
||
<Box shrink="No">
|
||
{
|
||
<TooltipProvider
|
||
position="Bottom"
|
||
offset={4}
|
||
tooltip={
|
||
<Tooltip>
|
||
<Text>Search</Text>
|
||
</Tooltip>
|
||
}
|
||
>
|
||
{(triggerRef) => (
|
||
<IconButton
|
||
fill="None"
|
||
ref={triggerRef}
|
||
onClick={handleSearchClick}
|
||
aria-label="Search"
|
||
>
|
||
<Icon size="400" src={Icons.Search} />
|
||
</IconButton>
|
||
)}
|
||
</TooltipProvider>
|
||
}
|
||
<TooltipProvider
|
||
position="Bottom"
|
||
offset={4}
|
||
tooltip={
|
||
<Tooltip>
|
||
<Text>Pinned Messages</Text>
|
||
</Tooltip>
|
||
}
|
||
>
|
||
{(triggerRef) => (
|
||
<IconButton
|
||
fill="None"
|
||
style={{ position: 'relative' }}
|
||
onClick={handleOpenPinMenu}
|
||
ref={triggerRef}
|
||
aria-label="Pinned messages"
|
||
aria-pressed={!!pinMenuAnchor}
|
||
>
|
||
{pinnedEvents.length > 0 && (
|
||
<Badge
|
||
style={{
|
||
position: 'absolute',
|
||
left: toRem(3),
|
||
top: toRem(3),
|
||
}}
|
||
variant="Secondary"
|
||
size="400"
|
||
fill="Solid"
|
||
radii="Pill"
|
||
>
|
||
<Text as="span" size="L400">
|
||
{pinnedEvents.length}
|
||
</Text>
|
||
</Badge>
|
||
)}
|
||
<Icon size="400" src={Icons.Pin} filled={!!pinMenuAnchor} />
|
||
</IconButton>
|
||
)}
|
||
</TooltipProvider>
|
||
<PopOut
|
||
anchor={pinMenuAnchor}
|
||
position="Bottom"
|
||
content={
|
||
<FocusTrap
|
||
focusTrapOptions={{
|
||
initialFocus: false,
|
||
onDeactivate: () => setPinMenuAnchor(undefined),
|
||
clickOutsideDeactivates: true,
|
||
isKeyForward: (evt: KeyboardEvent) => evt.key === 'ArrowDown',
|
||
isKeyBackward: (evt: KeyboardEvent) => evt.key === 'ArrowUp',
|
||
escapeDeactivates: stopPropagation,
|
||
}}
|
||
>
|
||
<RoomPinMenu room={room} requestClose={() => setPinMenuAnchor(undefined)} />
|
||
</FocusTrap>
|
||
}
|
||
/>
|
||
{screenSize === ScreenSize.Desktop && <CallRulesChip room={room} />}
|
||
{!room.isCallRoom() &&
|
||
livekitSupported &&
|
||
(rtcSupported || callInBrowserUrl) &&
|
||
hasCallPermission &&
|
||
(direct ||
|
||
(room.getJoinRule() === 'invite' &&
|
||
getStateEvents(room, StateEvent.SpaceParent).length === 0)) &&
|
||
(rtcSupported ? (
|
||
<CallButton />
|
||
) : (
|
||
callInBrowserUrl && <CallInBrowserButton url={callInBrowserUrl} />
|
||
))}
|
||
{screenSize === ScreenSize.Desktop && (
|
||
<TooltipProvider
|
||
position="Bottom"
|
||
offset={4}
|
||
tooltip={
|
||
<Tooltip>
|
||
<Text>{threadsListOpen ? 'Hide Threads' : 'Threads'}</Text>
|
||
</Tooltip>
|
||
}
|
||
>
|
||
{(triggerRef) => (
|
||
<IconButton
|
||
fill="None"
|
||
ref={triggerRef}
|
||
onClick={() => setThreadsListOpen(!threadsListOpen)}
|
||
aria-label="Toggle threads"
|
||
aria-pressed={threadsListOpen}
|
||
>
|
||
<Icon size="400" src={Icons.Thread} filled={threadsListOpen} />
|
||
</IconButton>
|
||
)}
|
||
</TooltipProvider>
|
||
)}
|
||
{screenSize === ScreenSize.Desktop && (
|
||
<TooltipProvider
|
||
position="Bottom"
|
||
offset={4}
|
||
tooltip={
|
||
<Tooltip>
|
||
<Text>{galleryOpen ? 'Hide Gallery' : 'Media Gallery'}</Text>
|
||
</Tooltip>
|
||
}
|
||
>
|
||
{(triggerRef) => (
|
||
<IconButton
|
||
fill="None"
|
||
ref={triggerRef}
|
||
onClick={() => setGalleryOpen(!galleryOpen)}
|
||
aria-label="Toggle media gallery"
|
||
aria-pressed={galleryOpen}
|
||
>
|
||
<Icon size="400" src={Icons.Photo} filled={galleryOpen} />
|
||
</IconButton>
|
||
)}
|
||
</TooltipProvider>
|
||
)}
|
||
{screenSize === ScreenSize.Desktop && (
|
||
<TooltipProvider
|
||
position="Bottom"
|
||
offset={4}
|
||
tooltip={
|
||
<Tooltip>
|
||
<Text>{widgetsOpen ? 'Hide Widgets' : 'Widgets'}</Text>
|
||
</Tooltip>
|
||
}
|
||
>
|
||
{(triggerRef) => (
|
||
<IconButton
|
||
fill="None"
|
||
ref={triggerRef}
|
||
onClick={() => setWidgetsOpen(!widgetsOpen)}
|
||
aria-label="Toggle widgets"
|
||
aria-pressed={widgetsOpen}
|
||
>
|
||
<Icon size="400" src={Icons.Category} filled={widgetsOpen} />
|
||
</IconButton>
|
||
)}
|
||
</TooltipProvider>
|
||
)}
|
||
{screenSize === ScreenSize.Desktop && (
|
||
<TooltipProvider
|
||
position="Bottom"
|
||
offset={4}
|
||
tooltip={
|
||
<Tooltip>
|
||
{callView ? (
|
||
<Text>Members</Text>
|
||
) : (
|
||
<Text>{peopleDrawer ? 'Hide Members' : 'Show Members'}</Text>
|
||
)}
|
||
</Tooltip>
|
||
}
|
||
>
|
||
{(triggerRef) => (
|
||
<IconButton
|
||
fill="None"
|
||
ref={triggerRef}
|
||
style={{ position: 'relative' }}
|
||
onClick={handleMemberToggle}
|
||
aria-label={
|
||
pendingKnocks.length > 0
|
||
? `Toggle member list, ${pendingKnocks.length} pending join request${pendingKnocks.length > 1 ? 's' : ''}`
|
||
: 'Toggle member list'
|
||
}
|
||
>
|
||
{pendingKnocks.length > 0 && (
|
||
<Badge
|
||
aria-hidden
|
||
variant="Warning"
|
||
fill="Solid"
|
||
radii="Pill"
|
||
size="400"
|
||
style={{
|
||
position: 'absolute',
|
||
right: toRem(3),
|
||
top: toRem(3),
|
||
pointerEvents: 'none',
|
||
}}
|
||
>
|
||
<Text as="span" size="L400">
|
||
{pendingKnocks.length > 9 ? '9+' : pendingKnocks.length}
|
||
</Text>
|
||
</Badge>
|
||
)}
|
||
<Icon size="400" src={Icons.User} />
|
||
</IconButton>
|
||
)}
|
||
</TooltipProvider>
|
||
)}
|
||
|
||
<TooltipProvider
|
||
position="Bottom"
|
||
align="End"
|
||
offset={4}
|
||
tooltip={
|
||
<Tooltip>
|
||
<Text>More Options</Text>
|
||
</Tooltip>
|
||
}
|
||
>
|
||
{(triggerRef) => (
|
||
<IconButton
|
||
fill="None"
|
||
onClick={handleOpenMenu}
|
||
ref={triggerRef}
|
||
aria-label="More options"
|
||
aria-expanded={!!menuAnchor}
|
||
aria-haspopup="menu"
|
||
>
|
||
<Icon size="400" src={Icons.VerticalDots} filled={!!menuAnchor} />
|
||
</IconButton>
|
||
)}
|
||
</TooltipProvider>
|
||
<PopOut
|
||
anchor={menuAnchor}
|
||
position="Bottom"
|
||
align="End"
|
||
content={
|
||
<FocusTrap
|
||
focusTrapOptions={{
|
||
initialFocus: false,
|
||
onDeactivate: () => setMenuAnchor(undefined),
|
||
clickOutsideDeactivates: true,
|
||
isKeyForward: (evt: KeyboardEvent) => evt.key === 'ArrowDown',
|
||
isKeyBackward: (evt: KeyboardEvent) => evt.key === 'ArrowUp',
|
||
escapeDeactivates: stopPropagation,
|
||
}}
|
||
>
|
||
<RoomMenu
|
||
room={room}
|
||
requestClose={() => setMenuAnchor(undefined)}
|
||
galleryOpen={galleryOpen}
|
||
onToggleGallery={() => setGalleryOpen((v: boolean) => !v)}
|
||
/>
|
||
</FocusTrap>
|
||
}
|
||
/>
|
||
</Box>
|
||
</Box>
|
||
</PageHeader>
|
||
</>
|
||
);
|
||
}
|