Add support for module message hint allowDownloadingMedia (#30252)

* Add support for allowDownloadingMedia

* Add tests.

* Allow downloading when no event is associated.

* fix lint

* Update module API

* Update lock file too

* force CI

playwright/e2e/modules/custom-component.spec.ts

@@ -6,6 +6,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import { type Page } from "@playwright/test";
+import fs from "node:fs";
 
 import { test, expect } from "../../element-web-test";
 
@@ -22,6 +23,9 @@ const screenshotOptions = (page: Page) => ({
         }
     `,
 });
+
+const IMAGE_FILE = fs.readFileSync("playwright/sample-files/element.png");
+
 test.describe("Custom Component API", () => {
     test.use({
         displayName: "Manny",
@@ -84,6 +88,50 @@ test.describe("Custom Component API", () => {
                 await page.getByRole("toolbar", { name: "Message Actions" }).getByRole("button", { name: "Edit" }),
             ).not.toBeVisible();
         });
+        test("should disallow downloading media when the allowDownloading hint is set to false", async ({
+            page,
+            room,
+            app,
+        }) => {
+            await app.viewRoomById(room.roomId);
+            await app.viewRoomById(room.roomId);
+            const upload = await app.client.uploadContent(IMAGE_FILE, { name: "bad.png", type: "image/png" });
+            await app.client.sendEvent(room.roomId, null, "m.room.message", {
+                msgtype: "m.image",
+                body: "bad.png",
+                url: upload.content_uri,
+            });
+
+            await app.timeline.scrollToBottom();
+            const imgTile = page.locator(".mx_MImageBody").first();
+            await expect(imgTile).toBeVisible();
+            await imgTile.hover();
+            await expect(page.getByRole("button", { name: "Download" })).not.toBeVisible();
+            await imgTile.click();
+            await expect(page.getByLabel("Image view").getByLabel("Download")).not.toBeVisible();
+        });
+        test("should allow downloading media when the allowDownloading hint is set to true", async ({
+            page,
+            room,
+            app,
+        }) => {
+            await app.viewRoomById(room.roomId);
+            await app.viewRoomById(room.roomId);
+            const upload = await app.client.uploadContent(IMAGE_FILE, { name: "good.png", type: "image/png" });
+            await app.client.sendEvent(room.roomId, null, "m.room.message", {
+                msgtype: "m.image",
+                body: "good.png",
+                url: upload.content_uri,
+            });
+
+            await app.timeline.scrollToBottom();
+            const imgTile = page.locator(".mx_MImageBody").first();
+            await expect(imgTile).toBeVisible();
+            await imgTile.hover();
+            await expect(page.getByRole("button", { name: "Download" })).toBeVisible();
+            await imgTile.click();
+            await expect(page.getByLabel("Image view").getByLabel("Download")).toBeVisible();
+        });
         test(
             "should render the next registered component if the filter function throws",
             { tag: "@screenshot" },

playwright/sample-files/custom-component-module.js

@@ -5,8 +5,18 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
+// Note: eslint-plugin-jsdoc doesn't like import types as parameters, so we
+// get around it with @typedef
+/**
+ * @typedef {import("@element-hq/element-web-module-api").Api} Api
+ */
+
 export default class CustomComponentModule {
     static moduleApiVersion = "^1.2.0";
+    /**
+     * Basic module for testing.
+     * @param {Api} api API object
+     */
     constructor(api) {
         this.api = api;
         this.api.customComponents.registerMessageRenderer(
@@ -40,6 +50,15 @@ export default class CustomComponentModule {
                 throw new Error("Fail test!");
             },
         );
+
+        this.api.customComponents.registerMessageRenderer(
+            (mxEvent) => mxEvent.type === "m.room.message" && mxEvent.content.msgtype === "m.image",
+            (_props, originalComponent) => {
+                return originalComponent();
+            },
+            { allowDownloadingMedia: async (mxEvent) => mxEvent.content.body !== "bad.png" },
+        );
+
         // Order is specific here to avoid this overriding the other renderers
         this.api.customComponents.registerMessageRenderer("m.room.message", (props, originalComponent) => {
             const body = props.mxEvent.content.body;