diff --git a/src/components/comment-media/comment-media.tsx b/src/components/comment-media/comment-media.tsx
index 5cf09cbd..989da6b4 100644
--- a/src/components/comment-media/comment-media.tsx
+++ b/src/components/comment-media/comment-media.tsx
@@ -11,6 +11,7 @@ import Embed, { canEmbed } from '../embed';
interface MediaProps {
commentMediaInfo?: CommentMediaInfo;
deleted?: boolean;
+ disableToggle?: boolean;
displayHeight?: string;
displayWidth?: string;
isFloatingEmbed?: boolean;
@@ -83,7 +84,7 @@ const Thumbnail = ({ commentMediaInfo, deleted, displayHeight, displayWidth, isF
);
};
-const Media = ({ commentMediaInfo, isReply, setShowThumbnail }: MediaProps) => {
+const Media = ({ commentMediaInfo, disableToggle, isReply, setShowThumbnail }: MediaProps) => {
const { t } = useTranslation();
const { thumbnail, type, url } = commentMediaInfo || {};
const isMobile = useIsMobile();
@@ -98,11 +99,11 @@ const Media = ({ commentMediaInfo, isReply, setShowThumbnail }: MediaProps) => {
{type === 'iframe' && url ? (
) : type === 'gif' ? (
-
setShowThumbnail(true)} />
+
setShowThumbnail(true)} />
) : type === 'video' ? (
) : type === 'webpage' ? (
-
setShowThumbnail(true)} />
+
setShowThumbnail(true)} />
) : null}
{isMobile && type && (
@@ -126,19 +127,21 @@ const Media = ({ commentMediaInfo, isReply, setShowThumbnail }: MediaProps) => {
interface ImageProps {
commentMediaInfo: CommentMediaInfo;
+ disableToggle?: boolean;
displayHeight: string;
displayWidth: string;
+ initialExpanded?: boolean;
isOutOfFeed: boolean;
parentCid?: string;
spoiler?: boolean;
}
-const Image = ({ commentMediaInfo, displayHeight, displayWidth, isOutOfFeed, parentCid, spoiler }: ImageProps) => {
+const Image = ({ commentMediaInfo, disableToggle = false, displayHeight, displayWidth, initialExpanded = false, isOutOfFeed, parentCid, spoiler }: ImageProps) => {
const { t } = useTranslation();
const { type, url } = commentMediaInfo || {};
const isReply = parentCid;
const isMobile = useIsMobile();
- const [isImageExpanded, setIsImageExpanded] = useState(false);
+ const [isImageExpanded, setIsImageExpanded] = useState(initialExpanded);
const { fitExpandedImagesToScreen } = useExpandedMediaStore();
const mediaDimensions = getMediaDimensions(commentMediaInfo);
const mediaClass = `${isMobile ? styles.mediaMobile : isReply ? styles.mediaDesktopReply : styles.mediaDesktopOp} ${
@@ -171,7 +174,7 @@ const Image = ({ commentMediaInfo, displayHeight, displayWidth, isOutOfFeed, par
{hasError ? (

) : (
-

setIsImageExpanded(!isImageExpanded)} />
+

setIsImageExpanded(!isImageExpanded)} />
)}
{isImageExpanded && type && (
@@ -193,7 +196,7 @@ const Image = ({ commentMediaInfo, displayHeight, displayWidth, isOutOfFeed, par
{hasError ? (

) : (
-

setIsImageExpanded(!isImageExpanded)} />
+

setIsImageExpanded(!isImageExpanded)} />
)}
);
@@ -202,6 +205,7 @@ const Image = ({ commentMediaInfo, displayHeight, displayWidth, isOutOfFeed, par
const CommentMedia = ({
commentMediaInfo,
deleted,
+ disableToggle,
isFloatingEmbed,
linkHeight,
linkWidth,
@@ -253,10 +257,13 @@ const CommentMedia = ({
{commentMediaInfo?.type === 'image' ? (
// images just enlarge when clicked, so they don't need two separate components
+ // when showThumbnail is explicitly false (e.g., from embed button), start expanded
{`${spoiler ? `${t('spoiler')} - ` : ''} ${getDisplayMediaInfoType(type, t)}`} }
- {!showThumbnail &&