move mxcUrl functions to media repo class

src/domain/session/room/timeline/tiles/ImageTile.js

@@ -20,15 +20,10 @@ const MAX_HEIGHT = 300;
 const MAX_WIDTH = 400;
 
 export class ImageTile extends MessageTile {
-    constructor(options, room) {
-        super(options);
-        this._room = room;
-    }
-
     get thumbnailUrl() {
         const mxcUrl = this._getContent()?.url;
         if (typeof mxcUrl === "string") {
-            return this._room.mxcUrlThumbnail(mxcUrl, this.thumbnailWidth, this.thumbnailHeight, "scale");
+            return this._mediaRepository.mxcUrlThumbnail(mxcUrl, this.thumbnailWidth, this.thumbnailHeight, "scale");
         }
         return null;
     }
@@ -36,7 +31,7 @@ export class ImageTile extends MessageTile {
     get url() {
         const mxcUrl = this._getContent()?.url;
         if (typeof mxcUrl === "string") {
-            return this._room.mxcUrl(mxcUrl);
+            return this._mediaRepository.mxcUrl(mxcUrl);
         }
         return null;
     }

src/domain/session/room/timeline/tiles/MessageTile.js

@@ -20,6 +20,7 @@ import {getIdentifierColorNumber} from "../../../../avatar.js";
 export class MessageTile extends SimpleTile {
     constructor(options) {
         super(options);
+        this._mediaRepository = options.mediaRepository;
         this._clock = options.clock;
         this._isOwn = this._entry.sender === options.ownUserId;
         this._date = this._entry.timestamp ? new Date(this._entry.timestamp) : null;

src/domain/session/room/timeline/tilesCreator.js

@@ -24,7 +24,8 @@ import {EncryptedEventTile} from "./tiles/EncryptedEventTile.js";
 
 export function tilesCreator({room, ownUserId, clock}) {
     return function tilesCreator(entry, emitUpdate) {
-        const options = {entry, emitUpdate, ownUserId, clock};
+        const options = {entry, emitUpdate, ownUserId, clock,
+            mediaRepository: room.mediaRepository};
         if (entry.isGap) {
             return new GapTile(options, room);
         } else if (entry.eventType) {
@@ -38,7 +39,7 @@ export function tilesCreator({room, ownUserId, clock}) {
                         case "m.emote":
                             return new TextTile(options);
                         case "m.image":
-                            return new ImageTile(options, room);
+                            return new ImageTile(options);
                         case "m.location":
                             return new LocationTile(options);
                         default:

src/matrix/net/HomeServerApi.js

@@ -45,22 +45,7 @@ class RequestWrapper {
     }
 }
 
-export class HomeServerApi {
+function encodeQueryParams(queryParams) {
-    constructor({homeServer, accessToken, request, createTimeout, reconnector}) {
-        // store these both in a closure somehow so it's harder to get at in case of XSS?
-        // one could change the homeserver as well so the token gets sent there, so both must be protected from read/write
-        this._homeserver = homeServer;
-        this._accessToken = accessToken;
-        this._requestFn = request;
-        this._createTimeout = createTimeout;
-        this._reconnector = reconnector;
-    }
-
-    _url(csPath) {
-        return `${this._homeserver}/_matrix/client/r0${csPath}`;
-    }
-
-    _encodeQueryParams(queryParams) {
     return Object.entries(queryParams || {})
         .filter(([, value]) => value !== undefined)
         .map(([name, value]) => {
@@ -70,10 +55,26 @@ export class HomeServerApi {
             return `${encodeURIComponent(name)}=${encodeURIComponent(value)}`;
         })
         .join("&");
+}
+
+export class HomeServerApi {
+    constructor({homeServer, accessToken, request, createTimeout, reconnector}) {
+        // store these both in a closure somehow so it's harder to get at in case of XSS?
+        // one could change the homeserver as well so the token gets sent there, so both must be protected from read/write
+        this._homeserver = homeServer;
+        this._accessToken = accessToken;
+        this._requestFn = request;
+        this._createTimeout = createTimeout;
+        this._reconnector = reconnector;
+        this._mediaRepository = new MediaRepository(homeServer);
+    }
+
+    _url(csPath) {
+        return `${this._homeserver}/_matrix/client/r0${csPath}`;
     }
 
     _request(method, url, queryParams, body, options) {
-        const queryString = this._encodeQueryParams(queryParams);
+        const queryString = encodeQueryParams(queryParams);
         url = `${url}?${queryString}`;
         let bodyString;
         const headers = new Map();
@@ -154,13 +155,14 @@ export class HomeServerApi {
         return this._request("GET", `${this._homeserver}/_matrix/client/versions`, null, null, options);
     }
 
-    _parseMxcUrl(url) {
+    get mediaRepository() {
-        const prefix = "mxc://";
+        return this._mediaRepository;
-        if (url.startsWith(prefix)) {
-            return url.substr(prefix.length).split("/", 2);
-        } else {
-            return null;
     }
+}
+
+class MediaRepository {
+    constructor(homeserver) {
+        this._homeserver = homeserver;
     }
 
     mxcUrlThumbnail(url, width, height, method) {
@@ -168,7 +170,7 @@ export class HomeServerApi {
         if (parts) {
             const [serverName, mediaId] = parts;
             const httpUrl = `${this._homeserver}/_matrix/media/r0/thumbnail/${encodeURIComponent(serverName)}/${encodeURIComponent(mediaId)}`;
-            return httpUrl + "?" + this._encodeQueryParams({width, height, method});
+            return httpUrl + "?" + encodeQueryParams({width, height, method});
         }
         return null;
     }
@@ -182,6 +184,15 @@ export class HomeServerApi {
             return null;
         }
     }
+
+    _parseMxcUrl(url) {
+        const prefix = "mxc://";
+        if (url.startsWith(prefix)) {
+            return url.substr(prefix.length).split("/", 2);
+        } else {
+            return null;
+        }
+    }
 }
 
 export function tests() {

src/matrix/room/Room.js

@@ -201,14 +201,8 @@ export class Room extends EventEmitter {
         return this._timeline;
     }
 
-    /** @public */
+    get mediaRepository() {
-    mxcUrlThumbnail(url, width, height, method) {
+        return this._hsApi.mediaRepository;
-        return this._hsApi.mxcUrlThumbnail(url, width, height, method);
-    }
-
-    /** @public */
-    mxcUrl(url) {
-        return this._hsApi.mxcUrl(url);
     }
 }