initial commit
This commit is contained in:
Hampus Kraft
333
fluxer_app/src/components/channel/MessageAttachments.tsx
Normal file
333
fluxer_app/src/components/channel/MessageAttachments.tsx
Normal file
@@ -0,0 +1,333 @@
|
||||
/*
|
||||
* Copyright (C) 2026 Fluxer Contributors
|
||||
*
|
||||
* This file is part of Fluxer.
|
||||
*
|
||||
* Fluxer is free software: you can redistribute it and/or modify
|
||||
* it under the terms of the GNU Affero General Public License as published by
|
||||
* the Free Software Foundation, either version 3 of the License, or
|
||||
* (at your option) any later version.
|
||||
*
|
||||
* Fluxer is distributed in the hope that it will be useful,
|
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
* GNU Affero General Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU Affero General Public License
|
||||
* along with Fluxer. If not, see <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
import {Trans} from '@lingui/react/macro';
|
||||
import {ArrowBendUpRightIcon, CaretRightIcon, HashIcon, NotePencilIcon, SpeakerHighIcon} from '@phosphor-icons/react';
|
||||
import {clsx} from 'clsx';
|
||||
import {observer} from 'mobx-react-lite';
|
||||
import React from 'react';
|
||||
import * as ContextMenuActionCreators from '~/actions/ContextMenuActionCreators';
|
||||
import {ChannelTypes, StickerFormatTypes} from '~/Constants';
|
||||
import {Attachment} from '~/components/channel/embeds/attachments/Attachment';
|
||||
import {AttachmentMosaic} from '~/components/channel/embeds/attachments/AttachmentMosaic';
|
||||
import {Embed} from '~/components/channel/embeds/Embed';
|
||||
import {GiftEmbed} from '~/components/channel/GiftEmbed';
|
||||
import {InviteEmbed} from '~/components/channel/InviteEmbed';
|
||||
import {MessageReactions} from '~/components/channel/MessageReactions';
|
||||
import {getAttachmentRenderingState} from '~/components/channel/messageAttachmentStateUtils';
|
||||
import {ThemeEmbed} from '~/components/channel/ThemeEmbed';
|
||||
import {GroupDMAvatar} from '~/components/common/GroupDMAvatar';
|
||||
import {GuildIcon} from '~/components/popouts/GuildIcon';
|
||||
import {Avatar} from '~/components/uikit/Avatar';
|
||||
import {MediaContextMenu} from '~/components/uikit/ContextMenu/MediaContextMenu';
|
||||
import FocusRing from '~/components/uikit/FocusRing/FocusRing';
|
||||
import {Tooltip} from '~/components/uikit/Tooltip/Tooltip';
|
||||
import {SafeMarkdown} from '~/lib/markdown';
|
||||
import {MarkdownContext} from '~/lib/markdown/renderers';
|
||||
import type {
|
||||
MessageAttachment,
|
||||
MessageEmbed,
|
||||
MessageRecord,
|
||||
MessageSnapshot,
|
||||
MessageStickerItem,
|
||||
} from '~/records/MessageRecord';
|
||||
import GuildStore from '~/stores/GuildStore';
|
||||
import StickerStore from '~/stores/StickerStore';
|
||||
import UserSettingsStore from '~/stores/UserSettingsStore';
|
||||
import markupStyles from '~/styles/Markup.module.css';
|
||||
import * as AvatarUtils from '~/utils/AvatarUtils';
|
||||
import {useForwardedMessageContext} from '~/utils/forwardedMessageUtils';
|
||||
import {goToMessage} from '~/utils/MessageNavigator';
|
||||
import styles from './MessageAttachments.module.css';
|
||||
import {useMessageViewContext} from './MessageViewContext';
|
||||
|
||||
const ForwardedFromSource = observer(({message}: {message: MessageRecord}) => {
|
||||
const {sourceChannel, sourceGuild, sourceUser, hasAccessToSource, displayName} = useForwardedMessageContext(message);
|
||||
|
||||
const handleJumpToOriginal = React.useCallback(() => {
|
||||
if (message.messageReference && sourceChannel) {
|
||||
goToMessage(message.messageReference.channel_id, message.messageReference.message_id);
|
||||
}
|
||||
}, [message.messageReference, sourceChannel]);
|
||||
|
||||
if (!hasAccessToSource || !sourceChannel || !displayName || !message.messageReference) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const renderChannelIcon = () => {
|
||||
const iconSize = 16;
|
||||
|
||||
if (sourceChannel.type === ChannelTypes.DM_PERSONAL_NOTES) {
|
||||
return <NotePencilIcon className={styles.forwardedSourceIcon} weight="fill" size={iconSize} />;
|
||||
}
|
||||
if (sourceChannel.type === ChannelTypes.DM && sourceUser) {
|
||||
return (
|
||||
<div className={styles.forwardedSourceAvatar}>
|
||||
<Avatar user={sourceUser} size={iconSize} status={null} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
if (sourceChannel.type === ChannelTypes.GROUP_DM) {
|
||||
return (
|
||||
<div className={styles.forwardedSourceAvatar}>
|
||||
<GroupDMAvatar channel={sourceChannel} size={iconSize} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
if (sourceChannel.type === ChannelTypes.GUILD_VOICE) {
|
||||
return <SpeakerHighIcon className={styles.forwardedSourceIcon} weight="fill" size={iconSize} />;
|
||||
}
|
||||
return <HashIcon className={styles.forwardedSourceIcon} weight="bold" size={iconSize} />;
|
||||
};
|
||||
|
||||
if (
|
||||
sourceChannel.type === ChannelTypes.DM ||
|
||||
sourceChannel.type === ChannelTypes.GROUP_DM ||
|
||||
sourceChannel.type === ChannelTypes.DM_PERSONAL_NOTES
|
||||
) {
|
||||
return (
|
||||
<FocusRing>
|
||||
<button type="button" onClick={handleJumpToOriginal} className={styles.forwardedSourceButton}>
|
||||
<span className={styles.forwardedSourceLabel}>
|
||||
<Trans>Forwarded from</Trans>
|
||||
</span>
|
||||
<span className={styles.forwardedSourceInfo}>
|
||||
{renderChannelIcon()}
|
||||
<span className={styles.forwardedSourceName}>{displayName}</span>
|
||||
</span>
|
||||
</button>
|
||||
</FocusRing>
|
||||
);
|
||||
}
|
||||
|
||||
if (sourceGuild) {
|
||||
return (
|
||||
<FocusRing>
|
||||
<button type="button" onClick={handleJumpToOriginal} className={styles.forwardedSourceButton}>
|
||||
<span className={styles.forwardedSourceLabel}>
|
||||
<Trans>Forwarded from</Trans>
|
||||
</span>
|
||||
<span className={styles.forwardedSourceInfo}>
|
||||
<GuildIcon
|
||||
id={sourceGuild.id}
|
||||
name={sourceGuild.name}
|
||||
icon={sourceGuild.icon}
|
||||
className={styles.forwardedSourceGuildIcon}
|
||||
sizePx={16}
|
||||
/>
|
||||
<span className={styles.forwardedSourceName}>{sourceGuild.name}</span>
|
||||
<CaretRightIcon className={styles.forwardedSourceChevron} weight="bold" size={12} />
|
||||
{renderChannelIcon()}
|
||||
<span className={styles.forwardedSourceName}>{displayName}</span>
|
||||
</span>
|
||||
</button>
|
||||
</FocusRing>
|
||||
);
|
||||
}
|
||||
|
||||
return null;
|
||||
});
|
||||
|
||||
const ForwardedMessageContent = observer(({message, snapshot}: {message: MessageRecord; snapshot: MessageSnapshot}) => {
|
||||
return (
|
||||
<div className={styles.forwardedContainer}>
|
||||
<div className={styles.forwardedBar} />
|
||||
<div className={styles.forwardedContent}>
|
||||
<div className={styles.forwardedHeader}>
|
||||
<ArrowBendUpRightIcon className={styles.forwardedIcon} weight="bold" />
|
||||
<span className={styles.forwardedLabel}>
|
||||
<Trans>Forwarded</Trans>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{snapshot.content && (
|
||||
<div className={clsx(markupStyles.markup)}>
|
||||
<SafeMarkdown
|
||||
content={snapshot.content}
|
||||
options={{
|
||||
context: MarkdownContext.STANDARD_WITH_JUMBO,
|
||||
messageId: message.id,
|
||||
channelId: message.channelId,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{snapshot.attachments && snapshot.attachments.length > 0 && (
|
||||
<div className={styles.attachmentsContainer}>
|
||||
{(() => {
|
||||
const {enrichedAttachments, mediaAttachments, shouldUseMosaic} = getAttachmentRenderingState(
|
||||
snapshot.attachments,
|
||||
);
|
||||
return (
|
||||
<>
|
||||
{shouldUseMosaic && <AttachmentMosaic attachments={mediaAttachments} message={message} />}
|
||||
{enrichedAttachments.map((attachment: MessageAttachment) => (
|
||||
<Attachment
|
||||
key={attachment.id}
|
||||
attachment={attachment}
|
||||
isPreview={false}
|
||||
message={message}
|
||||
renderInMosaic={shouldUseMosaic}
|
||||
/>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
})()}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{snapshot.embeds && snapshot.embeds.length > 0 && UserSettingsStore.getRenderEmbeds() && (
|
||||
<div className={styles.attachmentsContainer}>
|
||||
{snapshot.embeds.map((embed: MessageEmbed, index: number) => (
|
||||
<Embed embed={embed} key={embed.id} message={message} embedIndex={index} onDelete={() => {}} />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<ForwardedFromSource message={message} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
export const MessageAttachments = observer(() => {
|
||||
const {message, handleDelete, previewContext, onPopoutToggle} = useMessageViewContext();
|
||||
const isPreview = Boolean(previewContext);
|
||||
return (
|
||||
<>
|
||||
{message.messageSnapshots && message.messageSnapshots.length > 0 && (
|
||||
<ForwardedMessageContent message={message} snapshot={message.messageSnapshots[0]} />
|
||||
)}
|
||||
|
||||
{message.invites.map((code) => (
|
||||
<FocusRing key={code}>
|
||||
<InviteEmbed code={code} />
|
||||
</FocusRing>
|
||||
))}
|
||||
|
||||
{message.themes.map((themeId) => (
|
||||
<FocusRing key={themeId}>
|
||||
<ThemeEmbed themeId={themeId} />
|
||||
</FocusRing>
|
||||
))}
|
||||
|
||||
{message.gifts.map((code) => (
|
||||
<FocusRing key={code}>
|
||||
<GiftEmbed code={code} />
|
||||
</FocusRing>
|
||||
))}
|
||||
|
||||
{message.stickers && message.stickers.length > 0 && (
|
||||
<div className={styles.stickersContainer}>
|
||||
{message.stickers.map((sticker: MessageStickerItem) => {
|
||||
const stickerUrl = AvatarUtils.getStickerURL({
|
||||
id: sticker.id,
|
||||
animated: sticker.format_type === StickerFormatTypes.GIF,
|
||||
size: 320,
|
||||
});
|
||||
|
||||
const stickerRecord = StickerStore.getStickerById(sticker.id);
|
||||
const guild = stickerRecord?.guildId ? GuildStore.getGuild(stickerRecord.guildId) : null;
|
||||
|
||||
const tooltipContent = () => (
|
||||
<div className={styles.stickerTooltip}>
|
||||
<span className={styles.stickerName}>{sticker.name}</span>
|
||||
{guild && (
|
||||
<div className={styles.stickerGuildInfo}>
|
||||
<GuildIcon
|
||||
id={guild.id}
|
||||
name={guild.name}
|
||||
icon={guild.icon}
|
||||
className={styles.stickerGuildIcon}
|
||||
sizePx={16}
|
||||
/>
|
||||
<span className={styles.stickerGuildName}>{guild.name}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
const handleContextMenu = (e: React.MouseEvent) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
ContextMenuActionCreators.openFromEvent(e, ({onClose}) => (
|
||||
<MediaContextMenu
|
||||
message={message}
|
||||
originalSrc={stickerUrl}
|
||||
type="image"
|
||||
defaultName={sticker.name}
|
||||
onClose={onClose}
|
||||
onDelete={handleDelete}
|
||||
/>
|
||||
));
|
||||
};
|
||||
|
||||
return (
|
||||
<Tooltip key={sticker.id} text={tooltipContent}>
|
||||
<FocusRing>
|
||||
<div role="img" className={styles.stickerWrapper} onContextMenu={handleContextMenu}>
|
||||
<img
|
||||
src={stickerUrl}
|
||||
alt={stickerRecord?.description || sticker.name}
|
||||
className={styles.stickerImage}
|
||||
width="160"
|
||||
height="160"
|
||||
/>
|
||||
</div>
|
||||
</FocusRing>
|
||||
</Tooltip>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{(() => {
|
||||
const {enrichedAttachments, mediaAttachments} = getAttachmentRenderingState(message.attachments);
|
||||
const inlineMedia = UserSettingsStore.getInlineAttachmentMedia();
|
||||
const shouldWrapInMosaic = inlineMedia && mediaAttachments.length > 0;
|
||||
return (
|
||||
<>
|
||||
{shouldWrapInMosaic && <AttachmentMosaic attachments={mediaAttachments} message={message} />}
|
||||
{enrichedAttachments.map((attachment) => (
|
||||
<Attachment
|
||||
key={attachment.id}
|
||||
attachment={attachment}
|
||||
isPreview={isPreview}
|
||||
message={message}
|
||||
renderInMosaic={shouldWrapInMosaic}
|
||||
/>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
})()}
|
||||
|
||||
{UserSettingsStore.getRenderEmbeds() &&
|
||||
!message.suppressEmbeds &&
|
||||
message.embeds.map((embed, index) => (
|
||||
<Embed embed={embed} key={embed.id} message={message} embedIndex={index} onDelete={handleDelete} />
|
||||
))}
|
||||
|
||||
{UserSettingsStore.getRenderReactions() && message.reactions.length > 0 && (
|
||||
<MessageReactions message={message} isPreview={isPreview} onPopoutToggle={onPopoutToggle} />
|
||||
)}
|
||||
</>
|
||||
);
|
||||
});
|
||||
Reference in New Issue
Block a user