Do not hide media from your own user by default

playwright/e2e/timeline/timeline.spec.ts

@@ -908,23 +908,37 @@ test.describe("Timeline", () => {
             });
         });
 
-        test("should be able to hide an image", { tag: "@screenshot" }, async ({ page, app, room, context }) => {
-            await app.viewRoomById(room.roomId);
-            await sendImage(app.client, room.roomId, NEW_AVATAR);
-            await app.timeline.scrollToBottom();
-            const imgTile = page.locator(".mx_MImageBody").first();
-            await expect(imgTile).toBeVisible();
-            await imgTile.hover();
-            await page.getByRole("button", { name: "Hide" }).click();
+        test(
+            "should be able to hide an image",
+            { tag: "@screenshot" },
+            async ({ page, app, homeserver, room, context }) => {
+                await app.viewRoomById(room.roomId);
 
-            // Check that the image is now hidden.
-            await expect(page.getByRole("button", { name: "Show image" })).toBeVisible();
-        });
+                const bot = new Bot(page, homeserver, {});
+                await bot.prepareClient();
+                await app.client.inviteUser(room.roomId, bot.credentials.userId);
 
-        test("should be able to hide a video", async ({ page, app, room, context }) => {
+                await sendImage(bot, room.roomId, NEW_AVATAR);
+                await app.timeline.scrollToBottom();
+                const imgTile = page.locator(".mx_MImageBody").first();
+                await expect(imgTile).toBeVisible();
+                await imgTile.hover();
+                await page.getByRole("button", { name: "Hide" }).click();
+
+                // Check that the image is now hidden.
+                await expect(page.getByRole("button", { name: "Show image" })).toBeVisible();
+            },
+        );
+
+        test("should be able to hide a video", async ({ page, app, homeserver, room, context }) => {
             await app.viewRoomById(room.roomId);
-            const upload = await app.client.uploadContent(VIDEO_FILE, { name: "bbb.webm", type: "video/webm" });
-            await app.client.sendEvent(room.roomId, null, "m.room.message" as EventType, {
+
+            const bot = new Bot(page, homeserver, {});
+            await bot.prepareClient();
+            await app.client.inviteUser(room.roomId, bot.credentials.userId);
+
+            const upload = await bot.uploadContent(VIDEO_FILE, { name: "bbb.webm", type: "video/webm" });
+            await bot.sendEvent(room.roomId, null, "m.room.message" as EventType, {
                 msgtype: "m.video" as MsgType,
                 body: "bbb.webm",
                 url: upload.content_uri,

src/components/views/messages/EventContentBody.tsx

@@ -151,7 +151,7 @@ const EventContentBody = memo(
     forwardRef<HTMLElement, Props>(
         ({ as, mxEvent, stripReply, content, linkify, highlights, includeDir = true, ...options }, ref) => {
             const enableBigEmoji = useSettingValue("TextualBody.enableBigEmoji");
-            const [mediaIsVisible] = useMediaVisible(mxEvent?.getId(), mxEvent?.getRoomId());
+            const [mediaIsVisible] = useMediaVisible(mxEvent);
 
             const replacer = useReplacer(content, mxEvent, options);
             const linkifyOptions = useMemo(

src/components/views/messages/HideActionButton.tsx

@@ -25,9 +25,9 @@ interface IProps {
  * Quick action button for marking a media event as hidden.
  */
 export const HideActionButton: React.FC<IProps> = ({ mxEvent }) => {
-    const [mediaIsVisible, setVisible] = useMediaVisible(mxEvent.getId(), mxEvent.getRoomId());
+    const [mediaIsVisible, setVisible] = useMediaVisible(mxEvent);
 
-    if (!mediaIsVisible) {
+    if (!mediaIsVisible || !setVisible) {
         return;
     }
 

src/components/views/messages/MImageBody.tsx

@@ -66,7 +66,7 @@ interface IProps extends IBodyProps {
      * Set the visibility of the media event.
      * @param visible Should the event be visible.
      */
-    setMediaVisible: (visible: boolean) => void;
+    setMediaVisible?: (visible: boolean) => void;
 }
 
 /**
@@ -95,7 +95,7 @@ export class MImageBodyInner extends React.Component<IProps, IState> {
     protected onClick = (ev: React.MouseEvent): void => {
         if (ev.button === 0 && !ev.metaKey) {
             ev.preventDefault();
-            if (!this.props.mediaVisible) {
+            if (!this.props.mediaVisible && this.props.setMediaVisible) {
                 this.props.setMediaVisible(true);
                 return;
             }
@@ -686,7 +686,7 @@ export class MImageBodyInner extends React.Component<IProps, IState> {
 
 // Wrap MImageBody component so we can use a hook here.
 const MImageBody: React.FC<IBodyProps> = (props) => {
-    const [mediaVisible, setVisible] = useMediaVisible(props.mxEvent.getId(), props.mxEvent.getRoomId());
+    const [mediaVisible, setVisible] = useMediaVisible(props.mxEvent);
     return <MImageBodyInner mediaVisible={mediaVisible} setMediaVisible={setVisible} {...props} />;
 };
 

src/components/views/messages/MImageReplyBody.tsx

@@ -38,7 +38,7 @@ class MImageReplyBodyInner extends MImageBodyInner {
     }
 }
 const MImageReplyBody: React.FC<IBodyProps> = (props) => {
-    const [mediaVisible, setVisible] = useMediaVisible(props.mxEvent.getId(), props.mxEvent.getRoomId());
+    const [mediaVisible, setVisible] = useMediaVisible(props.mxEvent);
     return <MImageReplyBodyInner mediaVisible={mediaVisible} setMediaVisible={setVisible} {...props} />;
 };
 

src/components/views/messages/MStickerBody.tsx

@@ -79,7 +79,7 @@ class MStickerBodyInner extends MImageBodyInner {
 }
 
 const MStickerBody: React.FC<IBodyProps> = (props) => {
-    const [mediaVisible, setVisible] = useMediaVisible(props.mxEvent.getId(), props.mxEvent.getRoomId());
+    const [mediaVisible, setVisible] = useMediaVisible(props.mxEvent);
     return <MStickerBodyInner mediaVisible={mediaVisible} setMediaVisible={setVisible} {...props} />;
 };
 

src/components/views/messages/MVideoBody.tsx

@@ -43,7 +43,7 @@ interface IProps extends IBodyProps {
      * Set the visibility of the media event.
      * @param visible Should the event be visible.
      */
-    setMediaVisible: (visible: boolean) => void;
+    setMediaVisible?: (visible: boolean) => void;
 }
 
 class MVideoBodyInner extends React.PureComponent<IProps, IState> {
@@ -64,7 +64,7 @@ class MVideoBodyInner extends React.PureComponent<IProps, IState> {
     };
 
     private onClick = (): void => {
-        this.props.setMediaVisible(true);
+        this.props.setMediaVisible?.(true);
     };
 
     private getContentUrl(): string | undefined {
@@ -342,7 +342,7 @@ class MVideoBodyInner extends React.PureComponent<IProps, IState> {
 
 // Wrap MVideoBody component so we can use a hook here.
 const MVideoBody: React.FC<IBodyProps> = (props) => {
-    const [mediaVisible, setVisible] = useMediaVisible(props.mxEvent.getId(), props.mxEvent.getRoomId());
+    const [mediaVisible, setVisible] = useMediaVisible(props.mxEvent);
     return <MVideoBodyInner mediaVisible={mediaVisible} setMediaVisible={setVisible} {...props} />;
 };
 

src/components/views/messages/MessageActionBar.tsx

@@ -538,7 +538,7 @@ export default class MessageActionBar extends React.PureComponent<IMessageAction
                         />,
                     );
                 }
-                if (MediaEventHelper.canHide(this.props.mxEvent)) {
+                if (MediaEventHelper.canHide(this.props.mxEvent, MatrixClientPeg.safeGet().getSafeUserId())) {
                     toolbarOpts.splice(0, 0, <HideActionButton mxEvent={this.props.mxEvent} key="hide" />);
                 }
             } else if (

src/components/views/rooms/LinkPreviewGroup.tsx

@@ -30,7 +30,7 @@ interface IProps {
 const LinkPreviewGroup: React.FC<IProps> = ({ links, mxEvent, onCancelClick }) => {
     const cli = useContext(MatrixClientContext);
     const [expanded, toggleExpanded] = useStateToggle();
-    const [mediaVisible] = useMediaVisible(mxEvent.getId(), mxEvent.getRoomId());
+    const [mediaVisible] = useMediaVisible(mxEvent);
 
     const ts = mxEvent.getTs();
     const previews = useAsyncMemo<[string, IPreviewUrlResponse][]>(

src/hooks/useMediaVisible.ts

@@ -6,7 +6,7 @@
 */
 
 import { useCallback } from "react";
-import { JoinRule } from "matrix-js-sdk/src/matrix";
+import { JoinRule, type MatrixEvent } from "matrix-js-sdk/src/matrix";
 
 import { SettingLevel } from "../settings/SettingLevel";
 import { useSettingValue } from "./useSettings";
@@ -19,14 +19,15 @@
 
 /**
  * Should the media event be visible in the client, or hidden.
- * @param eventId The eventId of the media event.
  * @returns A boolean describing the hidden status, and a function to set the visiblity.
  */
-export function useMediaVisible(eventId?: string, roomId?: string): [boolean, (visible: boolean) => void] {
-    const mediaPreviewSetting = useSettingValue("mediaPreviewConfig", roomId);
+export function useMediaVisible(mxEvent?: MatrixEvent): [boolean, (visible: boolean) => void] | [true] {
+    const eventId = mxEvent?.getId();
+    const mediaPreviewSetting = useSettingValue("mediaPreviewConfig", mxEvent?.getRoomId());
     const client = useMatrixClientContext();
     const eventVisibility = useSettingValue("showMediaEventIds");
-    const joinRule = useRoomState(client.getRoom(roomId) ?? undefined, (state) => state.getJoinRule());
+    const room = client.getRoom(mxEvent?.getRoomId()) ?? undefined;
+    const joinRule = useRoomState(room, (state) => state.getJoinRule());
     const setMediaVisible = useCallback(
         (visible: boolean) => {
             SettingsStore.setValue("showMediaEventIds", null, SettingLevel.DEVICE, {
@@ -37,6 +38,10 @@
         [eventId, eventVisibility],
     );
 
+    if (mxEvent?.getSender() === client.getUserId()) {
+        return [true];
+    }
+
     const roomIsPrivate = joinRule ? PRIVATE_JOIN_RULES.includes(joinRule) : false;
 
     const explicitEventVisiblity = eventId ? eventVisibility[eventId] : undefined;

src/utils/MediaEventHelper.ts

@@ -117,11 +117,12 @@ export class MediaEventHelper implements IDestroyable {
     /**
      * Determine if the media event in question supports being hidden in the timeline.
      * @param event Any matrix event.
-     * @returns `true` if the media can be hidden, otherwise false.
+     * @returns `true` if the media can be hidden, otherwise `false`.
      */
-    public static canHide(event: MatrixEvent): boolean {
+    public static canHide(event: MatrixEvent, myUserId: string): boolean {
         if (!event) return false;
         if (event.isRedacted()) return false;
+        if (event.getSender() === myUserId) return false;
         const content = event.getContent();
         const hideTypes: string[] = [MsgType.Video, MsgType.Image];
         if (hideTypes.includes(content.msgtype!)) return true;

test/unit-tests/hooks/useMediaVisible-test.tsx

@@ -6,7 +6,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import { act, renderHook, waitFor } from "jest-matrix-react";
-import { JoinRule, type MatrixClient, type Room } from "matrix-js-sdk/src/matrix";
+import { JoinRule, MatrixEvent, type MatrixClient, type Room } from "matrix-js-sdk/src/matrix";
 
 import { useMediaVisible } from "../../../src/hooks/useMediaVisible";
 import { createTestClient, mkStubRoom, withClientContextRenderOptions } from "../../test-utils";
@@ -22,8 +22,18 @@ describe("useMediaVisible", () => {
     let room: Room;
     const mediaPreviewConfig: MediaPreviewConfig = MediaPreviewConfigController.default;
 
-    function render() {
-        return renderHook(() => useMediaVisible(EVENT_ID, ROOM_ID), withClientContextRenderOptions(matrixClient));
+    function render({ sender }: { sender?: string } = {}) {
+        return renderHook(
+            () =>
+                useMediaVisible(
+                    new MatrixEvent({
+                        event_id: EVENT_ID,
+                        room_id: ROOM_ID,
+                        sender,
+                    }),
+                ),
+            withClientContextRenderOptions(matrixClient),
+        );
     }
     beforeEach(() => {
         matrixClient = createTestClient();
@@ -42,53 +52,63 @@ describe("useMediaVisible", () => {
         jest.restoreAllMocks();
     });
 
-    it("should display media by default", async () => {
-        const { result } = render();
-        expect(result.current[0]).toEqual(true);
+    it("should display media by default", () => {
+        const [visible] = render().result.current;
+        expect(visible).toEqual(true);
     });
 
-    it("should hide media when media previews are Off", async () => {
+    it("should hide media when media previews are Off", () => {
         mediaPreviewConfig.media_previews = MediaPreviewValue.Off;
-        const { result } = render();
-        expect(result.current[0]).toEqual(false);
+        const [visible] = render().result.current;
+        expect(visible).toEqual(false);
+    });
+
+    it("should always show media sent by us", () => {
+        mediaPreviewConfig.media_previews = MediaPreviewValue.Off;
+        const [visible, setVisible] = render({ sender: matrixClient.getUserId()! }).result.current;
+        expect(visible).toEqual(true);
+        expect(setVisible).toBeUndefined();
     });
 
     it.each([[JoinRule.Invite], [JoinRule.Knock], [JoinRule.Restricted]])(
         "should display media when media previews are Private and the join rule is %s",
-        async (rule) => {
+        (rule) => {
             mediaPreviewConfig.media_previews = MediaPreviewValue.Private;
             room.currentState.getJoinRule = jest.fn().mockReturnValue(rule);
-            const { result } = render();
-            expect(result.current[0]).toEqual(true);
+            const [visible] = render().result.current;
+            expect(visible).toEqual(true);
         },
     );
 
     it.each([[JoinRule.Public], ["anything_else"]])(
         "should hide media when media previews are Private and the join rule is %s",
-        async (rule) => {
+        (rule) => {
             mediaPreviewConfig.media_previews = MediaPreviewValue.Private;
             room.currentState.getJoinRule = jest.fn().mockReturnValue(rule);
-            const { result } = render();
-            expect(result.current[0]).toEqual(false);
+            const [visible] = render().result.current;
+            expect(visible).toEqual(false);
         },
     );
 
     it("should hide media after function is called", async () => {
         const { result } = render();
         expect(result.current[0]).toEqual(true);
+        expect(result.current[1]).toBeDefined();
         act(() => {
-            result.current[1](false);
+            result.current[1]!(false);
         });
         await waitFor(() => {
             expect(result.current[0]).toEqual(false);
         });
     });
+
     it("should show media after function is called", async () => {
         mediaPreviewConfig.media_previews = MediaPreviewValue.Off;
         const { result } = render();
         expect(result.current[0]).toEqual(false);
+        expect(result.current[1]).toBeDefined();
         act(() => {
-            result.current[1](true);
+            result.current[1]!(true);
         });
         await waitFor(() => {
             expect(result.current[0]).toEqual(true);