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 1/2] 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);
     }
 

From 2baace7658e0cdbfcb0b0bf48d2157d52d79098a Mon Sep 17 00:00:00 2001
From: "J. Ryan Stinnett" <jryans@gmail.com>
Date: Wed, 30 Jun 2021 14:27:03 +0100
Subject: [PATCH 2/2] Apply restricted property rules to all files

---
 .eslintrc.js | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index 381cbd7417..827b373949 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -24,6 +24,18 @@ module.exports = {
         // It's disabled here, but we should using it sparingly.
         "react/jsx-no-bind": "off",
         "react/jsx-key": ["error"],
+
+        "no-restricted-properties": [
+            "error",
+            ...buildRestrictedPropertiesOptions(
+                ["window.innerHeight", "window.innerWidth", "window.visualViewport"],
+                "Use UIStore to access window dimensions instead.",
+            ),
+            ...buildRestrictedPropertiesOptions(
+                ["*.mxcUrlToHttp", "*.getHttpUriForMxc"],
+                "Use Media helper instead to centralise access for customisation.",
+            ),
+        ],
     },
     overrides: [{
         files: [
@@ -49,18 +61,6 @@ module.exports = {
             "@typescript-eslint/no-explicit-any": "off",
             // We'd rather not do this but we do
             "@typescript-eslint/ban-ts-comment": "off",
-
-            "no-restricted-properties": [
-                "error",
-                ...buildRestrictedPropertiesOptions(
-                    ["window.innerHeight", "window.innerWidth", "window.visualViewport"],
-                    "Use UIStore to access window dimensions instead.",
-                ),
-                ...buildRestrictedPropertiesOptions(
-                    ["*.mxcUrlToHttp", "*.getHttpUriForMxc"],
-                    "Use Media helper instead to centralise access for customisation.",
-                ),
-            ],
         },
     }],
 };