Matrix/element-call-Github
1
0
Fork 0
mirror of https://github.com/vector-im/element-call.git synced 2024-11-24 00:38:31 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'livekit' into hughns/to-device-key-distribution

Browse Source
This commit is contained in:
Hugh Nimmo-Smith 2024-09-11 10:18:49 +01:00
commit 8e38d66611
36 changed files with 737 additions and 628 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
.eslintrc.cjs
View File

@ -39,6 +39,12 @@ module.exports = {
// We should use the js-sdk logger, never console directly.
"no-console": ["error"],
"react/display-name": "error",
// Encourage proper usage of Promises:
"@typescript-eslint/no-floating-promises": "error",
"@typescript-eslint/no-misused-promises": "error",
"@typescript-eslint/promise-function-async": "error",
"@typescript-eslint/require-await": "error",
"@typescript-eslint/await-thenable": "error",
},
settings: {
react: {

13
src/App.tsx
View File

@ -15,6 +15,7 @@ import {
import * as Sentry from "@sentry/react";
import { History } from "history";
import { TooltipProvider } from "@vector-im/compound-web";
import { logger } from "matrix-js-sdk/src/logger";
import { HomePage } from "./home/HomePage";
import { LoginPage } from "./auth/LoginPage";
@ -61,11 +62,13 @@ interface AppProps {
export const App: FC<AppProps> = ({ history }) => {
const [loaded, setLoaded] = useState(false);
useEffect(() => {
Initializer.init()?.then(() => {
if (loaded) return;
setLoaded(true);
widget?.api.sendContentLoaded();
});
Initializer.init()
?.then(async () => {
if (loaded) return;
setLoaded(true);
await widget?.api.sendContentLoaded();
})
.catch(logger.error);
});
const errorPage = <CrashView />;

2
src/UserMenuContainer.tsx
View File

@ -31,7 +31,7 @@ export const UserMenuContainer: FC<Props> = ({ preventNavigation = false }) => {
const [settingsTab, setSettingsTab] = useState(defaultSettingsTab);
const onAction = useCallback(
async (value: string) => {
(value: string) => {
switch (value) {
case "user":
setSettingsTab("profile");

37
src/analytics/PosthogAnalytics.ts
View File

@ -260,7 +260,7 @@ export class PosthogAnalytics {
this.posthog.identify(analyticsID);
} else {
logger.info(
"No analyticsID is availble. Should not try to setup posthog",
"No analyticsID is available. Should not try to setup posthog",
);
}
}
@ -328,7 +328,9 @@ export class PosthogAnalytics {
}
public onLoginStatusChanged(): void {
this.maybeIdentifyUser();
this.maybeIdentifyUser().catch(() =>
logger.log("Could not identify user on login status change"),
);
}
private updateSuperProperties(): void {
@ -377,20 +379,27 @@ export class PosthogAnalytics {
}
}
public async trackEvent<E extends IPosthogEvent>(
public trackEvent<E extends IPosthogEvent>(
{ eventName, ...properties }: E,
options?: CaptureOptions,
): Promise<void> {
): void {
const doCapture = (): void => {
if (
this.anonymity == Anonymity.Disabled ||
this.anonymity == Anonymity.Anonymous
)
return;
this.capture(eventName, properties, options);
};
if (this.identificationPromise) {
// only make calls to posthog after the identificaion is done
await this.identificationPromise;
// only make calls to posthog after the identification is done
this.identificationPromise.then(doCapture, (e) => {
logger.error("Failed to identify user for tracking", e);
});
} else {
doCapture();
}
if (
this.anonymity == Anonymity.Disabled ||
this.anonymity == Anonymity.Anonymous
)
return;
this.capture(eventName, properties, options);
}
private startListeningToSettingsChanges(): void {
@ -404,7 +413,9 @@ export class PosthogAnalytics {
// won't be called (i.e. this.anonymity will be left as the default, until the setting changes)
optInAnalytics.value.subscribe((optIn) => {
this.setAnonymity(optIn ? Anonymity.Pseudonymous : Anonymity.Disabled);
this.maybeIdentifyUser();
this.maybeIdentifyUser().catch(() =>
logger.log("Could not identify user"),
);
});
}

9
src/analytics/PosthogSpanProcessor.ts
View File

@ -34,7 +34,7 @@ export class PosthogSpanProcessor implements SpanProcessor {
public onStart(span: Span): void {
// Hack: Yield to allow attributes to be set before processing
Promise.resolve().then(() => {
try {
switch (span.name) {
case "matrix.groupCallMembership":
this.onGroupCallMembershipStart(span);
@ -43,7 +43,10 @@ export class PosthogSpanProcessor implements SpanProcessor {
this.onSummaryReportStart(span);
return;
}
});
} catch (e) {
// log to avoid tripping @typescript-eslint/no-unused-vars
logger.debug(e);
}
}
public onEnd(span: ReadableSpan): void {
@ -148,7 +151,7 @@ export class PosthogSpanProcessor implements SpanProcessor {
/**
* Shutdown the processor.
*/
public shutdown(): Promise<void> {
public async shutdown(): Promise<void> {
return Promise.resolve();
}
}

7
src/auth/useInteractiveLogin.ts
View File

@ -40,7 +40,7 @@ export function useInteractiveLogin(
const interactiveAuth = new InteractiveAuth({
matrixClient: authClient,
doRequest: (): Promise<LoginResponse> =>
doRequest: async (): Promise<LoginResponse> =>
authClient.login("m.login.password", {
identifier: {
type: "m.id.user",
@ -49,9 +49,8 @@ export function useInteractiveLogin(
password,
}),
stateUpdated: (): void => {},
requestEmailToken: (): Promise<{ sid: string }> => {
return Promise.resolve({ sid: "" });
},
requestEmailToken: async (): Promise<{ sid: string }> =>
Promise.resolve({ sid: "" }),
});
// XXX: This claims to return an IAuthData which contains none of these

30
src/auth/useInteractiveRegistration.ts
View File

@ -12,6 +12,7 @@ import {
MatrixClient,
RegisterResponse,
} from "matrix-js-sdk/src/matrix";
import { logger } from "matrix-js-sdk/src/logger";
import { initClient } from "../utils/matrix";
import { Session } from "../ClientContext";
@ -66,7 +67,7 @@ export const useInteractiveRegistration = (
): Promise<[MatrixClient, Session]> => {
const interactiveAuth = new InteractiveAuth({
matrixClient: authClient.current!,
doRequest: (auth): Promise<RegisterResponse> =>
doRequest: async (auth): Promise<RegisterResponse> =>
authClient.current!.registerRequest({
username,
password,
@ -78,19 +79,26 @@ export const useInteractiveRegistration = (
}
if (nextStage === "m.login.terms") {
interactiveAuth.submitAuthDict({
type: "m.login.terms",
});
interactiveAuth
.submitAuthDict({
type: "m.login.terms",
})
.catch((e) => {
logger.error(e);
});
} else if (nextStage === "m.login.recaptcha") {
interactiveAuth.submitAuthDict({
type: "m.login.recaptcha",
response: recaptchaResponse,
});
interactiveAuth
.submitAuthDict({
type: "m.login.recaptcha",
response: recaptchaResponse,
})
.catch((e) => {
logger.error(e);
});
}
},
requestEmailToken: (): Promise<{ sid: string }> => {
return Promise.resolve({ sid: "dummy" });
},
requestEmailToken: async (): Promise<{ sid: string }> =>
Promise.resolve({ sid: "dummy" }),
});
// XXX: This claims to return an IAuthData which contains none of these

9
src/auth/useRecaptcha.ts
View File

@ -63,7 +63,7 @@ export function useRecaptcha(sitekey?: string): {
}
}, [recaptchaId, sitekey]);
const execute = useCallback((): Promise<string> => {
const execute = useCallback(async (): Promise<string> => {
if (!sitekey) {
return Promise.resolve("");
}
@ -95,7 +95,12 @@ export function useRecaptcha(sitekey?: string): {
},
};
window.grecaptcha.execute();
window.grecaptcha.execute().then(
() => {}, // noop
(e) => {
logger.error("Recaptcha execution failed", e);
},
);
const iframe = document.querySelector<HTMLIFrameElement>(
'iframe[src*="recaptcha/api2/bframe"]',

24
src/config/Config.ts
View File

@ -13,7 +13,7 @@ import {
} from "./ConfigOptions";
export class Config {
private static internalInstance: Config;
private static internalInstance: Config | undefined;
public static get(): ConfigOptions {
if (!this.internalInstance?.config)
@ -21,23 +21,23 @@ export class Config {
return this.internalInstance.config;
}
public static init(): Promise<void> {
if (Config.internalInstance?.initPromise) {
return Config.internalInstance.initPromise;
}
Config.internalInstance = new Config();
Config.internalInstance.initPromise = new Promise<void>((resolve) => {
downloadConfig("../config.json").then((config) => {
Config.internalInstance.config = { ...DEFAULT_CONFIG, ...config };
resolve();
public static async init(): Promise<void> {
if (!Config.internalInstance?.initPromise) {
const internalInstance = new Config();
Config.internalInstance = internalInstance;
Config.internalInstance.initPromise = downloadConfig(
"../config.json",
).then((config) => {
internalInstance.config = { ...DEFAULT_CONFIG, ...config };
});
});
}
return Config.internalInstance.initPromise;
}
/**
* This is a alternative initializer that does not load anything
* from a hosted config file but instead just initializes the conifg using the
* from a hosted config file but instead just initializes the config using the
* default config.
*
* It is supposed to only be used in tests. (It is executed in `vite.setup.js`)

24
src/e2ee/matrixKeyProvider.ts
View File

@ -46,19 +46,25 @@ export class MatrixKeyProvider extends BaseKeyProvider {
}
}
private onEncryptionKeyChanged = async (
private onEncryptionKeyChanged = (
encryptionKey: Uint8Array,
encryptionKeyIndex: number,
participantId: string,
): Promise<void> => {
this.onSetEncryptionKey(
await createKeyMaterialFromBuffer(encryptionKey),
participantId,
encryptionKeyIndex,
);
): void => {
createKeyMaterialFromBuffer(encryptionKey).then(
(keyMaterial) => {
this.onSetEncryptionKey(keyMaterial, participantId, encryptionKeyIndex);
logger.debug(
`Sent new key to livekit room=${this.rtcSession?.room.roomId} participantId=${participantId} encryptionKeyIndex=${encryptionKeyIndex}`,
logger.debug(
`Sent new key to livekit room=${this.rtcSession?.room.roomId} participantId=${participantId} encryptionKeyIndex=${encryptionKeyIndex}`,
);
},
(e) => {
logger.error(
`Failed to create key material from buffer for livekit room=${this.rtcSession?.room.roomId} participantId=${participantId} encryptionKeyIndex=${encryptionKeyIndex}`,
e,
);
},
);
};
}

6
src/grid/Grid.tsx
View File

@ -32,6 +32,7 @@ import {
} from "react";
import useMeasure from "react-use-measure";
import classNames from "classnames";
import { logger } from "matrix-js-sdk/src/logger";
import styles from "./Grid.module.css";
import { useMergedRefs } from "../useMergedRefs";
@ -353,7 +354,7 @@ export function Grid<
// Because we're using react-spring in imperative mode, we're responsible for
// firing animations manually whenever the tiles array updates
useEffect(() => {
springRef.start();
springRef.start().forEach((p) => void p.catch(logger.error));
}, [placedTiles, springRef]);
const animateDraggedTile = (
@ -390,7 +391,8 @@ export function Grid<
((key): boolean =>
key === "zIndex" || key === "x" || key === "y"),
},
);
)
.catch(logger.error);
if (endOfGesture)
callback({

2
src/home/CallList.test.tsx
View File

@ -22,7 +22,7 @@ describe("CallList", () => {
);
};
it("should show room", async () => {
it("should show room", () => {
const rooms = [
{
roomName: "Room #1",

17
src/initializer.tsx
View File

@ -10,6 +10,7 @@ import { initReactI18next } from "react-i18next";
import LanguageDetector from "i18next-browser-languagedetector";
import Backend from "i18next-http-backend";
import * as Sentry from "@sentry/react";
import { logger } from "matrix-js-sdk/src/logger";
import { getUrlParams } from "./UrlParams";
import { Config } from "./config/Config";
@ -73,6 +74,9 @@ export class Initializer {
order: ["urlFragment", "navigator"],
caches: [],
},
})
.catch((e) => {
logger.error("Failed to initialize i18n", e);
});
// Custom Themeing
@ -120,10 +124,15 @@ export class Initializer {
// config
if (this.loadStates.config === LoadState.None) {
this.loadStates.config = LoadState.Loading;
Config.init().then(() => {
this.loadStates.config = LoadState.Loaded;
this.initStep(resolve);
});
Config.init().then(
() => {
this.loadStates.config = LoadState.Loaded;
this.initStep(resolve);
},
(e) => {
logger.error("Failed to load config", e);
},
);
}
//sentry (only initialize after the config is ready)

18
src/livekit/openIDSFU.ts
View File

@ -40,12 +40,18 @@ export function useOpenIDSFU(
const activeFocus = useActiveLivekitFocus(rtcSession);
useEffect(() => {
(async (): Promise<void> => {
const sfuConfig = activeFocus
? await getSFUConfigWithOpenID(client, activeFocus)
: undefined;
setSFUConfig(sfuConfig);
})();
if (activeFocus) {
getSFUConfigWithOpenID(client, activeFocus).then(
(sfuConfig) => {
setSFUConfig(sfuConfig);
},
(e) => {
logger.error("Failed to get SFU config", e);
},
);
} else {
setSFUConfig(undefined);
}
}, [client, activeFocus]);
return sfuConfig;

22
src/livekit/useECConnectionState.ts
View File

@ -36,7 +36,7 @@ export enum ECAddonConnectionState {
// We are switching from one focus to another (or between livekit room aliases on the same focus)
ECSwitchingFocus = "ec_switching_focus",
// The call has just been initialised and is waiting for credentials to arrive before attempting
// to connect. This distinguishes from the 'Disconected' state which is now just for when livekit
// to connect. This distinguishes from the 'Disconnected' state which is now just for when livekit
// gives up on connectivity and we consider the call to have failed.
ECWaiting = "ec_waiting",
}
@ -151,9 +151,13 @@ async function connectAndPublish(
`Publishing ${screenshareTracks.length} precreated screenshare tracks`,
);
for (const st of screenshareTracks) {
livekitRoom.localParticipant.publishTrack(st, {
source: Track.Source.ScreenShare,
});
livekitRoom.localParticipant
.publishTrack(st, {
source: Track.Source.ScreenShare,
})
.catch((e) => {
logger.error("Failed to publish screenshare track", e);
});
}
}
@ -231,7 +235,9 @@ export function useECConnectionState(
`SFU config changed! URL was ${currentSFUConfig.current?.url} now ${sfuConfig?.url}`,
);
doFocusSwitch();
doFocusSwitch().catch((e) => {
logger.error("Failed to switch focus", e);
});
} else if (
!sfuConfigValid(currentSFUConfig.current) &&
sfuConfigValid(sfuConfig)
@ -248,7 +254,11 @@ export function useECConnectionState(
sfuConfig!,
initialAudioEnabled,
initialAudioOptions,
).finally(() => setIsInDoConnect(false));
)
.catch((e) => {
logger.error("Failed to connect to SFU", e);
})
.finally(() => setIsInDoConnect(false));
}
currentSFUConfig.current = Object.assign({}, sfuConfig);

38
src/livekit/useLiveKit.ts
View File

@ -67,9 +67,11 @@ export function useLiveKit(
if (e2eeSystem.kind === E2eeType.PER_PARTICIPANT) {
(e2eeOptions.keyProvider as MatrixKeyProvider).setRTCSession(rtcSession);
} else if (e2eeSystem.kind === E2eeType.SHARED_KEY && e2eeSystem.secret) {
(e2eeOptions.keyProvider as ExternalE2EEKeyProvider).setKey(
e2eeSystem.secret,
);
(e2eeOptions.keyProvider as ExternalE2EEKeyProvider)
.setKey(e2eeSystem.secret)
.catch((e) => {
logger.error("Failed to set shared key for E2EE", e);
});
}
}, [e2eeOptions, e2eeSystem, rtcSession]);
@ -112,7 +114,9 @@ export function useLiveKit(
// useEffect() with an argument that references itself, if E2EE is enabled
const room = useMemo(() => {
const r = new Room(roomOptions);
r.setE2EEEnabled(e2eeSystem.kind !== E2eeType.NONE);
r.setE2EEEnabled(e2eeSystem.kind !== E2eeType.NONE).catch((e) => {
logger.error("Failed to set E2EE enabled on room", e);
});
return r;
}, [roomOptions, e2eeSystem]);
@ -217,7 +221,7 @@ export function useLiveKit(
// itself we need might need to update the mute state right away.
// This async recursion makes sure that setCamera/MicrophoneEnabled is
// called as little times as possible.
syncMuteState(iterCount + 1, type);
await syncMuteState(iterCount + 1, type);
} else {
throw new Error(
"track with new mute state could not be published",
@ -226,7 +230,7 @@ export function useLiveKit(
} catch (e) {
if ((e as DOMException).name === "NotAllowedError") {
logger.error(
"Fatal errror while syncing mute state: resetting",
"Fatal error while syncing mute state: resetting",
e,
);
if (type === MuteDevice.Microphone) {
@ -241,14 +245,25 @@ export function useLiveKit(
"Failed to sync audio mute state with LiveKit (will retry to sync in 1s):",
e,
);
setTimeout(() => syncMuteState(iterCount + 1, type), 1000);
setTimeout(() => {
syncMuteState(iterCount + 1, type).catch((e) => {
logger.error(
`Failed to sync ${MuteDevice[type]} mute state with LiveKit iterCount=${iterCount + 1}`,
e,
);
});
}, 1000);
}
}
}
};
syncMuteState(0, MuteDevice.Microphone);
syncMuteState(0, MuteDevice.Camera);
syncMuteState(0, MuteDevice.Microphone).catch((e) => {
logger.error("Failed to sync audio mute state with LiveKit", e);
});
syncMuteState(0, MuteDevice.Camera).catch((e) => {
logger.error("Failed to sync video mute state with LiveKit", e);
});
}
}, [room, muteStates, connectionState]);
@ -295,7 +310,10 @@ export function useLiveKit(
// the deviceId hasn't changed (was & still is default).
room.localParticipant
.getTrackPublication(Track.Source.Microphone)
?.audioTrack?.restartTrack();
?.audioTrack?.restartTrack()
.catch((e) => {
logger.error(`Failed to restart audio device track`, e);
});
}
} else {
if (id !== undefined && room.getActiveDevice(kind) !== id) {

4
src/main.tsx
View File

@ -25,7 +25,9 @@ import { App } from "./App";
import { init as initRageshake } from "./settings/rageshake";
import { Initializer } from "./initializer";
initRageshake();
initRageshake().catch((e) => {
logger.error("Failed to initialize rageshake", e);
});
setLKLogLevel("debug");
setLKLogExtension((level, msg, context) => {
// we pass a synthetic logger name of "livekit" to the rageshake to make it easier to read

4
src/otel/otel.ts
View File

@ -90,7 +90,9 @@ export class ElementCallOpenTelemetry {
public dispose(): void {
opentelemetry.trace.disable();
this._provider?.shutdown();
this._provider?.shutdown().catch((e) => {
logger.error("Failed to shutdown OpenTelemetry", e);
});
}
public get isOtlpEnabled(): boolean {

75
src/room/GroupCallView.tsx
View File

@ -138,11 +138,7 @@ export const GroupCallView: FC<Props> = ({
if (audioInput === null) {
latestMuteStates.current!.audio.setEnabled?.(false);
} else {
const deviceId = await findDeviceByName(
audioInput,
"audioinput",
devices,
);
const deviceId = findDeviceByName(audioInput, "audioinput", devices);
if (!deviceId) {
logger.warn("Unknown audio input: " + audioInput);
latestMuteStates.current!.audio.setEnabled?.(false);
@ -158,11 +154,7 @@ export const GroupCallView: FC<Props> = ({
if (videoInput === null) {
latestMuteStates.current!.video.setEnabled?.(false);
} else {
const deviceId = await findDeviceByName(
videoInput,
"videoinput",
devices,
);
const deviceId = findDeviceByName(videoInput, "videoinput", devices);
if (!deviceId) {
logger.warn("Unknown video input: " + videoInput);
latestMuteStates.current!.video.setEnabled?.(false);
@ -178,24 +170,27 @@ export const GroupCallView: FC<Props> = ({
if (widget && preload && skipLobby) {
// In preload mode without lobby we wait for a join action before entering
const onJoin = async (
ev: CustomEvent<IWidgetApiRequest>,
): Promise<void> => {
await defaultDeviceSetup(ev.detail.data as unknown as JoinCallData);
await enterRTCSession(rtcSession, e2eeSystem.kind);
await widget!.api.transport.reply(ev.detail, {});
const onJoin = (ev: CustomEvent<IWidgetApiRequest>): void => {
(async (): Promise<void> => {
await defaultDeviceSetup(ev.detail.data as unknown as JoinCallData);
await enterRTCSession(rtcSession, e2eeSystem.kind);
widget!.api.transport.reply(ev.detail, {});
})().catch((e) => {
logger.error("Error joining RTC session", e);
});
};
widget.lazyActions.on(ElementWidgetActions.JoinCall, onJoin);
return (): void => {
widget!.lazyActions.off(ElementWidgetActions.JoinCall, onJoin);
};
} else if (widget && !preload && skipLobby) {
const join = async (): Promise<void> => {
// No lobby and no preload: we enter the rtc session right away
(async (): Promise<void> => {
await defaultDeviceSetup({ audioInput: null, videoInput: null });
await enterRTCSession(rtcSession, e2eeSystem.kind);
};
// No lobby and no preload: we enter the RTC Session right away.
join();
})().catch((e) => {
logger.error("Error joining RTC session", e);
});
}
}, [rtcSession, preload, skipLobby, e2eeSystem]);
@ -204,7 +199,7 @@ export const GroupCallView: FC<Props> = ({
const history = useHistory();
const onLeave = useCallback(
async (leaveError?: Error) => {
(leaveError?: Error): void => {
setLeaveError(leaveError);
setLeft(true);
@ -220,15 +215,19 @@ export const GroupCallView: FC<Props> = ({
);
// Only sends matrix leave event. The Livekit session will disconnect once the ActiveCall-view unmounts.
await leaveRTCSession(rtcSession);
if (
!isPasswordlessUser &&
!confineToRoom &&
!PosthogAnalytics.instance.isEnabled()
) {
history.push("/");
}
leaveRTCSession(rtcSession)
.then(() => {
if (
!isPasswordlessUser &&
!confineToRoom &&
!PosthogAnalytics.instance.isEnabled()
) {
history.push("/");
}
})
.catch((e) => {
logger.error("Error leaving RTC session", e);
});
},
[rtcSession, isPasswordlessUser, confineToRoom, history, matrixInfo],
);
@ -236,14 +235,16 @@ export const GroupCallView: FC<Props> = ({
useEffect(() => {
if (widget && isJoined) {
// set widget to sticky once joined.
widget!.api.setAlwaysOnScreen(true);
widget!.api.setAlwaysOnScreen(true).catch((e) => {
logger.error("Error calling setAlwaysOnScreen(true)", e);
});
const onHangup = async (
ev: CustomEvent<IWidgetApiRequest>,
): Promise<void> => {
const onHangup = (ev: CustomEvent<IWidgetApiRequest>): void => {
widget!.api.transport.reply(ev.detail, {});
// Only sends matrix leave event. The Livekit session will disconnect once the ActiveCall-view unmounts.
await leaveRTCSession(rtcSession);
leaveRTCSession(rtcSession).catch((e) => {
logger.error("Failed to leave RTC session", e);
});
};
widget.lazyActions.once(ElementWidgetActions.HangupCall, onHangup);
return (): void => {
@ -255,7 +256,9 @@ export const GroupCallView: FC<Props> = ({
const onReconnect = useCallback(() => {
setLeft(false);
setLeaveError(undefined);
enterRTCSession(rtcSession, e2eeSystem.kind);
enterRTCSession(rtcSession, e2eeSystem.kind).catch((e) => {
logger.error("Error re-entering RTC session on reconnect", e);
});
}, [rtcSession, e2eeSystem]);
const joinRule = useJoinRule(rtcSession.room);

37
src/room/InCallView.tsx
View File

@ -29,6 +29,7 @@ import { MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc/MatrixRTCSession";
import classNames from "classnames";
import { BehaviorSubject, of } from "rxjs";
import { useObservableEagerState } from "observable-hooks";
import { logger } from "matrix-js-sdk/src/logger";
import LogoMark from "../icons/LogoMark.svg?react";
import LogoType from "../icons/LogoType.svg?react";
@ -100,7 +101,9 @@ export const ActiveCall: FC<ActiveCallProps> = (props) => {
useEffect(() => {
return (): void => {
livekitRoom?.disconnect();
livekitRoom?.disconnect().catch((e) => {
logger.error("Failed to disconnect from livekit room", e);
});
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
@ -296,12 +299,16 @@ export const InCallView: FC<InCallViewProps> = ({
);
useEffect(() => {
widget?.api.transport.send(
gridMode === "grid"
? ElementWidgetActions.TileLayout
: ElementWidgetActions.SpotlightLayout,
{},
);
widget?.api.transport
.send(
gridMode === "grid"
? ElementWidgetActions.TileLayout
: ElementWidgetActions.SpotlightLayout,
{},
)
.catch((e) => {
logger.error("Failed to send layout change to widget API", e);
});
}, [gridMode]);
useEffect(() => {
@ -461,13 +468,15 @@ export const InCallView: FC<InCallViewProps> = ({
rtcSession.room.roomId,
);
const toggleScreensharing = useCallback(async () => {
await localParticipant.setScreenShareEnabled(!isScreenShareEnabled, {
audio: true,
selfBrowserSurface: "include",
surfaceSwitching: "include",
systemAudio: "include",
});
const toggleScreensharing = useCallback(() => {
localParticipant
.setScreenShareEnabled(!isScreenShareEnabled, {
audio: true,
selfBrowserSurface: "include",
surfaceSwitching: "include",
systemAudio: "include",
})
.catch(logger.error);
}, [localParticipant, isScreenShareEnabled]);
let footer: JSX.Element | null;

13
src/room/MuteStates.ts
View File

@ -13,6 +13,7 @@ import {
useMemo,
} from "react";
import { IWidgetApiRequest } from "matrix-widget-api";
import { logger } from "matrix-js-sdk/src/logger";
import { MediaDevice, useMediaDevices } from "../livekit/MediaDevicesContext";
import { useReactiveState } from "../useReactiveState";
@ -74,10 +75,14 @@ export function useMuteStates(): MuteStates {
const video = useMuteState(devices.videoInput, () => true);
useEffect(() => {
widget?.api.transport.send(ElementWidgetActions.DeviceMute, {
audio_enabled: audio.enabled,
video_enabled: video.enabled,
});
widget?.api.transport
.send(ElementWidgetActions.DeviceMute, {
audio_enabled: audio.enabled,
video_enabled: video.enabled,
})
.catch((e) =>
logger.warn("Could not send DeviceMute action to widget", e),
);
}, [audio, video]);
const onMuteStateChangeRequest = useCallback(

10
src/room/RoomPage.tsx
View File

@ -59,9 +59,13 @@ export const RoomPage: FC = () => {
// a URL param, automatically register a passwordless user
if (!loading && !authenticated && displayName && !widget) {
setIsRegistering(true);
registerPasswordlessUser(displayName).finally(() => {
setIsRegistering(false);
});
registerPasswordlessUser(displayName)
.catch((e) => {
logger.error("Failed to register passwordless user", e);
})
.finally(() => {
setIsRegistering(false);
});
}
}, [
loading,

20
src/room/useLoadGroupCall.ts
View File

@ -150,23 +150,22 @@ export const useLoadGroupCall = (
viaServers: string[],
onKnockSent: () => void,
): Promise<Room> => {
let joinedRoom: Room | null = null;
await client.knockRoom(roomId, { viaServers });
onKnockSent();
const invitePromise = new Promise<void>((resolve, reject) => {
return await new Promise<Room>((resolve, reject) => {
client.on(
RoomEvent.MyMembership,
async (room, membership, prevMembership) => {
(room, membership, prevMembership): void => {
if (roomId !== room.roomId) return;
activeRoom.current = room;
if (
membership === KnownMembership.Invite &&
prevMembership === KnownMembership.Knock
) {
await client.joinRoom(room.roomId, { viaServers });
joinedRoom = room;
logger.log("Auto-joined %s", room.roomId);
resolve();
client.joinRoom(room.roomId, { viaServers }).then((room) => {
logger.log("Auto-joined %s", room.roomId);
resolve(room);
}, reject);
}
if (membership === KnownMembership.Ban) reject(bannedError());
if (membership === KnownMembership.Leave)
@ -174,11 +173,6 @@ export const useLoadGroupCall = (
},
);
});
await invitePromise;
if (!joinedRoom) {
throw new Error("Failed to join room after knocking.");
}
return joinedRoom;
};
const fetchOrCreateRoom = async (): Promise<Room> => {
@ -308,7 +302,7 @@ export const useLoadGroupCall = (
const observeMyMembership = async (): Promise<void> => {
await new Promise((_, reject) => {
client.on(RoomEvent.MyMembership, async (_, membership) => {
client.on(RoomEvent.MyMembership, (_, membership) => {
if (membership === KnownMembership.Leave) reject(removeNoticeError());
if (membership === KnownMembership.Ban) reject(bannedError());
});

12
src/rtcSessionHelpers.ts
View File

@ -75,8 +75,7 @@ async function makePreferredLivekitFoci(
`No livekit_service_url is configured so we could not create a focus.
Currently we skip computing a focus based on other users in the room.`,
);
return preferredFoci;
return Promise.resolve(preferredFoci);
// TODO: we want to do something like this:
//
@ -123,13 +122,18 @@ const widgetPostHangupProcedure = async (
// we need to wait until the callEnded event is tracked on posthog.
// Otherwise the iFrame gets killed before the callEnded event got tracked.
await new Promise((resolve) => window.setTimeout(resolve, 10)); // 10ms
widget.api.setAlwaysOnScreen(false);
PosthogAnalytics.instance.logout();
try {
await widget.api.setAlwaysOnScreen(false);
} catch (e) {
logger.error("Failed to set call widget `alwaysOnScreen` to false", e);
}
// We send the hangup event after the memberships have been updated
// calling leaveRTCSession.
// We need to wait because this makes the client hosting this widget killing the IFrame.
widget.api.transport.send(ElementWidgetActions.HangupCall, {});
await widget.api.transport.send(ElementWidgetActions.HangupCall, {});
};
export async function leaveRTCSession(

3
src/settings/FeedbackSettingsTab.tsx
View File

@ -9,6 +9,7 @@ import { FC, useCallback } from "react";
import { randomString } from "matrix-js-sdk/src/randomstring";
import { useTranslation } from "react-i18next";
import { Button } from "@vector-im/compound-web";
import { logger } from "matrix-js-sdk/src/logger";
import { FieldRow, InputField, ErrorMessage } from "../input/Input";
import { useSubmitRageshake, useRageshakeRequest } from "./submit-rageshake";
@ -41,6 +42,8 @@ export const FeedbackSettingsTab: FC<Props> = ({ roomId }) => {
sendLogs,
rageshakeRequestId,
roomId,
}).catch((e) => {
logger.error("Failed to send feedback rageshake", e);
});
if (roomId && sendLogs) {

3
src/settings/ProfileSettingsTab.tsx
View File

@ -8,6 +8,7 @@ Please see LICENSE in the repository root for full details.
import { FC, useCallback, useEffect, useMemo, useRef } from "react";
import { MatrixClient } from "matrix-js-sdk/src/client";
import { useTranslation } from "react-i18next";
import { logger } from "matrix-js-sdk/src/logger";
import { useProfile } from "../profile/useProfile";
import { FieldRow, InputField, ErrorMessage } from "../input/Input";
@ -61,6 +62,8 @@ export const ProfileSettingsTab: FC<Props> = ({ client }) => {
// @ts-ignore
avatar: avatar && avatarSize > 0 ? avatar : undefined,
removeAvatar: removeAvatar.current && (!avatar || avatarSize === 0),
}).catch((e) => {
logger.error("Failed to save profile", e);
});
}
};

3
src/settings/RageshakeButton.tsx
View File

@ -8,6 +8,7 @@ Please see LICENSE in the repository root for full details.
import { useTranslation } from "react-i18next";
import { FC, useCallback } from "react";
import { Button } from "@vector-im/compound-web";
import { logger } from "matrix-js-sdk/src/logger";
import { Config } from "../config/Config";
import styles from "./RageshakeButton.module.css";
@ -25,6 +26,8 @@ export const RageshakeButton: FC<Props> = ({ description }) => {
submitRageshake({
description,
sendLogs: true,
}).catch((e) => {
logger.error("Failed to send rageshake", e);
});
}, [submitRageshake, description]);

50
src/settings/rageshake.ts
View File

@ -128,13 +128,17 @@ class IndexedDBLogStore {
this.id = "instance-" + randomString(16);
loggerInstance.on(ConsoleLoggerEvent.Log, this.onLoggerLog);
window.addEventListener("beforeunload", this.flush);
window.addEventListener("beforeunload", () => {
this.flush().catch((e) =>
logger.error("Failed to flush logs before unload", e),
);
});
}
/**
* @return {Promise} Resolves when the store is ready.
*/
public connect(): Promise<void> {
public async connect(): Promise<void> {
const req = this.indexedDB.open("logs");
return new Promise((resolve, reject) => {
req.onsuccess = (): void => {
@ -190,16 +194,10 @@ class IndexedDBLogStore {
// Throttled function to flush logs. We use throttle rather
// than debounce as we want logs to be written regularly, otherwise
// if there's a constant stream of logging, we'd never write anything.
private throttledFlush = throttle(
() => {
this.flush();
},
MAX_FLUSH_INTERVAL_MS,
{
leading: false,
trailing: true,
},
);
private throttledFlush = throttle(() => this.flush, MAX_FLUSH_INTERVAL_MS, {
leading: false,
trailing: true,
});
/**
* Flush logs to disk.
@ -220,7 +218,7 @@ class IndexedDBLogStore {
*
* @return {Promise} Resolved when the logs have been flushed.
*/
public flush = (): Promise<void> => {
public flush = async (): Promise<void> => {
// check if a flush() operation is ongoing
if (this.flushPromise) {
if (this.flushAgainPromise) {
@ -228,13 +226,9 @@ class IndexedDBLogStore {
return this.flushAgainPromise;
}
// queue up a flush to occur immediately after the pending one completes.
this.flushAgainPromise = this.flushPromise
.then(() => {
return this.flush();
})
.then(() => {
this.flushAgainPromise = undefined;
});
this.flushAgainPromise = this.flushPromise.then(this.flush).then(() => {
this.flushAgainPromise = undefined;
});
return this.flushAgainPromise;
}
// there is no flush promise or there was but it has finished, so do
@ -286,7 +280,7 @@ class IndexedDBLogStore {
// Returns: a string representing the concatenated logs for this ID.
// Stops adding log fragments when the size exceeds maxSize
function fetchLogs(id: string, maxSize: number): Promise<string> {
async function fetchLogs(id: string, maxSize: number): Promise<string> {
const objectStore = db!
.transaction("logs", "readonly")
.objectStore("logs");
@ -316,7 +310,7 @@ class IndexedDBLogStore {
}
// Returns: A sorted array of log IDs. (newest first)
function fetchLogIds(): Promise<string[]> {
async function fetchLogIds(): Promise<string[]> {
// To gather all the log IDs, query for all records in logslastmod.
const o = db!
.transaction("logslastmod", "readonly")
@ -336,7 +330,7 @@ class IndexedDBLogStore {
});
}
function deleteLogs(id: number): Promise<void> {
async function deleteLogs(id: number): Promise<void> {
return new Promise<void>((resolve, reject) => {
const txn = db!.transaction(["logs", "logslastmod"], "readwrite");
const o = txn.objectStore("logs");
@ -394,7 +388,7 @@ class IndexedDBLogStore {
logger.log("Removing logs: ", removeLogIds);
// Don't await this because it's non-fatal if we can't clean up
// logs.
Promise.all(removeLogIds.map((id) => deleteLogs(id))).then(
Promise.all(removeLogIds.map(async (id) => deleteLogs(id))).then(
() => {
logger.log(`Removed ${removeLogIds.length} old logs.`);
},
@ -432,7 +426,7 @@ class IndexedDBLogStore {
* @return {Promise<T[]>} Resolves to an array of whatever you returned from
* resultMapper.
*/
function selectQuery<T>(
async function selectQuery<T>(
store: IDBObjectStore,
keyRange: IDBKeyRange | undefined,
resultMapper: (cursor: IDBCursorWithValue) => T,
@ -461,7 +455,7 @@ declare global {
// eslint-disable-next-line no-var, camelcase
var mx_rage_logger: ConsoleLogger;
// eslint-disable-next-line no-var, camelcase
var mx_rage_initStoragePromise: Promise<void>;
var mx_rage_initStoragePromise: Promise<void> | undefined;
}
/**
@ -471,7 +465,7 @@ declare global {
* be set up immediately for the logs.
* @return {Promise} Resolves when set up.
*/
export function init(): Promise<void> {
export async function init(): Promise<void> {
global.mx_rage_logger = new ConsoleLogger();
setLogExtension(logger, global.mx_rage_logger.log);
// these are the child/prefixed loggers we want to capture from js-sdk
@ -488,7 +482,7 @@ export function init(): Promise<void> {
* then this no-ops.
* @return {Promise} Resolves when complete.
*/
function tryInitStorage(): Promise<void> {
async function tryInitStorage(): Promise<void> {
if (global.mx_rage_initStoragePromise) {
return global.mx_rage_initStoragePromise;
}

12
src/settings/submit-rageshake.ts
View File

@ -306,10 +306,14 @@ export function useRageshakeRequest(): (
const sendRageshakeRequest = useCallback(
(roomId: string, rageshakeRequestId: string) => {
// @ts-expect-error - org.matrix.rageshake_request is not part of `keyof TimelineEvents` but it is okay to sent a custom event.
client!.sendEvent(roomId, "org.matrix.rageshake_request", {
request_id: rageshakeRequestId,
});
client!
// @ts-expect-error - org.matrix.rageshake_request is not part of `keyof TimelineEvents` but it is okay to sent a custom event.
.sendEvent(roomId, "org.matrix.rageshake_request", {
request_id: rageshakeRequestId,
})
.catch((e) => {
logger.error("Failed to send org.matrix.rageshake_request event", e);
});
},
[client],
);

2
src/state/CallViewModel.ts
View File

@ -299,7 +299,7 @@ export class CallViewModel extends ViewModel {
});
}),
// Then unhold them
]).then(() => Promise.resolve({ unhold: ps })),
]).then(() => ({ unhold: ps })),
);
} else {
return EMPTY;

27
src/useWakeLock.ts
View File

@ -19,19 +19,22 @@ export function useWakeLock(): void {
// The lock is automatically released whenever the window goes invisible,
// so we need to reacquire it on visibility changes
const onVisibilityChange = async (): Promise<void> => {
const onVisibilityChange = (): void => {
if (document.visibilityState === "visible") {
try {
lock = await navigator.wakeLock.request("screen");
// Handle the edge case where this component unmounts before the
// promise resolves
if (!mounted)
lock
.release()
.catch((e) => logger.warn("Can't release wake lock", e));
} catch (e) {
logger.warn("Can't acquire wake lock", e);
}
navigator.wakeLock.request("screen").then(
(newLock) => {
lock = newLock;
// Handle the edge case where this component unmounts before the
// promise resolves
if (!mounted)
lock
.release()
.catch((e) => logger.warn("Can't release wake lock", e));
},
(e) => {
logger.warn("Can't acquire wake lock", e);
},
);
}
};

24
src/utils/matrix.ts
View File

@ -273,18 +273,26 @@ export async function createRoom(
});
// Wait for the room to arrive
await new Promise<void>((resolve, reject) => {
const onRoom = async (room: Room): Promise<void> => {
if (room.roomId === (await createPromise).room_id) {
resolve();
cleanUp();
}
};
const roomId = await new Promise<string>((resolve, reject) => {
createPromise.catch((e) => {
reject(e);
cleanUp();
});
const onRoom = (room: Room): void => {
createPromise.then(
(result) => {
if (room.roomId === result.room_id) {
resolve(room.roomId);
cleanUp();
}
},
(e) => {
logger.error("Failed to wait for the room to arrive", e);
},
);
};
const cleanUp = (): void => {
client.off(ClientEvent.Room, onRoom);
};
@ -306,7 +314,7 @@ export async function createRoom(
}
return {
roomId: result.room_id,
roomId,
alias: e2ee ? undefined : fullAliasFromRoomName(name, client),
encryptionSystem,
};

4
src/utils/media.ts
View File

@ -11,11 +11,11 @@ Please see LICENSE in the repository root for full details.
* @param devices The list of devices to search
* @returns A matching media device or undefined if no matching device was found
*/
export async function findDeviceByName(
export function findDeviceByName(
deviceName: string,
kind: MediaDeviceKind,
devices: MediaDeviceInfo[],
): Promise<string | undefined> {
): string | undefined {
const deviceInfo = devices.find(
(d) => d.kind === kind && d.label === deviceName,
);

18
src/vitest.setup.ts
View File

@ -11,17 +11,21 @@ import posthog from "posthog-js";
import { initReactI18next } from "react-i18next";
import { afterEach, beforeEach } from "vitest";
import { cleanup } from "@testing-library/react";
import { logger } from "matrix-js-sdk/src/logger";
import { Config } from "./config/Config";
// Bare-minimum i18n config
i18n.use(initReactI18next).init({
lng: "en-GB",
fallbackLng: "en-GB",
interpolation: {
escapeValue: false, // React has built-in XSS protections
},
});
i18n
.use(initReactI18next)
.init({
lng: "en-GB",
fallbackLng: "en-GB",
interpolation: {
escapeValue: false, // React has built-in XSS protections
},
})
.catch((e) => logger.warn("Failed to init i18n for testing", e));
Config.initDefault();
posthog.opt_out_capturing();

18
src/widget.ts
View File

@ -158,17 +158,15 @@ export const widget = ((): WidgetHelpers | null => {
false,
);
const clientPromise = new Promise<MatrixClient>((resolve) => {
(async (): Promise<void> => {
// Wait for the config file to be ready (we load very early on so it might not
// be otherwise)
await Config.init();
await client.startClient({ clientWellKnownPollPeriod: 60 * 10 });
resolve(client);
})();
});
const clientPromise = async (): Promise<MatrixClient> => {
// Wait for the config file to be ready (we load very early on so it might not
// be otherwise)
await Config.init();
await client.startClient({ clientWellKnownPollPeriod: 60 * 10 });
return client;
};
return { api, lazyActions, client: clientPromise };
return { api, lazyActions, client: clientPromise() };
} else {
if (import.meta.env.MODE !== "test")
logger.info("No widget API available");

762
yarn.lock
View File

File diff suppressed because it is too large Load Diff