Merge pull request #6293 from matrix-org/jryans/lint-media-apis

Lint MXC APIs to centralise access

.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,21 +61,16 @@ 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",
-                ),
-            ],
         },
     }],
 };
 
 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);
     }