c6a8fb1117
* chore: Bump matrix-js-sdk to 34.4.0 * feat: Authenticated media support * chore: Use Vite PWA for service worker support * fix: Fix Vite PWA SW entry point Forget this. :P * fix: Also add Nginx rewrite for sw.js * fix: Correct Nginx rewrite * fix: Add Netlify redirect for sw.js Otherwise the generic SPA rewrite to index.html would take effect, breaking Service Worker. * fix: Account for subpath when regisering service worker * chore: Correct types
98 lines
3.2 KiB
TypeScript
98 lines
3.2 KiB
TypeScript
import React from 'react';
|
|
import classNames from 'classnames';
|
|
import {
|
|
Avatar,
|
|
Box,
|
|
Header,
|
|
Icon,
|
|
IconButton,
|
|
Icons,
|
|
MenuItem,
|
|
Scroll,
|
|
Text,
|
|
as,
|
|
config,
|
|
} from 'folds';
|
|
import { Room } from 'matrix-js-sdk';
|
|
import { useRoomEventReaders } from '../../hooks/useRoomEventReaders';
|
|
import { getMemberDisplayName } from '../../utils/room';
|
|
import { getMxIdLocalPart } from '../../utils/matrix';
|
|
import * as css from './EventReaders.css';
|
|
import { useMatrixClient } from '../../hooks/useMatrixClient';
|
|
import { openProfileViewer } from '../../../client/action/navigation';
|
|
import { UserAvatar } from '../user-avatar';
|
|
import { useSpecVersions } from '../../hooks/useSpecVersions';
|
|
|
|
export type EventReadersProps = {
|
|
room: Room;
|
|
eventId: string;
|
|
requestClose: () => void;
|
|
};
|
|
export const EventReaders = as<'div', EventReadersProps>(
|
|
({ className, room, eventId, requestClose, ...props }, ref) => {
|
|
const mx = useMatrixClient();
|
|
const { versions } = useSpecVersions();
|
|
const useAuthentication = versions.includes('v1.11');
|
|
const latestEventReaders = useRoomEventReaders(room, eventId);
|
|
|
|
const getName = (userId: string) =>
|
|
getMemberDisplayName(room, userId) ?? getMxIdLocalPart(userId) ?? userId;
|
|
|
|
return (
|
|
<Box
|
|
className={classNames(css.EventReaders, className)}
|
|
direction="Column"
|
|
{...props}
|
|
ref={ref}
|
|
>
|
|
<Header className={css.Header} variant="Surface" size="600">
|
|
<Box grow="Yes">
|
|
<Text size="H3">Seen by</Text>
|
|
</Box>
|
|
<IconButton size="300" onClick={requestClose}>
|
|
<Icon src={Icons.Cross} />
|
|
</IconButton>
|
|
</Header>
|
|
<Box grow="Yes">
|
|
<Scroll visibility="Hover" hideTrack size="300">
|
|
<Box className={css.Content} direction="Column">
|
|
{latestEventReaders.map((readerId) => {
|
|
const name = getName(readerId);
|
|
const avatarMxcUrl = room
|
|
.getMember(readerId)
|
|
?.getMxcAvatarUrl();
|
|
const avatarUrl = avatarMxcUrl ? mx.mxcUrlToHttp(avatarMxcUrl, 100, 100, 'crop', undefined, false, useAuthentication) : undefined;
|
|
|
|
return (
|
|
<MenuItem
|
|
key={readerId}
|
|
style={{ padding: `0 ${config.space.S200}` }}
|
|
radii="400"
|
|
onClick={() => {
|
|
requestClose();
|
|
openProfileViewer(readerId, room.roomId);
|
|
}}
|
|
before={
|
|
<Avatar size="200">
|
|
<UserAvatar
|
|
userId={readerId}
|
|
src={avatarUrl ?? undefined}
|
|
alt={name}
|
|
renderFallback={() => <Icon size="50" src={Icons.User} filled />}
|
|
/>
|
|
</Avatar>
|
|
}
|
|
>
|
|
<Text size="T400" truncate>
|
|
{name}
|
|
</Text>
|
|
</MenuItem>
|
|
);
|
|
})}
|
|
</Box>
|
|
</Scroll>
|
|
</Box>
|
|
</Box>
|
|
);
|
|
}
|
|
);
|