From 1426a4b16872f948811c0c35666506c3595c8717 Mon Sep 17 00:00:00 2001
From: Travis Ralston <travpc@gmail.com>
Date: Thu, 25 Mar 2021 22:22:43 -0600
Subject: [PATCH] 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
---
 src/components/views/elements/SSOButtons.tsx |  2 +-
 src/customisations/Media.ts                  | 27 +++++++++++++-------
 2 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/src/components/views/elements/SSOButtons.tsx b/src/components/views/elements/SSOButtons.tsx
index 4e41db0ae7..a9eb04d4ec 100644
--- a/src/components/views/elements/SSOButtons.tsx
+++ b/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} />;
     }
 
diff --git a/src/customisations/Media.ts b/src/customisations/Media.ts
index f262179f3d..b651e40a3b 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);
 }