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
116 lines
3.0 KiB
TypeScript
116 lines
3.0 KiB
TypeScript
import React from 'react';
|
|
import { Box, Text, as } from 'folds';
|
|
import classNames from 'classnames';
|
|
import { MatrixClient, MatrixEvent, Room } from 'matrix-js-sdk';
|
|
import * as css from './Reaction.css';
|
|
import { getHexcodeForEmoji, getShortcodeFor } from '../../plugins/emoji';
|
|
import { getMemberDisplayName } from '../../utils/room';
|
|
import { eventWithShortcode, getMxIdLocalPart, mxcUrlToHttp } from '../../utils/matrix';
|
|
|
|
export const Reaction = as<
|
|
'button',
|
|
{
|
|
mx: MatrixClient;
|
|
count: number;
|
|
reaction: string;
|
|
useAuthentication?: boolean;
|
|
}
|
|
>(({ className, mx, count, reaction, useAuthentication, ...props }, ref) => (
|
|
<Box
|
|
as="button"
|
|
className={classNames(css.Reaction, className)}
|
|
alignItems="Center"
|
|
shrink="No"
|
|
gap="200"
|
|
{...props}
|
|
ref={ref}
|
|
>
|
|
<Text className={css.ReactionText} as="span" size="T400">
|
|
{reaction.startsWith('mxc://') ? (
|
|
<img
|
|
className={css.ReactionImg}
|
|
src={mxcUrlToHttp(mx, reaction, useAuthentication) ?? reaction
|
|
}
|
|
alt={reaction}
|
|
/>
|
|
) : (
|
|
<Text as="span" size="Inherit" truncate>
|
|
{reaction}
|
|
</Text>
|
|
)}
|
|
</Text>
|
|
<Text as="span" size="T300">
|
|
{count}
|
|
</Text>
|
|
</Box>
|
|
));
|
|
|
|
type ReactionTooltipMsgProps = {
|
|
room: Room;
|
|
reaction: string;
|
|
events: MatrixEvent[];
|
|
};
|
|
|
|
export function ReactionTooltipMsg({ room, reaction, events }: ReactionTooltipMsgProps) {
|
|
const shortCodeEvt = events.find(eventWithShortcode);
|
|
const shortcode =
|
|
shortCodeEvt?.getContent().shortcode ??
|
|
getShortcodeFor(getHexcodeForEmoji(reaction)) ??
|
|
reaction;
|
|
const names = events.map(
|
|
(ev: MatrixEvent) =>
|
|
getMemberDisplayName(room, ev.getSender() ?? 'Unknown') ??
|
|
getMxIdLocalPart(ev.getSender() ?? 'Unknown') ??
|
|
'Unknown'
|
|
);
|
|
|
|
return (
|
|
<>
|
|
{names.length === 1 && <b>{names[0]}</b>}
|
|
{names.length === 2 && (
|
|
<>
|
|
<b>{names[0]}</b>
|
|
<Text as="span" size="Inherit" priority="300">
|
|
{' and '}
|
|
</Text>
|
|
<b>{names[1]}</b>
|
|
</>
|
|
)}
|
|
{names.length === 3 && (
|
|
<>
|
|
<b>{names[0]}</b>
|
|
<Text as="span" size="Inherit" priority="300">
|
|
{', '}
|
|
</Text>
|
|
<b>{names[1]}</b>
|
|
<Text as="span" size="Inherit" priority="300">
|
|
{' and '}
|
|
</Text>
|
|
<b>{names[2]}</b>
|
|
</>
|
|
)}
|
|
{names.length > 3 && (
|
|
<>
|
|
<b>{names[0]}</b>
|
|
<Text as="span" size="Inherit" priority="300">
|
|
{', '}
|
|
</Text>
|
|
<b>{names[1]}</b>
|
|
<Text as="span" size="Inherit" priority="300">
|
|
{', '}
|
|
</Text>
|
|
<b>{names[2]}</b>
|
|
<Text as="span" size="Inherit" priority="300">
|
|
{' and '}
|
|
</Text>
|
|
<b>{names.length - 3} others</b>
|
|
</>
|
|
)}
|
|
<Text as="span" size="Inherit" priority="300">
|
|
{' reacted with '}
|
|
</Text>
|
|
:<b>{shortcode}</b>:
|
|
</>
|
|
);
|
|
}
|