From dd4c1a94e6aa704f316891ce58760dee616f8ffb Mon Sep 17 00:00:00 2001
From: Ginger <75683114+gingershaped@users.noreply.github.com>
Date: Sat, 22 Feb 2025 03:55:13 -0500
Subject: [PATCH] Add support for spoilers on images (MSC4193) (#2212)
* Add support for MSC4193: Spoilers on Media
* Clarify variable names and wording
* Restore list atom
* Improve spoilered image UX with autoload off
* Use `aria-pressed` to indicate attachment spoiler state
* Improve spoiler button tooltip wording, keep reveal button from conflicting with load errors
---
.../components/message/MsgTypeRenderers.tsx | 6 +++
.../message/content/ImageContent.tsx | 46 ++++++++++++++++--
.../components/message/content/style.css.ts | 7 +++
.../upload-card/UploadCardRenderer.tsx | 48 +++++++++++++++++--
src/app/features/room/RoomInput.tsx | 27 +++++++++--
src/app/features/room/msgContent.ts | 13 +++--
src/app/state/list.ts | 11 ++++-
src/app/state/room/roomInputDrafts.ts | 13 +++--
src/types/matrix/common.ts | 6 +++
9 files changed, 158 insertions(+), 19 deletions(-)
diff --git a/src/app/components/message/MsgTypeRenderers.tsx b/src/app/components/message/MsgTypeRenderers.tsx
index 6138d0d7..287a5ca4 100644
--- a/src/app/components/message/MsgTypeRenderers.tsx
+++ b/src/app/components/message/MsgTypeRenderers.tsx
@@ -22,6 +22,8 @@ import {
IThumbnailContent,
IVideoContent,
IVideoInfo,
+ MATRIX_SPOILER_PROPERTY_NAME,
+ MATRIX_SPOILER_REASON_PROPERTY_NAME,
} from '../../../types/matrix/common';
import { FALLBACK_MIMETYPE, getBlobSafeMimeType } from '../../utils/mimeTypes';
import { parseGeoUri, scaleYDimension } from '../../utils/common';
@@ -177,6 +179,8 @@ type RenderImageContentProps = {
mimeType?: string;
url: string;
encInfo?: IEncryptedFile;
+ markedAsSpoiler?: boolean;
+ spoilerReason?: string;
};
type MImageProps = {
content: IImageContent;
@@ -204,6 +208,8 @@ export function MImage({ content, renderImageContent, outlined }: MImageProps) {
mimeType: imgInfo?.mimetype,
url: mxcUrl,
encInfo: content.file,
+ markedAsSpoiler: content[MATRIX_SPOILER_PROPERTY_NAME],
+ spoilerReason: content[MATRIX_SPOILER_REASON_PROPERTY_NAME],
})}
diff --git a/src/app/components/message/content/ImageContent.tsx b/src/app/components/message/content/ImageContent.tsx
index d4241b64..69c7ade8 100644
--- a/src/app/components/message/content/ImageContent.tsx
+++ b/src/app/components/message/content/ImageContent.tsx
@@ -3,6 +3,7 @@ import {
Badge,
Box,
Button,
+ Chip,
Icon,
Icons,
Modal,
@@ -51,6 +52,8 @@ export type ImageContentProps = {
info?: IImageInfo;
encInfo?: EncryptedAttachmentInfo;
autoPlay?: boolean;
+ markedAsSpoiler?: boolean;
+ spoilerReason?: string;
renderViewer: (props: RenderViewerProps) => ReactNode;
renderImage: (props: RenderImageProps) => ReactNode;
};
@@ -64,6 +67,8 @@ export const ImageContent = as<'div', ImageContentProps>(
info,
encInfo,
autoPlay,
+ markedAsSpoiler,
+ spoilerReason,
renderViewer,
renderImage,
...props
@@ -77,6 +82,7 @@ export const ImageContent = as<'div', ImageContentProps>(
const [load, setLoad] = useState(false);
const [error, setError] = useState(false);
const [viewer, setViewer] = useState(false);
+ const [blurred, setBlurred] = useState(markedAsSpoiler ?? false);
const [srcState, loadSrc] = useAsyncCallback(
useCallback(async () => {
@@ -145,7 +151,7 @@ export const ImageContent = as<'div', ImageContentProps>(
punch={1}
/>
)}
- {!autoPlay && srcState.status === AsyncStatus.Idle && (
+ {!autoPlay && !markedAsSpoiler && srcState.status === AsyncStatus.Idle && (
)}
{srcState.status === AsyncStatus.Success && (
-
+
{renderImage({
alt: body,
title: body,
@@ -172,8 +178,42 @@ export const ImageContent = as<'div', ImageContentProps>(
})}
)}
+ {blurred && !error && srcState.status !== AsyncStatus.Error && (
+
+
+ {spoilerReason}
+
+ )
+ }
+ position="Top"
+ align="Center"
+ >
+ {(triggerRef) => (
+ {
+ setBlurred(false);
+ if (srcState.status === AsyncStatus.Idle) {
+ loadSrc();
+ }
+ }}
+ >
+ Spoiler
+
+ )}
+
+
+ )}
{(srcState.status === AsyncStatus.Loading || srcState.status === AsyncStatus.Success) &&
- !load && (
+ !load &&
+ !markedAsSpoiler && (
diff --git a/src/app/components/message/content/style.css.ts b/src/app/components/message/content/style.css.ts
index a2f5b55d..f6cadd3c 100644
--- a/src/app/components/message/content/style.css.ts
+++ b/src/app/components/message/content/style.css.ts
@@ -30,3 +30,10 @@ export const AbsoluteFooter = style([
right: config.space.S100,
},
]);
+
+export const Blur = style([
+ DefaultReset,
+ {
+ filter: 'blur(44px)',
+ },
+]);
diff --git a/src/app/components/upload-card/UploadCardRenderer.tsx b/src/app/components/upload-card/UploadCardRenderer.tsx
index 5df68f2a..4cc8a00c 100644
--- a/src/app/components/upload-card/UploadCardRenderer.tsx
+++ b/src/app/components/upload-card/UploadCardRenderer.tsx
@@ -1,29 +1,42 @@
-import React, { useEffect } from 'react';
-import { Chip, Icon, IconButton, Icons, Text, color } from 'folds';
+import React, { useCallback, useEffect } from 'react';
+import { Chip, Icon, IconButton, Icons, Text, Tooltip, TooltipProvider, color } from 'folds';
import { UploadCard, UploadCardError, UploadCardProgress } from './UploadCard';
-import { TUploadAtom, UploadStatus, UploadSuccess, useBindUploadAtom } from '../../state/upload';
+import { UploadStatus, UploadSuccess, useBindUploadAtom } from '../../state/upload';
import { useMatrixClient } from '../../hooks/useMatrixClient';
import { TUploadContent } from '../../utils/matrix';
import { getFileTypeIcon } from '../../utils/common';
+import {
+ roomUploadAtomFamily,
+ TUploadItem,
+ TUploadMetadata,
+} from '../../state/room/roomInputDrafts';
type UploadCardRendererProps = {
isEncrypted?: boolean;
- uploadAtom: TUploadAtom;
+ fileItem: TUploadItem;
+ setMetadata: (metadata: TUploadMetadata) => void;
onRemove: (file: TUploadContent) => void;
onComplete?: (upload: UploadSuccess) => void;
};
export function UploadCardRenderer({
isEncrypted,
- uploadAtom,
+ fileItem,
+ setMetadata,
onRemove,
onComplete,
}: UploadCardRendererProps) {
const mx = useMatrixClient();
+ const uploadAtom = roomUploadAtomFamily(fileItem.file);
+ const { metadata } = fileItem;
const { upload, startUpload, cancelUpload } = useBindUploadAtom(mx, uploadAtom, isEncrypted);
const { file } = upload;
if (upload.status === UploadStatus.Idle) startUpload();
+ const toggleSpoiler = useCallback(() => {
+ setMetadata({ ...metadata, markedAsSpoiler: !metadata.markedAsSpoiler });
+ }, [setMetadata, metadata]);
+
const removeUpload = () => {
cancelUpload();
onRemove(file);
@@ -53,6 +66,31 @@ export function UploadCardRenderer({
Retry
)}
+ {file.type.startsWith('image') && (
+
+ Mark as Spoiler
+
+ }
+ position="Top"
+ align="Center"
+ >
+ {(triggerRef) => (
+
+
+
+ )}
+
+ )}
(
const encryptFiles = fulfilledPromiseSettledResult(
await Promise.allSettled(safeFiles.map((f) => encryptFile(f)))
);
- encryptFiles.forEach((ef) => fileItems.push(ef));
+ encryptFiles.forEach((ef) =>
+ fileItems.push({
+ ...ef,
+ metadata: {
+ markedAsSpoiler: false,
+ },
+ })
+ );
} else {
safeFiles.forEach((f) =>
- fileItems.push({ file: f, originalFile: f, encInfo: undefined })
+ fileItems.push({
+ file: f,
+ originalFile: f,
+ encInfo: undefined,
+ metadata: {
+ markedAsSpoiler: false,
+ },
+ })
);
}
setSelectedFiles({
@@ -420,7 +434,14 @@ export const RoomInput = forwardRef(
// eslint-disable-next-line react/no-array-index-key
key={index}
isEncrypted={!!fileItem.encInfo}
- uploadAtom={roomUploadAtomFamily(fileItem.file)}
+ fileItem={fileItem}
+ setMetadata={(metadata) =>
+ setSelectedFiles({
+ type: 'REPLACE',
+ item: fileItem,
+ replacement: { ...fileItem, metadata },
+ })
+ }
onRemove={handleRemoveUpload}
/>
))}
diff --git a/src/app/features/room/msgContent.ts b/src/app/features/room/msgContent.ts
index 60781ef0..bc660f2c 100644
--- a/src/app/features/room/msgContent.ts
+++ b/src/app/features/room/msgContent.ts
@@ -1,6 +1,10 @@
import { IContent, MatrixClient, MsgType } from 'matrix-js-sdk';
import to from 'await-to-js';
-import { IThumbnailContent, MATRIX_BLUR_HASH_PROPERTY_NAME } from '../../../types/matrix/common';
+import {
+ IThumbnailContent,
+ MATRIX_BLUR_HASH_PROPERTY_NAME,
+ MATRIX_SPOILER_PROPERTY_NAME,
+} from '../../../types/matrix/common';
import {
getImageFileUrl,
getThumbnail,
@@ -42,9 +46,9 @@ const generateThumbnailContent = async (
export const getImageMsgContent = async (
mx: MatrixClient,
item: TUploadItem,
- mxc: string,
+ mxc: string
): Promise => {
- const { file, originalFile, encInfo } = item;
+ const { file, originalFile, encInfo, metadata } = item;
const [imgError, imgEl] = await to(loadImageElement(getImageFileUrl(originalFile)));
if (imgError) console.warn(imgError);
@@ -52,6 +56,7 @@ export const getImageMsgContent = async (
msgtype: MsgType.Image,
filename: file.name,
body: file.name,
+ [MATRIX_SPOILER_PROPERTY_NAME]: metadata.markedAsSpoiler,
};
if (imgEl) {
const blurHash = encodeBlurHash(imgEl, 512, scaleYDimension(imgEl.width, 512, imgEl.height));
@@ -75,7 +80,7 @@ export const getImageMsgContent = async (
export const getVideoMsgContent = async (
mx: MatrixClient,
item: TUploadItem,
- mxc: string,
+ mxc: string
): Promise => {
const { file, originalFile, encInfo } = item;
diff --git a/src/app/state/list.ts b/src/app/state/list.ts
index 670e6db1..4377e532 100644
--- a/src/app/state/list.ts
+++ b/src/app/state/list.ts
@@ -5,6 +5,11 @@ export type ListAction =
type: 'PUT';
item: T | T[];
}
+ | {
+ type: 'REPLACE';
+ item: T;
+ replacement: T;
+ }
| {
type: 'DELETE';
item: T | T[];
@@ -26,8 +31,12 @@ export const createListAtom = () => {
}
if (action.type === 'PUT') {
set(baseListAtom, [...items, ...newItems]);
+ return;
+ }
+ if (action.type === 'REPLACE') {
+ set(baseListAtom, items.map((item) => item === action.item ? action.replacement : item));
}
}
);
};
-export type TListAtom = ReturnType>;
+export type TListAtom = ReturnType>;
\ No newline at end of file
diff --git a/src/app/state/room/roomInputDrafts.ts b/src/app/state/room/roomInputDrafts.ts
index 33bd0607..5d8ec8c7 100644
--- a/src/app/state/room/roomInputDrafts.ts
+++ b/src/app/state/room/roomInputDrafts.ts
@@ -3,22 +3,29 @@ import { atomFamily } from 'jotai/utils';
import { Descendant } from 'slate';
import { EncryptedAttachmentInfo } from 'browser-encrypt-attachment';
import { IEventRelation } from 'matrix-js-sdk';
-import { TListAtom, createListAtom } from '../list';
import { createUploadAtomFamily } from '../upload';
import { TUploadContent } from '../../utils/matrix';
+import { createListAtom } from '../list';
-export const roomUploadAtomFamily = createUploadAtomFamily();
+export type TUploadMetadata = {
+ markedAsSpoiler: boolean;
+};
export type TUploadItem = {
file: TUploadContent;
originalFile: TUploadContent;
+ metadata: TUploadMetadata;
encInfo: EncryptedAttachmentInfo | undefined;
};
-export const roomIdToUploadItemsAtomFamily = atomFamily>(
+export type TUploadListAtom = ReturnType>;
+
+export const roomIdToUploadItemsAtomFamily = atomFamily(
createListAtom
);
+export const roomUploadAtomFamily = createUploadAtomFamily();
+
export type RoomIdToMsgAction =
| {
type: 'PUT';
diff --git a/src/types/matrix/common.ts b/src/types/matrix/common.ts
index f2f12a6a..210c711f 100644
--- a/src/types/matrix/common.ts
+++ b/src/types/matrix/common.ts
@@ -2,6 +2,8 @@ import { EncryptedAttachmentInfo } from 'browser-encrypt-attachment';
import { MsgType } from 'matrix-js-sdk';
export const MATRIX_BLUR_HASH_PROPERTY_NAME = 'xyz.amorgan.blurhash';
+export const MATRIX_SPOILER_PROPERTY_NAME = 'page.codeberg.everypizza.msc4193.spoiler';
+export const MATRIX_SPOILER_REASON_PROPERTY_NAME = 'page.codeberg.everypizza.msc4193.spoiler.reason';
export type IImageInfo = {
w?: number;
@@ -47,6 +49,8 @@ export type IImageContent = {
url?: string;
info?: IImageInfo & IThumbnailContent;
file?: IEncryptedFile;
+ [MATRIX_SPOILER_PROPERTY_NAME]?: boolean;
+ [MATRIX_SPOILER_REASON_PROPERTY_NAME]?: string;
};
export type IVideoContent = {
@@ -56,6 +60,8 @@ export type IVideoContent = {
url?: string;
info?: IVideoInfo & IThumbnailContent;
file?: IEncryptedFile;
+ [MATRIX_SPOILER_PROPERTY_NAME]?: boolean;
+ [MATRIX_SPOILER_REASON_PROPERTY_NAME]?: string;
};
export type IAudioContent = {