imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge remote-tracking branch 'origin/develop' into feat/add-formating-buttons-to-wysiwyg

Browse source
This commit is contained in:
Florian Duros 2022-10-13 12:42:21 +02:00
commit f85f53248b
No known key found for this signature in database
GPG key ID: 9700AA5870258A0B
128 changed files with 4303 additions and 1024 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/AddThreepid.ts
View file

@ -85,7 +85,7 @@ export default class AddThreepid {
const identityAccessToken = await authClient.getAccessToken();
return MatrixClientPeg.get().requestEmailToken(
emailAddress, this.clientSecret, 1,
undefined, undefined, identityAccessToken,
undefined, identityAccessToken,
).then((res) => {
this.sessionId = res.sid;
return res;
@ -142,7 +142,7 @@ export default class AddThreepid {
const identityAccessToken = await authClient.getAccessToken();
return MatrixClientPeg.get().requestMsisdnToken(
phoneCountry, phoneNumber, this.clientSecret, 1,
undefined, undefined, identityAccessToken,
undefined, identityAccessToken,
).then((res) => {
this.sessionId = res.sid;
return res;

293
src/ContentMessages.ts
View file

@ -17,16 +17,16 @@ limitations under the License.
*/
import { MatrixClient } from "matrix-js-sdk/src/client";
import { IUploadOpts } from "matrix-js-sdk/src/@types/requests";
import { MsgType } from "matrix-js-sdk/src/@types/event";
import encrypt from "matrix-encrypt-attachment";
import extractPngChunks from "png-chunks-extract";
import { IAbortablePromise, IImageInfo } from "matrix-js-sdk/src/@types/partials";
import { IImageInfo } from "matrix-js-sdk/src/@types/partials";
import { logger } from "matrix-js-sdk/src/logger";
import { IEventRelation, ISendEventResponse, MatrixError, MatrixEvent } from "matrix-js-sdk/src/matrix";
import { IEventRelation, ISendEventResponse, MatrixEvent, UploadOpts, UploadProgress } from "matrix-js-sdk/src/matrix";
import { THREAD_RELATION_TYPE } from "matrix-js-sdk/src/models/thread";
import { removeElement } from "matrix-js-sdk/src/utils";
import { IEncryptedFile, IMediaEventInfo } from "./customisations/models/IMediaEventContent";
import { IEncryptedFile, IMediaEventContent, IMediaEventInfo } from "./customisations/models/IMediaEventContent";
import dis from './dispatcher/dispatcher';
import { _t } from './languageHandler';
import Modal from './Modal';
@ -39,7 +39,7 @@ import {
UploadProgressPayload,
UploadStartedPayload,
} from "./dispatcher/payloads/UploadPayload";
import { IUpload } from "./models/IUpload";
import { RoomUpload } from "./models/RoomUpload";
import SettingsStore from "./settings/SettingsStore";
import { decorateStartSendingTime, sendRoundTripMetric } from "./sendTimePerformanceMetrics";
import { TimelineRenderingType } from "./contexts/RoomContext";
@ -62,14 +62,6 @@ interface IMediaConfig {
"m.upload.size"?: number;
}
interface IContent {
body: string;
msgtype: string;
info: IMediaEventInfo;
file?: string;
url?: string;
}
/**
* Load a file into a newly created image element.
*
@ -78,7 +70,7 @@ interface IContent {
*/
async function loadImageElement(imageFile: File) {
// Load the file into an html element
const img = document.createElement("img");
const img = new Image();
const objectUrl = URL.createObjectURL(imageFile);
const imgPromise = new Promise((resolve, reject) => {
img.onload = function() {
@ -93,7 +85,7 @@ async function loadImageElement(imageFile: File) {
// check for hi-dpi PNGs and fudge display resolution as needed.
// this is mainly needed for macOS screencaps
let parsePromise;
let parsePromise: Promise<boolean>;
if (imageFile.type === "image/png") {
// in practice macOS happens to order the chunks so they fall in
// the first 0x1000 bytes (thanks to a massive ICC header).
@ -277,71 +269,58 @@ function readFileAsArrayBuffer(file: File | Blob): Promise<ArrayBuffer> {
* @param {File} file The file to upload.
* @param {Function?} progressHandler optional callback to be called when a chunk of
* data is uploaded.
* @param {AbortController?} controller optional abortController to use for this upload.
* @return {Promise} A promise that resolves with an object.
* If the file is unencrypted then the object will have a "url" key.
* If the file is encrypted then the object will have a "file" key.
*/
export function uploadFile(
export async function uploadFile(
matrixClient: MatrixClient,
roomId: string,
file: File | Blob,
progressHandler?: IUploadOpts["progressHandler"],
): IAbortablePromise<{ url?: string, file?: IEncryptedFile }> {
let canceled = false;
progressHandler?: UploadOpts["progressHandler"],
controller?: AbortController,
): Promise<{ url?: string, file?: IEncryptedFile }> {
const abortController = controller ?? new AbortController();
// If the room is encrypted then encrypt the file before uploading it.
if (matrixClient.isRoomEncrypted(roomId)) {
// If the room is encrypted then encrypt the file before uploading it.
// First read the file into memory.
let uploadPromise: IAbortablePromise<string>;
const prom = readFileAsArrayBuffer(file).then(function(data) {
if (canceled) throw new UploadCanceledError();
// Then encrypt the file.
return encrypt.encryptAttachment(data);
}).then(function(encryptResult) {
if (canceled) throw new UploadCanceledError();
const data = await readFileAsArrayBuffer(file);
if (abortController.signal.aborted) throw new UploadCanceledError();
// Pass the encrypted data as a Blob to the uploader.
const blob = new Blob([encryptResult.data]);
uploadPromise = matrixClient.uploadContent(blob, {
progressHandler,
includeFilename: false,
});
// Then encrypt the file.
const encryptResult = await encrypt.encryptAttachment(data);
if (abortController.signal.aborted) throw new UploadCanceledError();
return uploadPromise.then(url => {
if (canceled) throw new UploadCanceledError();
// Pass the encrypted data as a Blob to the uploader.
const blob = new Blob([encryptResult.data]);
// If the attachment is encrypted then bundle the URL along
// with the information needed to decrypt the attachment and
// add it under a file key.
return {
file: {
...encryptResult.info,
url,
},
};
});
}) as IAbortablePromise<{ file: IEncryptedFile }>;
prom.abort = () => {
canceled = true;
if (uploadPromise) matrixClient.cancelUpload(uploadPromise);
const { content_uri: url } = await matrixClient.uploadContent(blob, {
progressHandler,
abortController,
includeFilename: false,
});
if (abortController.signal.aborted) throw new UploadCanceledError();
// If the attachment is encrypted then bundle the URL along with the information
// needed to decrypt the attachment and add it under a file key.
return {
file: {
...encryptResult.info,
url,
} as IEncryptedFile,
};
return prom;
} else {
const basePromise = matrixClient.uploadContent(file, { progressHandler });
const promise1 = basePromise.then(function(url) {
if (canceled) throw new UploadCanceledError();
// If the attachment isn't encrypted then include the URL directly.
return { url };
}) as IAbortablePromise<{ url: string }>;
promise1.abort = () => {
canceled = true;
matrixClient.cancelUpload(basePromise);
};
return promise1;
const { content_uri: url } = await matrixClient.uploadContent(file, { progressHandler, abortController });
if (abortController.signal.aborted) throw new UploadCanceledError();
// If the attachment isn't encrypted then include the URL directly.
return { url };
}
}
export default class ContentMessages {
private inprogress: IUpload[] = [];
private inprogress: RoomUpload[] = [];
private mediaConfig: IMediaConfig = null;
public sendStickerContentToRoom(
@ -460,36 +439,33 @@ export default class ContentMessages {
});
}
public getCurrentUploads(relation?: IEventRelation): IUpload[] {
return this.inprogress.filter(upload => {
const noRelation = !relation && !upload.relation;
const matchingRelation = relation && upload.relation
&& relation.rel_type === upload.relation.rel_type
&& relation.event_id === upload.relation.event_id;
public getCurrentUploads(relation?: IEventRelation): RoomUpload[] {
return this.inprogress.filter(roomUpload => {
const noRelation = !relation && !roomUpload.relation;
const matchingRelation = relation && roomUpload.relation
&& relation.rel_type === roomUpload.relation.rel_type
&& relation.event_id === roomUpload.relation.event_id;
return (noRelation || matchingRelation) && !upload.canceled;
return (noRelation || matchingRelation) && !roomUpload.cancelled;
});
}
public cancelUpload(promise: IAbortablePromise<any>, matrixClient: MatrixClient): void {
const upload = this.inprogress.find(item => item.promise === promise);
if (upload) {
upload.canceled = true;
matrixClient.cancelUpload(upload.promise);
dis.dispatch<UploadCanceledPayload>({ action: Action.UploadCanceled, upload });
}
public cancelUpload(upload: RoomUpload): void {
upload.abort();
dis.dispatch<UploadCanceledPayload>({ action: Action.UploadCanceled, upload });
}
private sendContentToRoom(
public async sendContentToRoom(
file: File,
roomId: string,
relation: IEventRelation | undefined,
matrixClient: MatrixClient,
replyToEvent: MatrixEvent | undefined,
promBefore: Promise<any>,
promBefore?: Promise<any>,
) {
const content: Omit<IContent, "info"> & { info: Partial<IMediaEventInfo> } = {
body: file.name || 'Attachment',
const fileName = file.name || _t("Attachment");
const content: Omit<IMediaEventContent, "info"> & { info: Partial<IMediaEventInfo> } = {
body: fileName,
info: {
size: file.size,
},
@ -512,91 +488,72 @@ export default class ContentMessages {
content.info.mimetype = file.type;
}
const prom = new Promise<void>((resolve) => {
if (file.type.indexOf('image/') === 0) {
content.msgtype = MsgType.Image;
infoForImageFile(matrixClient, roomId, file).then((imageInfo) => {
Object.assign(content.info, imageInfo);
resolve();
}, (e) => {
// Failed to thumbnail, fall back to uploading an m.file
logger.error(e);
content.msgtype = MsgType.File;
resolve();
});
} else if (file.type.indexOf('audio/') === 0) {
content.msgtype = MsgType.Audio;
resolve();
} else if (file.type.indexOf('video/') === 0) {
content.msgtype = MsgType.Video;
infoForVideoFile(matrixClient, roomId, file).then((videoInfo) => {
Object.assign(content.info, videoInfo);
resolve();
}, (e) => {
// Failed to thumbnail, fall back to uploading an m.file
logger.error(e);
content.msgtype = MsgType.File;
resolve();
});
} else {
content.msgtype = MsgType.File;
resolve();
}
}) as IAbortablePromise<void>;
// create temporary abort handler for before the actual upload gets passed off to js-sdk
prom.abort = () => {
upload.canceled = true;
};
const upload: IUpload = {
fileName: file.name || 'Attachment',
roomId,
relation,
total: file.size,
loaded: 0,
promise: prom,
};
const upload = new RoomUpload(roomId, fileName, relation, file.size);
this.inprogress.push(upload);
dis.dispatch<UploadStartedPayload>({ action: Action.UploadStarted, upload });
function onProgress(ev) {
upload.total = ev.total;
upload.loaded = ev.loaded;
function onProgress(progress: UploadProgress) {
upload.onProgress(progress);
dis.dispatch<UploadProgressPayload>({ action: Action.UploadProgress, upload });
}
let error: MatrixError;
return prom.then(() => {
if (upload.canceled) throw new UploadCanceledError();
// XXX: upload.promise must be the promise that
// is returned by uploadFile as it has an abort()
// method hacked onto it.
upload.promise = uploadFile(matrixClient, roomId, file, onProgress);
return upload.promise.then(function(result) {
content.file = result.file;
content.url = result.url;
});
}).then(() => {
// Await previous message being sent into the room
return promBefore;
}).then(function() {
if (upload.canceled) throw new UploadCanceledError();
const threadId = relation?.rel_type === THREAD_RELATION_TYPE.name
? relation.event_id
: null;
const prom = matrixClient.sendMessage(roomId, threadId, content);
if (SettingsStore.getValue("Performance.addSendMessageTimingMetadata")) {
prom.then(resp => {
sendRoundTripMetric(matrixClient, roomId, resp.event_id);
});
try {
if (file.type.startsWith('image/')) {
content.msgtype = MsgType.Image;
try {
const imageInfo = await infoForImageFile(matrixClient, roomId, file);
Object.assign(content.info, imageInfo);
} catch (e) {
// Failed to thumbnail, fall back to uploading an m.file
logger.error(e);
content.msgtype = MsgType.File;
}
} else if (file.type.indexOf('audio/') === 0) {
content.msgtype = MsgType.Audio;
} else if (file.type.indexOf('video/') === 0) {
content.msgtype = MsgType.Video;
try {
const videoInfo = await infoForVideoFile(matrixClient, roomId, file);
Object.assign(content.info, videoInfo);
} catch (e) {
// Failed to thumbnail, fall back to uploading an m.file
logger.error(e);
content.msgtype = MsgType.File;
}
} else {
content.msgtype = MsgType.File;
}
return prom;
}, function(err: MatrixError) {
error = err;
if (!upload.canceled) {
if (upload.cancelled) throw new UploadCanceledError();
const result = await uploadFile(matrixClient, roomId, file, onProgress, upload.abortController);
content.file = result.file;
content.url = result.url;
if (upload.cancelled) throw new UploadCanceledError();
// Await previous message being sent into the room
if (promBefore) await promBefore;
if (upload.cancelled) throw new UploadCanceledError();
const threadId = relation?.rel_type === THREAD_RELATION_TYPE.name ? relation.event_id : null;
const response = await matrixClient.sendMessage(roomId, threadId, content);
if (SettingsStore.getValue("Performance.addSendMessageTimingMetadata")) {
sendRoundTripMetric(matrixClient, roomId, response.event_id);
}
dis.dispatch<UploadFinishedPayload>({ action: Action.UploadFinished, upload });
dis.dispatch({ action: 'message_sent' });
} catch (error) {
// 413: File was too big or upset the server in some way:
// clear the media size limit so we fetch it again next time we try to upload
if (error?.httpStatus === 413) {
this.mediaConfig = null;
}
if (!upload.cancelled) {
let desc = _t("The file '%(fileName)s' failed to upload.", { fileName: upload.fileName });
if (err.httpStatus === 413) {
if (error.httpStatus === 413) {
desc = _t(
"The file '%(fileName)s' exceeds this homeserver's size limit for uploads",
{ fileName: upload.fileName },
@ -606,27 +563,11 @@ export default class ContentMessages {
title: _t('Upload Failed'),
description: desc,
});
}
}).finally(() => {
for (let i = 0; i < this.inprogress.length; ++i) {
if (this.inprogress[i].promise === upload.promise) {
this.inprogress.splice(i, 1);
break;
}
}
if (error) {
// 413: File was too big or upset the server in some way:
// clear the media size limit so we fetch it again next time
// we try to upload
if (error?.httpStatus === 413) {
this.mediaConfig = null;
}
dis.dispatch<UploadErrorPayload>({ action: Action.UploadFailed, upload, error });
} else {
dis.dispatch<UploadFinishedPayload>({ action: Action.UploadFinished, upload });
dis.dispatch({ action: 'message_sent' });
}
});
} finally {
removeElement(this.inprogress, e => e.promise === upload.promise);
}
}
private isFileSizeAcceptable(file: File) {

8
src/IConfigOptions.ts
View file

@ -141,9 +141,6 @@ export interface IConfigOptions {
servers: string[];
};
piwik?: false | {
policy_url: string; // deprecated in favour of `privacy_policy_url` at root instead
};
posthog?: {
project_api_key: string;
api_host: string; // hostname
@ -181,6 +178,11 @@ export interface IConfigOptions {
sync_timeline_limit?: number;
dangerously_allow_unsafe_and_insecure_passwords?: boolean; // developer option
voice_broadcast?: {
// length per voice chunk in seconds
chunk_length?: number;
};
}
export interface ISsoRedirectOptions {

2
src/Lifecycle.ts
View file

@ -739,7 +739,7 @@ export function logout(): void {
_isLoggingOut = true;
const client = MatrixClientPeg.get();
PlatformPeg.get().destroyPickleKey(client.getUserId(), client.getDeviceId());
client.logout(undefined, true).then(onLoggedOut, (err) => {
client.logout(true).then(onLoggedOut, (err) => {
// Just throwing an error here is going to be very unhelpful
// if you're trying to log out because your server's down and
// you want to log into a different server, so just forget the

2
src/Login.ts
View file

@ -169,7 +169,7 @@ export default class Login {
* @param {string} loginType the type of login to do
* @param {ILoginParams} loginParams the parameters for the login
*
* @returns {MatrixClientCreds}
* @returns {IMatrixClientCreds}
*/
export async function sendLoginRequest(
hsUrl: string,

1
src/Notifier.ts
View file

@ -431,6 +431,7 @@ export const Notifier = {
const room = MatrixClientPeg.get().getRoom(roomId);
const actions = MatrixClientPeg.get().getPushActionsForEvent(ev);
if (actions?.notify) {
this._performCustomEventHandling(ev);

158
src/ScalarAuthClient.ts
View file

@ -15,10 +15,10 @@ limitations under the License.
*/
import url from 'url';
import request from "browser-request";
import { SERVICE_TYPES } from "matrix-js-sdk/src/service-types";
import { Room } from "matrix-js-sdk/src/models/room";
import { logger } from "matrix-js-sdk/src/logger";
import { IOpenIDToken } from 'matrix-js-sdk/src/matrix';
import SettingsStore from "./settings/SettingsStore";
import { Service, startTermsFlow, TermsInteractionCallback, TermsNotSignedError } from './Terms';
@ -103,29 +103,29 @@ export default class ScalarAuthClient {
}
}
private getAccountName(token: string): Promise<string> {
const url = this.apiUrl + "/account";
private async getAccountName(token: string): Promise<string> {
const url = new URL(this.apiUrl + "/account");
url.searchParams.set("scalar_token", token);
url.searchParams.set("v", imApiVersion);
return new Promise(function(resolve, reject) {
request({
method: "GET",
uri: url,
qs: { scalar_token: token, v: imApiVersion },
json: true,
}, (err, response, body) => {
if (err) {
reject(err);
} else if (body && body.errcode === 'M_TERMS_NOT_SIGNED') {
reject(new TermsNotSignedError());
} else if (response.statusCode / 100 !== 2) {
reject(body);
} else if (!body || !body.user_id) {
reject(new Error("Missing user_id in response"));
} else {
resolve(body.user_id);
}
});
const res = await fetch(url, {
method: "GET",
});
const body = await res.json();
if (body?.errcode === "M_TERMS_NOT_SIGNED") {
throw new TermsNotSignedError();
}
if (!res.ok) {
throw body;
}
if (!body?.user_id) {
throw new Error("Missing user_id in response");
}
return body.user_id;
}
private checkToken(token: string): Promise<string> {
@ -183,56 +183,41 @@ export default class ScalarAuthClient {
});
}
exchangeForScalarToken(openidTokenObject: any): Promise<string> {
const scalarRestUrl = this.apiUrl;
public async exchangeForScalarToken(openidTokenObject: IOpenIDToken): Promise<string> {
const scalarRestUrl = new URL(this.apiUrl + "/register");
scalarRestUrl.searchParams.set("v", imApiVersion);
return new Promise(function(resolve, reject) {
request({
method: 'POST',
uri: scalarRestUrl + '/register',
qs: { v: imApiVersion },
body: openidTokenObject,
json: true,
}, (err, response, body) => {
if (err) {
reject(err);
} else if (response.statusCode / 100 !== 2) {
reject(new Error(`Scalar request failed: ${response.statusCode}`));
} else if (!body || !body.scalar_token) {
reject(new Error("Missing scalar_token in response"));
} else {
resolve(body.scalar_token);
}
});
const res = await fetch(scalarRestUrl, {
method: "POST",
body: JSON.stringify(openidTokenObject),
});
if (!res.ok) {
throw new Error(`Scalar request failed: ${res.status}`);
}
const body = await res.json();
if (!body?.scalar_token) {
throw new Error("Missing scalar_token in response");
}
return body.scalar_token;
}
getScalarPageTitle(url: string): Promise<string> {
let scalarPageLookupUrl = this.apiUrl + '/widgets/title_lookup';
scalarPageLookupUrl = this.getStarterLink(scalarPageLookupUrl);
scalarPageLookupUrl += '&curl=' + encodeURIComponent(url);
public async getScalarPageTitle(url: string): Promise<string> {
const scalarPageLookupUrl = new URL(this.getStarterLink(this.apiUrl + '/widgets/title_lookup'));
scalarPageLookupUrl.searchParams.set("curl", encodeURIComponent(url));
return new Promise(function(resolve, reject) {
request({
method: 'GET',
uri: scalarPageLookupUrl,
json: true,
}, (err, response, body) => {
if (err) {
reject(err);
} else if (response.statusCode / 100 !== 2) {
reject(new Error(`Scalar request failed: ${response.statusCode}`));
} else if (!body) {
reject(new Error("Missing page title in response"));
} else {
let title = "";
if (body.page_title_cache_item && body.page_title_cache_item.cached_title) {
title = body.page_title_cache_item.cached_title;
}
resolve(title);
}
});
const res = await fetch(scalarPageLookupUrl, {
method: "GET",
});
if (!res.ok) {
throw new Error(`Scalar request failed: ${res.status}`);
}
const body = await res.json();
return body?.page_title_cache_item?.cached_title;
}
/**
@ -243,31 +228,24 @@ export default class ScalarAuthClient {
* @param {string} widgetId The widget ID to disable assets for
* @return {Promise} Resolves on completion
*/
disableWidgetAssets(widgetType: WidgetType, widgetId: string): Promise<void> {
let url = this.apiUrl + '/widgets/set_assets_state';
url = this.getStarterLink(url);
return new Promise<void>((resolve, reject) => {
request({
method: 'GET', // XXX: Actions shouldn't be GET requests
uri: url,
json: true,
qs: {
'widget_type': widgetType.preferred,
'widget_id': widgetId,
'state': 'disable',
},
}, (err, response, body) => {
if (err) {
reject(err);
} else if (response.statusCode / 100 !== 2) {
reject(new Error(`Scalar request failed: ${response.statusCode}`));
} else if (!body) {
reject(new Error("Failed to set widget assets state"));
} else {
resolve();
}
});
public async disableWidgetAssets(widgetType: WidgetType, widgetId: string): Promise<void> {
const url = new URL(this.getStarterLink(this.apiUrl + "/widgets/set_assets_state"));
url.searchParams.set("widget_type", widgetType.preferred);
url.searchParams.set("widget_id", widgetId);
url.searchParams.set("state", "disable");
const res = await fetch(url, {
method: "GET", // XXX: Actions shouldn't be GET requests
});
if (!res.ok) {
throw new Error(`Scalar request failed: ${res.status}`);
}
const body = await res.text();
if (!body) {
throw new Error("Failed to set widget assets state");
}
}
getScalarInterfaceUrlForRoom(room: Room, screen: string, id: string): string {

3
src/SdkConfig.ts
View file

@ -46,6 +46,9 @@ export const DEFAULTS: IConfigOptions = {
logo: require("../res/img/element-desktop-logo.svg").default,
url: "https://element.io/get-started",
},
voice_broadcast: {
chunk_length: 60 * 1000, // one minute
},
};
export default class SdkConfig {

7
src/SlashCommands.tsx
View file

@ -1104,12 +1104,13 @@ export const Commands = [
MatrixClientPeg.get().forceDiscardSession(roomId);
// noinspection JSIgnoredPromiseFromCall
MatrixClientPeg.get().crypto.ensureOlmSessionsForUsers(room.getMembers().map(m => m.userId), true);
return success(room.getEncryptionTargetMembers().then(members => {
// noinspection JSIgnoredPromiseFromCall
MatrixClientPeg.get().crypto.ensureOlmSessionsForUsers(members.map(m => m.userId), true);
}));
} catch (e) {
return reject(e.message);
}
return success();
},
category: CommandCategories.advanced,
renderingTypes: [TimelineRenderingType.Room],

16
src/voice-broadcast/utils/index.ts → src/actions/handlers/viewUserDeviceSettings.ts
View file

@ -14,5 +14,17 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
export * from "./shouldDisplayAsVoiceBroadcastTile";
export * from "./startNewVoiceBroadcastRecording";
import { UserTab } from "../../components/views/dialogs/UserTab";
import { Action } from "../../dispatcher/actions";
import defaultDispatcher from "../../dispatcher/dispatcher";
/**
* Redirect to the correct device manager section
* Based on the labs setting
*/
export const viewUserDeviceSettings = (isNewDeviceManagerEnabled: boolean) => {
defaultDispatcher.dispatch({
action: Action.ViewUserSettings,
initialTabId: isNewDeviceManagerEnabled ? UserTab.SessionManager : UserTab.Security,
});
};

11
src/audio/VoiceRecording.ts
View file

@ -203,9 +203,7 @@ export class VoiceRecording extends EventEmitter implements IDestroyable {
// In testing, recorder time and worker time lag by about 400ms, which is roughly the
// time needed to encode a sample/frame.
//
// Ref for recorderSeconds: https://github.com/chris-rudmin/opus-recorder#instance-fields
const recorderSeconds = this.recorder.encodedSamplePosition / 48000;
const secondsLeft = TARGET_MAX_LENGTH - recorderSeconds;
const secondsLeft = TARGET_MAX_LENGTH - this.recorderSeconds;
if (secondsLeft < 0) { // go over to make sure we definitely capture that last frame
// noinspection JSIgnoredPromiseFromCall - we aren't concerned with it overlapping
this.stop();
@ -217,6 +215,13 @@ export class VoiceRecording extends EventEmitter implements IDestroyable {
}
};
/**
* {@link https://github.com/chris-rudmin/opus-recorder#instance-fields ref for recorderSeconds}
*/
public get recorderSeconds() {
return this.recorder.encodedSamplePosition / 48000;
}
public async start(): Promise<void> {
if (this.recording) {
throw new Error("Recording already in progress");

2
src/components/atoms/Icon.tsx
View file

@ -29,6 +29,7 @@ const iconTypeMap = new Map([
export enum IconColour {
Accent = "accent",
LiveBadge = "live-badge",
CompoundSecondaryContent = "compound-secondary-content",
}
export enum IconSize {
@ -55,6 +56,7 @@ export const Icon: React.FC<IconProps> = ({
const styles: React.CSSProperties = {
maskImage: `url("${iconTypeMap.get(type)}")`,
WebkitMaskImage: `url("${iconTypeMap.get(type)}")`,
};
return (

7
src/components/structures/ContextMenu.tsx
View file

@ -92,6 +92,9 @@ export interface IProps extends IPosition {
// within an existing FocusLock e.g inside a modal.
focusLock?: boolean;
// call onFinished on any interaction with the menu
closeOnInteraction?: boolean;
// Function to be called on menu close
onFinished();
// on resize callback
@ -186,6 +189,10 @@ export default class ContextMenu extends React.PureComponent<IProps, IState> {
private onClick = (ev: React.MouseEvent) => {
// Don't allow clicks to escape the context menu wrapper
ev.stopPropagation();
if (this.props.closeOnInteraction) {
this.props.onFinished?.();
}
};
// We now only handle closing the ContextMenu in this keyDown handler.

60
src/components/structures/EmbeddedPage.tsx
View file

@ -17,7 +17,6 @@ limitations under the License.
*/
import React from 'react';
import request from 'browser-request';
import sanitizeHtml from 'sanitize-html';
import classnames from 'classnames';
import { logger } from "matrix-js-sdk/src/logger";
@ -61,6 +60,37 @@ export default class EmbeddedPage extends React.PureComponent<IProps, IState> {
return sanitizeHtml(_t(s));
}
private async fetchEmbed() {
let res: Response;
try {
res = await fetch(this.props.url, { method: "GET" });
} catch (err) {
if (this.unmounted) return;
logger.warn(`Error loading page: ${err}`);
this.setState({ page: _t("Couldn't load page") });
return;
}
if (this.unmounted) return;
if (!res.ok) {
logger.warn(`Error loading page: ${res.status}`);
this.setState({ page: _t("Couldn't load page") });
return;
}
let body = (await res.text()).replace(/_t\(['"]([\s\S]*?)['"]\)/mg, (match, g1) => this.translate(g1));
if (this.props.replaceMap) {
Object.keys(this.props.replaceMap).forEach(key => {
body = body.split(key).join(this.props.replaceMap[key]);
});
}
this.setState({ page: body });
}
public componentDidMount(): void {
this.unmounted = false;
@ -68,34 +98,10 @@ export default class EmbeddedPage extends React.PureComponent<IProps, IState> {
return;
}
// we use request() to inline the page into the react component
// We use fetch to inline the page into the react component
// so that it can inherit CSS and theming easily rather than mess around
// with iframes and trying to synchronise document.stylesheets.
request(
{ method: "GET", url: this.props.url },
(err, response, body) => {
if (this.unmounted) {
return;
}
if (err || response.status < 200 || response.status >= 300) {
logger.warn(`Error loading page: ${err}`);
this.setState({ page: _t("Couldn't load page") });
return;
}
body = body.replace(/_t\(['"]([\s\S]*?)['"]\)/mg, (match, g1) => this.translate(g1));
if (this.props.replaceMap) {
Object.keys(this.props.replaceMap).forEach(key => {
body = body.split(key).join(this.props.replaceMap[key]);
});
}
this.setState({ page: body });
},
);
this.fetchEmbed();
this.dispatcherRef = dis.register(this.onAction);
}

25
src/components/structures/MatrixChat.tsx
View file

@ -137,6 +137,7 @@ import { TimelineRenderingType } from "../../contexts/RoomContext";
import { UseCaseSelection } from '../views/elements/UseCaseSelection';
import { ValidatedServerConfig } from '../../utils/ValidatedServerConfig';
import { isLocalRoom } from '../../utils/localRoom/isLocalRoom';
import { viewUserDeviceSettings } from '../../actions/handlers/viewUserDeviceSettings';
// legacy export
export { default as Views } from "../../Views";
@ -336,14 +337,19 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
// the old creds, but rather go straight to the relevant page
const firstScreen = this.screenAfterLogin ? this.screenAfterLogin.screen : null;
if (firstScreen === 'login' ||
firstScreen === 'register' ||
firstScreen === 'forgot_password') {
this.showScreenAfterLogin();
return;
const restoreSuccess = await this.loadSession();
if (restoreSuccess) {
return true;
}
return this.loadSession();
if (firstScreen === 'login' ||
firstScreen === 'register' ||
firstScreen === 'forgot_password'
) {
this.showScreenAfterLogin();
}
return false;
});
}
@ -469,7 +475,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
return { serverConfig: props };
}
private loadSession() {
private loadSession(): Promise<boolean> {
// the extra Promise.resolve() ensures that synchronous exceptions hit the same codepath as
// asynchronous ones.
return Promise.resolve().then(() => {
@ -489,6 +495,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
dis.dispatch({ action: "view_welcome_page" });
}
}
return loadedSession;
});
// Note we don't catch errors from this: we catch everything within
// loadSession as there's logic there to ask the user if they want
@ -677,6 +684,10 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
}
break;
}
case Action.ViewUserDeviceSettings: {
viewUserDeviceSettings(SettingsStore.getValue("feature_new_device_manager"));
break;
}
case Action.ViewUserSettings: {
const tabPayload = payload as OpenToTabPayload;
Modal.createDialog(UserSettingsDialog,

2
src/components/structures/TimelinePanel.tsx
View file

@ -1362,7 +1362,7 @@ class TimelinePanel extends React.Component<IProps, IState> {
if (this.unmounted) return;
this.setState({ timelineLoading: false });
logger.error(`Error loading timeline panel at ${this.props.timelineSet.room?.roomId}/${eventId}: ${error}`);
logger.error(`Error loading timeline panel at ${this.props.timelineSet.room?.roomId}/${eventId}`, error);
let onFinished: () => void;

15
src/components/structures/UploadBar.tsx
View file

@ -17,7 +17,7 @@ limitations under the License.
import React from 'react';
import { Room } from "matrix-js-sdk/src/models/room";
import filesize from "filesize";
import { IAbortablePromise, IEventRelation } from 'matrix-js-sdk/src/matrix';
import { IEventRelation } from 'matrix-js-sdk/src/matrix';
import { Optional } from "matrix-events-sdk";
import ContentMessages from '../../ContentMessages';
@ -26,8 +26,7 @@ import { _t } from '../../languageHandler';
import { Action } from "../../dispatcher/actions";
import ProgressBar from "../views/elements/ProgressBar";
import AccessibleButton, { ButtonEvent } from "../views/elements/AccessibleButton";
import { IUpload } from "../../models/IUpload";
import MatrixClientContext from "../../contexts/MatrixClientContext";
import { RoomUpload } from "../../models/RoomUpload";
import { ActionPayload } from '../../dispatcher/payloads';
import { UploadPayload } from "../../dispatcher/payloads/UploadPayload";
@ -38,7 +37,7 @@ interface IProps {
interface IState {
currentFile?: string;
currentPromise?: IAbortablePromise<any>;
currentUpload?: RoomUpload;
currentLoaded?: number;
currentTotal?: number;
countFiles: number;
@ -55,8 +54,6 @@ function isUploadPayload(payload: ActionPayload): payload is UploadPayload {
}
export default class UploadBar extends React.PureComponent<IProps, IState> {
static contextType = MatrixClientContext;
private dispatcherRef: Optional<string>;
private mounted = false;
@ -78,7 +75,7 @@ export default class UploadBar extends React.PureComponent<IProps, IState> {
dis.unregister(this.dispatcherRef!);
}
private getUploadsInRoom(): IUpload[] {
private getUploadsInRoom(): RoomUpload[] {
const uploads = ContentMessages.sharedInstance().getCurrentUploads(this.props.relation);
return uploads.filter(u => u.roomId === this.props.room.roomId);
}
@ -86,8 +83,8 @@ export default class UploadBar extends React.PureComponent<IProps, IState> {
private calculateState(): IState {
const [currentUpload, ...otherUploads] = this.getUploadsInRoom();
return {
currentUpload,
currentFile: currentUpload?.fileName,
currentPromise: currentUpload?.promise,
currentLoaded: currentUpload?.loaded,
currentTotal: currentUpload?.total,
countFiles: otherUploads.length + 1,
@ -103,7 +100,7 @@ export default class UploadBar extends React.PureComponent<IProps, IState> {
private onCancelClick = (ev: ButtonEvent) => {
ev.preventDefault();
ContentMessages.sharedInstance().cancelUpload(this.state.currentPromise!, this.context);
ContentMessages.sharedInstance().cancelUpload(this.state.currentUpload!);
};
render() {

4
src/components/structures/auth/Login.tsx
View file

@ -15,7 +15,7 @@ limitations under the License.
*/
import React, { ReactNode } from 'react';
import { MatrixError } from "matrix-js-sdk/src/http-api";
import { ConnectionError, MatrixError } from "matrix-js-sdk/src/http-api";
import classNames from "classnames";
import { logger } from "matrix-js-sdk/src/logger";
@ -453,7 +453,7 @@ export default class LoginComponent extends React.PureComponent<IProps, IState>
let errorText: ReactNode = _t("There was a problem communicating with the homeserver, " +
"please try again later.") + (errCode ? " (" + errCode + ")" : "");
if (err["cors"] === 'rejected') { // browser-request specific error field
if (err instanceof ConnectionError) {
if (window.location.protocol === 'https:' &&
(this.props.serverConfig.hsUrl.startsWith("http:") ||
!this.props.serverConfig.hsUrl.startsWith("http"))

3
src/components/views/context_menus/IconizedContextMenu.tsx
View file

@ -39,6 +39,7 @@ interface IOptionListProps {
interface IOptionProps extends React.ComponentProps<typeof MenuItem> {
iconClassName?: string;
isDestructive?: boolean;
}
interface ICheckboxProps extends React.ComponentProps<typeof MenuItemCheckbox> {
@ -112,12 +113,14 @@ export const IconizedContextMenuOption: React.FC<IOptionProps> = ({
className,
iconClassName,
children,
isDestructive,
...props
}) => {
return <MenuItem
{...props}
className={classNames(className, {
mx_IconizedContextMenu_item: true,
mx_IconizedContextMenu_itemDestructive: isDestructive,
})}
label={label}
>

66
src/components/views/context_menus/KebabContextMenu.tsx Normal file
View file

@ -0,0 +1,66 @@
/*
Copyright 2022 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
import React from 'react';
import { Icon as ContextMenuIcon } from '../../../../res/img/element-icons/context-menu.svg';
import { ChevronFace, ContextMenuButton, useContextMenu } from '../../structures/ContextMenu';
import AccessibleButton from '../elements/AccessibleButton';
import IconizedContextMenu, { IconizedContextMenuOptionList } from './IconizedContextMenu';
const contextMenuBelow = (elementRect: DOMRect) => {
// align the context menu's icons with the icon which opened the context menu
const left = elementRect.left + window.scrollX + elementRect.width;
const top = elementRect.bottom + window.scrollY;
const chevronFace = ChevronFace.None;
return { left, top, chevronFace };
};
interface KebabContextMenuProps extends Partial<React.ComponentProps<typeof AccessibleButton>> {
options: React.ReactNode[];
title: string;
}
export const KebabContextMenu: React.FC<KebabContextMenuProps> = ({
options,
title,
...props
}) => {
const [menuDisplayed, button, openMenu, closeMenu] = useContextMenu();
return <>
<ContextMenuButton
{...props}
onClick={openMenu}
title={title}
isExpanded={menuDisplayed}
inputRef={button}
>
<ContextMenuIcon className='mx_KebabContextMenu_icon' />
</ContextMenuButton>
{ menuDisplayed && (<IconizedContextMenu
onFinished={closeMenu}
compact
rightAligned
closeOnInteraction
{...contextMenuBelow(button.current.getBoundingClientRect())}
>
<IconizedContextMenuOptionList>
{ options }
</IconizedContextMenuOptionList>
</IconizedContextMenu>) }
</>;
};

30
src/components/views/dialogs/ChangelogDialog.tsx
View file

@ -16,7 +16,6 @@ Copyright 2019 Michael Telatynski <7t3chguy@gmail.com>
*/
import React from 'react';
import request from 'browser-request';
import { _t } from '../../../languageHandler';
import QuestionDialog from "./QuestionDialog";
@ -37,22 +36,33 @@ export default class ChangelogDialog extends React.Component<IProps> {
this.state = {};
}
private async fetchChanges(repo: string, oldVersion: string, newVersion: string): Promise<void> {
const url = `https://riot.im/github/repos/${repo}/compare/${oldVersion}...${newVersion}`;
try {
const res = await fetch(url);
if (!res.ok) {
this.setState({ [repo]: res.statusText });
return;
}
const body = await res.json();
this.setState({ [repo]: body.commits });
} catch (err) {
this.setState({ [repo]: err.message });
}
}
public componentDidMount() {
const version = this.props.newVersion.split('-');
const version2 = this.props.version.split('-');
if (version == null || version2 == null) return;
// parse versions of form: [vectorversion]-react-[react-sdk-version]-js-[js-sdk-version]
for (let i=0; i<REPOS.length; i++) {
for (let i = 0; i < REPOS.length; i++) {
const oldVersion = version2[2*i];
const newVersion = version[2*i];
const url = `https://riot.im/github/repos/${REPOS[i]}/compare/${oldVersion}...${newVersion}`;
request(url, (err, response, body) => {
if (response.statusCode < 200 || response.statusCode >= 300) {
this.setState({ [REPOS[i]]: response.statusText });
return;
}
this.setState({ [REPOS[i]]: JSON.parse(body).commits });
});
this.fetchChanges(REPOS[i], oldVersion, newVersion);
}
}

7
src/components/views/dialogs/InviteDialog.tsx
View file

@ -654,12 +654,7 @@ export default class InviteDialog extends React.PureComponent<Props, IInviteDial
const token = await authClient.getAccessToken();
if (term !== this.state.filterText) return; // abandon hope
const lookup = await MatrixClientPeg.get().lookupThreePid(
'email',
term,
undefined, // callback
token,
);
const lookup = await MatrixClientPeg.get().lookupThreePid('email', term, token);
if (term !== this.state.filterText) return; // abandon hope
if (!lookup || !lookup.mxid) {

15
src/components/views/dialogs/SlidingSyncOptionsDialog.tsx
View file

@ -15,7 +15,7 @@ limitations under the License.
*/
import React from 'react';
import { MatrixClient } from 'matrix-js-sdk/src/matrix';
import { MatrixClient, Method } from 'matrix-js-sdk/src/matrix';
import { logger } from 'matrix-js-sdk/src/logger';
import { _t } from '../../../languageHandler';
@ -33,17 +33,10 @@ import { SettingLevel } from "../../../settings/SettingLevel";
* @throws if the proxy server is unreachable or not configured to the given homeserver
*/
async function syncHealthCheck(cli: MatrixClient): Promise<void> {
const controller = new AbortController();
const id = setTimeout(() => controller.abort(), 10 * 1000); // 10s
const url = cli.http.getUrl("/sync", {}, "/_matrix/client/unstable/org.matrix.msc3575");
const res = await fetch(url, {
signal: controller.signal,
method: "POST",
await cli.http.authedRequest(Method.Post, "/sync", undefined, undefined, {
localTimeoutMs: 10 * 1000, // 10s
prefix: "/_matrix/client/unstable/org.matrix.msc3575",
});
clearTimeout(id);
if (res.status != 200) {
throw new Error(`syncHealthCheck: server returned HTTP ${res.status}`);
}
logger.info("server natively support sliding sync OK");
}

6
src/components/views/elements/LanguageDropdown.tsx
View file

@ -38,7 +38,7 @@ interface IProps {
interface IState {
searchQuery: string;
langs: string[];
langs: Awaited<ReturnType<typeof languageHandler.getAllLanguagesFromJson>>;
}
export default class LanguageDropdown extends React.Component<IProps, IState> {
@ -60,7 +60,7 @@ export default class LanguageDropdown extends React.Component<IProps, IState> {
});
this.setState({ langs });
}).catch(() => {
this.setState({ langs: ['en'] });
this.setState({ langs: [{ value: 'en', label: "English" }] });
});
if (!this.props.value) {
@ -83,7 +83,7 @@ export default class LanguageDropdown extends React.Component<IProps, IState> {
return <Spinner />;
}
let displayedLanguages;
let displayedLanguages: Awaited<ReturnType<typeof languageHandler.getAllLanguagesFromJson>>;
if (this.state.searchQuery) {
displayedLanguages = this.state.langs.filter((lang) => {
return languageMatchesSearchQuery(this.state.searchQuery, lang);

2
src/components/views/elements/MiniAvatarUploader.tsx
View file

@ -74,7 +74,7 @@ const MiniAvatarUploader: React.FC<IProps> = ({
if (!ev.target.files?.length) return;
setBusy(true);
const file = ev.target.files[0];
const uri = await cli.uploadContent(file);
const { content_uri: uri } = await cli.uploadContent(file);
await setAvatarUrl(uri);
setBusy(false);
}}

39
src/components/views/messages/MessageEvent.tsx
View file

@ -43,6 +43,8 @@ import MjolnirBody from "./MjolnirBody";
import MBeaconBody from "./MBeaconBody";
import { IEventTileOps } from "../rooms/EventTile";
import { VoiceBroadcastBody, VoiceBroadcastInfoEventType, VoiceBroadcastInfoState } from '../../../voice-broadcast';
import { Features } from '../../../settings/Settings';
import { SettingLevel } from '../../../settings/SettingLevel';
// onMessageAllowed is handled internally
interface IProps extends Omit<IBodyProps, "onMessageAllowed" | "mediaEventHelper"> {
@ -60,6 +62,10 @@ export interface IOperableEventTile {
getEventTileOps(): IEventTileOps;
}
interface State {
voiceBroadcastEnabled: boolean;
}
const baseBodyTypes = new Map<string, typeof React.Component>([
[MsgType.Text, TextualBody],
[MsgType.Notice, TextualBody],
@ -78,7 +84,7 @@ const baseEvTypes = new Map<string, React.ComponentType<Partial<IBodyProps>>>([
[VoiceBroadcastInfoEventType, VoiceBroadcastBody],
]);
export default class MessageEvent extends React.Component<IProps> implements IMediaBody, IOperableEventTile {
export default class MessageEvent extends React.Component<IProps, State> implements IMediaBody, IOperableEventTile {
private body: React.RefObject<React.Component | IOperableEventTile> = createRef();
private mediaHelper: MediaEventHelper;
private bodyTypes = new Map<string, typeof React.Component>(baseBodyTypes.entries());
@ -86,6 +92,7 @@ export default class MessageEvent extends React.Component<IProps> implements IMe
public static contextType = MatrixClientContext;
public context!: React.ContextType<typeof MatrixClientContext>;
private voiceBroadcastSettingWatcherRef: string;
public constructor(props: IProps, context: React.ContextType<typeof MatrixClientContext>) {
super(props, context);
@ -95,15 +102,29 @@ export default class MessageEvent extends React.Component<IProps> implements IMe
}
this.updateComponentMaps();
this.state = {
// only check voice broadcast settings for a voice broadcast event
voiceBroadcastEnabled: this.props.mxEvent.getType() === VoiceBroadcastInfoEventType
&& SettingsStore.getValue(Features.VoiceBroadcast),
};
}
public componentDidMount(): void {
this.props.mxEvent.addListener(MatrixEventEvent.Decrypted, this.onDecrypted);
if (this.props.mxEvent.getType() === VoiceBroadcastInfoEventType) {
this.watchVoiceBroadcastFeatureSetting();
}
}
public componentWillUnmount() {
this.props.mxEvent.removeListener(MatrixEventEvent.Decrypted, this.onDecrypted);
this.mediaHelper?.destroy();
if (this.voiceBroadcastSettingWatcherRef) {
SettingsStore.unwatchSetting(this.voiceBroadcastSettingWatcherRef);
}
}
public componentDidUpdate(prevProps: Readonly<IProps>) {
@ -147,6 +168,16 @@ export default class MessageEvent extends React.Component<IProps> implements IMe
this.forceUpdate();
};
private watchVoiceBroadcastFeatureSetting(): void {
this.voiceBroadcastSettingWatcherRef = SettingsStore.watchSetting(
Features.VoiceBroadcast,
null,
(settingName: string, roomId: string, atLevel: SettingLevel, newValAtLevel, newValue: boolean) => {
this.setState({ voiceBroadcastEnabled: newValue });
},
);
}
public render() {
const content = this.props.mxEvent.getContent();
const type = this.props.mxEvent.getType();
@ -174,7 +205,11 @@ export default class MessageEvent extends React.Component<IProps> implements IMe
BodyType = MLocationBody;
}
if (type === VoiceBroadcastInfoEventType && content?.state === VoiceBroadcastInfoState.Started) {
if (
this.state.voiceBroadcastEnabled
&& type === VoiceBroadcastInfoEventType
&& content?.state === VoiceBroadcastInfoState.Started
) {
BodyType = VoiceBroadcastBody;
}
}

4
src/components/views/right_panel/UserInfo.tsx
View file

@ -48,7 +48,6 @@ import EncryptionPanel from "./EncryptionPanel";
import { useAsyncMemo } from '../../../hooks/useAsyncMemo';
import { legacyVerifyUser, verifyDevice, verifyUser } from '../../../verification';
import { Action } from "../../../dispatcher/actions";
import { UserTab } from "../dialogs/UserTab";
import { useIsEncrypted } from "../../../hooks/useIsEncrypted";
import BaseCard from "./BaseCard";
import { E2EStatus } from "../../../utils/ShieldUtils";
@ -1331,8 +1330,7 @@ const BasicUserInfo: React.FC<{
className="mx_UserInfo_field"
onClick={() => {
dis.dispatch({
action: Action.ViewUserSettings,
initialTabId: UserTab.Security,
action: Action.ViewUserDeviceSettings,
});
}}
>

2
src/components/views/room_settings/RoomProfileSettings.tsx
View file

@ -134,7 +134,7 @@ export default class RoomProfileSettings extends React.Component<IProps, IState>
}
if (this.state.avatarFile) {
const uri = await client.uploadContent(this.state.avatarFile);
const { content_uri: uri } = await client.uploadContent(this.state.avatarFile);
await client.sendStateEvent(this.props.roomId, 'm.room.avatar', { url: uri }, '');
newState.avatarUrl = mediaFromMxc(uri).getSquareThumbnailHttp(96);
newState.originalAvatarUrl = newState.avatarUrl;

1
src/components/views/rooms/RoomPreviewBar.tsx
View file

@ -148,7 +148,6 @@ export default class RoomPreviewBar extends React.Component<IProps, IState> {
const result = await MatrixClientPeg.get().lookupThreePid(
'email',
this.props.invitedEmail,
undefined /* callback */,
identityAccessToken,
);
this.setState({ invitedEmailMxid: result.mxid });

4
src/components/views/settings/ChangeAvatar.tsx
View file

@ -115,13 +115,13 @@ export default class ChangeAvatar extends React.Component<IProps, IState> {
this.setState({
phase: Phases.Uploading,
});
const httpPromise = MatrixClientPeg.get().uploadContent(file).then((url) => {
const httpPromise = MatrixClientPeg.get().uploadContent(file).then(({ content_uri: url }) => {
newUrl = url;
if (this.props.room) {
return MatrixClientPeg.get().sendStateEvent(
this.props.room.roomId,
'm.room.avatar',
{ url: url },
{ url },
'',
);
} else {

2
src/components/views/settings/ProfileSettings.tsx
View file

@ -111,7 +111,7 @@ export default class ProfileSettings extends React.Component<{}, IState> {
logger.log(
`Uploading new avatar, ${this.state.avatarFile.name} of type ${this.state.avatarFile.type},` +
` (${this.state.avatarFile.size}) bytes`);
const uri = await client.uploadContent(this.state.avatarFile);
const { content_uri: uri } = await client.uploadContent(this.state.avatarFile);
await client.setAvatarUrl(uri);
newState.avatarUrl = mediaFromMxc(uri).getSquareThumbnailHttp(96);
newState.originalAvatarUrl = newState.avatarUrl;

51
src/components/views/settings/devices/CurrentDeviceSection.tsx
View file

@ -14,17 +14,20 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import { LocalNotificationSettings } from 'matrix-js-sdk/src/@types/local_notifications';
import React, { useState } from 'react';
import { LocalNotificationSettings } from 'matrix-js-sdk/src/@types/local_notifications';
import { _t } from '../../../../languageHandler';
import Spinner from '../../elements/Spinner';
import SettingsSubsection from '../shared/SettingsSubsection';
import { SettingsSubsectionHeading } from '../shared/SettingsSubsectionHeading';
import DeviceDetails from './DeviceDetails';
import DeviceExpandDetailsButton from './DeviceExpandDetailsButton';
import DeviceTile from './DeviceTile';
import { DeviceVerificationStatusCard } from './DeviceVerificationStatusCard';
import { ExtendedDevice } from './types';
import { KebabContextMenu } from '../../context_menus/KebabContextMenu';
import { IconizedContextMenuOption } from '../../context_menus/IconizedContextMenu';
interface Props {
device?: ExtendedDevice;
@ -34,9 +37,48 @@ interface Props {
setPushNotifications?: (deviceId: string, enabled: boolean) => Promise<void> | undefined;
onVerifyCurrentDevice: () => void;
onSignOutCurrentDevice: () => void;
signOutAllOtherSessions?: () => void;
saveDeviceName: (deviceName: string) => Promise<void>;
}
type CurrentDeviceSectionHeadingProps =
Pick<Props, 'onSignOutCurrentDevice' | 'signOutAllOtherSessions'>
& { disabled?: boolean };
const CurrentDeviceSectionHeading: React.FC<CurrentDeviceSectionHeadingProps> = ({
onSignOutCurrentDevice,
signOutAllOtherSessions,
disabled,
}) => {
const menuOptions = [
<IconizedContextMenuOption
key="sign-out"
label={_t('Sign out')}
onClick={onSignOutCurrentDevice}
isDestructive
/>,
...(signOutAllOtherSessions
? [
<IconizedContextMenuOption
key="sign-out-all-others"
label={_t('Sign out all other sessions')}
onClick={signOutAllOtherSessions}
isDestructive
/>,
]
: []
),
];
return <SettingsSubsectionHeading heading={_t('Current session')}>
<KebabContextMenu
disabled={disabled}
title={_t('Options')}
options={menuOptions}
data-testid='current-session-menu'
/>
</SettingsSubsectionHeading>;
};
const CurrentDeviceSection: React.FC<Props> = ({
device,
isLoading,
@ -45,13 +87,18 @@ const CurrentDeviceSection: React.FC<Props> = ({
setPushNotifications,
onVerifyCurrentDevice,
onSignOutCurrentDevice,
signOutAllOtherSessions,
saveDeviceName,
}) => {
const [isExpanded, setIsExpanded] = useState(false);
return <SettingsSubsection
heading={_t('Current session')}
data-testid='current-session-section'
heading={<CurrentDeviceSectionHeading
onSignOutCurrentDevice={onSignOutCurrentDevice}
signOutAllOtherSessions={signOutAllOtherSessions}
disabled={isLoading || !device || isSigningOut}
/>}
>
{ /* only show big spinner on first load */ }
{ isLoading && !device && <Spinner /> }

11
src/components/views/settings/shared/SettingsSubsection.tsx
View file

@ -16,17 +16,22 @@ limitations under the License.
import React, { HTMLAttributes } from "react";
import Heading from "../../typography/Heading";
import { SettingsSubsectionHeading } from "./SettingsSubsectionHeading";
export interface SettingsSubsectionProps extends HTMLAttributes<HTMLDivElement> {
heading: string;
heading: string | React.ReactNode;
description?: string | React.ReactNode;
children?: React.ReactNode;
}
const SettingsSubsection: React.FC<SettingsSubsectionProps> = ({ heading, description, children, ...rest }) => (
<div {...rest} className="mx_SettingsSubsection">
<Heading className="mx_SettingsSubsection_heading" size='h3'>{ heading }</Heading>
{ typeof heading === 'string'
? <SettingsSubsectionHeading heading={heading} />
: <>
{ heading }
</>
}
{ !!description && <div className="mx_SettingsSubsection_description">{ description }</div> }
<div className="mx_SettingsSubsection_content">
{ children }

18
src/voice-broadcast/components/index.ts → src/components/views/settings/shared/SettingsSubsectionHeading.tsx
View file

@ -14,6 +14,18 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
export * from "./atoms/LiveBadge";
export * from "./molecules/VoiceBroadcastRecordingBody";
export * from "./VoiceBroadcastBody";
import React, { HTMLAttributes } from "react";
import Heading from "../../typography/Heading";
export interface SettingsSubsectionHeadingProps extends HTMLAttributes<HTMLDivElement> {
heading: string;
children?: React.ReactNode;
}
export const SettingsSubsectionHeading: React.FC<SettingsSubsectionHeadingProps> = ({ heading, children, ...rest }) => (
<div {...rest} className="mx_SettingsSubsectionHeading">
<Heading className="mx_SettingsSubsectionHeading_heading" size='h3'>{ heading }</Heading>
{ children }
</div>
);

11
src/components/views/settings/tabs/user/LabsUserSettingsTab.tsx
View file

@ -80,7 +80,10 @@ export default class LabsUserSettingsTab extends React.Component<{}, IState> {
let betaSection;
if (betas.length) {
betaSection = <div className="mx_SettingsTab_section">
betaSection = <div
data-testid="labs-beta-section"
className="mx_SettingsTab_section"
>
{ betas.map(f => <BetaCard key={f} featureId={f} />) }
</div>;
}
@ -137,7 +140,11 @@ export default class LabsUserSettingsTab extends React.Component<{}, IState> {
labsSections = <>
{ sortBy(Array.from(groups.entries()), "0").map(([group, flags]) => (
<div className="mx_SettingsTab_section" key={group}>
<div
className="mx_SettingsTab_section"
key={group}
data-testid={`labs-group-${group}`}
>
<span className="mx_SettingsTab_subheading">{ _t(labGroupNames[group]) }</span>
{ flags }
</div>

20
src/components/views/settings/tabs/user/SecurityUserSettingsTab.tsx
View file

@ -346,19 +346,29 @@ export default class SecurityUserSettingsTab extends React.Component<IProps, ISt
}
}
return (
<div className="mx_SettingsTab mx_SecurityUserSettingsTab">
{ warning }
const useNewSessionManager = SettingsStore.getValue("feature_new_device_manager");
const devicesSection = useNewSessionManager
? null
: <>
<div className="mx_SettingsTab_heading">{ _t("Where you're signed in") }</div>
<div className="mx_SettingsTab_section">
<div
className="mx_SettingsTab_section"
data-testid="devices-section"
>
<span className="mx_SettingsTab_subsectionText">
{ _t(
"Manage your signed-in devices below. " +
"A device's name is visible to people you communicate with.",
"A device's name is visible to people you communicate with.",
) }
</span>
<DevicesPanel />
</div>
</>;
return (
<div className="mx_SettingsTab mx_SecurityUserSettingsTab">
{ warning }
{ devicesSection }
<div className="mx_SettingsTab_heading">{ _t("Encryption") }</div>
<div className="mx_SettingsTab_section">
{ secureBackup }

5
src/components/views/settings/tabs/user/SessionManagerTab.tsx
View file

@ -171,6 +171,10 @@ const SessionManagerTab: React.FC = () => {
setSelectedDeviceIds([]);
}, [filter, setSelectedDeviceIds]);
const signOutAllOtherSessions = shouldShowOtherSessions ? () => {
onSignOutOtherDevices(Object.keys(otherDevices));
}: undefined;
return <SettingsTab heading={_t('Sessions')}>
<SecurityRecommendations
devices={devices}
@ -186,6 +190,7 @@ const SessionManagerTab: React.FC = () => {
saveDeviceName={(deviceName) => saveDeviceName(currentDeviceId, deviceName)}
onVerifyCurrentDevice={onVerifyCurrentDevice}
onSignOutCurrentDevice={onSignOutCurrentDevice}
signOutAllOtherSessions={signOutAllOtherSessions}
/>
{
shouldShowOtherSessions &&

5
src/components/views/voip/PipView.tsx
View file

@ -154,9 +154,10 @@ export default class PipView extends React.Component<IProps, IState> {
public componentWillUnmount() {
LegacyCallHandler.instance.removeListener(LegacyCallHandlerEvent.CallChangeRoom, this.updateCalls);
LegacyCallHandler.instance.removeListener(LegacyCallHandlerEvent.CallState, this.updateCalls);
MatrixClientPeg.get().removeListener(CallEvent.RemoteHoldUnhold, this.onCallRemoteHold);
const cli = MatrixClientPeg.get();
cli?.removeListener(CallEvent.RemoteHoldUnhold, this.onCallRemoteHold);
RoomViewStore.instance.removeListener(UPDATE_EVENT, this.onRoomViewStoreUpdate);
const room = MatrixClientPeg.get().getRoom(this.state.viewedRoomId);
const room = cli?.getRoom(this.state.viewedRoomId);
if (room) {
WidgetLayoutStore.instance.off(WidgetLayoutStore.emissionForRoom(room), this.updateCalls);
}

2
src/createRoom.ts
View file

@ -246,7 +246,7 @@ export default async function createRoom(opts: IOpts): Promise<string | null> {
if (opts.avatar) {
let url = opts.avatar;
if (opts.avatar instanceof File) {
url = await client.uploadContent(opts.avatar);
({ content_uri: url } = await client.uploadContent(opts.avatar));
}
createOpts.initial_state.push({

2
src/customisations/Media.ts
View file

@ -151,7 +151,7 @@ export class Media {
* @param {MatrixClient} client? Optional client to use.
* @returns {Media} The media object.
*/
export function mediaFromContent(content: IMediaEventContent, client?: MatrixClient): Media {
export function mediaFromContent(content: Partial<IMediaEventContent>, client?: MatrixClient): Media {
return new Media(prepEventContentAsMedia(content), client);
}

3
src/customisations/models/IMediaEventContent.ts
View file

@ -46,6 +46,7 @@ export interface IMediaEventInfo {
}
export interface IMediaEventContent {
msgtype: string;
body?: string;
filename?: string; // `m.file` optional field
url?: string; // required on unencrypted media
@ -69,7 +70,7 @@ export interface IMediaObject {
* @returns {IPreparedMedia} A prepared media object.
* @throws Throws if the given content cannot be packaged into a prepared media object.
*/
export function prepEventContentAsMedia(content: IMediaEventContent): IPreparedMedia {
export function prepEventContentAsMedia(content: Partial<IMediaEventContent>): IPreparedMedia {
let thumbnail: IMediaObject = null;
if (content?.info?.thumbnail_url) {
thumbnail = {

5
src/dispatcher/actions.ts
View file

@ -40,6 +40,11 @@ export enum Action {
*/
ViewUserSettings = "view_user_settings",
/**
* Open the user device settings. No additional payload information required.
*/
ViewUserDeviceSettings = "view_user_device_settings",
/**
* Opens the room directory. No additional payload information required.
*/

4
src/dispatcher/payloads/UploadPayload.ts
View file

@ -16,13 +16,13 @@ limitations under the License.
import { ActionPayload } from "../payloads";
import { Action } from "../actions";
import { IUpload } from "../../models/IUpload";
import { RoomUpload } from "../../models/RoomUpload";
export interface UploadPayload extends ActionPayload {
/**
* The upload with fields representing the new upload state.
*/
upload: IUpload;
upload: RoomUpload;
}
export interface UploadStartedPayload extends UploadPayload {

6
src/events/EventTileFactory.tsx
View file

@ -46,6 +46,7 @@ import ViewSourceEvent from "../components/views/messages/ViewSourceEvent";
import { shouldDisplayAsBeaconTile } from "../utils/beacon/timeline";
import { shouldDisplayAsVoiceBroadcastTile } from "../voice-broadcast/utils/shouldDisplayAsVoiceBroadcastTile";
import { ElementCall } from "../models/Call";
import { VoiceBroadcastChunkEventType } from "../voice-broadcast";
// Subset of EventTile's IProps plus some mixins
export interface EventTileTypeProps {
@ -252,6 +253,11 @@ export function pickFactory(
return noEventFactoryFactory();
}
if (mxEvent.getContent()[VoiceBroadcastChunkEventType]) {
// hide voice broadcast chunks
return noEventFactoryFactory();
}
return EVENT_TILE_TYPES.get(evType) ?? noEventFactoryFactory();
}

12
src/i18n/strings/en_EN.json
View file

@ -16,6 +16,7 @@
"Error": "Error",
"Unable to load! Check your network connectivity and try again.": "Unable to load! Check your network connectivity and try again.",
"Dismiss": "Dismiss",
"Attachment": "Attachment",
"The file '%(fileName)s' failed to upload.": "The file '%(fileName)s' failed to upload.",
"The file '%(fileName)s' exceeds this homeserver's size limit for uploads": "The file '%(fileName)s' exceeds this homeserver's size limit for uploads",
"Upload Failed": "Upload Failed",
@ -637,6 +638,7 @@
"See <b>%(msgtype)s</b> messages posted to this room": "See <b>%(msgtype)s</b> messages posted to this room",
"See <b>%(msgtype)s</b> messages posted to your active room": "See <b>%(msgtype)s</b> messages posted to your active room",
"Live": "Live",
"Voice broadcast": "Voice broadcast",
"Cannot reach homeserver": "Cannot reach homeserver",
"Ensure you have a stable internet connection, or get in touch with the server admin": "Ensure you have a stable internet connection, or get in touch with the server admin",
"Your %(brand)s is misconfigured": "Your %(brand)s is misconfigured",
@ -653,7 +655,6 @@
"This homeserver has exceeded one of its resource limits.": "This homeserver has exceeded one of its resource limits.",
"Please <a>contact your service administrator</a> to continue using the service.": "Please <a>contact your service administrator</a> to continue using the service.",
"Unable to connect to Homeserver. Retrying...": "Unable to connect to Homeserver. Retrying...",
"Attachment": "Attachment",
"%(items)s and %(count)s others|other": "%(items)s and %(count)s others",
"%(items)s and %(count)s others|one": "%(items)s and one other",
"%(items)s and %(lastItem)s": "%(items)s and %(lastItem)s",
@ -922,7 +923,10 @@
"Live Location Sharing (temporary implementation: locations persist in room history)": "Live Location Sharing (temporary implementation: locations persist in room history)",
"Favourite Messages (under active development)": "Favourite Messages (under active development)",
"Voice broadcast (under active development)": "Voice broadcast (under active development)",
"Use new session manager (under active development)": "Use new session manager (under active development)",
"Use new session manager": "Use new session manager",
"New session manager": "New session manager",
"Have greater visibility and control over all your sessions.": "Have greater visibility and control over all your sessions.",
"Our new sessions manager provides better visibility of all your sessions, and greater control over them including the ability to remotely toggle push notifications.": "Our new sessions manager provides better visibility of all your sessions, and greater control over them including the ability to remotely toggle push notifications.",
"Font size": "Font size",
"Use custom size": "Use custom size",
"Enable Emoji suggestions while typing": "Enable Emoji suggestions while typing",
@ -1714,6 +1718,8 @@
"Please enter verification code sent via text.": "Please enter verification code sent via text.",
"Verification code": "Verification code",
"Discovery options will appear once you have added a phone number above.": "Discovery options will appear once you have added a phone number above.",
"Sign out": "Sign out",
"Sign out all other sessions": "Sign out all other sessions",
"Current session": "Current session",
"Confirm logging out these devices by using Single Sign On to prove your identity.|other": "Confirm logging out these devices by using Single Sign On to prove your identity.",
"Confirm logging out these devices by using Single Sign On to prove your identity.|one": "Confirm logging out this device by using Single Sign On to prove your identity.",
@ -1770,7 +1776,6 @@
"Not ready for secure messaging": "Not ready for secure messaging",
"Inactive": "Inactive",
"Inactive for %(inactiveAgeDays)s days or longer": "Inactive for %(inactiveAgeDays)s days or longer",
"Sign out": "Sign out",
"Filter devices": "Filter devices",
"Show": "Show",
"%(selectedDeviceCount)s sessions selected": "%(selectedDeviceCount)s sessions selected",
@ -1847,7 +1852,6 @@
"Emoji": "Emoji",
"Hide stickers": "Hide stickers",
"Sticker": "Sticker",
"Voice broadcast": "Voice broadcast",
"Voice Message": "Voice Message",
"You do not have permission to start polls in this room.": "You do not have permission to start polls in this room.",
"Poll": "Poll",

84
src/languageHandler.tsx
View file

@ -17,7 +17,6 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import request from 'browser-request';
import counterpart from 'counterpart';
import React from 'react';
import { logger } from "matrix-js-sdk/src/logger";
@ -386,6 +385,13 @@ export function setMissingEntryGenerator(f: (value: string) => void) {
counterpart.setMissingEntryGenerator(f);
}
type Languages = {
[lang: string]: {
fileName: string;
label: string;
};
};
export function setLanguage(preferredLangs: string | string[]) {
if (!Array.isArray(preferredLangs)) {
preferredLangs = [preferredLangs];
@ -396,8 +402,8 @@ export function setLanguage(preferredLangs: string | string[]) {
plaf.setLanguage(preferredLangs);
}
let langToUse;
let availLangs;
let langToUse: string;
let availLangs: Languages;
return getLangsJson().then((result) => {
availLangs = result;
@ -434,9 +440,14 @@ export function setLanguage(preferredLangs: string | string[]) {
});
}
export function getAllLanguagesFromJson() {
type Language = {
value: string;
label: string;
};
export function getAllLanguagesFromJson(): Promise<Language[]> {
return getLangsJson().then((langsObject) => {
const langs = [];
const langs: Language[] = [];
for (const langKey in langsObject) {
if (langsObject.hasOwnProperty(langKey)) {
langs.push({
@ -532,29 +543,21 @@ export function pickBestLanguage(langs: string[]): string {
return langs[0];
}
function getLangsJson(): Promise<object> {
return new Promise((resolve, reject) => {
let url;
if (typeof(webpackLangJsonUrl) === 'string') { // in Jest this 'url' isn't a URL, so just fall through
url = webpackLangJsonUrl;
} else {
url = i18nFolder + 'languages.json';
}
request(
{ method: "GET", url },
(err, response, body) => {
if (err) {
reject(err);
return;
}
if (response.status < 200 || response.status >= 300) {
reject(new Error(`Failed to load ${url}, got ${response.status}`));
return;
}
resolve(JSON.parse(body));
},
);
});
async function getLangsJson(): Promise<Languages> {
let url: string;
if (typeof(webpackLangJsonUrl) === 'string') { // in Jest this 'url' isn't a URL, so just fall through
url = webpackLangJsonUrl;
} else {
url = i18nFolder + 'languages.json';
}
const res = await fetch(url, { method: "GET" });
if (!res.ok) {
throw new Error(`Failed to load ${url}, got ${res.status}`);
}
return res.json();
}
interface ICounterpartTranslation {
@ -571,23 +574,14 @@ async function getLanguageRetry(langPath: string, num = 3): Promise<ICounterpart
});
}
function getLanguage(langPath: string): Promise<ICounterpartTranslation> {
return new Promise((resolve, reject) => {
request(
{ method: "GET", url: langPath },
(err, response, body) => {
if (err) {
reject(err);
return;
}
if (response.status < 200 || response.status >= 300) {
reject(new Error(`Failed to load ${langPath}, got ${response.status}`));
return;
}
resolve(JSON.parse(body));
},
);
});
async function getLanguage(langPath: string): Promise<ICounterpartTranslation> {
const res = await fetch(langPath, { method: "GET" });
if (!res.ok) {
throw new Error(`Failed to load ${langPath}, got ${res.status}`);
}
return res.json();
}
export interface ICustomTranslations {

28
src/models/IUpload.ts
View file

@ -1,28 +0,0 @@
/*
Copyright 2021 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
import { IEventRelation } from "matrix-js-sdk/src/matrix";
import { IAbortablePromise } from "matrix-js-sdk/src/@types/partials";
export interface IUpload {
fileName: string;
roomId: string;
relation?: IEventRelation;
total: number;
loaded: number;
promise: IAbortablePromise<any>;
canceled?: boolean;
}

53
src/models/RoomUpload.ts Normal file
View file

@ -0,0 +1,53 @@
/*
Copyright 2021 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
import { IEventRelation, UploadProgress } from "matrix-js-sdk/src/matrix";
import { IEncryptedFile } from "../customisations/models/IMediaEventContent";
export class RoomUpload {
public readonly abortController = new AbortController();
public promise: Promise<{ url?: string, file?: IEncryptedFile }>;
private uploaded = 0;
constructor(
public readonly roomId: string,
public readonly fileName: string,
public readonly relation?: IEventRelation,
public fileSize = 0,
) {}
public onProgress(progress: UploadProgress) {
this.uploaded = progress.loaded;
this.fileSize = progress.total;
}
public abort(): void {
this.abortController.abort();
}
public get cancelled(): boolean {
return this.abortController.signal.aborted;
}
public get total(): number {
return this.fileSize;
}
public get loaded(): number {
return this.uploaded;
}
}

18
src/settings/Settings.tsx
View file

@ -475,8 +475,24 @@ export const SETTINGS: {[setting: string]: ISetting} = {
isFeature: true,
labsGroup: LabGroup.Experimental,
supportedLevels: LEVELS_FEATURE,
displayName: _td("Use new session manager (under active development)"),
displayName: _td("Use new session manager"),
default: false,
betaInfo: {
title: _td('New session manager'),
caption: () => <>
<p>
{ _td('Have greater visibility and control over all your sessions.') }
</p>
<p>
{ _td(
'Our new sessions manager provides better visibility of all your sessions, '
+ 'and greater control over them including the ability to remotely toggle push notifications.',
)
}
</p>
</>,
},
},
"baseFontSize": {
displayName: _td("Font size"),

2
src/stores/CallStore.ts
View file

@ -90,7 +90,7 @@ export class CallStore extends AsyncStoreWithClient<{}> {
}
this.callListeners.clear();
this.calls.clear();
this.activeCalls = new Set();
this._activeCalls.clear();
this.matrixClient.off(ClientEvent.Room, this.onRoom);
this.matrixClient.off(RoomStateEvent.Events, this.onRoomState);

2
src/stores/widgets/StopGapWidgetDriver.ts
View file

@ -449,7 +449,7 @@ export class StopGapWidgetDriver extends WidgetDriver {
from,
to,
limit,
direction: dir,
dir,
});
return {

13
src/toasts/AnalyticsToast.tsx
View file

@ -28,8 +28,6 @@ import {
showDialog as showAnalyticsLearnMoreDialog,
} from "../components/views/dialogs/AnalyticsLearnMoreDialog";
import { Action } from "../dispatcher/actions";
import { SnakedObject } from "../utils/SnakedObject";
import { IConfigOptions } from "../IConfigOptions";
import SettingsStore from "../settings/SettingsStore";
const onAccept = () => {
@ -78,16 +76,7 @@ const onLearnMorePreviouslyOptedIn = () => {
const TOAST_KEY = "analytics";
export function getPolicyUrl(): Optional<string> {
const policyUrl = SdkConfig.get("privacy_policy_url");
if (policyUrl) return policyUrl;
// Try get from legacy config location
const piwikConfig = SdkConfig.get("piwik");
let piwik: Optional<SnakedObject<Extract<IConfigOptions["piwik"], object>>>;
if (typeof piwikConfig === 'object') {
piwik = new SnakedObject(piwikConfig);
}
return piwik?.get("policy_url");
return SdkConfig.get("privacy_policy_url");
}
export const showToast = (): void => {

4
src/toasts/BulkUnverifiedSessionsToast.ts
View file

@ -20,7 +20,6 @@ import DeviceListener from '../DeviceListener';
import GenericToast from "../components/views/toasts/GenericToast";
import ToastStore from "../stores/ToastStore";
import { Action } from "../dispatcher/actions";
import { UserTab } from "../components/views/dialogs/UserTab";
const TOAST_KEY = "reviewsessions";
@ -29,8 +28,7 @@ export const showToast = (deviceIds: Set<string>) => {
DeviceListener.sharedInstance().dismissUnverifiedSessions(deviceIds);
dis.dispatch({
action: Action.ViewUserSettings,
initialTabId: UserTab.Security,
action: Action.ViewUserDeviceSettings,
});
};

4
src/toasts/UnverifiedSessionToast.ts
View file

@ -21,7 +21,6 @@ import DeviceListener from '../DeviceListener';
import ToastStore from "../stores/ToastStore";
import GenericToast from "../components/views/toasts/GenericToast";
import { Action } from "../dispatcher/actions";
import { UserTab } from "../components/views/dialogs/UserTab";
function toastKey(deviceId: string) {
return "unverified_session_" + deviceId;
@ -33,8 +32,7 @@ export const showToast = async (deviceId: string) => {
const onAccept = () => {
DeviceListener.sharedInstance().dismissUnverifiedSessions([deviceId]);
dis.dispatch({
action: Action.ViewUserSettings,
initialTabId: UserTab.Security,
action: Action.ViewUserDeviceSettings,
});
};

2
src/utils/MultiInviter.ts
View file

@ -184,7 +184,7 @@ export default class MultiInviter {
}
}
return this.matrixClient.invite(roomId, addr, undefined, this.reason);
return this.matrixClient.invite(roomId, addr, this.reason);
} else {
throw new Error('Unsupported address');
}

2
src/utils/notifications.ts
View file

@ -51,5 +51,5 @@ export async function createLocalNotificationSettingsIfNeeded(cli: MatrixClient)
export function localNotificationsAreSilenced(cli: MatrixClient): boolean {
const eventType = getLocalNotificationAccountDataEventType(cli.deviceId);
const event = cli.getAccountData(eventType);
return event?.getContent<LocalNotificationSettings>()?.is_silenced ?? true;
return event?.getContent<LocalNotificationSettings>()?.is_silenced ?? false;
}

141
src/voice-broadcast/audio/VoiceBroadcastRecorder.ts Normal file
View file

@ -0,0 +1,141 @@
/*
Copyright 2022 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
import { Optional } from "matrix-events-sdk";
import { TypedEventEmitter } from "matrix-js-sdk/src/models/typed-event-emitter";
import { VoiceRecording } from "../../audio/VoiceRecording";
import SdkConfig, { DEFAULTS } from "../../SdkConfig";
import { concat } from "../../utils/arrays";
import { IDestroyable } from "../../utils/IDestroyable";
export enum VoiceBroadcastRecorderEvent {
ChunkRecorded = "chunk_recorded",
}
interface EventMap {
[VoiceBroadcastRecorderEvent.ChunkRecorded]: (chunk: ChunkRecordedPayload) => void;
}
export interface ChunkRecordedPayload {
buffer: Uint8Array;
length: number;
}
/**
* This class provides the function to seamlessly record fixed length chunks.
* Subscribe with on(VoiceBroadcastRecordingEvents.ChunkRecorded, (payload: ChunkRecordedPayload) => {})
* to retrieve chunks while recording.
*/
export class VoiceBroadcastRecorder
extends TypedEventEmitter<VoiceBroadcastRecorderEvent, EventMap>
implements IDestroyable {
private headers = new Uint8Array(0);
private chunkBuffer = new Uint8Array(0);
private previousChunkEndTimePosition = 0;
private pagesFromRecorderCount = 0;
public constructor(
private voiceRecording: VoiceRecording,
public readonly targetChunkLength: number,
) {
super();
this.voiceRecording.onDataAvailable = this.onDataAvailable;
}
public async start(): Promise<void> {
return this.voiceRecording.start();
}
/**
* Stops the recording and returns the remaining chunk (if any).
*/
public async stop(): Promise<Optional<ChunkRecordedPayload>> {
await this.voiceRecording.stop();
return this.extractChunk();
}
public get contentType(): string {
return this.voiceRecording.contentType;
}
private get chunkLength(): number {
return this.voiceRecording.recorderSeconds - this.previousChunkEndTimePosition;
}
private onDataAvailable = (data: ArrayBuffer): void => {
const dataArray = new Uint8Array(data);
this.pagesFromRecorderCount++;
if (this.pagesFromRecorderCount <= 2) {
// first two pages contain the headers
this.headers = concat(this.headers, dataArray);
return;
}
this.handleData(dataArray);
};
private handleData(data: Uint8Array): void {
this.chunkBuffer = concat(this.chunkBuffer, data);
this.emitChunkIfTargetLengthReached();
}
private emitChunkIfTargetLengthReached(): void {
if (this.chunkLength >= this.targetChunkLength) {
this.emitAndResetChunk();
}
}
/**
* Extracts the current chunk and resets the buffer.
*/
private extractChunk(): Optional<ChunkRecordedPayload> {
if (this.chunkBuffer.length === 0) {
return null;
}
const currentRecorderTime = this.voiceRecording.recorderSeconds;
const payload: ChunkRecordedPayload = {
buffer: concat(this.headers, this.chunkBuffer),
length: this.chunkLength,
};
this.chunkBuffer = new Uint8Array(0);
this.previousChunkEndTimePosition = currentRecorderTime;
return payload;
}
private emitAndResetChunk(): void {
if (this.chunkBuffer.length === 0) {
return;
}
this.emit(
VoiceBroadcastRecorderEvent.ChunkRecorded,
this.extractChunk(),
);
}
public destroy(): void {
this.removeAllListeners();
this.voiceRecording.destroy();
}
}
export const createVoiceBroadcastRecorder = (): VoiceBroadcastRecorder => {
const targetChunkLength = SdkConfig.get("voice_broadcast")?.chunk_length || DEFAULTS.voice_broadcast!.chunk_length;
return new VoiceBroadcastRecorder(new VoiceRecording(), targetChunkLength);
};

9
src/voice-broadcast/components/VoiceBroadcastBody.tsx
View file

@ -31,7 +31,7 @@ export const VoiceBroadcastBody: React.FC<IBodyProps> = ({ mxEvent }) => {
const client = MatrixClientPeg.get();
const room = client.getRoom(mxEvent.getRoomId());
const recording = VoiceBroadcastRecordingsStore.instance().getByInfoEvent(mxEvent, client);
const [recordingState, setRecordingState] = useState(recording.state);
const [recordingState, setRecordingState] = useState(recording.getState());
useTypedEventEmitter(
recording,
@ -46,13 +46,10 @@ export const VoiceBroadcastBody: React.FC<IBodyProps> = ({ mxEvent }) => {
recording.stop();
};
const senderId = mxEvent.getSender();
const sender = mxEvent.sender;
return <VoiceBroadcastRecordingBody
onClick={stopVoiceBroadcast}
live={recordingState === VoiceBroadcastInfoState.Started}
member={sender}
userId={senderId}
title={`${sender?.name ?? senderId} • ${room.name}`}
sender={mxEvent.sender}
roomName={room.name}
/>;
};

55
src/voice-broadcast/components/atoms/VoiceBroadcastHeader.tsx Normal file
View file

@ -0,0 +1,55 @@
/*
Copyright 2022 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
import React from "react";
import { RoomMember } from "matrix-js-sdk/src/matrix";
import MemberAvatar from "../../../components/views/avatars/MemberAvatar";
import { LiveBadge } from "../..";
import { Icon, IconColour, IconType } from "../../../components/atoms/Icon";
import { _t } from "../../../languageHandler";
interface VoiceBroadcastHeaderProps {
live: boolean;
sender: RoomMember;
roomName: string;
showBroadcast?: boolean;
}
export const VoiceBroadcastHeader: React.FC<VoiceBroadcastHeaderProps> = ({
live,
sender,
roomName,
showBroadcast = false,
}) => {
const broadcast = showBroadcast
? <div className="mx_VoiceBroadcastHeader_line">
<Icon type={IconType.Live} colour={IconColour.CompoundSecondaryContent} />
{ _t("Voice broadcast") }
</div>
: null;
const liveBadge = live ? <LiveBadge /> : null;
return <div className="mx_VoiceBroadcastHeader">
<MemberAvatar member={sender} fallbackUserId={sender.userId} />
<div className="mx_VoiceBroadcastHeader_content">
<div className="mx_VoiceBroadcastHeader_sender">
{ sender.name }
</div>
<div className="mx_VoiceBroadcastHeader_room">
{ roomName }
</div>
{ broadcast }
</div>
{ liveBadge }
</div>;
};

29
src/voice-broadcast/components/molecules/VoiceBroadcastRecordingBody.tsx
View file

@ -17,40 +17,31 @@ limitations under the License.
import React, { MouseEventHandler } from "react";
import { RoomMember } from "matrix-js-sdk/src/matrix";
import { LiveBadge } from "../..";
import MemberAvatar from "../../../components/views/avatars/MemberAvatar";
import { VoiceBroadcastHeader } from "../..";
interface VoiceBroadcastRecordingBodyProps {
live: boolean;
member: RoomMember;
onClick: MouseEventHandler<HTMLDivElement>;
title: string;
userId: string;
roomName: string;
sender: RoomMember;
}
export const VoiceBroadcastRecordingBody: React.FC<VoiceBroadcastRecordingBodyProps> = ({
live,
member,
onClick,
title,
userId,
roomName,
sender,
}) => {
const liveBadge = live
? <LiveBadge />
: null;
return (
<div
className="mx_VoiceBroadcastRecordingBody"
onClick={onClick}
>
<MemberAvatar member={member} fallbackUserId={userId} />
<div className="mx_VoiceBroadcastRecordingBody_content">
<div className="mx_VoiceBroadcastRecordingBody_title">
{ title }
</div>
</div>
{ liveBadge }
<VoiceBroadcastHeader
live={live}
sender={sender}
roomName={roomName}
/>
</div>
);
};

15
src/voice-broadcast/index.ts
View file

@ -21,12 +21,18 @@ limitations under the License.
import { RelationType } from "matrix-js-sdk/src/matrix";
export * from "./components";
export * from "./models";
export * from "./utils";
export * from "./stores";
export * from "./audio/VoiceBroadcastRecorder";
export * from "./components/VoiceBroadcastBody";
export * from "./components/atoms/LiveBadge";
export * from "./components/atoms/VoiceBroadcastHeader";
export * from "./components/molecules/VoiceBroadcastRecordingBody";
export * from "./models/VoiceBroadcastRecording";
export * from "./stores/VoiceBroadcastRecordingsStore";
export * from "./utils/shouldDisplayAsVoiceBroadcastTile";
export * from "./utils/startNewVoiceBroadcastRecording";
export const VoiceBroadcastInfoEventType = "io.element.voice_broadcast_info";
export const VoiceBroadcastChunkEventType = "io.element.voice_broadcast_chunk";
export enum VoiceBroadcastInfoState {
Started = "started",
@ -36,6 +42,7 @@ export enum VoiceBroadcastInfoState {
}
export interface VoiceBroadcastInfoEventContent {
device_id: string;
state: VoiceBroadcastInfoState;
chunk_length?: number;
["m.relates_to"]?: {

116
src/voice-broadcast/models/VoiceBroadcastRecording.ts
View file

@ -14,10 +14,22 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import { logger } from "matrix-js-sdk/src/logger";
import { MatrixClient, MatrixEvent, RelationType } from "matrix-js-sdk/src/matrix";
import { TypedEventEmitter } from "matrix-js-sdk/src/models/typed-event-emitter";
import { VoiceBroadcastInfoEventType, VoiceBroadcastInfoState } from "..";
import {
ChunkRecordedPayload,
createVoiceBroadcastRecorder,
VoiceBroadcastInfoEventType,
VoiceBroadcastInfoState,
VoiceBroadcastRecorder,
VoiceBroadcastRecorderEvent,
} from "..";
import { uploadFile } from "../../ContentMessages";
import { IEncryptedFile } from "../../customisations/models/IMediaEventContent";
import { createVoiceMessageContent } from "../../utils/createVoiceMessageContent";
import { IDestroyable } from "../../utils/IDestroyable";
export enum VoiceBroadcastRecordingEvent {
StateChanged = "liveness_changed",
@ -27,8 +39,12 @@ interface EventMap {
[VoiceBroadcastRecordingEvent.StateChanged]: (state: VoiceBroadcastInfoState) => void;
}
export class VoiceBroadcastRecording extends TypedEventEmitter<VoiceBroadcastRecordingEvent, EventMap> {
private _state: VoiceBroadcastInfoState;
export class VoiceBroadcastRecording
extends TypedEventEmitter<VoiceBroadcastRecordingEvent, EventMap>
implements IDestroyable {
private state: VoiceBroadcastInfoState;
private recorder: VoiceBroadcastRecorder;
private sequence = 1;
public constructor(
public readonly infoEvent: MatrixEvent,
@ -43,25 +59,94 @@ export class VoiceBroadcastRecording extends TypedEventEmitter<VoiceBroadcastRec
VoiceBroadcastInfoEventType,
);
const relatedEvents = relations?.getRelations();
this._state = !relatedEvents?.find((event: MatrixEvent) => {
this.state = !relatedEvents?.find((event: MatrixEvent) => {
return event.getContent()?.state === VoiceBroadcastInfoState.Stopped;
}) ? VoiceBroadcastInfoState.Started : VoiceBroadcastInfoState.Stopped;
// TODO Michael W: add listening for updates
}
public async start(): Promise<void> {
return this.getRecorder().start();
}
public async stop(): Promise<void> {
this.setState(VoiceBroadcastInfoState.Stopped);
await this.stopRecorder();
await this.sendStoppedStateEvent();
}
public getState(): VoiceBroadcastInfoState {
return this.state;
}
private getRecorder(): VoiceBroadcastRecorder {
if (!this.recorder) {
this.recorder = createVoiceBroadcastRecorder();
this.recorder.on(VoiceBroadcastRecorderEvent.ChunkRecorded, this.onChunkRecorded);
}
return this.recorder;
}
public destroy(): void {
if (this.recorder) {
this.recorder.off(VoiceBroadcastRecorderEvent.ChunkRecorded, this.onChunkRecorded);
this.recorder.stop();
}
this.removeAllListeners();
}
private setState(state: VoiceBroadcastInfoState): void {
this._state = state;
this.state = state;
this.emit(VoiceBroadcastRecordingEvent.StateChanged, this.state);
}
public async stop() {
this.setState(VoiceBroadcastInfoState.Stopped);
// TODO Michael W: add error handling
private onChunkRecorded = async (chunk: ChunkRecordedPayload): Promise<void> => {
const { url, file } = await this.uploadFile(chunk);
await this.sendVoiceMessage(chunk, url, file);
};
private uploadFile(chunk: ChunkRecordedPayload): ReturnType<typeof uploadFile> {
return uploadFile(
this.client,
this.infoEvent.getRoomId(),
new Blob(
[chunk.buffer],
{
type: this.getRecorder().contentType,
},
),
);
}
private async sendVoiceMessage(chunk: ChunkRecordedPayload, url: string, file: IEncryptedFile): Promise<void> {
const content = createVoiceMessageContent(
url,
this.getRecorder().contentType,
Math.round(chunk.length * 1000),
chunk.buffer.length,
file,
);
content["m.relates_to"] = {
rel_type: RelationType.Reference,
event_id: this.infoEvent.getId(),
};
content["io.element.voice_broadcast_chunk"] = {
sequence: this.sequence++,
};
await this.client.sendMessage(this.infoEvent.getRoomId(), content);
}
private async sendStoppedStateEvent(): Promise<void> {
// TODO Michael W: add error handling for state event
await this.client.sendStateEvent(
this.infoEvent.getRoomId(),
VoiceBroadcastInfoEventType,
{
device_id: this.client.getDeviceId(),
state: VoiceBroadcastInfoState.Stopped,
["m.relates_to"]: {
rel_type: RelationType.Reference,
@ -72,7 +157,18 @@ export class VoiceBroadcastRecording extends TypedEventEmitter<VoiceBroadcastRec
);
}
public get state(): VoiceBroadcastInfoState {
return this._state;
private async stopRecorder(): Promise<void> {
if (!this.recorder) {
return;
}
try {
const lastChunk = await this.recorder.stop();
if (lastChunk) {
await this.onChunkRecorded(lastChunk);
}
} catch (err) {
logger.warn("error stopping voice broadcast recorder", err);
}
}
}

17
src/voice-broadcast/models/index.ts
View file

@ -1,17 +0,0 @@
/*
Copyright 2022 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
export * from "./VoiceBroadcastRecording";

16
src/voice-broadcast/stores/VoiceBroadcastRecordingsStore.ts
View file

@ -31,7 +31,7 @@ interface EventMap {
* This store provides access to the current and specific Voice Broadcast recordings.
*/
export class VoiceBroadcastRecordingsStore extends TypedEventEmitter<VoiceBroadcastRecordingsStoreEvent, EventMap> {
private _current: VoiceBroadcastRecording | null;
private current: VoiceBroadcastRecording | null;
private recordings = new Map<string, VoiceBroadcastRecording>();
public constructor() {
@ -39,15 +39,15 @@ export class VoiceBroadcastRecordingsStore extends TypedEventEmitter<VoiceBroadc
}
public setCurrent(current: VoiceBroadcastRecording): void {
if (this._current === current) return;
if (this.current === current) return;
this._current = current;
this.current = current;
this.recordings.set(current.infoEvent.getId(), current);
this.emit(VoiceBroadcastRecordingsStoreEvent.CurrentChanged, current);
}
public get current(): VoiceBroadcastRecording {
return this._current;
public getCurrent(): VoiceBroadcastRecording {
return this.current;
}
public getByInfoEvent(infoEvent: MatrixEvent, client: MatrixClient): VoiceBroadcastRecording {
@ -60,12 +60,12 @@ export class VoiceBroadcastRecordingsStore extends TypedEventEmitter<VoiceBroadc
return this.recordings.get(infoEventId);
}
public static readonly _instance = new VoiceBroadcastRecordingsStore();
private static readonly cachedInstance = new VoiceBroadcastRecordingsStore();
/**
* TODO Michael W: replace when https://github.com/matrix-org/matrix-react-sdk/pull/9293 has been merged
*/
public static instance() {
return VoiceBroadcastRecordingsStore._instance;
public static instance(): VoiceBroadcastRecordingsStore {
return VoiceBroadcastRecordingsStore.cachedInstance;
}
}

17
src/voice-broadcast/stores/index.ts
View file

@ -1,17 +0,0 @@
/*
Copyright 2022 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
export * from "./VoiceBroadcastRecordingsStore";

2
src/voice-broadcast/utils/startNewVoiceBroadcastRecording.ts
View file

@ -53,6 +53,7 @@ export const startNewVoiceBroadcastRecording = async (
client,
);
recordingsStore.setCurrent(recording);
recording.start();
resolve(recording);
}
};
@ -64,6 +65,7 @@ export const startNewVoiceBroadcastRecording = async (
roomId,
VoiceBroadcastInfoEventType,
{
device_id: client.getDeviceId(),
state: VoiceBroadcastInfoState.Started,
chunk_length: 300,
} as VoiceBroadcastInfoEventContent,