- {object.name &&
{object.name}
}
-
- {renderFeedAttachment(object, openLightbox, brokenImages, handleImageError)}
+ {renderNoteContentWithWarning({
+ contentClassName: 'ap-note-content-large break-anywhere text-[1.6rem] tracking-[-0.011em] text-pretty text-gray-900 dark:text-gray-300 [&_p+p]:mt-3',
+ showName: true
+ })}
{showStats && = ({
- {(object.type === 'Article') && renderFeedAttachment(object, onClick, brokenImages, handleImageError)}
- {object.name &&
{object.name}
}
- {(object.preview && object.type === 'Article') ?
{object.preview.content}
:
}
- {(object.type === 'Note') && renderFeedAttachment(object, openLightbox, brokenImages, handleImageError)}
- {(object.type === 'Article') &&
}
+ {shouldHideContentWarning ? renderContentWarningOverlay() : <>
+ {(object.type === 'Article') && renderFeedMedia(onClick)}
+ {object.name &&
{object.name}
}
+ {(object.preview && object.type === 'Article') ?
{object.preview.content}
:
}
+ {(object.type === 'Note') && renderFeedMedia(openLightbox)}
+ {(object.type === 'Article') &&
}
+ }
{!isCompact &&
{showStats && = ({
-
- {isLoading ? : (object.name ? object.name : (
-
- ))}
-
-
- {!isLoading ?
-
- :
-
- }
-
-
- {!isLoading ? (object.content && `${getReadingTime(object.content)}`) : }
-
+ {shouldHideContentWarning ? renderContentWarningOverlay() : <>
+
+ {isLoading ? : (object.name ? object.name : (
+
+ ))}
+
+
+ {!isLoading ?
+
+ :
+
+ }
+
+
+ {!isLoading ? (object.content && `${getReadingTime(object.content)}`) : }
+
+ }
{showStats && = ({
- {renderInboxAttachment(object, isLoading)}
+ {shouldHideContentWarning ? null : shouldHideSensitiveMedia ? (
+
+ ) : renderInboxAttachment(object, isLoading)}
)}
diff --git a/apps/activitypub/src/hooks/use-activity-pub-queries.ts b/apps/activitypub/src/hooks/use-activity-pub-queries.ts
index 6550d048dd0..cd7bf63102f 100644
--- a/apps/activitypub/src/hooks/use-activity-pub-queries.ts
+++ b/apps/activitypub/src/hooks/use-activity-pub-queries.ts
@@ -9,6 +9,7 @@ import {
type GetAccountFollowsResponse,
type Notification,
type Post,
+ type Preferences,
type ReplyChainResponse,
type SearchResults,
type SocialWebDomain,
@@ -95,6 +96,7 @@ const QUERY_KEYS = {
postsLikedByAccount: ['account_liked_posts'],
notifications: (handle: string) => ['notifications', handle],
notificationsCount: (handle: string) => ['notifications_count', handle],
+ preferences: ['preferences'],
blockedAccounts: (handle: string) => ['blocked_accounts', handle],
blockedDomains: (handle: string) => ['blocked_domains', handle],
topics: () => ['topics']
@@ -1784,6 +1786,61 @@ export function useFeedForUser(options: {enabled: boolean}) {
return {feedQuery, updateFeedActivity};
}
+export function usePreferencesForUser() {
+ return useQuery
({
+ queryKey: QUERY_KEYS.preferences,
+ // Preferences are owner/admin only, so a failure here is usually a 403
+ // that won't resolve by asking again. Callers fall back to hiding
+ // sensitive media.
+ retry: false,
+ async queryFn() {
+ const siteUrl = await getSiteUrl();
+ const api = createActivityPubAPI('index', siteUrl);
+
+ return api.getPreferences();
+ }
+ });
+}
+
+export function useUpdatePreferencesForUser({onError}: {onError?: () => void} = {}) {
+ const queryClient = useQueryClient();
+
+ return useMutation({
+ scope: {id: 'preferences'},
+ async mutationFn(preferences: Preferences) {
+ const siteUrl = await getSiteUrl();
+ const api = createActivityPubAPI('index', siteUrl);
+
+ return api.updatePreferences(preferences);
+ },
+ async onMutate(preferences) {
+ await queryClient.cancelQueries({
+ queryKey: QUERY_KEYS.preferences
+ });
+
+ const previousPreferences = queryClient.getQueryData(QUERY_KEYS.preferences);
+
+ queryClient.setQueryData(QUERY_KEYS.preferences, preferences);
+
+ return {previousPreferences};
+ },
+ onError(_error, _preferences, context) {
+ if (context?.previousPreferences === undefined) {
+ // There was nothing to roll back to, so drop the optimistic
+ // value rather than leaving showSensitiveMedia: true cached.
+ queryClient.removeQueries({queryKey: QUERY_KEYS.preferences});
+ } else {
+ queryClient.setQueryData(QUERY_KEYS.preferences, context.previousPreferences);
+ }
+
+ onError?.();
+ },
+ onSuccess(preferences) {
+ queryClient.setQueryData(QUERY_KEYS.preferences, preferences);
+ }
+ });
+}
+
export function useInboxForUser(options: {enabled: boolean}) {
const queryKey = QUERY_KEYS.inbox;
const queryClient = useQueryClient();
diff --git a/apps/activitypub/src/hooks/use-sensitive-media-disclosure.ts b/apps/activitypub/src/hooks/use-sensitive-media-disclosure.ts
new file mode 100644
index 00000000000..c992016221e
--- /dev/null
+++ b/apps/activitypub/src/hooks/use-sensitive-media-disclosure.ts
@@ -0,0 +1,121 @@
+import React, {useEffect, useLayoutEffect, useRef, useState} from 'react';
+import {usePreferencesForUser} from '@hooks/use-activity-pub-queries';
+
+interface SensitiveMediaDisclosureOptions {
+ contentWarning?: string | null;
+ sensitive?: boolean;
+ /**
+ * Whether the post actually carries media worth concealing. Each surface
+ * detects this differently — the feed looks at attachments, the reader also
+ * considers the feature image and media embedded in the article body.
+ */
+ hasMedia: boolean;
+ /**
+ * Resets the disclosure state when it changes, so a revealed post never
+ * leaks its reveal into the next post rendered by the same component.
+ */
+ resetKey?: string;
+}
+
+interface SensitiveMediaDisclosure {
+ contentWarning: string | null;
+ shouldHideContentWarning: boolean;
+ shouldHideSensitiveMedia: boolean;
+ canHideSensitiveMedia: boolean;
+ isContentWarningRevealed: boolean;
+ showContentWarningOverlay: boolean;
+ contentWarningMinHeight: number | undefined;
+ contentWarningWrapperRef: React.RefObject;
+ revealSensitiveMedia: (event: React.MouseEvent) => void;
+ hideSensitiveMedia: (event: React.MouseEvent) => void;
+ revealContentWarning: (event: React.MouseEvent) => void;
+}
+
+/**
+ * Owns the reveal/hide state for sensitive media and content warnings.
+ *
+ * Both disclosures fail closed: until the preferences query resolves, and
+ * whenever it fails, sensitive media stays hidden.
+ *
+ * A content warning covers the whole post, so it also covers any media inside
+ * it. Revealing the warning therefore reveals the media too, rather than
+ * stacking a second warning on top of the first.
+ */
+export function useSensitiveMediaDisclosure({
+ contentWarning: rawContentWarning,
+ sensitive,
+ hasMedia,
+ resetKey
+}: SensitiveMediaDisclosureOptions): SensitiveMediaDisclosure {
+ const {data: preferences} = usePreferencesForUser();
+ const showSensitiveMediaByDefault = preferences?.showSensitiveMedia ?? false;
+
+ const [isSensitiveMediaRevealed, setIsSensitiveMediaRevealed] = useState(false);
+ const [isSensitiveMediaManuallyHidden, setIsSensitiveMediaManuallyHidden] = useState(false);
+ const [isContentWarningRevealed, setIsContentWarningRevealed] = useState(false);
+ const [showContentWarningOverlay, setShowContentWarningOverlay] = useState(true);
+ const [contentWarningMinHeight, setContentWarningMinHeight] = useState(undefined);
+ const contentWarningWrapperRef = useRef(null);
+
+ useEffect(() => {
+ setIsSensitiveMediaRevealed(false);
+ setIsSensitiveMediaManuallyHidden(false);
+ setIsContentWarningRevealed(false);
+ setShowContentWarningOverlay(true);
+ setContentWarningMinHeight(undefined);
+ }, [resetKey]);
+
+ useLayoutEffect(() => {
+ if (!isContentWarningRevealed || !showContentWarningOverlay) {
+ return;
+ }
+
+ // Content is mounted under the overlay; remove the overlay before paint
+ // so the browser never paints an empty intermediate frame.
+ setShowContentWarningOverlay(false);
+ setContentWarningMinHeight(undefined);
+ }, [isContentWarningRevealed, showContentWarningOverlay]);
+
+ const contentWarning = rawContentWarning?.trim() || null;
+ const hasContentWarning = contentWarning !== null;
+ const hasSensitiveMedia = sensitive === true && hasMedia;
+ const isSensitiveMediaGated = hasSensitiveMedia && !hasContentWarning && !showSensitiveMediaByDefault;
+ const shouldHideSensitiveMedia = isSensitiveMediaGated && (isSensitiveMediaManuallyHidden || !isSensitiveMediaRevealed);
+
+ const revealSensitiveMedia = (event: React.MouseEvent) => {
+ event.stopPropagation();
+ setIsSensitiveMediaManuallyHidden(false);
+ setIsSensitiveMediaRevealed(true);
+ };
+
+ const hideSensitiveMedia = (event: React.MouseEvent) => {
+ event.stopPropagation();
+ setIsSensitiveMediaManuallyHidden(true);
+ setIsSensitiveMediaRevealed(false);
+ };
+
+ const revealContentWarning = (event: React.MouseEvent) => {
+ event.stopPropagation();
+ // Pin the collapsed height so the post doesn't jump while the revealed
+ // content mounts underneath the overlay.
+ const height = contentWarningWrapperRef.current?.offsetHeight;
+ if (height) {
+ setContentWarningMinHeight(height);
+ }
+ setIsContentWarningRevealed(true);
+ };
+
+ return {
+ contentWarning,
+ shouldHideContentWarning: hasContentWarning && !isContentWarningRevealed,
+ shouldHideSensitiveMedia,
+ canHideSensitiveMedia: isSensitiveMediaGated && !shouldHideSensitiveMedia,
+ isContentWarningRevealed,
+ showContentWarningOverlay,
+ contentWarningMinHeight,
+ contentWarningWrapperRef,
+ revealSensitiveMedia,
+ hideSensitiveMedia,
+ revealContentWarning
+ };
+}
diff --git a/apps/activitypub/src/utils/posts.ts b/apps/activitypub/src/utils/posts.ts
index 721aef0d030..8e039c4d85a 100644
--- a/apps/activitypub/src/utils/posts.ts
+++ b/apps/activitypub/src/utils/posts.ts
@@ -94,6 +94,8 @@ export function mapPostToActivity(post: Post): Activity {
name: post.title,
content: post.content,
summary: post.summary,
+ sensitive: post.sensitive,
+ contentWarning: post.contentWarning,
url: post.url,
attributedTo: actor,
image: post.featureImageUrl ?? '',
diff --git a/apps/activitypub/src/views/inbox/components/customizer.tsx b/apps/activitypub/src/views/inbox/components/customizer.tsx
index bb2e70daf27..c860c29d39c 100644
--- a/apps/activitypub/src/views/inbox/components/customizer.tsx
+++ b/apps/activitypub/src/views/inbox/components/customizer.tsx
@@ -161,7 +161,7 @@ const CustomizerView: React.FC = ({
}) => (
-
@@ -208,6 +208,7 @@ const CustomizerView: React.FC = ({