fix(embed): hide remove buttons when unapplicable (#66)

fluxer_app/src/components/channel/MessageAttachments.tsx

@@ -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}
 										/>
@@ -205,6 +208,7 @@ const ForwardedMessageContent = observer(({message, snapshot}: {message: Message
 									embedIndex={index}
 									contextualEmbeds={snapshot.embeds}
 									onDelete={() => {}}
+									isPreview={snapshotIsPreview}
 								/>
 							);
 						})}
@@ -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}
+						/>
 					);
 				})}
 

fluxer_app/src/components/channel/embeds/Embed.tsx

@@ -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>,
 	);

fluxer_app/src/components/channel/embeds/attachments/Attachment.tsx

@@ -67,7 +67,8 @@ 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 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, {
@@ -89,13 +90,15 @@ const AnimatedAttachment: FC<AttachmentMediaProps & {message?: MessageRecord}> =
 					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,7 +143,8 @@ const VideoAttachment: FC<AttachmentMediaProps & {message?: MessageRecord}> = ob
 	},
 );
 
-const AudioAttachment: FC<AttachmentMediaProps & {message?: MessageRecord}> = observer(({attachment, message}) => (
+const AudioAttachment: FC<AttachmentMediaProps & {message?: MessageRecord; isPreview?: boolean}> = observer(
+	({attachment, message, isPreview}) => (
 		<FocusRing within ringClassName={messageStyles.mediaFocusRing}>
 			<div className={styles.attachmentWrapper}>
 				<EmbedAudio
@@ -152,16 +157,18 @@ const AudioAttachment: FC<AttachmentMediaProps & {message?: MessageRecord}> = ob
 					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>,
 			),
 		);

fluxer_app/src/components/channel/embeds/attachments/AttachmentFile.tsx

@@ -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}

fluxer_app/src/components/channel/embeds/attachments/AttachmentMosaic.tsx

@@ -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,10 +125,13 @@ interface MosaicItemProps {
 	style?: CSSProperties;
 	message?: MessageRecord;
 	mediaAttachments?: ReadonlyArray<MessageAttachment>;
+	isPreview?: boolean;
 }
 
-const MosaicItemBase: FC<MosaicItemProps> = observer(({attachment, style, message, mediaAttachments = []}) => {
+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);
@@ -273,11 +279,13 @@ const MosaicItemBase: FC<MosaicItemProps> = observer(({attachment, style, messag
 			[attachment.url, isAudio, isVideo],
 		);
 
-	const handleDeleteClick = useDeleteAttachment(message, attachment.id);
+		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) return;
+				if (!message || isPreview) return;
 
 				e.preventDefault();
 				e.stopPropagation();
@@ -296,11 +304,11 @@ const MosaicItemBase: FC<MosaicItemProps> = observer(({attachment, style, messag
 						defaultName={defaultName}
 						defaultAltText={attachment.filename}
 						onClose={onClose}
-					onDelete={() => {}}
+						onDelete={isPreview ? () => {} : (messageViewContext?.handleDelete ?? (() => {}))}
 					/>
 				));
 			},
-		[message, attachment, isAudio, isVideo],
+			[message, attachment, isAudio, isVideo, isPreview, messageViewContext],
 		);
 
 		const mediaType = isAudio ? 'audio' : isVideo ? 'video' : isAnimatedGif ? 'animated GIF' : 'image';
@@ -312,8 +320,9 @@ const MosaicItemBase: FC<MosaicItemProps> = observer(({attachment, style, messag
 		const canFavorite = !!(message?.channelId && message?.id);
 		const {showFavoriteButton, showDownloadButton, showDeleteButton} = getMediaButtonVisibility(
 			canFavorite,
-		message,
-		attachment.id,
+			isPreview ? undefined : message,
+			isRealAttachment ? attachment.id : undefined,
+			{disableDelete: !!isPreview},
 		);
 
 		return wrapSpoiler(
@@ -393,9 +402,10 @@ const MosaicItemBase: FC<MosaicItemProps> = observer(({attachment, style, messag
 				</button>
 			</MediaContainer>,
 		);
-});
+	},
+);
 
-const SingleAttachment: FC<SingleAttachmentProps> = observer(({attachment, message, mediaAttachments}) => {
+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,11 +513,13 @@ 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 AttachmentMosaicComponent: FC<AttachmentMosaicProps> = observer(
+	({attachments, message, hideExpiryFootnote, isPreview}) => {
 		const {t} = useLingui();
 
 		const mediaAttachments = attachments.filter(isMediaAttachment);
@@ -546,6 +560,7 @@ const AttachmentMosaicComponent: FC<AttachmentMosaicProps> = observer(({attachme
 				attachment={attachment}
 				message={message}
 				mediaAttachments={mediaAttachments}
+				isPreview={isPreview}
 			/>
 		);
 
@@ -563,7 +578,12 @@ const AttachmentMosaicComponent: FC<AttachmentMosaicProps> = observer(({attachme
 				return (
 					<div className={styles.mosaicContainerWrapper}>
 						<div className={styles.mosaicContainer}>
-						<SingleAttachment attachment={mediaAttachments[0]} message={message} mediaAttachments={mediaAttachments} />
+							<SingleAttachment
+								attachment={mediaAttachments[0]}
+								message={message}
+								mediaAttachments={mediaAttachments}
+								isPreview={isPreview}
+							/>
 						</div>
 						{renderFootnote()}
 					</div>
@@ -679,6 +699,7 @@ const AttachmentMosaicComponent: FC<AttachmentMosaicProps> = observer(({attachme
 			default:
 				throw new Error('This should never happen');
 		}
-});
+	},
+);
 
 export const AttachmentMosaic: FC<AttachmentMosaicProps> = AttachmentMosaicComponent;

fluxer_app/src/components/channel/embeds/media/EmbedAudio.tsx

@@ -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>

fluxer_app/src/components/channel/embeds/media/EmbedGifv.tsx

@@ -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);

fluxer_app/src/components/channel/embeds/media/EmbedImage.tsx

@@ -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 (

fluxer_app/src/components/channel/embeds/media/EmbedVideo.tsx

@@ -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) {

fluxer_app/src/components/channel/embeds/media/MediaButtonUtils.tsx

@@ -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)),
 	};
 }