Populate info.duration for audio & video file uploads (#11225)

* Improve m.file m.image m.audio m.video types

* Populate `info.duration` for audio & video file uploads

* Fix tests

* Iterate types

* Improve coverage

* Fix test

* Add small delay to stabilise cypress test

* Fix test idempotency

* Improve coverage

* Slow down

* iterate

test/components/views/messages/MVideoBody-test.tsx

@@ -15,23 +15,22 @@ limitations under the License.
 */
 
 import React, { ComponentProps } from "react";
-import { IContent, MatrixEvent } from "matrix-js-sdk/src/matrix";
+import { EventType, getHttpUriForMxc, IContent, MatrixEvent } from "matrix-js-sdk/src/matrix";
 import { render, RenderResult } from "@testing-library/react";
+import fetchMock from "fetch-mock-jest";
 
 import MatrixClientContext from "../../../../src/contexts/MatrixClientContext";
 import { RoomPermalinkCreator } from "../../../../src/utils/permalinks/Permalinks";
 import { MediaEventHelper } from "../../../../src/utils/MediaEventHelper";
-import { getMockClientWithEventEmitter } from "../../../test-utils";
+import {
+    getMockClientWithEventEmitter,
+    mockClientMethodsCrypto,
+    mockClientMethodsDevice,
+    mockClientMethodsServer,
+    mockClientMethodsUser,
+} from "../../../test-utils";
 import MVideoBody from "../../../../src/components/views/messages/MVideoBody";
 
-jest.mock("../../../../src/customisations/Media", () => {
-    return {
-        mediaFromContent: () => {
-            return { isEncrypted: false };
-        },
-    };
-});
-
 describe("MVideoBody", () => {
     it("does not crash when given a portrait image", () => {
         // Check for an unreliable crash caused by a fractional-sized
@@ -40,6 +39,58 @@ describe("MVideoBody", () => {
         expect(asFragment()).toMatchSnapshot();
         // If we get here, we did not crash.
     });
+
+    it("should show poster for encrypted media before downloading it", async () => {
+        const userId = "@user:server";
+        const deviceId = "DEADB33F";
+        const cli = getMockClientWithEventEmitter({
+            ...mockClientMethodsUser(userId),
+            ...mockClientMethodsServer(),
+            ...mockClientMethodsDevice(deviceId),
+            ...mockClientMethodsCrypto(),
+            getRooms: jest.fn().mockReturnValue([]),
+            getIgnoredUsers: jest.fn(),
+            getVersions: jest.fn().mockResolvedValue({
+                unstable_features: {
+                    "org.matrix.msc3882": true,
+                    "org.matrix.msc3886": true,
+                },
+            }),
+        });
+        const thumbUrl = "https://server/_matrix/media/r0/download/server/encrypted-poster";
+        fetchMock.getOnce(thumbUrl, { status: 200 });
+
+        // eslint-disable-next-line no-restricted-properties
+        cli.mxcUrlToHttp.mockImplementation(
+            (mxcUrl: string, width?: number, height?: number, resizeMethod?: string, allowDirectLinks?: boolean) => {
+                return getHttpUriForMxc("https://server", mxcUrl, width, height, resizeMethod, allowDirectLinks);
+            },
+        );
+        const encryptedMediaEvent = new MatrixEvent({
+            room_id: "!room:server",
+            sender: userId,
+            type: EventType.RoomMessage,
+            content: {
+                body: "alt for a test video",
+                info: {
+                    duration: 420,
+                    w: 40,
+                    h: 50,
+                    thumbnail_file: {
+                        url: "mxc://server/encrypted-poster",
+                    },
+                },
+                file: {
+                    url: "mxc://server/encrypted-image",
+                },
+            },
+        });
+
+        const { asFragment } = render(
+            <MVideoBody mxEvent={encryptedMediaEvent} mediaEventHelper={new MediaEventHelper(encryptedMediaEvent)} />,
+        );
+        expect(asFragment()).toMatchSnapshot();
+    });
 });
 
 function makeMVideoBody(w: number, h: number): RenderResult {