diff --git a/src/components/views/elements/SSOButtons.tsx b/src/components/views/elements/SSOButtons.tsx index 4e41db0ae72..a9eb04d4ecc 100644 --- a/src/components/views/elements/SSOButtons.tsx +++ b/src/components/views/elements/SSOButtons.tsx @@ -73,7 +73,7 @@ const SSOButton: React.FC = ({ brandClass = `mx_SSOButton_brand_${brandName}`; icon = {brandName}; } else if (typeof idp?.icon === "string" && idp.icon.startsWith("mxc://")) { - const src = mediaFromMxc(idp.icon).getSquareThumbnailHttp(24); + const src = mediaFromMxc(idp.icon, matrixClient).getSquareThumbnailHttp(24); icon = {idp.name}; } diff --git a/src/customisations/Media.ts b/src/customisations/Media.ts index f262179f3d1..b651e40a3b5 100644 --- a/src/customisations/Media.ts +++ b/src/customisations/Media.ts @@ -17,6 +17,7 @@ import {MatrixClientPeg} from "../MatrixClientPeg"; import {IMediaEventContent, IPreparedMedia, prepEventContentAsMedia} from "./models/IMediaEventContent"; import {ResizeMethod} from "../Avatar"; +import {MatrixClient} from "matrix-js-sdk/src/client"; // Populate this class with the details of your customisations when copying it. @@ -30,8 +31,14 @@ import {ResizeMethod} from "../Avatar"; * "thumbnail media", derived from event contents or external sources. */ export class Media { + private client: MatrixClient; + // Per above, this constructor signature can be whatever is helpful for you. - constructor(private prepared: IPreparedMedia) { + constructor(private prepared: IPreparedMedia, client?: MatrixClient) { + this.client = client ?? MatrixClientPeg.get(); + if (!this.client) { + throw new Error("No possible MatrixClient for media resolution. Please provide one or log in."); + } } /** @@ -67,7 +74,7 @@ export class Media { * The HTTP URL for the source media. */ public get srcHttp(): string { - return MatrixClientPeg.get().mxcUrlToHttp(this.srcMxc); + return this.client.mxcUrlToHttp(this.srcMxc); } /** @@ -76,7 +83,7 @@ export class Media { */ public get thumbnailHttp(): string | undefined | null { if (!this.hasThumbnail) return null; - return MatrixClientPeg.get().mxcUrlToHttp(this.thumbnailMxc); + return this.client.mxcUrlToHttp(this.thumbnailMxc); } /** @@ -89,7 +96,7 @@ export class Media { */ public getThumbnailHttp(width: number, height: number, mode: ResizeMethod = "scale"): string | null | undefined { if (!this.hasThumbnail) return null; - return MatrixClientPeg.get().mxcUrlToHttp(this.thumbnailMxc, width, height, mode); + return this.client.mxcUrlToHttp(this.thumbnailMxc, width, height, mode); } /** @@ -100,7 +107,7 @@ export class Media { * @returns {string} The HTTP URL which points to the thumbnail. */ public getThumbnailOfSourceHttp(width: number, height: number, mode: ResizeMethod = "scale"): string { - return MatrixClientPeg.get().mxcUrlToHttp(this.srcMxc, width, height, mode); + return this.client.mxcUrlToHttp(this.srcMxc, width, height, mode); } /** @@ -128,17 +135,19 @@ export class Media { /** * Creates a media object from event content. * @param {IMediaEventContent} content The event content. + * @param {MatrixClient} client? Optional client to use. * @returns {Media} The media object. */ -export function mediaFromContent(content: IMediaEventContent): Media { - return new Media(prepEventContentAsMedia(content)); +export function mediaFromContent(content: IMediaEventContent, client?: MatrixClient): Media { + return new Media(prepEventContentAsMedia(content), client); } /** * Creates a media object from an MXC URI. * @param {string} mxc The MXC URI. + * @param {MatrixClient} client? Optional client to use. * @returns {Media} The media object. */ -export function mediaFromMxc(mxc: string): Media { - return mediaFromContent({url: mxc}); +export function mediaFromMxc(mxc: string, client?: MatrixClient): Media { + return mediaFromContent({url: mxc}, client); }