Fix crash on login when using social login

We weren't passing a matrix client through, and the peg wasn't set at this point. Just need to thread it through to the media endpoints.

Fixes https://github.com/vector-im/element-web/issues/16765
This commit is contained in:
Travis Ralston 2021-03-25 22:22:43 -06:00
parent 1f4437af39
commit 1426a4b168
2 changed files with 19 additions and 10 deletions

View file

@ -73,7 +73,7 @@ const SSOButton: React.FC<ISSOButtonProps> = ({
brandClass = `mx_SSOButton_brand_${brandName}`;
icon = <img src={brandIcon} height="24" width="24" alt={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 = <img src={src} height="24" width="24" alt={idp.name} />;
}

View file

@ -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);
}