redesigned app settings and switch to rust crypto (#1988)
* rework general settings * account settings - WIP * add missing key prop * add object url hook * extract wide modal styles * profile settings and image editor - WIP * add outline style to upload card * remove file param from bind upload atom hook * add compact variant to upload card * add compact upload card renderer * add option to update profile avatar * add option to change profile displayname * allow displayname change based on capabilities check * rearrange settings components into folders * add system notification settings * add initial page param in settings * convert account data hook to typescript * add push rule hook * add notification mode hook * add notification mode switcher component * add all messages notification settings options * add special messages notification settings * add keyword notifications * add ignored users section * improve ignore user list strings * add about settings * add access token option in about settings * add developer tools settings * add expand button to account data dev tool option * update folds * fix editable active element textarea check * do not close dialog when editable element in focus * add text area plugins * add text area intent handler hook * add newline intent mod in text area * add next line hotkey in text area intent hook * add syntax error position dom utility function * add account data editor * add button to send new account data in dev tools * improve custom emoji plugin * add more custom emojis hooks * add text util css * add word break in setting tile title and description * emojis and sticker user settings - WIP * view image packs from settings * emoji pack editing - WIP * add option to edit pack meta * change saved changes message * add image edit and delete controls * add option to upload pack images and apply changes * fix state event type when updating image pack * lazy load pack image tile img * hide upload image button when user can not edit pack * add option to add or remove global image packs * upgrade to rust crypto (#2168) * update matrix js sdk * remove dead code * use rust crypto * update setPowerLevel usage * fix types * fix deprecated isRoomEncrypted method uses * fix deprecated room.currentState uses * fix deprecated import/export room keys func * fix merge issues in image pack file * fix remaining issues in image pack file * start indexedDBStore * update package lock and vite-plugin-top-level-await * user session settings - WIP * add useAsync hook * add password stage uia * add uia flow matrix error hook * add UIA action component * add options to delete sessions * add sso uia stage * fix SSO stage complete error * encryption - WIP * update user settings encryption terminology * add default variant to password input * use password input in uia password stage * add options for local backup in user settings * remove typo in import local backup password input label * online backup - WIP * fix uia sso action * move access token settings from about to developer tools * merge encryption tab into sessions and rename it to devices * add device placeholder tile * add logout dialog * add logout button for current device * move other devices in component * render unverified device verification tile * add learn more section for current device verification * add device verification status badge * add info card component * add index file for password input component * add types for secret storage * add component to access secret storage key * manual verification - WIP * update matrix-js-sdk to v35 * add manual verification * use react query for device list * show unverified tab on sidebar * fix device list updates * add session key details to current device * render restore encryption backup * fix loading state of restore backup * fix unverified tab settings closes after verification * key backup tile - WIP * fix unverified tab badge * rename session key to device key in device tile * improve backup restore functionality * fix restore button enabled after layout reload during restoring backup * update backup info on status change * add backup disconnection failures * add device verification using sas * restore backup after verification * show option to logout on startup error screen * fix key backup hook update on decryption key cached * add option to enable device verification * add device verification reset dialog * add logout button in settings drawer * add encrypted message lost on logout * fix backup restore never finish with 0 keys * fix setup dialog hides when enabling device verification * show backup details in menu * update setup device verification body copy * replace deprecated method * fix displayname appear as mxid in settings * remove old refactored codes * fix types
This commit is contained in:
Ajay Bura
GitHub
@@ -0,0 +1,78 @@
|
||||
import { MatrixEvent } from 'matrix-js-sdk';
|
||||
import { PackAddress } from './PackAddress';
|
||||
import { PackImageReader } from './PackImageReader';
|
||||
import { PackImagesReader } from './PackImagesReader';
|
||||
import { PackMetaReader } from './PackMetaReader';
|
||||
import { ImageUsage, PackContent } from './types';
|
||||
|
||||
export class ImagePack {
|
||||
public readonly id: string;
|
||||
|
||||
public readonly deleted: boolean;
|
||||
|
||||
public readonly address: PackAddress | undefined;
|
||||
|
||||
public readonly meta: PackMetaReader;
|
||||
|
||||
public readonly images: PackImagesReader;
|
||||
|
||||
private emoticonMemo: PackImageReader[] | undefined;
|
||||
|
||||
private stickerMemo: PackImageReader[] | undefined;
|
||||
|
||||
constructor(id: string, content: PackContent, address: PackAddress | undefined) {
|
||||
this.id = id;
|
||||
|
||||
this.address = address;
|
||||
|
||||
this.deleted = content.pack === undefined && content.images === undefined;
|
||||
|
||||
this.meta = new PackMetaReader(content.pack ?? {});
|
||||
this.images = new PackImagesReader(content.images ?? {});
|
||||
}
|
||||
|
||||
static fromMatrixEvent(id: string, matrixEvent: MatrixEvent) {
|
||||
const roomId = matrixEvent.getRoomId();
|
||||
const stateKey = matrixEvent.getStateKey();
|
||||
|
||||
const address =
|
||||
roomId && typeof stateKey === 'string' ? new PackAddress(roomId, stateKey) : undefined;
|
||||
|
||||
const content = matrixEvent.getContent<PackContent>();
|
||||
|
||||
const imagePack: ImagePack = new ImagePack(id, content, address);
|
||||
|
||||
return imagePack;
|
||||
}
|
||||
|
||||
public getImages(usage: ImageUsage): PackImageReader[] {
|
||||
if (usage === ImageUsage.Emoticon && this.emoticonMemo) {
|
||||
return this.emoticonMemo;
|
||||
}
|
||||
if (usage === ImageUsage.Sticker && this.stickerMemo) {
|
||||
return this.stickerMemo;
|
||||
}
|
||||
|
||||
const images = Array.from(this.images.collection.values()).filter((image) => {
|
||||
const usg = image.usage ?? this.meta.usage;
|
||||
return usg.includes(usage);
|
||||
});
|
||||
|
||||
if (usage === ImageUsage.Emoticon) {
|
||||
this.emoticonMemo = images;
|
||||
}
|
||||
if (usage === ImageUsage.Sticker) {
|
||||
this.stickerMemo = images;
|
||||
}
|
||||
|
||||
return images;
|
||||
}
|
||||
|
||||
public getAvatarUrl(usage: ImageUsage): string | undefined {
|
||||
if (this.meta.avatar) return this.meta.avatar;
|
||||
const images = this.getImages(usage);
|
||||
const firstImage = images[0];
|
||||
if (firstImage) return firstImage.url;
|
||||
return undefined;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
export class PackAddress {
|
||||
public readonly roomId: string;
|
||||
|
||||
public readonly stateKey: string;
|
||||
|
||||
constructor(roomId: string, stateKey: string) {
|
||||
this.roomId = roomId;
|
||||
this.stateKey = stateKey;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,52 @@
|
||||
import { IImageInfo } from '../../../types/matrix/common';
|
||||
import { ImageUsage, PackImage } from './types';
|
||||
|
||||
export class PackImageReader {
|
||||
public readonly shortcode: string;
|
||||
|
||||
public readonly url: string;
|
||||
|
||||
private readonly image: Omit<PackImage, 'url'>;
|
||||
|
||||
constructor(shortcode: string, url: string, image: Omit<PackImage, 'url'>) {
|
||||
this.shortcode = shortcode;
|
||||
this.url = url;
|
||||
|
||||
this.image = image;
|
||||
}
|
||||
|
||||
static fromPackImage(shortcode: string, image: PackImage): PackImageReader | undefined {
|
||||
const { url } = image;
|
||||
|
||||
if (typeof url !== 'string') return undefined;
|
||||
|
||||
return new PackImageReader(shortcode, url, image);
|
||||
}
|
||||
|
||||
get body(): string | undefined {
|
||||
const { body } = this.image;
|
||||
return typeof body === 'string' ? body : undefined;
|
||||
}
|
||||
|
||||
get info(): IImageInfo | undefined {
|
||||
return this.image.info;
|
||||
}
|
||||
|
||||
get usage(): ImageUsage[] | undefined {
|
||||
const usg = this.image.usage;
|
||||
if (!Array.isArray(usg)) return undefined;
|
||||
|
||||
const knownUsage = usg.filter((u) => u === ImageUsage.Emoticon || u === ImageUsage.Sticker);
|
||||
|
||||
return knownUsage.length > 0 ? knownUsage : undefined;
|
||||
}
|
||||
|
||||
get content(): PackImage {
|
||||
return {
|
||||
url: this.url,
|
||||
body: this.image.body,
|
||||
usage: this.image.usage,
|
||||
info: this.image.info,
|
||||
};
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
import { PackImageReader } from './PackImageReader';
|
||||
import { PackImages } from './types';
|
||||
|
||||
export class PackImagesReader {
|
||||
private readonly rawImages: PackImages;
|
||||
|
||||
private shortcodeToImages: Map<string, PackImageReader> | undefined;
|
||||
|
||||
constructor(images: PackImages) {
|
||||
this.rawImages = images;
|
||||
}
|
||||
|
||||
get collection(): Map<string, PackImageReader> {
|
||||
if (this.shortcodeToImages) return this.shortcodeToImages;
|
||||
|
||||
const shortcodeToImages: Map<string, PackImageReader> = new Map();
|
||||
|
||||
Object.entries(this.rawImages).forEach(([shortcode, image]) => {
|
||||
const imageReader = PackImageReader.fromPackImage(shortcode, image);
|
||||
if (imageReader) {
|
||||
shortcodeToImages.set(shortcode, imageReader);
|
||||
}
|
||||
});
|
||||
|
||||
this.shortcodeToImages = shortcodeToImages;
|
||||
return this.shortcodeToImages;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,45 @@
|
||||
import { PackMeta, ImageUsage } from './types';
|
||||
|
||||
export class PackMetaReader {
|
||||
private readonly meta: PackMeta;
|
||||
|
||||
public readonly fallbackUsage: ImageUsage[] = [ImageUsage.Emoticon, ImageUsage.Sticker];
|
||||
|
||||
constructor(meta: PackMeta) {
|
||||
this.meta = meta;
|
||||
}
|
||||
|
||||
get name(): string | undefined {
|
||||
const displayName = this.meta.display_name;
|
||||
if (typeof displayName === 'string') return displayName;
|
||||
return undefined;
|
||||
}
|
||||
|
||||
get avatar(): string | undefined {
|
||||
const avatarURL = this.meta.avatar_url;
|
||||
if (typeof avatarURL === 'string') return avatarURL;
|
||||
return undefined;
|
||||
}
|
||||
|
||||
get attribution(): string | undefined {
|
||||
const { attribution } = this.meta;
|
||||
if (typeof this.meta.attribution === 'string') return attribution;
|
||||
return undefined;
|
||||
}
|
||||
|
||||
get usage(): ImageUsage[] {
|
||||
if (!Array.isArray(this.meta.usage)) return this.fallbackUsage;
|
||||
|
||||
const knownUsage = this.meta.usage.filter(
|
||||
(u) => u === ImageUsage.Emoticon || u === ImageUsage.Sticker
|
||||
);
|
||||
|
||||
if (knownUsage.length === 0) return this.fallbackUsage;
|
||||
|
||||
return knownUsage;
|
||||
}
|
||||
|
||||
get content(): PackMeta {
|
||||
return this.meta;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
export * from './PackAddress';
|
||||
export * from './PackMetaReader';
|
||||
export * from './PackImageReader';
|
||||
export * from './PackImagesReader';
|
||||
export * from './ImagePack';
|
||||
export * from './types';
|
||||
export * from './utils';
|
||||
@@ -0,0 +1,41 @@
|
||||
import { IImageInfo } from '../../../types/matrix/common';
|
||||
|
||||
// https://github.com/Sorunome/matrix-doc/blob/soru/emotes/proposals/2545-emotes.md
|
||||
|
||||
/**
|
||||
* im.ponies.emote_rooms content
|
||||
*/
|
||||
export type PackStateKeyToObject = Record<string, object>;
|
||||
export type RoomIdToStateKey = Record<string, PackStateKeyToObject>;
|
||||
export type EmoteRoomsContent = {
|
||||
rooms?: RoomIdToStateKey;
|
||||
};
|
||||
|
||||
/**
|
||||
* Pack
|
||||
*/
|
||||
export enum ImageUsage {
|
||||
Emoticon = 'emoticon',
|
||||
Sticker = 'sticker',
|
||||
}
|
||||
|
||||
export type PackImage = {
|
||||
url: string;
|
||||
body?: string;
|
||||
usage?: ImageUsage[];
|
||||
info?: IImageInfo;
|
||||
};
|
||||
|
||||
export type PackImages = Record<string, PackImage>;
|
||||
|
||||
export type PackMeta = {
|
||||
display_name?: string;
|
||||
avatar_url?: string;
|
||||
attribution?: string;
|
||||
usage?: ImageUsage[];
|
||||
};
|
||||
|
||||
export type PackContent = {
|
||||
pack?: PackMeta;
|
||||
images?: PackImages;
|
||||
};
|
||||
@@ -0,0 +1,88 @@
|
||||
import { MatrixClient, MatrixEvent, Room } from 'matrix-js-sdk';
|
||||
import { ImagePack } from './ImagePack';
|
||||
import { EmoteRoomsContent, ImageUsage } from './types';
|
||||
import { StateEvent } from '../../../types/matrix/room';
|
||||
import { getAccountData, getStateEvent, getStateEvents } from '../../utils/room';
|
||||
import { AccountDataEvent } from '../../../types/matrix/accountData';
|
||||
import { PackMetaReader } from './PackMetaReader';
|
||||
import { PackAddress } from './PackAddress';
|
||||
|
||||
export function packAddressEqual(a1?: PackAddress, a2?: PackAddress): boolean {
|
||||
if (!a1 && !a2) return true;
|
||||
if (!a1 || !a2) return false;
|
||||
return a1.roomId === a2.roomId && a1.stateKey === a2.stateKey;
|
||||
}
|
||||
|
||||
export function imageUsageEqual(u1: ImageUsage[], u2: ImageUsage[]) {
|
||||
return u1.length === u2.length && u1.every((u) => u2.includes(u));
|
||||
}
|
||||
|
||||
export function packMetaEqual(a: PackMetaReader, b: PackMetaReader): boolean {
|
||||
return (
|
||||
a.name === b.name &&
|
||||
a.avatar === b.avatar &&
|
||||
a.attribution === b.attribution &&
|
||||
imageUsageEqual(a.usage, b.usage)
|
||||
);
|
||||
}
|
||||
|
||||
export function makeImagePacks(packEvents: MatrixEvent[]): ImagePack[] {
|
||||
return packEvents.reduce<ImagePack[]>((imagePacks, packEvent) => {
|
||||
const packId = packEvent.getId();
|
||||
if (!packId) return imagePacks;
|
||||
imagePacks.push(ImagePack.fromMatrixEvent(packId, packEvent));
|
||||
return imagePacks;
|
||||
}, []);
|
||||
}
|
||||
|
||||
export function getRoomImagePack(room: Room, stateKey: string): ImagePack | undefined {
|
||||
const packEvent = getStateEvent(room, StateEvent.PoniesRoomEmotes, stateKey);
|
||||
if (!packEvent) return undefined;
|
||||
const packId = packEvent.getId();
|
||||
if (!packId) return undefined;
|
||||
return ImagePack.fromMatrixEvent(packId, packEvent);
|
||||
}
|
||||
|
||||
export function getRoomImagePacks(room: Room): ImagePack[] {
|
||||
const packEvents = getStateEvents(room, StateEvent.PoniesRoomEmotes);
|
||||
return makeImagePacks(packEvents);
|
||||
}
|
||||
|
||||
export function getGlobalImagePacks(mx: MatrixClient): ImagePack[] {
|
||||
const emoteRoomsContent = getAccountData(mx, AccountDataEvent.PoniesEmoteRooms)?.getContent() as
|
||||
| EmoteRoomsContent
|
||||
| undefined;
|
||||
if (typeof emoteRoomsContent !== 'object') return [];
|
||||
|
||||
const { rooms: roomIdToPackInfo } = emoteRoomsContent;
|
||||
if (typeof roomIdToPackInfo !== 'object') return [];
|
||||
|
||||
const roomIds = Object.keys(roomIdToPackInfo);
|
||||
|
||||
const packs = roomIds.flatMap((roomId) => {
|
||||
if (typeof roomIdToPackInfo[roomId] !== 'object') return [];
|
||||
const room = mx.getRoom(roomId);
|
||||
if (!room) return [];
|
||||
const packStateKeyToUnknown = roomIdToPackInfo[roomId];
|
||||
const packEvents = getStateEvents(room, StateEvent.PoniesRoomEmotes);
|
||||
const globalPackEvents = packEvents.filter((mE) => {
|
||||
const stateKey = mE.getStateKey();
|
||||
if (typeof stateKey === 'string') return !!packStateKeyToUnknown[stateKey];
|
||||
return false;
|
||||
});
|
||||
return makeImagePacks(globalPackEvents);
|
||||
});
|
||||
|
||||
return packs;
|
||||
}
|
||||
|
||||
export function getUserImagePack(mx: MatrixClient): ImagePack | undefined {
|
||||
const packEvent = getAccountData(mx, AccountDataEvent.PoniesUserEmotes);
|
||||
const userId = mx.getUserId();
|
||||
if (!packEvent || !userId) {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
const userImagePack = ImagePack.fromMatrixEvent(userId, packEvent);
|
||||
return userImagePack;
|
||||
}
|
||||
Reference in New Issue
Block a user