Merge remote-tracking branch 'upstream/develop' into task/dialogs-ts
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
This commit is contained in:
commit
d3e340e7ce
194 changed files with 3881 additions and 17100 deletions
.github/workflows
res/css
src
AsyncWrapper.tsxCallHandler.tsxContentMessages.tsxCountlyAnalytics.tsDeviceListener.tsIdentityAuthClient.jsLifecycle.tsLogin.tsMatrixClientPeg.tsNotifier.tsPosthogAnalytics.tsResend.tsScalarAuthClient.tsScalarMessaging.jsSecurityManager.tsSlashCommands.tsxTerms.tsVoipUserMapper.ts
async-components/views/dialogs
audio
components
structures
LeftPanelWidget.tsxMatrixChat.tsxMessagePanel.tsxRoomView.tsxScrollPanel.tsxSpaceRoomView.tsxTimelinePanel.tsxUserMenu.tsx
auth
views
auth
dialogs
CreateSpaceFromCommunityDialog.tsxCreateSubspaceDialog.tsxCryptoStoreTooNewDialog.tsxDevtoolsDialog.tsxIncomingSasDialog.tsxInviteDialog.tsxLeaveSpaceDialog.tsxLogoutDialog.tsxUntrustedDeviceDialog.tsxUserSettingsDialog.tsxWidgetOpenIDPermissionsDialog.tsx
security
elements
AppTile.tsxAppWarning.tsxDialogButtons.tsxDirectorySearchBox.tsxEditableText.tsxEditableTextContainer.tsxImageView.tsxLanguageDropdown.tsxLazyRenderList.tsxPersistedElement.tsxPersistentApp.tsxPowerSelector.tsxReplyThread.tsxSpoiler.tsxSyntaxHighlight.tsxTextWithTooltip.tsx
crypto
messages
right_panel
room_settings
rooms
AppsDrawer.tsxE2EIcon.tsxEditMessageComposer.tsxEntityTile.tsxEventTile.tsxLinkPreviewWidget.tsxRoomPreviewBar.tsxSendMessageComposer.tsxStickerpicker.tsx
settings
2
.github/workflows/layered-build.yaml
vendored
2
.github/workflows/layered-build.yaml
vendored
|
@ -5,6 +5,8 @@ on:
|
|||
jobs:
|
||||
build:
|
||||
runs-on: ubuntu-latest
|
||||
env:
|
||||
PR_NUMBER: ${{github.event.number}}
|
||||
steps:
|
||||
- uses: actions/checkout@v2
|
||||
- name: Build
|
||||
|
|
2
.github/workflows/typecheck.yaml
vendored
2
.github/workflows/typecheck.yaml
vendored
|
@ -5,6 +5,8 @@ on:
|
|||
jobs:
|
||||
build:
|
||||
runs-on: ubuntu-latest
|
||||
env:
|
||||
PR_NUMBER: ${{github.event.number}}
|
||||
steps:
|
||||
- uses: actions/checkout@v2
|
||||
- uses: c-hive/gha-yarn-cache@v2
|
||||
|
|
|
@ -34,18 +34,43 @@ limitations under the License.
|
|||
transition: opacity 300ms ease;
|
||||
}
|
||||
|
||||
|
||||
@keyframes mx--anim-pulse {
|
||||
0% { opacity: 1; }
|
||||
50% { opacity: 0.7; }
|
||||
100% { opacity: 1; }
|
||||
}
|
||||
|
||||
@keyframes mx_Dialog_lightbox_background_keyframes {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: $lightbox-background-bg-opacity;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes mx_ImageView_panel_keyframes {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion) {
|
||||
@keyframes mx--anim-pulse {
|
||||
// Override all keyframes in reduced-motion
|
||||
}
|
||||
|
||||
@keyframes mx_Dialog_lightbox_background_keyframes {
|
||||
// Override all keyframes in reduced-motion
|
||||
}
|
||||
|
||||
@keyframes mx_ImageView_panel_keyframes {
|
||||
// Override all keyframes in reduced-motion
|
||||
}
|
||||
|
||||
.mx_rtg--fade-enter-active {
|
||||
transition: none;
|
||||
}
|
||||
|
|
|
@ -318,6 +318,8 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
|
|||
.mx_Dialog_lightbox .mx_Dialog_background {
|
||||
opacity: $lightbox-background-bg-opacity;
|
||||
background-color: $lightbox-background-bg-color;
|
||||
animation-name: mx_Dialog_lightbox_background_keyframes;
|
||||
animation-duration: 300ms;
|
||||
}
|
||||
|
||||
.mx_Dialog_lightbox .mx_Dialog {
|
||||
|
|
|
@ -183,3 +183,40 @@ limitations under the License.
|
|||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 700px) {
|
||||
.mx_RoomDirectory_roomMemberCount {
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.mx_AccessibleButton_kind_secondary {
|
||||
padding: 0px !important;
|
||||
}
|
||||
|
||||
.mx_RoomDirectory_join {
|
||||
margin-left: 0px;
|
||||
}
|
||||
|
||||
.mx_RoomDirectory_alias {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.mx_RoomDirectory_roomDescription {
|
||||
padding-bottom: 0px;
|
||||
}
|
||||
|
||||
.mx_RoomDirectory_name {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.mx_RoomDirectory_roomAvatar {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.mx_RoomDirectory_table {
|
||||
grid-template-columns: auto;
|
||||
row-gap: 14px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -18,6 +18,10 @@ $button-size: 32px;
|
|||
$icon-size: 22px;
|
||||
$button-gap: 24px;
|
||||
|
||||
:root {
|
||||
--image-view-panel-height: 68px;
|
||||
}
|
||||
|
||||
.mx_ImageView {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
|
@ -36,14 +40,24 @@ $button-gap: 24px;
|
|||
|
||||
.mx_ImageView_image {
|
||||
flex-shrink: 0;
|
||||
|
||||
&.mx_ImageView_image_animating {
|
||||
transition: transform 200ms ease 0s;
|
||||
}
|
||||
|
||||
&.mx_ImageView_image_animatingLoading {
|
||||
transition: transform 300ms ease 0s;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_ImageView_panel {
|
||||
width: 100%;
|
||||
height: 68px;
|
||||
height: var(--image-view-panel-height);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
animation-name: mx_ImageView_panel_keyframes;
|
||||
animation-duration: 300ms;
|
||||
}
|
||||
|
||||
.mx_ImageView_info_wrapper {
|
||||
|
@ -124,3 +138,13 @@ $button-gap: 24px;
|
|||
mask-size: 40%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion) {
|
||||
.mx_ImageView_image_animating {
|
||||
transition: none !important;
|
||||
}
|
||||
|
||||
.mx_ImageView_image_animatingLoading {
|
||||
transition: none !important;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -20,6 +20,8 @@ import * as sdk from './index';
|
|||
import { _t } from './languageHandler';
|
||||
import { IDialogProps } from "./components/views/dialogs/IDialogProps";
|
||||
|
||||
import { logger } from "matrix-js-sdk/src/logger";
|
||||
|
||||
type AsyncImport<T> = { default: T };
|
||||
|
||||
interface IProps extends IDialogProps {
|
||||
|
@ -47,7 +49,7 @@ export default class AsyncWrapper extends React.Component<IProps, IState> {
|
|||
componentDidMount() {
|
||||
// XXX: temporary logging to try to diagnose
|
||||
// https://github.com/vector-im/element-web/issues/3148
|
||||
console.log('Starting load of AsyncWrapper for modal');
|
||||
logger.log('Starting load of AsyncWrapper for modal');
|
||||
this.props.prom.then((result) => {
|
||||
if (this.unmounted) return;
|
||||
|
||||
|
|
|
@ -286,9 +286,9 @@ export default class CallHandler extends EventEmitter {
|
|||
dis.dispatch({ action: Action.VirtualRoomSupportUpdated });
|
||||
} catch (e) {
|
||||
if (maxTries === 1) {
|
||||
console.log("Failed to check for protocol support and no retries remain: assuming no support", e);
|
||||
logger.log("Failed to check for protocol support and no retries remain: assuming no support", e);
|
||||
} else {
|
||||
console.log("Failed to check for protocol support: will retry", e);
|
||||
logger.log("Failed to check for protocol support: will retry", e);
|
||||
this.pstnSupportCheckTimer = setTimeout(() => {
|
||||
this.checkProtocols(maxTries - 1);
|
||||
}, 10000);
|
||||
|
@ -399,7 +399,7 @@ export default class CallHandler extends EventEmitter {
|
|||
// or chrome doesn't think so and is denying the request. Not sure what
|
||||
// we can really do here...
|
||||
// https://github.com/vector-im/element-web/issues/7657
|
||||
console.log("Unable to play audio clip", e);
|
||||
logger.log("Unable to play audio clip", e);
|
||||
}
|
||||
};
|
||||
if (this.audioPromises.has(audioId)) {
|
||||
|
@ -477,7 +477,7 @@ export default class CallHandler extends EventEmitter {
|
|||
call.on(CallEvent.Replaced, (newCall: MatrixCall) => {
|
||||
if (!this.matchesCallForThisRoom(call)) return;
|
||||
|
||||
console.log(`Call ID ${call.callId} is being replaced by call ID ${newCall.callId}`);
|
||||
logger.log(`Call ID ${call.callId} is being replaced by call ID ${newCall.callId}`);
|
||||
|
||||
if (call.state === CallState.Ringing) {
|
||||
this.pause(AudioID.Ring);
|
||||
|
@ -493,7 +493,7 @@ export default class CallHandler extends EventEmitter {
|
|||
call.on(CallEvent.AssertedIdentityChanged, async () => {
|
||||
if (!this.matchesCallForThisRoom(call)) return;
|
||||
|
||||
console.log(`Call ID ${call.callId} got new asserted identity:`, call.getRemoteAssertedIdentity());
|
||||
logger.log(`Call ID ${call.callId} got new asserted identity:`, call.getRemoteAssertedIdentity());
|
||||
|
||||
const newAssertedIdentity = call.getRemoteAssertedIdentity().id;
|
||||
let newNativeAssertedIdentity = newAssertedIdentity;
|
||||
|
@ -503,7 +503,7 @@ export default class CallHandler extends EventEmitter {
|
|||
newNativeAssertedIdentity = response[0].userid;
|
||||
}
|
||||
}
|
||||
console.log(`Asserted identity ${newAssertedIdentity} mapped to ${newNativeAssertedIdentity}`);
|
||||
logger.log(`Asserted identity ${newAssertedIdentity} mapped to ${newNativeAssertedIdentity}`);
|
||||
|
||||
if (newNativeAssertedIdentity) {
|
||||
this.assertedIdentityNativeUsers[call.callId] = newNativeAssertedIdentity;
|
||||
|
@ -516,11 +516,11 @@ export default class CallHandler extends EventEmitter {
|
|||
await ensureDMExists(MatrixClientPeg.get(), newNativeAssertedIdentity);
|
||||
|
||||
const newMappedRoomId = this.roomIdForCall(call);
|
||||
console.log(`Old room ID: ${mappedRoomId}, new room ID: ${newMappedRoomId}`);
|
||||
logger.log(`Old room ID: ${mappedRoomId}, new room ID: ${newMappedRoomId}`);
|
||||
if (newMappedRoomId !== mappedRoomId) {
|
||||
this.removeCallForRoom(mappedRoomId);
|
||||
mappedRoomId = newMappedRoomId;
|
||||
console.log("Moving call to room " + mappedRoomId);
|
||||
logger.log("Moving call to room " + mappedRoomId);
|
||||
this.addCallForRoom(mappedRoomId, call, true);
|
||||
}
|
||||
}
|
||||
|
@ -656,7 +656,7 @@ export default class CallHandler extends EventEmitter {
|
|||
private setCallState(call: MatrixCall, status: CallState) {
|
||||
const mappedRoomId = CallHandler.sharedInstance().roomIdForCall(call);
|
||||
|
||||
console.log(
|
||||
logger.log(
|
||||
`Call state in ${mappedRoomId} changed to ${status}`,
|
||||
);
|
||||
|
||||
|
@ -681,7 +681,7 @@ export default class CallHandler extends EventEmitter {
|
|||
}
|
||||
|
||||
private removeCallForRoom(roomId: string) {
|
||||
console.log("Removing call for room ", roomId);
|
||||
logger.log("Removing call for room ", roomId);
|
||||
this.calls.delete(roomId);
|
||||
this.emit(CallHandlerEvent.CallsChanged, this.calls);
|
||||
}
|
||||
|
@ -752,7 +752,7 @@ export default class CallHandler extends EventEmitter {
|
|||
logger.debug("Mapped real room " + roomId + " to room ID " + mappedRoomId);
|
||||
|
||||
const timeUntilTurnCresExpire = MatrixClientPeg.get().getTurnServersExpiry() - Date.now();
|
||||
console.log("Current turn creds expire in " + timeUntilTurnCresExpire + " ms");
|
||||
logger.log("Current turn creds expire in " + timeUntilTurnCresExpire + " ms");
|
||||
const call = MatrixClientPeg.get().createCall(mappedRoomId);
|
||||
|
||||
try {
|
||||
|
@ -862,7 +862,7 @@ export default class CallHandler extends EventEmitter {
|
|||
|
||||
const mappedRoomId = CallHandler.sharedInstance().roomIdForCall(call);
|
||||
if (this.getCallForRoom(mappedRoomId)) {
|
||||
console.log(
|
||||
logger.log(
|
||||
"Got incoming call for room " + mappedRoomId +
|
||||
" but there's already a call for this room: ignoring",
|
||||
);
|
||||
|
@ -966,7 +966,7 @@ export default class CallHandler extends EventEmitter {
|
|||
const nativeLookupResults = await this.sipNativeLookup(userId);
|
||||
const lookupSuccess = nativeLookupResults.length > 0 && nativeLookupResults[0].fields.lookup_success;
|
||||
nativeUserId = lookupSuccess ? nativeLookupResults[0].userid : userId;
|
||||
console.log("Looked up " + number + " to " + userId + " and mapped to native user " + nativeUserId);
|
||||
logger.log("Looked up " + number + " to " + userId + " and mapped to native user " + nativeUserId);
|
||||
} else {
|
||||
nativeUserId = userId;
|
||||
}
|
||||
|
@ -1014,7 +1014,7 @@ export default class CallHandler extends EventEmitter {
|
|||
try {
|
||||
await call.transfer(destination);
|
||||
} catch (e) {
|
||||
console.log("Failed to transfer call", e);
|
||||
logger.log("Failed to transfer call", e);
|
||||
Modal.createTrackedDialog('Failed to transfer call', '', ErrorDialog, {
|
||||
title: _t('Transfer Failed'),
|
||||
description: _t('Failed to transfer call'),
|
||||
|
@ -1104,7 +1104,7 @@ export default class CallHandler extends EventEmitter {
|
|||
);
|
||||
|
||||
WidgetUtils.setRoomWidget(roomId, widgetId, WidgetType.JITSI, widgetUrl, 'Jitsi', widgetData).then(() => {
|
||||
console.log('Jitsi widget added');
|
||||
logger.log('Jitsi widget added');
|
||||
}).catch((e) => {
|
||||
if (e.errcode === 'M_FORBIDDEN') {
|
||||
Modal.createTrackedDialog('Call Failed', '', ErrorDialog, {
|
||||
|
@ -1152,11 +1152,11 @@ export default class CallHandler extends EventEmitter {
|
|||
|
||||
private addCallForRoom(roomId: string, call: MatrixCall, changedRooms = false): void {
|
||||
if (this.calls.has(roomId)) {
|
||||
console.log(`Couldn't add call to room ${roomId}: already have a call for this room`);
|
||||
logger.log(`Couldn't add call to room ${roomId}: already have a call for this room`);
|
||||
throw new Error("Already have a call for room " + roomId);
|
||||
}
|
||||
|
||||
console.log("setting call for room " + roomId);
|
||||
logger.log("setting call for room " + roomId);
|
||||
this.calls.set(roomId, call);
|
||||
|
||||
// Should we always emit CallsChanged too?
|
||||
|
|
|
@ -42,6 +42,8 @@ import { BlurhashEncoder } from "./BlurhashEncoder";
|
|||
import SettingsStore from "./settings/SettingsStore";
|
||||
import { decorateStartSendingTime, sendRoundTripMetric } from "./sendTimePerformanceMetrics";
|
||||
|
||||
import { logger } from "matrix-js-sdk/src/logger";
|
||||
|
||||
const MAX_WIDTH = 800;
|
||||
const MAX_HEIGHT = 600;
|
||||
|
||||
|
@ -678,13 +680,13 @@ export default class ContentMessages {
|
|||
private ensureMediaConfigFetched(matrixClient: MatrixClient) {
|
||||
if (this.mediaConfig !== null) return;
|
||||
|
||||
console.log("[Media Config] Fetching");
|
||||
logger.log("[Media Config] Fetching");
|
||||
return matrixClient.getMediaConfig().then((config) => {
|
||||
console.log("[Media Config] Fetched config:", config);
|
||||
logger.log("[Media Config] Fetched config:", config);
|
||||
return config;
|
||||
}).catch(() => {
|
||||
// Media repo can't or won't report limits, so provide an empty object (no limits).
|
||||
console.log("[Media Config] Could not fetch config, so not limiting uploads.");
|
||||
logger.log("[Media Config] Could not fetch config, so not limiting uploads.");
|
||||
return {};
|
||||
}).then((config) => {
|
||||
this.mediaConfig = config;
|
||||
|
|
|
@ -538,7 +538,7 @@ export default class CountlyAnalytics {
|
|||
|
||||
// sanitize the error from identifiers
|
||||
error = await strReplaceAsync(error, /([!@+#]).+?:[\w:.]+/g, async (substring: string, glyph: string) => {
|
||||
return glyph + await hashHex(substring.substring(1));
|
||||
return glyph + (await hashHex(substring.substring(1)));
|
||||
});
|
||||
|
||||
const metrics = this.getMetrics();
|
||||
|
|
|
@ -35,6 +35,8 @@ import { isLoggedIn } from './components/structures/MatrixChat';
|
|||
import { MatrixEvent } from "matrix-js-sdk/src/models/event";
|
||||
import { ActionPayload } from "./dispatcher/payloads";
|
||||
|
||||
import { logger } from "matrix-js-sdk/src/logger";
|
||||
|
||||
const KEY_BACKUP_POLL_INTERVAL = 5 * 60 * 1000;
|
||||
|
||||
export default class DeviceListener {
|
||||
|
@ -100,7 +102,7 @@ export default class DeviceListener {
|
|||
* @param {String[]} deviceIds List of device IDs to dismiss notifications for
|
||||
*/
|
||||
async dismissUnverifiedSessions(deviceIds: Iterable<string>) {
|
||||
console.log("Dismissing unverified sessions: " + Array.from(deviceIds).join(','));
|
||||
logger.log("Dismissing unverified sessions: " + Array.from(deviceIds).join(','));
|
||||
for (const d of deviceIds) {
|
||||
this.dismissed.add(d);
|
||||
}
|
||||
|
@ -211,7 +213,7 @@ export default class DeviceListener {
|
|||
private async recheck() {
|
||||
const cli = MatrixClientPeg.get();
|
||||
|
||||
if (!await cli.doesServerSupportUnstableFeature("org.matrix.e2e_cross_signing")) return;
|
||||
if (!(await cli.doesServerSupportUnstableFeature("org.matrix.e2e_cross_signing"))) return;
|
||||
|
||||
if (!cli.isCryptoEnabled()) return;
|
||||
// don't recheck until the initial sync is complete: lots of account data events will fire
|
||||
|
@ -286,8 +288,8 @@ export default class DeviceListener {
|
|||
}
|
||||
}
|
||||
|
||||
console.log("Old unverified sessions: " + Array.from(oldUnverifiedDeviceIds).join(','));
|
||||
console.log("New unverified sessions: " + Array.from(newUnverifiedDeviceIds).join(','));
|
||||
logger.log("Old unverified sessions: " + Array.from(oldUnverifiedDeviceIds).join(','));
|
||||
logger.log("New unverified sessions: " + Array.from(newUnverifiedDeviceIds).join(','));
|
||||
|
||||
// Display or hide the batch toast for old unverified sessions
|
||||
if (oldUnverifiedDeviceIds.size > 0) {
|
||||
|
|
|
@ -29,6 +29,8 @@ import {
|
|||
} from './utils/IdentityServerUtils';
|
||||
import { abbreviateUrl } from './utils/UrlUtils';
|
||||
|
||||
import { logger } from "matrix-js-sdk/src/logger";
|
||||
|
||||
export class AbortedIdentityActionError extends Error {}
|
||||
|
||||
export default class IdentityAuthClient {
|
||||
|
@ -127,7 +129,7 @@ export default class IdentityAuthClient {
|
|||
await this._matrixClient.getIdentityAccount(token);
|
||||
} catch (e) {
|
||||
if (e.errcode === "M_TERMS_NOT_SIGNED") {
|
||||
console.log("Identity server requires new terms to be agreed to");
|
||||
logger.log("Identity server requires new terms to be agreed to");
|
||||
await startTermsFlow([new Service(
|
||||
SERVICE_TYPES.IS,
|
||||
identityServerUrl,
|
||||
|
@ -141,7 +143,7 @@ export default class IdentityAuthClient {
|
|||
if (
|
||||
!this.tempClient &&
|
||||
!doesAccountDataHaveIdentityServer() &&
|
||||
!await doesIdentityServerHaveTerms(identityServerUrl)
|
||||
!(await doesIdentityServerHaveTerms(identityServerUrl))
|
||||
) {
|
||||
const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
|
||||
const { finished } = Modal.createTrackedDialog('Default identity server terms warning', '',
|
||||
|
|
|
@ -58,6 +58,8 @@ import LazyLoadingDisabledDialog from "./components/views/dialogs/LazyLoadingDis
|
|||
import SessionRestoreErrorDialog from "./components/views/dialogs/SessionRestoreErrorDialog";
|
||||
import StorageEvictedDialog from "./components/views/dialogs/StorageEvictedDialog";
|
||||
|
||||
import { logger } from "matrix-js-sdk/src/logger";
|
||||
|
||||
const HOMESERVER_URL_KEY = "mx_hs_url";
|
||||
const ID_SERVER_URL_KEY = "mx_is_url";
|
||||
|
||||
|
@ -118,7 +120,7 @@ export async function loadSession(opts: ILoadSessionOpts = {}): Promise<boolean>
|
|||
fragmentQueryParams.guest_user_id &&
|
||||
fragmentQueryParams.guest_access_token
|
||||
) {
|
||||
console.log("Using guest access credentials");
|
||||
logger.log("Using guest access credentials");
|
||||
return doSetLoggedIn({
|
||||
userId: fragmentQueryParams.guest_user_id as string,
|
||||
accessToken: fragmentQueryParams.guest_access_token as string,
|
||||
|
@ -204,7 +206,7 @@ export function attemptTokenLogin(
|
|||
initial_device_display_name: defaultDeviceDisplayName,
|
||||
},
|
||||
).then(function(creds) {
|
||||
console.log("Logged in with token");
|
||||
logger.log("Logged in with token");
|
||||
return clearStorage().then(async () => {
|
||||
await persistCredentials(creds);
|
||||
// remember that we just logged in
|
||||
|
@ -273,7 +275,7 @@ function registerAsGuest(
|
|||
isUrl: string,
|
||||
defaultDeviceDisplayName: string,
|
||||
): Promise<boolean> {
|
||||
console.log(`Doing guest login on ${hsUrl}`);
|
||||
logger.log(`Doing guest login on ${hsUrl}`);
|
||||
|
||||
// create a temporary MatrixClient to do the login
|
||||
const client = createClient({
|
||||
|
@ -285,7 +287,7 @@ function registerAsGuest(
|
|||
initial_device_display_name: defaultDeviceDisplayName,
|
||||
},
|
||||
}).then((creds) => {
|
||||
console.log(`Registered as guest: ${creds.user_id}`);
|
||||
logger.log(`Registered as guest: ${creds.user_id}`);
|
||||
return doSetLoggedIn({
|
||||
userId: creds.user_id,
|
||||
deviceId: creds.device_id,
|
||||
|
@ -411,27 +413,27 @@ export async function restoreFromLocalStorage(opts?: { ignoreGuest?: boolean }):
|
|||
|
||||
if (accessToken && userId && hsUrl) {
|
||||
if (ignoreGuest && isGuest) {
|
||||
console.log("Ignoring stored guest account: " + userId);
|
||||
logger.log("Ignoring stored guest account: " + userId);
|
||||
return false;
|
||||
}
|
||||
|
||||
let decryptedAccessToken = accessToken;
|
||||
const pickleKey = await PlatformPeg.get().getPickleKey(userId, deviceId);
|
||||
if (pickleKey) {
|
||||
console.log("Got pickle key");
|
||||
logger.log("Got pickle key");
|
||||
if (typeof accessToken !== "string") {
|
||||
const encrKey = await pickleKeyToAesKey(pickleKey);
|
||||
decryptedAccessToken = await decryptAES(accessToken, encrKey, "access_token");
|
||||
encrKey.fill(0);
|
||||
}
|
||||
} else {
|
||||
console.log("No pickle key available");
|
||||
logger.log("No pickle key available");
|
||||
}
|
||||
|
||||
const freshLogin = sessionStorage.getItem("mx_fresh_login") === "true";
|
||||
sessionStorage.removeItem("mx_fresh_login");
|
||||
|
||||
console.log(`Restoring session for ${userId}`);
|
||||
logger.log(`Restoring session for ${userId}`);
|
||||
await doSetLoggedIn({
|
||||
userId: userId,
|
||||
deviceId: deviceId,
|
||||
|
@ -444,7 +446,7 @@ export async function restoreFromLocalStorage(opts?: { ignoreGuest?: boolean }):
|
|||
}, false);
|
||||
return true;
|
||||
} else {
|
||||
console.log("No previous session found.");
|
||||
logger.log("No previous session found.");
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
@ -488,9 +490,9 @@ export async function setLoggedIn(credentials: IMatrixClientCreds): Promise<Matr
|
|||
: null;
|
||||
|
||||
if (pickleKey) {
|
||||
console.log("Created pickle key");
|
||||
logger.log("Created pickle key");
|
||||
} else {
|
||||
console.log("Pickle key not created");
|
||||
logger.log("Pickle key not created");
|
||||
}
|
||||
|
||||
return doSetLoggedIn(Object.assign({}, credentials, { pickleKey }), true);
|
||||
|
@ -544,7 +546,7 @@ async function doSetLoggedIn(
|
|||
|
||||
const softLogout = isSoftLogout();
|
||||
|
||||
console.log(
|
||||
logger.log(
|
||||
"setLoggedIn: mxid: " + credentials.userId +
|
||||
" deviceId: " + credentials.deviceId +
|
||||
" guest: " + credentials.guest +
|
||||
|
@ -689,7 +691,7 @@ async function persistCredentials(credentials: IMatrixClientCreds): Promise<void
|
|||
|
||||
SecurityCustomisations.persistCredentials?.(credentials);
|
||||
|
||||
console.log(`Session persisted for ${credentials.userId}`);
|
||||
logger.log(`Session persisted for ${credentials.userId}`);
|
||||
}
|
||||
|
||||
let _isLoggingOut = false;
|
||||
|
@ -726,7 +728,7 @@ export function logout(): void {
|
|||
// token still valid, but we should fix this by having access
|
||||
// tokens expire (and if you really think you've been compromised,
|
||||
// change your password).
|
||||
console.log("Failed to call logout API: token will not be invalidated");
|
||||
logger.log("Failed to call logout API: token will not be invalidated");
|
||||
onLoggedOut();
|
||||
},
|
||||
);
|
||||
|
@ -742,7 +744,7 @@ export function softLogout(): void {
|
|||
|
||||
// Dev note: please keep this log line around. It can be useful for track down
|
||||
// random clients stopping in the middle of the logs.
|
||||
console.log("Soft logout initiated");
|
||||
logger.log("Soft logout initiated");
|
||||
_isLoggingOut = true; // to avoid repeated flags
|
||||
// Ensure that we dispatch a view change **before** stopping the client so
|
||||
// so that React components unmount first. This avoids React soft crashes
|
||||
|
@ -768,7 +770,7 @@ export function isLoggingOut(): boolean {
|
|||
* syncing the client.
|
||||
*/
|
||||
async function startMatrixClient(startSyncing = true): Promise<void> {
|
||||
console.log(`Lifecycle: Starting MatrixClient`);
|
||||
logger.log(`Lifecycle: Starting MatrixClient`);
|
||||
|
||||
// dispatch this before starting the matrix client: it's used
|
||||
// to add listeners for the 'sync' event so otherwise we'd have
|
||||
|
|
10
src/Login.ts
10
src/Login.ts
|
@ -21,6 +21,8 @@ import { MatrixClient } from "matrix-js-sdk/src/client";
|
|||
import { IMatrixClientCreds } from "./MatrixClientPeg";
|
||||
import SecurityCustomisations from "./customisations/Security";
|
||||
|
||||
import { logger } from "matrix-js-sdk/src/logger";
|
||||
|
||||
interface ILoginOptions {
|
||||
defaultDeviceDisplayName?: string;
|
||||
}
|
||||
|
@ -166,7 +168,7 @@ export default class Login {
|
|||
return sendLoginRequest(
|
||||
this.fallbackHsUrl, this.isUrl, 'm.login.password', loginParams,
|
||||
).catch((fallbackError) => {
|
||||
console.log("fallback HS login failed", fallbackError);
|
||||
logger.log("fallback HS login failed", fallbackError);
|
||||
// throw the original error
|
||||
throw originalError;
|
||||
});
|
||||
|
@ -184,7 +186,7 @@ export default class Login {
|
|||
}
|
||||
throw originalLoginError;
|
||||
}).catch((error) => {
|
||||
console.log("Login failed", error);
|
||||
logger.log("Login failed", error);
|
||||
throw error;
|
||||
});
|
||||
}
|
||||
|
@ -218,12 +220,12 @@ export async function sendLoginRequest(
|
|||
if (wellknown) {
|
||||
if (wellknown["m.homeserver"] && wellknown["m.homeserver"]["base_url"]) {
|
||||
hsUrl = wellknown["m.homeserver"]["base_url"];
|
||||
console.log(`Overrode homeserver setting with ${hsUrl} from login response`);
|
||||
logger.log(`Overrode homeserver setting with ${hsUrl} from login response`);
|
||||
}
|
||||
if (wellknown["m.identity_server"] && wellknown["m.identity_server"]["base_url"]) {
|
||||
// TODO: should we prompt here?
|
||||
isUrl = wellknown["m.identity_server"]["base_url"];
|
||||
console.log(`Overrode IS setting with ${isUrl} from login response`);
|
||||
logger.log(`Overrode IS setting with ${isUrl} from login response`);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -36,6 +36,8 @@ import { crossSigningCallbacks, tryToUnlockSecretStorageWithDehydrationKey } fro
|
|||
import { SHOW_QR_CODE_METHOD } from "matrix-js-sdk/src/crypto/verification/QRCode";
|
||||
import SecurityCustomisations from "./customisations/Security";
|
||||
|
||||
import { logger } from "matrix-js-sdk/src/logger";
|
||||
|
||||
export interface IMatrixClientCreds {
|
||||
homeserverUrl: string;
|
||||
identityServerUrl: string;
|
||||
|
@ -166,7 +168,7 @@ class MatrixClientPegClass implements IMatrixClientPeg {
|
|||
for (const dbType of ['indexeddb', 'memory']) {
|
||||
try {
|
||||
const promise = this.matrixClient.store.startup();
|
||||
console.log("MatrixClientPeg: waiting for MatrixClient store to initialise");
|
||||
logger.log("MatrixClientPeg: waiting for MatrixClient store to initialise");
|
||||
await promise;
|
||||
break;
|
||||
} catch (err) {
|
||||
|
@ -225,9 +227,9 @@ class MatrixClientPegClass implements IMatrixClientPeg {
|
|||
public async start(): Promise<any> {
|
||||
const opts = await this.assign();
|
||||
|
||||
console.log(`MatrixClientPeg: really starting MatrixClient`);
|
||||
logger.log(`MatrixClientPeg: really starting MatrixClient`);
|
||||
await this.get().startClient(opts);
|
||||
console.log(`MatrixClientPeg: MatrixClient started`);
|
||||
logger.log(`MatrixClientPeg: MatrixClient started`);
|
||||
}
|
||||
|
||||
public getCredentials(): IMatrixClientCreds {
|
||||
|
|
|
@ -38,6 +38,8 @@ import UserActivity from "./UserActivity";
|
|||
import { mediaFromMxc } from "./customisations/Media";
|
||||
import ErrorDialog from "./components/views/dialogs/ErrorDialog";
|
||||
|
||||
import { logger } from "matrix-js-sdk/src/logger";
|
||||
|
||||
/*
|
||||
* Dispatches:
|
||||
* {
|
||||
|
@ -160,7 +162,7 @@ export const Notifier = {
|
|||
|
||||
_playAudioNotification: async function(ev: MatrixEvent, room: Room) {
|
||||
const sound = this.getSoundForRoom(room.roomId);
|
||||
console.log(`Got sound ${sound && sound.name || "default"} for ${room.roomId}`);
|
||||
logger.log(`Got sound ${sound && sound.name || "default"} for ${room.roomId}`);
|
||||
|
||||
try {
|
||||
const selector =
|
||||
|
|
|
@ -21,6 +21,8 @@ import SettingsStore from './settings/SettingsStore';
|
|||
import { MatrixClientPeg } from "./MatrixClientPeg";
|
||||
import { MatrixClient } from "matrix-js-sdk/src/client";
|
||||
|
||||
import { logger } from "matrix-js-sdk/src/logger";
|
||||
|
||||
/* Posthog analytics tracking.
|
||||
*
|
||||
* Anonymity behaviour is as follows:
|
||||
|
@ -175,7 +177,7 @@ export class PosthogAnalytics {
|
|||
// $redacted_current_url is injected by this class earlier in capture(), as its generation
|
||||
// is async and can't be done in this non-async callback.
|
||||
if (!properties['$redacted_current_url']) {
|
||||
console.log("$redacted_current_url not set in sanitizeProperties, will drop $current_url entirely");
|
||||
logger.log("$redacted_current_url not set in sanitizeProperties, will drop $current_url entirely");
|
||||
}
|
||||
properties['$current_url'] = properties['$redacted_current_url'];
|
||||
delete properties['$redacted_current_url'];
|
||||
|
@ -291,7 +293,7 @@ export class PosthogAnalytics {
|
|||
} catch (e) {
|
||||
// The above could fail due to network requests, but not essential to starting the application,
|
||||
// so swallow it.
|
||||
console.log("Unable to identify user for tracking" + e.toString());
|
||||
logger.log("Unable to identify user for tracking" + e.toString());
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -20,6 +20,8 @@ import { Room } from 'matrix-js-sdk/src/models/room';
|
|||
import { MatrixClientPeg } from './MatrixClientPeg';
|
||||
import dis from './dispatcher/dispatcher';
|
||||
|
||||
import { logger } from "matrix-js-sdk/src/logger";
|
||||
|
||||
export default class Resend {
|
||||
static resendUnsentEvents(room: Room): Promise<void[]> {
|
||||
return Promise.all(room.getPendingEvents().filter(function(ev: MatrixEvent) {
|
||||
|
@ -47,7 +49,7 @@ export default class Resend {
|
|||
}, function(err: Error) {
|
||||
// XXX: temporary logging to try to diagnose
|
||||
// https://github.com/vector-im/element-web/issues/3148
|
||||
console.log('Resend got send failure: ' + err.name + '(' + err + ')');
|
||||
logger.log('Resend got send failure: ' + err.name + '(' + err + ')');
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
@ -25,6 +25,8 @@ import { WidgetType } from "./widgets/WidgetType";
|
|||
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";
|
||||
|
||||
// The version of the integration manager API we're intending to work with
|
||||
const imApiVersion = "1.1";
|
||||
|
||||
|
@ -136,7 +138,7 @@ export default class ScalarAuthClient {
|
|||
return token;
|
||||
}).catch((e) => {
|
||||
if (e instanceof TermsNotSignedError) {
|
||||
console.log("Integration manager requires new terms to be agreed to");
|
||||
logger.log("Integration manager requires new terms to be agreed to");
|
||||
// The terms endpoints are new and so live on standard _matrix prefixes,
|
||||
// but IM rest urls are currently configured with paths, so remove the
|
||||
// path from the base URL before passing it to the js-sdk
|
||||
|
|
|
@ -245,6 +245,8 @@ import { IntegrationManagers } from "./integrations/IntegrationManagers";
|
|||
import { WidgetType } from "./widgets/WidgetType";
|
||||
import { objectClone } from "./utils/objects";
|
||||
|
||||
import { logger } from "matrix-js-sdk/src/logger";
|
||||
|
||||
function sendResponse(event, res) {
|
||||
const data = objectClone(event.data);
|
||||
data.response = res;
|
||||
|
@ -266,7 +268,7 @@ function sendError(event, msg, nestedError) {
|
|||
}
|
||||
|
||||
function inviteUser(event, roomId, userId) {
|
||||
console.log(`Received request to invite ${userId} into room ${roomId}`);
|
||||
logger.log(`Received request to invite ${userId} into room ${roomId}`);
|
||||
const client = MatrixClientPeg.get();
|
||||
if (!client) {
|
||||
sendError(event, _t('You need to be logged in.'));
|
||||
|
@ -400,7 +402,7 @@ function setPlumbingState(event, roomId, status) {
|
|||
if (typeof status !== 'string') {
|
||||
throw new Error('Plumbing state status should be a string');
|
||||
}
|
||||
console.log(`Received request to set plumbing state to status "${status}" in room ${roomId}`);
|
||||
logger.log(`Received request to set plumbing state to status "${status}" in room ${roomId}`);
|
||||
const client = MatrixClientPeg.get();
|
||||
if (!client) {
|
||||
sendError(event, _t('You need to be logged in.'));
|
||||
|
@ -416,7 +418,7 @@ function setPlumbingState(event, roomId, status) {
|
|||
}
|
||||
|
||||
function setBotOptions(event, roomId, userId) {
|
||||
console.log(`Received request to set options for bot ${userId} in room ${roomId}`);
|
||||
logger.log(`Received request to set options for bot ${userId} in room ${roomId}`);
|
||||
const client = MatrixClientPeg.get();
|
||||
if (!client) {
|
||||
sendError(event, _t('You need to be logged in.'));
|
||||
|
@ -437,7 +439,7 @@ function setBotPower(event, roomId, userId, level) {
|
|||
return;
|
||||
}
|
||||
|
||||
console.log(`Received request to set power level to ${level} for bot ${userId} in room ${roomId}.`);
|
||||
logger.log(`Received request to set power level to ${level} for bot ${userId} in room ${roomId}.`);
|
||||
const client = MatrixClientPeg.get();
|
||||
if (!client) {
|
||||
sendError(event, _t('You need to be logged in.'));
|
||||
|
@ -463,17 +465,17 @@ function setBotPower(event, roomId, userId, level) {
|
|||
}
|
||||
|
||||
function getMembershipState(event, roomId, userId) {
|
||||
console.log(`membership_state of ${userId} in room ${roomId} requested.`);
|
||||
logger.log(`membership_state of ${userId} in room ${roomId} requested.`);
|
||||
returnStateEvent(event, roomId, "m.room.member", userId);
|
||||
}
|
||||
|
||||
function getJoinRules(event, roomId) {
|
||||
console.log(`join_rules of ${roomId} requested.`);
|
||||
logger.log(`join_rules of ${roomId} requested.`);
|
||||
returnStateEvent(event, roomId, "m.room.join_rules", "");
|
||||
}
|
||||
|
||||
function botOptions(event, roomId, userId) {
|
||||
console.log(`bot_options of ${userId} in room ${roomId} requested.`);
|
||||
logger.log(`bot_options of ${userId} in room ${roomId} requested.`);
|
||||
returnStateEvent(event, roomId, "m.room.bot.options", "_" + userId);
|
||||
}
|
||||
|
||||
|
|
|
@ -31,6 +31,8 @@ import SettingsStore from "./settings/SettingsStore";
|
|||
import SecurityCustomisations from "./customisations/Security";
|
||||
import { DeviceTrustLevel } from 'matrix-js-sdk/src/crypto/CrossSigning';
|
||||
|
||||
import { logger } from "matrix-js-sdk/src/logger";
|
||||
|
||||
// This stores the secret storage private keys in memory for the JS SDK. This is
|
||||
// only meant to act as a cache to avoid prompting the user multiple times
|
||||
// during the same single operation. Use `accessSecretStorage` below to scope a
|
||||
|
@ -136,7 +138,7 @@ async function getSecretStorageKey(
|
|||
|
||||
const keyFromCustomisations = SecurityCustomisations.getSecretStorageKey?.();
|
||||
if (keyFromCustomisations) {
|
||||
console.log("Using key from security customisations (secret storage)");
|
||||
logger.log("Using key from security customisations (secret storage)");
|
||||
cacheSecretStorageKey(keyId, keyInfo, keyFromCustomisations);
|
||||
return [keyId, keyFromCustomisations];
|
||||
}
|
||||
|
@ -186,7 +188,7 @@ export async function getDehydrationKey(
|
|||
): Promise<Uint8Array> {
|
||||
const keyFromCustomisations = SecurityCustomisations.getSecretStorageKey?.();
|
||||
if (keyFromCustomisations) {
|
||||
console.log("Using key from security customisations (dehydration)");
|
||||
logger.log("Using key from security customisations (dehydration)");
|
||||
return keyFromCustomisations;
|
||||
}
|
||||
|
||||
|
@ -248,13 +250,13 @@ async function onSecretRequested(
|
|||
name: string,
|
||||
deviceTrust: DeviceTrustLevel,
|
||||
): Promise<string> {
|
||||
console.log("onSecretRequested", userId, deviceId, requestId, name, deviceTrust);
|
||||
logger.log("onSecretRequested", userId, deviceId, requestId, name, deviceTrust);
|
||||
const client = MatrixClientPeg.get();
|
||||
if (userId !== client.getUserId()) {
|
||||
return;
|
||||
}
|
||||
if (!deviceTrust || !deviceTrust.isVerified()) {
|
||||
console.log(`Ignoring secret request from untrusted device ${deviceId}`);
|
||||
logger.log(`Ignoring secret request from untrusted device ${deviceId}`);
|
||||
return;
|
||||
}
|
||||
if (
|
||||
|
@ -267,7 +269,7 @@ async function onSecretRequested(
|
|||
const keyId = name.replace("m.cross_signing.", "");
|
||||
const key = await callbacks.getCrossSigningKeyCache(keyId);
|
||||
if (!key) {
|
||||
console.log(
|
||||
logger.log(
|
||||
`${keyId} requested by ${deviceId}, but not found in cache`,
|
||||
);
|
||||
}
|
||||
|
@ -275,7 +277,7 @@ async function onSecretRequested(
|
|||
} else if (name === "m.megolm_backup.v1") {
|
||||
const key = await client.crypto.getSessionBackupPrivateKey();
|
||||
if (!key) {
|
||||
console.log(
|
||||
logger.log(
|
||||
`session backup key requested by ${deviceId}, but not found in cache`,
|
||||
);
|
||||
}
|
||||
|
@ -329,7 +331,7 @@ export async function accessSecretStorage(func = async () => { }, forceReset = f
|
|||
const cli = MatrixClientPeg.get();
|
||||
secretStorageBeingAccessed = true;
|
||||
try {
|
||||
if (!await cli.hasSecretStorageKey() || forceReset) {
|
||||
if (!(await cli.hasSecretStorageKey()) || forceReset) {
|
||||
// This dialog calls bootstrap itself after guiding the user through
|
||||
// passphrase creation.
|
||||
const { finished } = Modal.createTrackedDialogAsync('Create Secret Storage dialog', '',
|
||||
|
@ -383,12 +385,12 @@ export async function accessSecretStorage(func = async () => { }, forceReset = f
|
|||
if (secretStorageKeyInfo[keyId] && secretStorageKeyInfo[keyId].passphrase) {
|
||||
dehydrationKeyInfo = { passphrase: secretStorageKeyInfo[keyId].passphrase };
|
||||
}
|
||||
console.log("Setting dehydration key");
|
||||
logger.log("Setting dehydration key");
|
||||
await cli.setDehydrationKey(secretStorageKeys[keyId], dehydrationKeyInfo, "Backup device");
|
||||
} else if (!keyId) {
|
||||
console.warn("Not setting dehydration key: no SSSS key found");
|
||||
} else {
|
||||
console.log("Not setting dehydration key: feature disabled");
|
||||
logger.log("Not setting dehydration key: feature disabled");
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -416,8 +418,8 @@ export async function tryToUnlockSecretStorageWithDehydrationKey(
|
|||
): Promise<void> {
|
||||
const key = dehydrationCache.key;
|
||||
let restoringBackup = false;
|
||||
if (key && await client.isSecretStorageReady()) {
|
||||
console.log("Trying to set up cross-signing using dehydration key");
|
||||
if (key && (await client.isSecretStorageReady())) {
|
||||
logger.log("Trying to set up cross-signing using dehydration key");
|
||||
secretStorageBeingAccessed = true;
|
||||
nonInteractive = true;
|
||||
try {
|
||||
|
|
|
@ -55,6 +55,8 @@ import RoomUpgradeWarningDialog from "./components/views/dialogs/RoomUpgradeWarn
|
|||
import InfoDialog from "./components/views/dialogs/InfoDialog";
|
||||
import SlashCommandHelpDialog from "./components/views/dialogs/SlashCommandHelpDialog";
|
||||
|
||||
import { logger } from "matrix-js-sdk/src/logger";
|
||||
|
||||
// XXX: workaround for https://github.com/microsoft/TypeScript/issues/31816
|
||||
interface HTMLInputEvent extends Event {
|
||||
target: HTMLInputElement & EventTarget;
|
||||
|
@ -291,7 +293,7 @@ export const Commands = [
|
|||
const cli = MatrixClientPeg.get();
|
||||
const ev = cli.getRoom(roomId).currentState.getStateEvents('m.room.member', cli.getUserId());
|
||||
const content = {
|
||||
...ev ? ev.getContent() : { membership: 'join' },
|
||||
...(ev ? ev.getContent() : { membership: 'join' }),
|
||||
displayname: args,
|
||||
};
|
||||
return success(cli.sendStateEvent(roomId, 'm.room.member', content, cli.getUserId()));
|
||||
|
@ -335,7 +337,7 @@ export const Commands = [
|
|||
if (!url) return;
|
||||
const ev = room.currentState.getStateEvents('m.room.member', userId);
|
||||
const content = {
|
||||
...ev ? ev.getContent() : { membership: 'join' },
|
||||
...(ev ? ev.getContent() : { membership: 'join' }),
|
||||
avatar_url: url,
|
||||
};
|
||||
return cli.sendStateEvent(roomId, 'm.room.member', content, userId);
|
||||
|
@ -801,7 +803,7 @@ export const Commands = [
|
|||
const iframe = embed.childNodes[0] as ChildElement;
|
||||
if (iframe.tagName.toLowerCase() === 'iframe' && iframe.attrs) {
|
||||
const srcAttr = iframe.attrs.find(a => a.name === 'src');
|
||||
console.log("Pulling URL out of iframe (embed code)");
|
||||
logger.log("Pulling URL out of iframe (embed code)");
|
||||
widgetUrl = srcAttr.value;
|
||||
}
|
||||
}
|
||||
|
@ -821,7 +823,7 @@ export const Commands = [
|
|||
// Make the widget a Jitsi widget if it looks like a Jitsi widget
|
||||
const jitsiData = Jitsi.getInstance().parsePreferredConferenceUrl(widgetUrl);
|
||||
if (jitsiData) {
|
||||
console.log("Making /addwidget widget a Jitsi conference");
|
||||
logger.log("Making /addwidget widget a Jitsi conference");
|
||||
type = WidgetType.JITSI;
|
||||
name = "Jitsi Conference";
|
||||
data = jitsiData;
|
||||
|
|
|
@ -21,6 +21,8 @@ import { MatrixClientPeg } from './MatrixClientPeg';
|
|||
import * as sdk from '.';
|
||||
import Modal from './Modal';
|
||||
|
||||
import { logger } from "matrix-js-sdk/src/logger";
|
||||
|
||||
export class TermsNotSignedError extends Error {}
|
||||
|
||||
/**
|
||||
|
@ -140,11 +142,11 @@ export async function startTermsFlow(
|
|||
const numAcceptedBeforeAgreement = agreedUrlSet.size;
|
||||
if (unagreedPoliciesAndServicePairs.length > 0) {
|
||||
const newlyAgreedUrls = await interactionCallback(unagreedPoliciesAndServicePairs, [...agreedUrlSet]);
|
||||
console.log("User has agreed to URLs", newlyAgreedUrls);
|
||||
logger.log("User has agreed to URLs", newlyAgreedUrls);
|
||||
// Merge with previously agreed URLs
|
||||
newlyAgreedUrls.forEach(url => agreedUrlSet.add(url));
|
||||
} else {
|
||||
console.log("User has already agreed to all required policies");
|
||||
logger.log("User has already agreed to all required policies");
|
||||
}
|
||||
|
||||
// We only ever add to the set of URLs, so if anything has changed then we'd see a different length
|
||||
|
@ -188,7 +190,7 @@ export function dialogTermsInteractionCallback(
|
|||
extraClassNames?: string,
|
||||
): Promise<string[]> {
|
||||
return new Promise((resolve, reject) => {
|
||||
console.log("Terms that need agreement", policiesAndServicePairs);
|
||||
logger.log("Terms that need agreement", policiesAndServicePairs);
|
||||
// FIXME: Using an import will result in test failures
|
||||
const TermsDialog = sdk.getComponent("views.dialogs.TermsDialog");
|
||||
|
||||
|
|
|
@ -20,6 +20,8 @@ import DMRoomMap from "./utils/DMRoomMap";
|
|||
import CallHandler, { VIRTUAL_ROOM_EVENT_TYPE } from './CallHandler';
|
||||
import { Room } from 'matrix-js-sdk/src/models/room';
|
||||
|
||||
import { logger } from "matrix-js-sdk/src/logger";
|
||||
|
||||
// Functions for mapping virtual users & rooms. Currently the only lookup
|
||||
// is sip virtual: there could be others in the future.
|
||||
|
||||
|
@ -59,7 +61,7 @@ export default class VoipUserMapper {
|
|||
public nativeRoomForVirtualRoom(roomId: string): string {
|
||||
const cachedNativeRoomId = this.virtualToNativeRoomIdCache.get(roomId);
|
||||
if (cachedNativeRoomId) {
|
||||
console.log(
|
||||
logger.log(
|
||||
"Returning native room ID " + cachedNativeRoomId + " for virtual room ID " + roomId + " from cache",
|
||||
);
|
||||
return cachedNativeRoomId;
|
||||
|
@ -98,7 +100,7 @@ export default class VoipUserMapper {
|
|||
if (!CallHandler.sharedInstance().getSupportsVirtualRooms()) return;
|
||||
|
||||
const inviterId = invitedRoom.getDMInviter();
|
||||
console.log(`Checking virtual-ness of room ID ${invitedRoom.roomId}, invited by ${inviterId}`);
|
||||
logger.log(`Checking virtual-ness of room ID ${invitedRoom.roomId}, invited by ${inviterId}`);
|
||||
const result = await CallHandler.sharedInstance().sipNativeLookup(inviterId);
|
||||
if (result.length === 0) {
|
||||
return;
|
||||
|
|
|
@ -26,10 +26,9 @@ import { SettingLevel } from "../../../../settings/SettingLevel";
|
|||
import Field from '../../../../components/views/elements/Field';
|
||||
import BaseDialog from "../../../../components/views/dialogs/BaseDialog";
|
||||
import DialogButtons from "../../../../components/views/elements/DialogButtons";
|
||||
import { IDialogProps } from "../../../../components/views/dialogs/IDialogProps";
|
||||
|
||||
interface IProps {
|
||||
onFinished: (confirmed: boolean) => void;
|
||||
}
|
||||
interface IProps extends IDialogProps {}
|
||||
|
||||
interface IState {
|
||||
eventIndexSize: number;
|
||||
|
|
|
@ -34,6 +34,8 @@ import RestoreKeyBackupDialog from "../../../../components/views/dialogs/securit
|
|||
import { getSecureBackupSetupMethods, isSecureBackupRequired } from '../../../../utils/WellKnownUtils';
|
||||
import SecurityCustomisations from "../../../../customisations/Security";
|
||||
|
||||
import { logger } from "matrix-js-sdk/src/logger";
|
||||
|
||||
const PHASE_LOADING = 0;
|
||||
const PHASE_LOADERROR = 1;
|
||||
const PHASE_CHOOSE_KEY_PASSPHRASE = 2;
|
||||
|
@ -122,7 +124,7 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
|
|||
_getInitialPhase() {
|
||||
const keyFromCustomisations = SecurityCustomisations.createSecretStorageKey?.();
|
||||
if (keyFromCustomisations) {
|
||||
console.log("Created key via customisations, jumping to bootstrap step");
|
||||
logger.log("Created key via customisations, jumping to bootstrap step");
|
||||
this._recoveryKey = {
|
||||
privateKey: keyFromCustomisations,
|
||||
};
|
||||
|
@ -138,7 +140,7 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
|
|||
const backupInfo = await MatrixClientPeg.get().getKeyBackupVersion();
|
||||
const backupSigStatus = (
|
||||
// we may not have started crypto yet, in which case we definitely don't trust the backup
|
||||
MatrixClientPeg.get().isCryptoEnabled() && await MatrixClientPeg.get().isKeyBackupTrusted(backupInfo)
|
||||
MatrixClientPeg.get().isCryptoEnabled() && (await MatrixClientPeg.get().isKeyBackupTrusted(backupInfo))
|
||||
);
|
||||
|
||||
const { forceReset } = this.props;
|
||||
|
@ -165,10 +167,10 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
|
|||
// We should never get here: the server should always require
|
||||
// UI auth to upload device signing keys. If we do, we upload
|
||||
// no keys which would be a no-op.
|
||||
console.log("uploadDeviceSigningKeys unexpectedly succeeded without UI auth!");
|
||||
logger.log("uploadDeviceSigningKeys unexpectedly succeeded without UI auth!");
|
||||
} catch (error) {
|
||||
if (!error.data || !error.data.flows) {
|
||||
console.log("uploadDeviceSigningKeys advertised no flows!");
|
||||
logger.log("uploadDeviceSigningKeys advertised no flows!");
|
||||
return;
|
||||
}
|
||||
const canUploadKeysWithPasswordOnly = error.data.flows.some(f => {
|
||||
|
@ -304,7 +306,7 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
|
|||
|
||||
try {
|
||||
if (forceReset) {
|
||||
console.log("Forcing secret storage reset");
|
||||
logger.log("Forcing secret storage reset");
|
||||
await cli.bootstrapSecretStorage({
|
||||
createSecretStorageKey: async () => this._recoveryKey,
|
||||
setupNewKeyBackup: true,
|
||||
|
|
|
@ -23,6 +23,8 @@ import { PlaybackClock } from "./PlaybackClock";
|
|||
import { createAudioContext, decodeOgg } from "./compat";
|
||||
import { clamp } from "../utils/numbers";
|
||||
|
||||
import { logger } from "matrix-js-sdk/src/logger";
|
||||
|
||||
export enum PlaybackState {
|
||||
Decoding = "decoding",
|
||||
Stopped = "stopped", // no progress on timeline
|
||||
|
@ -139,7 +141,7 @@ export class Playback extends EventEmitter implements IDestroyable {
|
|||
// audio buffer in memory, as that can balloon to far greater than the input buffer's
|
||||
// byte length.
|
||||
if (this.buf.byteLength > 5 * 1024 * 1024) { // 5mb
|
||||
console.log("Audio file too large: processing through <audio /> element");
|
||||
logger.log("Audio file too large: processing through <audio /> element");
|
||||
this.element = document.createElement("AUDIO") as HTMLAudioElement;
|
||||
const prom = new Promise((resolve, reject) => {
|
||||
this.element.onloadeddata = () => resolve(null);
|
||||
|
|
|
@ -21,6 +21,8 @@ import decoderWasmPath from 'opus-recorder/dist/decoderWorker.min.wasm';
|
|||
import wavEncoderPath from 'opus-recorder/dist/waveWorker.min.js';
|
||||
import decoderPath from 'opus-recorder/dist/decoderWorker.min.js';
|
||||
|
||||
import { logger } from "matrix-js-sdk/src/logger";
|
||||
|
||||
export function createAudioContext(opts?: AudioContextOptions): AudioContext {
|
||||
if (window.AudioContext) {
|
||||
return new AudioContext(opts);
|
||||
|
@ -38,7 +40,7 @@ export function decodeOgg(audioBuffer: ArrayBuffer): Promise<ArrayBuffer> {
|
|||
// Condensed version of decoder example, using a promise:
|
||||
// https://github.com/chris-rudmin/opus-recorder/blob/master/example/decoder.html
|
||||
return new Promise((resolve) => { // no reject because the workers don't seem to have a fail path
|
||||
console.log("Decoder WASM path: " + decoderWasmPath); // so we use the variable (avoid tree shake)
|
||||
logger.log("Decoder WASM path: " + decoderWasmPath); // so we use the variable (avoid tree shake)
|
||||
const typedArray = new Uint8Array(audioBuffer);
|
||||
const decoderWorker = new Worker(decoderPath);
|
||||
const wavWorker = new Worker(wavEncoderPath);
|
||||
|
|
|
@ -76,7 +76,6 @@ const LeftPanelWidget: React.FC = () => {
|
|||
<AppTile
|
||||
app={app}
|
||||
fullWidth
|
||||
show
|
||||
showMenubar={false}
|
||||
userWidget
|
||||
userId={cli.getUserId()}
|
||||
|
|
|
@ -110,6 +110,8 @@ import { copyPlaintext } from "../../utils/strings";
|
|||
import { PosthogAnalytics } from '../../PosthogAnalytics';
|
||||
import { initSentry } from "../../sentry";
|
||||
|
||||
import { logger } from "matrix-js-sdk/src/logger";
|
||||
|
||||
/** constants for MatrixChat.state.view */
|
||||
export enum Views {
|
||||
// a special initial state which is only used at startup, while we are
|
||||
|
@ -893,12 +895,12 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
|
|||
this.focusComposer = true;
|
||||
|
||||
if (roomInfo.room_alias) {
|
||||
console.log(
|
||||
logger.log(
|
||||
`Switching to room alias ${roomInfo.room_alias} at event ` +
|
||||
roomInfo.event_id,
|
||||
);
|
||||
} else {
|
||||
console.log(`Switching to room id ${roomInfo.room_id} at event ` +
|
||||
logger.log(`Switching to room id ${roomInfo.room_id} at event ` +
|
||||
roomInfo.event_id,
|
||||
);
|
||||
}
|
||||
|
@ -1407,7 +1409,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
|
|||
// such as when laptops unsleep.
|
||||
// https://github.com/vector-im/element-web/issues/3307#issuecomment-282895568
|
||||
cli.setCanResetTimelineCallback((roomId) => {
|
||||
console.log("Request to reset timeline in room ", roomId, " viewing:", this.state.currentRoomId);
|
||||
logger.log("Request to reset timeline in room ", roomId, " viewing:", this.state.currentRoomId);
|
||||
if (roomId !== this.state.currentRoomId) {
|
||||
// It is safe to remove events from rooms we are not viewing.
|
||||
return true;
|
||||
|
|
|
@ -448,7 +448,9 @@ export default class MessagePanel extends React.Component<IProps, IState> {
|
|||
// Always show highlighted event
|
||||
if (this.props.highlightedEventId === mxEv.getId()) return true;
|
||||
|
||||
if (mxEv.replyInThread
|
||||
// Checking if the message has a "parentEventId" as we do not
|
||||
// want to hide the root event of the thread
|
||||
if (mxEv.replyInThread && mxEv.parentEventId
|
||||
&& this.props.hideThreadedMessages
|
||||
&& SettingsStore.getValue("feature_thread")) {
|
||||
return false;
|
||||
|
|
|
@ -91,6 +91,8 @@ import JumpToBottomButton from "../views/rooms/JumpToBottomButton";
|
|||
import TopUnreadMessagesBar from "../views/rooms/TopUnreadMessagesBar";
|
||||
import SpaceStore from "../../stores/SpaceStore";
|
||||
|
||||
import { logger } from "matrix-js-sdk/src/logger";
|
||||
|
||||
const DEBUG = false;
|
||||
let debuglog = function(msg: string) {};
|
||||
|
||||
|
@ -98,7 +100,7 @@ const BROWSER_SUPPORTS_SANDBOX = 'sandbox' in document.createElement('iframe');
|
|||
|
||||
if (DEBUG) {
|
||||
// using bind means that we get to keep useful line numbers in the console
|
||||
debuglog = console.log.bind(console);
|
||||
debuglog = logger.log.bind(console);
|
||||
}
|
||||
|
||||
interface IProps {
|
||||
|
@ -380,7 +382,7 @@ export default class RoomView extends React.Component<IProps, IState> {
|
|||
}
|
||||
|
||||
// Temporary logging to diagnose https://github.com/vector-im/element-web/issues/4307
|
||||
console.log(
|
||||
logger.log(
|
||||
'RVS update:',
|
||||
newState.roomId,
|
||||
newState.roomAlias,
|
||||
|
@ -1399,7 +1401,7 @@ export default class RoomView extends React.Component<IProps, IState> {
|
|||
// As per the spec, an all rooms search can create this condition,
|
||||
// it happens with Seshat but not Synapse.
|
||||
// It will make the result count not match the displayed count.
|
||||
console.log("Hiding search result from an unknown room", roomId);
|
||||
logger.log("Hiding search result from an unknown room", roomId);
|
||||
continue;
|
||||
}
|
||||
|
||||
|
|
|
@ -21,6 +21,8 @@ import { replaceableComponent } from "../../utils/replaceableComponent";
|
|||
import { getKeyBindingsManager, RoomAction } from "../../KeyBindingsManager";
|
||||
import ResizeNotifier from "../../utils/ResizeNotifier";
|
||||
|
||||
import { logger } from "matrix-js-sdk/src/logger";
|
||||
|
||||
const DEBUG_SCROLL = false;
|
||||
|
||||
// The amount of extra scroll distance to allow prior to unfilling.
|
||||
|
@ -38,7 +40,7 @@ const PAGE_SIZE = 400;
|
|||
let debuglog;
|
||||
if (DEBUG_SCROLL) {
|
||||
// using bind means that we get to keep useful line numbers in the console
|
||||
debuglog = console.log.bind(console, "ScrollPanel debuglog:");
|
||||
debuglog = logger.log.bind(console, "ScrollPanel debuglog:");
|
||||
} else {
|
||||
debuglog = function() {};
|
||||
}
|
||||
|
|
|
@ -80,6 +80,8 @@ import Spinner from "../views/elements/Spinner";
|
|||
import GroupAvatar from "../views/avatars/GroupAvatar";
|
||||
import { useDispatcher } from "../../hooks/useDispatcher";
|
||||
|
||||
import { logger } from "matrix-js-sdk/src/logger";
|
||||
|
||||
interface IProps {
|
||||
space: Room;
|
||||
justCreatedOpts?: IOpts;
|
||||
|
@ -696,7 +698,7 @@ const SpaceSetupPrivateInvite = ({ space, onFinished }) => {
|
|||
|
||||
const failedUsers = Object.keys(result.states).filter(a => result.states[a] === "error");
|
||||
if (failedUsers.length > 0) {
|
||||
console.log("Failed to invite users to space: ", result);
|
||||
logger.log("Failed to invite users to space: ", result);
|
||||
setError(_t("Failed to invite the following users to your space: %(csvUsers)s", {
|
||||
csvUsers: failedUsers.join(", "),
|
||||
}));
|
||||
|
|
|
@ -49,6 +49,8 @@ import EditorStateTransfer from '../../utils/EditorStateTransfer';
|
|||
import ErrorDialog from '../views/dialogs/ErrorDialog';
|
||||
import { debounce } from 'lodash';
|
||||
|
||||
import { logger } from "matrix-js-sdk/src/logger";
|
||||
|
||||
const PAGINATE_SIZE = 20;
|
||||
const INITIAL_SIZE = 20;
|
||||
const READ_RECEIPT_INTERVAL_MS = 500;
|
||||
|
@ -60,7 +62,7 @@ const DEBUG = false;
|
|||
let debuglog = function(...s: any[]) {};
|
||||
if (DEBUG) {
|
||||
// using bind means that we get to keep useful line numbers in the console
|
||||
debuglog = console.log.bind(console);
|
||||
debuglog = logger.log.bind(console);
|
||||
}
|
||||
|
||||
interface IProps {
|
||||
|
@ -316,7 +318,7 @@ class TimelinePanel extends React.Component<IProps, IState> {
|
|||
const differentEventId = newProps.eventId != this.props.eventId;
|
||||
const differentHighlightedEventId = newProps.highlightedEventId != this.props.highlightedEventId;
|
||||
if (differentEventId || differentHighlightedEventId) {
|
||||
console.log("TimelinePanel switching to eventId " + newProps.eventId +
|
||||
logger.log("TimelinePanel switching to eventId " + newProps.eventId +
|
||||
" (was " + this.props.eventId + ")");
|
||||
return this.initTimeline(newProps);
|
||||
}
|
||||
|
@ -1098,7 +1100,7 @@ class TimelinePanel extends React.Component<IProps, IState> {
|
|||
// we're in a setState callback, and we know
|
||||
// timelineLoading is now false, so render() should have
|
||||
// mounted the message panel.
|
||||
console.log("can't initialise scroll state because " +
|
||||
logger.log("can't initialise scroll state because " +
|
||||
"messagePanel didn't load");
|
||||
return;
|
||||
}
|
||||
|
|
|
@ -59,6 +59,7 @@ import RoomName from "../views/elements/RoomName";
|
|||
import { replaceableComponent } from "../../utils/replaceableComponent";
|
||||
import InlineSpinner from "../views/elements/InlineSpinner";
|
||||
import TooltipButton from "../views/elements/TooltipButton";
|
||||
import { logger } from "matrix-js-sdk/src/logger";
|
||||
interface IProps {
|
||||
isMinimized: boolean;
|
||||
}
|
||||
|
@ -239,7 +240,7 @@ export default class UserMenu extends React.Component<IProps, IState> {
|
|||
|
||||
// TODO: Archived room view: https://github.com/vector-im/element-web/issues/14038
|
||||
// Note: You'll need to uncomment the button too.
|
||||
console.log("TODO: Show archived rooms");
|
||||
logger.log("TODO: Show archived rooms");
|
||||
};
|
||||
|
||||
private onProvideFeedback = (ev: ButtonEvent) => {
|
||||
|
|
|
@ -38,6 +38,8 @@ import { replaceableComponent } from "../../../utils/replaceableComponent";
|
|||
import AuthBody from "../../views/auth/AuthBody";
|
||||
import AuthHeader from "../../views/auth/AuthHeader";
|
||||
|
||||
import { logger } from "matrix-js-sdk/src/logger";
|
||||
|
||||
// These are used in several places, and come from the js-sdk's autodiscovery
|
||||
// stuff. We define them here so that they'll be picked up by i18n.
|
||||
_td("Invalid homeserver discovery response");
|
||||
|
@ -438,7 +440,7 @@ export default class LoginComponent extends React.PureComponent<IProps, IState>
|
|||
// technically the flow can have multiple steps, but no one does this
|
||||
// for login and loginLogic doesn't support it so we can ignore it.
|
||||
if (!this.stepRendererMap[flow.type]) {
|
||||
console.log("Skipping flow", flow, "due to unsupported login type", flow.type);
|
||||
logger.log("Skipping flow", flow, "due to unsupported login type", flow.type);
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
|
|
|
@ -37,6 +37,8 @@ import AuthHeader from "../../views/auth/AuthHeader";
|
|||
import InteractiveAuth from "../InteractiveAuth";
|
||||
import Spinner from "../../views/elements/Spinner";
|
||||
|
||||
import { logger } from "matrix-js-sdk/src/logger";
|
||||
|
||||
interface IProps {
|
||||
serverConfig: ValidatedServerConfig;
|
||||
defaultDeviceDisplayName: string;
|
||||
|
@ -215,7 +217,7 @@ export default class Registration extends React.Component<IProps, IState> {
|
|||
if (!this.state.doingUIAuth) {
|
||||
await this.makeRegisterRequest(null);
|
||||
// This should never succeed since we specified no auth object.
|
||||
console.log("Expecting 401 from register request but got success!");
|
||||
logger.log("Expecting 401 from register request but got success!");
|
||||
}
|
||||
} catch (e) {
|
||||
if (e.httpStatus === 401) {
|
||||
|
@ -239,7 +241,7 @@ export default class Registration extends React.Component<IProps, IState> {
|
|||
});
|
||||
}
|
||||
} else {
|
||||
console.log("Unable to query for supported registration methods.", e);
|
||||
logger.log("Unable to query for supported registration methods.", e);
|
||||
showGenericError(e);
|
||||
}
|
||||
}
|
||||
|
@ -330,7 +332,7 @@ export default class Registration extends React.Component<IProps, IState> {
|
|||
// the user had a separate guest session they didn't actually mean to replace.
|
||||
const [sessionOwner, sessionIsGuest] = await Lifecycle.getStoredSessionOwner();
|
||||
if (sessionOwner && !sessionIsGuest && sessionOwner !== response.userId) {
|
||||
console.log(
|
||||
logger.log(
|
||||
`Found a session for ${sessionOwner} but ${response.userId} has just registered.`,
|
||||
);
|
||||
newState.differentLoggedInUserId = sessionOwner;
|
||||
|
@ -366,7 +368,7 @@ export default class Registration extends React.Component<IProps, IState> {
|
|||
const emailPusher = pushers[i];
|
||||
emailPusher.data = { brand: this.props.brand };
|
||||
matrixClient.setPusher(emailPusher).then(() => {
|
||||
console.log("Set email branding to " + this.props.brand);
|
||||
logger.log("Set email branding to " + this.props.brand);
|
||||
}, (error) => {
|
||||
console.error("Couldn't set email branding: " + error);
|
||||
});
|
||||
|
|
|
@ -28,6 +28,8 @@ import Spinner from '../../views/elements/Spinner';
|
|||
import { IKeyBackupInfo } from "matrix-js-sdk/src/crypto/keybackup";
|
||||
import { VerificationRequest } from "matrix-js-sdk/src/crypto/verification/request/VerificationRequest";
|
||||
|
||||
import { logger } from "matrix-js-sdk/src/logger";
|
||||
|
||||
function keyHasPassphrase(keyInfo: ISecretStorageKeyInfo): boolean {
|
||||
return Boolean(
|
||||
keyInfo.passphrase &&
|
||||
|
@ -231,7 +233,7 @@ export default class SetupEncryptionBody extends React.Component<IProps, IState>
|
|||
} else if (phase === Phase.Busy || phase === Phase.Loading) {
|
||||
return <Spinner />;
|
||||
} else {
|
||||
console.log(`SetupEncryptionBody: Unknown phase ${phase}`);
|
||||
logger.log(`SetupEncryptionBody: Unknown phase ${phase}`);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -32,6 +32,8 @@ import Spinner from "../../views/elements/Spinner";
|
|||
import AuthHeader from "../../views/auth/AuthHeader";
|
||||
import AuthBody from "../../views/auth/AuthBody";
|
||||
|
||||
import { logger } from "matrix-js-sdk/src/logger";
|
||||
|
||||
const LOGIN_VIEW = {
|
||||
LOADING: 1,
|
||||
PASSWORD: 2,
|
||||
|
@ -103,7 +105,7 @@ export default class SoftLogout extends React.Component<IProps, IState> {
|
|||
onFinished: (wipeData) => {
|
||||
if (!wipeData) return;
|
||||
|
||||
console.log("Clearing data from soft-logged-out session");
|
||||
logger.log("Clearing data from soft-logged-out session");
|
||||
Lifecycle.logout();
|
||||
},
|
||||
});
|
||||
|
|
|
@ -19,6 +19,8 @@ import { _t } from '../../../languageHandler';
|
|||
import CountlyAnalytics from "../../../CountlyAnalytics";
|
||||
import { replaceableComponent } from "../../../utils/replaceableComponent";
|
||||
|
||||
import { logger } from "matrix-js-sdk/src/logger";
|
||||
|
||||
const DIV_ID = 'mx_recaptcha';
|
||||
|
||||
interface ICaptchaFormProps {
|
||||
|
@ -60,7 +62,7 @@ export default class CaptchaForm extends React.Component<ICaptchaFormProps, ICap
|
|||
// already loaded
|
||||
this.onCaptchaLoaded();
|
||||
} else {
|
||||
console.log("Loading recaptcha script...");
|
||||
logger.log("Loading recaptcha script...");
|
||||
window.mxOnRecaptchaLoaded = () => { this.onCaptchaLoaded(); };
|
||||
const scriptTag = document.createElement('script');
|
||||
scriptTag.setAttribute(
|
||||
|
@ -109,7 +111,7 @@ export default class CaptchaForm extends React.Component<ICaptchaFormProps, ICap
|
|||
}
|
||||
|
||||
private onCaptchaLoaded() {
|
||||
console.log("Loaded recaptcha script.");
|
||||
logger.log("Loaded recaptcha script.");
|
||||
try {
|
||||
this.renderRecaptcha(DIV_ID);
|
||||
// clear error if re-rendered
|
||||
|
|
|
@ -29,6 +29,8 @@ import { LocalisedPolicy, Policies } from '../../../Terms';
|
|||
import Field from '../elements/Field';
|
||||
import CaptchaForm from "./CaptchaForm";
|
||||
|
||||
import { logger } from "matrix-js-sdk/src/logger";
|
||||
|
||||
/* This file contains a collection of components which are used by the
|
||||
* InteractiveAuth to prompt the user to enter the information needed
|
||||
* for an auth stage. (The intention is that they could also be used for other
|
||||
|
@ -555,7 +557,7 @@ export class MsisdnAuthEntry extends React.Component<IMsisdnAuthEntryProps, IMsi
|
|||
}
|
||||
} catch (e) {
|
||||
this.props.fail(e);
|
||||
console.log("Failed to submit msisdn token");
|
||||
logger.log("Failed to submit msisdn token");
|
||||
}
|
||||
};
|
||||
|
||||
|
|
|
@ -125,14 +125,14 @@ const CreateSpaceFromCommunityDialog: React.FC<IProps> = ({ matrixClient: cli, g
|
|||
setBusy(true);
|
||||
|
||||
// require & validate the space name field
|
||||
if (!await spaceNameField.current.validate({ allowEmpty: false })) {
|
||||
if (!(await spaceNameField.current.validate({ allowEmpty: false }))) {
|
||||
setBusy(false);
|
||||
spaceNameField.current.focus();
|
||||
spaceNameField.current.validate({ allowEmpty: false, focused: true });
|
||||
return;
|
||||
}
|
||||
// validate the space name alias field but do not require it
|
||||
if (joinRule === JoinRule.Public && !await spaceAliasField.current.validate({ allowEmpty: true })) {
|
||||
if (joinRule === JoinRule.Public && !(await spaceAliasField.current.validate({ allowEmpty: true }))) {
|
||||
setBusy(false);
|
||||
spaceAliasField.current.focus();
|
||||
spaceAliasField.current.validate({ allowEmpty: true, focused: true });
|
||||
|
|
|
@ -64,14 +64,14 @@ const CreateSubspaceDialog: React.FC<IProps> = ({ space, onAddExistingSpaceClick
|
|||
|
||||
setBusy(true);
|
||||
// require & validate the space name field
|
||||
if (!await spaceNameField.current.validate({ allowEmpty: false })) {
|
||||
if (!(await spaceNameField.current.validate({ allowEmpty: false }))) {
|
||||
spaceNameField.current.focus();
|
||||
spaceNameField.current.validate({ allowEmpty: false, focused: true });
|
||||
setBusy(false);
|
||||
return;
|
||||
}
|
||||
// validate the space name alias field but do not require it
|
||||
if (joinRule === JoinRule.Public && !await spaceAliasField.current.validate({ allowEmpty: true })) {
|
||||
if (joinRule === JoinRule.Public && !(await spaceAliasField.current.validate({ allowEmpty: true }))) {
|
||||
spaceAliasField.current.focus();
|
||||
spaceAliasField.current.validate({ allowEmpty: true, focused: true });
|
||||
setBusy(false);
|
||||
|
|
|
@ -23,10 +23,9 @@ import Modal from '../../../Modal';
|
|||
import BaseDialog from "./BaseDialog";
|
||||
import DialogButtons from "../elements/DialogButtons";
|
||||
import QuestionDialog from "./QuestionDialog";
|
||||
import { IDialogProps } from "./IDialogProps";
|
||||
|
||||
interface IProps {
|
||||
onFinished: (success: boolean) => void;
|
||||
}
|
||||
interface IProps extends IDialogProps {}
|
||||
|
||||
const CryptoStoreTooNewDialog: React.FC<IProps> = (props: IProps) => {
|
||||
const brand = SdkConfig.get().brand;
|
||||
|
|
|
@ -44,6 +44,8 @@ import { SettingLevel } from '../../../settings/SettingLevel';
|
|||
import BaseDialog from "./BaseDialog";
|
||||
import TruncatedList from "../elements/TruncatedList";
|
||||
|
||||
import { logger } from "matrix-js-sdk/src/logger";
|
||||
|
||||
interface IGenericEditorProps {
|
||||
onBack: () => void;
|
||||
}
|
||||
|
@ -984,7 +986,7 @@ class SettingsExplorer extends React.PureComponent<IExplorerProps, ISettingsExpl
|
|||
const parsedExplicit = JSON.parse(this.state.explicitValues);
|
||||
const parsedExplicitRoom = JSON.parse(this.state.explicitRoomValues);
|
||||
for (const level of Object.keys(parsedExplicit)) {
|
||||
console.log(`[Devtools] Setting value of ${settingId} at ${level} from user input`);
|
||||
logger.log(`[Devtools] Setting value of ${settingId} at ${level} from user input`);
|
||||
try {
|
||||
const val = parsedExplicit[level];
|
||||
await SettingsStore.setValue(settingId, null, level as SettingLevel, val);
|
||||
|
@ -994,7 +996,7 @@ class SettingsExplorer extends React.PureComponent<IExplorerProps, ISettingsExpl
|
|||
}
|
||||
const roomId = this.props.room.roomId;
|
||||
for (const level of Object.keys(parsedExplicit)) {
|
||||
console.log(`[Devtools] Setting value of ${settingId} at ${level} in ${roomId} from user input`);
|
||||
logger.log(`[Devtools] Setting value of ${settingId} at ${level} in ${roomId} from user input`);
|
||||
try {
|
||||
const val = parsedExplicitRoom[level];
|
||||
await SettingsStore.setValue(settingId, roomId, level as SettingLevel, val);
|
||||
|
|
|
@ -30,6 +30,8 @@ import { IDialogProps } from "./IDialogProps";
|
|||
import { IGeneratedSas, ISasEvent } from "matrix-js-sdk/src/crypto/verification/SAS";
|
||||
import { VerificationBase } from "matrix-js-sdk/src/crypto/verification/Base";
|
||||
|
||||
import { logger } from "matrix-js-sdk/src/logger";
|
||||
|
||||
const PHASE_START = 0;
|
||||
const PHASE_SHOW_SAS = 1;
|
||||
const PHASE_WAIT_FOR_PARTNER_TO_CONFIRM = 2;
|
||||
|
@ -61,7 +63,7 @@ export default class IncomingSasDialog extends React.Component<IProps, IState> {
|
|||
|
||||
let phase = PHASE_START;
|
||||
if (this.props.verifier.hasBeenCancelled) {
|
||||
console.log("Verifier was cancelled in the background.");
|
||||
logger.log("Verifier was cancelled in the background.");
|
||||
phase = PHASE_CANCELLED;
|
||||
}
|
||||
|
||||
|
@ -113,7 +115,7 @@ export default class IncomingSasDialog extends React.Component<IProps, IState> {
|
|||
this.props.verifier.verify().then(() => {
|
||||
this.setState({ phase: PHASE_VERIFIED });
|
||||
}).catch((e) => {
|
||||
console.log("Verification failed", e);
|
||||
logger.log("Verification failed", e);
|
||||
});
|
||||
};
|
||||
|
||||
|
|
|
@ -73,6 +73,8 @@ import BaseDialog from "./BaseDialog";
|
|||
import DialPadBackspaceButton from "../elements/DialPadBackspaceButton";
|
||||
import SpaceStore from "../../../stores/SpaceStore";
|
||||
|
||||
import { logger } from "matrix-js-sdk/src/logger";
|
||||
|
||||
// we have a number of types defined from the Matrix spec which can't reasonably be altered here.
|
||||
/* eslint-disable camelcase */
|
||||
|
||||
|
@ -775,7 +777,7 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
|
|||
invitedUsers.push(addr);
|
||||
}
|
||||
}
|
||||
console.log("Sharing history with", invitedUsers);
|
||||
logger.log("Sharing history with", invitedUsers);
|
||||
cli.sendSharedHistoryKeys(
|
||||
this.props.roomId, invitedUsers,
|
||||
);
|
||||
|
|
|
@ -97,13 +97,13 @@ const LeaveRoomsPicker = ({ space, spaceChildren, roomsToLeave, setRoomsToLeave
|
|||
definitions={[
|
||||
{
|
||||
value: RoomsToLeave.None,
|
||||
label: _t("Don't leave any"),
|
||||
label: _t("Don't leave any rooms"),
|
||||
}, {
|
||||
value: RoomsToLeave.All,
|
||||
label: _t("Leave all rooms and spaces"),
|
||||
label: _t("Leave all rooms"),
|
||||
}, {
|
||||
value: RoomsToLeave.Specific,
|
||||
label: _t("Leave specific rooms and spaces"),
|
||||
label: _t("Leave some rooms"),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
|
@ -166,11 +166,13 @@ const LeaveSpaceDialog: React.FC<IProps> = ({ space, onFinished }) => {
|
|||
>
|
||||
<div className="mx_Dialog_content" id="mx_LeaveSpaceDialog">
|
||||
<p>
|
||||
{ _t("Are you sure you want to leave <spaceName/>?", {}, {
|
||||
{ _t("You are about to leave <spaceName/>.", {}, {
|
||||
spaceName: () => <b>{ space.name }</b>,
|
||||
}) }
|
||||
|
||||
{ rejoinWarning }
|
||||
{ rejoinWarning && (<> </>) }
|
||||
{ spaceChildren.length > 0 && _t("Would you like to leave the rooms in this space?") }
|
||||
</p>
|
||||
|
||||
{ spaceChildren.length > 0 && <LeaveRoomsPicker
|
||||
|
|
|
@ -25,6 +25,8 @@ import { MatrixClientPeg } from '../../../MatrixClientPeg';
|
|||
import RestoreKeyBackupDialog from './security/RestoreKeyBackupDialog';
|
||||
import { replaceableComponent } from "../../../utils/replaceableComponent";
|
||||
|
||||
import { logger } from "matrix-js-sdk/src/logger";
|
||||
|
||||
interface IProps {
|
||||
onFinished: (success: boolean) => void;
|
||||
}
|
||||
|
@ -68,7 +70,7 @@ export default class LogoutDialog extends React.Component<IProps, IState> {
|
|||
backupInfo,
|
||||
});
|
||||
} catch (e) {
|
||||
console.log("Unable to fetch key backup status", e);
|
||||
logger.log("Unable to fetch key backup status", e);
|
||||
this.setState({
|
||||
loading: false,
|
||||
error: e,
|
||||
|
|
|
@ -19,7 +19,7 @@ import { User } from "matrix-js-sdk/src/models/user";
|
|||
|
||||
import { _t } from "../../../languageHandler";
|
||||
import { MatrixClientPeg } from "../../../MatrixClientPeg";
|
||||
import E2EIcon from "../rooms/E2EIcon";
|
||||
import E2EIcon, { E2EState } from "../rooms/E2EIcon";
|
||||
import AccessibleButton from "../elements/AccessibleButton";
|
||||
import BaseDialog from "./BaseDialog";
|
||||
import { IDialogProps } from "./IDialogProps";
|
||||
|
@ -47,7 +47,7 @@ const UntrustedDeviceDialog: React.FC<IProps> = ({ device, user, onFinished }) =
|
|||
onFinished={onFinished}
|
||||
className="mx_UntrustedDeviceDialog"
|
||||
title={<>
|
||||
<E2EIcon status="warning" size={24} hideTooltip={true} />
|
||||
<E2EIcon status={E2EState.Warning} size={24} hideTooltip={true} />
|
||||
{ _t("Not Trusted") }
|
||||
</>}
|
||||
>
|
||||
|
|
|
@ -33,6 +33,7 @@ import MjolnirUserSettingsTab from "../settings/tabs/user/MjolnirUserSettingsTab
|
|||
import { UIFeature } from "../../../settings/UIFeature";
|
||||
import { replaceableComponent } from "../../../utils/replaceableComponent";
|
||||
import BaseDialog from "./BaseDialog";
|
||||
import { IDialogProps } from "./IDialogProps";
|
||||
|
||||
export enum UserTab {
|
||||
General = "USER_GENERAL_TAB",
|
||||
|
@ -47,8 +48,7 @@ export enum UserTab {
|
|||
Help = "USER_HELP_TAB",
|
||||
}
|
||||
|
||||
interface IProps {
|
||||
onFinished: (success: boolean) => void;
|
||||
interface IProps extends IDialogProps {
|
||||
initialTabId?: string;
|
||||
}
|
||||
|
||||
|
|
|
@ -25,6 +25,8 @@ import { IDialogProps } from "./IDialogProps";
|
|||
import BaseDialog from "./BaseDialog";
|
||||
import DialogButtons from "../elements/DialogButtons";
|
||||
|
||||
import { logger } from "matrix-js-sdk/src/logger";
|
||||
|
||||
interface IProps extends IDialogProps {
|
||||
widget: Widget;
|
||||
widgetKind: WidgetKind;
|
||||
|
@ -55,7 +57,7 @@ export default class WidgetOpenIDPermissionsDialog extends React.PureComponent<I
|
|||
|
||||
private onPermissionSelection(allowed: boolean): void {
|
||||
if (this.state.rememberSelection) {
|
||||
console.log(`Remembering ${this.props.widget.id} as allowed=${allowed} for OpenID`);
|
||||
logger.log(`Remembering ${this.props.widget.id} as allowed=${allowed} for OpenID`);
|
||||
|
||||
WidgetPermissionStore.instance.setOIDCState(
|
||||
this.props.widget, this.props.widgetKind, this.props.inRoomId,
|
||||
|
|
|
@ -28,6 +28,8 @@ import Spinner from '../../elements/Spinner';
|
|||
import InteractiveAuthDialog from '../InteractiveAuthDialog';
|
||||
import { replaceableComponent } from "../../../../utils/replaceableComponent";
|
||||
|
||||
import { logger } from "matrix-js-sdk/src/logger";
|
||||
|
||||
interface IProps {
|
||||
accountPassword?: string;
|
||||
tokenLogin?: boolean;
|
||||
|
@ -77,10 +79,10 @@ export default class CreateCrossSigningDialog extends React.PureComponent<IProps
|
|||
// We should never get here: the server should always require
|
||||
// UI auth to upload device signing keys. If we do, we upload
|
||||
// no keys which would be a no-op.
|
||||
console.log("uploadDeviceSigningKeys unexpectedly succeeded without UI auth!");
|
||||
logger.log("uploadDeviceSigningKeys unexpectedly succeeded without UI auth!");
|
||||
} catch (error) {
|
||||
if (!error.data || !error.data.flows) {
|
||||
console.log("uploadDeviceSigningKeys advertised no flows!");
|
||||
logger.log("uploadDeviceSigningKeys advertised no flows!");
|
||||
return;
|
||||
}
|
||||
const canUploadKeysWithPasswordOnly = error.data.flows.some(f => {
|
||||
|
|
|
@ -24,6 +24,7 @@ import { IKeyBackupInfo, IKeyBackupRestoreResult } from "matrix-js-sdk/src/crypt
|
|||
import { ISecretStorageKeyInfo } from "matrix-js-sdk/src/crypto/api";
|
||||
import * as sdk from '../../../../index';
|
||||
import { IDialogProps } from "../IDialogProps";
|
||||
import { logger } from "matrix-js-sdk/src/logger";
|
||||
|
||||
enum RestoreType {
|
||||
Passphrase = "passphrase",
|
||||
|
@ -160,7 +161,7 @@ export default class RestoreKeyBackupDialog extends React.PureComponent<IProps,
|
|||
recoverInfo,
|
||||
});
|
||||
} catch (e) {
|
||||
console.log("Error restoring backup", e);
|
||||
logger.log("Error restoring backup", e);
|
||||
this.setState({
|
||||
loading: false,
|
||||
restoreError: e,
|
||||
|
@ -194,7 +195,7 @@ export default class RestoreKeyBackupDialog extends React.PureComponent<IProps,
|
|||
recoverInfo,
|
||||
});
|
||||
} catch (e) {
|
||||
console.log("Error restoring backup", e);
|
||||
logger.log("Error restoring backup", e);
|
||||
this.setState({
|
||||
loading: false,
|
||||
restoreError: e,
|
||||
|
@ -226,7 +227,7 @@ export default class RestoreKeyBackupDialog extends React.PureComponent<IProps,
|
|||
loading: false,
|
||||
});
|
||||
} catch (e) {
|
||||
console.log("Error restoring backup", e);
|
||||
logger.log("Error restoring backup", e);
|
||||
this.setState({
|
||||
restoreError: e,
|
||||
loading: false,
|
||||
|
@ -248,7 +249,7 @@ export default class RestoreKeyBackupDialog extends React.PureComponent<IProps,
|
|||
});
|
||||
return true;
|
||||
} catch (e) {
|
||||
console.log("restoreWithCachedKey failed:", e);
|
||||
logger.log("restoreWithCachedKey failed:", e);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
@ -262,7 +263,7 @@ export default class RestoreKeyBackupDialog extends React.PureComponent<IProps,
|
|||
const cli = MatrixClientPeg.get();
|
||||
const backupInfo = await cli.getKeyBackupVersion();
|
||||
const has4S = await cli.hasSecretStorageKey();
|
||||
const backupKeyStored = has4S && await cli.isKeyBackupKeyStored();
|
||||
const backupKeyStored = has4S && (await cli.isKeyBackupKeyStored());
|
||||
this.setState({
|
||||
backupInfo,
|
||||
backupKeyStored,
|
||||
|
@ -270,7 +271,7 @@ export default class RestoreKeyBackupDialog extends React.PureComponent<IProps,
|
|||
|
||||
const gotCache = await this.restoreWithCachedKey(backupInfo);
|
||||
if (gotCache) {
|
||||
console.log("RestoreKeyBackupDialog: found cached backup key");
|
||||
logger.log("RestoreKeyBackupDialog: found cached backup key");
|
||||
this.setState({
|
||||
loading: false,
|
||||
});
|
||||
|
@ -287,7 +288,7 @@ export default class RestoreKeyBackupDialog extends React.PureComponent<IProps,
|
|||
loading: false,
|
||||
});
|
||||
} catch (e) {
|
||||
console.log("Error loading backup status", e);
|
||||
logger.log("Error loading backup status", e);
|
||||
this.setState({
|
||||
loadError: e,
|
||||
loading: false,
|
||||
|
|
|
@ -19,7 +19,6 @@ limitations under the License.
|
|||
|
||||
import url from 'url';
|
||||
import React, { createRef } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { MatrixClientPeg } from '../../../MatrixClientPeg';
|
||||
import AccessibleButton from './AccessibleButton';
|
||||
import { _t } from '../../../languageHandler';
|
||||
|
@ -39,33 +38,97 @@ import { MatrixCapabilities } from "matrix-widget-api";
|
|||
import RoomWidgetContextMenu from "../context_menus/WidgetContextMenu";
|
||||
import WidgetAvatar from "../avatars/WidgetAvatar";
|
||||
import { replaceableComponent } from "../../../utils/replaceableComponent";
|
||||
import { Room } from "matrix-js-sdk/src/models/room";
|
||||
import { IApp } from "../../../stores/WidgetStore";
|
||||
|
||||
interface IProps {
|
||||
app: IApp;
|
||||
// If room is not specified then it is an account level widget
|
||||
// which bypasses permission prompts as it was added explicitly by that user
|
||||
room: Room;
|
||||
// Specifying 'fullWidth' as true will render the app tile to fill the width of the app drawer continer.
|
||||
// This should be set to true when there is only one widget in the app drawer, otherwise it should be false.
|
||||
fullWidth?: boolean;
|
||||
// Optional. If set, renders a smaller view of the widget
|
||||
miniMode?: boolean;
|
||||
// UserId of the current user
|
||||
userId: string;
|
||||
// UserId of the entity that added / modified the widget
|
||||
creatorUserId: string;
|
||||
waitForIframeLoad: boolean;
|
||||
showMenubar?: boolean;
|
||||
// Optional onEditClickHandler (overrides default behaviour)
|
||||
onEditClick?: () => void;
|
||||
// Optional onDeleteClickHandler (overrides default behaviour)
|
||||
onDeleteClick?: () => void;
|
||||
// Optionally hide the tile title
|
||||
showTitle?: boolean;
|
||||
// Optionally handle minimise button pointer events (default false)
|
||||
handleMinimisePointerEvents?: boolean;
|
||||
// Optionally hide the popout widget icon
|
||||
showPopout?: boolean;
|
||||
// Is this an instance of a user widget
|
||||
userWidget: boolean;
|
||||
// sets the pointer-events property on the iframe
|
||||
pointerEvents?: string;
|
||||
widgetPageTitle?: string;
|
||||
}
|
||||
|
||||
interface IState {
|
||||
initialising: boolean; // True while we are mangling the widget URL
|
||||
// True while the iframe content is loading
|
||||
loading: boolean;
|
||||
// Assume that widget has permission to load if we are the user who
|
||||
// added it to the room, or if explicitly granted by the user
|
||||
hasPermissionToLoad: boolean;
|
||||
error: Error;
|
||||
menuDisplayed: boolean;
|
||||
widgetPageTitle: string;
|
||||
}
|
||||
|
||||
import { logger } from "matrix-js-sdk/src/logger";
|
||||
|
||||
@replaceableComponent("views.elements.AppTile")
|
||||
export default class AppTile extends React.Component {
|
||||
constructor(props) {
|
||||
export default class AppTile extends React.Component<IProps, IState> {
|
||||
public static defaultProps: Partial<IProps> = {
|
||||
waitForIframeLoad: true,
|
||||
showMenubar: true,
|
||||
showTitle: true,
|
||||
showPopout: true,
|
||||
handleMinimisePointerEvents: false,
|
||||
userWidget: false,
|
||||
miniMode: false,
|
||||
};
|
||||
|
||||
private contextMenuButton = createRef<any>();
|
||||
private iframe: HTMLIFrameElement; // ref to the iframe (callback style)
|
||||
private allowedWidgetsWatchRef: string;
|
||||
private persistKey: string;
|
||||
private sgWidget: StopGapWidget;
|
||||
private dispatcherRef: string;
|
||||
|
||||
constructor(props: IProps) {
|
||||
super(props);
|
||||
|
||||
// The key used for PersistedElement
|
||||
this._persistKey = getPersistKey(this.props.app.id);
|
||||
this.persistKey = getPersistKey(this.props.app.id);
|
||||
try {
|
||||
this._sgWidget = new StopGapWidget(this.props);
|
||||
this._sgWidget.on("preparing", this._onWidgetPrepared);
|
||||
this._sgWidget.on("ready", this._onWidgetReady);
|
||||
this.sgWidget = new StopGapWidget(this.props);
|
||||
this.sgWidget.on("preparing", this.onWidgetPrepared);
|
||||
this.sgWidget.on("ready", this.onWidgetReady);
|
||||
} catch (e) {
|
||||
console.log("Failed to construct widget", e);
|
||||
this._sgWidget = null;
|
||||
logger.log("Failed to construct widget", e);
|
||||
this.sgWidget = null;
|
||||
}
|
||||
this.iframe = null; // ref to the iframe (callback style)
|
||||
|
||||
this.state = this._getNewState(props);
|
||||
this._contextMenuButton = createRef();
|
||||
this.state = this.getNewState(props);
|
||||
|
||||
this._allowedWidgetsWatchRef = SettingsStore.watchSetting("allowedWidgets", null, this.onAllowedWidgetsChange);
|
||||
this.allowedWidgetsWatchRef = SettingsStore.watchSetting("allowedWidgets", null, this.onAllowedWidgetsChange);
|
||||
}
|
||||
|
||||
// This is a function to make the impact of calling SettingsStore slightly less
|
||||
hasPermissionToLoad = (props) => {
|
||||
if (this._usingLocalWidget()) return true;
|
||||
private hasPermissionToLoad = (props: IProps): boolean => {
|
||||
if (this.usingLocalWidget()) return true;
|
||||
if (!props.room) return true; // user widgets always have permissions
|
||||
|
||||
const currentlyAllowedWidgets = SettingsStore.getValue("allowedWidgets", props.room.roomId);
|
||||
|
@ -81,34 +144,34 @@ export default class AppTile extends React.Component {
|
|||
* @param {Object} newProps The new properties of the component
|
||||
* @return {Object} Updated component state to be set with setState
|
||||
*/
|
||||
_getNewState(newProps) {
|
||||
private getNewState(newProps: IProps): IState {
|
||||
return {
|
||||
initialising: true, // True while we are mangling the widget URL
|
||||
// True while the iframe content is loading
|
||||
loading: this.props.waitForIframeLoad && !PersistedElement.isMounted(this._persistKey),
|
||||
loading: this.props.waitForIframeLoad && !PersistedElement.isMounted(this.persistKey),
|
||||
// Assume that widget has permission to load if we are the user who
|
||||
// added it to the room, or if explicitly granted by the user
|
||||
hasPermissionToLoad: this.hasPermissionToLoad(newProps),
|
||||
error: null,
|
||||
widgetPageTitle: newProps.widgetPageTitle,
|
||||
menuDisplayed: false,
|
||||
widgetPageTitle: this.props.widgetPageTitle,
|
||||
};
|
||||
}
|
||||
|
||||
onAllowedWidgetsChange = () => {
|
||||
private onAllowedWidgetsChange = (): void => {
|
||||
const hasPermissionToLoad = this.hasPermissionToLoad(this.props);
|
||||
|
||||
if (this.state.hasPermissionToLoad && !hasPermissionToLoad) {
|
||||
// Force the widget to be non-persistent (able to be deleted/forgotten)
|
||||
ActiveWidgetStore.destroyPersistentWidget(this.props.app.id);
|
||||
PersistedElement.destroyElement(this._persistKey);
|
||||
if (this._sgWidget) this._sgWidget.stop();
|
||||
PersistedElement.destroyElement(this.persistKey);
|
||||
if (this.sgWidget) this.sgWidget.stop();
|
||||
}
|
||||
|
||||
this.setState({ hasPermissionToLoad });
|
||||
};
|
||||
|
||||
isMixedContent() {
|
||||
private isMixedContent(): boolean {
|
||||
const parentContentProtocol = window.location.protocol;
|
||||
const u = url.parse(this.props.app.url);
|
||||
const childContentProtocol = u.protocol;
|
||||
|
@ -120,69 +183,70 @@ export default class AppTile extends React.Component {
|
|||
return false;
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
public componentDidMount(): void {
|
||||
// Only fetch IM token on mount if we're showing and have permission to load
|
||||
if (this._sgWidget && this.state.hasPermissionToLoad) {
|
||||
this._startWidget();
|
||||
if (this.sgWidget && this.state.hasPermissionToLoad) {
|
||||
this.startWidget();
|
||||
}
|
||||
|
||||
// Widget action listeners
|
||||
this.dispatcherRef = dis.register(this._onAction);
|
||||
this.dispatcherRef = dis.register(this.onAction);
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
public componentWillUnmount(): void {
|
||||
// Widget action listeners
|
||||
if (this.dispatcherRef) dis.unregister(this.dispatcherRef);
|
||||
|
||||
// if it's not remaining on screen, get rid of the PersistedElement container
|
||||
if (!ActiveWidgetStore.getWidgetPersistence(this.props.app.id)) {
|
||||
ActiveWidgetStore.destroyPersistentWidget(this.props.app.id);
|
||||
PersistedElement.destroyElement(this._persistKey);
|
||||
PersistedElement.destroyElement(this.persistKey);
|
||||
}
|
||||
|
||||
if (this._sgWidget) {
|
||||
this._sgWidget.stop();
|
||||
if (this.sgWidget) {
|
||||
this.sgWidget.stop();
|
||||
}
|
||||
|
||||
SettingsStore.unwatchSetting(this._allowedWidgetsWatchRef);
|
||||
SettingsStore.unwatchSetting(this.allowedWidgetsWatchRef);
|
||||
}
|
||||
|
||||
_resetWidget(newProps) {
|
||||
if (this._sgWidget) {
|
||||
this._sgWidget.stop();
|
||||
private resetWidget(newProps: IProps): void {
|
||||
if (this.sgWidget) {
|
||||
this.sgWidget.stop();
|
||||
}
|
||||
try {
|
||||
this._sgWidget = new StopGapWidget(newProps);
|
||||
this._sgWidget.on("preparing", this._onWidgetPrepared);
|
||||
this._sgWidget.on("ready", this._onWidgetReady);
|
||||
this._startWidget();
|
||||
this.sgWidget = new StopGapWidget(newProps);
|
||||
this.sgWidget.on("preparing", this.onWidgetPrepared);
|
||||
this.sgWidget.on("ready", this.onWidgetReady);
|
||||
this.startWidget();
|
||||
} catch (e) {
|
||||
console.log("Failed to construct widget", e);
|
||||
this._sgWidget = null;
|
||||
logger.log("Failed to construct widget", e);
|
||||
this.sgWidget = null;
|
||||
}
|
||||
}
|
||||
|
||||
_startWidget() {
|
||||
this._sgWidget.prepare().then(() => {
|
||||
private startWidget(): void {
|
||||
this.sgWidget.prepare().then(() => {
|
||||
this.setState({ initialising: false });
|
||||
});
|
||||
}
|
||||
|
||||
_iframeRefChange = (ref) => {
|
||||
private iframeRefChange = (ref: HTMLIFrameElement): void => {
|
||||
this.iframe = ref;
|
||||
if (ref) {
|
||||
if (this._sgWidget) this._sgWidget.start(ref);
|
||||
if (this.sgWidget) this.sgWidget.start(ref);
|
||||
} else {
|
||||
this._resetWidget(this.props);
|
||||
this.resetWidget(this.props);
|
||||
}
|
||||
};
|
||||
|
||||
// TODO: [REACT-WARNING] Replace with appropriate lifecycle event
|
||||
UNSAFE_componentWillReceiveProps(nextProps) { // eslint-disable-line camelcase
|
||||
// eslint-disable-next-line @typescript-eslint/naming-convention
|
||||
public UNSAFE_componentWillReceiveProps(nextProps: IProps): void { // eslint-disable-line camelcase
|
||||
if (nextProps.app.url !== this.props.app.url) {
|
||||
this._getNewState(nextProps);
|
||||
this.getNewState(nextProps);
|
||||
if (this.state.hasPermissionToLoad) {
|
||||
this._resetWidget(nextProps);
|
||||
this.resetWidget(nextProps);
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -198,7 +262,7 @@ export default class AppTile extends React.Component {
|
|||
* @private
|
||||
* @returns {Promise<*>} Resolves when the widget is terminated, or timeout passed.
|
||||
*/
|
||||
async _endWidgetActions() { // widget migration dev note: async to maintain signature
|
||||
private async endWidgetActions(): Promise<void> { // widget migration dev note: async to maintain signature
|
||||
// HACK: This is a really dirty way to ensure that Jitsi cleans up
|
||||
// its hold on the webcam. Without this, the widget holds a media
|
||||
// stream open, even after death. See https://github.com/vector-im/element-web/issues/7351
|
||||
|
@ -217,27 +281,27 @@ export default class AppTile extends React.Component {
|
|||
}
|
||||
|
||||
// Delete the widget from the persisted store for good measure.
|
||||
PersistedElement.destroyElement(this._persistKey);
|
||||
PersistedElement.destroyElement(this.persistKey);
|
||||
ActiveWidgetStore.destroyPersistentWidget(this.props.app.id);
|
||||
|
||||
if (this._sgWidget) this._sgWidget.stop({ forceDestroy: true });
|
||||
if (this.sgWidget) this.sgWidget.stop({ forceDestroy: true });
|
||||
}
|
||||
|
||||
_onWidgetPrepared = () => {
|
||||
private onWidgetPrepared = (): void => {
|
||||
this.setState({ loading: false });
|
||||
};
|
||||
|
||||
_onWidgetReady = () => {
|
||||
private onWidgetReady = (): void => {
|
||||
if (WidgetType.JITSI.matches(this.props.app.type)) {
|
||||
this._sgWidget.widgetApi.transport.send(ElementWidgetActions.ClientReady, {});
|
||||
this.sgWidget.widgetApi.transport.send(ElementWidgetActions.ClientReady, {});
|
||||
}
|
||||
};
|
||||
|
||||
_onAction = payload => {
|
||||
private onAction = (payload): void => {
|
||||
if (payload.widgetId === this.props.app.id) {
|
||||
switch (payload.action) {
|
||||
case 'm.sticker':
|
||||
if (this._sgWidget.widgetApi.hasCapability(MatrixCapabilities.StickerSending)) {
|
||||
if (this.sgWidget.widgetApi.hasCapability(MatrixCapabilities.StickerSending)) {
|
||||
dis.dispatch({ action: 'post_sticker_message', data: payload.data });
|
||||
dis.dispatch({ action: 'stickerpicker_close' });
|
||||
} else {
|
||||
|
@ -248,7 +312,7 @@ export default class AppTile extends React.Component {
|
|||
}
|
||||
};
|
||||
|
||||
_grantWidgetPermission = () => {
|
||||
private grantWidgetPermission = (): void => {
|
||||
const roomId = this.props.room.roomId;
|
||||
console.info("Granting permission for widget to load: " + this.props.app.eventId);
|
||||
const current = SettingsStore.getValue("allowedWidgets", roomId);
|
||||
|
@ -258,14 +322,14 @@ export default class AppTile extends React.Component {
|
|||
this.setState({ hasPermissionToLoad: true });
|
||||
|
||||
// Fetch a token for the integration manager, now that we're allowed to
|
||||
this._startWidget();
|
||||
this.startWidget();
|
||||
}).catch(err => {
|
||||
console.error(err);
|
||||
// We don't really need to do anything about this - the user will just hit the button again.
|
||||
});
|
||||
};
|
||||
|
||||
formatAppTileName() {
|
||||
private formatAppTileName(): string {
|
||||
let appTileName = "No name";
|
||||
if (this.props.app.name && this.props.app.name.trim()) {
|
||||
appTileName = this.props.app.name.trim();
|
||||
|
@ -278,11 +342,11 @@ export default class AppTile extends React.Component {
|
|||
* actual widget URL
|
||||
* @returns {bool} true If using a local version of the widget
|
||||
*/
|
||||
_usingLocalWidget() {
|
||||
private usingLocalWidget(): boolean {
|
||||
return WidgetType.JITSI.matches(this.props.app.type);
|
||||
}
|
||||
|
||||
_getTileTitle() {
|
||||
private getTileTitle(): JSX.Element {
|
||||
const name = this.formatAppTileName();
|
||||
const titleSpacer = <span> - </span>;
|
||||
let title = '';
|
||||
|
@ -300,32 +364,32 @@ export default class AppTile extends React.Component {
|
|||
}
|
||||
|
||||
// TODO replace with full screen interactions
|
||||
_onPopoutWidgetClick = () => {
|
||||
private onPopoutWidgetClick = (): void => {
|
||||
// Ensure Jitsi conferences are closed on pop-out, to not confuse the user to join them
|
||||
// twice from the same computer, which Jitsi can have problems with (audio echo/gain-loop).
|
||||
if (WidgetType.JITSI.matches(this.props.app.type)) {
|
||||
this._endWidgetActions().then(() => {
|
||||
this.endWidgetActions().then(() => {
|
||||
if (this.iframe) {
|
||||
// Reload iframe
|
||||
this.iframe.src = this._sgWidget.embedUrl;
|
||||
this.iframe.src = this.sgWidget.embedUrl;
|
||||
}
|
||||
});
|
||||
}
|
||||
// Using Object.assign workaround as the following opens in a new window instead of a new tab.
|
||||
// window.open(this._getPopoutUrl(), '_blank', 'noopener=yes');
|
||||
Object.assign(document.createElement('a'),
|
||||
{ target: '_blank', href: this._sgWidget.popoutUrl, rel: 'noreferrer noopener' }).click();
|
||||
{ target: '_blank', href: this.sgWidget.popoutUrl, rel: 'noreferrer noopener' }).click();
|
||||
};
|
||||
|
||||
_onContextMenuClick = () => {
|
||||
private onContextMenuClick = (): void => {
|
||||
this.setState({ menuDisplayed: true });
|
||||
};
|
||||
|
||||
_closeContextMenu = () => {
|
||||
private closeContextMenu = (): void => {
|
||||
this.setState({ menuDisplayed: false });
|
||||
};
|
||||
|
||||
render() {
|
||||
public render(): JSX.Element {
|
||||
let appTileBody;
|
||||
|
||||
// Note that there is advice saying allow-scripts shouldn't be used with allow-same-origin
|
||||
|
@ -351,7 +415,7 @@ export default class AppTile extends React.Component {
|
|||
<Spinner message={_t("Loading...")} />
|
||||
</div>
|
||||
);
|
||||
if (this._sgWidget === null) {
|
||||
if (this.sgWidget === null) {
|
||||
appTileBody = (
|
||||
<div className={appTileBodyClass} style={appTileBodyStyles}>
|
||||
<AppWarning errorMsg={_t("Error loading Widget")} />
|
||||
|
@ -365,9 +429,9 @@ export default class AppTile extends React.Component {
|
|||
<AppPermission
|
||||
roomId={this.props.room.roomId}
|
||||
creatorUserId={this.props.creatorUserId}
|
||||
url={this._sgWidget.embedUrl}
|
||||
url={this.sgWidget.embedUrl}
|
||||
isRoomEncrypted={isEncrypted}
|
||||
onPermissionGranted={this._grantWidgetPermission}
|
||||
onPermissionGranted={this.grantWidgetPermission}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
@ -390,8 +454,8 @@ export default class AppTile extends React.Component {
|
|||
{ this.state.loading && loadingElement }
|
||||
<iframe
|
||||
allow={iframeFeatures}
|
||||
ref={this._iframeRefChange}
|
||||
src={this._sgWidget.embedUrl}
|
||||
ref={this.iframeRefChange}
|
||||
src={this.sgWidget.embedUrl}
|
||||
allowFullScreen={true}
|
||||
sandbox={sandboxFlags}
|
||||
/>
|
||||
|
@ -407,7 +471,7 @@ export default class AppTile extends React.Component {
|
|||
// Also wrap the PersistedElement in a div to fix the height, otherwise
|
||||
// AppTile's border is in the wrong place
|
||||
appTileBody = <div className="mx_AppTile_persistedWrapper">
|
||||
<PersistedElement persistKey={this._persistKey}>
|
||||
<PersistedElement persistKey={this.persistKey}>
|
||||
{ appTileBody }
|
||||
</PersistedElement>
|
||||
</div>;
|
||||
|
@ -429,9 +493,9 @@ export default class AppTile extends React.Component {
|
|||
if (this.state.menuDisplayed) {
|
||||
contextMenu = (
|
||||
<RoomWidgetContextMenu
|
||||
{...aboveLeftOf(this._contextMenuButton.current.getBoundingClientRect(), null)}
|
||||
{...aboveLeftOf(this.contextMenuButton.current.getBoundingClientRect(), null)}
|
||||
app={this.props.app}
|
||||
onFinished={this._closeContextMenu}
|
||||
onFinished={this.closeContextMenu}
|
||||
showUnpin={!this.props.userWidget}
|
||||
userWidget={this.props.userWidget}
|
||||
onEditClick={this.props.onEditClick}
|
||||
|
@ -444,21 +508,21 @@ export default class AppTile extends React.Component {
|
|||
<div className={appTileClasses} id={this.props.app.id}>
|
||||
{ this.props.showMenubar &&
|
||||
<div className="mx_AppTileMenuBar">
|
||||
<span className="mx_AppTileMenuBarTitle" style={{ pointerEvents: (this.props.handleMinimisePointerEvents ? 'all' : false) }}>
|
||||
{ this.props.showTitle && this._getTileTitle() }
|
||||
<span className="mx_AppTileMenuBarTitle" style={{ pointerEvents: (this.props.handleMinimisePointerEvents ? 'all' : "none") }}>
|
||||
{ this.props.showTitle && this.getTileTitle() }
|
||||
</span>
|
||||
<span className="mx_AppTileMenuBarWidgets">
|
||||
{ this.props.showPopout && <AccessibleButton
|
||||
className="mx_AppTileMenuBar_iconButton mx_AppTileMenuBar_iconButton_popout"
|
||||
title={_t('Popout widget')}
|
||||
onClick={this._onPopoutWidgetClick}
|
||||
onClick={this.onPopoutWidgetClick}
|
||||
/> }
|
||||
<ContextMenuButton
|
||||
className="mx_AppTileMenuBar_iconButton mx_AppTileMenuBar_iconButton_menu"
|
||||
label={_t("Options")}
|
||||
isExpanded={this.state.menuDisplayed}
|
||||
inputRef={this._contextMenuButton}
|
||||
onClick={this._onContextMenuClick}
|
||||
inputRef={this.contextMenuButton}
|
||||
onClick={this.onContextMenuClick}
|
||||
/>
|
||||
</span>
|
||||
</div> }
|
||||
|
@ -469,49 +533,3 @@ export default class AppTile extends React.Component {
|
|||
</React.Fragment>;
|
||||
}
|
||||
}
|
||||
|
||||
AppTile.displayName = 'AppTile';
|
||||
|
||||
AppTile.propTypes = {
|
||||
app: PropTypes.object.isRequired,
|
||||
// If room is not specified then it is an account level widget
|
||||
// which bypasses permission prompts as it was added explicitly by that user
|
||||
room: PropTypes.object,
|
||||
// Specifying 'fullWidth' as true will render the app tile to fill the width of the app drawer continer.
|
||||
// This should be set to true when there is only one widget in the app drawer, otherwise it should be false.
|
||||
fullWidth: PropTypes.bool,
|
||||
// Optional. If set, renders a smaller view of the widget
|
||||
miniMode: PropTypes.bool,
|
||||
// UserId of the current user
|
||||
userId: PropTypes.string.isRequired,
|
||||
// UserId of the entity that added / modified the widget
|
||||
creatorUserId: PropTypes.string,
|
||||
waitForIframeLoad: PropTypes.bool,
|
||||
showMenubar: PropTypes.bool,
|
||||
// Optional onEditClickHandler (overrides default behaviour)
|
||||
onEditClick: PropTypes.func,
|
||||
// Optional onDeleteClickHandler (overrides default behaviour)
|
||||
onDeleteClick: PropTypes.func,
|
||||
// Optional onMinimiseClickHandler
|
||||
onMinimiseClick: PropTypes.func,
|
||||
// Optionally hide the tile title
|
||||
showTitle: PropTypes.bool,
|
||||
// Optionally handle minimise button pointer events (default false)
|
||||
handleMinimisePointerEvents: PropTypes.bool,
|
||||
// Optionally hide the popout widget icon
|
||||
showPopout: PropTypes.bool,
|
||||
// Is this an instance of a user widget
|
||||
userWidget: PropTypes.bool,
|
||||
// sets the pointer-events property on the iframe
|
||||
pointerEvents: PropTypes.string,
|
||||
};
|
||||
|
||||
AppTile.defaultProps = {
|
||||
waitForIframeLoad: true,
|
||||
showMenubar: true,
|
||||
showTitle: true,
|
||||
showPopout: true,
|
||||
handleMinimisePointerEvents: false,
|
||||
userWidget: false,
|
||||
miniMode: false,
|
||||
};
|
|
@ -1,24 +1,20 @@
|
|||
import React from 'react'; // eslint-disable-line no-unused-vars
|
||||
import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
|
||||
const AppWarning = (props) => {
|
||||
interface IProps {
|
||||
errorMsg?: string;
|
||||
}
|
||||
|
||||
const AppWarning: React.FC<IProps> = (props) => {
|
||||
return (
|
||||
<div className='mx_AppPermissionWarning'>
|
||||
<div className='mx_AppPermissionWarningImage'>
|
||||
<img src={require("../../../../res/img/warning.svg")} alt='' />
|
||||
</div>
|
||||
<div className='mx_AppPermissionWarningText'>
|
||||
<span className='mx_AppPermissionWarningTextLabel'>{ props.errorMsg }</span>
|
||||
<span className='mx_AppPermissionWarningTextLabel'>{ props.errorMsg || "Error" }</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
AppWarning.propTypes = {
|
||||
errorMsg: PropTypes.string,
|
||||
};
|
||||
AppWarning.defaultProps = {
|
||||
errorMsg: 'Error',
|
||||
};
|
||||
|
||||
export default AppWarning;
|
|
@ -17,60 +17,61 @@ limitations under the License.
|
|||
*/
|
||||
|
||||
import React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
import { _t } from '../../../languageHandler';
|
||||
import { replaceableComponent } from "../../../utils/replaceableComponent";
|
||||
|
||||
interface IProps {
|
||||
// The primary button which is styled differently and has default focus.
|
||||
primaryButton: React.ReactNode;
|
||||
|
||||
// A node to insert into the cancel button instead of default "Cancel"
|
||||
cancelButton?: React.ReactNode;
|
||||
|
||||
// If true, make the primary button a form submit button (input type="submit")
|
||||
primaryIsSubmit?: boolean;
|
||||
|
||||
// onClick handler for the primary button.
|
||||
onPrimaryButtonClick?: (ev: React.MouseEvent) => void;
|
||||
|
||||
// should there be a cancel button? default: true
|
||||
hasCancel?: boolean;
|
||||
|
||||
// The class of the cancel button, only used if a cancel button is
|
||||
// enabled
|
||||
cancelButtonClass?: string;
|
||||
|
||||
// onClick handler for the cancel button.
|
||||
onCancel?: (...args: any[]) => void;
|
||||
|
||||
focus?: boolean;
|
||||
|
||||
// disables the primary and cancel buttons
|
||||
disabled?: boolean;
|
||||
|
||||
// disables only the primary button
|
||||
primaryDisabled?: boolean;
|
||||
|
||||
// something to stick next to the buttons, optionally
|
||||
additive?: React.ReactNode;
|
||||
|
||||
primaryButtonClass?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* Basic container for buttons in modal dialogs.
|
||||
*/
|
||||
@replaceableComponent("views.elements.DialogButtons")
|
||||
export default class DialogButtons extends React.Component {
|
||||
static propTypes = {
|
||||
// The primary button which is styled differently and has default focus.
|
||||
primaryButton: PropTypes.node.isRequired,
|
||||
|
||||
// A node to insert into the cancel button instead of default "Cancel"
|
||||
cancelButton: PropTypes.node,
|
||||
|
||||
// If true, make the primary button a form submit button (input type="submit")
|
||||
primaryIsSubmit: PropTypes.bool,
|
||||
|
||||
// onClick handler for the primary button.
|
||||
onPrimaryButtonClick: PropTypes.func,
|
||||
|
||||
// should there be a cancel button? default: true
|
||||
hasCancel: PropTypes.bool,
|
||||
|
||||
// The class of the cancel button, only used if a cancel button is
|
||||
// enabled
|
||||
cancelButtonClass: PropTypes.node,
|
||||
|
||||
// onClick handler for the cancel button.
|
||||
onCancel: PropTypes.func,
|
||||
|
||||
focus: PropTypes.bool,
|
||||
|
||||
// disables the primary and cancel buttons
|
||||
disabled: PropTypes.bool,
|
||||
|
||||
// disables only the primary button
|
||||
primaryDisabled: PropTypes.bool,
|
||||
|
||||
// something to stick next to the buttons, optionally
|
||||
additive: PropTypes.element,
|
||||
};
|
||||
|
||||
static defaultProps = {
|
||||
export default class DialogButtons extends React.Component<IProps> {
|
||||
public static defaultProps: Partial<IProps> = {
|
||||
hasCancel: true,
|
||||
disabled: false,
|
||||
};
|
||||
|
||||
_onCancelClick = () => {
|
||||
this.props.onCancel();
|
||||
private onCancelClick = (event: React.MouseEvent): void => {
|
||||
this.props.onCancel(event);
|
||||
};
|
||||
|
||||
render() {
|
||||
public render(): JSX.Element {
|
||||
let primaryButtonClassName = "mx_Dialog_primary";
|
||||
if (this.props.primaryButtonClass) {
|
||||
primaryButtonClassName += " " + this.props.primaryButtonClass;
|
||||
|
@ -82,7 +83,7 @@ export default class DialogButtons extends React.Component {
|
|||
// important: the default type is 'submit' and this button comes before the
|
||||
// primary in the DOM so will get form submissions unless we make it not a submit.
|
||||
type="button"
|
||||
onClick={this._onCancelClick}
|
||||
onClick={this.onCancelClick}
|
||||
className={this.props.cancelButtonClass}
|
||||
disabled={this.props.disabled}
|
||||
>
|
|
@ -14,71 +14,73 @@ See the License for the specific language governing permissions and
|
|||
limitations under the License.
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import * as sdk from '../../../index';
|
||||
import React, { ChangeEvent, createRef } from 'react';
|
||||
import { _t } from '../../../languageHandler';
|
||||
import { replaceableComponent } from "../../../utils/replaceableComponent";
|
||||
import AccessibleButton from "./AccessibleButton";
|
||||
|
||||
interface IProps {
|
||||
className?: string;
|
||||
onChange?: (value: string) => void;
|
||||
onClear?: () => void;
|
||||
onJoinClick?: (value: string) => void;
|
||||
placeholder?: string;
|
||||
showJoinButton?: boolean;
|
||||
initialText?: string;
|
||||
}
|
||||
|
||||
interface IState {
|
||||
value: string;
|
||||
}
|
||||
|
||||
@replaceableComponent("views.elements.DirectorySearchBox")
|
||||
export default class DirectorySearchBox extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this._collectInput = this._collectInput.bind(this);
|
||||
this._onClearClick = this._onClearClick.bind(this);
|
||||
this._onChange = this._onChange.bind(this);
|
||||
this._onKeyUp = this._onKeyUp.bind(this);
|
||||
this._onJoinButtonClick = this._onJoinButtonClick.bind(this);
|
||||
export default class DirectorySearchBox extends React.Component<IProps, IState> {
|
||||
private input = createRef<HTMLInputElement>();
|
||||
|
||||
this.input = null;
|
||||
constructor(props: IProps) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
value: this.props.initialText || '',
|
||||
};
|
||||
}
|
||||
|
||||
_collectInput(e) {
|
||||
this.input = e;
|
||||
}
|
||||
|
||||
_onClearClick() {
|
||||
private onClearClick = (): void => {
|
||||
this.setState({ value: '' });
|
||||
|
||||
if (this.input) {
|
||||
this.input.focus();
|
||||
if (this.input.current) {
|
||||
this.input.current.focus();
|
||||
|
||||
if (this.props.onClear) {
|
||||
this.props.onClear();
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
_onChange(ev) {
|
||||
if (!this.input) return;
|
||||
private onChange = (ev: ChangeEvent<HTMLInputElement>): void => {
|
||||
if (!this.input.current) return;
|
||||
this.setState({ value: ev.target.value });
|
||||
|
||||
if (this.props.onChange) {
|
||||
this.props.onChange(ev.target.value);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
_onKeyUp(ev) {
|
||||
private onKeyUp = (ev: React.KeyboardEvent): void => {
|
||||
if (ev.key == 'Enter' && this.props.showJoinButton) {
|
||||
if (this.props.onJoinClick) {
|
||||
this.props.onJoinClick(this.state.value);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
_onJoinButtonClick() {
|
||||
private onJoinButtonClick = (): void => {
|
||||
if (this.props.onJoinClick) {
|
||||
this.props.onJoinClick(this.state.value);
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
|
||||
};
|
||||
|
||||
public render(): JSX.Element {
|
||||
const searchboxClasses = {
|
||||
mx_DirectorySearchBox: true,
|
||||
};
|
||||
|
@ -87,7 +89,7 @@ export default class DirectorySearchBox extends React.Component {
|
|||
let joinButton;
|
||||
if (this.props.showJoinButton) {
|
||||
joinButton = <AccessibleButton className="mx_DirectorySearchBox_joinButton"
|
||||
onClick={this._onJoinButtonClick}
|
||||
onClick={this.onJoinButtonClick}
|
||||
>{ _t("Join") }</AccessibleButton>;
|
||||
}
|
||||
|
||||
|
@ -97,24 +99,15 @@ export default class DirectorySearchBox extends React.Component {
|
|||
name="dirsearch"
|
||||
value={this.state.value}
|
||||
className="mx_textinput_icon mx_textinput_search"
|
||||
ref={this._collectInput}
|
||||
onChange={this._onChange}
|
||||
onKeyUp={this._onKeyUp}
|
||||
ref={this.input}
|
||||
onChange={this.onChange}
|
||||
onKeyUp={this.onKeyUp}
|
||||
placeholder={this.props.placeholder}
|
||||
autoFocus
|
||||
/>
|
||||
{ joinButton }
|
||||
<AccessibleButton className="mx_DirectorySearchBox_clear" onClick={this._onClearClick} />
|
||||
<AccessibleButton className="mx_DirectorySearchBox_clear" onClick={this.onClearClick} />
|
||||
</div>;
|
||||
}
|
||||
}
|
||||
|
||||
DirectorySearchBox.propTypes = {
|
||||
className: PropTypes.string,
|
||||
onChange: PropTypes.func,
|
||||
onClear: PropTypes.func,
|
||||
onJoinClick: PropTypes.func,
|
||||
placeholder: PropTypes.string,
|
||||
showJoinButton: PropTypes.bool,
|
||||
initialText: PropTypes.string,
|
||||
};
|
|
@ -16,33 +16,42 @@ limitations under the License.
|
|||
*/
|
||||
|
||||
import React, { createRef } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Key } from "../../../Keyboard";
|
||||
import { replaceableComponent } from "../../../utils/replaceableComponent";
|
||||
|
||||
enum Phases {
|
||||
Display = "display",
|
||||
Edit = "edit",
|
||||
}
|
||||
|
||||
interface IProps {
|
||||
onValueChanged?: (value: string, shouldSubmit: boolean) => void;
|
||||
initialValue?: string;
|
||||
label?: string;
|
||||
placeholder?: string;
|
||||
className?: string;
|
||||
labelClassName?: string;
|
||||
placeholderClassName?: string;
|
||||
// Overrides blurToSubmit if true
|
||||
blurToCancel?: boolean;
|
||||
// Will cause onValueChanged(value, true) to fire on blur
|
||||
blurToSubmit?: boolean;
|
||||
editable?: boolean;
|
||||
}
|
||||
|
||||
interface IState {
|
||||
phase: Phases;
|
||||
}
|
||||
|
||||
@replaceableComponent("views.elements.EditableText")
|
||||
export default class EditableText extends React.Component {
|
||||
static propTypes = {
|
||||
onValueChanged: PropTypes.func,
|
||||
initialValue: PropTypes.string,
|
||||
label: PropTypes.string,
|
||||
placeholder: PropTypes.string,
|
||||
className: PropTypes.string,
|
||||
labelClassName: PropTypes.string,
|
||||
placeholderClassName: PropTypes.string,
|
||||
// Overrides blurToSubmit if true
|
||||
blurToCancel: PropTypes.bool,
|
||||
// Will cause onValueChanged(value, true) to fire on blur
|
||||
blurToSubmit: PropTypes.bool,
|
||||
editable: PropTypes.bool,
|
||||
};
|
||||
export default class EditableText extends React.Component<IProps, IState> {
|
||||
// we track value as an JS object field rather than in React state
|
||||
// as React doesn't play nice with contentEditable.
|
||||
public value = '';
|
||||
private placeholder = false;
|
||||
private editableDiv = createRef<HTMLDivElement>();
|
||||
|
||||
static Phases = {
|
||||
Display: "display",
|
||||
Edit: "edit",
|
||||
};
|
||||
|
||||
static defaultProps = {
|
||||
public static defaultProps: Partial<IProps> = {
|
||||
onValueChanged() {},
|
||||
initialValue: '',
|
||||
label: '',
|
||||
|
@ -53,81 +62,61 @@ export default class EditableText extends React.Component {
|
|||
blurToSubmit: false,
|
||||
};
|
||||
|
||||
constructor(props) {
|
||||
constructor(props: IProps) {
|
||||
super(props);
|
||||
|
||||
// we track value as an JS object field rather than in React state
|
||||
// as React doesn't play nice with contentEditable.
|
||||
this.value = '';
|
||||
this.placeholder = false;
|
||||
|
||||
this._editable_div = createRef();
|
||||
this.state = {
|
||||
phase: Phases.Display,
|
||||
};
|
||||
}
|
||||
|
||||
state = {
|
||||
phase: EditableText.Phases.Display,
|
||||
};
|
||||
|
||||
// TODO: [REACT-WARNING] Replace with appropriate lifecycle event
|
||||
// eslint-disable-next-line camelcase
|
||||
UNSAFE_componentWillReceiveProps(nextProps) {
|
||||
// eslint-disable-next-line @typescript-eslint/naming-convention, camelcase
|
||||
public UNSAFE_componentWillReceiveProps(nextProps: IProps): void {
|
||||
if (nextProps.initialValue !== this.props.initialValue) {
|
||||
this.value = nextProps.initialValue;
|
||||
if (this._editable_div.current) {
|
||||
if (this.editableDiv.current) {
|
||||
this.showPlaceholder(!this.value);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
public componentDidMount(): void {
|
||||
this.value = this.props.initialValue;
|
||||
if (this._editable_div.current) {
|
||||
if (this.editableDiv.current) {
|
||||
this.showPlaceholder(!this.value);
|
||||
}
|
||||
}
|
||||
|
||||
showPlaceholder = show => {
|
||||
private showPlaceholder = (show: boolean): void => {
|
||||
if (show) {
|
||||
this._editable_div.current.textContent = this.props.placeholder;
|
||||
this._editable_div.current.setAttribute("class", this.props.className
|
||||
this.editableDiv.current.textContent = this.props.placeholder;
|
||||
this.editableDiv.current.setAttribute("class", this.props.className
|
||||
+ " " + this.props.placeholderClassName);
|
||||
this.placeholder = true;
|
||||
this.value = '';
|
||||
} else {
|
||||
this._editable_div.current.textContent = this.value;
|
||||
this._editable_div.current.setAttribute("class", this.props.className);
|
||||
this.editableDiv.current.textContent = this.value;
|
||||
this.editableDiv.current.setAttribute("class", this.props.className);
|
||||
this.placeholder = false;
|
||||
}
|
||||
};
|
||||
|
||||
getValue = () => this.value;
|
||||
|
||||
setValue = value => {
|
||||
this.value = value;
|
||||
this.showPlaceholder(!this.value);
|
||||
};
|
||||
|
||||
edit = () => {
|
||||
private cancelEdit = (): void => {
|
||||
this.setState({
|
||||
phase: EditableText.Phases.Edit,
|
||||
});
|
||||
};
|
||||
|
||||
cancelEdit = () => {
|
||||
this.setState({
|
||||
phase: EditableText.Phases.Display,
|
||||
phase: Phases.Display,
|
||||
});
|
||||
this.value = this.props.initialValue;
|
||||
this.showPlaceholder(!this.value);
|
||||
this.onValueChanged(false);
|
||||
this._editable_div.current.blur();
|
||||
this.editableDiv.current.blur();
|
||||
};
|
||||
|
||||
onValueChanged = shouldSubmit => {
|
||||
private onValueChanged = (shouldSubmit: boolean): void => {
|
||||
this.props.onValueChanged(this.value, shouldSubmit);
|
||||
};
|
||||
|
||||
onKeyDown = ev => {
|
||||
private onKeyDown = (ev: React.KeyboardEvent<HTMLDivElement>): void => {
|
||||
// console.log("keyDown: textContent=" + ev.target.textContent + ", value=" + this.value + ", placeholder=" + this.placeholder);
|
||||
|
||||
if (this.placeholder) {
|
||||
|
@ -142,13 +131,13 @@ export default class EditableText extends React.Component {
|
|||
// console.log("keyDown: textContent=" + ev.target.textContent + ", value=" + this.value + ", placeholder=" + this.placeholder);
|
||||
};
|
||||
|
||||
onKeyUp = ev => {
|
||||
private onKeyUp = (ev: React.KeyboardEvent<HTMLDivElement>): void => {
|
||||
// console.log("keyUp: textContent=" + ev.target.textContent + ", value=" + this.value + ", placeholder=" + this.placeholder);
|
||||
|
||||
if (!ev.target.textContent) {
|
||||
if (!(ev.target as HTMLDivElement).textContent) {
|
||||
this.showPlaceholder(true);
|
||||
} else if (!this.placeholder) {
|
||||
this.value = ev.target.textContent;
|
||||
this.value = (ev.target as HTMLDivElement).textContent;
|
||||
}
|
||||
|
||||
if (ev.key === Key.ENTER) {
|
||||
|
@ -160,22 +149,22 @@ export default class EditableText extends React.Component {
|
|||
// console.log("keyUp: textContent=" + ev.target.textContent + ", value=" + this.value + ", placeholder=" + this.placeholder);
|
||||
};
|
||||
|
||||
onClickDiv = ev => {
|
||||
private onClickDiv = (): void => {
|
||||
if (!this.props.editable) return;
|
||||
|
||||
this.setState({
|
||||
phase: EditableText.Phases.Edit,
|
||||
phase: Phases.Edit,
|
||||
});
|
||||
};
|
||||
|
||||
onFocus = ev => {
|
||||
private onFocus = (ev: React.FocusEvent<HTMLDivElement>): void => {
|
||||
//ev.target.setSelectionRange(0, ev.target.textContent.length);
|
||||
|
||||
const node = ev.target.childNodes[0];
|
||||
if (node) {
|
||||
const range = document.createRange();
|
||||
range.setStart(node, 0);
|
||||
range.setEnd(node, node.length);
|
||||
range.setEnd(node, ev.target.childNodes.length);
|
||||
|
||||
const sel = window.getSelection();
|
||||
sel.removeAllRanges();
|
||||
|
@ -183,11 +172,15 @@ export default class EditableText extends React.Component {
|
|||
}
|
||||
};
|
||||
|
||||
onFinish = (ev, shouldSubmit) => {
|
||||
private onFinish = (
|
||||
ev: React.KeyboardEvent<HTMLDivElement> | React.FocusEvent<HTMLDivElement>,
|
||||
shouldSubmit?: boolean,
|
||||
): void => {
|
||||
// eslint-disable-next-line @typescript-eslint/no-this-alias
|
||||
const self = this;
|
||||
const submit = (ev.key === Key.ENTER) || shouldSubmit;
|
||||
const submit = ("key" in ev && ev.key === Key.ENTER) || shouldSubmit;
|
||||
this.setState({
|
||||
phase: EditableText.Phases.Display,
|
||||
phase: Phases.Display,
|
||||
}, () => {
|
||||
if (this.value !== this.props.initialValue) {
|
||||
self.onValueChanged(submit);
|
||||
|
@ -195,7 +188,7 @@ export default class EditableText extends React.Component {
|
|||
});
|
||||
};
|
||||
|
||||
onBlur = ev => {
|
||||
private onBlur = (ev: React.FocusEvent<HTMLDivElement>): void => {
|
||||
const sel = window.getSelection();
|
||||
sel.removeAllRanges();
|
||||
|
||||
|
@ -208,11 +201,11 @@ export default class EditableText extends React.Component {
|
|||
this.showPlaceholder(!this.value);
|
||||
};
|
||||
|
||||
render() {
|
||||
public render(): JSX.Element {
|
||||
const { className, editable, initialValue, label, labelClassName } = this.props;
|
||||
let editableEl;
|
||||
|
||||
if (!editable || (this.state.phase === EditableText.Phases.Display &&
|
||||
if (!editable || (this.state.phase === Phases.Display &&
|
||||
(label || labelClassName) && !this.value)
|
||||
) {
|
||||
// show the label
|
||||
|
@ -222,7 +215,7 @@ export default class EditableText extends React.Component {
|
|||
} else {
|
||||
// show the content editable div, but manually manage its contents as react and contentEditable don't play nice together
|
||||
editableEl = <div
|
||||
ref={this._editable_div}
|
||||
ref={this.editableDiv}
|
||||
contentEditable={true}
|
||||
className={className}
|
||||
onKeyDown={this.onKeyDown}
|
|
@ -15,9 +15,34 @@ limitations under the License.
|
|||
*/
|
||||
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import * as sdk from '../../../index';
|
||||
import { replaceableComponent } from "../../../utils/replaceableComponent";
|
||||
import Spinner from "./Spinner";
|
||||
import EditableText from "./EditableText";
|
||||
|
||||
interface IProps {
|
||||
/* callback to retrieve the initial value. */
|
||||
getInitialValue?: () => Promise<string>;
|
||||
|
||||
/* initial value; used if getInitialValue is not given */
|
||||
initialValue?: string;
|
||||
|
||||
/* placeholder text to use when the value is empty (and not being
|
||||
* edited) */
|
||||
placeholder?: string;
|
||||
|
||||
/* callback to update the value. Called with a single argument: the new
|
||||
* value. */
|
||||
onSubmit?: (value: string) => Promise<{} | void>;
|
||||
|
||||
/* should the input submit when focus is lost? */
|
||||
blurToSubmit?: boolean;
|
||||
}
|
||||
|
||||
interface IState {
|
||||
busy: boolean;
|
||||
errorString: string;
|
||||
value: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* A component which wraps an EditableText, with a spinner while updates take
|
||||
|
@ -31,50 +56,51 @@ import { replaceableComponent } from "../../../utils/replaceableComponent";
|
|||
* taken from the 'initialValue' property.
|
||||
*/
|
||||
@replaceableComponent("views.elements.EditableTextContainer")
|
||||
export default class EditableTextContainer extends React.Component {
|
||||
constructor(props) {
|
||||
export default class EditableTextContainer extends React.Component<IProps, IState> {
|
||||
private unmounted = false;
|
||||
public static defaultProps: Partial<IProps> = {
|
||||
initialValue: "",
|
||||
placeholder: "",
|
||||
blurToSubmit: false,
|
||||
onSubmit: () => { return Promise.resolve(); },
|
||||
};
|
||||
|
||||
constructor(props: IProps) {
|
||||
super(props);
|
||||
|
||||
this._unmounted = false;
|
||||
this.state = {
|
||||
busy: false,
|
||||
errorString: null,
|
||||
value: props.initialValue,
|
||||
};
|
||||
this._onValueChanged = this._onValueChanged.bind(this);
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
if (this.props.getInitialValue === undefined) {
|
||||
// use whatever was given in the initialValue property.
|
||||
return;
|
||||
}
|
||||
public async componentDidMount(): Promise<void> {
|
||||
// use whatever was given in the initialValue property.
|
||||
if (this.props.getInitialValue === undefined) return;
|
||||
|
||||
this.setState({ busy: true });
|
||||
|
||||
this.props.getInitialValue().then(
|
||||
(result) => {
|
||||
if (this._unmounted) { return; }
|
||||
this.setState({
|
||||
busy: false,
|
||||
value: result,
|
||||
});
|
||||
},
|
||||
(error) => {
|
||||
if (this._unmounted) { return; }
|
||||
this.setState({
|
||||
errorString: error.toString(),
|
||||
busy: false,
|
||||
});
|
||||
},
|
||||
);
|
||||
try {
|
||||
const initialValue = await this.props.getInitialValue();
|
||||
if (this.unmounted) return;
|
||||
this.setState({
|
||||
busy: false,
|
||||
value: initialValue,
|
||||
});
|
||||
} catch (error) {
|
||||
if (this.unmounted) return;
|
||||
this.setState({
|
||||
errorString: error.toString(),
|
||||
busy: false,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
this._unmounted = true;
|
||||
public componentWillUnmount(): void {
|
||||
this.unmounted = true;
|
||||
}
|
||||
|
||||
_onValueChanged(value, shouldSubmit) {
|
||||
private onValueChanged = (value: string, shouldSubmit: boolean): void => {
|
||||
if (!shouldSubmit) {
|
||||
return;
|
||||
}
|
||||
|
@ -86,38 +112,36 @@ export default class EditableTextContainer extends React.Component {
|
|||
|
||||
this.props.onSubmit(value).then(
|
||||
() => {
|
||||
if (this._unmounted) { return; }
|
||||
if (this.unmounted) { return; }
|
||||
this.setState({
|
||||
busy: false,
|
||||
value: value,
|
||||
});
|
||||
},
|
||||
(error) => {
|
||||
if (this._unmounted) { return; }
|
||||
if (this.unmounted) { return; }
|
||||
this.setState({
|
||||
errorString: error.toString(),
|
||||
busy: false,
|
||||
});
|
||||
},
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
public render(): JSX.Element {
|
||||
if (this.state.busy) {
|
||||
const Loader = sdk.getComponent("elements.Spinner");
|
||||
return (
|
||||
<Loader />
|
||||
<Spinner />
|
||||
);
|
||||
} else if (this.state.errorString) {
|
||||
return (
|
||||
<div className="error">{ this.state.errorString }</div>
|
||||
);
|
||||
} else {
|
||||
const EditableText = sdk.getComponent('elements.EditableText');
|
||||
return (
|
||||
<EditableText initialValue={this.state.value}
|
||||
placeholder={this.props.placeholder}
|
||||
onValueChanged={this._onValueChanged}
|
||||
onValueChanged={this.onValueChanged}
|
||||
blurToSubmit={this.props.blurToSubmit}
|
||||
/>
|
||||
);
|
||||
|
@ -125,28 +149,3 @@ export default class EditableTextContainer extends React.Component {
|
|||
}
|
||||
}
|
||||
|
||||
EditableTextContainer.propTypes = {
|
||||
/* callback to retrieve the initial value. */
|
||||
getInitialValue: PropTypes.func,
|
||||
|
||||
/* initial value; used if getInitialValue is not given */
|
||||
initialValue: PropTypes.string,
|
||||
|
||||
/* placeholder text to use when the value is empty (and not being
|
||||
* edited) */
|
||||
placeholder: PropTypes.string,
|
||||
|
||||
/* callback to update the value. Called with a single argument: the new
|
||||
* value. */
|
||||
onSubmit: PropTypes.func,
|
||||
|
||||
/* should the input submit when focus is lost? */
|
||||
blurToSubmit: PropTypes.bool,
|
||||
};
|
||||
|
||||
EditableTextContainer.defaultProps = {
|
||||
initialValue: "",
|
||||
placeholder: "",
|
||||
blurToSubmit: false,
|
||||
onSubmit: function(v) {return Promise.resolve(); },
|
||||
};
|
|
@ -34,6 +34,7 @@ import { RoomPermalinkCreator } from "../../../utils/permalinks/Permalinks";
|
|||
import { MatrixEvent } from "matrix-js-sdk/src/models/event";
|
||||
import { normalizeWheelEvent } from "../../../utils/Mouse";
|
||||
import { IDialogProps } from '../dialogs/IDialogProps';
|
||||
import UIStore from '../../../stores/UIStore';
|
||||
|
||||
// Max scale to keep gaps around the image
|
||||
const MAX_SCALE = 0.95;
|
||||
|
@ -44,6 +45,13 @@ const ZOOM_COEFFICIENT = 0.0025;
|
|||
// If we have moved only this much we can zoom
|
||||
const ZOOM_DISTANCE = 10;
|
||||
|
||||
// Height of mx_ImageView_panel
|
||||
const getPanelHeight = (): number => {
|
||||
const value = getComputedStyle(document.documentElement).getPropertyValue("--image-view-panel-height");
|
||||
// Return the value as a number without the unit
|
||||
return parseInt(value.slice(0, value.length - 2));
|
||||
};
|
||||
|
||||
interface IProps extends IDialogProps {
|
||||
src: string; // the source of the image being displayed
|
||||
name?: string; // the main title ('name') for the image
|
||||
|
@ -56,8 +64,15 @@ interface IProps extends IDialogProps {
|
|||
// redactions, senders, timestamps etc. Other descriptors are taken from the explicit
|
||||
// properties above, which let us use lightboxes to display images which aren't associated
|
||||
// with events.
|
||||
mxEvent: MatrixEvent;
|
||||
permalinkCreator: RoomPermalinkCreator;
|
||||
mxEvent?: MatrixEvent;
|
||||
permalinkCreator?: RoomPermalinkCreator;
|
||||
|
||||
thumbnailInfo?: {
|
||||
positionX: number;
|
||||
positionY: number;
|
||||
width: number;
|
||||
height: number;
|
||||
};
|
||||
}
|
||||
|
||||
interface IState {
|
||||
|
@ -75,13 +90,25 @@ interface IState {
|
|||
export default class ImageView extends React.Component<IProps, IState> {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
const { thumbnailInfo } = this.props;
|
||||
|
||||
this.state = {
|
||||
zoom: 0,
|
||||
zoom: 0, // We default to 0 and override this in imageLoaded once we have naturalSize
|
||||
minZoom: MAX_SCALE,
|
||||
maxZoom: MAX_SCALE,
|
||||
rotation: 0,
|
||||
translationX: 0,
|
||||
translationY: 0,
|
||||
translationX: (
|
||||
thumbnailInfo?.positionX +
|
||||
(thumbnailInfo?.width / 2) -
|
||||
(UIStore.instance.windowWidth / 2)
|
||||
) ?? 0,
|
||||
translationY: (
|
||||
thumbnailInfo?.positionY +
|
||||
(thumbnailInfo?.height / 2) -
|
||||
(UIStore.instance.windowHeight / 2) -
|
||||
(getPanelHeight() / 2)
|
||||
) ?? 0,
|
||||
moving: false,
|
||||
contextMenuDisplayed: false,
|
||||
};
|
||||
|
@ -98,6 +125,9 @@ export default class ImageView extends React.Component<IProps, IState> {
|
|||
private previousX = 0;
|
||||
private previousY = 0;
|
||||
|
||||
private animatingLoading = false;
|
||||
private imageIsLoaded = false;
|
||||
|
||||
componentDidMount() {
|
||||
// We have to use addEventListener() because the listener
|
||||
// needs to be passive in order to work with Chromium
|
||||
|
@ -105,15 +135,37 @@ export default class ImageView extends React.Component<IProps, IState> {
|
|||
// We want to recalculate zoom whenever the window's size changes
|
||||
window.addEventListener("resize", this.recalculateZoom);
|
||||
// After the image loads for the first time we want to calculate the zoom
|
||||
this.image.current.addEventListener("load", this.recalculateZoom);
|
||||
this.image.current.addEventListener("load", this.imageLoaded);
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
this.focusLock.current.removeEventListener('wheel', this.onWheel);
|
||||
window.removeEventListener("resize", this.recalculateZoom);
|
||||
this.image.current.removeEventListener("load", this.recalculateZoom);
|
||||
this.image.current.removeEventListener("load", this.imageLoaded);
|
||||
}
|
||||
|
||||
private imageLoaded = () => {
|
||||
// First, we calculate the zoom, so that the image has the same size as
|
||||
// the thumbnail
|
||||
const { thumbnailInfo } = this.props;
|
||||
if (thumbnailInfo?.width) {
|
||||
this.setState({ zoom: thumbnailInfo.width / this.image.current.naturalWidth });
|
||||
}
|
||||
|
||||
// Once the zoom is set, we the image is considered loaded and we can
|
||||
// start animating it into the center of the screen
|
||||
this.imageIsLoaded = true;
|
||||
this.animatingLoading = true;
|
||||
this.setZoomAndRotation();
|
||||
this.setState({
|
||||
translationX: 0,
|
||||
translationY: 0,
|
||||
});
|
||||
|
||||
// Once the position is set, there is no need to animate anymore
|
||||
this.animatingLoading = false;
|
||||
};
|
||||
|
||||
private recalculateZoom = () => {
|
||||
this.setZoomAndRotation();
|
||||
};
|
||||
|
@ -360,16 +412,17 @@ export default class ImageView extends React.Component<IProps, IState> {
|
|||
const showEventMeta = !!this.props.mxEvent;
|
||||
const zoomingDisabled = this.state.maxZoom === this.state.minZoom;
|
||||
|
||||
let transitionClassName;
|
||||
if (this.animatingLoading) transitionClassName = "mx_ImageView_image_animatingLoading";
|
||||
else if (this.state.moving || !this.imageIsLoaded) transitionClassName = "";
|
||||
else transitionClassName = "mx_ImageView_image_animating";
|
||||
|
||||
let cursor;
|
||||
if (this.state.moving) {
|
||||
cursor= "grabbing";
|
||||
} else if (zoomingDisabled) {
|
||||
cursor = "default";
|
||||
} else if (this.state.zoom === this.state.minZoom) {
|
||||
cursor = "zoom-in";
|
||||
} else {
|
||||
cursor = "zoom-out";
|
||||
}
|
||||
if (this.state.moving) cursor = "grabbing";
|
||||
else if (zoomingDisabled) cursor = "default";
|
||||
else if (this.state.zoom === this.state.minZoom) cursor = "zoom-in";
|
||||
else cursor = "zoom-out";
|
||||
|
||||
const rotationDegrees = this.state.rotation + "deg";
|
||||
const zoom = this.state.zoom;
|
||||
const translatePixelsX = this.state.translationX + "px";
|
||||
|
@ -380,7 +433,6 @@ export default class ImageView extends React.Component<IProps, IState> {
|
|||
// image causing it translate in the wrong direction.
|
||||
const style = {
|
||||
cursor: cursor,
|
||||
transition: this.state.moving ? null : "transform 200ms ease 0s",
|
||||
transform: `translateX(${translatePixelsX})
|
||||
translateY(${translatePixelsY})
|
||||
scale(${zoom})
|
||||
|
@ -528,7 +580,7 @@ export default class ImageView extends React.Component<IProps, IState> {
|
|||
style={style}
|
||||
alt={this.props.name}
|
||||
ref={this.image}
|
||||
className="mx_ImageView_image"
|
||||
className={`mx_ImageView_image ${transitionClassName}`}
|
||||
draggable={true}
|
||||
onMouseDown={this.onStartMoving}
|
||||
/>
|
||||
|
|
|
@ -16,13 +16,13 @@ limitations under the License.
|
|||
*/
|
||||
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import * as sdk from '../../../index';
|
||||
import * as languageHandler from '../../../languageHandler';
|
||||
import SettingsStore from "../../../settings/SettingsStore";
|
||||
import { _t } from "../../../languageHandler";
|
||||
import { replaceableComponent } from "../../../utils/replaceableComponent";
|
||||
import Spinner from "./Spinner";
|
||||
import Dropdown from "./Dropdown";
|
||||
|
||||
function languageMatchesSearchQuery(query, language) {
|
||||
if (language.label.toUpperCase().includes(query.toUpperCase())) return true;
|
||||
|
@ -30,11 +30,22 @@ function languageMatchesSearchQuery(query, language) {
|
|||
return false;
|
||||
}
|
||||
|
||||
interface IProps {
|
||||
className?: string;
|
||||
onOptionChange: (language: string) => void;
|
||||
value?: string;
|
||||
disabled?: boolean;
|
||||
}
|
||||
|
||||
interface IState {
|
||||
searchQuery: string;
|
||||
langs: string[];
|
||||
}
|
||||
|
||||
@replaceableComponent("views.elements.LanguageDropdown")
|
||||
export default class LanguageDropdown extends React.Component {
|
||||
constructor(props) {
|
||||
export default class LanguageDropdown extends React.Component<IProps, IState> {
|
||||
constructor(props: IProps) {
|
||||
super(props);
|
||||
this._onSearchChange = this._onSearchChange.bind(this);
|
||||
|
||||
this.state = {
|
||||
searchQuery: '',
|
||||
|
@ -42,7 +53,7 @@ export default class LanguageDropdown extends React.Component {
|
|||
};
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
public componentDidMount(): void {
|
||||
languageHandler.getAllLanguagesFromJson().then((langs) => {
|
||||
langs.sort(function(a, b) {
|
||||
if (a.label < b.label) return -1;
|
||||
|
@ -63,20 +74,17 @@ export default class LanguageDropdown extends React.Component {
|
|||
}
|
||||
}
|
||||
|
||||
_onSearchChange(search) {
|
||||
private onSearchChange = (search: string): void => {
|
||||
this.setState({
|
||||
searchQuery: search,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
public render(): JSX.Element {
|
||||
if (this.state.langs === null) {
|
||||
const Spinner = sdk.getComponent('elements.Spinner');
|
||||
return <Spinner />;
|
||||
}
|
||||
|
||||
const Dropdown = sdk.getComponent('elements.Dropdown');
|
||||
|
||||
let displayedLanguages;
|
||||
if (this.state.searchQuery) {
|
||||
displayedLanguages = this.state.langs.filter((lang) => {
|
||||
|
@ -107,7 +115,7 @@ export default class LanguageDropdown extends React.Component {
|
|||
id="mx_LanguageDropdown"
|
||||
className={this.props.className}
|
||||
onOptionChange={this.props.onOptionChange}
|
||||
onSearchChange={this._onSearchChange}
|
||||
onSearchChange={this.onSearchChange}
|
||||
searchEnabled={true}
|
||||
value={value}
|
||||
label={_t("Language Dropdown")}
|
||||
|
@ -118,8 +126,3 @@ export default class LanguageDropdown extends React.Component {
|
|||
}
|
||||
}
|
||||
|
||||
LanguageDropdown.propTypes = {
|
||||
className: PropTypes.string,
|
||||
onOptionChange: PropTypes.func.isRequired,
|
||||
value: PropTypes.string,
|
||||
};
|
|
@ -15,17 +15,16 @@ limitations under the License.
|
|||
*/
|
||||
|
||||
import React from "react";
|
||||
import PropTypes from 'prop-types';
|
||||
import { replaceableComponent } from "../../../utils/replaceableComponent";
|
||||
|
||||
class ItemRange {
|
||||
constructor(topCount, renderCount, bottomCount) {
|
||||
this.topCount = topCount;
|
||||
this.renderCount = renderCount;
|
||||
this.bottomCount = bottomCount;
|
||||
}
|
||||
constructor(
|
||||
public topCount: number,
|
||||
public renderCount: number,
|
||||
public bottomCount: number,
|
||||
) { }
|
||||
|
||||
contains(range) {
|
||||
public contains(range: ItemRange): boolean {
|
||||
// don't contain empty ranges
|
||||
// as it will prevent clearing the list
|
||||
// once it is scrolled far enough out of view
|
||||
|
@ -36,7 +35,7 @@ class ItemRange {
|
|||
(range.topCount + range.renderCount) <= (this.topCount + this.renderCount);
|
||||
}
|
||||
|
||||
expand(amount) {
|
||||
public expand(amount: number): ItemRange {
|
||||
// don't expand ranges that won't render anything
|
||||
if (this.renderCount === 0) {
|
||||
return this;
|
||||
|
@ -51,20 +50,55 @@ class ItemRange {
|
|||
);
|
||||
}
|
||||
|
||||
totalSize() {
|
||||
public totalSize(): number {
|
||||
return this.topCount + this.renderCount + this.bottomCount;
|
||||
}
|
||||
}
|
||||
|
||||
interface IProps<T> {
|
||||
// height in pixels of the component returned by `renderItem`
|
||||
itemHeight: number;
|
||||
// function to turn an element of `items` into a react component
|
||||
renderItem: (item: T) => JSX.Element;
|
||||
// scrollTop of the viewport (minus the height of any content above this list like other `LazyRenderList`s)
|
||||
scrollTop: number;
|
||||
// the height of the viewport this content is scrolled in
|
||||
height: number;
|
||||
// all items for the list. These should not be react components, see `renderItem`.
|
||||
items?: T[];
|
||||
// the amount of items to scroll before causing a rerender,
|
||||
// should typically be less than `overflowItems` unless applying
|
||||
// margins in the parent component when using multiple LazyRenderList in one viewport.
|
||||
// use 0 to only rerender when items will come into view.
|
||||
overflowMargin?: number;
|
||||
// the amount of items to add at the top and bottom to render,
|
||||
// so not every scroll of causes a rerender.
|
||||
overflowItems?: number;
|
||||
|
||||
element?: string;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
interface IState {
|
||||
renderRange: ItemRange;
|
||||
}
|
||||
|
||||
@replaceableComponent("views.elements.LazyRenderList")
|
||||
export default class LazyRenderList extends React.Component {
|
||||
constructor(props) {
|
||||
export default class LazyRenderList<T = any> extends React.Component<IProps<T>, IState> {
|
||||
public static defaultProps: Partial<IProps<unknown>> = {
|
||||
overflowItems: 20,
|
||||
overflowMargin: 5,
|
||||
};
|
||||
|
||||
constructor(props: IProps<T>) {
|
||||
super(props);
|
||||
|
||||
this.state = {};
|
||||
this.state = {
|
||||
renderRange: null,
|
||||
};
|
||||
}
|
||||
|
||||
static getDerivedStateFromProps(props, state) {
|
||||
public static getDerivedStateFromProps(props: IProps<unknown>, state: IState): Partial<IState> {
|
||||
const range = LazyRenderList.getVisibleRangeFromProps(props);
|
||||
const intersectRange = range.expand(props.overflowMargin);
|
||||
const renderRange = range.expand(props.overflowItems);
|
||||
|
@ -77,7 +111,7 @@ export default class LazyRenderList extends React.Component {
|
|||
return null;
|
||||
}
|
||||
|
||||
static getVisibleRangeFromProps(props) {
|
||||
private static getVisibleRangeFromProps(props: IProps<unknown>): ItemRange {
|
||||
const { items, itemHeight, scrollTop, height } = props;
|
||||
const length = items ? items.length : 0;
|
||||
const topCount = Math.min(Math.max(0, Math.floor(scrollTop / itemHeight)), length);
|
||||
|
@ -88,7 +122,7 @@ export default class LazyRenderList extends React.Component {
|
|||
return new ItemRange(topCount, renderCount, bottomCount);
|
||||
}
|
||||
|
||||
render() {
|
||||
public render(): JSX.Element {
|
||||
const { itemHeight, items, renderItem } = this.props;
|
||||
const { renderRange } = this.state;
|
||||
const { topCount, renderCount, bottomCount } = renderRange;
|
||||
|
@ -109,28 +143,3 @@ export default class LazyRenderList extends React.Component {
|
|||
}
|
||||
}
|
||||
|
||||
LazyRenderList.defaultProps = {
|
||||
overflowItems: 20,
|
||||
overflowMargin: 5,
|
||||
};
|
||||
|
||||
LazyRenderList.propTypes = {
|
||||
// height in pixels of the component returned by `renderItem`
|
||||
itemHeight: PropTypes.number.isRequired,
|
||||
// function to turn an element of `items` into a react component
|
||||
renderItem: PropTypes.func.isRequired,
|
||||
// scrollTop of the viewport (minus the height of any content above this list like other `LazyRenderList`s)
|
||||
scrollTop: PropTypes.number.isRequired,
|
||||
// the height of the viewport this content is scrolled in
|
||||
height: PropTypes.number.isRequired,
|
||||
// all items for the list. These should not be react components, see `renderItem`.
|
||||
items: PropTypes.array,
|
||||
// the amount of items to scroll before causing a rerender,
|
||||
// should typically be less than `overflowItems` unless applying
|
||||
// margins in the parent component when using multiple LazyRenderList in one viewport.
|
||||
// use 0 to only rerender when items will come into view.
|
||||
overflowMargin: PropTypes.number,
|
||||
// the amount of items to add at the top and bottom to render,
|
||||
// so not every scroll of causes a rerender.
|
||||
overflowItems: PropTypes.number,
|
||||
};
|
|
@ -16,25 +16,26 @@ limitations under the License.
|
|||
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import PropTypes from 'prop-types';
|
||||
import { throttle } from "lodash";
|
||||
import ResizeObserver from 'resize-observer-polyfill';
|
||||
|
||||
import dis from '../../../dispatcher/dispatcher';
|
||||
import MatrixClientContext from "../../../contexts/MatrixClientContext";
|
||||
import { MatrixClientPeg } from "../../../MatrixClientPeg";
|
||||
import { isNullOrUndefined } from "matrix-js-sdk/src/utils";
|
||||
import { replaceableComponent } from "../../../utils/replaceableComponent";
|
||||
import { ActionPayload } from "../../../dispatcher/payloads";
|
||||
|
||||
export const getPersistKey = (appId: string) => 'widget_' + appId;
|
||||
|
||||
// Shamelessly ripped off Modal.js. There's probably a better way
|
||||
// of doing reusable widgets like dialog boxes & menus where we go and
|
||||
// pass in a custom control as the actual body.
|
||||
|
||||
function getContainer(containerId) {
|
||||
return document.getElementById(containerId);
|
||||
function getContainer(containerId: string): HTMLDivElement {
|
||||
return document.getElementById(containerId) as HTMLDivElement;
|
||||
}
|
||||
|
||||
function getOrCreateContainer(containerId) {
|
||||
function getOrCreateContainer(containerId: string): HTMLDivElement {
|
||||
let container = getContainer(containerId);
|
||||
|
||||
if (!container) {
|
||||
|
@ -46,7 +47,19 @@ function getOrCreateContainer(containerId) {
|
|||
return container;
|
||||
}
|
||||
|
||||
/*
|
||||
interface IProps {
|
||||
// Unique identifier for this PersistedElement instance
|
||||
// Any PersistedElements with the same persistKey will use
|
||||
// the same DOM container.
|
||||
persistKey: string;
|
||||
|
||||
// z-index for the element. Defaults to 9.
|
||||
zIndex?: number;
|
||||
|
||||
style?: React.StyleHTMLAttributes<HTMLDivElement>;
|
||||
}
|
||||
|
||||
/**
|
||||
* Class of component that renders its children in a separate ReactDOM virtual tree
|
||||
* in a container element appended to document.body.
|
||||
*
|
||||
|
@ -58,42 +71,33 @@ function getOrCreateContainer(containerId) {
|
|||
* bounding rect as the parent of PE.
|
||||
*/
|
||||
@replaceableComponent("views.elements.PersistedElement")
|
||||
export default class PersistedElement extends React.Component {
|
||||
static propTypes = {
|
||||
// Unique identifier for this PersistedElement instance
|
||||
// Any PersistedElements with the same persistKey will use
|
||||
// the same DOM container.
|
||||
persistKey: PropTypes.string.isRequired,
|
||||
export default class PersistedElement extends React.Component<IProps> {
|
||||
private resizeObserver: ResizeObserver;
|
||||
private dispatcherRef: string;
|
||||
private childContainer: HTMLDivElement;
|
||||
private child: HTMLDivElement;
|
||||
|
||||
// z-index for the element. Defaults to 9.
|
||||
zIndex: PropTypes.number,
|
||||
};
|
||||
constructor(props: IProps) {
|
||||
super(props);
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.collectChildContainer = this.collectChildContainer.bind(this);
|
||||
this.collectChild = this.collectChild.bind(this);
|
||||
this._repositionChild = this._repositionChild.bind(this);
|
||||
this._onAction = this._onAction.bind(this);
|
||||
|
||||
this.resizeObserver = new ResizeObserver(this._repositionChild);
|
||||
this.resizeObserver = new ResizeObserver(this.repositionChild);
|
||||
// Annoyingly, a resize observer is insufficient, since we also care
|
||||
// about when the element moves on the screen without changing its
|
||||
// dimensions. Doesn't look like there's a ResizeObserver equivalent
|
||||
// for this, so we bodge it by listening for document resize and
|
||||
// the timeline_resize action.
|
||||
window.addEventListener('resize', this._repositionChild);
|
||||
this._dispatcherRef = dis.register(this._onAction);
|
||||
window.addEventListener('resize', this.repositionChild);
|
||||
this.dispatcherRef = dis.register(this.onAction);
|
||||
}
|
||||
|
||||
/**
|
||||
* Removes the DOM elements created when a PersistedElement with the given
|
||||
* persistKey was mounted. The DOM elements will be re-added if another
|
||||
* PeristedElement is mounted in the future.
|
||||
* PersistedElement is mounted in the future.
|
||||
*
|
||||
* @param {string} persistKey Key used to uniquely identify this PersistedElement
|
||||
*/
|
||||
static destroyElement(persistKey) {
|
||||
public static destroyElement(persistKey: string): void {
|
||||
const container = getContainer('mx_persistedElement_' + persistKey);
|
||||
if (container) {
|
||||
container.remove();
|
||||
|
@ -104,7 +108,7 @@ export default class PersistedElement extends React.Component {
|
|||
return Boolean(getContainer('mx_persistedElement_' + persistKey));
|
||||
}
|
||||
|
||||
collectChildContainer(ref) {
|
||||
private collectChildContainer = (ref: HTMLDivElement): void => {
|
||||
if (this.childContainer) {
|
||||
this.resizeObserver.unobserve(this.childContainer);
|
||||
}
|
||||
|
@ -112,48 +116,48 @@ export default class PersistedElement extends React.Component {
|
|||
if (ref) {
|
||||
this.resizeObserver.observe(ref);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
collectChild(ref) {
|
||||
private collectChild = (ref: HTMLDivElement): void => {
|
||||
this.child = ref;
|
||||
this.updateChild();
|
||||
}
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
public componentDidMount(): void {
|
||||
this.updateChild();
|
||||
this.renderApp();
|
||||
}
|
||||
|
||||
componentDidUpdate() {
|
||||
public componentDidUpdate(): void {
|
||||
this.updateChild();
|
||||
this.renderApp();
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
public componentWillUnmount(): void {
|
||||
this.updateChildVisibility(this.child, false);
|
||||
this.resizeObserver.disconnect();
|
||||
window.removeEventListener('resize', this._repositionChild);
|
||||
dis.unregister(this._dispatcherRef);
|
||||
window.removeEventListener('resize', this.repositionChild);
|
||||
dis.unregister(this.dispatcherRef);
|
||||
}
|
||||
|
||||
_onAction(payload) {
|
||||
private onAction = (payload: ActionPayload): void => {
|
||||
if (payload.action === 'timeline_resize') {
|
||||
this._repositionChild();
|
||||
this.repositionChild();
|
||||
} else if (payload.action === 'logout') {
|
||||
PersistedElement.destroyElement(this.props.persistKey);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
_repositionChild() {
|
||||
private repositionChild = (): void => {
|
||||
this.updateChildPosition(this.child, this.childContainer);
|
||||
}
|
||||
};
|
||||
|
||||
updateChild() {
|
||||
private updateChild(): void {
|
||||
this.updateChildPosition(this.child, this.childContainer);
|
||||
this.updateChildVisibility(this.child, true);
|
||||
}
|
||||
|
||||
renderApp() {
|
||||
private renderApp(): void {
|
||||
const content = <MatrixClientContext.Provider value={MatrixClientPeg.get()}>
|
||||
<div ref={this.collectChild} style={this.props.style}>
|
||||
{ this.props.children }
|
||||
|
@ -163,12 +167,12 @@ export default class PersistedElement extends React.Component {
|
|||
ReactDOM.render(content, getOrCreateContainer('mx_persistedElement_'+this.props.persistKey));
|
||||
}
|
||||
|
||||
updateChildVisibility(child, visible) {
|
||||
private updateChildVisibility(child: HTMLDivElement, visible: boolean): void {
|
||||
if (!child) return;
|
||||
child.style.display = visible ? 'block' : 'none';
|
||||
}
|
||||
|
||||
updateChildPosition = throttle((child, parent) => {
|
||||
private updateChildPosition = throttle((child: HTMLDivElement, parent: HTMLDivElement): void => {
|
||||
if (!child || !parent) return;
|
||||
|
||||
const parentRect = parent.getBoundingClientRect();
|
||||
|
@ -182,9 +186,8 @@ export default class PersistedElement extends React.Component {
|
|||
});
|
||||
}, 100, { trailing: true, leading: true });
|
||||
|
||||
render() {
|
||||
public render(): JSX.Element {
|
||||
return <div ref={this.collectChildContainer} />;
|
||||
}
|
||||
}
|
||||
|
||||
export const getPersistKey = (appId) => 'widget_' + appId;
|
|
@ -19,57 +19,70 @@ import React from 'react';
|
|||
import RoomViewStore from '../../../stores/RoomViewStore';
|
||||
import ActiveWidgetStore from '../../../stores/ActiveWidgetStore';
|
||||
import WidgetUtils from '../../../utils/WidgetUtils';
|
||||
import * as sdk from '../../../index';
|
||||
import { MatrixClientPeg } from '../../../MatrixClientPeg';
|
||||
import { replaceableComponent } from "../../../utils/replaceableComponent";
|
||||
import { EventSubscription } from 'fbemitter';
|
||||
import AppTile from "./AppTile";
|
||||
import { Room } from "matrix-js-sdk/src/models/room";
|
||||
|
||||
interface IState {
|
||||
roomId: string;
|
||||
persistentWidgetId: string;
|
||||
}
|
||||
|
||||
@replaceableComponent("views.elements.PersistentApp")
|
||||
export default class PersistentApp extends React.Component {
|
||||
state = {
|
||||
roomId: RoomViewStore.getRoomId(),
|
||||
persistentWidgetId: ActiveWidgetStore.getPersistentWidgetId(),
|
||||
};
|
||||
export default class PersistentApp extends React.Component<{}, IState> {
|
||||
private roomStoreToken: EventSubscription;
|
||||
|
||||
componentDidMount() {
|
||||
this._roomStoreToken = RoomViewStore.addListener(this._onRoomViewStoreUpdate);
|
||||
ActiveWidgetStore.on('update', this._onActiveWidgetStoreUpdate);
|
||||
MatrixClientPeg.get().on("Room.myMembership", this._onMyMembership);
|
||||
constructor() {
|
||||
super({});
|
||||
|
||||
this.state = {
|
||||
roomId: RoomViewStore.getRoomId(),
|
||||
persistentWidgetId: ActiveWidgetStore.getPersistentWidgetId(),
|
||||
};
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
if (this._roomStoreToken) {
|
||||
this._roomStoreToken.remove();
|
||||
public componentDidMount(): void {
|
||||
this.roomStoreToken = RoomViewStore.addListener(this.onRoomViewStoreUpdate);
|
||||
ActiveWidgetStore.on('update', this.onActiveWidgetStoreUpdate);
|
||||
MatrixClientPeg.get().on("Room.myMembership", this.onMyMembership);
|
||||
}
|
||||
|
||||
public componentWillUnmount(): void {
|
||||
if (this.roomStoreToken) {
|
||||
this.roomStoreToken.remove();
|
||||
}
|
||||
ActiveWidgetStore.removeListener('update', this._onActiveWidgetStoreUpdate);
|
||||
ActiveWidgetStore.removeListener('update', this.onActiveWidgetStoreUpdate);
|
||||
if (MatrixClientPeg.get()) {
|
||||
MatrixClientPeg.get().removeListener("Room.myMembership", this._onMyMembership);
|
||||
MatrixClientPeg.get().removeListener("Room.myMembership", this.onMyMembership);
|
||||
}
|
||||
}
|
||||
|
||||
_onRoomViewStoreUpdate = payload => {
|
||||
private onRoomViewStoreUpdate = (): void => {
|
||||
if (RoomViewStore.getRoomId() === this.state.roomId) return;
|
||||
this.setState({
|
||||
roomId: RoomViewStore.getRoomId(),
|
||||
});
|
||||
};
|
||||
|
||||
_onActiveWidgetStoreUpdate = () => {
|
||||
private onActiveWidgetStoreUpdate = (): void => {
|
||||
this.setState({
|
||||
persistentWidgetId: ActiveWidgetStore.getPersistentWidgetId(),
|
||||
});
|
||||
};
|
||||
|
||||
_onMyMembership = async (room, membership) => {
|
||||
private onMyMembership = async (room: Room, membership: string): Promise<void> => {
|
||||
const persistentWidgetInRoomId = ActiveWidgetStore.getRoomId(this.state.persistentWidgetId);
|
||||
if (membership !== "join") {
|
||||
// we're not in the room anymore - delete
|
||||
if (room.roomId === persistentWidgetInRoomId) {
|
||||
if (room .roomId === persistentWidgetInRoomId) {
|
||||
ActiveWidgetStore.destroyPersistentWidget(this.state.persistentWidgetId);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
public render(): JSX.Element {
|
||||
if (this.state.persistentWidgetId) {
|
||||
const persistentWidgetInRoomId = ActiveWidgetStore.getRoomId(this.state.persistentWidgetId);
|
||||
|
||||
|
@ -89,7 +102,6 @@ export default class PersistentApp extends React.Component {
|
|||
appEvent.getStateKey(), appEvent.getContent(), appEvent.getSender(),
|
||||
persistentWidgetInRoomId, appEvent.getId(),
|
||||
);
|
||||
const AppTile = sdk.getComponent('elements.AppTile');
|
||||
return <AppTile
|
||||
key={app.id}
|
||||
app={app}
|
|
@ -15,40 +15,52 @@ limitations under the License.
|
|||
*/
|
||||
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import * as Roles from '../../../Roles';
|
||||
import { _t } from '../../../languageHandler';
|
||||
import Field from "./Field";
|
||||
import { Key } from "../../../Keyboard";
|
||||
import { replaceableComponent } from "../../../utils/replaceableComponent";
|
||||
|
||||
const CUSTOM_VALUE = "SELECT_VALUE_CUSTOM";
|
||||
|
||||
interface IProps {
|
||||
value: number;
|
||||
// The maximum value that can be set with the power selector
|
||||
maxValue: number;
|
||||
|
||||
// Default user power level for the room
|
||||
usersDefault: number;
|
||||
|
||||
// should the user be able to change the value? false by default.
|
||||
disabled?: boolean;
|
||||
onChange?: (value: number, powerLevelKey: string) => void;
|
||||
|
||||
// Optional key to pass as the second argument to `onChange`
|
||||
powerLevelKey?: string;
|
||||
|
||||
// The name to annotate the selector with
|
||||
label?: string;
|
||||
}
|
||||
|
||||
interface IState {
|
||||
levelRoleMap: {};
|
||||
// List of power levels to show in the drop-down
|
||||
options: number[];
|
||||
|
||||
customValue: number;
|
||||
selectValue: number | string;
|
||||
custom?: boolean;
|
||||
customLevel?: number;
|
||||
}
|
||||
|
||||
@replaceableComponent("views.elements.PowerSelector")
|
||||
export default class PowerSelector extends React.Component {
|
||||
static propTypes = {
|
||||
value: PropTypes.number.isRequired,
|
||||
// The maximum value that can be set with the power selector
|
||||
maxValue: PropTypes.number.isRequired,
|
||||
|
||||
// Default user power level for the room
|
||||
usersDefault: PropTypes.number.isRequired,
|
||||
|
||||
// should the user be able to change the value? false by default.
|
||||
disabled: PropTypes.bool,
|
||||
onChange: PropTypes.func,
|
||||
|
||||
// Optional key to pass as the second argument to `onChange`
|
||||
powerLevelKey: PropTypes.string,
|
||||
|
||||
// The name to annotate the selector with
|
||||
label: PropTypes.string,
|
||||
}
|
||||
|
||||
static defaultProps = {
|
||||
export default class PowerSelector extends React.Component<IProps, IState> {
|
||||
public static defaultProps: Partial<IProps> = {
|
||||
maxValue: Infinity,
|
||||
usersDefault: 0,
|
||||
};
|
||||
|
||||
constructor(props) {
|
||||
constructor(props: IProps) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
|
@ -62,26 +74,26 @@ export default class PowerSelector extends React.Component {
|
|||
}
|
||||
|
||||
// TODO: [REACT-WARNING] Replace with appropriate lifecycle event
|
||||
// eslint-disable-next-line camelcase
|
||||
UNSAFE_componentWillMount() {
|
||||
this._initStateFromProps(this.props);
|
||||
// eslint-disable-next-line camelcase, @typescript-eslint/naming-convention
|
||||
public UNSAFE_componentWillMount(): void {
|
||||
this.initStateFromProps(this.props);
|
||||
}
|
||||
|
||||
// eslint-disable-next-line camelcase
|
||||
UNSAFE_componentWillReceiveProps(newProps) {
|
||||
this._initStateFromProps(newProps);
|
||||
// eslint-disable-next-line camelcase, @typescript-eslint/naming-convention
|
||||
public UNSAFE_componentWillReceiveProps(newProps: IProps): void {
|
||||
this.initStateFromProps(newProps);
|
||||
}
|
||||
|
||||
_initStateFromProps(newProps) {
|
||||
private initStateFromProps(newProps: IProps): void {
|
||||
// This needs to be done now because levelRoleMap has translated strings
|
||||
const levelRoleMap = Roles.levelRoleMap(newProps.usersDefault);
|
||||
const options = Object.keys(levelRoleMap).filter(level => {
|
||||
return (
|
||||
level === undefined ||
|
||||
level <= newProps.maxValue ||
|
||||
level == newProps.value
|
||||
parseInt(level) <= newProps.maxValue ||
|
||||
parseInt(level) == newProps.value
|
||||
);
|
||||
});
|
||||
}).map(level => parseInt(level));
|
||||
|
||||
const isCustom = levelRoleMap[newProps.value] === undefined;
|
||||
|
||||
|
@ -90,32 +102,33 @@ export default class PowerSelector extends React.Component {
|
|||
options,
|
||||
custom: isCustom,
|
||||
customLevel: newProps.value,
|
||||
selectValue: isCustom ? "SELECT_VALUE_CUSTOM" : newProps.value,
|
||||
selectValue: isCustom ? CUSTOM_VALUE : newProps.value,
|
||||
});
|
||||
}
|
||||
|
||||
onSelectChange = event => {
|
||||
const isCustom = event.target.value === "SELECT_VALUE_CUSTOM";
|
||||
private onSelectChange = (event: React.ChangeEvent<HTMLSelectElement>): void => {
|
||||
const isCustom = event.target.value === CUSTOM_VALUE;
|
||||
if (isCustom) {
|
||||
this.setState({ custom: true });
|
||||
} else {
|
||||
this.props.onChange(event.target.value, this.props.powerLevelKey);
|
||||
this.setState({ selectValue: event.target.value });
|
||||
const powerLevel = parseInt(event.target.value);
|
||||
this.props.onChange(powerLevel, this.props.powerLevelKey);
|
||||
this.setState({ selectValue: powerLevel });
|
||||
}
|
||||
};
|
||||
|
||||
onCustomChange = event => {
|
||||
this.setState({ customValue: event.target.value });
|
||||
private onCustomChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
|
||||
this.setState({ customValue: parseInt(event.target.value) });
|
||||
};
|
||||
|
||||
onCustomBlur = event => {
|
||||
private onCustomBlur = (event: React.FocusEvent): void => {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
|
||||
this.props.onChange(parseInt(this.state.customValue), this.props.powerLevelKey);
|
||||
this.props.onChange(this.state.customValue, this.props.powerLevelKey);
|
||||
};
|
||||
|
||||
onCustomKeyDown = event => {
|
||||
private onCustomKeyDown = (event: React.KeyboardEvent<HTMLInputElement>): void => {
|
||||
if (event.key === Key.ENTER) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
|
@ -125,11 +138,11 @@ export default class PowerSelector extends React.Component {
|
|||
// raising a dialog which causes a blur which causes a dialog which causes a blur and
|
||||
// so on. By not causing the onChange to be called here, we avoid the loop because we
|
||||
// handle the onBlur safely.
|
||||
event.target.blur();
|
||||
(event.target as HTMLInputElement).blur();
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
public render(): JSX.Element {
|
||||
let picker;
|
||||
const label = typeof this.props.label === "undefined" ? _t("Power level") : this.props.label;
|
||||
if (this.state.custom) {
|
||||
|
@ -147,14 +160,14 @@ export default class PowerSelector extends React.Component {
|
|||
);
|
||||
} else {
|
||||
// Each level must have a definition in this.state.levelRoleMap
|
||||
let options = this.state.options.map((level) => {
|
||||
const options = this.state.options.map((level) => {
|
||||
return {
|
||||
value: level,
|
||||
value: String(level),
|
||||
text: Roles.textualPowerLevel(level, this.props.usersDefault),
|
||||
};
|
||||
});
|
||||
options.push({ value: "SELECT_VALUE_CUSTOM", text: _t("Custom level") });
|
||||
options = options.map((op) => {
|
||||
options.push({ value: CUSTOM_VALUE, text: _t("Custom level") });
|
||||
const optionsElements = options.map((op) => {
|
||||
return <option value={op.value} key={op.value}>{ op.text }</option>;
|
||||
});
|
||||
|
||||
|
@ -166,7 +179,7 @@ export default class PowerSelector extends React.Component {
|
|||
value={String(this.state.selectValue)}
|
||||
disabled={this.props.disabled}
|
||||
>
|
||||
{ options }
|
||||
{ optionsElements }
|
||||
</Field>
|
||||
);
|
||||
}
|
|
@ -88,7 +88,13 @@ export default class ReplyThread extends React.Component<IProps, IState> {
|
|||
// could be used here for replies as well... However, the helper
|
||||
// currently assumes the relation has a `rel_type`, which older replies
|
||||
// do not, so this block is left as-is for now.
|
||||
const mRelatesTo = ev.getWireContent()['m.relates_to'];
|
||||
//
|
||||
// We're prefer ev.getContent() over ev.getWireContent() to make sure
|
||||
// we grab the latest edit with potentially new relations. But we also
|
||||
// can't just rely on ev.getContent() by itself because historically we
|
||||
// still show the reply from the original message even though the edit
|
||||
// event does not include the relation reply.
|
||||
const mRelatesTo = ev.getContent()['m.relates_to'] || ev.getWireContent()['m.relates_to'];
|
||||
if (mRelatesTo && mRelatesTo['m.in_reply_to']) {
|
||||
const mInReplyTo = mRelatesTo['m.in_reply_to'];
|
||||
if (mInReplyTo && mInReplyTo['event_id']) return mInReplyTo['event_id'];
|
||||
|
|
|
@ -17,25 +17,34 @@
|
|||
import React from 'react';
|
||||
import { replaceableComponent } from "../../../utils/replaceableComponent";
|
||||
|
||||
interface IProps {
|
||||
reason?: string;
|
||||
contentHtml: string;
|
||||
}
|
||||
|
||||
interface IState {
|
||||
visible: boolean;
|
||||
}
|
||||
|
||||
@replaceableComponent("views.elements.Spoiler")
|
||||
export default class Spoiler extends React.Component {
|
||||
constructor(props) {
|
||||
export default class Spoiler extends React.Component<IProps, IState> {
|
||||
constructor(props: IProps) {
|
||||
super(props);
|
||||
this.state = {
|
||||
visible: false,
|
||||
};
|
||||
}
|
||||
|
||||
toggleVisible(e) {
|
||||
private toggleVisible = (e: React.MouseEvent): void => {
|
||||
if (!this.state.visible) {
|
||||
// we are un-blurring, we don't want this click to propagate to potential child pills
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
}
|
||||
this.setState({ visible: !this.state.visible });
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
public render(): JSX.Element {
|
||||
const reason = this.props.reason ? (
|
||||
<span className="mx_EventTile_spoiler_reason">{ "(" + this.props.reason + ")" }</span>
|
||||
) : null;
|
||||
|
@ -43,7 +52,7 @@ export default class Spoiler extends React.Component {
|
|||
// as such, we pass the this.props.contentHtml instead and then set the raw
|
||||
// HTML content. This is secure as the contents have already been parsed previously
|
||||
return (
|
||||
<span className={"mx_EventTile_spoiler" + (this.state.visible ? " visible" : "")} onClick={this.toggleVisible.bind(this)}>
|
||||
<span className={"mx_EventTile_spoiler" + (this.state.visible ? " visible" : "")} onClick={this.toggleVisible}>
|
||||
{ reason }
|
||||
|
||||
<span className="mx_EventTile_spoiler_content" dangerouslySetInnerHTML={{ __html: this.props.contentHtml }} />
|
|
@ -15,40 +15,40 @@ limitations under the License.
|
|||
*/
|
||||
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { highlightBlock } from 'highlight.js';
|
||||
import { replaceableComponent } from "../../../utils/replaceableComponent";
|
||||
|
||||
interface IProps {
|
||||
className?: string;
|
||||
children?: React.ReactNode;
|
||||
}
|
||||
|
||||
@replaceableComponent("views.elements.SyntaxHighlight")
|
||||
export default class SyntaxHighlight extends React.Component {
|
||||
static propTypes = {
|
||||
className: PropTypes.string,
|
||||
children: PropTypes.node,
|
||||
};
|
||||
export default class SyntaxHighlight extends React.Component<IProps> {
|
||||
private el: HTMLPreElement = null;
|
||||
|
||||
constructor(props) {
|
||||
constructor(props: IProps) {
|
||||
super(props);
|
||||
|
||||
this._ref = this._ref.bind(this);
|
||||
}
|
||||
|
||||
// componentDidUpdate used here for reusability
|
||||
componentDidUpdate() {
|
||||
if (this._el) highlightBlock(this._el);
|
||||
public componentDidUpdate(): void {
|
||||
if (this.el) highlightBlock(this.el);
|
||||
}
|
||||
|
||||
// call componentDidUpdate because _ref is fired on initial render
|
||||
// which does not fire componentDidUpdate
|
||||
_ref(el) {
|
||||
this._el = el;
|
||||
private ref = (el: HTMLPreElement): void => {
|
||||
this.el = el;
|
||||
this.componentDidUpdate();
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
public render(): JSX.Element {
|
||||
const { className, children } = this.props;
|
||||
|
||||
return <pre className={`${className} mx_SyntaxHighlight`} ref={this._ref}>
|
||||
return <pre className={`${className} mx_SyntaxHighlight`} ref={this.ref}>
|
||||
<code>{ children }</code>
|
||||
</pre>;
|
||||
}
|
||||
}
|
||||
|
|
@ -15,42 +15,44 @@
|
|||
*/
|
||||
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import * as sdk from '../../../index';
|
||||
import { replaceableComponent } from "../../../utils/replaceableComponent";
|
||||
import Tooltip from "./Tooltip";
|
||||
|
||||
interface IProps {
|
||||
class?: string;
|
||||
tooltipClass?: string;
|
||||
tooltip: React.ReactNode;
|
||||
tooltipProps?: {};
|
||||
onClick?: (ev?: React.MouseEvent) => void;
|
||||
}
|
||||
|
||||
interface IState {
|
||||
hover: boolean;
|
||||
}
|
||||
|
||||
@replaceableComponent("views.elements.TextWithTooltip")
|
||||
export default class TextWithTooltip extends React.Component {
|
||||
static propTypes = {
|
||||
class: PropTypes.string,
|
||||
tooltipClass: PropTypes.string,
|
||||
tooltip: PropTypes.node.isRequired,
|
||||
tooltipProps: PropTypes.object,
|
||||
};
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
export default class TextWithTooltip extends React.Component<IProps, IState> {
|
||||
constructor(props: IProps) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
hover: false,
|
||||
};
|
||||
}
|
||||
|
||||
onMouseOver = () => {
|
||||
private onMouseOver = (): void => {
|
||||
this.setState({ hover: true });
|
||||
};
|
||||
|
||||
onMouseLeave = () => {
|
||||
private onMouseLeave = (): void => {
|
||||
this.setState({ hover: false });
|
||||
};
|
||||
|
||||
render() {
|
||||
const Tooltip = sdk.getComponent("elements.Tooltip");
|
||||
|
||||
public render(): JSX.Element {
|
||||
const { class: className, children, tooltip, tooltipClass, tooltipProps, ...props } = this.props;
|
||||
|
||||
return (
|
||||
<span {...props} onMouseOver={this.onMouseOver} onMouseLeave={this.onMouseLeave} className={className}>
|
||||
<span {...props} onMouseOver={this.onMouseOver} onMouseLeave={this.onMouseLeave} onClick={this.props.onClick} className={className}>
|
||||
{ children }
|
||||
{ this.state.hover && <Tooltip
|
||||
{...tooltipProps}
|
|
@ -15,20 +15,20 @@ limitations under the License.
|
|||
*/
|
||||
|
||||
import React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
import { replaceableComponent } from "../../../../utils/replaceableComponent";
|
||||
import QRCode from "../QRCode";
|
||||
import { QRCodeData } from "matrix-js-sdk/src/crypto/verification/QRCode";
|
||||
|
||||
interface IProps {
|
||||
qrCodeData: QRCodeData;
|
||||
}
|
||||
|
||||
@replaceableComponent("views.elements.crypto.VerificationQRCode")
|
||||
export default class VerificationQRCode extends React.PureComponent {
|
||||
static propTypes = {
|
||||
qrCodeData: PropTypes.object.isRequired,
|
||||
};
|
||||
|
||||
render() {
|
||||
export default class VerificationQRCode extends React.PureComponent<IProps> {
|
||||
public render(): JSX.Element {
|
||||
return (
|
||||
<QRCode
|
||||
data={[{ data: this.props.qrCodeData.buffer, mode: 'byte' }]}
|
||||
data={[{ data: this.props.qrCodeData.getBuffer(), mode: 'byte' }]}
|
||||
className="mx_VerificationQRCode"
|
||||
width={196} />
|
||||
);
|
|
@ -29,6 +29,8 @@ import { IBodyProps } from "./IBodyProps";
|
|||
import { FileDownloader } from "../../../utils/FileDownloader";
|
||||
import TextWithTooltip from "../elements/TextWithTooltip";
|
||||
|
||||
import { logger } from "matrix-js-sdk/src/logger";
|
||||
|
||||
export let DOWNLOAD_ICON_URL; // cached copy of the download.svg asset for the sandboxed iframe later on
|
||||
|
||||
async function cacheDownloadIcon() {
|
||||
|
@ -283,7 +285,7 @@ export default class MFileBody extends React.Component<IProps, IState> {
|
|||
if (["application/pdf"].includes(fileType) && !fileTooBig) {
|
||||
// We want to force a download on this type, so use an onClick handler.
|
||||
downloadProps["onClick"] = (e) => {
|
||||
console.log(`Downloading ${fileType} as blob (unencrypted)`);
|
||||
logger.log(`Downloading ${fileType} as blob (unencrypted)`);
|
||||
|
||||
// Avoid letting the <a> do its thing
|
||||
e.preventDefault();
|
||||
|
|
|
@ -117,6 +117,17 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
|
|||
params.fileSize = content.info.size;
|
||||
}
|
||||
|
||||
if (this.image.current) {
|
||||
const clientRect = this.image.current.getBoundingClientRect();
|
||||
|
||||
params.thumbnailInfo = {
|
||||
width: clientRect.width,
|
||||
height: clientRect.height,
|
||||
positionX: clientRect.x,
|
||||
positionY: clientRect.y,
|
||||
};
|
||||
}
|
||||
|
||||
Modal.createDialog(ImageView, params, "mx_Dialog_lightbox", null, true);
|
||||
}
|
||||
};
|
||||
|
|
|
@ -27,6 +27,8 @@ import { IMediaEventContent } from "../../../customisations/models/IMediaEventCo
|
|||
import { IBodyProps } from "./IBodyProps";
|
||||
import MFileBody from "./MFileBody";
|
||||
|
||||
import { logger } from "matrix-js-sdk/src/logger";
|
||||
|
||||
interface IState {
|
||||
decryptedUrl?: string;
|
||||
decryptedThumbnailUrl?: string;
|
||||
|
@ -152,7 +154,7 @@ export default class MVideoBody extends React.PureComponent<IBodyProps, IState>
|
|||
try {
|
||||
const thumbnailUrl = await this.props.mediaEventHelper.thumbnailUrl.value;
|
||||
if (autoplay) {
|
||||
console.log("Preloading video");
|
||||
logger.log("Preloading video");
|
||||
this.setState({
|
||||
decryptedUrl: await this.props.mediaEventHelper.sourceUrl.value,
|
||||
decryptedThumbnailUrl: thumbnailUrl,
|
||||
|
@ -160,7 +162,7 @@ export default class MVideoBody extends React.PureComponent<IBodyProps, IState>
|
|||
});
|
||||
this.props.onHeightChanged();
|
||||
} else {
|
||||
console.log("NOT preloading video");
|
||||
logger.log("NOT preloading video");
|
||||
const content = this.props.mxEvent.getContent<IMediaEventContent>();
|
||||
this.setState({
|
||||
// For Chrome and Electron, we need to set some non-empty `src` to
|
||||
|
|
|
@ -71,6 +71,8 @@ import UIStore from "../../../stores/UIStore";
|
|||
import { ComposerInsertPayload } from "../../../dispatcher/payloads/ComposerInsertPayload";
|
||||
import SpaceStore from "../../../stores/SpaceStore";
|
||||
|
||||
import { logger } from "matrix-js-sdk/src/logger";
|
||||
|
||||
export interface IDevice {
|
||||
deviceId: string;
|
||||
ambiguous?: boolean;
|
||||
|
@ -557,7 +559,7 @@ const RoomKickButton: React.FC<IBaseProps> = ({ member, startUpdating, stopUpdat
|
|||
cli.kick(member.roomId, member.userId, reason || undefined).then(() => {
|
||||
// NO-OP; rely on the m.room.member event coming down else we could
|
||||
// get out of sync if we force setState here!
|
||||
console.log("Kick success");
|
||||
logger.log("Kick success");
|
||||
}, function(err) {
|
||||
console.error("Kick error: " + err);
|
||||
Modal.createTrackedDialog('Failed to kick', '', ErrorDialog, {
|
||||
|
@ -684,7 +686,7 @@ const BanToggleButton: React.FC<IBaseProps> = ({ member, startUpdating, stopUpda
|
|||
promise.then(() => {
|
||||
// NO-OP; rely on the m.room.member event coming down else we could
|
||||
// get out of sync if we force setState here!
|
||||
console.log("Ban success");
|
||||
logger.log("Ban success");
|
||||
}, function(err) {
|
||||
console.error("Ban error: " + err);
|
||||
Modal.createTrackedDialog('Failed to ban user', '', ErrorDialog, {
|
||||
|
@ -757,7 +759,7 @@ const MuteToggleButton: React.FC<IBaseRoomProps> = ({ member, room, powerLevels,
|
|||
cli.setPowerLevel(roomId, target, level, powerLevelEvent).then(() => {
|
||||
// NO-OP; rely on the m.room.member event coming down else we could
|
||||
// get out of sync if we force setState here!
|
||||
console.log("Mute toggle success");
|
||||
logger.log("Mute toggle success");
|
||||
}, function(err) {
|
||||
console.error("Mute error: " + err);
|
||||
Modal.createTrackedDialog('Failed to mute user', '', ErrorDialog, {
|
||||
|
@ -917,7 +919,7 @@ const GroupAdminToolsSection: React.FC<{
|
|||
_t('Failed to withdraw invitation') :
|
||||
_t('Failed to remove user from community'),
|
||||
});
|
||||
console.log(e);
|
||||
logger.log(e);
|
||||
}).finally(() => {
|
||||
stopUpdating();
|
||||
});
|
||||
|
@ -1052,8 +1054,7 @@ const PowerLevelEditor: React.FC<{
|
|||
const cli = useContext(MatrixClientContext);
|
||||
|
||||
const [selectedPowerLevel, setSelectedPowerLevel] = useState(user.powerLevel);
|
||||
const onPowerChange = useCallback(async (powerLevelStr: string) => {
|
||||
const powerLevel = parseInt(powerLevelStr, 10);
|
||||
const onPowerChange = useCallback(async (powerLevel: number) => {
|
||||
setSelectedPowerLevel(powerLevel);
|
||||
|
||||
const applyPowerChange = (roomId, target, powerLevel, powerLevelEvent) => {
|
||||
|
@ -1061,7 +1062,7 @@ const PowerLevelEditor: React.FC<{
|
|||
function() {
|
||||
// NO-OP; rely on the m.room.member event coming down else we could
|
||||
// get out of sync if we force setState here!
|
||||
console.log("Power change success");
|
||||
logger.log("Power change success");
|
||||
}, function(err) {
|
||||
console.error("Failed to change power level " + err);
|
||||
Modal.createTrackedDialog('Failed to change power level', '', ErrorDialog, {
|
||||
|
|
|
@ -28,7 +28,7 @@ import { SAS } from "matrix-js-sdk/src/crypto/verification/SAS";
|
|||
import VerificationQRCode from "../elements/crypto/VerificationQRCode";
|
||||
import { _t } from "../../../languageHandler";
|
||||
import SdkConfig from "../../../SdkConfig";
|
||||
import E2EIcon from "../rooms/E2EIcon";
|
||||
import E2EIcon, { E2EState } from "../rooms/E2EIcon";
|
||||
import { Phase } from "matrix-js-sdk/src/crypto/verification/request/VerificationRequest";
|
||||
import Spinner from "../elements/Spinner";
|
||||
import { replaceableComponent } from "../../../utils/replaceableComponent";
|
||||
|
@ -189,7 +189,7 @@ export default class VerificationPanel extends React.PureComponent<IProps, IStat
|
|||
// Element Web doesn't support scanning yet, so assume here we're the client being scanned.
|
||||
body = <React.Fragment>
|
||||
<p>{ description }</p>
|
||||
<E2EIcon isUser={true} status="verified" size={128} hideTooltip={true} />
|
||||
<E2EIcon isUser={true} status={E2EState.Verified} size={128} hideTooltip={true} />
|
||||
<div className="mx_VerificationPanel_reciprocateButtons">
|
||||
<AccessibleButton
|
||||
kind="danger"
|
||||
|
@ -252,7 +252,7 @@ export default class VerificationPanel extends React.PureComponent<IProps, IStat
|
|||
<div className="mx_UserInfo_container mx_VerificationPanel_verified_section">
|
||||
<h3>{ _t("Verified") }</h3>
|
||||
<p>{ description }</p>
|
||||
<E2EIcon isUser={true} status="verified" size={128} hideTooltip={true} />
|
||||
<E2EIcon isUser={true} status={E2EState.Verified} size={128} hideTooltip={true} />
|
||||
{ text ? <p>{ text }</p> : null }
|
||||
<AccessibleButton kind="primary" className="mx_UserInfo_wideButton" onClick={this.props.onClose}>
|
||||
{ _t("Got it") }
|
||||
|
|
|
@ -97,7 +97,6 @@ const WidgetCard: React.FC<IProps> = ({ room, widgetId, onClose }) => {
|
|||
<AppTile
|
||||
app={app}
|
||||
fullWidth
|
||||
show
|
||||
showMenubar={false}
|
||||
room={room}
|
||||
userId={cli.getUserId()}
|
||||
|
|
|
@ -15,27 +15,43 @@ limitations under the License.
|
|||
*/
|
||||
|
||||
import React, { createRef } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { _t } from "../../../languageHandler";
|
||||
import { MatrixClientPeg } from "../../../MatrixClientPeg";
|
||||
import Field from "../elements/Field";
|
||||
import * as sdk from "../../../index";
|
||||
import { replaceableComponent } from "../../../utils/replaceableComponent";
|
||||
import { mediaFromMxc } from "../../../customisations/Media";
|
||||
import AccessibleButton from "../elements/AccessibleButton";
|
||||
import AvatarSetting from "../settings/AvatarSetting";
|
||||
|
||||
interface IProps {
|
||||
roomId: string;
|
||||
}
|
||||
|
||||
interface IState {
|
||||
originalDisplayName: string;
|
||||
displayName: string;
|
||||
originalAvatarUrl: string;
|
||||
avatarUrl: string;
|
||||
avatarFile: File;
|
||||
originalTopic: string;
|
||||
topic: string;
|
||||
enableProfileSave: boolean;
|
||||
canSetName: boolean;
|
||||
canSetTopic: boolean;
|
||||
canSetAvatar: boolean;
|
||||
}
|
||||
|
||||
// TODO: Merge with ProfileSettings?
|
||||
@replaceableComponent("views.room_settings.RoomProfileSettings")
|
||||
export default class RoomProfileSettings extends React.Component {
|
||||
static propTypes = {
|
||||
roomId: PropTypes.string.isRequired,
|
||||
};
|
||||
export default class RoomProfileSettings extends React.Component<IProps, IState> {
|
||||
private avatarUpload = createRef<HTMLInputElement>();
|
||||
|
||||
constructor(props) {
|
||||
constructor(props: IProps) {
|
||||
super(props);
|
||||
|
||||
const client = MatrixClientPeg.get();
|
||||
const room = client.getRoom(props.roomId);
|
||||
if (!room) throw new Error("Expected a room for ID: ", props.roomId);
|
||||
if (!room) throw new Error(`Expected a room for ID: ${props.roomId}`);
|
||||
|
||||
const avatarEvent = room.currentState.getStateEvents("m.room.avatar", "");
|
||||
let avatarUrl = avatarEvent && avatarEvent.getContent() ? avatarEvent.getContent()["url"] : null;
|
||||
|
@ -60,17 +76,15 @@ export default class RoomProfileSettings extends React.Component {
|
|||
canSetTopic: room.currentState.maySendStateEvent('m.room.topic', client.getUserId()),
|
||||
canSetAvatar: room.currentState.maySendStateEvent('m.room.avatar', client.getUserId()),
|
||||
};
|
||||
|
||||
this._avatarUpload = createRef();
|
||||
}
|
||||
|
||||
_uploadAvatar = () => {
|
||||
this._avatarUpload.current.click();
|
||||
private uploadAvatar = (): void => {
|
||||
this.avatarUpload.current.click();
|
||||
};
|
||||
|
||||
_removeAvatar = () => {
|
||||
private removeAvatar = (): void => {
|
||||
// clear file upload field so same file can be selected
|
||||
this._avatarUpload.current.value = "";
|
||||
this.avatarUpload.current.value = "";
|
||||
this.setState({
|
||||
avatarUrl: null,
|
||||
avatarFile: null,
|
||||
|
@ -78,7 +92,7 @@ export default class RoomProfileSettings extends React.Component {
|
|||
});
|
||||
};
|
||||
|
||||
_cancelProfileChanges = async (e) => {
|
||||
private cancelProfileChanges = async (e: React.MouseEvent): Promise<void> => {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
|
||||
|
@ -92,7 +106,7 @@ export default class RoomProfileSettings extends React.Component {
|
|||
});
|
||||
};
|
||||
|
||||
_saveProfile = async (e) => {
|
||||
private saveProfile = async (e: React.FormEvent): Promise<void> => {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
|
||||
|
@ -100,35 +114,46 @@ export default class RoomProfileSettings extends React.Component {
|
|||
this.setState({ enableProfileSave: false });
|
||||
|
||||
const client = MatrixClientPeg.get();
|
||||
const newState = {};
|
||||
|
||||
let originalDisplayName: string;
|
||||
let avatarUrl: string;
|
||||
let originalAvatarUrl: string;
|
||||
let originalTopic: string;
|
||||
let avatarFile: File;
|
||||
|
||||
// TODO: What do we do about errors?
|
||||
const displayName = this.state.displayName.trim();
|
||||
if (this.state.originalDisplayName !== this.state.displayName) {
|
||||
await client.setRoomName(this.props.roomId, displayName);
|
||||
newState.originalDisplayName = displayName;
|
||||
newState.displayName = displayName;
|
||||
originalDisplayName = displayName;
|
||||
}
|
||||
|
||||
if (this.state.avatarFile) {
|
||||
const 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;
|
||||
newState.avatarFile = null;
|
||||
avatarUrl = mediaFromMxc(uri).getSquareThumbnailHttp(96);
|
||||
originalAvatarUrl = avatarUrl;
|
||||
avatarFile = null;
|
||||
} else if (this.state.originalAvatarUrl !== this.state.avatarUrl) {
|
||||
await client.sendStateEvent(this.props.roomId, 'm.room.avatar', {}, '');
|
||||
}
|
||||
|
||||
if (this.state.originalTopic !== this.state.topic) {
|
||||
await client.setRoomTopic(this.props.roomId, this.state.topic);
|
||||
newState.originalTopic = this.state.topic;
|
||||
originalTopic = this.state.topic;
|
||||
}
|
||||
|
||||
this.setState(newState);
|
||||
this.setState({
|
||||
originalAvatarUrl,
|
||||
avatarUrl,
|
||||
originalDisplayName,
|
||||
originalTopic,
|
||||
displayName,
|
||||
avatarFile,
|
||||
});
|
||||
};
|
||||
|
||||
_onDisplayNameChanged = (e) => {
|
||||
private onDisplayNameChanged = (e: React.ChangeEvent<HTMLInputElement>): void => {
|
||||
this.setState({ displayName: e.target.value });
|
||||
if (this.state.originalDisplayName === e.target.value) {
|
||||
this.setState({ enableProfileSave: false });
|
||||
|
@ -137,7 +162,7 @@ export default class RoomProfileSettings extends React.Component {
|
|||
}
|
||||
};
|
||||
|
||||
_onTopicChanged = (e) => {
|
||||
private onTopicChanged = (e: React.ChangeEvent<HTMLTextAreaElement>): void => {
|
||||
this.setState({ topic: e.target.value });
|
||||
if (this.state.originalTopic === e.target.value) {
|
||||
this.setState({ enableProfileSave: false });
|
||||
|
@ -146,7 +171,7 @@ export default class RoomProfileSettings extends React.Component {
|
|||
}
|
||||
};
|
||||
|
||||
_onAvatarChanged = (e) => {
|
||||
private onAvatarChanged = (e: React.ChangeEvent<HTMLInputElement>): void => {
|
||||
if (!e.target.files || !e.target.files.length) {
|
||||
this.setState({
|
||||
avatarUrl: this.state.originalAvatarUrl,
|
||||
|
@ -160,7 +185,7 @@ export default class RoomProfileSettings extends React.Component {
|
|||
const reader = new FileReader();
|
||||
reader.onload = (ev) => {
|
||||
this.setState({
|
||||
avatarUrl: ev.target.result,
|
||||
avatarUrl: String(ev.target.result),
|
||||
avatarFile: file,
|
||||
enableProfileSave: true,
|
||||
});
|
||||
|
@ -168,10 +193,7 @@ export default class RoomProfileSettings extends React.Component {
|
|||
reader.readAsDataURL(file);
|
||||
};
|
||||
|
||||
render() {
|
||||
const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
|
||||
const AvatarSetting = sdk.getComponent('settings.AvatarSetting');
|
||||
|
||||
public render(): JSX.Element {
|
||||
let profileSettingsButtons;
|
||||
if (
|
||||
this.state.canSetName ||
|
||||
|
@ -181,14 +203,14 @@ export default class RoomProfileSettings extends React.Component {
|
|||
profileSettingsButtons = (
|
||||
<div className="mx_ProfileSettings_buttons">
|
||||
<AccessibleButton
|
||||
onClick={this._cancelProfileChanges}
|
||||
onClick={this.cancelProfileChanges}
|
||||
kind="link"
|
||||
disabled={!this.state.enableProfileSave}
|
||||
>
|
||||
{ _t("Cancel") }
|
||||
</AccessibleButton>
|
||||
<AccessibleButton
|
||||
onClick={this._saveProfile}
|
||||
onClick={this.saveProfile}
|
||||
kind="primary"
|
||||
disabled={!this.state.enableProfileSave}
|
||||
>
|
||||
|
@ -200,16 +222,16 @@ export default class RoomProfileSettings extends React.Component {
|
|||
|
||||
return (
|
||||
<form
|
||||
onSubmit={this._saveProfile}
|
||||
onSubmit={this.saveProfile}
|
||||
autoComplete="off"
|
||||
noValidate={true}
|
||||
className="mx_ProfileSettings_profileForm"
|
||||
>
|
||||
<input
|
||||
type="file"
|
||||
ref={this._avatarUpload}
|
||||
ref={this.avatarUpload}
|
||||
className="mx_ProfileSettings_avatarUpload"
|
||||
onChange={this._onAvatarChanged}
|
||||
onChange={this.onAvatarChanged}
|
||||
accept="image/*"
|
||||
/>
|
||||
<div className="mx_ProfileSettings_profile">
|
||||
|
@ -219,7 +241,7 @@ export default class RoomProfileSettings extends React.Component {
|
|||
type="text"
|
||||
value={this.state.displayName}
|
||||
autoComplete="off"
|
||||
onChange={this._onDisplayNameChanged}
|
||||
onChange={this.onDisplayNameChanged}
|
||||
disabled={!this.state.canSetName}
|
||||
/>
|
||||
<Field
|
||||
|
@ -230,7 +252,7 @@ export default class RoomProfileSettings extends React.Component {
|
|||
type="text"
|
||||
value={this.state.topic}
|
||||
autoComplete="off"
|
||||
onChange={this._onTopicChanged}
|
||||
onChange={this.onTopicChanged}
|
||||
element="textarea"
|
||||
/>
|
||||
</div>
|
||||
|
@ -238,8 +260,8 @@ export default class RoomProfileSettings extends React.Component {
|
|||
avatarUrl={this.state.avatarUrl}
|
||||
avatarName={this.state.displayName || this.props.roomId}
|
||||
avatarAltText={_t("Room avatar")}
|
||||
uploadAvatar={this.state.canSetAvatar ? this._uploadAvatar : undefined}
|
||||
removeAvatar={this.state.canSetAvatar ? this._removeAvatar : undefined} />
|
||||
uploadAvatar={this.state.canSetAvatar ? this.uploadAvatar : undefined}
|
||||
removeAvatar={this.state.canSetAvatar ? this.removeAvatar : undefined} />
|
||||
</div>
|
||||
{ profileSettingsButtons }
|
||||
</form>
|
|
@ -18,8 +18,6 @@ limitations under the License.
|
|||
*/
|
||||
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import * as sdk from "../../../index";
|
||||
import { _t, _td } from '../../../languageHandler';
|
||||
import SettingsStore from "../../../settings/SettingsStore";
|
||||
import dis from "../../../dispatcher/dispatcher";
|
||||
|
@ -27,21 +25,22 @@ import { MatrixClientPeg } from "../../../MatrixClientPeg";
|
|||
import { Action } from "../../../dispatcher/actions";
|
||||
import { SettingLevel } from "../../../settings/SettingLevel";
|
||||
import { replaceableComponent } from "../../../utils/replaceableComponent";
|
||||
import { Room } from "matrix-js-sdk/src/models/room";
|
||||
import SettingsFlag from "../elements/SettingsFlag";
|
||||
|
||||
interface IProps {
|
||||
room: Room;
|
||||
}
|
||||
|
||||
@replaceableComponent("views.room_settings.UrlPreviewSettings")
|
||||
export default class UrlPreviewSettings extends React.Component {
|
||||
static propTypes = {
|
||||
room: PropTypes.object,
|
||||
};
|
||||
|
||||
_onClickUserSettings = (e) => {
|
||||
export default class UrlPreviewSettings extends React.Component<IProps> {
|
||||
private onClickUserSettings = (e: React.MouseEvent): void => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
dis.fire(Action.ViewUserSettings);
|
||||
};
|
||||
|
||||
render() {
|
||||
const SettingsFlag = sdk.getComponent("elements.SettingsFlag");
|
||||
public render(): JSX.Element {
|
||||
const roomId = this.props.room.roomId;
|
||||
const isEncrypted = MatrixClientPeg.get().isRoomEncrypted(roomId);
|
||||
|
||||
|
@ -54,18 +53,18 @@ export default class UrlPreviewSettings extends React.Component {
|
|||
if (accountEnabled) {
|
||||
previewsForAccount = (
|
||||
_t("You have <a>enabled</a> URL previews by default.", {}, {
|
||||
'a': (sub)=><a onClick={this._onClickUserSettings} href=''>{ sub }</a>,
|
||||
'a': (sub)=><a onClick={this.onClickUserSettings} href=''>{ sub }</a>,
|
||||
})
|
||||
);
|
||||
} else {
|
||||
previewsForAccount = (
|
||||
_t("You have <a>disabled</a> URL previews by default.", {}, {
|
||||
'a': (sub)=><a onClick={this._onClickUserSettings} href=''>{ sub }</a>,
|
||||
'a': (sub)=><a onClick={this.onClickUserSettings} href=''>{ sub }</a>,
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
if (SettingsStore.canSetValue("urlPreviewsEnabled", roomId, "room")) {
|
||||
if (SettingsStore.canSetValue("urlPreviewsEnabled", roomId, SettingLevel.ROOM)) {
|
||||
previewsForRoom = (
|
||||
<label>
|
||||
<SettingsFlag
|
|
@ -16,7 +16,6 @@ limitations under the License.
|
|||
*/
|
||||
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import classNames from 'classnames';
|
||||
import { Resizable } from "re-resizable";
|
||||
|
||||
|
@ -26,8 +25,6 @@ import * as sdk from '../../../index';
|
|||
import * as ScalarMessaging from '../../../ScalarMessaging';
|
||||
import WidgetUtils from '../../../utils/WidgetUtils';
|
||||
import WidgetEchoStore from "../../../stores/WidgetEchoStore";
|
||||
import { IntegrationManagers } from "../../../integrations/IntegrationManagers";
|
||||
import SettingsStore from "../../../settings/SettingsStore";
|
||||
import ResizeNotifier from "../../../utils/ResizeNotifier";
|
||||
import ResizeHandle from "../elements/ResizeHandle";
|
||||
import Resizer from "../../../resizer/resizer";
|
||||
|
@ -37,60 +34,74 @@ import { clamp, percentageOf, percentageWithin } from "../../../utils/numbers";
|
|||
import { useStateCallback } from "../../../hooks/useStateCallback";
|
||||
import { replaceableComponent } from "../../../utils/replaceableComponent";
|
||||
import UIStore from "../../../stores/UIStore";
|
||||
import { Room } from "matrix-js-sdk/src/models/room";
|
||||
import { IApp } from "../../../stores/WidgetStore";
|
||||
import { ActionPayload } from "../../../dispatcher/payloads";
|
||||
|
||||
interface IProps {
|
||||
userId: string;
|
||||
room: Room;
|
||||
resizeNotifier: ResizeNotifier;
|
||||
showApps?: boolean; // Should apps be rendered
|
||||
maxHeight: number;
|
||||
}
|
||||
|
||||
interface IState {
|
||||
apps: IApp[];
|
||||
resizingVertical: boolean; // true when changing the height of the apps drawer
|
||||
resizingHorizontal: boolean; // true when chagning the distribution of the width between widgets
|
||||
resizing: boolean;
|
||||
}
|
||||
|
||||
@replaceableComponent("views.rooms.AppsDrawer")
|
||||
export default class AppsDrawer extends React.Component {
|
||||
static propTypes = {
|
||||
userId: PropTypes.string.isRequired,
|
||||
room: PropTypes.object.isRequired,
|
||||
resizeNotifier: PropTypes.instanceOf(ResizeNotifier).isRequired,
|
||||
showApps: PropTypes.bool, // Should apps be rendered
|
||||
};
|
||||
|
||||
static defaultProps = {
|
||||
export default class AppsDrawer extends React.Component<IProps, IState> {
|
||||
private resizeContainer: HTMLDivElement;
|
||||
private resizer: Resizer;
|
||||
private dispatcherRef: string;
|
||||
public static defaultProps: Partial<IProps> = {
|
||||
showApps: true,
|
||||
};
|
||||
|
||||
constructor(props) {
|
||||
constructor(props: IProps) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
apps: this._getApps(),
|
||||
resizingVertical: false, // true when changing the height of the apps drawer
|
||||
resizingHorizontal: false, // true when chagning the distribution of the width between widgets
|
||||
apps: this.getApps(),
|
||||
resizingVertical: false,
|
||||
resizingHorizontal: false,
|
||||
resizing: false,
|
||||
};
|
||||
|
||||
this._resizeContainer = null;
|
||||
this.resizer = this._createResizer();
|
||||
this.resizer = this.createResizer();
|
||||
|
||||
this.props.resizeNotifier.on("isResizing", this.onIsResizing);
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
public componentDidMount(): void {
|
||||
ScalarMessaging.startListening();
|
||||
WidgetLayoutStore.instance.on(WidgetLayoutStore.emissionForRoom(this.props.room), this._updateApps);
|
||||
WidgetLayoutStore.instance.on(WidgetLayoutStore.emissionForRoom(this.props.room), this.updateApps);
|
||||
this.dispatcherRef = dis.register(this.onAction);
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
public componentWillUnmount(): void {
|
||||
ScalarMessaging.stopListening();
|
||||
WidgetLayoutStore.instance.off(WidgetLayoutStore.emissionForRoom(this.props.room), this._updateApps);
|
||||
WidgetLayoutStore.instance.off(WidgetLayoutStore.emissionForRoom(this.props.room), this.updateApps);
|
||||
if (this.dispatcherRef) dis.unregister(this.dispatcherRef);
|
||||
if (this._resizeContainer) {
|
||||
if (this.resizeContainer) {
|
||||
this.resizer.detach();
|
||||
}
|
||||
this.props.resizeNotifier.off("isResizing", this.onIsResizing);
|
||||
}
|
||||
|
||||
onIsResizing = (resizing) => {
|
||||
private onIsResizing = (resizing: boolean): void => {
|
||||
// This one is the vertical, ie. change height of apps drawer
|
||||
this.setState({ resizingVertical: resizing });
|
||||
if (!resizing) {
|
||||
this._relaxResizer();
|
||||
this.relaxResizer();
|
||||
}
|
||||
};
|
||||
|
||||
_createResizer() {
|
||||
private createResizer(): Resizer {
|
||||
// This is the horizontal one, changing the distribution of the width between the app tiles
|
||||
// (ie. a vertical resize handle because, the handle itself is vertical...)
|
||||
const classNames = {
|
||||
|
@ -100,11 +111,11 @@ export default class AppsDrawer extends React.Component {
|
|||
};
|
||||
const collapseConfig = {
|
||||
onResizeStart: () => {
|
||||
this._resizeContainer.classList.add("mx_AppsDrawer_resizing");
|
||||
this.resizeContainer.classList.add("mx_AppsDrawer_resizing");
|
||||
this.setState({ resizingHorizontal: true });
|
||||
},
|
||||
onResizeStop: () => {
|
||||
this._resizeContainer.classList.remove("mx_AppsDrawer_resizing");
|
||||
this.resizeContainer.classList.remove("mx_AppsDrawer_resizing");
|
||||
WidgetLayoutStore.instance.setResizerDistributions(
|
||||
this.props.room, Container.Top,
|
||||
this.state.apps.slice(1).map((_, i) => this.resizer.forHandleAt(i).size),
|
||||
|
@ -113,13 +124,13 @@ export default class AppsDrawer extends React.Component {
|
|||
},
|
||||
};
|
||||
// pass a truthy container for now, we won't call attach until we update it
|
||||
const resizer = new Resizer({}, PercentageDistributor, collapseConfig);
|
||||
const resizer = new Resizer(null, PercentageDistributor, collapseConfig);
|
||||
resizer.setClassNames(classNames);
|
||||
return resizer;
|
||||
}
|
||||
|
||||
_collectResizer = (ref) => {
|
||||
if (this._resizeContainer) {
|
||||
private collectResizer = (ref: HTMLDivElement): void => {
|
||||
if (this.resizeContainer) {
|
||||
this.resizer.detach();
|
||||
}
|
||||
|
||||
|
@ -127,22 +138,22 @@ export default class AppsDrawer extends React.Component {
|
|||
this.resizer.container = ref;
|
||||
this.resizer.attach();
|
||||
}
|
||||
this._resizeContainer = ref;
|
||||
this._loadResizerPreferences();
|
||||
this.resizeContainer = ref;
|
||||
this.loadResizerPreferences();
|
||||
};
|
||||
|
||||
_getAppsHash = (apps) => apps.map(app => app.id).join("~");
|
||||
private getAppsHash = (apps: IApp[]): string => apps.map(app => app.id).join("~");
|
||||
|
||||
componentDidUpdate(prevProps, prevState) {
|
||||
public componentDidUpdate(prevProps: IProps, prevState: IState): void {
|
||||
if (prevProps.userId !== this.props.userId || prevProps.room !== this.props.room) {
|
||||
// Room has changed, update apps
|
||||
this._updateApps();
|
||||
} else if (this._getAppsHash(this.state.apps) !== this._getAppsHash(prevState.apps)) {
|
||||
this._loadResizerPreferences();
|
||||
this.updateApps();
|
||||
} else if (this.getAppsHash(this.state.apps) !== this.getAppsHash(prevState.apps)) {
|
||||
this.loadResizerPreferences();
|
||||
}
|
||||
}
|
||||
|
||||
_relaxResizer = () => {
|
||||
private relaxResizer = (): void => {
|
||||
const distributors = this.resizer.getDistributors();
|
||||
|
||||
// relax all items if they had any overconstrained flexboxes
|
||||
|
@ -150,7 +161,7 @@ export default class AppsDrawer extends React.Component {
|
|||
distributors.forEach(d => d.finish());
|
||||
};
|
||||
|
||||
_loadResizerPreferences = () => {
|
||||
private loadResizerPreferences = (): void => {
|
||||
const distributions = WidgetLayoutStore.instance.getResizerDistributions(this.props.room, Container.Top);
|
||||
if (this.state.apps && (this.state.apps.length - 1) === distributions.length) {
|
||||
distributions.forEach((size, i) => {
|
||||
|
@ -168,11 +179,11 @@ export default class AppsDrawer extends React.Component {
|
|||
}
|
||||
};
|
||||
|
||||
isResizing() {
|
||||
private isResizing(): boolean {
|
||||
return this.state.resizingVertical || this.state.resizingHorizontal;
|
||||
}
|
||||
|
||||
onAction = (action) => {
|
||||
private onAction = (action: ActionPayload): void => {
|
||||
const hideWidgetKey = this.props.room.roomId + '_hide_widget_drawer';
|
||||
switch (action.action) {
|
||||
case 'appsDrawer':
|
||||
|
@ -190,23 +201,15 @@ export default class AppsDrawer extends React.Component {
|
|||
}
|
||||
};
|
||||
|
||||
_getApps = () => WidgetLayoutStore.instance.getContainerWidgets(this.props.room, Container.Top);
|
||||
private getApps = (): IApp[] => WidgetLayoutStore.instance.getContainerWidgets(this.props.room, Container.Top);
|
||||
|
||||
_updateApps = () => {
|
||||
private updateApps = (): void => {
|
||||
this.setState({
|
||||
apps: this._getApps(),
|
||||
apps: this.getApps(),
|
||||
});
|
||||
};
|
||||
|
||||
_launchManageIntegrations() {
|
||||
if (SettingsStore.getValue("feature_many_integration_managers")) {
|
||||
IntegrationManagers.sharedInstance().openAll();
|
||||
} else {
|
||||
IntegrationManagers.sharedInstance().getPrimaryManager().open(this.props.room, 'add_integ');
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
public render(): JSX.Element {
|
||||
if (!this.props.showApps) return <div />;
|
||||
|
||||
const apps = this.state.apps.map((app, index, arr) => {
|
||||
|
@ -257,7 +260,7 @@ export default class AppsDrawer extends React.Component {
|
|||
className="mx_AppsContainer_resizer"
|
||||
resizeNotifier={this.props.resizeNotifier}
|
||||
>
|
||||
<div className="mx_AppsContainer" ref={this._collectResizer}>
|
||||
<div className="mx_AppsContainer" ref={this.collectResizer}>
|
||||
{ apps.map((app, i) => {
|
||||
if (i < 1) return app;
|
||||
return <React.Fragment key={app.key}>
|
||||
|
@ -273,7 +276,18 @@ export default class AppsDrawer extends React.Component {
|
|||
}
|
||||
}
|
||||
|
||||
const PersistentVResizer = ({
|
||||
interface IPersistentResizerProps {
|
||||
room: Room;
|
||||
minHeight: number;
|
||||
maxHeight: number;
|
||||
className: string;
|
||||
handleWrapperClass: string;
|
||||
handleClass: string;
|
||||
resizeNotifier: ResizeNotifier;
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
const PersistentVResizer: React.FC<IPersistentResizerProps> = ({
|
||||
room,
|
||||
minHeight,
|
||||
maxHeight,
|
||||
|
@ -303,7 +317,7 @@ const PersistentVResizer = ({
|
|||
});
|
||||
|
||||
return <Resizable
|
||||
size={{ height: Math.min(height, maxHeight) }}
|
||||
size={{ height: Math.min(height, maxHeight), width: null }}
|
||||
minHeight={minHeight}
|
||||
maxHeight={maxHeight}
|
||||
onResizeStart={() => {
|
|
@ -16,41 +16,51 @@ limitations under the License.
|
|||
*/
|
||||
|
||||
import React, { useState } from "react";
|
||||
import PropTypes from "prop-types";
|
||||
import classNames from 'classnames';
|
||||
|
||||
import { _t, _td } from '../../../languageHandler';
|
||||
import AccessibleButton from "../elements/AccessibleButton";
|
||||
import Tooltip from "../elements/Tooltip";
|
||||
import { E2EStatus } from "../../../utils/ShieldUtils";
|
||||
|
||||
export const E2E_STATE = {
|
||||
VERIFIED: "verified",
|
||||
WARNING: "warning",
|
||||
UNKNOWN: "unknown",
|
||||
NORMAL: "normal",
|
||||
UNAUTHENTICATED: "unauthenticated",
|
||||
export enum E2EState {
|
||||
Verified = "verified",
|
||||
Warning = "warning",
|
||||
Unknown = "unknown",
|
||||
Normal = "normal",
|
||||
Unauthenticated = "unauthenticated",
|
||||
}
|
||||
|
||||
const crossSigningUserTitles: { [key in E2EState]?: string } = {
|
||||
[E2EState.Warning]: _td("This user has not verified all of their sessions."),
|
||||
[E2EState.Normal]: _td("You have not verified this user."),
|
||||
[E2EState.Verified]: _td("You have verified this user. This user has verified all of their sessions."),
|
||||
};
|
||||
const crossSigningRoomTitles: { [key in E2EState]?: string } = {
|
||||
[E2EState.Warning]: _td("Someone is using an unknown session"),
|
||||
[E2EState.Normal]: _td("This room is end-to-end encrypted"),
|
||||
[E2EState.Verified]: _td("Everyone in this room is verified"),
|
||||
};
|
||||
|
||||
const crossSigningUserTitles = {
|
||||
[E2E_STATE.WARNING]: _td("This user has not verified all of their sessions."),
|
||||
[E2E_STATE.NORMAL]: _td("You have not verified this user."),
|
||||
[E2E_STATE.VERIFIED]: _td("You have verified this user. This user has verified all of their sessions."),
|
||||
};
|
||||
const crossSigningRoomTitles = {
|
||||
[E2E_STATE.WARNING]: _td("Someone is using an unknown session"),
|
||||
[E2E_STATE.NORMAL]: _td("This room is end-to-end encrypted"),
|
||||
[E2E_STATE.VERIFIED]: _td("Everyone in this room is verified"),
|
||||
};
|
||||
interface IProps {
|
||||
isUser?: boolean;
|
||||
status?: E2EState | E2EStatus;
|
||||
className?: string;
|
||||
size?: number;
|
||||
onClick?: () => void;
|
||||
hideTooltip?: boolean;
|
||||
bordered?: boolean;
|
||||
}
|
||||
|
||||
const E2EIcon = ({ isUser, status, className, size, onClick, hideTooltip, bordered }) => {
|
||||
const E2EIcon: React.FC<IProps> = ({ isUser, status, className, size, onClick, hideTooltip, bordered }) => {
|
||||
const [hover, setHover] = useState(false);
|
||||
|
||||
const classes = classNames({
|
||||
mx_E2EIcon: true,
|
||||
mx_E2EIcon_bordered: bordered,
|
||||
mx_E2EIcon_warning: status === E2E_STATE.WARNING,
|
||||
mx_E2EIcon_normal: status === E2E_STATE.NORMAL,
|
||||
mx_E2EIcon_verified: status === E2E_STATE.VERIFIED,
|
||||
mx_E2EIcon_warning: status === E2EState.Warning,
|
||||
mx_E2EIcon_normal: status === E2EState.Normal,
|
||||
mx_E2EIcon_verified: status === E2EState.Verified,
|
||||
}, className);
|
||||
|
||||
let e2eTitle;
|
||||
|
@ -92,12 +102,4 @@ const E2EIcon = ({ isUser, status, className, size, onClick, hideTooltip, border
|
|||
</div>;
|
||||
};
|
||||
|
||||
E2EIcon.propTypes = {
|
||||
isUser: PropTypes.bool,
|
||||
status: PropTypes.oneOf(Object.values(E2E_STATE)),
|
||||
className: PropTypes.string,
|
||||
size: PropTypes.number,
|
||||
onClick: PropTypes.func,
|
||||
};
|
||||
|
||||
export default E2EIcon;
|
|
@ -27,7 +27,7 @@ import { findEditableEvent } from '../../../utils/EventUtils';
|
|||
import { parseEvent } from '../../../editor/deserialize';
|
||||
import { CommandPartCreator, Part, PartCreator, Type } from '../../../editor/parts';
|
||||
import EditorStateTransfer from '../../../utils/EditorStateTransfer';
|
||||
import BasicMessageComposer from "./BasicMessageComposer";
|
||||
import BasicMessageComposer, { REGEX_EMOTICON } from "./BasicMessageComposer";
|
||||
import MatrixClientContext from "../../../contexts/MatrixClientContext";
|
||||
import { Command, CommandCategories, getCommand } from '../../../SlashCommands';
|
||||
import { Action } from "../../../dispatcher/actions";
|
||||
|
@ -42,6 +42,9 @@ import ErrorDialog from "../dialogs/ErrorDialog";
|
|||
import QuestionDialog from "../dialogs/QuestionDialog";
|
||||
import { ActionPayload } from "../../../dispatcher/payloads";
|
||||
import AccessibleButton from '../elements/AccessibleButton';
|
||||
import SettingsStore from "../../../settings/SettingsStore";
|
||||
|
||||
import { logger } from "matrix-js-sdk/src/logger";
|
||||
|
||||
function getHtmlReplyFallback(mxEvent: MatrixEvent): string {
|
||||
const html = mxEvent.getContent().formatted_body;
|
||||
|
@ -307,7 +310,7 @@ export default class EditMessageComposer extends React.Component<IProps, IState>
|
|||
description: errText,
|
||||
});
|
||||
} else {
|
||||
console.log("Command success.");
|
||||
logger.log("Command success.");
|
||||
if (messageContent) return messageContent;
|
||||
}
|
||||
}
|
||||
|
@ -315,6 +318,14 @@ export default class EditMessageComposer extends React.Component<IProps, IState>
|
|||
private sendEdit = async (): Promise<void> => {
|
||||
const startTime = CountlyAnalytics.getTimestamp();
|
||||
const editedEvent = this.props.editState.getEvent();
|
||||
|
||||
// Replace emoticon at the end of the message
|
||||
if (SettingsStore.getValue('MessageComposerInput.autoReplaceEmoji')) {
|
||||
const caret = this.editorRef.current?.getCaret();
|
||||
const position = this.model.positionForOffset(caret.offset, caret.atNodeEnd);
|
||||
this.editorRef.current?.replaceEmoticon(position, REGEX_EMOTICON);
|
||||
}
|
||||
|
||||
const editContent = createEditContent(this.model, editedEvent);
|
||||
const newContent = editContent["m.new_content"];
|
||||
|
||||
|
|
|
@ -20,7 +20,7 @@ import React from 'react';
|
|||
import AccessibleButton from '../elements/AccessibleButton';
|
||||
import { _td } from '../../../languageHandler';
|
||||
import classNames from "classnames";
|
||||
import E2EIcon from './E2EIcon';
|
||||
import E2EIcon, { E2EState } from './E2EIcon';
|
||||
import { replaceableComponent } from "../../../utils/replaceableComponent";
|
||||
import BaseAvatar from '../avatars/BaseAvatar';
|
||||
import PresenceLabel from "./PresenceLabel";
|
||||
|
@ -75,7 +75,7 @@ interface IProps {
|
|||
suppressOnHover?: boolean;
|
||||
showPresence?: boolean;
|
||||
subtextLabel?: string;
|
||||
e2eStatus?: string;
|
||||
e2eStatus?: E2EState;
|
||||
powerStatus?: PowerStatus;
|
||||
}
|
||||
|
||||
|
|
|
@ -33,7 +33,7 @@ import { formatTime } from "../../../DateUtils";
|
|||
import { MatrixClientPeg } from '../../../MatrixClientPeg';
|
||||
import { ALL_RULE_TYPES } from "../../../mjolnir/BanList";
|
||||
import MatrixClientContext from "../../../contexts/MatrixClientContext";
|
||||
import { E2E_STATE } from "./E2EIcon";
|
||||
import { E2EState } from "./E2EIcon";
|
||||
import { toRem } from "../../../utils/units";
|
||||
import { WidgetType } from "../../../widgets/WidgetType";
|
||||
import RoomAvatar from "../avatars/RoomAvatar";
|
||||
|
@ -521,7 +521,7 @@ export default class EventTile extends React.Component<IProps, IState> {
|
|||
|
||||
const thread = this.state.thread;
|
||||
const room = MatrixClientPeg.get().getRoom(this.props.mxEvent.getRoomId());
|
||||
if (!thread || this.props.showThreadInfo === false) {
|
||||
if (!thread || this.props.showThreadInfo === false || thread.length <= 1) {
|
||||
return null;
|
||||
}
|
||||
|
||||
|
@ -605,7 +605,7 @@ export default class EventTile extends React.Component<IProps, IState> {
|
|||
if (encryptionInfo.mismatchedSender) {
|
||||
// something definitely wrong is going on here
|
||||
this.setState({
|
||||
verified: E2E_STATE.WARNING,
|
||||
verified: E2EState.Warning,
|
||||
}, this.props.onHeightChanged); // Decryption may have caused a change in size
|
||||
return;
|
||||
}
|
||||
|
@ -613,7 +613,7 @@ export default class EventTile extends React.Component<IProps, IState> {
|
|||
if (!userTrust.isCrossSigningVerified()) {
|
||||
// user is not verified, so default to everything is normal
|
||||
this.setState({
|
||||
verified: E2E_STATE.NORMAL,
|
||||
verified: E2EState.Normal,
|
||||
}, this.props.onHeightChanged); // Decryption may have caused a change in size
|
||||
return;
|
||||
}
|
||||
|
@ -623,27 +623,27 @@ export default class EventTile extends React.Component<IProps, IState> {
|
|||
);
|
||||
if (!eventSenderTrust) {
|
||||
this.setState({
|
||||
verified: E2E_STATE.UNKNOWN,
|
||||
verified: E2EState.Unknown,
|
||||
}, this.props.onHeightChanged); // Decryption may have caused a change in size
|
||||
return;
|
||||
}
|
||||
|
||||
if (!eventSenderTrust.isVerified()) {
|
||||
this.setState({
|
||||
verified: E2E_STATE.WARNING,
|
||||
verified: E2EState.Warning,
|
||||
}, this.props.onHeightChanged); // Decryption may have caused a change in size
|
||||
return;
|
||||
}
|
||||
|
||||
if (!encryptionInfo.authenticated) {
|
||||
this.setState({
|
||||
verified: E2E_STATE.UNAUTHENTICATED,
|
||||
verified: E2EState.Unauthenticated,
|
||||
}, this.props.onHeightChanged); // Decryption may have caused a change in size
|
||||
return;
|
||||
}
|
||||
|
||||
this.setState({
|
||||
verified: E2E_STATE.VERIFIED,
|
||||
verified: E2EState.Verified,
|
||||
}, this.props.onHeightChanged); // Decryption may have caused a change in size
|
||||
}
|
||||
|
||||
|
@ -850,13 +850,13 @@ export default class EventTile extends React.Component<IProps, IState> {
|
|||
|
||||
// event is encrypted, display padlock corresponding to whether or not it is verified
|
||||
if (ev.isEncrypted()) {
|
||||
if (this.state.verified === E2E_STATE.NORMAL) {
|
||||
if (this.state.verified === E2EState.Normal) {
|
||||
return; // no icon if we've not even cross-signed the user
|
||||
} else if (this.state.verified === E2E_STATE.VERIFIED) {
|
||||
} else if (this.state.verified === E2EState.Verified) {
|
||||
return; // no icon for verified
|
||||
} else if (this.state.verified === E2E_STATE.UNAUTHENTICATED) {
|
||||
} else if (this.state.verified === E2EState.Unauthenticated) {
|
||||
return (<E2ePadlockUnauthenticated />);
|
||||
} else if (this.state.verified === E2E_STATE.UNKNOWN) {
|
||||
} else if (this.state.verified === E2EState.Unknown) {
|
||||
return (<E2ePadlockUnknown />);
|
||||
} else {
|
||||
return (<E2ePadlockUnverified />);
|
||||
|
@ -961,9 +961,9 @@ export default class EventTile extends React.Component<IProps, IState> {
|
|||
mx_EventTile_lastInSection: this.props.lastInSection,
|
||||
mx_EventTile_contextual: this.props.contextual,
|
||||
mx_EventTile_actionBarFocused: this.state.actionBarFocused,
|
||||
mx_EventTile_verified: !isBubbleMessage && this.state.verified === E2E_STATE.VERIFIED,
|
||||
mx_EventTile_unverified: !isBubbleMessage && this.state.verified === E2E_STATE.WARNING,
|
||||
mx_EventTile_unknown: !isBubbleMessage && this.state.verified === E2E_STATE.UNKNOWN,
|
||||
mx_EventTile_verified: !isBubbleMessage && this.state.verified === E2EState.Verified,
|
||||
mx_EventTile_unverified: !isBubbleMessage && this.state.verified === E2EState.Warning,
|
||||
mx_EventTile_unknown: !isBubbleMessage && this.state.verified === E2EState.Unknown,
|
||||
mx_EventTile_bad: isEncryptionFailure,
|
||||
mx_EventTile_emote: msgtype === 'm.emote',
|
||||
mx_EventTile_noSender: this.props.hideSender,
|
||||
|
|
|
@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
|
|||
limitations under the License.
|
||||
*/
|
||||
|
||||
import React, { createRef } from 'react';
|
||||
import React, { ComponentProps, createRef } from 'react';
|
||||
import { AllHtmlEntities } from 'html-entities';
|
||||
import { MatrixEvent } from 'matrix-js-sdk/src/models/event';
|
||||
import { IPreviewUrlResponse } from 'matrix-js-sdk/src/client';
|
||||
|
@ -36,6 +36,7 @@ interface IProps {
|
|||
@replaceableComponent("views.rooms.LinkPreviewWidget")
|
||||
export default class LinkPreviewWidget extends React.Component<IProps> {
|
||||
private readonly description = createRef<HTMLDivElement>();
|
||||
private image = createRef<HTMLImageElement>();
|
||||
|
||||
componentDidMount() {
|
||||
if (this.description.current) {
|
||||
|
@ -59,7 +60,7 @@ export default class LinkPreviewWidget extends React.Component<IProps> {
|
|||
src = mediaFromMxc(src).srcHttp;
|
||||
}
|
||||
|
||||
const params = {
|
||||
const params: Omit<ComponentProps<typeof ImageView>, "onFinished"> = {
|
||||
src: src,
|
||||
width: p["og:image:width"],
|
||||
height: p["og:image:height"],
|
||||
|
@ -68,6 +69,17 @@ export default class LinkPreviewWidget extends React.Component<IProps> {
|
|||
link: this.props.link,
|
||||
};
|
||||
|
||||
if (this.image.current) {
|
||||
const clientRect = this.image.current.getBoundingClientRect();
|
||||
|
||||
params.thumbnailInfo = {
|
||||
width: clientRect.width,
|
||||
height: clientRect.height,
|
||||
positionX: clientRect.x,
|
||||
positionY: clientRect.y,
|
||||
};
|
||||
}
|
||||
|
||||
Modal.createDialog(ImageView, params, "mx_Dialog_lightbox", null, true);
|
||||
};
|
||||
|
||||
|
@ -100,7 +112,7 @@ export default class LinkPreviewWidget extends React.Component<IProps> {
|
|||
let img;
|
||||
if (image) {
|
||||
img = <div className="mx_LinkPreviewWidget_image" style={{ height: thumbHeight }}>
|
||||
<img style={{ maxWidth: imageMaxWidth, maxHeight: imageMaxHeight }} src={image} onClick={this.onImageClick} />
|
||||
<img ref={this.image} style={{ maxWidth: imageMaxWidth, maxHeight: imageMaxHeight }} src={image} onClick={this.onImageClick} />
|
||||
</div>;
|
||||
}
|
||||
|
||||
|
|
|
@ -323,7 +323,7 @@ export default class RoomPreviewBar extends React.Component<IProps, IState> {
|
|||
const messageCase = this.getMessageCase();
|
||||
switch (messageCase) {
|
||||
case MessageCase.Joining: {
|
||||
title = this.props.oobData.roomType === RoomType.Space ? _t("Joining space …") : _t("Joining room …");
|
||||
title = this.props.oobData?.roomType === RoomType.Space ? _t("Joining space …") : _t("Joining room …");
|
||||
showSpinner = true;
|
||||
break;
|
||||
}
|
||||
|
|
|
@ -56,6 +56,8 @@ import QuestionDialog from "../dialogs/QuestionDialog";
|
|||
import { ActionPayload } from "../../../dispatcher/payloads";
|
||||
import { decorateStartSendingTime, sendRoundTripMetric } from "../../../sendTimePerformanceMetrics";
|
||||
|
||||
import { logger } from "matrix-js-sdk/src/logger";
|
||||
|
||||
function addReplyToMessageContent(
|
||||
content: IContent,
|
||||
replyToEvent: MatrixEvent,
|
||||
|
@ -341,7 +343,7 @@ export default class SendMessageComposer extends React.Component<IProps> {
|
|||
description: errText,
|
||||
});
|
||||
} else {
|
||||
console.log("Command success.");
|
||||
logger.log("Command success.");
|
||||
if (messageContent) return messageContent;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -32,6 +32,9 @@ import { replaceableComponent } from "../../../utils/replaceableComponent";
|
|||
import { ActionPayload } from '../../../dispatcher/payloads';
|
||||
import ScalarAuthClient from '../../../ScalarAuthClient';
|
||||
import GenericElementContextMenu from "../context_menus/GenericElementContextMenu";
|
||||
import { IApp } from "../../../stores/WidgetStore";
|
||||
|
||||
import { logger } from "matrix-js-sdk/src/logger";
|
||||
|
||||
// This should be below the dialog level (4000), but above the rest of the UI (1000-2000).
|
||||
// We sit in a context menu, so this should be given to the context menu.
|
||||
|
@ -98,11 +101,11 @@ export default class Stickerpicker extends React.PureComponent<IProps, IState> {
|
|||
|
||||
private removeStickerpickerWidgets = async (): Promise<void> => {
|
||||
const scalarClient = await this.acquireScalarClient();
|
||||
console.log('Removing Stickerpicker widgets');
|
||||
logger.log('Removing Stickerpicker widgets');
|
||||
if (this.state.widgetId) {
|
||||
if (scalarClient) {
|
||||
scalarClient.disableWidgetAssets(WidgetType.STICKERPICKER, this.state.widgetId).then(() => {
|
||||
console.log('Assets disabled');
|
||||
logger.log('Assets disabled');
|
||||
}).catch((err) => {
|
||||
console.error('Failed to disable assets');
|
||||
});
|
||||
|
@ -256,12 +259,16 @@ export default class Stickerpicker extends React.PureComponent<IProps, IState> {
|
|||
stickerpickerWidget.content.name = stickerpickerWidget.content.name || _t("Stickerpack");
|
||||
|
||||
// FIXME: could this use the same code as other apps?
|
||||
const stickerApp = {
|
||||
const stickerApp: IApp = {
|
||||
id: stickerpickerWidget.id,
|
||||
url: stickerpickerWidget.content.url,
|
||||
name: stickerpickerWidget.content.name,
|
||||
type: stickerpickerWidget.content.type,
|
||||
data: stickerpickerWidget.content.data,
|
||||
roomId: stickerpickerWidget.content.roomId,
|
||||
eventId: stickerpickerWidget.content.eventId,
|
||||
avatar_url: stickerpickerWidget.content.avatar_url,
|
||||
creatorUserId: stickerpickerWidget.content.creatorUserId,
|
||||
};
|
||||
|
||||
stickersContent = (
|
||||
|
@ -287,9 +294,7 @@ export default class Stickerpicker extends React.PureComponent<IProps, IState> {
|
|||
onEditClick={this.launchManageIntegrations}
|
||||
onDeleteClick={this.removeStickerpickerWidgets}
|
||||
showTitle={false}
|
||||
showCancel={false}
|
||||
showPopout={false}
|
||||
onMinimiseClick={this.onHideStickersClick}
|
||||
handleMinimisePointerEvents={true}
|
||||
userWidget={true}
|
||||
/>
|
||||
|
@ -345,16 +350,6 @@ export default class Stickerpicker extends React.PureComponent<IProps, IState> {
|
|||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Trigger hiding of the sticker picker overlay
|
||||
* @param {Event} ev Event that triggered the function call
|
||||
*/
|
||||
private onHideStickersClick = (ev: React.MouseEvent): void => {
|
||||
if (this.props.showStickers) {
|
||||
this.props.setShowStickers(false);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Called when the window is resized
|
||||
*/
|
||||
|
|
|
@ -17,78 +17,81 @@ limitations under the License.
|
|||
|
||||
import Field from "../elements/Field";
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { MatrixClientPeg } from "../../../MatrixClientPeg";
|
||||
import AccessibleButton from '../elements/AccessibleButton';
|
||||
import Spinner from '../elements/Spinner';
|
||||
import withValidation from '../elements/Validation';
|
||||
import withValidation, { IFieldState, IValidationResult } from '../elements/Validation';
|
||||
import { _t } from '../../../languageHandler';
|
||||
import * as sdk from "../../../index";
|
||||
import Modal from "../../../Modal";
|
||||
import PassphraseField from "../auth/PassphraseField";
|
||||
import CountlyAnalytics from "../../../CountlyAnalytics";
|
||||
import { replaceableComponent } from "../../../utils/replaceableComponent";
|
||||
import { PASSWORD_MIN_SCORE } from '../auth/RegistrationForm';
|
||||
import { MatrixClient } from "matrix-js-sdk/src/client";
|
||||
import SetEmailDialog from "../dialogs/SetEmailDialog";
|
||||
import QuestionDialog from "../dialogs/QuestionDialog";
|
||||
|
||||
const FIELD_OLD_PASSWORD = 'field_old_password';
|
||||
const FIELD_NEW_PASSWORD = 'field_new_password';
|
||||
const FIELD_NEW_PASSWORD_CONFIRM = 'field_new_password_confirm';
|
||||
|
||||
enum Phase {
|
||||
Edit = "edit",
|
||||
Uploading = "uploading",
|
||||
Error = "error",
|
||||
}
|
||||
|
||||
interface IProps {
|
||||
onFinished?: ({ didSetEmail: boolean }?) => void;
|
||||
onError?: (error: {error: string}) => void;
|
||||
rowClassName?: string;
|
||||
buttonClassName?: string;
|
||||
buttonKind?: string;
|
||||
buttonLabel?: string;
|
||||
confirm?: boolean;
|
||||
// Whether to autoFocus the new password input
|
||||
autoFocusNewPasswordInput?: boolean;
|
||||
className?: string;
|
||||
shouldAskForEmail?: boolean;
|
||||
}
|
||||
|
||||
interface IState {
|
||||
fieldValid: {};
|
||||
phase: Phase;
|
||||
oldPassword: string;
|
||||
newPassword: string;
|
||||
newPasswordConfirm: string;
|
||||
}
|
||||
|
||||
@replaceableComponent("views.settings.ChangePassword")
|
||||
export default class ChangePassword extends React.Component {
|
||||
static propTypes = {
|
||||
onFinished: PropTypes.func,
|
||||
onError: PropTypes.func,
|
||||
onCheckPassword: PropTypes.func,
|
||||
rowClassName: PropTypes.string,
|
||||
buttonClassName: PropTypes.string,
|
||||
buttonKind: PropTypes.string,
|
||||
buttonLabel: PropTypes.string,
|
||||
confirm: PropTypes.bool,
|
||||
// Whether to autoFocus the new password input
|
||||
autoFocusNewPasswordInput: PropTypes.bool,
|
||||
};
|
||||
|
||||
static Phases = {
|
||||
Edit: "edit",
|
||||
Uploading: "uploading",
|
||||
Error: "error",
|
||||
};
|
||||
|
||||
static defaultProps = {
|
||||
export default class ChangePassword extends React.Component<IProps, IState> {
|
||||
public static defaultProps: Partial<IProps> = {
|
||||
onFinished() {},
|
||||
onError() {},
|
||||
onCheckPassword(oldPass, newPass, confirmPass) {
|
||||
if (newPass !== confirmPass) {
|
||||
return {
|
||||
error: _t("New passwords don't match"),
|
||||
};
|
||||
} else if (!newPass || newPass.length === 0) {
|
||||
return {
|
||||
error: _t("Passwords can't be empty"),
|
||||
};
|
||||
}
|
||||
},
|
||||
confirm: true,
|
||||
}
|
||||
|
||||
state = {
|
||||
fieldValid: {},
|
||||
phase: ChangePassword.Phases.Edit,
|
||||
oldPassword: "",
|
||||
newPassword: "",
|
||||
newPasswordConfirm: "",
|
||||
confirm: true,
|
||||
};
|
||||
|
||||
changePassword(oldPassword, newPassword) {
|
||||
constructor(props: IProps) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
fieldValid: {},
|
||||
phase: Phase.Edit,
|
||||
oldPassword: "",
|
||||
newPassword: "",
|
||||
newPasswordConfirm: "",
|
||||
};
|
||||
}
|
||||
|
||||
private onChangePassword(oldPassword: string, newPassword: string): void {
|
||||
const cli = MatrixClientPeg.get();
|
||||
|
||||
if (!this.props.confirm) {
|
||||
this._changePassword(cli, oldPassword, newPassword);
|
||||
this.changePassword(cli, oldPassword, newPassword);
|
||||
return;
|
||||
}
|
||||
|
||||
const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
|
||||
Modal.createTrackedDialog('Change Password', '', QuestionDialog, {
|
||||
title: _t("Warning!"),
|
||||
description:
|
||||
|
@ -109,20 +112,20 @@ export default class ChangePassword extends React.Component {
|
|||
<button
|
||||
key="exportRoomKeys"
|
||||
className="mx_Dialog_primary"
|
||||
onClick={this._onExportE2eKeysClicked}
|
||||
onClick={this.onExportE2eKeysClicked}
|
||||
>
|
||||
{ _t('Export E2E room keys') }
|
||||
</button>,
|
||||
],
|
||||
onFinished: (confirmed) => {
|
||||
if (confirmed) {
|
||||
this._changePassword(cli, oldPassword, newPassword);
|
||||
this.changePassword(cli, oldPassword, newPassword);
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
_changePassword(cli, oldPassword, newPassword) {
|
||||
private changePassword(cli: MatrixClient, oldPassword: string, newPassword: string): void {
|
||||
const authDict = {
|
||||
type: 'm.login.password',
|
||||
identifier: {
|
||||
|
@ -136,12 +139,12 @@ export default class ChangePassword extends React.Component {
|
|||
};
|
||||
|
||||
this.setState({
|
||||
phase: ChangePassword.Phases.Uploading,
|
||||
phase: Phase.Uploading,
|
||||
});
|
||||
|
||||
cli.setPassword(authDict, newPassword).then(() => {
|
||||
if (this.props.shouldAskForEmail) {
|
||||
return this._optionallySetEmail().then((confirmed) => {
|
||||
return this.optionallySetEmail().then((confirmed) => {
|
||||
this.props.onFinished({
|
||||
didSetEmail: confirmed,
|
||||
});
|
||||
|
@ -153,7 +156,7 @@ export default class ChangePassword extends React.Component {
|
|||
this.props.onError(err);
|
||||
}).finally(() => {
|
||||
this.setState({
|
||||
phase: ChangePassword.Phases.Edit,
|
||||
phase: Phase.Edit,
|
||||
oldPassword: "",
|
||||
newPassword: "",
|
||||
newPasswordConfirm: "",
|
||||
|
@ -161,16 +164,27 @@ export default class ChangePassword extends React.Component {
|
|||
});
|
||||
}
|
||||
|
||||
_optionallySetEmail() {
|
||||
private checkPassword(oldPass: string, newPass: string, confirmPass: string): {error: string} {
|
||||
if (newPass !== confirmPass) {
|
||||
return {
|
||||
error: _t("New passwords don't match"),
|
||||
};
|
||||
} else if (!newPass || newPass.length === 0) {
|
||||
return {
|
||||
error: _t("Passwords can't be empty"),
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
private optionallySetEmail(): Promise<boolean> {
|
||||
// Ask for an email otherwise the user has no way to reset their password
|
||||
const SetEmailDialog = sdk.getComponent("dialogs.SetEmailDialog");
|
||||
const modal = Modal.createTrackedDialog('Do you want to set an email address?', '', SetEmailDialog, {
|
||||
title: _t('Do you want to set an email address?'),
|
||||
});
|
||||
return modal.finished.then(([confirmed]) => confirmed);
|
||||
}
|
||||
|
||||
_onExportE2eKeysClicked = () => {
|
||||
private onExportE2eKeysClicked = (): void => {
|
||||
Modal.createTrackedDialogAsync('Export E2E Keys', 'Change Password',
|
||||
import('../../../async-components/views/dialogs/security/ExportE2eKeysDialog'),
|
||||
{
|
||||
|
@ -179,7 +193,7 @@ export default class ChangePassword extends React.Component {
|
|||
);
|
||||
};
|
||||
|
||||
markFieldValid(fieldID, valid) {
|
||||
private markFieldValid(fieldID: string, valid: boolean): void {
|
||||
const { fieldValid } = this.state;
|
||||
fieldValid[fieldID] = valid;
|
||||
this.setState({
|
||||
|
@ -187,19 +201,19 @@ export default class ChangePassword extends React.Component {
|
|||
});
|
||||
}
|
||||
|
||||
onChangeOldPassword = (ev) => {
|
||||
private onChangeOldPassword = (ev: React.ChangeEvent<HTMLInputElement>): void => {
|
||||
this.setState({
|
||||
oldPassword: ev.target.value,
|
||||
});
|
||||
};
|
||||
|
||||
onOldPasswordValidate = async fieldState => {
|
||||
private onOldPasswordValidate = async (fieldState: IFieldState): Promise<IValidationResult> => {
|
||||
const result = await this.validateOldPasswordRules(fieldState);
|
||||
this.markFieldValid(FIELD_OLD_PASSWORD, result.valid);
|
||||
return result;
|
||||
};
|
||||
|
||||
validateOldPasswordRules = withValidation({
|
||||
private validateOldPasswordRules = withValidation({
|
||||
rules: [
|
||||
{
|
||||
key: "required",
|
||||
|
@ -209,29 +223,29 @@ export default class ChangePassword extends React.Component {
|
|||
],
|
||||
});
|
||||
|
||||
onChangeNewPassword = (ev) => {
|
||||
private onChangeNewPassword = (ev: React.ChangeEvent<HTMLInputElement>): void => {
|
||||
this.setState({
|
||||
newPassword: ev.target.value,
|
||||
});
|
||||
};
|
||||
|
||||
onNewPasswordValidate = result => {
|
||||
private onNewPasswordValidate = (result: IValidationResult): void => {
|
||||
this.markFieldValid(FIELD_NEW_PASSWORD, result.valid);
|
||||
};
|
||||
|
||||
onChangeNewPasswordConfirm = (ev) => {
|
||||
private onChangeNewPasswordConfirm = (ev: React.ChangeEvent<HTMLInputElement>): void => {
|
||||
this.setState({
|
||||
newPasswordConfirm: ev.target.value,
|
||||
});
|
||||
};
|
||||
|
||||
onNewPasswordConfirmValidate = async fieldState => {
|
||||
private onNewPasswordConfirmValidate = async (fieldState: IFieldState): Promise<IValidationResult> => {
|
||||
const result = await this.validatePasswordConfirmRules(fieldState);
|
||||
this.markFieldValid(FIELD_NEW_PASSWORD_CONFIRM, result.valid);
|
||||
return result;
|
||||
};
|
||||
|
||||
validatePasswordConfirmRules = withValidation({
|
||||
private validatePasswordConfirmRules = withValidation<this>({
|
||||
rules: [
|
||||
{
|
||||
key: "required",
|
||||
|
@ -248,7 +262,7 @@ export default class ChangePassword extends React.Component {
|
|||
],
|
||||
});
|
||||
|
||||
onClickChange = async (ev) => {
|
||||
private onClickChange = async (ev: React.MouseEvent | React.FormEvent): Promise<void> => {
|
||||
ev.preventDefault();
|
||||
|
||||
const allFieldsValid = await this.verifyFieldsBeforeSubmit();
|
||||
|
@ -260,20 +274,20 @@ export default class ChangePassword extends React.Component {
|
|||
const oldPassword = this.state.oldPassword;
|
||||
const newPassword = this.state.newPassword;
|
||||
const confirmPassword = this.state.newPasswordConfirm;
|
||||
const err = this.props.onCheckPassword(
|
||||
const err = this.checkPassword(
|
||||
oldPassword, newPassword, confirmPassword,
|
||||
);
|
||||
if (err) {
|
||||
this.props.onError(err);
|
||||
} else {
|
||||
this.changePassword(oldPassword, newPassword);
|
||||
this.onChangePassword(oldPassword, newPassword);
|
||||
}
|
||||
};
|
||||
|
||||
async verifyFieldsBeforeSubmit() {
|
||||
private async verifyFieldsBeforeSubmit(): Promise<boolean> {
|
||||
// Blur the active element if any, so we first run its blur validation,
|
||||
// which is less strict than the pass we're about to do below for all fields.
|
||||
const activeElement = document.activeElement;
|
||||
const activeElement = document.activeElement as HTMLElement;
|
||||
if (activeElement) {
|
||||
activeElement.blur();
|
||||
}
|
||||
|
@ -300,7 +314,7 @@ export default class ChangePassword extends React.Component {
|
|||
|
||||
// Validation and state updates are async, so we need to wait for them to complete
|
||||
// first. Queue a `setState` callback and wait for it to resolve.
|
||||
await new Promise(resolve => this.setState({}, resolve));
|
||||
await new Promise<void>((resolve) => this.setState({}, resolve));
|
||||
|
||||
if (this.allFieldsValid()) {
|
||||
return true;
|
||||
|
@ -319,7 +333,7 @@ export default class ChangePassword extends React.Component {
|
|||
return false;
|
||||
}
|
||||
|
||||
allFieldsValid() {
|
||||
private allFieldsValid(): boolean {
|
||||
const keys = Object.keys(this.state.fieldValid);
|
||||
for (let i = 0; i < keys.length; ++i) {
|
||||
if (!this.state.fieldValid[keys[i]]) {
|
||||
|
@ -329,7 +343,7 @@ export default class ChangePassword extends React.Component {
|
|||
return true;
|
||||
}
|
||||
|
||||
findFirstInvalidField(fieldIDs) {
|
||||
private findFirstInvalidField(fieldIDs: string[]): Field {
|
||||
for (const fieldID of fieldIDs) {
|
||||
if (!this.state.fieldValid[fieldID] && this[fieldID]) {
|
||||
return this[fieldID];
|
||||
|
@ -338,12 +352,12 @@ export default class ChangePassword extends React.Component {
|
|||
return null;
|
||||
}
|
||||
|
||||
render() {
|
||||
public render(): JSX.Element {
|
||||
const rowClassName = this.props.rowClassName;
|
||||
const buttonClassName = this.props.buttonClassName;
|
||||
|
||||
switch (this.state.phase) {
|
||||
case ChangePassword.Phases.Edit:
|
||||
case Phase.Edit:
|
||||
return (
|
||||
<form className={this.props.className} onSubmit={this.onClickChange}>
|
||||
<div className={rowClassName}>
|
||||
|
@ -385,7 +399,7 @@ export default class ChangePassword extends React.Component {
|
|||
</AccessibleButton>
|
||||
</form>
|
||||
);
|
||||
case ChangePassword.Phases.Uploading:
|
||||
case Phase.Uploading:
|
||||
return (
|
||||
<div className="mx_Dialog_content">
|
||||
<Spinner />
|
|
@ -97,9 +97,9 @@ export default class CrossSigningPanel extends React.PureComponent<{}, IState> {
|
|||
const secretStorage = cli.crypto.secretStorage;
|
||||
const crossSigningPublicKeysOnDevice = Boolean(crossSigning.getId());
|
||||
const crossSigningPrivateKeysInStorage = Boolean(await crossSigning.isStoredInSecretStorage(secretStorage));
|
||||
const masterPrivateKeyCached = !!(pkCache && await pkCache.getCrossSigningKeyCache("master"));
|
||||
const selfSigningPrivateKeyCached = !!(pkCache && await pkCache.getCrossSigningKeyCache("self_signing"));
|
||||
const userSigningPrivateKeyCached = !!(pkCache && await pkCache.getCrossSigningKeyCache("user_signing"));
|
||||
const masterPrivateKeyCached = !!(pkCache && (await pkCache.getCrossSigningKeyCache("master")));
|
||||
const selfSigningPrivateKeyCached = !!(pkCache && (await pkCache.getCrossSigningKeyCache("self_signing")));
|
||||
const userSigningPrivateKeyCached = !!(pkCache && (await pkCache.getCrossSigningKeyCache("user_signing")));
|
||||
const homeserverSupportsCrossSigning =
|
||||
await cli.doesServerSupportUnstableFeature("org.matrix.e2e_cross_signing");
|
||||
const crossSigningReady = await cli.isCrossSigningReady();
|
||||
|
|
|
@ -262,7 +262,7 @@ const JoinRuleSettings = ({ room, promptUpgrade, onError, beforeChange, closeSet
|
|||
}
|
||||
|
||||
if (beforeJoinRule === joinRule && !restrictedAllowRoomIds) return;
|
||||
if (beforeChange && !await beforeChange(joinRule)) return;
|
||||
if (beforeChange && !(await beforeChange(joinRule))) return;
|
||||
|
||||
const newContent: IJoinRuleEventContent = {
|
||||
join_rule: joinRule,
|
||||
|
|
|
@ -27,6 +27,8 @@ import { mediaFromMxc } from "../../../customisations/Media";
|
|||
import AccessibleButton from '../elements/AccessibleButton';
|
||||
import AvatarSetting from './AvatarSetting';
|
||||
|
||||
import { logger } from "matrix-js-sdk/src/logger";
|
||||
|
||||
interface IState {
|
||||
userId?: string;
|
||||
originalDisplayName?: string;
|
||||
|
@ -104,7 +106,7 @@ export default class ProfileSettings extends React.Component<{}, IState> {
|
|||
}
|
||||
|
||||
if (this.state.avatarFile) {
|
||||
console.log(
|
||||
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);
|
||||
|
@ -116,7 +118,7 @@ export default class ProfileSettings extends React.Component<{}, IState> {
|
|||
await client.setAvatarUrl(""); // use empty string as Synapse 500s on undefined
|
||||
}
|
||||
} catch (err) {
|
||||
console.log("Failed to save profile", err);
|
||||
logger.log("Failed to save profile", err);
|
||||
Modal.createTrackedDialog('Failed to save profile', '', ErrorDialog, {
|
||||
title: _t("Failed to save your profile"),
|
||||
description: ((err && err.message) ? err.message : _t("The operation could not be completed")),
|
||||
|
|
|
@ -27,13 +27,31 @@ import QuestionDialog from '../dialogs/QuestionDialog';
|
|||
import RestoreKeyBackupDialog from '../dialogs/security/RestoreKeyBackupDialog';
|
||||
import { accessSecretStorage } from '../../../SecurityManager';
|
||||
import { replaceableComponent } from "../../../utils/replaceableComponent";
|
||||
import { IKeyBackupInfo } from "matrix-js-sdk/src/crypto/keybackup";
|
||||
import { TrustInfo } from "matrix-js-sdk/src/crypto/backup";
|
||||
|
||||
interface IState {
|
||||
loading: boolean;
|
||||
error: null;
|
||||
backupKeyStored: boolean;
|
||||
backupKeyCached: boolean;
|
||||
backupKeyWellFormed: boolean;
|
||||
secretStorageKeyInAccount: boolean;
|
||||
secretStorageReady: boolean;
|
||||
backupInfo: IKeyBackupInfo;
|
||||
backupSigStatus: TrustInfo;
|
||||
sessionsRemaining: number;
|
||||
}
|
||||
|
||||
import { logger } from "matrix-js-sdk/src/logger";
|
||||
|
||||
@replaceableComponent("views.settings.SecureBackupPanel")
|
||||
export default class SecureBackupPanel extends React.PureComponent {
|
||||
constructor(props) {
|
||||
export default class SecureBackupPanel extends React.PureComponent<{}, IState> {
|
||||
private unmounted = false;
|
||||
|
||||
constructor(props: {}) {
|
||||
super(props);
|
||||
|
||||
this._unmounted = false;
|
||||
this.state = {
|
||||
loading: true,
|
||||
error: null,
|
||||
|
@ -48,42 +66,42 @@ export default class SecureBackupPanel extends React.PureComponent {
|
|||
};
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this._checkKeyBackupStatus();
|
||||
public componentDidMount(): void {
|
||||
this.checkKeyBackupStatus();
|
||||
|
||||
MatrixClientPeg.get().on('crypto.keyBackupStatus', this._onKeyBackupStatus);
|
||||
MatrixClientPeg.get().on('crypto.keyBackupStatus', this.onKeyBackupStatus);
|
||||
MatrixClientPeg.get().on(
|
||||
'crypto.keyBackupSessionsRemaining',
|
||||
this._onKeyBackupSessionsRemaining,
|
||||
this.onKeyBackupSessionsRemaining,
|
||||
);
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
this._unmounted = true;
|
||||
public componentWillUnmount(): void {
|
||||
this.unmounted = true;
|
||||
|
||||
if (MatrixClientPeg.get()) {
|
||||
MatrixClientPeg.get().removeListener('crypto.keyBackupStatus', this._onKeyBackupStatus);
|
||||
MatrixClientPeg.get().removeListener('crypto.keyBackupStatus', this.onKeyBackupStatus);
|
||||
MatrixClientPeg.get().removeListener(
|
||||
'crypto.keyBackupSessionsRemaining',
|
||||
this._onKeyBackupSessionsRemaining,
|
||||
this.onKeyBackupSessionsRemaining,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
_onKeyBackupSessionsRemaining = (sessionsRemaining) => {
|
||||
private onKeyBackupSessionsRemaining = (sessionsRemaining: number): void => {
|
||||
this.setState({
|
||||
sessionsRemaining,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
_onKeyBackupStatus = () => {
|
||||
private onKeyBackupStatus = (): void => {
|
||||
// This just loads the current backup status rather than forcing
|
||||
// a re-check otherwise we risk causing infinite loops
|
||||
this._loadBackupStatus();
|
||||
}
|
||||
this.loadBackupStatus();
|
||||
};
|
||||
|
||||
async _checkKeyBackupStatus() {
|
||||
this._getUpdatedDiagnostics();
|
||||
private async checkKeyBackupStatus(): Promise<void> {
|
||||
this.getUpdatedDiagnostics();
|
||||
try {
|
||||
const { backupInfo, trustInfo } = await MatrixClientPeg.get().checkKeyBackup();
|
||||
this.setState({
|
||||
|
@ -93,8 +111,8 @@ export default class SecureBackupPanel extends React.PureComponent {
|
|||
backupSigStatus: trustInfo,
|
||||
});
|
||||
} catch (e) {
|
||||
console.log("Unable to fetch check backup status", e);
|
||||
if (this._unmounted) return;
|
||||
logger.log("Unable to fetch check backup status", e);
|
||||
if (this.unmounted) return;
|
||||
this.setState({
|
||||
loading: false,
|
||||
error: e,
|
||||
|
@ -104,13 +122,13 @@ export default class SecureBackupPanel extends React.PureComponent {
|
|||
}
|
||||
}
|
||||
|
||||
async _loadBackupStatus() {
|
||||
private async loadBackupStatus(): Promise<void> {
|
||||
this.setState({ loading: true });
|
||||
this._getUpdatedDiagnostics();
|
||||
this.getUpdatedDiagnostics();
|
||||
try {
|
||||
const backupInfo = await MatrixClientPeg.get().getKeyBackupVersion();
|
||||
const backupSigStatus = await MatrixClientPeg.get().isKeyBackupTrusted(backupInfo);
|
||||
if (this._unmounted) return;
|
||||
if (this.unmounted) return;
|
||||
this.setState({
|
||||
loading: false,
|
||||
error: null,
|
||||
|
@ -118,8 +136,8 @@ export default class SecureBackupPanel extends React.PureComponent {
|
|||
backupSigStatus,
|
||||
});
|
||||
} catch (e) {
|
||||
console.log("Unable to fetch key backup status", e);
|
||||
if (this._unmounted) return;
|
||||
logger.log("Unable to fetch key backup status", e);
|
||||
if (this.unmounted) return;
|
||||
this.setState({
|
||||
loading: false,
|
||||
error: e,
|
||||
|
@ -129,7 +147,7 @@ export default class SecureBackupPanel extends React.PureComponent {
|
|||
}
|
||||
}
|
||||
|
||||
async _getUpdatedDiagnostics() {
|
||||
private async getUpdatedDiagnostics(): Promise<void> {
|
||||
const cli = MatrixClientPeg.get();
|
||||
const secretStorage = cli.crypto.secretStorage;
|
||||
|
||||
|
@ -140,7 +158,7 @@ export default class SecureBackupPanel extends React.PureComponent {
|
|||
const secretStorageKeyInAccount = await secretStorage.hasKey();
|
||||
const secretStorageReady = await cli.isSecretStorageReady();
|
||||
|
||||
if (this._unmounted) return;
|
||||
if (this.unmounted) return;
|
||||
this.setState({
|
||||
backupKeyStored,
|
||||
backupKeyCached,
|
||||
|
@ -150,18 +168,18 @@ export default class SecureBackupPanel extends React.PureComponent {
|
|||
});
|
||||
}
|
||||
|
||||
_startNewBackup = () => {
|
||||
private startNewBackup = (): void => {
|
||||
Modal.createTrackedDialogAsync('Key Backup', 'Key Backup',
|
||||
import('../../../async-components/views/dialogs/security/CreateKeyBackupDialog'),
|
||||
{
|
||||
onFinished: () => {
|
||||
this._loadBackupStatus();
|
||||
this.loadBackupStatus();
|
||||
},
|
||||
}, null, /* priority = */ false, /* static = */ true,
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
_deleteBackup = () => {
|
||||
private deleteBackup = (): void => {
|
||||
Modal.createTrackedDialog('Delete Backup', '', QuestionDialog, {
|
||||
title: _t('Delete Backup'),
|
||||
description: _t(
|
||||
|
@ -174,33 +192,33 @@ export default class SecureBackupPanel extends React.PureComponent {
|
|||
if (!proceed) return;
|
||||
this.setState({ loading: true });
|
||||
MatrixClientPeg.get().deleteKeyBackupVersion(this.state.backupInfo.version).then(() => {
|
||||
this._loadBackupStatus();
|
||||
this.loadBackupStatus();
|
||||
});
|
||||
},
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
_restoreBackup = async () => {
|
||||
private restoreBackup = async (): Promise<void> => {
|
||||
Modal.createTrackedDialog(
|
||||
'Restore Backup', '', RestoreKeyBackupDialog, null, null,
|
||||
/* priority = */ false, /* static = */ true,
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
_resetSecretStorage = async () => {
|
||||
private resetSecretStorage = async (): Promise<void> => {
|
||||
this.setState({ error: null });
|
||||
try {
|
||||
await accessSecretStorage(() => { }, /* forceReset = */ true);
|
||||
await accessSecretStorage(async () => { }, /* forceReset = */ true);
|
||||
} catch (e) {
|
||||
console.error("Error resetting secret storage", e);
|
||||
if (this._unmounted) return;
|
||||
if (this.unmounted) return;
|
||||
this.setState({ error: e });
|
||||
}
|
||||
if (this._unmounted) return;
|
||||
this._loadBackupStatus();
|
||||
}
|
||||
if (this.unmounted) return;
|
||||
this.loadBackupStatus();
|
||||
};
|
||||
|
||||
render() {
|
||||
public render(): JSX.Element {
|
||||
const {
|
||||
loading,
|
||||
error,
|
||||
|
@ -261,7 +279,7 @@ export default class SecureBackupPanel extends React.PureComponent {
|
|||
</div>;
|
||||
}
|
||||
|
||||
let backupSigStatuses = backupSigStatus.sigs.map((sig, i) => {
|
||||
let backupSigStatuses: React.ReactNode = backupSigStatus.sigs.map((sig, i) => {
|
||||
const deviceName = sig.device ? (sig.device.getDisplayName() || sig.device.deviceId) : null;
|
||||
const validity = sub =>
|
||||
<span className={sig.valid ? 'mx_SecureBackupPanel_sigValid' : 'mx_SecureBackupPanel_sigInvalid'}>
|
||||
|
@ -369,14 +387,14 @@ export default class SecureBackupPanel extends React.PureComponent {
|
|||
</>;
|
||||
|
||||
actions.push(
|
||||
<AccessibleButton key="restore" kind="primary" onClick={this._restoreBackup}>
|
||||
<AccessibleButton key="restore" kind="primary" onClick={this.restoreBackup}>
|
||||
{ restoreButtonCaption }
|
||||
</AccessibleButton>,
|
||||
);
|
||||
|
||||
if (!isSecureBackupRequired()) {
|
||||
actions.push(
|
||||
<AccessibleButton key="delete" kind="danger" onClick={this._deleteBackup}>
|
||||
<AccessibleButton key="delete" kind="danger" onClick={this.deleteBackup}>
|
||||
{ _t("Delete Backup") }
|
||||
</AccessibleButton>,
|
||||
);
|
||||
|
@ -390,7 +408,7 @@ export default class SecureBackupPanel extends React.PureComponent {
|
|||
<p>{ _t("Back up your keys before signing out to avoid losing them.") }</p>
|
||||
</>;
|
||||
actions.push(
|
||||
<AccessibleButton key="setup" kind="primary" onClick={this._startNewBackup}>
|
||||
<AccessibleButton key="setup" kind="primary" onClick={this.startNewBackup}>
|
||||
{ _t("Set up") }
|
||||
</AccessibleButton>,
|
||||
);
|
||||
|
@ -398,7 +416,7 @@ export default class SecureBackupPanel extends React.PureComponent {
|
|||
|
||||
if (secretStorageKeyInAccount) {
|
||||
actions.push(
|
||||
<AccessibleButton key="reset" kind="danger" onClick={this._resetSecretStorage}>
|
||||
<AccessibleButton key="reset" kind="danger" onClick={this.resetSecretStorage}>
|
||||
{ _t("Reset") }
|
||||
</AccessibleButton>,
|
||||
);
|
|
@ -16,16 +16,16 @@ limitations under the License.
|
|||
*/
|
||||
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { _t } from "../../../../languageHandler";
|
||||
import { MatrixClientPeg } from "../../../../MatrixClientPeg";
|
||||
import Field from "../../elements/Field";
|
||||
import AccessibleButton from "../../elements/AccessibleButton";
|
||||
import * as Email from "../../../../email";
|
||||
import AddThreepid from "../../../../AddThreepid";
|
||||
import * as sdk from '../../../../index';
|
||||
import Modal from '../../../../Modal';
|
||||
import { replaceableComponent } from "../../../../utils/replaceableComponent";
|
||||
import ErrorDialog from "../../dialogs/ErrorDialog";
|
||||
import { IThreepid, ThreepidMedium } from "matrix-js-sdk/src/@types/threepids";
|
||||
|
||||
/*
|
||||
TODO: Improve the UX for everything in here.
|
||||
|
@ -39,42 +39,45 @@ places to communicate errors - these should be replaced with inline validation w
|
|||
that is available.
|
||||
*/
|
||||
|
||||
export class ExistingEmailAddress extends React.Component {
|
||||
static propTypes = {
|
||||
email: PropTypes.object.isRequired,
|
||||
onRemoved: PropTypes.func.isRequired,
|
||||
};
|
||||
interface IExistingEmailAddressProps {
|
||||
email: IThreepid;
|
||||
onRemoved: (emails: IThreepid) => void;
|
||||
}
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
interface IExistingEmailAddressState {
|
||||
verifyRemove: boolean;
|
||||
}
|
||||
|
||||
export class ExistingEmailAddress extends React.Component<IExistingEmailAddressProps, IExistingEmailAddressState> {
|
||||
constructor(props: IExistingEmailAddressProps) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
verifyRemove: false,
|
||||
};
|
||||
}
|
||||
|
||||
_onRemove = (e) => {
|
||||
private onRemove = (e: React.MouseEvent): void => {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
|
||||
this.setState({ verifyRemove: true });
|
||||
};
|
||||
|
||||
_onDontRemove = (e) => {
|
||||
private onDontRemove = (e: React.MouseEvent): void => {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
|
||||
this.setState({ verifyRemove: false });
|
||||
};
|
||||
|
||||
_onActuallyRemove = (e) => {
|
||||
private onActuallyRemove = (e: React.MouseEvent): void => {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
|
||||
MatrixClientPeg.get().deleteThreePid(this.props.email.medium, this.props.email.address).then(() => {
|
||||
return this.props.onRemoved(this.props.email);
|
||||
}).catch((err) => {
|
||||
const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
|
||||
console.error("Unable to remove contact information: " + err);
|
||||
Modal.createTrackedDialog('Remove 3pid failed', '', ErrorDialog, {
|
||||
title: _t("Unable to remove contact information"),
|
||||
|
@ -83,7 +86,7 @@ export class ExistingEmailAddress extends React.Component {
|
|||
});
|
||||
};
|
||||
|
||||
render() {
|
||||
public render(): JSX.Element {
|
||||
if (this.state.verifyRemove) {
|
||||
return (
|
||||
<div className="mx_ExistingEmailAddress">
|
||||
|
@ -91,14 +94,14 @@ export class ExistingEmailAddress extends React.Component {
|
|||
{ _t("Remove %(email)s?", { email: this.props.email.address } ) }
|
||||
</span>
|
||||
<AccessibleButton
|
||||
onClick={this._onActuallyRemove}
|
||||
onClick={this.onActuallyRemove}
|
||||
kind="danger_sm"
|
||||
className="mx_ExistingEmailAddress_confirmBtn"
|
||||
>
|
||||
{ _t("Remove") }
|
||||
</AccessibleButton>
|
||||
<AccessibleButton
|
||||
onClick={this._onDontRemove}
|
||||
onClick={this.onDontRemove}
|
||||
kind="link_sm"
|
||||
className="mx_ExistingEmailAddress_confirmBtn"
|
||||
>
|
||||
|
@ -111,7 +114,7 @@ export class ExistingEmailAddress extends React.Component {
|
|||
return (
|
||||
<div className="mx_ExistingEmailAddress">
|
||||
<span className="mx_ExistingEmailAddress_email">{ this.props.email.address }</span>
|
||||
<AccessibleButton onClick={this._onRemove} kind="danger_sm">
|
||||
<AccessibleButton onClick={this.onRemove} kind="danger_sm">
|
||||
{ _t("Remove") }
|
||||
</AccessibleButton>
|
||||
</div>
|
||||
|
@ -119,14 +122,21 @@ export class ExistingEmailAddress extends React.Component {
|
|||
}
|
||||
}
|
||||
|
||||
@replaceableComponent("views.settings.account.EmailAddresses")
|
||||
export default class EmailAddresses extends React.Component {
|
||||
static propTypes = {
|
||||
emails: PropTypes.array.isRequired,
|
||||
onEmailsChange: PropTypes.func.isRequired,
|
||||
}
|
||||
interface IProps {
|
||||
emails: IThreepid[];
|
||||
onEmailsChange: (emails: Partial<IThreepid>[]) => void;
|
||||
}
|
||||
|
||||
constructor(props) {
|
||||
interface IState {
|
||||
verifying: boolean;
|
||||
addTask: any; // FIXME: When AddThreepid is TSfied
|
||||
continueDisabled: boolean;
|
||||
newEmailAddress: string;
|
||||
}
|
||||
|
||||
@replaceableComponent("views.settings.account.EmailAddresses")
|
||||
export default class EmailAddresses extends React.Component<IProps, IState> {
|
||||
constructor(props: IProps) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
|
@ -137,24 +147,23 @@ export default class EmailAddresses extends React.Component {
|
|||
};
|
||||
}
|
||||
|
||||
_onRemoved = (address) => {
|
||||
private onRemoved = (address): void => {
|
||||
const emails = this.props.emails.filter((e) => e !== address);
|
||||
this.props.onEmailsChange(emails);
|
||||
};
|
||||
|
||||
_onChangeNewEmailAddress = (e) => {
|
||||
private onChangeNewEmailAddress = (e: React.ChangeEvent<HTMLInputElement>): void => {
|
||||
this.setState({
|
||||
newEmailAddress: e.target.value,
|
||||
});
|
||||
};
|
||||
|
||||
_onAddClick = (e) => {
|
||||
private onAddClick = (e: React.FormEvent): void => {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
|
||||
if (!this.state.newEmailAddress) return;
|
||||
|
||||
const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
|
||||
const email = this.state.newEmailAddress;
|
||||
|
||||
// TODO: Inline field validation
|
||||
|
@ -181,7 +190,7 @@ export default class EmailAddresses extends React.Component {
|
|||
});
|
||||
};
|
||||
|
||||
_onContinueClick = (e) => {
|
||||
private onContinueClick = (e: React.MouseEvent): void => {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
|
||||
|
@ -192,7 +201,7 @@ export default class EmailAddresses extends React.Component {
|
|||
const email = this.state.newEmailAddress;
|
||||
const emails = [
|
||||
...this.props.emails,
|
||||
{ address: email, medium: "email" },
|
||||
{ address: email, medium: ThreepidMedium.Email },
|
||||
];
|
||||
this.props.onEmailsChange(emails);
|
||||
newEmailAddress = "";
|
||||
|
@ -205,7 +214,6 @@ export default class EmailAddresses extends React.Component {
|
|||
});
|
||||
}).catch((err) => {
|
||||
this.setState({ continueDisabled: false });
|
||||
const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
|
||||
if (err.errcode === 'M_THREEPID_AUTH_FAILED') {
|
||||
Modal.createTrackedDialog("Email hasn't been verified yet", "", ErrorDialog, {
|
||||
title: _t("Your email address hasn't been verified yet"),
|
||||
|
@ -222,13 +230,13 @@ export default class EmailAddresses extends React.Component {
|
|||
});
|
||||
};
|
||||
|
||||
render() {
|
||||
public render(): JSX.Element {
|
||||
const existingEmailElements = this.props.emails.map((e) => {
|
||||
return <ExistingEmailAddress email={e} onRemoved={this._onRemoved} key={e.address} />;
|
||||
return <ExistingEmailAddress email={e} onRemoved={this.onRemoved} key={e.address} />;
|
||||
});
|
||||
|
||||
let addButton = (
|
||||
<AccessibleButton onClick={this._onAddClick} kind="primary">
|
||||
<AccessibleButton onClick={this.onAddClick} kind="primary">
|
||||
{ _t("Add") }
|
||||
</AccessibleButton>
|
||||
);
|
||||
|
@ -237,7 +245,7 @@ export default class EmailAddresses extends React.Component {
|
|||
<div>
|
||||
<div>{ _t("We've sent you an email to verify your address. Please follow the instructions there and then click the button below.") }</div>
|
||||
<AccessibleButton
|
||||
onClick={this._onContinueClick}
|
||||
onClick={this.onContinueClick}
|
||||
kind="primary"
|
||||
disabled={this.state.continueDisabled}
|
||||
>
|
||||
|
@ -251,7 +259,7 @@ export default class EmailAddresses extends React.Component {
|
|||
<div className="mx_EmailAddresses">
|
||||
{ existingEmailElements }
|
||||
<form
|
||||
onSubmit={this._onAddClick}
|
||||
onSubmit={this.onAddClick}
|
||||
autoComplete="off"
|
||||
noValidate={true}
|
||||
className="mx_EmailAddresses_new"
|
||||
|
@ -262,7 +270,7 @@ export default class EmailAddresses extends React.Component {
|
|||
autoComplete="off"
|
||||
disabled={this.state.verifying}
|
||||
value={this.state.newEmailAddress}
|
||||
onChange={this._onChangeNewEmailAddress}
|
||||
onChange={this.onChangeNewEmailAddress}
|
||||
/>
|
||||
{ addButton }
|
||||
</form>
|
|
@ -16,16 +16,17 @@ limitations under the License.
|
|||
*/
|
||||
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { _t } from "../../../../languageHandler";
|
||||
import { MatrixClientPeg } from "../../../../MatrixClientPeg";
|
||||
import Field from "../../elements/Field";
|
||||
import AccessibleButton from "../../elements/AccessibleButton";
|
||||
import AddThreepid from "../../../../AddThreepid";
|
||||
import CountryDropdown from "../../auth/CountryDropdown";
|
||||
import * as sdk from '../../../../index';
|
||||
import Modal from '../../../../Modal';
|
||||
import { replaceableComponent } from "../../../../utils/replaceableComponent";
|
||||
import { IThreepid, ThreepidMedium } from "matrix-js-sdk/src/@types/threepids";
|
||||
import ErrorDialog from "../../dialogs/ErrorDialog";
|
||||
import { PhoneNumberCountryDefinition } from "../../../../phonenumber";
|
||||
|
||||
/*
|
||||
TODO: Improve the UX for everything in here.
|
||||
|
@ -34,42 +35,45 @@ This is a copy/paste of EmailAddresses, mostly.
|
|||
|
||||
// TODO: Combine EmailAddresses and PhoneNumbers to be 3pid agnostic
|
||||
|
||||
export class ExistingPhoneNumber extends React.Component {
|
||||
static propTypes = {
|
||||
msisdn: PropTypes.object.isRequired,
|
||||
onRemoved: PropTypes.func.isRequired,
|
||||
};
|
||||
interface IExistingPhoneNumberProps {
|
||||
msisdn: IThreepid;
|
||||
onRemoved: (phoneNumber: IThreepid) => void;
|
||||
}
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
interface IExistingPhoneNumberState {
|
||||
verifyRemove: boolean;
|
||||
}
|
||||
|
||||
export class ExistingPhoneNumber extends React.Component<IExistingPhoneNumberProps, IExistingPhoneNumberState> {
|
||||
constructor(props: IExistingPhoneNumberProps) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
verifyRemove: false,
|
||||
};
|
||||
}
|
||||
|
||||
_onRemove = (e) => {
|
||||
private onRemove = (e: React.MouseEvent): void => {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
|
||||
this.setState({ verifyRemove: true });
|
||||
};
|
||||
|
||||
_onDontRemove = (e) => {
|
||||
private onDontRemove = (e: React.MouseEvent): void => {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
|
||||
this.setState({ verifyRemove: false });
|
||||
};
|
||||
|
||||
_onActuallyRemove = (e) => {
|
||||
private onActuallyRemove = (e: React.MouseEvent): void => {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
|
||||
MatrixClientPeg.get().deleteThreePid(this.props.msisdn.medium, this.props.msisdn.address).then(() => {
|
||||
return this.props.onRemoved(this.props.msisdn);
|
||||
}).catch((err) => {
|
||||
const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
|
||||
console.error("Unable to remove contact information: " + err);
|
||||
Modal.createTrackedDialog('Remove 3pid failed', '', ErrorDialog, {
|
||||
title: _t("Unable to remove contact information"),
|
||||
|
@ -78,7 +82,7 @@ export class ExistingPhoneNumber extends React.Component {
|
|||
});
|
||||
};
|
||||
|
||||
render() {
|
||||
public render(): JSX.Element {
|
||||
if (this.state.verifyRemove) {
|
||||
return (
|
||||
<div className="mx_ExistingPhoneNumber">
|
||||
|
@ -86,14 +90,14 @@ export class ExistingPhoneNumber extends React.Component {
|
|||
{ _t("Remove %(phone)s?", { phone: this.props.msisdn.address }) }
|
||||
</span>
|
||||
<AccessibleButton
|
||||
onClick={this._onActuallyRemove}
|
||||
onClick={this.onActuallyRemove}
|
||||
kind="danger_sm"
|
||||
className="mx_ExistingPhoneNumber_confirmBtn"
|
||||
>
|
||||
{ _t("Remove") }
|
||||
</AccessibleButton>
|
||||
<AccessibleButton
|
||||
onClick={this._onDontRemove}
|
||||
onClick={this.onDontRemove}
|
||||
kind="link_sm"
|
||||
className="mx_ExistingPhoneNumber_confirmBtn"
|
||||
>
|
||||
|
@ -106,7 +110,7 @@ export class ExistingPhoneNumber extends React.Component {
|
|||
return (
|
||||
<div className="mx_ExistingPhoneNumber">
|
||||
<span className="mx_ExistingPhoneNumber_address">+{ this.props.msisdn.address }</span>
|
||||
<AccessibleButton onClick={this._onRemove} kind="danger_sm">
|
||||
<AccessibleButton onClick={this.onRemove} kind="danger_sm">
|
||||
{ _t("Remove") }
|
||||
</AccessibleButton>
|
||||
</div>
|
||||
|
@ -114,19 +118,30 @@ export class ExistingPhoneNumber extends React.Component {
|
|||
}
|
||||
}
|
||||
|
||||
@replaceableComponent("views.settings.account.PhoneNumbers")
|
||||
export default class PhoneNumbers extends React.Component {
|
||||
static propTypes = {
|
||||
msisdns: PropTypes.array.isRequired,
|
||||
onMsisdnsChange: PropTypes.func.isRequired,
|
||||
}
|
||||
interface IProps {
|
||||
msisdns: IThreepid[];
|
||||
onMsisdnsChange: (phoneNumbers: Partial<IThreepid>[]) => void;
|
||||
}
|
||||
|
||||
constructor(props) {
|
||||
interface IState {
|
||||
verifying: boolean;
|
||||
verifyError: string;
|
||||
verifyMsisdn: string;
|
||||
addTask: any; // FIXME: When AddThreepid is TSfied
|
||||
continueDisabled: boolean;
|
||||
phoneCountry: string;
|
||||
newPhoneNumber: string;
|
||||
newPhoneNumberCode: string;
|
||||
}
|
||||
|
||||
@replaceableComponent("views.settings.account.PhoneNumbers")
|
||||
export default class PhoneNumbers extends React.Component<IProps, IState> {
|
||||
constructor(props: IProps) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
verifying: false,
|
||||
verifyError: false,
|
||||
verifyError: null,
|
||||
verifyMsisdn: "",
|
||||
addTask: null,
|
||||
continueDisabled: false,
|
||||
|
@ -136,30 +151,29 @@ export default class PhoneNumbers extends React.Component {
|
|||
};
|
||||
}
|
||||
|
||||
_onRemoved = (address) => {
|
||||
private onRemoved = (address: IThreepid): void => {
|
||||
const msisdns = this.props.msisdns.filter((e) => e !== address);
|
||||
this.props.onMsisdnsChange(msisdns);
|
||||
};
|
||||
|
||||
_onChangeNewPhoneNumber = (e) => {
|
||||
private onChangeNewPhoneNumber = (e: React.ChangeEvent<HTMLInputElement>): void => {
|
||||
this.setState({
|
||||
newPhoneNumber: e.target.value,
|
||||
});
|
||||
};
|
||||
|
||||
_onChangeNewPhoneNumberCode = (e) => {
|
||||
private onChangeNewPhoneNumberCode = (e: React.ChangeEvent<HTMLInputElement>): void => {
|
||||
this.setState({
|
||||
newPhoneNumberCode: e.target.value,
|
||||
});
|
||||
};
|
||||
|
||||
_onAddClick = (e) => {
|
||||
private onAddClick = (e: React.MouseEvent | React.FormEvent): void => {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
|
||||
if (!this.state.newPhoneNumber) return;
|
||||
|
||||
const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
|
||||
const phoneNumber = this.state.newPhoneNumber;
|
||||
const phoneCountry = this.state.phoneCountry;
|
||||
|
||||
|
@ -178,7 +192,7 @@ export default class PhoneNumbers extends React.Component {
|
|||
});
|
||||
};
|
||||
|
||||
_onContinueClick = (e) => {
|
||||
private onContinueClick = (e: React.MouseEvent | React.FormEvent): void => {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
|
||||
|
@ -190,7 +204,7 @@ export default class PhoneNumbers extends React.Component {
|
|||
if (finished) {
|
||||
const msisdns = [
|
||||
...this.props.msisdns,
|
||||
{ address, medium: "msisdn" },
|
||||
{ address, medium: ThreepidMedium.Phone },
|
||||
];
|
||||
this.props.onMsisdnsChange(msisdns);
|
||||
newPhoneNumber = "";
|
||||
|
@ -207,7 +221,6 @@ export default class PhoneNumbers extends React.Component {
|
|||
}).catch((err) => {
|
||||
this.setState({ continueDisabled: false });
|
||||
if (err.errcode !== 'M_THREEPID_AUTH_FAILED') {
|
||||
const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
|
||||
console.error("Unable to verify phone number: " + err);
|
||||
Modal.createTrackedDialog('Unable to verify phone number', '', ErrorDialog, {
|
||||
title: _t("Unable to verify phone number."),
|
||||
|
@ -219,17 +232,17 @@ export default class PhoneNumbers extends React.Component {
|
|||
});
|
||||
};
|
||||
|
||||
_onCountryChanged = (e) => {
|
||||
this.setState({ phoneCountry: e.iso2 });
|
||||
private onCountryChanged = (country: PhoneNumberCountryDefinition): void => {
|
||||
this.setState({ phoneCountry: country.iso2 });
|
||||
};
|
||||
|
||||
render() {
|
||||
public render(): JSX.Element {
|
||||
const existingPhoneElements = this.props.msisdns.map((p) => {
|
||||
return <ExistingPhoneNumber msisdn={p} onRemoved={this._onRemoved} key={p.address} />;
|
||||
return <ExistingPhoneNumber msisdn={p} onRemoved={this.onRemoved} key={p.address} />;
|
||||
});
|
||||
|
||||
let addVerifySection = (
|
||||
<AccessibleButton onClick={this._onAddClick} kind="primary">
|
||||
<AccessibleButton onClick={this.onAddClick} kind="primary">
|
||||
{ _t("Add") }
|
||||
</AccessibleButton>
|
||||
);
|
||||
|
@ -243,17 +256,17 @@ export default class PhoneNumbers extends React.Component {
|
|||
<br />
|
||||
{ this.state.verifyError }
|
||||
</div>
|
||||
<form onSubmit={this._onContinueClick} autoComplete="off" noValidate={true}>
|
||||
<form onSubmit={this.onContinueClick} autoComplete="off" noValidate={true}>
|
||||
<Field
|
||||
type="text"
|
||||
label={_t("Verification code")}
|
||||
autoComplete="off"
|
||||
disabled={this.state.continueDisabled}
|
||||
value={this.state.newPhoneNumberCode}
|
||||
onChange={this._onChangeNewPhoneNumberCode}
|
||||
onChange={this.onChangeNewPhoneNumberCode}
|
||||
/>
|
||||
<AccessibleButton
|
||||
onClick={this._onContinueClick}
|
||||
onClick={this.onContinueClick}
|
||||
kind="primary"
|
||||
disabled={this.state.continueDisabled}
|
||||
>
|
||||
|
@ -264,7 +277,7 @@ export default class PhoneNumbers extends React.Component {
|
|||
);
|
||||
}
|
||||
|
||||
const phoneCountry = <CountryDropdown onOptionChange={this._onCountryChanged}
|
||||
const phoneCountry = <CountryDropdown onOptionChange={this.onCountryChanged}
|
||||
className="mx_PhoneNumbers_country"
|
||||
value={this.state.phoneCountry}
|
||||
disabled={this.state.verifying}
|
||||
|
@ -275,7 +288,7 @@ export default class PhoneNumbers extends React.Component {
|
|||
return (
|
||||
<div className="mx_PhoneNumbers">
|
||||
{ existingPhoneElements }
|
||||
<form onSubmit={this._onAddClick} autoComplete="off" noValidate={true} className="mx_PhoneNumbers_new">
|
||||
<form onSubmit={this.onAddClick} autoComplete="off" noValidate={true} className="mx_PhoneNumbers_new">
|
||||
<div className="mx_PhoneNumbers_input">
|
||||
<Field
|
||||
type="text"
|
||||
|
@ -284,7 +297,7 @@ export default class PhoneNumbers extends React.Component {
|
|||
disabled={this.state.verifying}
|
||||
prefixComponent={phoneCountry}
|
||||
value={this.state.newPhoneNumber}
|
||||
onChange={this._onChangeNewPhoneNumber}
|
||||
onChange={this.onChangeNewPhoneNumber}
|
||||
/>
|
||||
</div>
|
||||
</form>
|
|
@ -16,14 +16,15 @@ limitations under the License.
|
|||
*/
|
||||
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import { _t } from "../../../../languageHandler";
|
||||
import { MatrixClientPeg } from "../../../../MatrixClientPeg";
|
||||
import * as sdk from '../../../../index';
|
||||
import Modal from '../../../../Modal';
|
||||
import AddThreepid from '../../../../AddThreepid';
|
||||
import { replaceableComponent } from "../../../../utils/replaceableComponent";
|
||||
import { IThreepid } from "matrix-js-sdk/src/@types/threepids";
|
||||
import ErrorDialog from "../../dialogs/ErrorDialog";
|
||||
import AccessibleButton from "../../elements/AccessibleButton";
|
||||
|
||||
/*
|
||||
TODO: Improve the UX for everything in here.
|
||||
|
@ -41,12 +42,19 @@ that is available.
|
|||
TODO: Reduce all the copying between account vs. discovery components.
|
||||
*/
|
||||
|
||||
export class EmailAddress extends React.Component {
|
||||
static propTypes = {
|
||||
email: PropTypes.object.isRequired,
|
||||
};
|
||||
interface IEmailAddressProps {
|
||||
email: IThreepid;
|
||||
}
|
||||
|
||||
constructor(props) {
|
||||
interface IEmailAddressState {
|
||||
verifying: boolean;
|
||||
addTask: any; // FIXME: When AddThreepid is TSfied
|
||||
continueDisabled: boolean;
|
||||
bound: boolean;
|
||||
}
|
||||
|
||||
export class EmailAddress extends React.Component<IEmailAddressProps, IEmailAddressState> {
|
||||
constructor(props: IEmailAddressProps) {
|
||||
super(props);
|
||||
|
||||
const { bound } = props.email;
|
||||
|
@ -60,17 +68,17 @@ export class EmailAddress extends React.Component {
|
|||
}
|
||||
|
||||
// TODO: [REACT-WARNING] Replace with appropriate lifecycle event
|
||||
UNSAFE_componentWillReceiveProps(nextProps) { // eslint-disable-line camelcase
|
||||
// eslint-disable-next-line @typescript-eslint/naming-convention, camelcase
|
||||
public UNSAFE_componentWillReceiveProps(nextProps: IEmailAddressProps): void {
|
||||
const { bound } = nextProps.email;
|
||||
this.setState({ bound });
|
||||
}
|
||||
|
||||
async changeBinding({ bind, label, errorTitle }) {
|
||||
private async changeBinding({ bind, label, errorTitle }): Promise<void> {
|
||||
if (!await MatrixClientPeg.get().doesServerSupportSeparateAddAndBind()) {
|
||||
return this.changeBindingTangledAddBind({ bind, label, errorTitle });
|
||||
}
|
||||
|
||||
const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
|
||||
const { medium, address } = this.props.email;
|
||||
|
||||
try {
|
||||
|
@ -103,8 +111,7 @@ export class EmailAddress extends React.Component {
|
|||
}
|
||||
}
|
||||
|
||||
async changeBindingTangledAddBind({ bind, label, errorTitle }) {
|
||||
const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
|
||||
private async changeBindingTangledAddBind({ bind, label, errorTitle }): Promise<void> {
|
||||
const { medium, address } = this.props.email;
|
||||
|
||||
const task = new AddThreepid();
|
||||
|
@ -139,7 +146,7 @@ export class EmailAddress extends React.Component {
|
|||
}
|
||||
}
|
||||
|
||||
onRevokeClick = (e) => {
|
||||
private onRevokeClick = (e: React.MouseEvent): void => {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
this.changeBinding({
|
||||
|
@ -147,9 +154,9 @@ export class EmailAddress extends React.Component {
|
|||
label: "revoke",
|
||||
errorTitle: _t("Unable to revoke sharing for email address"),
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
onShareClick = (e) => {
|
||||
private onShareClick = (e: React.MouseEvent): void => {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
this.changeBinding({
|
||||
|
@ -157,9 +164,9 @@ export class EmailAddress extends React.Component {
|
|||
label: "share",
|
||||
errorTitle: _t("Unable to share email address"),
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
onContinueClick = async (e) => {
|
||||
private onContinueClick = async (e: React.MouseEvent): Promise<void> => {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
|
||||
|
@ -173,7 +180,6 @@ export class EmailAddress extends React.Component {
|
|||
});
|
||||
} catch (err) {
|
||||
this.setState({ continueDisabled: false });
|
||||
const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
|
||||
if (err.errcode === 'M_THREEPID_AUTH_FAILED') {
|
||||
Modal.createTrackedDialog("E-mail hasn't been verified yet", "", ErrorDialog, {
|
||||
title: _t("Your email address hasn't been verified yet"),
|
||||
|
@ -188,10 +194,9 @@ export class EmailAddress extends React.Component {
|
|||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
|
||||
public render(): JSX.Element {
|
||||
const { address } = this.props.email;
|
||||
const { verifying, bound } = this.state;
|
||||
|
||||
|
@ -234,14 +239,13 @@ export class EmailAddress extends React.Component {
|
|||
);
|
||||
}
|
||||
}
|
||||
interface IProps {
|
||||
emails: IThreepid[];
|
||||
}
|
||||
|
||||
@replaceableComponent("views.settings.discovery.EmailAddresses")
|
||||
export default class EmailAddresses extends React.Component {
|
||||
static propTypes = {
|
||||
emails: PropTypes.array.isRequired,
|
||||
}
|
||||
|
||||
render() {
|
||||
export default class EmailAddresses extends React.Component<IProps> {
|
||||
public render(): JSX.Element {
|
||||
let content;
|
||||
if (this.props.emails.length > 0) {
|
||||
content = this.props.emails.map((e) => {
|
|
@ -16,14 +16,16 @@ limitations under the License.
|
|||
*/
|
||||
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import { _t } from "../../../../languageHandler";
|
||||
import { MatrixClientPeg } from "../../../../MatrixClientPeg";
|
||||
import * as sdk from '../../../../index';
|
||||
import Modal from '../../../../Modal';
|
||||
import AddThreepid from '../../../../AddThreepid';
|
||||
import { replaceableComponent } from "../../../../utils/replaceableComponent";
|
||||
import { IThreepid } from "matrix-js-sdk/src/@types/threepids";
|
||||
import ErrorDialog from "../../dialogs/ErrorDialog";
|
||||
import Field from "../../elements/Field";
|
||||
import AccessibleButton from "../../elements/AccessibleButton";
|
||||
|
||||
/*
|
||||
TODO: Improve the UX for everything in here.
|
||||
|
@ -32,12 +34,21 @@ This is a copy/paste of EmailAddresses, mostly.
|
|||
|
||||
// TODO: Combine EmailAddresses and PhoneNumbers to be 3pid agnostic
|
||||
|
||||
export class PhoneNumber extends React.Component {
|
||||
static propTypes = {
|
||||
msisdn: PropTypes.object.isRequired,
|
||||
};
|
||||
interface IPhoneNumberProps {
|
||||
msisdn: IThreepid;
|
||||
}
|
||||
|
||||
constructor(props) {
|
||||
interface IPhoneNumberState {
|
||||
verifying: boolean;
|
||||
verificationCode: string;
|
||||
addTask: any; // FIXME: When AddThreepid is TSfied
|
||||
continueDisabled: boolean;
|
||||
bound: boolean;
|
||||
verifyError: string;
|
||||
}
|
||||
|
||||
export class PhoneNumber extends React.Component<IPhoneNumberProps, IPhoneNumberState> {
|
||||
constructor(props: IPhoneNumberProps) {
|
||||
super(props);
|
||||
|
||||
const { bound } = props.msisdn;
|
||||
|
@ -48,21 +59,22 @@ export class PhoneNumber extends React.Component {
|
|||
addTask: null,
|
||||
continueDisabled: false,
|
||||
bound,
|
||||
verifyError: null,
|
||||
};
|
||||
}
|
||||
|
||||
// TODO: [REACT-WARNING] Replace with appropriate lifecycle event
|
||||
UNSAFE_componentWillReceiveProps(nextProps) { // eslint-disable-line camelcase
|
||||
// eslint-disable-next-line @typescript-eslint/naming-convention, camelcase
|
||||
public UNSAFE_componentWillReceiveProps(nextProps: IPhoneNumberProps): void {
|
||||
const { bound } = nextProps.msisdn;
|
||||
this.setState({ bound });
|
||||
}
|
||||
|
||||
async changeBinding({ bind, label, errorTitle }) {
|
||||
private async changeBinding({ bind, label, errorTitle }): Promise<void> {
|
||||
if (!await MatrixClientPeg.get().doesServerSupportSeparateAddAndBind()) {
|
||||
return this.changeBindingTangledAddBind({ bind, label, errorTitle });
|
||||
}
|
||||
|
||||
const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
|
||||
const { medium, address } = this.props.msisdn;
|
||||
|
||||
try {
|
||||
|
@ -99,8 +111,7 @@ export class PhoneNumber extends React.Component {
|
|||
}
|
||||
}
|
||||
|
||||
async changeBindingTangledAddBind({ bind, label, errorTitle }) {
|
||||
const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
|
||||
private async changeBindingTangledAddBind({ bind, label, errorTitle }): Promise<void> {
|
||||
const { medium, address } = this.props.msisdn;
|
||||
|
||||
const task = new AddThreepid();
|
||||
|
@ -139,7 +150,7 @@ export class PhoneNumber extends React.Component {
|
|||
}
|
||||
}
|
||||
|
||||
onRevokeClick = (e) => {
|
||||
private onRevokeClick = (e: React.MouseEvent): void => {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
this.changeBinding({
|
||||
|
@ -147,9 +158,9 @@ export class PhoneNumber extends React.Component {
|
|||
label: "revoke",
|
||||
errorTitle: _t("Unable to revoke sharing for phone number"),
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
onShareClick = (e) => {
|
||||
private onShareClick = (e: React.MouseEvent): void => {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
this.changeBinding({
|
||||
|
@ -157,15 +168,15 @@ export class PhoneNumber extends React.Component {
|
|||
label: "share",
|
||||
errorTitle: _t("Unable to share phone number"),
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
onVerificationCodeChange = (e) => {
|
||||
private onVerificationCodeChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
|
||||
this.setState({
|
||||
verificationCode: e.target.value,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
onContinueClick = async (e) => {
|
||||
private onContinueClick = async (e: React.MouseEvent | React.FormEvent): Promise<void> => {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
|
||||
|
@ -183,7 +194,6 @@ export class PhoneNumber extends React.Component {
|
|||
} catch (err) {
|
||||
this.setState({ continueDisabled: false });
|
||||
if (err.errcode !== 'M_THREEPID_AUTH_FAILED') {
|
||||
const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
|
||||
console.error("Unable to verify phone number: " + err);
|
||||
Modal.createTrackedDialog('Unable to verify phone number', '', ErrorDialog, {
|
||||
title: _t("Unable to verify phone number."),
|
||||
|
@ -193,11 +203,9 @@ export class PhoneNumber extends React.Component {
|
|||
this.setState({ verifyError: _t("Incorrect verification code") });
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
|
||||
const Field = sdk.getComponent('elements.Field');
|
||||
public render(): JSX.Element {
|
||||
const { address } = this.props.msisdn;
|
||||
const { verifying, bound } = this.state;
|
||||
|
||||
|
@ -247,13 +255,13 @@ export class PhoneNumber extends React.Component {
|
|||
}
|
||||
}
|
||||
|
||||
@replaceableComponent("views.settings.discovery.PhoneNumbers")
|
||||
export default class PhoneNumbers extends React.Component {
|
||||
static propTypes = {
|
||||
msisdns: PropTypes.array.isRequired,
|
||||
}
|
||||
interface IProps {
|
||||
msisdns: IThreepid[];
|
||||
}
|
||||
|
||||
render() {
|
||||
@replaceableComponent("views.settings.discovery.PhoneNumbers")
|
||||
export default class PhoneNumbers extends React.Component<IProps> {
|
||||
public render(): JSX.Element {
|
||||
let content;
|
||||
if (this.props.msisdns.length > 0) {
|
||||
content = this.props.msisdns.map((e) => {
|
|
@ -15,45 +15,46 @@ limitations under the License.
|
|||
*/
|
||||
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { _t } from "../../../../../languageHandler";
|
||||
import RoomProfileSettings from "../../../room_settings/RoomProfileSettings";
|
||||
import * as sdk from "../../../../..";
|
||||
import AccessibleButton from "../../../elements/AccessibleButton";
|
||||
import dis from "../../../../../dispatcher/dispatcher";
|
||||
import MatrixClientContext from "../../../../../contexts/MatrixClientContext";
|
||||
import SettingsStore from "../../../../../settings/SettingsStore";
|
||||
import { UIFeature } from "../../../../../settings/UIFeature";
|
||||
import { replaceableComponent } from "../../../../../utils/replaceableComponent";
|
||||
import UrlPreviewSettings from "../../../room_settings/UrlPreviewSettings";
|
||||
import RelatedGroupSettings from "../../../room_settings/RelatedGroupSettings";
|
||||
import AliasSettings from "../../../room_settings/AliasSettings";
|
||||
|
||||
interface IProps {
|
||||
roomId: string;
|
||||
}
|
||||
|
||||
interface IState {
|
||||
isRoomPublished: boolean;
|
||||
}
|
||||
|
||||
@replaceableComponent("views.settings.tabs.room.GeneralRoomSettingsTab")
|
||||
export default class GeneralRoomSettingsTab extends React.Component {
|
||||
static propTypes = {
|
||||
roomId: PropTypes.string.isRequired,
|
||||
};
|
||||
export default class GeneralRoomSettingsTab extends React.Component<IProps, IState> {
|
||||
public static contextType = MatrixClientContext;
|
||||
|
||||
static contextType = MatrixClientContext;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
constructor(props: IProps) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
isRoomPublished: false, // loaded async
|
||||
};
|
||||
}
|
||||
|
||||
_onLeaveClick = () => {
|
||||
private onLeaveClick = (): void => {
|
||||
dis.dispatch({
|
||||
action: 'leave_room',
|
||||
room_id: this.props.roomId,
|
||||
});
|
||||
};
|
||||
|
||||
render() {
|
||||
const AliasSettings = sdk.getComponent("room_settings.AliasSettings");
|
||||
const RelatedGroupSettings = sdk.getComponent("room_settings.RelatedGroupSettings");
|
||||
const UrlPreviewSettings = sdk.getComponent("room_settings.UrlPreviewSettings");
|
||||
|
||||
public render(): JSX.Element {
|
||||
const client = this.context;
|
||||
const room = client.getRoom(this.props.roomId);
|
||||
|
||||
|
@ -110,7 +111,7 @@ export default class GeneralRoomSettingsTab extends React.Component {
|
|||
|
||||
<span className='mx_SettingsTab_subheading'>{ _t("Leave room") }</span>
|
||||
<div className='mx_SettingsTab_section'>
|
||||
<AccessibleButton kind='danger' onClick={this._onLeaveClick}>
|
||||
<AccessibleButton kind='danger' onClick={this.onLeaveClick}>
|
||||
{ _t('Leave room') }
|
||||
</AccessibleButton>
|
||||
</div>
|
|
@ -15,7 +15,6 @@ limitations under the License.
|
|||
*/
|
||||
|
||||
import React, { createRef } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { _t } from "../../../../../languageHandler";
|
||||
import { MatrixClientPeg } from "../../../../../MatrixClientPeg";
|
||||
import AccessibleButton from "../../../elements/AccessibleButton";
|
||||
|
@ -24,16 +23,21 @@ import SettingsStore from '../../../../../settings/SettingsStore';
|
|||
import { SettingLevel } from "../../../../../settings/SettingLevel";
|
||||
import { replaceableComponent } from "../../../../../utils/replaceableComponent";
|
||||
|
||||
interface IProps {
|
||||
roomId: string;
|
||||
}
|
||||
|
||||
interface IState {
|
||||
currentSound: string;
|
||||
uploadedFile: File;
|
||||
}
|
||||
|
||||
@replaceableComponent("views.settings.tabs.room.NotificationsSettingsTab")
|
||||
export default class NotificationsSettingsTab extends React.Component {
|
||||
static propTypes = {
|
||||
roomId: PropTypes.string.isRequired,
|
||||
};
|
||||
export default class NotificationsSettingsTab extends React.Component<IProps, IState> {
|
||||
private soundUpload = createRef<HTMLInputElement>();
|
||||
|
||||
_soundUpload = createRef();
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
constructor(props: IProps) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
currentSound: "default",
|
||||
|
@ -42,7 +46,8 @@ export default class NotificationsSettingsTab extends React.Component {
|
|||
}
|
||||
|
||||
// TODO: [REACT-WARNING] Replace component with real class, use constructor for refs
|
||||
UNSAFE_componentWillMount() { // eslint-disable-line camelcase
|
||||
// eslint-disable-next-line @typescript-eslint/naming-convention, camelcase
|
||||
public UNSAFE_componentWillMount(): void {
|
||||
const soundData = Notifier.getSoundForRoom(this.props.roomId);
|
||||
if (!soundData) {
|
||||
return;
|
||||
|
@ -50,14 +55,14 @@ export default class NotificationsSettingsTab extends React.Component {
|
|||
this.setState({ currentSound: soundData.name || soundData.url });
|
||||
}
|
||||
|
||||
async _triggerUploader(e) {
|
||||
private triggerUploader = async (e: React.MouseEvent): Promise<void> => {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
|
||||
this._soundUpload.current.click();
|
||||
}
|
||||
this.soundUpload.current.click();
|
||||
};
|
||||
|
||||
async _onSoundUploadChanged(e) {
|
||||
private onSoundUploadChanged = (e: React.ChangeEvent<HTMLInputElement>): Promise<void> => {
|
||||
if (!e.target.files || !e.target.files.length) {
|
||||
this.setState({
|
||||
uploadedFile: null,
|
||||
|
@ -69,23 +74,23 @@ export default class NotificationsSettingsTab extends React.Component {
|
|||
this.setState({
|
||||
uploadedFile: file,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
async _onClickSaveSound(e) {
|
||||
private onClickSaveSound = async (e: React.MouseEvent): Promise<void> => {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
|
||||
try {
|
||||
await this._saveSound();
|
||||
await this.saveSound();
|
||||
} catch (ex) {
|
||||
console.error(
|
||||
`Unable to save notification sound for ${this.props.roomId}`,
|
||||
);
|
||||
console.error(ex);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
async _saveSound() {
|
||||
private async saveSound(): Promise<void> {
|
||||
if (!this.state.uploadedFile) {
|
||||
return;
|
||||
}
|
||||
|
@ -122,7 +127,7 @@ export default class NotificationsSettingsTab extends React.Component {
|
|||
});
|
||||
}
|
||||
|
||||
_clearSound(e) {
|
||||
private clearSound = (e: React.MouseEvent): void => {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
SettingsStore.setValue(
|
||||
|
@ -135,9 +140,9 @@ export default class NotificationsSettingsTab extends React.Component {
|
|||
this.setState({
|
||||
currentSound: "default",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
public render(): JSX.Element {
|
||||
let currentUploadedFile = null;
|
||||
if (this.state.uploadedFile) {
|
||||
currentUploadedFile = (
|
||||
|
@ -154,23 +159,23 @@ export default class NotificationsSettingsTab extends React.Component {
|
|||
<span className='mx_SettingsTab_subheading'>{ _t("Sounds") }</span>
|
||||
<div>
|
||||
<span>{ _t("Notification sound") }: <code>{ this.state.currentSound }</code></span><br />
|
||||
<AccessibleButton className="mx_NotificationSound_resetSound" disabled={this.state.currentSound == "default"} onClick={this._clearSound.bind(this)} kind="primary">
|
||||
<AccessibleButton className="mx_NotificationSound_resetSound" disabled={this.state.currentSound == "default"} onClick={this.clearSound} kind="primary">
|
||||
{ _t("Reset") }
|
||||
</AccessibleButton>
|
||||
</div>
|
||||
<div>
|
||||
<h3>{ _t("Set a new custom sound") }</h3>
|
||||
<form autoComplete="off" noValidate={true}>
|
||||
<input ref={this._soundUpload} className="mx_NotificationSound_soundUpload" type="file" onChange={this._onSoundUploadChanged.bind(this)} accept="audio/*" />
|
||||
<input ref={this.soundUpload} className="mx_NotificationSound_soundUpload" type="file" onChange={this.onSoundUploadChanged} accept="audio/*" />
|
||||
</form>
|
||||
|
||||
{ currentUploadedFile }
|
||||
|
||||
<AccessibleButton className="mx_NotificationSound_browse" onClick={this._triggerUploader.bind(this)} kind="primary">
|
||||
<AccessibleButton className="mx_NotificationSound_browse" onClick={this.triggerUploader} kind="primary">
|
||||
{ _t("Browse") }
|
||||
</AccessibleButton>
|
||||
|
||||
<AccessibleButton className="mx_NotificationSound_save" disabled={this.state.uploadedFile == null} onClick={this._onClickSaveSound.bind(this)} kind="primary">
|
||||
<AccessibleButton className="mx_NotificationSound_save" disabled={this.state.uploadedFile == null} onClick={this.onClickSaveSound} kind="primary">
|
||||
{ _t("Save") }
|
||||
</AccessibleButton>
|
||||
<br />
|
Some files were not shown because too many files have changed in this diff Show more
Loading…
Reference in a new issue