Use global state to track authenticated media support

Requires matrix-org/matrix-js-sdk#4185

Author: turt2live

src/Lifecycle.ts

@@ -82,6 +82,7 @@ import {
     tryDecryptToken,
 } from "./utils/tokens/tokens";
 import { TokenRefresher } from "./utils/oidc/TokenRefresher";
+import { setUseAuthenticatedMedia } from "./customisations/Media";
 
 const HOMESERVER_URL_KEY = "mx_hs_url";
 const ID_SERVER_URL_KEY = "mx_is_url";
@@ -788,6 +789,13 @@ async function doSetLoggedIn(credentials: IMatrixClientCreds, clearStorageEnable
     MatrixClientPeg.replaceUsingCreds(credentials, tokenRefresher?.doRefreshAccessToken.bind(tokenRefresher));
     const client = MatrixClientPeg.safeGet();
 
+    try {
+        setUseAuthenticatedMedia(await client.doesServerSupportUnstableFeature("org.matrix.msc3916"));
+    } catch (e) {
+        logger.error("Error checking for authenticated media support:", e);
+        // we otherwise ignore the error to avoid breaking offline mode
+    }
+
     setSentryUser(credentials.userId);
 
     if (PosthogAnalytics.instance.isEnabled()) {

src/customisations/Media.ts

@@ -30,6 +30,12 @@ import {getMediaByUrl} from "../utils/media";
 // functions below create an instance of the Media class and are used throughout the
 // project.
 
+let USE_AUTHENTICATED_MEDIA = false;
+
+export function setUseAuthenticatedMedia(use: boolean): void {
+    USE_AUTHENTICATED_MEDIA = use;
+}
+
 /**
  * A media object is a representation of a "source media" and an optional
  * "thumbnail media", derived from event contents or external sources.
@@ -82,7 +88,7 @@ export class Media {
      */
     public get srcHttp(): string | null {
         // eslint-disable-next-line no-restricted-properties
-        return this.client.mxcUrlToHttp(this.srcMxc, undefined, undefined, undefined, false, true) || null;
+        return this.client.mxcUrlToHttp(this.srcMxc, undefined, undefined, undefined, false, true, USE_AUTHENTICATED_MEDIA) || null;
     }
 
     /**
@@ -92,7 +98,7 @@ export class Media {
     public get thumbnailHttp(): string | null {
         if (!this.hasThumbnail) return null;
         // eslint-disable-next-line no-restricted-properties
-        return this.client.mxcUrlToHttp(this.thumbnailMxc!, undefined, undefined, undefined, false, true);
+        return this.client.mxcUrlToHttp(this.thumbnailMxc!, undefined, undefined, undefined, false, true, USE_AUTHENTICATED_MEDIA);
     }
 
     /**
@@ -109,7 +115,7 @@ export class Media {
         width = Math.floor(width * window.devicePixelRatio);
         height = Math.floor(height * window.devicePixelRatio);
         // eslint-disable-next-line no-restricted-properties
-        return this.client.mxcUrlToHttp(this.thumbnailMxc!, width, height, mode, false, true);
+        return this.client.mxcUrlToHttp(this.thumbnailMxc!, width, height, mode, false, true, USE_AUTHENTICATED_MEDIA);
     }
 
     /**
@@ -124,7 +130,7 @@ export class Media {
         width = Math.floor(width * window.devicePixelRatio);
         height = Math.floor(height * window.devicePixelRatio);
         // eslint-disable-next-line no-restricted-properties
-        return this.client.mxcUrlToHttp(this.srcMxc, width, height, mode, false, true);
+        return this.client.mxcUrlToHttp(this.srcMxc, width, height, mode, false, true, USE_AUTHENTICATED_MEDIA);
     }
 
     /**