Fix crash on login when using social login

src/components/views/elements/SSOButtons.tsx

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

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