From a9f35e8c69c203b5b8c79ef345b4330faad35d06 Mon Sep 17 00:00:00 2001
From: "J. Ryan Stinnett" <jryans@gmail.com>
Date: Wed, 30 Jun 2021 14:19:39 +0100
Subject: [PATCH] Lint MXC APIs to centralise access

This adds linting rules to ensure that MXC APIs are only accessed via the
`Media` helper so they can be customised easily when desired.

Fixes https://github.com/vector-im/element-web/issues/16933
---
 .eslintrc.js                | 11 +++++++++--
 src/customisations/Media.ts |  4 ++++
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index bf6e245b93..381cbd7417 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -54,7 +54,11 @@ module.exports = {
                 "error",
                 ...buildRestrictedPropertiesOptions(
                     ["window.innerHeight", "window.innerWidth", "window.visualViewport"],
-                    "Use UIStore to access window dimensions instead",
+                    "Use UIStore to access window dimensions instead.",
+                ),
+                ...buildRestrictedPropertiesOptions(
+                    ["*.mxcUrlToHttp", "*.getHttpUriForMxc"],
+                    "Use Media helper instead to centralise access for customisation.",
                 ),
             ],
         },
@@ -63,7 +67,10 @@ module.exports = {
 
 function buildRestrictedPropertiesOptions(properties, message) {
     return properties.map(prop => {
-        const [object, property] = prop.split(".");
+        let [object, property] = prop.split(".");
+        if (object === "*") {
+            object = undefined;
+        }
         return {
             object,
             property,
diff --git a/src/customisations/Media.ts b/src/customisations/Media.ts
index f8ee834102..ce8f88f6f1 100644
--- a/src/customisations/Media.ts
+++ b/src/customisations/Media.ts
@@ -75,6 +75,7 @@ export class Media {
      * The HTTP URL for the source media.
      */
     public get srcHttp(): string {
+        // eslint-disable-next-line no-restricted-properties
         return this.client.mxcUrlToHttp(this.srcMxc);
     }
 
@@ -84,6 +85,7 @@ export class Media {
      */
     public get thumbnailHttp(): string | undefined | null {
         if (!this.hasThumbnail) return null;
+        // eslint-disable-next-line no-restricted-properties
         return this.client.mxcUrlToHttp(this.thumbnailMxc);
     }
 
@@ -100,6 +102,7 @@ export class Media {
         // scale using the device pixel ratio to keep images clear
         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);
     }
 
@@ -114,6 +117,7 @@ export class Media {
         // scale using the device pixel ratio to keep images clear
         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);
     }