chat/src/app/utils/matrix.ts
Ajay Bura 4c76a7fd18
URL navigation in interface and other improvements (#1633)
* load room on url change

* add direct room list

* render space room list

* fix css syntax error

* update scroll virtualizer

* render subspaces room list

* improve sidebar notification badge perf

* add nav category components

* add space recursive direct component

* use nav category component in home, direct and space room list

* add empty home and direct list layout

* fix unread room menu ref

* add more navigation items in room, direct and space tab

* add more navigation

* fix unread room menu to links

* fix space lobby and search link

* add explore navigation section

* add notifications navigation menu

* redirect to initial path after login

* include unsupported room in rooms

* move router hooks in hooks/router folder

* add featured explore - WIP

* load featured room with room summary

* fix room card topic line clamp

* add react query

* load room summary using react query

* add join button in room card

* add content component

* use content component in featured community content

* fix content width

* add responsive room card grid

* fix async callback error status

* add room card error button

* fix client drawer shrink

* add room topic viewer

* open room card topic in viewer

* fix room topic close btn

* add get orphan parent util

* add room card error dialog

* add view featured room or space btn

* refactor orphanParent to orphanParents

* WIP - explore server

* show space hint in room card

* add room type filters

* add per page item limit popout

* reset scroll on public rooms load

* refactor explore ui

* refactor public rooms component

* reset search on server change

* fix typo

* add empty featured section info

* display user server on top

* make server room card view btn clickable

* add user server as default redirect for explore path

* make home empty btn clickable

* add thirdparty instance filter in server explore

* remove since param on instance change

* add server button in explore menu

* rename notifications path to inbox

* update react-virtual

* Add notification messages inbox - WIP

* add scroll top container component

* add useInterval hook

* add visibility change callback prop to scroll top container component

* auto refresh notifications every 10 seconds

* make message related component reusable

* refactor matrix event renderer hoook

* render notification message content

* refactor matrix event renderer hook

* update sequence card styles

* move room navigate hook in global hooks

* add open message button in notifications

* add mark room as read button in notification group

* show error in notification messages

* add more featured spaces

* render reply in notification messages

* make notification message reply clickable

* add outline prop for attachments

* make old settings dialog viewable

* add open featured communities as default config option

* add invite count notification badge in sidebar and inbox menu

* add element size observer hook

* improve element size observer hook props

* improve screen size hook

* fix room avatar util function

* allow Text props in Time component

* fix dm room util function

* add invitations

* add no invites and notification cards

* fix inbox tab unread badge visible without invite count

* update folds and change inbox icon

* memo search param construction

* add message search in home

* fix default message search order

* fix display edited message new content

* highlight search text in search messages

* fix message search loading

* disable log in production

* add use space context

* add useRoom context

* fix space room list

* fix inbox tab active state

* add hook to get space child room recursive

* add search for space

* add virtual tile component

* virtualize home and directs room list

* update nav category component

* use virtual tile component in more places

* fix message highlight when click on reply twice

* virtualize space room list

* fix space room list lag issue

* update folds

* add room nav item component in space room list

* use room nav item in home and direct room list

* make space categories closable and save it in local storage

* show unread room when category is collapsed

* make home and direct room list category closable

* rename room nav item show avatar prop

* fix explore server category text alignment

* rename closedRoomCategories to closedNavCategories

* add nav category handler hook

* save and restore last navigation path on space select

* filter space rooms category by activity when it is closed

* save and restore home and direct nav path state

* save and restore inbox active path on open

* save and restore explore tab active path

* remove notification badge unread menu

* add join room or space before navigate screen

* move room component to features folder and add new room header

* update folds

* add room header menu

* fix home room list activity sorting

* do not hide selected room item on category closed in home and direct tab

* replace old select room/tab call with navigate hook

* improve state event hooks

* show room card summary for joined rooms

* prevent room from opening in wrong tab

* only show message sender id on hover in modern layout

* revert state event hooks changes

* add key prop to room provider components

* add welcome page

* prevent excessive redirects

* fix sidebar style with no spaces

* move room settings in popup window

* remove invite option from room settings

* fix open room list search

* add leave room prompt

* standardize room and user avatar

* fix avatar text size

* add new reply layout

* rename space hierarchy hook

* add room topic hook

* add room name hook

* add room avatar hook and add direct room avatar util

* space lobby - WIP

* hide invalid space child event from space hierarchy in lobby

* move lobby to features

* fix element size observer hook width and height

* add lobby header and hero section

* add hierarchy room item error and loading state

* add first and last child prop in sequence card

* redirect to lobby from index path

* memo and retry hierarchy room summary error

* fix hierarchy room item styles

* rename lobby hierarchy item card to room item card

* show direct room avatar in space lobby

* add hierarchy space item

* add space item unknown room join button

* fix space hierarchy hook refresh after new space join

* change user avatar color and fallback render to user icon

* change room avatar fallback to room icon

* rename room/user avatar renderInitial prop to renderFallback

* add room join and view button in space lobby

* make power level api more reusable

* fix space hierarchy not updating on child update

* add menu to suggest or remove space children

* show reply arrow in place of reply bend in message

* fix typeerror in search because of wrong js-sdk t.ds

* do not refetch hierarchy room summary on window focus

* make room/user avatar un-draggable

* change welcome page support button copy

* drag-and-drop ordering of lobby spaces/rooms - WIP

* add ASCIILexicalTable algorithms

* fix wrong power level check in lobby items options

* fix lobby can drop checks

* fix join button error crash

* fix reply spacing

* fix m direct updated with other account data

* add option to open room/space settings from lobby

* add option in lobby to add new or existing room/spaces

* fix room nav item selected styles

* add space children reorder mechanism

* fix space child reorder bug

* fix hierarchy item sort function

* Apply reorder of lobby into room list

* add and improve space lobby menu items

* add existing spaces menu in lobby

* change restricted room allow params when dragging outside space

* move featured servers config from homeserver list

* removed unused features from space settings

* add canonical alias as name fallback in lobby item

* fix unreliable unread count update bug

* fix after login redirect

* fix room card topic hover style

* Add dnd and folders in sidebar spaces

* fix orphan space not visible in sidebar

* fix sso login has mix of icon and button

* fix space children not  visible in home upon leaving space

* recalculate notification on updating any space child

* fix user color saturation/lightness

* add user color to user avatar

* add background colors to room avatar

* show 2 length initial in sidebar space avatar

* improve link color

* add nav button component

* open legacy create room and create direct

* improve page route structure

* handle hash router in path utils

* mobile friendly router and navigation

* make room header member drawer icon mobile friendly

* setup index redirect for inbox and explore server route

* add leave space prompt

* improve member drawer filter menu

* add space context menu

* add context menu in home

* add leave button in lobby items

* render user tab avatar on sidebar

* force overwrite netlify - test

* netlify test

* fix reset-password path without server redirected to login

* add message link copy button in message menu

* reset unread on sync prepared

* fix stuck typing notifications

* show typing indication in room nav item

* refactor closedNavCategories atom to use userId in store key

* refactor closedLobbyCategoriesAtom to include userId in store key

* refactor navToActivePathAtom to use userId in storage key

* remove unused file

* refactor openedSidebarFolderAtom to include userId in storage key

* add context menu for sidebar space tab

* fix eslint not working

* add option to pin/unpin child spaces

* add context menu for directs tab

* add context menu for direct and home tab

* show lock icon for non-public space in header

* increase matrix max listener count

* wrap lobby add space room in callback hook
2024-06-01 00:19:46 +10:00

252 lines
7.7 KiB
TypeScript

import {
EncryptedAttachmentInfo,
decryptAttachment,
encryptAttachment,
} from 'browser-encrypt-attachment';
import {
MatrixClient,
MatrixError,
MatrixEvent,
Room,
RoomMember,
UploadProgress,
UploadResponse,
} from 'matrix-js-sdk';
import { IImageInfo, IThumbnailContent, IVideoInfo } from '../../types/matrix/common';
import { AccountDataEvent } from '../../types/matrix/accountData';
export const matchMxId = (id: string): RegExpMatchArray | null =>
id.match(/^([@!$+#])(\S+):(\S+)$/);
export const validMxId = (id: string): boolean => !!matchMxId(id);
export const getMxIdServer = (userId: string): string | undefined => matchMxId(userId)?.[3];
export const getMxIdLocalPart = (userId: string): string | undefined => matchMxId(userId)?.[2];
export const isUserId = (id: string): boolean => validMxId(id) && id.startsWith('@');
export const isRoomId = (id: string): boolean => validMxId(id) && id.startsWith('!');
export const isRoomAlias = (id: string): boolean => validMxId(id) && id.startsWith('#');
export const parseMatrixToUrl = (url: string): [string | undefined, string | undefined] => {
const href = decodeURIComponent(url);
const match = href.match(/^https?:\/\/matrix.to\/#\/([@!$+#]\S+:[^\\?|^\s|^\\/]+)(\?(via=\S+))?/);
if (!match) return [undefined, undefined];
const [, g1AsMxId, , g3AsVia] = match;
return [g1AsMxId, g3AsVia];
};
export const getCanonicalAliasRoomId = (mx: MatrixClient, alias: string): string | undefined =>
mx.getRooms()?.find((room) => room.getCanonicalAlias() === alias)?.roomId;
export const getCanonicalAliasOrRoomId = (mx: MatrixClient, roomId: string): string =>
mx.getRoom(roomId)?.getCanonicalAlias() || roomId;
export const getImageInfo = (img: HTMLImageElement, fileOrBlob: File | Blob): IImageInfo => {
const info: IImageInfo = {};
info.w = img.width;
info.h = img.height;
info.mimetype = fileOrBlob.type;
info.size = fileOrBlob.size;
return info;
};
export const getVideoInfo = (video: HTMLVideoElement, fileOrBlob: File | Blob): IVideoInfo => {
const info: IVideoInfo = {};
info.duration = Number.isNaN(video.duration) ? undefined : Math.floor(video.duration * 1000);
info.w = video.videoWidth;
info.h = video.videoHeight;
info.mimetype = fileOrBlob.type;
info.size = fileOrBlob.size;
return info;
};
export const getThumbnailContent = (thumbnailInfo: {
thumbnail: File | Blob;
encInfo: EncryptedAttachmentInfo | undefined;
mxc: string;
width: number;
height: number;
}): IThumbnailContent => {
const { thumbnail, encInfo, mxc, width, height } = thumbnailInfo;
const content: IThumbnailContent = {
thumbnail_info: {
mimetype: thumbnail.type,
size: thumbnail.size,
w: width,
h: height,
},
};
if (encInfo) {
content.thumbnail_file = {
...encInfo,
url: mxc,
};
} else {
content.thumbnail_url = mxc;
}
return content;
};
export const encryptFile = async (
file: File | Blob
): Promise<{
encInfo: EncryptedAttachmentInfo;
file: File;
originalFile: File | Blob;
}> => {
const dataBuffer = await file.arrayBuffer();
const encryptedAttachment = await encryptAttachment(dataBuffer);
const encFile = new File([encryptedAttachment.data], file.name, {
type: file.type,
});
return {
encInfo: encryptedAttachment.info,
file: encFile,
originalFile: file,
};
};
export const decryptFile = async (
dataBuffer: ArrayBuffer,
type: string,
encInfo: EncryptedAttachmentInfo
): Promise<Blob> => {
const dataArray = await decryptAttachment(dataBuffer, encInfo);
const blob = new Blob([dataArray], { type });
return blob;
};
export type TUploadContent = File | Blob;
export type ContentUploadOptions = {
name?: string;
fileType?: string;
hideFilename?: boolean;
onPromise?: (promise: Promise<UploadResponse>) => void;
onProgress?: (progress: UploadProgress) => void;
onSuccess: (mxc: string) => void;
onError: (error: MatrixError) => void;
};
export const uploadContent = async (
mx: MatrixClient,
file: TUploadContent,
options: ContentUploadOptions
) => {
const { name, fileType, hideFilename, onProgress, onPromise, onSuccess, onError } = options;
const uploadPromise = mx.uploadContent(file, {
name,
type: fileType,
includeFilename: !hideFilename,
progressHandler: onProgress,
});
onPromise?.(uploadPromise);
try {
const data = await uploadPromise;
const mxc = data.content_uri;
if (mxc) onSuccess(mxc);
else onError(new MatrixError(data));
} catch (e: any) {
const error = typeof e?.message === 'string' ? e.message : undefined;
const errcode = typeof e?.name === 'string' ? e.message : undefined;
onError(new MatrixError({ error, errcode }));
}
};
export const matrixEventByRecency = (m1: MatrixEvent, m2: MatrixEvent) => m2.getTs() - m1.getTs();
export const factoryEventSentBy = (senderId: string) => (ev: MatrixEvent) =>
ev.getSender() === senderId;
export const eventWithShortcode = (ev: MatrixEvent) =>
typeof ev.getContent().shortcode === 'string';
export const getDMRoomFor = (mx: MatrixClient, userId: string): Room | undefined => {
const dmLikeRooms = mx
.getRooms()
.filter((room) => mx.isRoomEncrypted(room.roomId) && room.getMembers().length <= 2);
return dmLikeRooms.find((room) => room.getMember(userId));
};
export const guessDmRoomUserId = (room: Room, myUserId: string): string => {
const getOldestMember = (members: RoomMember[]): RoomMember | undefined => {
let oldestMemberTs: number | undefined;
let oldestMember: RoomMember | undefined;
const pickOldestMember = (member: RoomMember) => {
if (member.userId === myUserId) return;
if (
oldestMemberTs === undefined ||
(member.events.member && member.events.member.getTs() < oldestMemberTs)
) {
oldestMember = member;
oldestMemberTs = member.events.member?.getTs();
}
};
members.forEach(pickOldestMember);
return oldestMember;
};
// Pick the joined user who's been here longest (and isn't us),
const member = getOldestMember(room.getJoinedMembers());
if (member) return member.userId;
// if there are no joined members other than us, use the oldest member
const member1 = getOldestMember(room.currentState.getMembers());
return member1?.userId ?? myUserId;
};
export const addRoomIdToMDirect = async (
mx: MatrixClient,
roomId: string,
userId: string
): Promise<void> => {
const mDirectsEvent = mx.getAccountData(AccountDataEvent.Direct);
const userIdToRoomIds: Record<string, string[]> = mDirectsEvent?.getContent() ?? {};
// remove it from the lists of any others users
// (it can only be a DM room for one person)
Object.keys(userIdToRoomIds).forEach((targetUserId) => {
const roomIds = userIdToRoomIds[targetUserId];
if (targetUserId !== userId) {
const indexOfRoomId = roomIds.indexOf(roomId);
if (indexOfRoomId > -1) {
roomIds.splice(indexOfRoomId, 1);
}
}
});
const roomIds = userIdToRoomIds[userId] || [];
if (roomIds.indexOf(roomId) === -1) {
roomIds.push(roomId);
}
userIdToRoomIds[userId] = roomIds;
await mx.setAccountData(AccountDataEvent.Direct, userIdToRoomIds);
};
export const removeRoomIdFromMDirect = async (mx: MatrixClient, roomId: string): Promise<void> => {
const mDirectsEvent = mx.getAccountData(AccountDataEvent.Direct);
const userIdToRoomIds: Record<string, string[]> = mDirectsEvent?.getContent() ?? {};
Object.keys(userIdToRoomIds).forEach((targetUserId) => {
const roomIds = userIdToRoomIds[targetUserId];
const indexOfRoomId = roomIds.indexOf(roomId);
if (indexOfRoomId > -1) {
roomIds.splice(indexOfRoomId, 1);
}
});
await mx.setAccountData(AccountDataEvent.Direct, userIdToRoomIds);
};