Authenticated Media Support (#51)

* Fix AvatarField to work with authenticated media

* Fix ViewMediaButton to work for user's media tab and reported events

* remove console.log

* cleanup AvatarField

* use correct thumbnail size

* fix AvatarField.test

* ignore postgres data for watchman

* fix new avatar preview

* watchman should ignore testdata completely, instead of specific subdirs

* update README

* change user's media icon in sidebar - use the same icon as the media tab

* Add preview for user media files if mimeType is image/*

* Add new line in user media Dialog

src/synapse/authProvider.ts

@@ -96,8 +96,13 @@ const authProvider: AuthProvider = {
     };
 
     if (typeof access_token === "string") {
-      await fetchUtils.fetchJson(logout_api_url, options);
-      storage.removeItem("access_token");
+      try {
+        await fetchUtils.fetchJson(logout_api_url, options);
+      } catch (err) {
+        console.log("Error logging out", err);
+      } finally {
+        storage.removeItem("access_token");
+      }
     }
   },
   // called when the API returns an error

src/synapse/dataProvider.ts

@@ -42,17 +42,6 @@ const jsonClient = async (url: string, options: Options = {}) => {
   }
 };
 
-const mxcUrlToHttp = (mxcUrl: string) => {
-  const homeserver = storage.getItem("base_url");
-  const re = /^mxc:\/\/([^/]+)\/(\w+)/;
-  const ret = re.exec(mxcUrl);
-  console.log("mxcClient " + ret);
-  if (ret == null) return null;
-  const serverName = ret[1];
-  const mediaId = ret[2];
-  return `${homeserver}/_matrix/media/r0/thumbnail/${serverName}/${mediaId}?width=24&height=24&method=scale`;
-};
-
 const filterUndefined = (obj: Record<string, any>) => {
   return Object.fromEntries(Object.entries(obj).filter(([key, value]) => value !== undefined));
 };
@@ -267,10 +256,10 @@ export interface SynapseDataProvider extends DataProvider {
 const resourceMap = {
   users: {
     path: "/_synapse/admin/v2/users",
-    map: (u: User) => ({
+    map: async (u: User) => ({
       ...u,
       id: returnMXID(u.name),
-      avatar_src: u.avatar_url ? mxcUrlToHttp(u.avatar_url) : undefined,
+      avatar_src: u.avatar_url ? u.avatar_url : undefined,
       is_guest: !!u.is_guest,
       admin: !!u.admin,
       deactivated: !!u.deactivated,
@@ -458,7 +447,7 @@ const resourceMap = {
       id: rd.room_id,
       public: !!rd.public,
       guest_access: !!rd.guest_access,
-      avatar_src: rd.avatar_url ? mxcUrlToHttp(rd.avatar_url) : undefined,
+      avatar_src: rd.avatar_url ? rd.avatar_url : undefined,
     }),
     data: "chunk",
     total: json => json.total_room_count_estimate,
@@ -564,8 +553,10 @@ const baseDataProvider: SynapseDataProvider = {
     const url = `${endpoint_url}?${new URLSearchParams(filterUndefined(query)).toString()}`;
 
     const { json } = await jsonClient(url);
+    const formattedData = await json[res.data].map(res.map);
+
     return {
-      data: json[res.data].map(res.map),
+      data: formattedData,
       total: res.total(json, from, perPage),
     };
   },

src/synapse/synapse.ts

@@ -54,11 +54,6 @@ export const getSupportedLoginFlows = async baseUrl => {
   return response.json.flows;
 };
 
-export const getMediaUrl = media_id => {
-  const baseUrl = storage.getItem("base_url");
-  return `${baseUrl}/_matrix/media/v1/download/${media_id}?allow_redirect=true`;
-};
-
 /**
  * Generate a random MXID for current homeserver
  * @returns full MXID as string