fix(embed): hide remove buttons when unapplicable (#66)
This commit is contained in:
Hampus
GitHub
parent
c50a74db7b
commit
056d578965
@ -145,6 +145,7 @@ const ForwardedFromSource = observer(({message}: {message: MessageRecord}) => {
|
||||
});
|
||||
|
||||
const ForwardedMessageContent = observer(({message, snapshot}: {message: MessageRecord; snapshot: MessageSnapshot}) => {
|
||||
const snapshotIsPreview = true;
|
||||
return (
|
||||
<div className={styles.forwardedContainer}>
|
||||
<div className={styles.forwardedBar} />
|
||||
@ -177,12 +178,14 @@ const ForwardedMessageContent = observer(({message, snapshot}: {message: Message
|
||||
);
|
||||
return (
|
||||
<>
|
||||
{shouldUseMosaic && <AttachmentMosaic attachments={mediaAttachments} message={message} />}
|
||||
{shouldUseMosaic && (
|
||||
<AttachmentMosaic attachments={mediaAttachments} message={message} isPreview={snapshotIsPreview} />
|
||||
)}
|
||||
{enrichedAttachments.map((attachment: MessageAttachment) => (
|
||||
<Attachment
|
||||
key={attachment.id}
|
||||
attachment={attachment}
|
||||
isPreview={false}
|
||||
isPreview={snapshotIsPreview}
|
||||
message={message}
|
||||
renderInMosaic={shouldUseMosaic}
|
||||
/>
|
||||
@ -193,23 +196,24 @@ const ForwardedMessageContent = observer(({message, snapshot}: {message: Message
|
||||
</div>
|
||||
)}
|
||||
|
||||
{snapshot.embeds && snapshot.embeds.length > 0 && UserSettingsStore.getRenderEmbeds() && (
|
||||
<div className={styles.attachmentsContainer}>
|
||||
{snapshot.embeds.map((embed: MessageEmbed, index: number) => {
|
||||
const embedKey = `${embed.id}-${index}`;
|
||||
return (
|
||||
<Embed
|
||||
embed={embed}
|
||||
key={embedKey}
|
||||
message={message}
|
||||
embedIndex={index}
|
||||
contextualEmbeds={snapshot.embeds}
|
||||
onDelete={() => {}}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
{snapshot.embeds && snapshot.embeds.length > 0 && UserSettingsStore.getRenderEmbeds() && (
|
||||
<div className={styles.attachmentsContainer}>
|
||||
{snapshot.embeds.map((embed: MessageEmbed, index: number) => {
|
||||
const embedKey = `${embed.id}-${index}`;
|
||||
return (
|
||||
<Embed
|
||||
embed={embed}
|
||||
key={embedKey}
|
||||
message={message}
|
||||
embedIndex={index}
|
||||
contextualEmbeds={snapshot.embeds}
|
||||
onDelete={() => {}}
|
||||
isPreview={snapshotIsPreview}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<ForwardedFromSource message={message} />
|
||||
</div>
|
||||
@ -315,7 +319,9 @@ export const MessageAttachments = observer(() => {
|
||||
const shouldWrapInMosaic = inlineMedia && mediaAttachments.length > 0;
|
||||
return (
|
||||
<>
|
||||
{shouldWrapInMosaic && <AttachmentMosaic attachments={mediaAttachments} message={message} />}
|
||||
{shouldWrapInMosaic && (
|
||||
<AttachmentMosaic attachments={mediaAttachments} message={message} isPreview={isPreview} />
|
||||
)}
|
||||
{enrichedAttachments.map((attachment) => (
|
||||
<Attachment
|
||||
key={attachment.id}
|
||||
@ -334,7 +340,14 @@ export const MessageAttachments = observer(() => {
|
||||
message.embeds.map((embed, index) => {
|
||||
const embedKey = `${embed.id}-${index}`;
|
||||
return (
|
||||
<Embed embed={embed} key={embedKey} message={message} embedIndex={index} onDelete={handleDelete} />
|
||||
<Embed
|
||||
embed={embed}
|
||||
key={embedKey}
|
||||
message={message}
|
||||
embedIndex={index}
|
||||
onDelete={handleDelete}
|
||||
isPreview={isPreview}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
|
||||
|
||||
@ -74,6 +74,7 @@ interface EmbedProps {
|
||||
embedIndex?: number;
|
||||
onDelete?: (bypassConfirm?: boolean) => void;
|
||||
contextualEmbeds?: ReadonlyArray<MessageEmbed>;
|
||||
isPreview?: boolean;
|
||||
}
|
||||
|
||||
interface LinkComponentProps {
|
||||
@ -432,7 +433,8 @@ const EmbedMediaRenderer: FC<{
|
||||
message: MessageRecord;
|
||||
embedIndex?: number;
|
||||
onDelete?: (bypassConfirm?: boolean) => void;
|
||||
}> = observer(({embed, message, embedIndex, onDelete}) => {
|
||||
isPreview?: boolean;
|
||||
}> = observer(({embed, message, embedIndex, onDelete, isPreview}) => {
|
||||
const {video, image, thumbnail} = embed;
|
||||
|
||||
if (!isValidMedia(video) && !isValidMedia(image) && !isValidMedia(thumbnail)) {
|
||||
@ -466,6 +468,7 @@ const EmbedMediaRenderer: FC<{
|
||||
contentHash={video.content_hash}
|
||||
embedIndex={embedIndex}
|
||||
onDelete={onDelete}
|
||||
isPreview={isPreview}
|
||||
/>
|
||||
</FocusRing>
|
||||
);
|
||||
@ -491,6 +494,7 @@ const EmbedMediaRenderer: FC<{
|
||||
contentHash={image.content_hash}
|
||||
embedIndex={embedIndex}
|
||||
onDelete={onDelete}
|
||||
isPreview={isPreview}
|
||||
/>
|
||||
</FocusRing>
|
||||
);
|
||||
@ -514,6 +518,7 @@ const EmbedMediaRenderer: FC<{
|
||||
contentHash={image.content_hash}
|
||||
embedIndex={embedIndex}
|
||||
onDelete={onDelete}
|
||||
isPreview={isPreview}
|
||||
/>
|
||||
</FocusRing>
|
||||
);
|
||||
@ -570,7 +575,7 @@ const EmbedMediaRenderer: FC<{
|
||||
return null;
|
||||
});
|
||||
|
||||
const RichEmbed: FC<EmbedProps> = observer(({embed, message, embedIndex, contextualEmbeds, onDelete}) => {
|
||||
const RichEmbed: FC<EmbedProps> = observer(({embed, message, embedIndex, contextualEmbeds, onDelete, isPreview}) => {
|
||||
const embedList = contextualEmbeds ?? message.embeds;
|
||||
const hasVideo = isValidMedia(embed.video);
|
||||
const hasImage = isValidMedia(embed.image);
|
||||
@ -640,9 +645,20 @@ const RichEmbed: FC<EmbedProps> = observer(({embed, message, embedIndex, context
|
||||
{!shouldRenderInlineThumbnail && hasAnyMedia && (
|
||||
<div className={clsx(styles.embedMedia)}>
|
||||
{showGallery && galleryAttachments ? (
|
||||
<AttachmentMosaic attachments={galleryAttachments} message={message} hideExpiryFootnote={true} />
|
||||
<AttachmentMosaic
|
||||
attachments={galleryAttachments}
|
||||
message={message}
|
||||
hideExpiryFootnote={true}
|
||||
isPreview={isPreview}
|
||||
/>
|
||||
) : (
|
||||
<EmbedMediaRenderer embed={embed} message={message} embedIndex={embedIndex} onDelete={onDelete} />
|
||||
<EmbedMediaRenderer
|
||||
embed={embed}
|
||||
message={message}
|
||||
embedIndex={embedIndex}
|
||||
onDelete={onDelete}
|
||||
isPreview={isPreview}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
@ -683,6 +699,7 @@ const RichEmbed: FC<EmbedProps> = observer(({embed, message, embedIndex, context
|
||||
contentHash={embed.thumbnail.content_hash}
|
||||
embedIndex={embedIndex}
|
||||
onDelete={onDelete}
|
||||
isPreview={isPreview}
|
||||
/>
|
||||
</FocusRing>
|
||||
</div>
|
||||
@ -693,7 +710,7 @@ const RichEmbed: FC<EmbedProps> = observer(({embed, message, embedIndex, context
|
||||
);
|
||||
});
|
||||
|
||||
export const Embed: FC<EmbedProps> = observer(({embed, message, embedIndex, contextualEmbeds, onDelete}) => {
|
||||
export const Embed: FC<EmbedProps> = observer(({embed, message, embedIndex, contextualEmbeds, onDelete, isPreview}) => {
|
||||
const {t} = useLingui();
|
||||
const {enabled: isMobile} = MobileLayoutStore;
|
||||
const channel = ChannelStore.getChannel(message.channelId);
|
||||
@ -725,7 +742,8 @@ export const Embed: FC<EmbedProps> = observer(({embed, message, embedIndex, cont
|
||||
ModalActionCreators.push(modal(() => <SuppressEmbedsConfirmModal message={message} />));
|
||||
}, [message]);
|
||||
|
||||
const showSuppressButton = !isMobile && canSuppressEmbeds() && AccessibilityStore.showSuppressEmbedsButton;
|
||||
const showSuppressButton =
|
||||
!isMobile && canSuppressEmbeds() && AccessibilityStore.showSuppressEmbedsButton && !isPreview;
|
||||
|
||||
const spoileredUrls = useMemo(() => extractSpoileredUrls(message.content), [message.content]);
|
||||
const {isSpoilerEmbed, matchingSpoilerUrls} = useMemo(() => {
|
||||
@ -820,6 +838,7 @@ export const Embed: FC<EmbedProps> = observer(({embed, message, embedIndex, cont
|
||||
contentHash={embed.audio.content_hash}
|
||||
embedIndex={embedIndex}
|
||||
onDelete={onDelete}
|
||||
isPreview={isPreview}
|
||||
/>
|
||||
</FocusRing>
|
||||
</div>
|
||||
@ -1072,6 +1091,7 @@ export const Embed: FC<EmbedProps> = observer(({embed, message, embedIndex, cont
|
||||
embedIndex={embedIndex}
|
||||
contextualEmbeds={contextualEmbeds}
|
||||
onDelete={onDelete}
|
||||
isPreview={isPreview}
|
||||
/>
|
||||
</div>,
|
||||
);
|
||||
|
||||
@ -67,35 +67,38 @@ const isUploading = (flags: number): boolean => (flags & 0x1000) !== 0;
|
||||
const hasValidDimensions = (attachment: MessageAttachment): boolean =>
|
||||
typeof attachment.width === 'number' && typeof attachment.height === 'number';
|
||||
|
||||
const AnimatedAttachment: FC<AttachmentMediaProps & {message?: MessageRecord}> = observer(({attachment, message}) => {
|
||||
const embedUrl = attachment.url ?? '';
|
||||
const proxyUrl = attachment.proxy_url ?? embedUrl;
|
||||
const animatedProxyURL = buildMediaProxyURL(proxyUrl, {
|
||||
animated: true,
|
||||
});
|
||||
const nsfw = attachment.nsfw || (attachment.flags & MessageAttachmentFlags.CONTAINS_EXPLICIT_MEDIA) !== 0;
|
||||
const AnimatedAttachment: FC<AttachmentMediaProps & {message?: MessageRecord; isPreview?: boolean}> = observer(
|
||||
({attachment, message, isPreview}) => {
|
||||
const embedUrl = attachment.url ?? '';
|
||||
const proxyUrl = attachment.proxy_url ?? embedUrl;
|
||||
const animatedProxyURL = buildMediaProxyURL(proxyUrl, {
|
||||
animated: true,
|
||||
});
|
||||
const nsfw = attachment.nsfw || (attachment.flags & MessageAttachmentFlags.CONTAINS_EXPLICIT_MEDIA) !== 0;
|
||||
|
||||
return (
|
||||
<FocusRing within ringClassName={messageStyles.mediaFocusRing}>
|
||||
<EmbedGif
|
||||
embedURL={embedUrl}
|
||||
proxyURL={animatedProxyURL}
|
||||
naturalWidth={attachment.width!}
|
||||
naturalHeight={attachment.height!}
|
||||
placeholder={attachment.placeholder}
|
||||
nsfw={nsfw}
|
||||
channelId={message?.channelId}
|
||||
messageId={message?.id}
|
||||
attachmentId={attachment.id}
|
||||
message={message}
|
||||
contentHash={attachment.content_hash}
|
||||
/>
|
||||
</FocusRing>
|
||||
);
|
||||
});
|
||||
return (
|
||||
<FocusRing within ringClassName={messageStyles.mediaFocusRing}>
|
||||
<EmbedGif
|
||||
embedURL={embedUrl}
|
||||
proxyURL={animatedProxyURL}
|
||||
naturalWidth={attachment.width!}
|
||||
naturalHeight={attachment.height!}
|
||||
placeholder={attachment.placeholder}
|
||||
nsfw={nsfw}
|
||||
channelId={message?.channelId}
|
||||
messageId={message?.id}
|
||||
attachmentId={attachment.id}
|
||||
message={message}
|
||||
contentHash={attachment.content_hash}
|
||||
isPreview={isPreview}
|
||||
/>
|
||||
</FocusRing>
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
const VideoAttachment: FC<AttachmentMediaProps & {message?: MessageRecord}> = observer(
|
||||
({attachment, message, mediaAttachments = []}) => {
|
||||
const VideoAttachment: FC<AttachmentMediaProps & {message?: MessageRecord; isPreview?: boolean}> = observer(
|
||||
({attachment, message, mediaAttachments = [], isPreview}) => {
|
||||
const embedUrl = attachment.url ?? '';
|
||||
const proxyUrl = attachment.proxy_url ?? embedUrl;
|
||||
const nsfw = attachment.nsfw || (attachment.flags & MessageAttachmentFlags.CONTAINS_EXPLICIT_MEDIA) !== 0;
|
||||
@ -132,6 +135,7 @@ const VideoAttachment: FC<AttachmentMediaProps & {message?: MessageRecord}> = ob
|
||||
message={message}
|
||||
contentHash={attachment.content_hash}
|
||||
mediaAttachments={mediaAttachments}
|
||||
isPreview={isPreview}
|
||||
/>
|
||||
</div>
|
||||
</FocusRing>
|
||||
@ -139,29 +143,32 @@ const VideoAttachment: FC<AttachmentMediaProps & {message?: MessageRecord}> = ob
|
||||
},
|
||||
);
|
||||
|
||||
const AudioAttachment: FC<AttachmentMediaProps & {message?: MessageRecord}> = observer(({attachment, message}) => (
|
||||
<FocusRing within ringClassName={messageStyles.mediaFocusRing}>
|
||||
<div className={styles.attachmentWrapper}>
|
||||
<EmbedAudio
|
||||
src={attachment.proxy_url ?? attachment.url ?? ''}
|
||||
title={attachment.title || attachment.filename}
|
||||
duration={attachment.duration}
|
||||
embedUrl={attachment.url ?? ''}
|
||||
channelId={message?.channelId}
|
||||
messageId={message?.id}
|
||||
attachmentId={attachment.id}
|
||||
message={message}
|
||||
contentHash={attachment.content_hash}
|
||||
/>
|
||||
</div>
|
||||
</FocusRing>
|
||||
));
|
||||
const AudioAttachment: FC<AttachmentMediaProps & {message?: MessageRecord; isPreview?: boolean}> = observer(
|
||||
({attachment, message, isPreview}) => (
|
||||
<FocusRing within ringClassName={messageStyles.mediaFocusRing}>
|
||||
<div className={styles.attachmentWrapper}>
|
||||
<EmbedAudio
|
||||
src={attachment.proxy_url ?? attachment.url ?? ''}
|
||||
title={attachment.title || attachment.filename}
|
||||
duration={attachment.duration}
|
||||
embedUrl={attachment.url ?? ''}
|
||||
channelId={message?.channelId}
|
||||
messageId={message?.id}
|
||||
attachmentId={attachment.id}
|
||||
message={message}
|
||||
contentHash={attachment.content_hash}
|
||||
isPreview={isPreview}
|
||||
/>
|
||||
</div>
|
||||
</FocusRing>
|
||||
),
|
||||
);
|
||||
|
||||
const AttachmentMedia: FC<AttachmentMediaProps & {message?: MessageRecord}> = observer(
|
||||
({attachment, message, mediaAttachments = []}) => {
|
||||
const AttachmentMedia: FC<AttachmentMediaProps & {message?: MessageRecord; isPreview?: boolean}> = observer(
|
||||
({attachment, message, mediaAttachments = [], isPreview}) => {
|
||||
const nsfw = attachment.nsfw || (attachment.flags & MessageAttachmentFlags.CONTAINS_EXPLICIT_MEDIA) !== 0;
|
||||
if (isAnimated(attachment.flags) || isGifType(attachment.content_type)) {
|
||||
return <AnimatedAttachment attachment={attachment} message={message} />;
|
||||
return <AnimatedAttachment attachment={attachment} message={message} isPreview={isPreview} />;
|
||||
}
|
||||
|
||||
const attachmentDimensions = getAttachmentMediaDimensions(message);
|
||||
@ -208,6 +215,7 @@ const AttachmentMedia: FC<AttachmentMediaProps & {message?: MessageRecord}> = ob
|
||||
message={message}
|
||||
contentHash={attachment.content_hash}
|
||||
mediaAttachments={mediaAttachments}
|
||||
isPreview={isPreview}
|
||||
/>
|
||||
</div>
|
||||
</FocusRing>
|
||||
@ -283,7 +291,7 @@ export const Attachment: FC<AttachmentProps> = observer(({attachment, isPreview,
|
||||
wrapSpoiler(
|
||||
<div className={effectiveExpired ? styles.expiredContent : undefined}>
|
||||
{effectiveExpired && <div className={styles.expiredOverlay}>{t`This attachment has expired`}</div>}
|
||||
<AudioAttachment attachment={enrichedAttachment} message={message} />
|
||||
<AudioAttachment attachment={enrichedAttachment} message={message} isPreview={isPreview} />
|
||||
</div>,
|
||||
),
|
||||
);
|
||||
@ -304,7 +312,7 @@ export const Attachment: FC<AttachmentProps> = observer(({attachment, isPreview,
|
||||
wrapSpoiler(
|
||||
<div className={effectiveExpired ? styles.expiredContent : undefined}>
|
||||
{effectiveExpired && <div className={styles.expiredOverlay}>{t`This attachment has expired`}</div>}
|
||||
<AttachmentMedia attachment={enrichedAttachment} message={message} />
|
||||
<AttachmentMedia attachment={enrichedAttachment} message={message} isPreview={isPreview} />
|
||||
</div>,
|
||||
),
|
||||
);
|
||||
@ -315,7 +323,7 @@ export const Attachment: FC<AttachmentProps> = observer(({attachment, isPreview,
|
||||
wrapSpoiler(
|
||||
<div className={effectiveExpired ? styles.expiredContent : undefined}>
|
||||
{effectiveExpired && <div className={styles.expiredOverlay}>{t`This attachment has expired`}</div>}
|
||||
<VideoAttachment attachment={enrichedAttachment} message={message} />
|
||||
<VideoAttachment attachment={enrichedAttachment} message={message} isPreview={isPreview} />
|
||||
</div>,
|
||||
),
|
||||
);
|
||||
|
||||
@ -37,6 +37,7 @@ import {clsx} from 'clsx';
|
||||
import {observer} from 'mobx-react-lite';
|
||||
import * as ContextMenuActionCreators from '~/actions/ContextMenuActionCreators';
|
||||
import {splitFilename} from '~/components/channel/embeds/EmbedUtils';
|
||||
import {useMaybeMessageViewContext} from '~/components/channel/MessageViewContext';
|
||||
import {canDeleteAttachmentUtil} from '~/components/channel/messageActionUtils';
|
||||
import {MediaContextMenu} from '~/components/uikit/ContextMenu/MediaContextMenu';
|
||||
import {Tooltip} from '~/components/uikit/Tooltip/Tooltip';
|
||||
@ -54,7 +55,7 @@ interface AttachmentFileProps {
|
||||
message?: MessageRecord;
|
||||
}
|
||||
|
||||
export const AttachmentFile = observer(({attachment, message}: AttachmentFileProps) => {
|
||||
export const AttachmentFile = observer(({attachment, message, isPreview}: AttachmentFileProps) => {
|
||||
const {t} = useLingui();
|
||||
const {enabled: isMobile} = MobileLayoutStore;
|
||||
const isExpired = Boolean(attachment.expired);
|
||||
@ -131,9 +132,11 @@ export const AttachmentFile = observer(({attachment, message}: AttachmentFilePro
|
||||
|
||||
const handleDelete = useDeleteAttachment(message, attachment.id);
|
||||
const canDelete = canDeleteAttachmentUtil(message) && !isMobile;
|
||||
const showDeleteButton = canDelete && !isPreview;
|
||||
const messageViewContext = useMaybeMessageViewContext();
|
||||
|
||||
const handleContextMenu = (e: React.MouseEvent) => {
|
||||
if (!message) return;
|
||||
if (!message || isPreview) return;
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
@ -148,7 +151,7 @@ export const AttachmentFile = observer(({attachment, message}: AttachmentFilePro
|
||||
defaultName={attachment.filename}
|
||||
defaultAltText={attachment.filename}
|
||||
onClose={onClose}
|
||||
onDelete={() => {}}
|
||||
onDelete={isPreview ? () => {} : (messageViewContext?.handleDelete ?? (() => {}))}
|
||||
/>
|
||||
));
|
||||
};
|
||||
@ -156,7 +159,7 @@ export const AttachmentFile = observer(({attachment, message}: AttachmentFilePro
|
||||
return (
|
||||
// biome-ignore lint/a11y/noStaticElementInteractions: context menu on container is intentional
|
||||
<div style={containerStyles} className={attachmentFileStyles.container} onContextMenu={handleContextMenu}>
|
||||
{canDelete && (
|
||||
{showDeleteButton && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleDelete}
|
||||
|
||||
@ -37,6 +37,7 @@ import EmbedVideo from '~/components/channel/embeds/media/EmbedVideo';
|
||||
import {getMediaButtonVisibility} from '~/components/channel/embeds/media/MediaButtonUtils';
|
||||
import {MediaContainer} from '~/components/channel/embeds/media/MediaContainer';
|
||||
import {NSFWBlurOverlay} from '~/components/channel/embeds/NSFWBlurOverlay';
|
||||
import {useMaybeMessageViewContext} from '~/components/channel/MessageViewContext';
|
||||
import {ExpiryFootnote} from '~/components/common/ExpiryFootnote';
|
||||
import {SpoilerOverlay} from '~/components/common/SpoilerOverlay';
|
||||
import {AddFavoriteMemeModal} from '~/components/modals/AddFavoriteMemeModal';
|
||||
@ -61,12 +62,14 @@ interface AttachmentMosaicProps {
|
||||
attachments: ReadonlyArray<MessageAttachment>;
|
||||
message?: MessageRecord;
|
||||
hideExpiryFootnote?: boolean;
|
||||
isPreview?: boolean;
|
||||
}
|
||||
|
||||
interface SingleAttachmentProps {
|
||||
attachment: MessageAttachment;
|
||||
message?: MessageRecord;
|
||||
mediaAttachments: ReadonlyArray<MessageAttachment>;
|
||||
isPreview?: boolean;
|
||||
}
|
||||
|
||||
const isImageType = (contentType?: string): boolean => contentType?.startsWith('image/') ?? false;
|
||||
@ -122,280 +125,287 @@ interface MosaicItemProps {
|
||||
style?: CSSProperties;
|
||||
message?: MessageRecord;
|
||||
mediaAttachments?: ReadonlyArray<MessageAttachment>;
|
||||
isPreview?: boolean;
|
||||
}
|
||||
|
||||
const MosaicItemBase: FC<MosaicItemProps> = observer(({attachment, style, message, mediaAttachments = []}) => {
|
||||
const {i18n} = useLingui();
|
||||
const isVideo = isVideoType(attachment.content_type);
|
||||
const isAudio = isAudioType(attachment.content_type);
|
||||
const isAnimatedGif = isAnimated(attachment.flags) || isGifType(attachment.content_type);
|
||||
const isSpoiler = (attachment.flags & MessageAttachmentFlags.IS_SPOILER) !== 0;
|
||||
const nsfw = attachment.nsfw || (attachment.flags & MessageAttachmentFlags.CONTAINS_EXPLICIT_MEDIA) !== 0;
|
||||
const MosaicItemBase: FC<MosaicItemProps> = observer(
|
||||
({attachment, style, message, mediaAttachments = [], isPreview}) => {
|
||||
const {i18n} = useLingui();
|
||||
const messageViewContext = useMaybeMessageViewContext();
|
||||
const isVideo = isVideoType(attachment.content_type);
|
||||
const isAudio = isAudioType(attachment.content_type);
|
||||
const isAnimatedGif = isAnimated(attachment.flags) || isGifType(attachment.content_type);
|
||||
const isSpoiler = (attachment.flags & MessageAttachmentFlags.IS_SPOILER) !== 0;
|
||||
const nsfw = attachment.nsfw || (attachment.flags & MessageAttachmentFlags.CONTAINS_EXPLICIT_MEDIA) !== 0;
|
||||
|
||||
const {hidden: spoilerHidden, reveal: revealSpoiler} = useSpoilerState(isSpoiler, message?.channelId);
|
||||
const {shouldBlur, gateReason} = useNSFWMedia(nsfw, message?.channelId);
|
||||
const {hidden: spoilerHidden, reveal: revealSpoiler} = useSpoilerState(isSpoiler, message?.channelId);
|
||||
const {shouldBlur, gateReason} = useNSFWMedia(nsfw, message?.channelId);
|
||||
|
||||
const wrapSpoiler = (node: ReactElement) =>
|
||||
isSpoiler ? (
|
||||
<SpoilerOverlay hidden={spoilerHidden} onReveal={revealSpoiler}>
|
||||
{node}
|
||||
</SpoilerOverlay>
|
||||
) : (
|
||||
node
|
||||
);
|
||||
const wrapSpoiler = (node: ReactElement) =>
|
||||
isSpoiler ? (
|
||||
<SpoilerOverlay hidden={spoilerHidden} onReveal={revealSpoiler}>
|
||||
{node}
|
||||
</SpoilerOverlay>
|
||||
) : (
|
||||
node
|
||||
);
|
||||
|
||||
const mosaicDimensions = getMosaicMediaDimensions(message);
|
||||
const maxMosaicWidth = mosaicDimensions.maxWidth;
|
||||
const targetWidth = Math.min(attachment.width || maxMosaicWidth, maxMosaicWidth * 2);
|
||||
const targetHeight = attachment.height
|
||||
? Math.round((targetWidth / attachment.width!) * attachment.height)
|
||||
: targetWidth;
|
||||
const mosaicDimensions = getMosaicMediaDimensions(message);
|
||||
const maxMosaicWidth = mosaicDimensions.maxWidth;
|
||||
const targetWidth = Math.min(attachment.width || maxMosaicWidth, maxMosaicWidth * 2);
|
||||
const targetHeight = attachment.height
|
||||
? Math.round((targetWidth / attachment.width!) * attachment.height)
|
||||
: targetWidth;
|
||||
|
||||
const proxyUrl = attachment.proxy_url ?? attachment.url ?? '';
|
||||
const isBlob = proxyUrl.startsWith('blob:');
|
||||
const proxyUrl = attachment.proxy_url ?? attachment.url ?? '';
|
||||
const isBlob = proxyUrl.startsWith('blob:');
|
||||
|
||||
const thumbnailSrc =
|
||||
proxyUrl.length === 0
|
||||
? ''
|
||||
: isBlob
|
||||
? proxyUrl
|
||||
: isAnimatedGif
|
||||
const thumbnailSrc =
|
||||
proxyUrl.length === 0
|
||||
? ''
|
||||
: isBlob
|
||||
? proxyUrl
|
||||
: buildMediaProxyURL(proxyUrl, {
|
||||
format: 'webp',
|
||||
width: targetWidth,
|
||||
height: targetHeight,
|
||||
});
|
||||
: isAnimatedGif
|
||||
? proxyUrl
|
||||
: buildMediaProxyURL(proxyUrl, {
|
||||
format: 'webp',
|
||||
width: targetWidth,
|
||||
height: targetHeight,
|
||||
});
|
||||
|
||||
const {loaded, error, thumbHashURL} = useMediaLoading(thumbnailSrc, attachment.placeholder);
|
||||
const {loaded, error, thumbHashURL} = useMediaLoading(thumbnailSrc, attachment.placeholder);
|
||||
|
||||
const memes = FavoriteMemeStore.memes;
|
||||
const isFavorited = attachment.content_hash
|
||||
? memes.some((meme) => meme.contentHash === attachment.content_hash)
|
||||
: false;
|
||||
const memes = FavoriteMemeStore.memes;
|
||||
const isFavorited = attachment.content_hash
|
||||
? memes.some((meme) => meme.contentHash === attachment.content_hash)
|
||||
: false;
|
||||
|
||||
const handleClick = useCallback(
|
||||
(event: MouseEvent | KeyboardEvent) => {
|
||||
if (shouldBlur) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
return;
|
||||
}
|
||||
|
||||
if (event.type === 'keydown') {
|
||||
const keyEvent = event as KeyboardEvent;
|
||||
if (keyEvent.key !== 'Enter' && keyEvent.key !== ' ') {
|
||||
const handleClick = useCallback(
|
||||
(event: MouseEvent | KeyboardEvent) => {
|
||||
if (shouldBlur) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
return;
|
||||
}
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
const currentIndex = mediaAttachments.findIndex((a) => a.id === attachment.id);
|
||||
|
||||
const items = mediaAttachments.map((att) => {
|
||||
const attIsVideo = isVideoType(att.content_type);
|
||||
const attIsAudio = isAudioType(att.content_type);
|
||||
const attIsAnimatedGif =
|
||||
(att.flags & MessageAttachmentFlags.IS_ANIMATED) !== 0 || att.content_type === 'image/gif';
|
||||
|
||||
let type: 'image' | 'gif' | 'gifv' | 'video' | 'audio';
|
||||
if (attIsAudio) {
|
||||
type = 'audio';
|
||||
} else if (attIsVideo) {
|
||||
type = 'video';
|
||||
} else if (attIsAnimatedGif) {
|
||||
type = 'gif';
|
||||
} else {
|
||||
type = 'image';
|
||||
if (event.type === 'keydown') {
|
||||
const keyEvent = event as KeyboardEvent;
|
||||
if (keyEvent.key !== 'Enter' && keyEvent.key !== ' ') {
|
||||
return;
|
||||
}
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
const attProxy = att.proxy_url ?? att.url ?? '';
|
||||
const attUrl = att.url ?? '';
|
||||
const currentIndex = mediaAttachments.findIndex((a) => a.id === attachment.id);
|
||||
|
||||
return {
|
||||
src: attProxy,
|
||||
originalSrc: attUrl,
|
||||
naturalWidth: att.width || 0,
|
||||
naturalHeight: att.height || 0,
|
||||
type,
|
||||
contentHash: att.content_hash,
|
||||
attachmentId: att.id,
|
||||
filename: att.filename,
|
||||
fileSize: att.size,
|
||||
duration: att.duration,
|
||||
expiresAt: att.expires_at ?? null,
|
||||
expired: att.expired ?? false,
|
||||
};
|
||||
});
|
||||
const items = mediaAttachments.map((att) => {
|
||||
const attIsVideo = isVideoType(att.content_type);
|
||||
const attIsAudio = isAudioType(att.content_type);
|
||||
const attIsAnimatedGif =
|
||||
(att.flags & MessageAttachmentFlags.IS_ANIMATED) !== 0 || att.content_type === 'image/gif';
|
||||
|
||||
MediaViewerActionCreators.openMediaViewer(items, currentIndex, {
|
||||
channelId: message?.channelId,
|
||||
messageId: message?.id,
|
||||
message,
|
||||
});
|
||||
},
|
||||
[attachment, message, mediaAttachments, shouldBlur],
|
||||
);
|
||||
let type: 'image' | 'gif' | 'gifv' | 'video' | 'audio';
|
||||
if (attIsAudio) {
|
||||
type = 'audio';
|
||||
} else if (attIsVideo) {
|
||||
type = 'video';
|
||||
} else if (attIsAnimatedGif) {
|
||||
type = 'gif';
|
||||
} else {
|
||||
type = 'image';
|
||||
}
|
||||
|
||||
const handleFavoriteClick = useCallback(
|
||||
async (e: MouseEvent) => {
|
||||
e.stopPropagation();
|
||||
if (!message?.channelId || !message?.id) return;
|
||||
const attProxy = att.proxy_url ?? att.url ?? '';
|
||||
const attUrl = att.url ?? '';
|
||||
|
||||
if (isFavorited && attachment.content_hash) {
|
||||
const meme = memes.find((m) => m.contentHash === attachment.content_hash);
|
||||
if (!meme) return;
|
||||
await FavoriteMemeActionCreators.deleteFavoriteMeme(i18n, meme.id);
|
||||
} else {
|
||||
return {
|
||||
src: attProxy,
|
||||
originalSrc: attUrl,
|
||||
naturalWidth: att.width || 0,
|
||||
naturalHeight: att.height || 0,
|
||||
type,
|
||||
contentHash: att.content_hash,
|
||||
attachmentId: att.id,
|
||||
filename: att.filename,
|
||||
fileSize: att.size,
|
||||
duration: att.duration,
|
||||
expiresAt: att.expires_at ?? null,
|
||||
expired: att.expired ?? false,
|
||||
};
|
||||
});
|
||||
|
||||
MediaViewerActionCreators.openMediaViewer(items, currentIndex, {
|
||||
channelId: message?.channelId,
|
||||
messageId: message?.id,
|
||||
message,
|
||||
});
|
||||
},
|
||||
[attachment, message, mediaAttachments, shouldBlur],
|
||||
);
|
||||
|
||||
const handleFavoriteClick = useCallback(
|
||||
async (e: MouseEvent) => {
|
||||
e.stopPropagation();
|
||||
if (!message?.channelId || !message?.id) return;
|
||||
|
||||
if (isFavorited && attachment.content_hash) {
|
||||
const meme = memes.find((m) => m.contentHash === attachment.content_hash);
|
||||
if (!meme) return;
|
||||
await FavoriteMemeActionCreators.deleteFavoriteMeme(i18n, meme.id);
|
||||
} else {
|
||||
const defaultName = FavoriteMemeUtils.deriveDefaultNameFromAttachment(i18n, attachment);
|
||||
ModalActionCreators.push(
|
||||
modal(() => (
|
||||
<AddFavoriteMemeModal
|
||||
channelId={message.channelId}
|
||||
messageId={message.id}
|
||||
attachmentId={attachment.id}
|
||||
defaultName={defaultName}
|
||||
defaultAltText={attachment.filename}
|
||||
/>
|
||||
)),
|
||||
);
|
||||
}
|
||||
},
|
||||
[message, attachment, isFavorited, memes, i18n],
|
||||
);
|
||||
|
||||
const handleDownloadClick = useCallback(
|
||||
(e: MouseEvent) => {
|
||||
e.stopPropagation();
|
||||
const mediaType = isAudio ? 'audio' : isVideo ? 'video' : 'image';
|
||||
createSaveHandler(attachment.url ?? '', mediaType)();
|
||||
},
|
||||
[attachment.url, isAudio, isVideo],
|
||||
);
|
||||
|
||||
const isRealAttachment = !message?.attachments ? false : message.attachments.some((a) => a.id === attachment.id);
|
||||
|
||||
const handleDeleteClick = useDeleteAttachment(message, isRealAttachment ? attachment.id : undefined);
|
||||
|
||||
const handleContextMenu = useCallback(
|
||||
(e: MouseEvent) => {
|
||||
if (!message || isPreview) return;
|
||||
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
const mediaType = isAudio ? 'audio' : isVideo ? 'video' : 'image';
|
||||
const defaultName = FavoriteMemeUtils.deriveDefaultNameFromAttachment(i18n, attachment);
|
||||
ModalActionCreators.push(
|
||||
modal(() => (
|
||||
<AddFavoriteMemeModal
|
||||
channelId={message.channelId}
|
||||
messageId={message.id}
|
||||
attachmentId={attachment.id}
|
||||
defaultName={defaultName}
|
||||
defaultAltText={attachment.filename}
|
||||
/>
|
||||
)),
|
||||
);
|
||||
}
|
||||
},
|
||||
[message, attachment, isFavorited, memes, i18n],
|
||||
);
|
||||
|
||||
const handleDownloadClick = useCallback(
|
||||
(e: MouseEvent) => {
|
||||
e.stopPropagation();
|
||||
const mediaType = isAudio ? 'audio' : isVideo ? 'video' : 'image';
|
||||
createSaveHandler(attachment.url ?? '', mediaType)();
|
||||
},
|
||||
[attachment.url, isAudio, isVideo],
|
||||
);
|
||||
ContextMenuActionCreators.openFromEvent(e, ({onClose}) => (
|
||||
<MediaContextMenu
|
||||
message={message}
|
||||
originalSrc={attachment.url ?? ''}
|
||||
proxyURL={attachment.proxy_url ?? attachment.url ?? ''}
|
||||
type={mediaType}
|
||||
contentHash={attachment.content_hash}
|
||||
attachmentId={attachment.id}
|
||||
defaultName={defaultName}
|
||||
defaultAltText={attachment.filename}
|
||||
onClose={onClose}
|
||||
onDelete={isPreview ? () => {} : (messageViewContext?.handleDelete ?? (() => {}))}
|
||||
/>
|
||||
));
|
||||
},
|
||||
[message, attachment, isAudio, isVideo, isPreview, messageViewContext],
|
||||
);
|
||||
|
||||
const handleDeleteClick = useDeleteAttachment(message, attachment.id);
|
||||
const mediaType = isAudio ? 'audio' : isVideo ? 'video' : isAnimatedGif ? 'animated GIF' : 'image';
|
||||
const ariaLabel = `Open ${mediaType} in full view`;
|
||||
const shouldRenderPlaceholder = !loaded || error;
|
||||
const aspectRatioStyle =
|
||||
attachment.width && attachment.height ? {aspectRatio: `${attachment.width} / ${attachment.height}`} : undefined;
|
||||
|
||||
const handleContextMenu = useCallback(
|
||||
(e: MouseEvent) => {
|
||||
if (!message) return;
|
||||
const canFavorite = !!(message?.channelId && message?.id);
|
||||
const {showFavoriteButton, showDownloadButton, showDeleteButton} = getMediaButtonVisibility(
|
||||
canFavorite,
|
||||
isPreview ? undefined : message,
|
||||
isRealAttachment ? attachment.id : undefined,
|
||||
{disableDelete: !!isPreview},
|
||||
);
|
||||
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
const mediaType = isAudio ? 'audio' : isVideo ? 'video' : 'image';
|
||||
const defaultName = FavoriteMemeUtils.deriveDefaultNameFromAttachment(i18n, attachment);
|
||||
|
||||
ContextMenuActionCreators.openFromEvent(e, ({onClose}) => (
|
||||
<MediaContextMenu
|
||||
message={message}
|
||||
originalSrc={attachment.url ?? ''}
|
||||
proxyURL={attachment.proxy_url ?? attachment.url ?? ''}
|
||||
type={mediaType}
|
||||
contentHash={attachment.content_hash}
|
||||
attachmentId={attachment.id}
|
||||
defaultName={defaultName}
|
||||
defaultAltText={attachment.filename}
|
||||
onClose={onClose}
|
||||
onDelete={() => {}}
|
||||
/>
|
||||
));
|
||||
},
|
||||
[message, attachment, isAudio, isVideo],
|
||||
);
|
||||
|
||||
const mediaType = isAudio ? 'audio' : isVideo ? 'video' : isAnimatedGif ? 'animated GIF' : 'image';
|
||||
const ariaLabel = `Open ${mediaType} in full view`;
|
||||
const shouldRenderPlaceholder = !loaded || error;
|
||||
const aspectRatioStyle =
|
||||
attachment.width && attachment.height ? {aspectRatio: `${attachment.width} / ${attachment.height}`} : undefined;
|
||||
|
||||
const canFavorite = !!(message?.channelId && message?.id);
|
||||
const {showFavoriteButton, showDownloadButton, showDeleteButton} = getMediaButtonVisibility(
|
||||
canFavorite,
|
||||
message,
|
||||
attachment.id,
|
||||
);
|
||||
|
||||
return wrapSpoiler(
|
||||
<MediaContainer
|
||||
className={styles.mosaicItem}
|
||||
style={style}
|
||||
showFavoriteButton={showFavoriteButton}
|
||||
isFavorited={isFavorited}
|
||||
onFavoriteClick={handleFavoriteClick}
|
||||
showDownloadButton={showDownloadButton}
|
||||
onDownloadClick={handleDownloadClick}
|
||||
showDeleteButton={showDeleteButton}
|
||||
onDeleteClick={handleDeleteClick}
|
||||
onContextMenu={handleContextMenu}
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
className={styles.clickableButton}
|
||||
onClick={handleClick}
|
||||
onKeyDown={handleClick}
|
||||
aria-label={ariaLabel}
|
||||
return wrapSpoiler(
|
||||
<MediaContainer
|
||||
className={styles.mosaicItem}
|
||||
style={style}
|
||||
showFavoriteButton={showFavoriteButton}
|
||||
isFavorited={isFavorited}
|
||||
onFavoriteClick={handleFavoriteClick}
|
||||
showDownloadButton={showDownloadButton}
|
||||
onDownloadClick={handleDownloadClick}
|
||||
showDeleteButton={showDeleteButton}
|
||||
onDeleteClick={handleDeleteClick}
|
||||
onContextMenu={handleContextMenu}
|
||||
>
|
||||
{isAudio ? (
|
||||
<div className={styles.audioPlaceholder}>
|
||||
<SpeakerHighIcon weight="fill" />
|
||||
</div>
|
||||
) : (
|
||||
<div className={styles.mediaContainer}>
|
||||
<div className={styles.clickableWrapper}>
|
||||
<div className={styles.loadingOverlay} style={aspectRatioStyle}>
|
||||
{isAnimatedGif && <div className={styles.gifIndicator}>GIF</div>}
|
||||
<button
|
||||
type="button"
|
||||
className={styles.clickableButton}
|
||||
onClick={handleClick}
|
||||
onKeyDown={handleClick}
|
||||
aria-label={ariaLabel}
|
||||
>
|
||||
{isAudio ? (
|
||||
<div className={styles.audioPlaceholder}>
|
||||
<SpeakerHighIcon weight="fill" />
|
||||
</div>
|
||||
) : (
|
||||
<div className={styles.mediaContainer}>
|
||||
<div className={styles.clickableWrapper}>
|
||||
<div className={styles.loadingOverlay} style={aspectRatioStyle}>
|
||||
{isAnimatedGif && <div className={styles.gifIndicator}>GIF</div>}
|
||||
|
||||
<AnimatePresence>
|
||||
{shouldRenderPlaceholder && thumbHashURL && (
|
||||
<motion.img
|
||||
key="placeholder"
|
||||
initial={{opacity: 1}}
|
||||
exit={{opacity: 0}}
|
||||
transition={{duration: 0.3}}
|
||||
src={thumbHashURL}
|
||||
alt=""
|
||||
className={styles.placeholderImage}
|
||||
/>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
<AnimatePresence>
|
||||
{shouldRenderPlaceholder && thumbHashURL && (
|
||||
<motion.img
|
||||
key="placeholder"
|
||||
initial={{opacity: 1}}
|
||||
exit={{opacity: 0}}
|
||||
transition={{duration: 0.3}}
|
||||
src={thumbHashURL}
|
||||
alt=""
|
||||
className={styles.placeholderImage}
|
||||
/>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
|
||||
<img
|
||||
src={thumbnailSrc}
|
||||
alt={attachment.filename}
|
||||
loading="lazy"
|
||||
draggable={false}
|
||||
className={clsx(
|
||||
styles.mediaImage,
|
||||
shouldRenderPlaceholder && styles.mediaImageHidden,
|
||||
shouldBlur && styles.mediaBlurred,
|
||||
)}
|
||||
aria-hidden={shouldBlur}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{shouldBlur && (
|
||||
<div className={styles.nsfwOverlay}>
|
||||
<NSFWBlurOverlay reason={gateReason} />
|
||||
<img
|
||||
src={thumbnailSrc}
|
||||
alt={attachment.filename}
|
||||
loading="lazy"
|
||||
draggable={false}
|
||||
className={clsx(
|
||||
styles.mediaImage,
|
||||
shouldRenderPlaceholder && styles.mediaImageHidden,
|
||||
shouldBlur && styles.mediaBlurred,
|
||||
)}
|
||||
aria-hidden={shouldBlur}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{(isVideo || isAudio) && (
|
||||
<div className={styles.playButtonOverlay}>
|
||||
<div className={styles.playButton}>
|
||||
<PlayIcon size={28} weight="fill" aria-hidden="true" />
|
||||
{shouldBlur && (
|
||||
<div className={styles.nsfwOverlay}>
|
||||
<NSFWBlurOverlay reason={gateReason} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</button>
|
||||
</MediaContainer>,
|
||||
);
|
||||
});
|
||||
)}
|
||||
|
||||
const SingleAttachment: FC<SingleAttachmentProps> = observer(({attachment, message, mediaAttachments}) => {
|
||||
{(isVideo || isAudio) && (
|
||||
<div className={styles.playButtonOverlay}>
|
||||
<div className={styles.playButton}>
|
||||
<PlayIcon size={28} weight="fill" aria-hidden="true" />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</button>
|
||||
</MediaContainer>,
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
const SingleAttachment: FC<SingleAttachmentProps> = observer(({attachment, message, mediaAttachments, isPreview}) => {
|
||||
const isVideo = isVideoType(attachment.content_type);
|
||||
const isAnimatedGif = isAnimated(attachment.flags) || isGifType(attachment.content_type);
|
||||
const isSpoiler = (attachment.flags & MessageAttachmentFlags.IS_SPOILER) !== 0;
|
||||
@ -452,6 +462,7 @@ const SingleAttachment: FC<SingleAttachmentProps> = observer(({attachment, messa
|
||||
height={dimensions.height}
|
||||
title={attachment.title || attachment.filename}
|
||||
mediaAttachments={mediaAttachments}
|
||||
isPreview={isPreview}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@ -474,6 +485,7 @@ const SingleAttachment: FC<SingleAttachmentProps> = observer(({attachment, messa
|
||||
proxyURL={animatedProxyURL}
|
||||
naturalWidth={attachment.width!}
|
||||
naturalHeight={attachment.height!}
|
||||
isPreview={isPreview}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@ -501,184 +513,193 @@ const SingleAttachment: FC<SingleAttachmentProps> = observer(({attachment, messa
|
||||
height={dimensions.height}
|
||||
constrain={true}
|
||||
mediaAttachments={mediaAttachments}
|
||||
isPreview={isPreview}
|
||||
/>,
|
||||
);
|
||||
});
|
||||
|
||||
const AttachmentMosaicComponent: FC<AttachmentMosaicProps> = observer(({attachments, message, hideExpiryFootnote}) => {
|
||||
const {t} = useLingui();
|
||||
const AttachmentMosaicComponent: FC<AttachmentMosaicProps> = observer(
|
||||
({attachments, message, hideExpiryFootnote, isPreview}) => {
|
||||
const {t} = useLingui();
|
||||
|
||||
const mediaAttachments = attachments.filter(isMediaAttachment);
|
||||
const count = mediaAttachments.length;
|
||||
const aggregateExpiry = getEarliestAttachmentExpiry(attachments);
|
||||
const mediaAttachments = attachments.filter(isMediaAttachment);
|
||||
const count = mediaAttachments.length;
|
||||
const aggregateExpiry = getEarliestAttachmentExpiry(attachments);
|
||||
|
||||
const renderFootnote = () => {
|
||||
if (hideExpiryFootnote) {
|
||||
const renderFootnote = () => {
|
||||
if (hideExpiryFootnote) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const earliest = formatAttachmentDate(aggregateExpiry.expiresAt);
|
||||
const latest = formatAttachmentDate(aggregateExpiry.latestAt);
|
||||
|
||||
let label: string;
|
||||
if (earliest && latest && earliest !== latest) {
|
||||
label = aggregateExpiry.isExpired
|
||||
? t`Expired between ${earliest} and ${latest}`
|
||||
: t`Expires between ${earliest} and ${latest}`;
|
||||
} else if (earliest) {
|
||||
label = aggregateExpiry.isExpired ? t`Expired on ${earliest}` : t`Expires on ${earliest}`;
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
|
||||
return AccessibilityStore.showAttachmentExpiryIndicator ? (
|
||||
<ExpiryFootnote expiresAt={aggregateExpiry.expiresAt} isExpired={aggregateExpiry.isExpired} label={label} />
|
||||
) : null;
|
||||
};
|
||||
|
||||
if (count === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const earliest = formatAttachmentDate(aggregateExpiry.expiresAt);
|
||||
const latest = formatAttachmentDate(aggregateExpiry.latestAt);
|
||||
const renderMosaicItem = (attachment: MessageAttachment, key?: string) => (
|
||||
<MosaicItemBase
|
||||
key={key || attachment.id}
|
||||
attachment={attachment}
|
||||
message={message}
|
||||
mediaAttachments={mediaAttachments}
|
||||
isPreview={isPreview}
|
||||
/>
|
||||
);
|
||||
|
||||
let label: string;
|
||||
if (earliest && latest && earliest !== latest) {
|
||||
label = aggregateExpiry.isExpired
|
||||
? t`Expired between ${earliest} and ${latest}`
|
||||
: t`Expires between ${earliest} and ${latest}`;
|
||||
} else if (earliest) {
|
||||
label = aggregateExpiry.isExpired ? t`Expired on ${earliest}` : t`Expires on ${earliest}`;
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
|
||||
return AccessibilityStore.showAttachmentExpiryIndicator ? (
|
||||
<ExpiryFootnote expiresAt={aggregateExpiry.expiresAt} isExpired={aggregateExpiry.isExpired} label={label} />
|
||||
) : null;
|
||||
};
|
||||
|
||||
if (count === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const renderMosaicItem = (attachment: MessageAttachment, key?: string) => (
|
||||
<MosaicItemBase
|
||||
key={key || attachment.id}
|
||||
attachment={attachment}
|
||||
message={message}
|
||||
mediaAttachments={mediaAttachments}
|
||||
/>
|
||||
);
|
||||
|
||||
const renderGrid = (items: ReadonlyArray<MessageAttachment>, gridClassName: string) => (
|
||||
<div className={styles.mosaicContainerWrapper}>
|
||||
<div className={styles.mosaicContainer}>
|
||||
<div className={gridClassName}>{items.map((attachment) => renderMosaicItem(attachment))}</div>
|
||||
const renderGrid = (items: ReadonlyArray<MessageAttachment>, gridClassName: string) => (
|
||||
<div className={styles.mosaicContainerWrapper}>
|
||||
<div className={styles.mosaicContainer}>
|
||||
<div className={gridClassName}>{items.map((attachment) => renderMosaicItem(attachment))}</div>
|
||||
</div>
|
||||
{renderFootnote()}
|
||||
</div>
|
||||
{renderFootnote()}
|
||||
</div>
|
||||
);
|
||||
);
|
||||
|
||||
switch (count) {
|
||||
case 1:
|
||||
return (
|
||||
<div className={styles.mosaicContainerWrapper}>
|
||||
<div className={styles.mosaicContainer}>
|
||||
<SingleAttachment attachment={mediaAttachments[0]} message={message} mediaAttachments={mediaAttachments} />
|
||||
</div>
|
||||
{renderFootnote()}
|
||||
</div>
|
||||
);
|
||||
|
||||
case 2:
|
||||
return (
|
||||
<div className={styles.mosaicContainerWrapper}>
|
||||
<div className={styles.mosaicContainer}>
|
||||
<div className={styles.oneByTwoGrid}>
|
||||
{mediaAttachments.map((attachment) => (
|
||||
<div key={attachment.id} className={styles.oneByTwoGridItem}>
|
||||
{renderMosaicItem(attachment)}
|
||||
</div>
|
||||
))}
|
||||
switch (count) {
|
||||
case 1:
|
||||
return (
|
||||
<div className={styles.mosaicContainerWrapper}>
|
||||
<div className={styles.mosaicContainer}>
|
||||
<SingleAttachment
|
||||
attachment={mediaAttachments[0]}
|
||||
message={message}
|
||||
mediaAttachments={mediaAttachments}
|
||||
isPreview={isPreview}
|
||||
/>
|
||||
</div>
|
||||
{renderFootnote()}
|
||||
</div>
|
||||
{renderFootnote()}
|
||||
</div>
|
||||
);
|
||||
);
|
||||
|
||||
case 3:
|
||||
return (
|
||||
<div className={styles.mosaicContainerWrapper}>
|
||||
<div className={styles.mosaicContainer}>
|
||||
<div className={clsx(styles.oneByTwoGrid, styles.oneByTwoLayoutThreeGrid)}>
|
||||
<div className={styles.oneByTwoSoloItem}>{renderMosaicItem(mediaAttachments[0])}</div>
|
||||
<div className={styles.oneByTwoDuoItem}>
|
||||
<div className={styles.twoByOneGrid}>
|
||||
<div className={styles.twoByOneGridItem}>{renderMosaicItem(mediaAttachments[1])}</div>
|
||||
<div className={styles.twoByOneGridItem}>{renderMosaicItem(mediaAttachments[2])}</div>
|
||||
case 2:
|
||||
return (
|
||||
<div className={styles.mosaicContainerWrapper}>
|
||||
<div className={styles.mosaicContainer}>
|
||||
<div className={styles.oneByTwoGrid}>
|
||||
{mediaAttachments.map((attachment) => (
|
||||
<div key={attachment.id} className={styles.oneByTwoGridItem}>
|
||||
{renderMosaicItem(attachment)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
{renderFootnote()}
|
||||
</div>
|
||||
);
|
||||
|
||||
case 3:
|
||||
return (
|
||||
<div className={styles.mosaicContainerWrapper}>
|
||||
<div className={styles.mosaicContainer}>
|
||||
<div className={clsx(styles.oneByTwoGrid, styles.oneByTwoLayoutThreeGrid)}>
|
||||
<div className={styles.oneByTwoSoloItem}>{renderMosaicItem(mediaAttachments[0])}</div>
|
||||
<div className={styles.oneByTwoDuoItem}>
|
||||
<div className={styles.twoByOneGrid}>
|
||||
<div className={styles.twoByOneGridItem}>{renderMosaicItem(mediaAttachments[1])}</div>
|
||||
<div className={styles.twoByOneGridItem}>{renderMosaicItem(mediaAttachments[2])}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{renderFootnote()}
|
||||
</div>
|
||||
{renderFootnote()}
|
||||
</div>
|
||||
);
|
||||
);
|
||||
|
||||
case 4:
|
||||
return renderGrid(mediaAttachments, styles.twoByTwoGrid);
|
||||
case 4:
|
||||
return renderGrid(mediaAttachments, styles.twoByTwoGrid);
|
||||
|
||||
case 5:
|
||||
return (
|
||||
<div className={styles.mosaicContainerWrapper}>
|
||||
<div className={styles.mosaicContainer}>
|
||||
<div className={clsx(styles.fiveAttachmentContainer)}>
|
||||
case 5:
|
||||
return (
|
||||
<div className={styles.mosaicContainerWrapper}>
|
||||
<div className={styles.mosaicContainer}>
|
||||
<div className={clsx(styles.fiveAttachmentContainer)}>
|
||||
<div className={styles.oneByTwoGrid}>
|
||||
<div className={styles.oneByTwoGridItem}>{renderMosaicItem(mediaAttachments[0])}</div>
|
||||
<div className={styles.oneByTwoGridItem}>{renderMosaicItem(mediaAttachments[1])}</div>
|
||||
</div>
|
||||
<div className={styles.threeByThreeGrid}>
|
||||
{mediaAttachments.slice(2, 5).map((attachment) => renderMosaicItem(attachment))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{renderFootnote()}
|
||||
</div>
|
||||
);
|
||||
|
||||
case 6:
|
||||
return renderGrid(mediaAttachments, styles.threeByThreeGrid);
|
||||
|
||||
case 7:
|
||||
return (
|
||||
<div className={styles.mosaicContainerWrapper}>
|
||||
<div className={styles.mosaicContainer}>
|
||||
<div className={clsx(styles.oneByOneGrid, styles.oneByOneGridMosaic)}>
|
||||
{renderMosaicItem(mediaAttachments[0])}
|
||||
</div>
|
||||
<div className={styles.threeByThreeGrid}>
|
||||
{mediaAttachments.slice(1, 7).map((attachment) => renderMosaicItem(attachment))}
|
||||
</div>
|
||||
</div>
|
||||
{renderFootnote()}
|
||||
</div>
|
||||
);
|
||||
|
||||
case 8:
|
||||
return (
|
||||
<div className={styles.mosaicContainerWrapper}>
|
||||
<div className={styles.mosaicContainer}>
|
||||
<div className={styles.oneByTwoGrid}>
|
||||
<div className={styles.oneByTwoGridItem}>{renderMosaicItem(mediaAttachments[0])}</div>
|
||||
<div className={styles.oneByTwoGridItem}>{renderMosaicItem(mediaAttachments[1])}</div>
|
||||
</div>
|
||||
<div className={styles.threeByThreeGrid}>
|
||||
{mediaAttachments.slice(2, 5).map((attachment) => renderMosaicItem(attachment))}
|
||||
{mediaAttachments.slice(2, 8).map((attachment) => renderMosaicItem(attachment))}
|
||||
</div>
|
||||
</div>
|
||||
{renderFootnote()}
|
||||
</div>
|
||||
{renderFootnote()}
|
||||
</div>
|
||||
);
|
||||
);
|
||||
|
||||
case 6:
|
||||
return renderGrid(mediaAttachments, styles.threeByThreeGrid);
|
||||
case 9:
|
||||
return renderGrid(mediaAttachments, styles.threeByThreeGrid);
|
||||
|
||||
case 7:
|
||||
return (
|
||||
<div className={styles.mosaicContainerWrapper}>
|
||||
<div className={styles.mosaicContainer}>
|
||||
<div className={clsx(styles.oneByOneGrid, styles.oneByOneGridMosaic)}>
|
||||
{renderMosaicItem(mediaAttachments[0])}
|
||||
</div>
|
||||
<div className={styles.threeByThreeGrid}>
|
||||
{mediaAttachments.slice(1, 7).map((attachment) => renderMosaicItem(attachment))}
|
||||
case 10:
|
||||
return (
|
||||
<div className={styles.mosaicContainerWrapper}>
|
||||
<div className={styles.mosaicContainer}>
|
||||
<div className={clsx(styles.oneByOneGrid, styles.oneByOneGridMosaic)}>
|
||||
{renderMosaicItem(mediaAttachments[0])}
|
||||
</div>
|
||||
<div className={styles.threeByThreeGrid}>
|
||||
{mediaAttachments.slice(1, 10).map((attachment) => renderMosaicItem(attachment))}
|
||||
</div>
|
||||
</div>
|
||||
{renderFootnote()}
|
||||
</div>
|
||||
{renderFootnote()}
|
||||
</div>
|
||||
);
|
||||
);
|
||||
|
||||
case 8:
|
||||
return (
|
||||
<div className={styles.mosaicContainerWrapper}>
|
||||
<div className={styles.mosaicContainer}>
|
||||
<div className={styles.oneByTwoGrid}>
|
||||
<div className={styles.oneByTwoGridItem}>{renderMosaicItem(mediaAttachments[0])}</div>
|
||||
<div className={styles.oneByTwoGridItem}>{renderMosaicItem(mediaAttachments[1])}</div>
|
||||
</div>
|
||||
<div className={styles.threeByThreeGrid}>
|
||||
{mediaAttachments.slice(2, 8).map((attachment) => renderMosaicItem(attachment))}
|
||||
</div>
|
||||
</div>
|
||||
{renderFootnote()}
|
||||
</div>
|
||||
);
|
||||
|
||||
case 9:
|
||||
return renderGrid(mediaAttachments, styles.threeByThreeGrid);
|
||||
|
||||
case 10:
|
||||
return (
|
||||
<div className={styles.mosaicContainerWrapper}>
|
||||
<div className={styles.mosaicContainer}>
|
||||
<div className={clsx(styles.oneByOneGrid, styles.oneByOneGridMosaic)}>
|
||||
{renderMosaicItem(mediaAttachments[0])}
|
||||
</div>
|
||||
<div className={styles.threeByThreeGrid}>
|
||||
{mediaAttachments.slice(1, 10).map((attachment) => renderMosaicItem(attachment))}
|
||||
</div>
|
||||
</div>
|
||||
{renderFootnote()}
|
||||
</div>
|
||||
);
|
||||
|
||||
default:
|
||||
throw new Error('This should never happen');
|
||||
}
|
||||
});
|
||||
default:
|
||||
throw new Error('This should never happen');
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
export const AttachmentMosaic: FC<AttachmentMosaicProps> = AttachmentMosaicComponent;
|
||||
|
||||
@ -25,8 +25,8 @@ import {type FC, useCallback, useEffect, useRef, useState} from 'react';
|
||||
import * as ContextMenuActionCreators from '~/actions/ContextMenuActionCreators';
|
||||
import * as MediaViewerActionCreators from '~/actions/MediaViewerActionCreators';
|
||||
import {deriveDefaultNameFromMessage, splitFilename} from '~/components/channel/embeds/EmbedUtils';
|
||||
import {getMediaButtonVisibility} from '~/components/channel/embeds/media/MediaButtonUtils';
|
||||
import type {BaseMediaProps} from '~/components/channel/embeds/media/MediaTypes';
|
||||
import {canDeleteAttachmentUtil} from '~/components/channel/messageActionUtils';
|
||||
import {InlineAudioPlayer} from '~/components/media-player/components/InlineAudioPlayer';
|
||||
import {MediaContextMenu} from '~/components/uikit/ContextMenu/MediaContextMenu';
|
||||
import {Tooltip} from '~/components/uikit/Tooltip/Tooltip';
|
||||
@ -47,6 +47,7 @@ type EmbedAudioProps = BaseMediaProps & {
|
||||
embedUrl?: string;
|
||||
fileSize?: number;
|
||||
mediaAttachments?: ReadonlyArray<MessageAttachment>;
|
||||
isPreview?: boolean;
|
||||
};
|
||||
|
||||
const EmbedAudio: FC<EmbedAudioProps> = observer(
|
||||
@ -63,6 +64,7 @@ const EmbedAudio: FC<EmbedAudioProps> = observer(
|
||||
contentHash,
|
||||
onDelete,
|
||||
fileSize,
|
||||
isPreview,
|
||||
}) => {
|
||||
const {t} = useLingui();
|
||||
const effectiveSrc = buildMediaProxyURL(src);
|
||||
@ -88,7 +90,7 @@ const EmbedAudio: FC<EmbedAudioProps> = observer(
|
||||
|
||||
const handleContextMenu = useCallback(
|
||||
(e: React.MouseEvent) => {
|
||||
if (!message) return;
|
||||
if (!message || isPreview) return;
|
||||
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
@ -106,7 +108,7 @@ const EmbedAudio: FC<EmbedAudioProps> = observer(
|
||||
/>
|
||||
));
|
||||
},
|
||||
[message, src, contentHash, attachmentId, defaultName, onDelete],
|
||||
[message, src, contentHash, attachmentId, defaultName, onDelete, isPreview],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
@ -189,7 +191,12 @@ const EmbedAudio: FC<EmbedAudioProps> = observer(
|
||||
maxWidth: '400px',
|
||||
};
|
||||
|
||||
const canDelete = canDeleteAttachmentUtil(message) && !isMobile;
|
||||
const {showDeleteButton, showDownloadButton} = getMediaButtonVisibility(
|
||||
canFavorite,
|
||||
isPreview ? undefined : message,
|
||||
attachmentId,
|
||||
{disableDelete: !!isPreview},
|
||||
);
|
||||
|
||||
if (isMobile) {
|
||||
return (
|
||||
@ -223,7 +230,7 @@ const EmbedAudio: FC<EmbedAudioProps> = observer(
|
||||
|
||||
return (
|
||||
<div style={containerStyles} className={styles.container}>
|
||||
{canDelete && (
|
||||
{showDeleteButton && (
|
||||
<Tooltip text={t`Delete`} position="top">
|
||||
<button
|
||||
type="button"
|
||||
@ -243,7 +250,7 @@ const EmbedAudio: FC<EmbedAudioProps> = observer(
|
||||
isFavorited={isFavorited}
|
||||
canFavorite={canFavorite}
|
||||
onFavoriteClick={handleFavoriteClick}
|
||||
onDownloadClick={handleDownload}
|
||||
onDownloadClick={showDownloadButton ? handleDownload : undefined}
|
||||
onContextMenu={handleContextMenu}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@ -255,6 +255,7 @@ export const EmbedGifv: FC<
|
||||
videoProxyURL: string;
|
||||
videoURL: string;
|
||||
videoConfig?: VideoConfig;
|
||||
isPreview?: boolean;
|
||||
}
|
||||
> = observer(
|
||||
({
|
||||
@ -272,6 +273,7 @@ export const EmbedGifv: FC<
|
||||
message,
|
||||
contentHash,
|
||||
onDelete,
|
||||
isPreview,
|
||||
}) => {
|
||||
const {t} = useLingui();
|
||||
const {loaded, error, thumbHashURL} = useMediaLoading(
|
||||
@ -329,7 +331,7 @@ export const EmbedGifv: FC<
|
||||
|
||||
const handleContextMenu = useCallback(
|
||||
(e: React.MouseEvent) => {
|
||||
if (!message) return;
|
||||
if (!message || isPreview) return;
|
||||
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
@ -348,7 +350,7 @@ export const EmbedGifv: FC<
|
||||
/>
|
||||
));
|
||||
},
|
||||
[message, embedURL, videoProxyURL, contentHash, attachmentId, defaultName, onDelete],
|
||||
[message, embedURL, videoProxyURL, contentHash, attachmentId, defaultName, onDelete, isPreview],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
@ -449,7 +451,9 @@ export const EmbedGifv: FC<
|
||||
showFavoriteButton,
|
||||
showDownloadButton: _showDownloadButton,
|
||||
showDeleteButton,
|
||||
} = getMediaButtonVisibility(canFavorite, message, attachmentId);
|
||||
} = getMediaButtonVisibility(canFavorite, isPreview ? undefined : message, attachmentId, {
|
||||
disableDelete: !!isPreview,
|
||||
});
|
||||
const showDownloadButton = false;
|
||||
const showGifIndicator =
|
||||
AccessibilityStore.showGifIndicator && shouldShowOverlays(dimensions.width, dimensions.height);
|
||||
@ -515,7 +519,7 @@ export const EmbedGifv: FC<
|
||||
},
|
||||
);
|
||||
|
||||
export const EmbedGif: FC<GifvEmbedProps & {proxyURL: string; includeButton?: boolean}> = observer(
|
||||
export const EmbedGif: FC<GifvEmbedProps & {proxyURL: string; includeButton?: boolean; isPreview?: boolean}> = observer(
|
||||
({
|
||||
embedURL,
|
||||
proxyURL,
|
||||
@ -530,6 +534,7 @@ export const EmbedGif: FC<GifvEmbedProps & {proxyURL: string; includeButton?: bo
|
||||
message,
|
||||
contentHash,
|
||||
onDelete,
|
||||
isPreview,
|
||||
}) => {
|
||||
const {t} = useLingui();
|
||||
const {dimensions} = mediaCalculator.calculate({width: naturalWidth, height: naturalHeight}, {forceScale: true});
|
||||
@ -601,7 +606,7 @@ export const EmbedGif: FC<GifvEmbedProps & {proxyURL: string; includeButton?: bo
|
||||
|
||||
const handleContextMenu = useCallback(
|
||||
(e: React.MouseEvent) => {
|
||||
if (!message) return;
|
||||
if (!message || isPreview) return;
|
||||
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
@ -620,7 +625,7 @@ export const EmbedGif: FC<GifvEmbedProps & {proxyURL: string; includeButton?: bo
|
||||
/>
|
||||
));
|
||||
},
|
||||
[message, embedURL, proxyURL, contentHash, attachmentId, defaultName, onDelete],
|
||||
[message, embedURL, proxyURL, contentHash, attachmentId, defaultName, onDelete, isPreview],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
@ -697,8 +702,9 @@ export const EmbedGif: FC<GifvEmbedProps & {proxyURL: string; includeButton?: bo
|
||||
);
|
||||
const {showFavoriteButton, showDownloadButton, showDeleteButton} = getMediaButtonVisibility(
|
||||
canFavorite,
|
||||
message,
|
||||
isPreview ? undefined : message,
|
||||
attachmentId,
|
||||
{disableDelete: !!isPreview},
|
||||
);
|
||||
const showGifIndicator =
|
||||
AccessibilityStore.showGifIndicator && shouldShowOverlays(renderedDimensions.width, renderedDimensions.height);
|
||||
|
||||
@ -77,6 +77,7 @@ type EmbedImageProps = React.ImgHTMLAttributes<HTMLImageElement> &
|
||||
handlePress?: (event: React.MouseEvent | React.KeyboardEvent) => void;
|
||||
alt?: string;
|
||||
mediaAttachments?: ReadonlyArray<MessageAttachment>;
|
||||
isPreview?: boolean;
|
||||
};
|
||||
|
||||
const ImagePreviewHandler: FC<ImagePreviewHandlerProps> = observer(
|
||||
@ -216,6 +217,7 @@ export const EmbedImage: FC<EmbedImageProps> = observer(
|
||||
contentHash,
|
||||
onDelete,
|
||||
mediaAttachments = [],
|
||||
isPreview,
|
||||
}) => {
|
||||
const {t} = useLingui();
|
||||
const {loaded, error, thumbHashURL} = useMediaLoading(src, placeholder);
|
||||
@ -271,7 +273,7 @@ export const EmbedImage: FC<EmbedImageProps> = observer(
|
||||
|
||||
const handleContextMenu = useCallback(
|
||||
(e: React.MouseEvent) => {
|
||||
if (!message) return;
|
||||
if (!message || isPreview) return;
|
||||
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
@ -292,7 +294,7 @@ export const EmbedImage: FC<EmbedImageProps> = observer(
|
||||
/>
|
||||
));
|
||||
},
|
||||
[message, src, originalSrc, contentHash, attachmentId, embedIndex, alt, defaultName, onDelete],
|
||||
[message, src, originalSrc, contentHash, attachmentId, embedIndex, alt, defaultName, onDelete, isPreview],
|
||||
);
|
||||
|
||||
if (shouldBlur) {
|
||||
@ -324,8 +326,9 @@ export const EmbedImage: FC<EmbedImageProps> = observer(
|
||||
|
||||
const {showFavoriteButton, showDownloadButton, showDeleteButton} = getMediaButtonVisibility(
|
||||
canFavorite,
|
||||
message,
|
||||
isPreview ? undefined : message,
|
||||
attachmentId,
|
||||
{disableDelete: !!isPreview},
|
||||
);
|
||||
|
||||
return (
|
||||
|
||||
@ -65,6 +65,7 @@ type EmbedVideoProps = BaseMediaProps & {
|
||||
embedUrl?: string;
|
||||
fillContainer?: boolean;
|
||||
mediaAttachments?: ReadonlyArray<MessageAttachment>;
|
||||
isPreview?: boolean;
|
||||
};
|
||||
|
||||
const MobileVideoOverlay: FC<{
|
||||
@ -125,6 +126,7 @@ const EmbedVideo: FC<EmbedVideoProps> = observer(
|
||||
onDelete,
|
||||
fillContainer = false,
|
||||
mediaAttachments = [],
|
||||
isPreview,
|
||||
}) => {
|
||||
const {enabled: isMobile} = MobileLayoutStore;
|
||||
const effectiveSrc = buildMediaProxyURL(src);
|
||||
@ -162,7 +164,7 @@ const EmbedVideo: FC<EmbedVideoProps> = observer(
|
||||
|
||||
const handleContextMenu = useCallback(
|
||||
(e: React.MouseEvent) => {
|
||||
if (!message) return;
|
||||
if (!message || isPreview) return;
|
||||
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
@ -180,7 +182,7 @@ const EmbedVideo: FC<EmbedVideoProps> = observer(
|
||||
/>
|
||||
));
|
||||
},
|
||||
[message, src, contentHash, attachmentId, defaultName, onDelete],
|
||||
[message, src, contentHash, attachmentId, defaultName, onDelete, isPreview],
|
||||
);
|
||||
|
||||
const thumbHashUrl = placeholder
|
||||
@ -268,8 +270,9 @@ const EmbedVideo: FC<EmbedVideoProps> = observer(
|
||||
|
||||
const {showFavoriteButton, showDownloadButton, showDeleteButton} = getMediaButtonVisibility(
|
||||
canFavorite,
|
||||
message,
|
||||
isPreview ? undefined : message,
|
||||
attachmentId,
|
||||
{disableDelete: !!isPreview},
|
||||
);
|
||||
|
||||
if (isMobile) {
|
||||
|
||||
@ -21,6 +21,10 @@ import {canDeleteAttachmentUtil} from '~/components/channel/messageActionUtils';
|
||||
import type {MessageRecord} from '~/records/MessageRecord';
|
||||
import AccessibilityStore from '~/stores/AccessibilityStore';
|
||||
|
||||
export interface MediaButtonVisibilityOptions {
|
||||
disableDelete?: boolean;
|
||||
}
|
||||
|
||||
export interface MediaButtonVisibility {
|
||||
showFavoriteButton: boolean;
|
||||
showDownloadButton: boolean;
|
||||
@ -31,14 +35,17 @@ export function getMediaButtonVisibility(
|
||||
canFavorite: boolean,
|
||||
message?: MessageRecord,
|
||||
attachmentId?: string,
|
||||
options?: MediaButtonVisibilityOptions,
|
||||
): MediaButtonVisibility {
|
||||
const showMediaFavoriteButton = AccessibilityStore.showMediaFavoriteButton;
|
||||
const showMediaDownloadButton = AccessibilityStore.showMediaDownloadButton;
|
||||
const showMediaDeleteButton = AccessibilityStore.showMediaDeleteButton;
|
||||
const disableDelete = options?.disableDelete ?? false;
|
||||
|
||||
return {
|
||||
showFavoriteButton: showMediaFavoriteButton && canFavorite,
|
||||
showDownloadButton: showMediaDownloadButton,
|
||||
showDeleteButton: showMediaDeleteButton && !!(message && attachmentId && canDeleteAttachmentUtil(message)),
|
||||
showDeleteButton:
|
||||
showMediaDeleteButton && !disableDelete && !!(message && attachmentId && canDeleteAttachmentUtil(message)),
|
||||
};
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user