From f4020f588fb1ff01a81bf7bd8a054a474dbe776d Mon Sep 17 00:00:00 2001
From: Tulir Asokan <tulir@maunium.net>
Date: Wed, 27 Nov 2024 01:12:52 +0200
Subject: [PATCH] web/api: add helper for getting room avatar url

---
 web/src/api/media.ts                   | 14 +++++++++++++-
 web/src/ui/roomlist/Entry.tsx          |  4 ++--
 web/src/ui/roomview/RoomViewHeader.tsx |  6 ++----
 3 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/web/src/api/media.ts b/web/src/api/media.ts
index 3f920af..ca0a0ac 100644
--- a/web/src/api/media.ts
+++ b/web/src/api/media.ts
@@ -13,8 +13,9 @@
 //
 // You should have received a copy of the GNU Affero General Public License
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.
+import type { RoomListEntry } from "@/api/statestore"
 import { parseMXC } from "@/util/validation.ts"
-import { UserID, UserProfile } from "./types"
+import { ContentURI, DBRoom, UserID, UserProfile } from "./types"
 
 export const getMediaURL = (mxc?: string, encrypted: boolean = false): string | undefined => {
 	const [server, mediaID] = parseMXC(mxc)
@@ -88,3 +89,14 @@ export const getAvatarURL = (userID: UserID, content?: UserProfile | null): stri
 	const fallback = `${backgroundColor}:${fallbackCharacter}`
 	return `_gomuks/media/${server}/${mediaID}?encrypted=false&fallback=${encodeURIComponent(fallback)}`
 }
+
+export const getRoomAvatarURL = (room: DBRoom | RoomListEntry, avatarOverride?: ContentURI): string | undefined => {
+	let dmUserID: UserID | undefined
+	if ("dm_user_id" in room) {
+		dmUserID = room.dm_user_id
+	} else if ("lazy_load_summary" in room) {
+		dmUserID = room.lazy_load_summary?.heroes?.length === 1
+			? room.lazy_load_summary.heroes[0] : undefined
+	}
+	return getAvatarURL(dmUserID ?? room.room_id, { displayname: room.name, avatar_url: avatarOverride ?? room.avatar })
+}
diff --git a/web/src/ui/roomlist/Entry.tsx b/web/src/ui/roomlist/Entry.tsx
index 1301620..69b8459 100644
--- a/web/src/ui/roomlist/Entry.tsx
+++ b/web/src/ui/roomlist/Entry.tsx
@@ -14,7 +14,7 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.
 import { memo, use } from "react"
-import { getAvatarURL } from "@/api/media.ts"
+import { getRoomAvatarURL } from "@/api/media.ts"
 import type { RoomListEntry } from "@/api/statestore"
 import type { MemDBEvent, MemberEventContent } from "@/api/types"
 import useContentVisibility from "@/util/contentvisibility.ts"
@@ -60,7 +60,7 @@ const EntryInner = ({ room }: InnerProps) => {
 			<img
 				loading="lazy"
 				className="avatar room-avatar"
-				src={getAvatarURL(room.dm_user_id ?? room.room_id, { avatar_url: room.avatar, displayname: room.name })}
+				src={getRoomAvatarURL(room)}
 				alt=""
 			/>
 		</div>
diff --git a/web/src/ui/roomview/RoomViewHeader.tsx b/web/src/ui/roomview/RoomViewHeader.tsx
index 01ec93a..c591bae 100644
--- a/web/src/ui/roomview/RoomViewHeader.tsx
+++ b/web/src/ui/roomview/RoomViewHeader.tsx
@@ -14,7 +14,7 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.
 import { use, useCallback } from "react"
-import { getAvatarURL } from "@/api/media.ts"
+import { getRoomAvatarURL } from "@/api/media.ts"
 import { RoomStateStore } from "@/api/statestore"
 import { useEventAsState } from "@/util/eventdispatcher.ts"
 import MainScreenContext from "../MainScreenContext.ts"
@@ -33,8 +33,6 @@ interface RoomViewHeaderProps {
 
 const RoomViewHeader = ({ room }: RoomViewHeaderProps) => {
 	const roomMeta = useEventAsState(room.meta)
-	const avatarSourceID = roomMeta.lazy_load_summary?.heroes?.length === 1
-		? roomMeta.lazy_load_summary.heroes[0] : room.roomID
 	const mainScreen = use(MainScreenContext)
 	const openModal = use(ModalContext)
 	const openSettings = useCallback(() => {
@@ -50,7 +48,7 @@ const RoomViewHeader = ({ room }: RoomViewHeaderProps) => {
 		<img
 			className="avatar"
 			loading="lazy"
-			src={getAvatarURL(avatarSourceID, { avatar_url: roomMeta.avatar, displayname: roomMeta.name })}
+			src={getRoomAvatarURL(roomMeta)}
 			onClick={use(LightboxContext)}
 			alt=""
 		/>