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

@@ -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,

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