Add support for hiding videos

playwright/e2e/timeline/timeline.spec.ts

@@ -1,5 +1,5 @@
 /*
-Copyright 2024 New Vector Ltd.
+Copyright 2024, 2025 New Vector Ltd.
 Copyright 2022, 2023 The Matrix.org Foundation C.I.C.
 
 SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
@@ -28,6 +28,8 @@
 const OLD_NAME = "Alan";
 const NEW_NAME = "Alan (away)";
 
+const VIDEO_FILE = fs.readFileSync("playwright/sample-files/5secvid.webm");
+
 const getEventTilesWithBodies = (page: Page): Locator => {
     return page.locator(".mx_EventTile").filter({ has: page.locator(".mx_EventTile_body") });
 };
@@ -403,7 +405,7 @@
                     await expect(locator).toHaveCSS("min-width", "46px");
                 }
                 // Record alignment of collapsed GELS and messages on messagePanel
                 await expect(page.locator(".mx_MainSplit")).toMatchScreenshot(
                     "collapsed-gels-and-messages-irc-layout.png",
                     {
                         // Exclude timestamp from snapshot of mx_MainSplit
@@ -909,6 +911,38 @@
                 mask: [page.locator(".mx_MessageTimestamp")],
             });
         });
+
+        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();
+
+            // Check that the image is now hidden.
+            await expect(page.getByRole("button", { name: "Show image" })).toBeVisible();
+        });
+
+        test("should be able to hide a video", { tag: "@screenshot" }, async ({ page, app, 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, {
+                msgtype: "m.video" as MsgType,
+                body: "bbb.webm",
+                url: upload.content_uri,
+            });
+
+            await app.timeline.scrollToBottom();
+            const imgTile = page.locator(".mx_MVideoBody").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 video" })).toBeVisible();
+        });
     });
 
     test.describe("message sending", { tag: ["@no-firefox", "@no-webkit"] }, () => {

res/css/_components.pcss

@@ -227,6 +227,7 @@
 @import "./views/messages/_DisambiguatedProfile.pcss";
 @import "./views/messages/_EventTileBubble.pcss";
 @import "./views/messages/_HiddenBody.pcss";
+@import "./views/messages/_HiddenMediaPlaceholder.pcss";
 @import "./views/messages/_JumpToDatePicker.pcss";
 @import "./views/messages/_LegacyCallEvent.pcss";
 @import "./views/messages/_MEmoteBody.pcss";

res/css/views/messages/_HiddenMediaPlaceholder.pcss

@@ -0,0 +1,29 @@
+.mx_HiddenMediaPlaceholder {
+    border: none;
+    width: 100%;
+    height: 100%;
+    inset: 0;
+
+    /* To center the text in the middle of the frame */
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+
+    cursor: pointer;
+    background-color: $header-panel-bg-color;
+
+    > div {
+        color: $accent;
+        /* Icon alignment */
+        display: flex;
+        > svg {
+            margin-top: auto;
+            margin-bottom: auto;
+        }
+    }
+}
+
+.mx_EventTile:hover .mx_HiddenMediaPlaceholder {
+    background-color: $background;
+}

res/css/views/messages/_MImageBody.pcss

@@ -79,39 +79,3 @@ Please see LICENSE files in the repository root for full details.
     color: $imagebody-giflabel-color;
     pointer-events: none;
 }
-
-.mx_HiddenImagePlaceholder {
-    position: absolute;
-    inset: 0;
-
-    /* To center the text in the middle of the frame */
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    text-align: center;
-
-    cursor: pointer;
-    background-color: $header-panel-bg-color;
-
-    .mx_HiddenImagePlaceholder_button {
-        color: $accent;
-
-        span.mx_HiddenImagePlaceholder_eye {
-            margin-right: 8px;
-
-            background-color: $accent;
-            mask-image: url("$(res)/img/element-icons/eye.svg");
-            display: inline-block;
-            width: 18px;
-            height: 14px;
-        }
-
-        span:not(.mx_HiddenImagePlaceholder_eye) {
-            vertical-align: text-bottom;
-        }
-    }
-}
-
-.mx_EventTile:hover .mx_HiddenImagePlaceholder {
-    background-color: $background;
-}

src/components/views/directory/NetworkDropdown.tsx

@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import { without } from "lodash";
-import React, { useCallback, useEffect, useState } from "react";
+import React, { useCallback } from "react";
 import { MatrixError } from "matrix-js-sdk/src/matrix";
 
 import { MenuItemRadio } from "../../../accessibility/context_menu/MenuItemRadio";
@@ -16,7 +16,6 @@ import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import Modal from "../../../Modal";
 import SdkConfig from "../../../SdkConfig";
 import { SettingLevel } from "../../../settings/SettingLevel";
-import SettingsStore from "../../../settings/SettingsStore";
 import { type Protocols } from "../../../utils/DirectoryUtils";
 import {
     type AdditionalOptionsProps,
@@ -26,7 +25,7 @@ import {
 import TextInputDialog from "../dialogs/TextInputDialog";
 import AccessibleButton from "../elements/AccessibleButton";
 import withValidation from "../elements/Validation";
-import { type SettingKey, type Settings } from "../../../settings/Settings.tsx";
+import { useSettingsValueWithSetter } from "../../../hooks/useSettings.ts";
 
 const SETTING_NAME = "room_directory_servers";
 
@@ -68,56 +67,6 @@ const validServer = withValidation<undefined, { error?: unknown }>({
     memoize: true,
 });
 
-function useSettingsValueWithSetter<S extends SettingKey>(
-    settingName: S,
-    level: SettingLevel,
-    roomId: string | null,
-    excludeDefault: true,
-): [Settings[S]["default"] | undefined, (value: Settings[S]["default"]) => Promise<void>];
-function useSettingsValueWithSetter<S extends SettingKey>(
-    settingName: S,
-    level: SettingLevel,
-    roomId?: string | null,
-    excludeDefault?: false,
-): [Settings[S]["default"], (value: Settings[S]["default"]) => Promise<void>];
-function useSettingsValueWithSetter<S extends SettingKey>(
-    settingName: S,
-    level: SettingLevel,
-    roomId: string | null = null,
-    excludeDefault = false,
-): [Settings[S]["default"] | undefined, (value: Settings[S]["default"]) => Promise<void>] {
-    const [value, setValue] = useState(
-        // XXX: This seems naff but is needed to convince TypeScript that the overload is fine
-        excludeDefault
-            ? SettingsStore.getValue(settingName, roomId, excludeDefault)
-            : SettingsStore.getValue(settingName, roomId, excludeDefault),
-    );
-    const setter = useCallback(
-        async (value: Settings[S]["default"]): Promise<void> => {
-            setValue(value);
-            SettingsStore.setValue(settingName, roomId, level, value);
-        },
-        [level, roomId, settingName],
-    );
-
-    useEffect(() => {
-        const ref = SettingsStore.watchSetting(settingName, roomId, () => {
-            setValue(
-                // XXX: This seems naff but is needed to convince TypeScript that the overload is fine
-                excludeDefault
-                    ? SettingsStore.getValue(settingName, roomId, excludeDefault)
-                    : SettingsStore.getValue(settingName, roomId, excludeDefault),
-            );
-        });
-        // clean-up
-        return () => {
-            SettingsStore.unwatchSetting(ref);
-        };
-    }, [settingName, roomId, excludeDefault]);
-
-    return [value, setter];
-}
-
 interface ServerList {
     allServers: string[];
     homeServer: string;

src/components/views/messages/HiddenMediaPlaceholder.tsx

@@ -0,0 +1,31 @@
+/*
+Copyright 2025 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import React, { type MouseEventHandler } from "react";
+import { VisibilityOnIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
+
+import { _t } from "../../../languageHandler";
+
+interface IProps {
+    kind: "m.image" | "m.video";
+    onClick: MouseEventHandler<HTMLButtonElement>;
+}
+
+const HiddenMediaPlaceholder: React.FunctionComponent<IProps> = (props) => {
+    return (
+        <button onClick={props.onClick} className="mx_HiddenMediaPlaceholder">
+            <div>
+                <VisibilityOnIcon />
+                <span>
+                    {props.kind === "m.image" ? _t("timeline|m.image|show_image") : _t("timeline|m.video|show_video")}
+                </span>
+            </div>
+        </button>
+    );
+};
+
+export default HiddenMediaPlaceholder;

src/components/views/messages/HideActionButton.tsx

@@ -0,0 +1,65 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { type MatrixEvent } from "matrix-js-sdk/src/matrix";
+import React, { useCallback } from "react";
+import classNames from "classnames";
+import { VisibilityOffIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
+
+import { RovingAccessibleButton } from "../../../accessibility/RovingTabIndex";
+import { _t } from "../../../languageHandler";
+import { SettingLevel } from "../../../settings/SettingLevel";
+import { useSettingsValueWithSetter, useSettingValue } from "../../../hooks/useSettings";
+
+interface IProps {
+    mxEvent: MatrixEvent;
+}
+
+const HideActionButton: React.FC<IProps> = ({ mxEvent }) => {
+    const eventId = mxEvent.getId()!;
+    let spinner: JSX.Element | undefined;
+    const defaultShowImages = useSettingValue("showImages", SettingLevel.DEVICE);
+    const [eventVisibility, setEventIds] = useSettingsValueWithSetter("showMediaEventIds", SettingLevel.DEVICE);
+    const onClick = useCallback(() => {
+        if (!eventId) {
+            return;
+        }
+        setEventIds({
+            ...eventVisibility,
+            [eventId]: false,
+        });
+    }, [setEventIds, eventId, eventVisibility]);
+
+    const classes = classNames({
+        mx_MessageActionBar_iconButton: true,
+        mx_MessageActionBar_downloadButton: true,
+        mx_MessageActionBar_downloadSpinnerButton: !!spinner,
+    });
+
+    const imgIsVisible =
+        eventVisibility[eventId] === true || (defaultShowImages && eventVisibility[eventId] === undefined);
+
+    if (!imgIsVisible) {
+        return;
+    }
+
+    return (
+        <RovingAccessibleButton
+            className={classes}
+            title={_t("action|hide")}
+            onClick={onClick}
+            disabled={!!spinner}
+            placement="left"
+        >
+            <VisibilityOffIcon />
+            {spinner}
+        </RovingAccessibleButton>
+    );
+};
+
+export default HideActionButton;