diff --git a/src/components/attachment-thumbs.tsx b/src/components/attachment-thumbs.tsx
index 4a8d2d36d6..b5e48fe658 100644
--- a/src/components/attachment-thumbs.tsx
+++ b/src/components/attachment-thumbs.tsx
@@ -13,7 +13,7 @@ interface IAttachmentThumbs {
}
const AttachmentThumbs = (props: IAttachmentThumbs) => {
- const { media, onClick, sensitive } = props;
+ const { media, onClick } = props;
const dispatch = useAppDispatch();
const fallback =
;
@@ -27,8 +27,6 @@ const AttachmentThumbs = (props: IAttachmentThumbs) => {
onOpenMedia={onOpenMedia}
height={50}
compact
- sensitive={sensitive}
- visible
/>
diff --git a/src/components/media-gallery.tsx b/src/components/media-gallery.tsx
index d98a79eb78..634d6ba8cc 100644
--- a/src/components/media-gallery.tsx
+++ b/src/components/media-gallery.tsx
@@ -55,7 +55,6 @@ interface IItem {
size: number;
onClick: (index: number) => void;
displayWidth?: number;
- visible: boolean;
dimensions: Dimensions;
last?: boolean;
total: number;
@@ -66,7 +65,6 @@ const Item: React.FC = ({
index,
onClick,
standalone = false,
- visible,
dimensions,
last,
total,
@@ -266,19 +264,17 @@ const Item: React.FC = ({
hash={attachment.blurhash}
className='media-gallery__preview'
/>
- {visible && thumbnail}
+ {thumbnail}
);
};
interface IMediaGallery {
- sensitive?: boolean;
media: Array;
height?: number;
onOpenMedia: (media: Array, index: number) => void;
defaultWidth?: number;
cacheWidth?: (width: number) => void;
- visible?: boolean;
displayMedia?: string;
compact?: boolean;
className?: string;
@@ -538,7 +534,6 @@ const MediaGallery: React.FC = (props) => {
index={i}
size={sizeData.size}
displayWidth={sizeData.width}
- visible={!!props.visible}
dimensions={sizeData.itemsDimensions[i]}
last={i === ATTACHMENT_LIMIT - 1}
total={media.length}
diff --git a/src/components/quoted-status.tsx b/src/components/quoted-status.tsx
index cdb491c525..1d4bfb4320 100644
--- a/src/components/quoted-status.tsx
+++ b/src/components/quoted-status.tsx
@@ -1,5 +1,5 @@
import clsx from 'clsx';
-import React, { MouseEventHandler, useEffect, useRef, useState } from 'react';
+import React, { MouseEventHandler } from 'react';
import { defineMessages, useIntl } from 'react-intl';
import { useHistory } from 'react-router-dom';
@@ -34,16 +34,6 @@ const QuotedStatus: React.FC = ({ status, onCancel, compose }) =>
const intl = useIntl();
const history = useHistory();
- const overlay = useRef(null);
-
- const [minHeight, setMinHeight] = useState(208);
-
- useEffect(() => {
- if (overlay.current) {
- setMinHeight(overlay.current.getBoundingClientRect().height);
- }
- }, [overlay.current]);
-
const handleExpandClick: MouseEventHandler = (e) => {
if (!status) return;
const account = status.account;
@@ -105,15 +95,7 @@ const QuotedStatus: React.FC = ({ status, onCancel, compose }) =>
{status.event ? : (
-
-
-
+
= ({ status, onCancel, compose }) =>
{status.quote_id && }
- {status.media_attachments.length > 0 && (
-
- )}
+
+
+ {status.media_attachments.length > 0 && (
+
+ )}
+
)}
diff --git a/src/components/status-content.tsx b/src/components/status-content.tsx
index 5c50120f48..15c2429421 100644
--- a/src/components/status-content.tsx
+++ b/src/components/status-content.tsx
@@ -5,6 +5,7 @@ import { FormattedMessage } from 'react-intl';
import { Link } from 'react-router-dom';
import Icon from 'soapbox/components/icon';
+import { Text } from 'soapbox/components/ui';
import { onlyEmoji as isOnlyEmoji } from 'soapbox/utils/rich-content';
import { getTextDirection } from '../utils/rtl';
@@ -15,7 +16,6 @@ import Markup from './markup';
import Poll from './polls/poll';
import type { Sizes } from 'soapbox/components/ui/text/text';
-// import type { Status } from 'soapbox/normalizers';
import type { MinifiedStatus } from 'soapbox/reducers/statuses';
const MAX_HEIGHT = 642; // 20px * 32 (+ 2px padding at the top)
@@ -156,8 +156,22 @@ const StatusContent: React.FC = React.memo(({
'leading-normal big-emoji': onlyEmoji,
});
+ const spoilerText = status.spoilerMapHtml && status.currentLanguage
+ ? status.spoilerMapHtml[status.currentLanguage] || status.spoilerHtml
+ : status.spoilerHtml;
+
+ const output = [];
+
+ if (spoilerText) {
+ output.push(
+
+
+ ,
+ );
+ }
+
if (onClick) {
- const output = [
+ output.push(
= React.memo(({
>
{content}
,
- ];
+ );
if (collapsed) {
output.push();
@@ -184,7 +198,7 @@ const StatusContent: React.FC = React.memo(({
return {output}
;
} else {
- const output = [
+ output.push(
= React.memo(({
>
{content}
,
- ];
+ );
if (status.poll_id) {
output.push();
diff --git a/src/components/status-media.tsx b/src/components/status-media.tsx
index 6ee0ad7608..c52710c0aa 100644
--- a/src/components/status-media.tsx
+++ b/src/components/status-media.tsx
@@ -59,7 +59,6 @@ const StatusMedia: React.FC = ({
);
} else if (size === 1 && firstAttachment.type === 'video') {
@@ -101,10 +100,8 @@ const StatusMedia: React.FC = ({
);
diff --git a/src/components/status.tsx b/src/components/status.tsx
index c771530d14..b72a5d827b 100644
--- a/src/components/status.tsx
+++ b/src/components/status.tsx
@@ -1,5 +1,5 @@
import clsx from 'clsx';
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useRef } from 'react';
import { defineMessages, useIntl, FormattedList, FormattedMessage } from 'react-intl';
import { Link, useHistory } from 'react-router-dom';
@@ -79,9 +79,6 @@ const Status: React.FC = (props) => {
const { boostModal } = useSettings();
const didShowCard = useRef(false);
const node = useRef(null);
- const overlay = useRef(null);
-
- const [minHeight, setMinHeight] = useState(208);
const getStatus = useCallback(makeGetStatus(), []);
const actualStatus = useAppSelector(state => status.reblog_id && getStatus(state, { id: status.reblog_id }) || status)!;
@@ -97,12 +94,6 @@ const Status: React.FC = (props) => {
didShowCard.current = Boolean(!muted && !hidden && status?.card);
}, []);
- useEffect(() => {
- if (overlay.current) {
- setMinHeight(overlay.current.getBoundingClientRect().height);
- }
- }, [overlay.current]);
-
const handleClick = (e?: React.MouseEvent): void => {
e?.stopPropagation();
@@ -426,15 +417,7 @@ const Status: React.FC = (props) => {
-
-
-
+
{actualStatus.event ? : (
= (props) => {
{(quote || actualStatus.card || actualStatus.media_attachments.length > 0) && (
-
+
+
;
+ status: Pick;
}
const SensitiveContentOverlay = React.forwardRef((props, ref) => {
@@ -47,10 +47,6 @@ const SensitiveContentOverlay = React.forwardRef
{intl.formatMessage(messages.sensitiveSubtitle)}
-
- {status.spoiler_text && (
-
-
- “”
-
-
- )}
diff --git a/src/features/account-gallery/index.tsx b/src/features/account-gallery/index.tsx
index 30c106a92d..d088c62184 100644
--- a/src/features/account-gallery/index.tsx
+++ b/src/features/account-gallery/index.tsx
@@ -40,8 +40,8 @@ const AccountGallery = () => {
} = useAccountLookup(username, { withRelationship: true });
const attachments: ImmutableList = useAppSelector((state) => account ? getAccountGallery(state, account.id) : ImmutableList());
- const isLoading = useAppSelector((state) => state.timelines.get(`account:${account?.id}:media`)?.isLoading);
- const hasMore = useAppSelector((state) => state.timelines.get(`account:${account?.id}:media`)?.hasMore);
+ const isLoading = useAppSelector((state) => state.timelines.get(`account:${account?.id}:with_replies:media`)?.isLoading);
+ const hasMore = useAppSelector((state) => state.timelines.get(`account:${account?.id}:with_replies:media`)?.hasMore);
const node = useRef(null);
diff --git a/src/features/report/components/status-check-box.tsx b/src/features/report/components/status-check-box.tsx
index 2669fd5966..98906d8e94 100644
--- a/src/features/report/components/status-check-box.tsx
+++ b/src/features/report/components/status-check-box.tsx
@@ -61,7 +61,6 @@ const StatusCheckBox: React.FC = ({ id, disabled }) => {
media = (
= ({
const intl = useIntl();
const node = useRef(null);
- const overlay = useRef(null);
-
- const [minHeight, setMinHeight] = useState(208);
-
- useEffect(() => {
- if (overlay.current) {
- setMinHeight(overlay.current.getBoundingClientRect().height);
- }
- }, [overlay.current]);
const handleOpenCompareHistoryModal = () => {
onOpenCompareHistoryModal(status);
@@ -124,15 +115,7 @@ const DetailedStatus: React.FC = ({
-
-
-
+
= ({
{(withMedia && (quote || actualStatus.card || actualStatus.media_attachments.length > 0)) && (
-
+
+
+
{quote}
diff --git a/src/normalizers/status.ts b/src/normalizers/status.ts
index e6000ec3ba..eda1d4fa62 100644
--- a/src/normalizers/status.ts
+++ b/src/normalizers/status.ts
@@ -114,9 +114,6 @@ const normalizeStatus = (status: BaseStatus & {
mentions = [selfMention, ...mentions];
}
- // If the status contains spoiler text, treat it as sensitive.
- const sensitive = !!status.spoiler_text || status.sensitive;
-
// Normalize event
let event: BaseStatus['event'] & ({
banner: MediaAttachment | null;
@@ -162,8 +159,7 @@ const normalizeStatus = (status: BaseStatus & {
account: normalizeAccount(status.account),
accounts: status.accounts?.map(normalizeAccount),
mentions,
- sensitive,
- hidden: sensitive,
+ hidden: status.sensitive,
/** Rewrite `` to empty string. */
content: status.content === '' ? '' : status.content,
filtered: status.filtered?.map(result => result.filter.title),
diff --git a/src/selectors/index.ts b/src/selectors/index.ts
index 36943b92db..6b6956adc8 100644
--- a/src/selectors/index.ts
+++ b/src/selectors/index.ts
@@ -206,7 +206,7 @@ type AccountGalleryAttachment = MediaAttachment & {
}
const getAccountGallery = createSelector([
- (state: RootState, id: string) => state.timelines.get(`account:${id}:media`)?.items || ImmutableOrderedSet(),
+ (state: RootState, id: string) => state.timelines.get(`account:${id}:with_replies:media`)?.items || ImmutableOrderedSet(),
(state: RootState) => state.statuses,
], (statusIds, statuses) =>
statusIds.reduce((medias: ImmutableList, statusId: string) => {