Avatar fallback support phone numbers

web/src/api/media.ts

@@ -13,7 +13,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 { parseMXC } from "@/util/validation.ts"
+import { isPhoneNumber, parseMXC } from "@/util/validation.ts"
 import { ContentURI, RoomID, UserID, UserProfile } from "./types"
 
 export const getMediaURL = (mxc?: string, encrypted: boolean = false): string | undefined => {
@@ -74,6 +74,11 @@ function getFallbackCharacter(from: unknown, idx: number): string {
 	if (!from || typeof from !== "string" || from.length <= idx) {
 		return ""
 	}
+
+	if (isPhoneNumber(from)) {
+		return "#"
+	}
+
 	// Array.from appears to be the only way to handle Unicode correctly
 	return Array.from(from.slice(0, (idx + 1) * 2))[idx]?.toUpperCase().toWellFormed() ?? ""
 }

web/src/util/validation.ts

@@ -17,6 +17,7 @@ import { ContentURI, EventID, RoomAlias, RoomID, UserID, UserProfile } from "@/a
 
 const simpleHomeserverRegex = /^[a-zA-Z0-9.:-]+$/
 const mediaRegex = /^mxc:\/\/([a-zA-Z0-9.:-]+)\/([a-zA-Z0-9_-]+)$/
+const phoneNumberRegex = /^(?:(?:\+\d{1,4}[-.\s]?)?(?:\(?\d{1,4}\)?[-.\s]?\d{1,4}[-.\s]?\d{1,4}|\d{5,10})|\d{4,6})$/
 
 function isIdentifier<T>(identifier: unknown, sigil: string, requiresServer: boolean): identifier is T {
 	if (typeof identifier !== "string" || !identifier.startsWith(sigil)) {
@@ -38,6 +39,7 @@ export const isUserID = (userID: unknown) => isIdentifier<UserID>(userID, "@", t
 export const isRoomID = (roomID: unknown) => isIdentifier<RoomID>(roomID, "!", true)
 export const isRoomAlias = (roomAlias: unknown) => isIdentifier<RoomAlias>(roomAlias, "#", true)
 export const isMXC = (mxc: unknown): mxc is ContentURI => typeof mxc === "string" && mediaRegex.test(mxc)
+export const isPhoneNumber = (phone: unknown): boolean => typeof phone === "string" && phoneNumberRegex.test(phone)
 
 export interface ParsedMatrixURI {
 	identifier: UserID | RoomID | RoomAlias