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

Merge pull request #416 from robintown/matroska

Browse Source 
Matroska mode
This commit is contained in:
Robin 2022-08-09 10:01:05 -04:00 committed by GitHub
commit 1dfffce606
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
17 changed files with 337 additions and 140 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
package.json
View File

@ -38,7 +38,8 @@
"classnames": "^2.3.1",
"color-hash": "^2.0.1",
"events": "^3.3.0",
"matrix-js-sdk": "github:matrix-org/matrix-js-sdk#8ba2d257ae24bbed61cd7fe99af081324337161c",
"matrix-js-sdk": "github:matrix-org/matrix-js-sdk#3334c01191bcd82b5243916284c9a08d08fd9795",
"matrix-widget-api": "^1.0.0",
"mermaid": "^8.13.8",
"normalize.css": "^8.0.1",
"pako": "^2.0.4",

75
src/ClientContext.tsx
View File

@ -26,9 +26,14 @@ import React, {
import { useHistory } from "react-router-dom";
import { MatrixClient, ClientEvent } from "matrix-js-sdk/src/client";
import { MatrixEvent } from "matrix-js-sdk/src/models/event";
import { logger } from "matrix-js-sdk/src/logger";
import { ErrorView } from "./FullScreenView";
import { initClient, defaultHomeserver } from "./matrix-utils";
import {
initClient,
initMatroskaClient,
defaultHomeserver,
} from "./matrix-utils";
declare global {
interface Window {
@ -91,40 +96,55 @@ export const ClientProvider: FC<Props> = ({ children }) => {
});
useEffect(() => {
const restore = async (): Promise<
const init = async (): Promise<
Pick<ClientProviderState, "client" | "isPasswordlessUser">
> => {
try {
const session = loadSession();
const query = new URLSearchParams(window.location.search);
const widgetId = query.get("widgetId");
const parentUrl = query.get("parentUrl");
if (session) {
/* eslint-disable camelcase */
const { user_id, device_id, access_token, passwordlessUser } =
session;
if (widgetId && parentUrl) {
// We're inside a widget, so let's engage *Matroska mode*
logger.log("Using a Matroska client");
const client = await initClient(
{
baseUrl: defaultHomeserver,
accessToken: access_token,
userId: user_id,
deviceId: device_id,
},
true
);
/* eslint-enable camelcase */
return {
client: await initMatroskaClient(widgetId, parentUrl),
isPasswordlessUser: false,
};
} else {
// We're running as a standalone application
try {
const session = loadSession();
return { client, isPasswordlessUser: passwordlessUser };
if (session) {
/* eslint-disable camelcase */
const { user_id, device_id, access_token, passwordlessUser } =
session;
logger.log("Using a standalone client");
const client = await initClient(
{
baseUrl: defaultHomeserver,
accessToken: access_token,
userId: user_id,
deviceId: device_id,
},
true
);
/* eslint-enable camelcase */
return { client, isPasswordlessUser: passwordlessUser };
}
return { client: undefined, isPasswordlessUser: false };
} catch (err) {
clearSession();
throw err;
}
return { client: undefined, isPasswordlessUser: false };
} catch (err) {
console.error(err);
clearSession();
throw err;
}
};
restore()
init()
.then(({ client, isPasswordlessUser }) => {
setState({
client,
@ -135,7 +155,8 @@ export const ClientProvider: FC<Props> = ({ children }) => {
error: undefined,
});
})
.catch(() => {
.catch((err) => {
logger.error(err);
setState({
client: undefined,
loading: false,

2
src/Modal.tsx
View File

@ -37,7 +37,7 @@ import { AriaDialogProps } from "@react-types/dialog";
import { ReactComponent as CloseIcon } from "./icons/Close.svg";
import styles from "./Modal.module.css";
interface ModalProps extends OverlayProps, AriaDialogProps {
export interface ModalProps extends OverlayProps, AriaDialogProps {
title: string;
children: ReactNode;
className?: string;

101
src/matrix-utils.ts
View File

@ -5,14 +5,21 @@ import { MemoryStore } from "matrix-js-sdk/src/store/memory";
import { IndexedDBCryptoStore } from "matrix-js-sdk/src/crypto/store/indexeddb-crypto-store";
import { LocalStorageCryptoStore } from "matrix-js-sdk/src/crypto/store/localStorage-crypto-store";
import { MemoryCryptoStore } from "matrix-js-sdk/src/crypto/store/memory-crypto-store";
import { createClient, MatrixClient } from "matrix-js-sdk/src/matrix";
import {
createClient,
createRoomWidgetClient,
MatrixClient,
} from "matrix-js-sdk/src/matrix";
import { ICreateClientOpts } from "matrix-js-sdk/src/matrix";
import { ClientEvent } from "matrix-js-sdk/src/client";
import { EventType } from "matrix-js-sdk/src/@types/event";
import { Visibility, Preset } from "matrix-js-sdk/src/@types/partials";
import { ISyncStateData, SyncState } from "matrix-js-sdk/src/sync";
import { WidgetApi } from "matrix-widget-api";
import { logger } from "matrix-js-sdk/src/logger";
import IndexedDBWorker from "./IndexedDBWorker?worker";
import { getRoomParams } from "./room/useRoomParams";
export const defaultHomeserver =
(import.meta.env.VITE_DEFAULT_HOMESERVER as string) ??
@ -53,7 +60,74 @@ function waitForSync(client: MatrixClient) {
}
/**
* Initialises and returns a new Matrix Client
* Initialises and returns a new widget-API-based Matrix Client.
* @param widgetId The ID of the widget that the app is running inside.
* @param parentUrl The URL of the parent client.
* @returns The MatrixClient instance
*/
export async function initMatroskaClient(
widgetId: string,
parentUrl: string
): Promise<MatrixClient> {
// In this mode, we use a special client which routes all requests through
// the host application via the widget API
const { roomId, userId, deviceId } = getRoomParams();
if (!roomId) throw new Error("Room ID must be supplied");
if (!userId) throw new Error("User ID must be supplied");
if (!deviceId) throw new Error("Device ID must be supplied");
// These are all the event types the app uses
const sendState = [
{ eventType: EventType.GroupCallPrefix },
{ eventType: EventType.GroupCallMemberPrefix, stateKey: userId },
];
const receiveState = [
{ eventType: EventType.RoomMember },
{ eventType: EventType.GroupCallPrefix },
{ eventType: EventType.GroupCallMemberPrefix },
];
const sendRecvToDevice = [
EventType.CallInvite,
EventType.CallCandidates,
EventType.CallAnswer,
EventType.CallHangup,
EventType.CallReject,
EventType.CallSelectAnswer,
EventType.CallNegotiate,
EventType.CallSDPStreamMetadataChanged,
EventType.CallSDPStreamMetadataChangedPrefix,
EventType.CallReplaces,
"org.matrix.call_duplicate_session",
];
// Since all data should be coming from the host application, there's no
// need to persist anything, and therefore we can use the default stores
// We don't even need to set up crypto
const client = createRoomWidgetClient(
new WidgetApi(widgetId, new URL(parentUrl).origin),
{
sendState,
receiveState,
sendToDevice: sendRecvToDevice,
receiveToDevice: sendRecvToDevice,
turnServers: true,
},
roomId,
{
baseUrl: "",
userId,
deviceId,
timelineSupport: true,
}
);
await client.startClient();
return client;
}
/**
* Initialises and returns a new standalone Matrix Client.
* If true is passed for the 'restore' parameter, a check will be made
* to ensure that corresponding crypto data is stored and recovered.
* If the check fails, CryptoStoreIntegrityError will be thrown.
@ -127,16 +201,13 @@ export async function initClient(
storeOpts.cryptoStore = new MemoryCryptoStore();
}
// XXX: we read from the URL search params in RoomPage too:
// XXX: we read from the room params in RoomPage too:
// it would be much better to read them in one place and pass
// the values around, but we initialise the matrix client in
// many different places so we'd have to pass it into all of
// them.
const params = new URLSearchParams(window.location.search);
// disable e2e only if enableE2e=false is given
const enableE2e = params.get("enableE2e") !== "false";
if (!enableE2e) {
const { e2eEnabled } = getRoomParams();
if (!e2eEnabled) {
logger.info("Disabling E2E: group call signalling will NOT be encrypted.");
}
@ -144,10 +215,10 @@ export async function initClient(
...storeOpts,
...clientOptions,
useAuthorizationHeader: true,
// Use a relatively low timeout for API calls: this is a realtime application
// Use a relatively low timeout for API calls: this is a realtime app
// so we don't want API calls taking ages, we'd rather they just fail.
localTimeoutMs: 5000,
useE2eForGroupCall: enableE2e,
useE2eForGroupCall: e2eEnabled,
});
try {
@ -254,17 +325,17 @@ export async function createRoom(
return [fullAliasFromRoomName(name, client), result.room_id];
}
export function getRoomUrl(roomId: string): string {
if (roomId.startsWith("#")) {
const [localPart, host] = roomId.replace("#", "").split(":");
export function getRoomUrl(roomIdOrAlias: string): string {
if (roomIdOrAlias.startsWith("#")) {
const [localPart, host] = roomIdOrAlias.replace("#", "").split(":");
if (host !== defaultHomeserverHost) {
return `${window.location.protocol}//${window.location.host}/room/${roomId}`;
return `${window.location.protocol}//${window.location.host}/room/${roomIdOrAlias}`;
} else {
return `${window.location.protocol}//${window.location.host}/${localPart}`;
}
} else {
return `${window.location.protocol}//${window.location.host}/room/${roomId}`;
return `${window.location.protocol}//${window.location.host}/room/#?roomId=${roomIdOrAlias}`;
}
}

6
src/room/GroupCallLoader.tsx
View File

@ -23,7 +23,7 @@ import { usePageTitle } from "../usePageTitle";
interface Props {
client: MatrixClient;
roomId: string;
roomIdOrAlias: string;
viaServers: string[];
children: (groupCall: GroupCall) => ReactNode;
createPtt: boolean;
@ -31,14 +31,14 @@ interface Props {
export function GroupCallLoader({
client,
roomId,
roomIdOrAlias,
viaServers,
children,
createPtt,
}: Props): JSX.Element {
const { loading, error, groupCall } = useLoadGroupCall(
client,
roomId,
roomIdOrAlias,
viaServers,
createPtt
);

10
src/room/GroupCallView.tsx
View File

@ -37,14 +37,14 @@ interface Props {
client: MatrixClient;
isPasswordlessUser: boolean;
isEmbedded: boolean;
roomId: string;
roomIdOrAlias: string;
groupCall: GroupCall;
}
export function GroupCallView({
client,
isPasswordlessUser,
isEmbedded,
roomId,
roomIdOrAlias,
groupCall,
}: Props) {
const {
@ -101,7 +101,7 @@ export function GroupCallView({
return (
<PTTCallView
client={client}
roomId={roomId}
roomIdOrAlias={roomIdOrAlias}
roomName={groupCall.room.name}
avatarUrl={avatarUrl}
groupCall={groupCall}
@ -129,7 +129,7 @@ export function GroupCallView({
isScreensharing={isScreensharing}
localScreenshareFeed={localScreenshareFeed}
screenshareFeeds={screenshareFeeds}
roomId={roomId}
roomIdOrAlias={roomIdOrAlias}
unencryptedEventsFromUsers={unencryptedEventsFromUsers}
/>
);
@ -164,7 +164,7 @@ export function GroupCallView({
localVideoMuted={localVideoMuted}
toggleLocalVideoMuted={toggleLocalVideoMuted}
toggleMicrophoneMuted={toggleMicrophoneMuted}
roomId={roomId}
roomIdOrAlias={roomIdOrAlias}
isEmbedded={isEmbedded}
/>
);

8
src/room/InCallView.tsx
View File

@ -71,7 +71,7 @@ interface Props {
isScreensharing: boolean;
screenshareFeeds: CallFeed[];
localScreenshareFeed: CallFeed;
roomId: string;
roomIdOrAlias: string;
unencryptedEventsFromUsers: Set<string>;
}
@ -99,7 +99,7 @@ export function InCallView({
isScreensharing,
screenshareFeeds,
localScreenshareFeed,
roomId,
roomIdOrAlias,
unencryptedEventsFromUsers,
}: Props) {
usePreventScroll();
@ -260,7 +260,7 @@ export function InCallView({
{!fullscreenParticipant && (
<OverflowMenu
inCall
roomId={roomId}
roomIdOrAlias={roomIdOrAlias}
groupCall={groupCall}
showInvite={true}
feedbackModalState={feedbackModalState}
@ -277,7 +277,7 @@ export function InCallView({
{rageshakeRequestModalState.isOpen && (
<RageshakeRequestModal
{...rageshakeRequestModalProps}
roomId={roomId}
roomIdOrAlias={roomIdOrAlias}
/>
)}
</div>

43
src/room/InviteModal.tsx
View File

@ -14,31 +14,30 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import React from "react";
import React, { FC } from "react";
import { Modal, ModalContent } from "../Modal";
import { Modal, ModalContent, ModalProps } from "../Modal";
import { CopyButton } from "../button";
import { getRoomUrl } from "../matrix-utils";
import styles from "./InviteModal.module.css";
export function InviteModal({
roomId,
...rest
}: {
roomId: string;
[x: string]: unknown;
}) {
return (
<Modal
title="Invite People"
isDismissable
className={styles.inviteModal}
{...rest}
>
<ModalContent>
<p>Copy and share this meeting link</p>
<CopyButton className={styles.copyButton} value={getRoomUrl(roomId)} />
</ModalContent>
</Modal>
);
interface Props extends Omit<ModalProps, "title" | "children"> {
roomIdOrAlias: string;
}
export const InviteModal: FC<Props> = ({ roomIdOrAlias, ...rest }) => (
<Modal
title="Invite People"
isDismissable
className={styles.inviteModal}
{...rest}
>
<ModalContent>
<p>Copy and share this meeting link</p>
<CopyButton
className={styles.copyButton}
value={getRoomUrl(roomIdOrAlias)}
/>
</ModalContent>
</Modal>
);

8
src/room/LobbyView.tsx
View File

@ -45,7 +45,7 @@ interface Props {
toggleLocalVideoMuted: () => void;
toggleMicrophoneMuted: () => void;
localVideoMuted: boolean;
roomId: string;
roomIdOrAlias: string;
isEmbedded: boolean;
}
export function LobbyView({
@ -61,7 +61,7 @@ export function LobbyView({
localVideoMuted,
toggleLocalVideoMuted,
toggleMicrophoneMuted,
roomId,
roomIdOrAlias,
isEmbedded,
}: Props) {
const { stream } = useCallFeed(localCallFeed);
@ -115,7 +115,7 @@ export function LobbyView({
<VideoPreview
state={state}
client={client}
roomId={roomId}
roomIdOrAlias={roomIdOrAlias}
microphoneMuted={microphoneMuted}
localVideoMuted={localVideoMuted}
toggleLocalVideoMuted={toggleLocalVideoMuted}
@ -136,7 +136,7 @@ export function LobbyView({
<Body>Or</Body>
<CopyButton
variant="secondaryCopy"
value={getRoomUrl(roomId)}
value={getRoomUrl(roomIdOrAlias)}
className={styles.copyButton}
copiedMessage="Call link copied"
>

6
src/room/OverflowMenu.tsx
View File

@ -32,7 +32,7 @@ import { InviteModal } from "./InviteModal";
import { TooltipTrigger } from "../Tooltip";
import { FeedbackModal } from "./FeedbackModal";
interface Props {
roomId: string;
roomIdOrAlias: string;
inCall: boolean;
groupCall: GroupCall;
showInvite: boolean;
@ -43,7 +43,7 @@ interface Props {
};
}
export function OverflowMenu({
roomId,
roomIdOrAlias,
inCall,
groupCall,
showInvite,
@ -119,7 +119,7 @@ export function OverflowMenu({
</PopoverMenuTrigger>
{settingsModalState.isOpen && <SettingsModal {...settingsModalProps} />}
{inviteModalState.isOpen && (
<InviteModal roomId={roomId} {...inviteModalProps} />
<InviteModal roomIdOrAlias={roomIdOrAlias} {...inviteModalProps} />
)}
{feedbackModalState.isOpen && (
<FeedbackModal

8
src/room/PTTCallView.tsx
View File

@ -87,7 +87,7 @@ function getPromptText(
interface Props {
client: MatrixClient;
roomId: string;
roomIdOrAlias: string;
roomName: string;
avatarUrl: string;
groupCall: GroupCall;
@ -99,7 +99,7 @@ interface Props {
export const PTTCallView: React.FC<Props> = ({
client,
roomId,
roomIdOrAlias,
roomName,
avatarUrl,
groupCall,
@ -205,7 +205,7 @@ export const PTTCallView: React.FC<Props> = ({
<div className={styles.footer}>
<OverflowMenu
inCall
roomId={roomId}
roomIdOrAlias={roomIdOrAlias}
groupCall={groupCall}
showInvite={false}
feedbackModalState={feedbackModalState}
@ -282,7 +282,7 @@ export const PTTCallView: React.FC<Props> = ({
</div>
{inviteModalState.isOpen && showControls && (
<InviteModal roomId={roomId} {...inviteModalProps} />
<InviteModal roomIdOrAlias={roomIdOrAlias} {...inviteModalProps} />
)}
</div>
);

25
src/room/RageshakeRequestModal.tsx
View File

@ -14,24 +14,25 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import React, { useEffect } from "react";
import React, { FC, useEffect } from "react";
import { Modal, ModalContent } from "../Modal";
import { Modal, ModalContent, ModalProps } from "../Modal";
import { Button } from "../button";
import { FieldRow, ErrorMessage } from "../input/Input";
import { useSubmitRageshake } from "../settings/submit-rageshake";
import { Body } from "../typography/Typography";
export function RageshakeRequestModal({
rageshakeRequestId,
roomId,
...rest
}: {
interface Props extends Omit<ModalProps, "title" | "children"> {
rageshakeRequestId: string;
roomId: string;
roomIdOrAlias: string;
onClose: () => void;
[x: string]: unknown;
}) {
}
export const RageshakeRequestModal: FC<Props> = ({
rageshakeRequestId,
roomIdOrAlias,
...rest
}) => {
const { submitRageshake, sending, sent, error } = useSubmitRageshake();
useEffect(() => {
@ -53,7 +54,7 @@ export function RageshakeRequestModal({
submitRageshake({
sendLogs: true,
rageshakeRequestId,
roomId,
roomId: roomIdOrAlias, // Possibly not a room ID, but oh well
})
}
disabled={sending}
@ -69,4 +70,4 @@ export function RageshakeRequestModal({
</ModalContent>
</Modal>
);
}
};

31
src/room/RoomPage.tsx
View File

@ -1,5 +1,5 @@
/*
Copyright 2021 New Vector Ltd
Copyright 2021-2022 New Vector Ltd
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
@ -14,33 +14,26 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import React, { useEffect, useMemo, useState } from "react";
import { useLocation, useParams } from "react-router-dom";
import React, { FC, useEffect, useState } from "react";
import { useClient } from "../ClientContext";
import { ErrorView, LoadingView } from "../FullScreenView";
import { RoomAuthView } from "./RoomAuthView";
import { GroupCallLoader } from "./GroupCallLoader";
import { GroupCallView } from "./GroupCallView";
import { useRoomParams } from "./useRoomParams";
import { MediaHandlerProvider } from "../settings/useMediaHandler";
import { useRegisterPasswordlessUser } from "../auth/useRegisterPasswordlessUser";
export function RoomPage() {
export const RoomPage: FC = () => {
const { loading, isAuthenticated, error, client, isPasswordlessUser } =
useClient();
const { roomId: maybeRoomId } = useParams();
const { hash, search }: { hash: string; search: string } = useLocation();
const [viaServers, isEmbedded, isPtt, displayName] = useMemo(() => {
const params = new URLSearchParams(search);
return [
params.getAll("via"),
params.has("embed"),
params.get("ptt") === "true",
params.get("displayName"),
];
}, [search]);
const roomId = (maybeRoomId || hash || "").toLowerCase();
const { roomAlias, roomId, viaServers, isEmbedded, isPtt, displayName } =
useRoomParams();
const roomIdOrAlias = roomId ?? roomAlias;
if (!roomIdOrAlias) throw new Error("No room specified");
const { registerPasswordlessUser } = useRegisterPasswordlessUser();
const [isRegistering, setIsRegistering] = useState(false);
@ -76,14 +69,14 @@ export function RoomPage() {
<MediaHandlerProvider client={client}>
<GroupCallLoader
client={client}
roomId={roomId}
roomIdOrAlias={roomIdOrAlias}
viaServers={viaServers}
createPtt={isPtt}
>
{(groupCall) => (
<GroupCallView
client={client}
roomId={roomId}
roomIdOrAlias={roomIdOrAlias}
groupCall={groupCall}
isPasswordlessUser={isPasswordlessUser}
isEmbedded={isEmbedded}
@ -92,4 +85,4 @@ export function RoomPage() {
</GroupCallLoader>
</MediaHandlerProvider>
);
}
};

6
src/room/VideoPreview.tsx
View File

@ -32,7 +32,7 @@ import { useModalTriggerState } from "../Modal";
interface Props {
client: MatrixClient;
state: GroupCallState;
roomId: string;
roomIdOrAlias: string;
microphoneMuted: boolean;
localVideoMuted: boolean;
toggleLocalVideoMuted: () => void;
@ -43,7 +43,7 @@ interface Props {
export function VideoPreview({
client,
state,
roomId,
roomIdOrAlias,
microphoneMuted,
localVideoMuted,
toggleLocalVideoMuted,
@ -93,7 +93,7 @@ export function VideoPreview({
onPress={toggleLocalVideoMuted}
/>
<OverflowMenu
roomId={roomId}
roomIdOrAlias={roomIdOrAlias}
feedbackModalState={feedbackModalState}
feedbackModalProps={feedbackModalProps}
inCall={false}

93
src/room/useRoomParams.ts Normal file
View File

@ -0,0 +1,93 @@
/*
Copyright 2022 New Vector Ltd
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
import { useMemo } from "react";
import { useLocation } from "react-router-dom";
export interface RoomParams {
roomAlias: string | null;
roomId: string | null;
viaServers: string[];
// Whether the app is running in embedded mode, and should keep the user
// confined to the current room
isEmbedded: boolean;
// Whether to start a walkie-talkie call instead of a video call
isPtt: boolean;
// Whether to use end-to-end encryption
e2eEnabled: boolean;
// The user's ID (only used in Matroska mode)
userId: string | null;
// The display name to use for auto-registration
displayName: string | null;
// The device's ID (only used in Matroska mode)
deviceId: string | null;
}
/**
* Gets the room parameters for the current URL.
* @param {string} query The URL query string
* @param {string} fragment The URL fragment string
* @returns {RoomParams} The room parameters encoded in the URL
*/
export const getRoomParams = (
query: string = window.location.search,
fragment: string = window.location.hash
): RoomParams => {
const fragmentQueryStart = fragment.indexOf("?");
const fragmentParams = new URLSearchParams(
fragmentQueryStart === -1 ? "" : fragment.substring(fragmentQueryStart)
);
const queryParams = new URLSearchParams(query);
// Normally, room params should be encoded in the fragment so as to avoid
// leaking them to the server. However, we also check the normal query
// string for backwards compatibility with versions that only used that.
const hasParam = (name: string): boolean =>
fragmentParams.has(name) || queryParams.has(name);
const getParam = (name: string): string | null =>
fragmentParams.get(name) ?? queryParams.get(name);
const getAllParams = (name: string): string[] => [
...fragmentParams.getAll(name),
...queryParams.getAll(name),
];
// The part of the fragment before the ?
const fragmentRoute =
fragmentQueryStart === -1
? fragment
: fragment.substring(0, fragmentQueryStart);
return {
roomAlias: fragmentRoute.length > 1 ? fragmentRoute : null,
roomId: getParam("roomId"),
viaServers: getAllParams("via"),
isEmbedded: hasParam("embed"),
isPtt: hasParam("ptt"),
e2eEnabled: getParam("enableE2e") !== "false", // Defaults to true
userId: getParam("userId"),
displayName: getParam("displayName"),
deviceId: getParam("deviceId"),
};
};
/**
* Hook to simplify use of getRoomParams.
* @returns {RoomParams} The room parameters for the current URL
*/
export const useRoomParams = (): RoomParams => {
const { hash, search } = useLocation();
return useMemo(() => getRoomParams(search, hash), [search, hash]);
};

6
vite.config.js
View File

@ -41,6 +41,12 @@ export default defineConfig(({ mode }) => {
},
},
resolve: {
alias: {
// matrix-widget-api has its transpiled lib/index.js as its entry point,
// which Vite for some reason refuses to work with, so we point it to
// src/index.ts instead
"matrix-widget-api": "matrix-widget-api/src/index.ts",
},
dedupe: [
"react",
"react-dom",

46
yarn.lock
View File

@ -2754,6 +2754,11 @@
resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.51.tgz#cfd70924a25a3fd32b218e5e420e6897e1ac4f40"
integrity sha512-CuPgU6f3eT/XgKKPqKd/gLZV1Xmvf1a2R5POBOGQa6uv82xpls89HU5zKeVoyR8XzHd1RGNOlQlvUe3CFkjWNQ==
"@types/events@^3.0.0":
version "3.0.0"
resolved "https://registry.yarnpkg.com/@types/events/-/events-3.0.0.tgz#2862f3f58a9a7f7c3e78d79f130dd4d71c25c2a7"
integrity sha512-EaObqwIvayI5a8dCzhFrjKzVwKLxjoG9T6Ppd5CEo07LRKfQ8Yokw54r5+Wq7FaBQ+yXRvQAYPrHwya1/UFt9g==
"@types/glob@*", "@types/glob@^7.1.1", "@types/glob@^7.1.3":
version "7.2.0"
resolved "https://registry.yarnpkg.com/@types/glob/-/glob-7.2.0.tgz#bc1b5bf3aa92f25bd5dd39f35c57361bdce5b2eb"
@ -3863,12 +3868,10 @@ balanced-match@^1.0.0:
resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee"
integrity sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==
base-x@^3.0.2:
version "3.0.9"
resolved "https://registry.yarnpkg.com/base-x/-/base-x-3.0.9.tgz#6349aaabb58526332de9f60995e548a53fe21320"
integrity sha512-H7JU6iBHTal1gp56aKoaa//YUxEaAOUiydvrV/pILqIHXTtqxSkATOnDA2u+jZ/61sD+L/412+7kzXRtWukhpQ==
dependencies:
safe-buffer "^5.0.1"
base-x@^4.0.0:
version "4.0.0"
resolved "https://registry.yarnpkg.com/base-x/-/base-x-4.0.0.tgz#d0e3b7753450c73f8ad2389b5c018a4af7b2224a"
integrity sha512-FuwxlW4H5kh37X/oW59pwTzzTKRzfrrQwhmyspRM7swOEZcHtDZSCt45U6oKgtuFE+WYPblePMVIPR4RZrh/hw==
base16@^1.0.0:
version "1.0.0"
@ -4105,12 +4108,12 @@ browserslist@^4.12.0, browserslist@^4.14.5, browserslist@^4.20.2, browserslist@^
node-releases "^2.0.5"
update-browserslist-db "^1.0.4"
bs58@^4.0.1:
version "4.0.1"
resolved "https://registry.yarnpkg.com/bs58/-/bs58-4.0.1.tgz#be161e76c354f6f788ae4071f63f34e8c4f0a42a"
integrity sha512-Ok3Wdf5vOIlBrgCvTq96gBkJw+JUEzdBgyaza5HLtPm7yTHkjRy8+JzNyHF7BHa0bNWOQIp3m5YF0nnFcOIKLw==
bs58@^5.0.0:
version "5.0.0"
resolved "https://registry.yarnpkg.com/bs58/-/bs58-5.0.0.tgz#865575b4d13c09ea2a84622df6c8cbeb54ffc279"
integrity sha512-r+ihvQJvahgYT50JD05dyJNKlmmSlMoOGwn1lCcEzanPglg7TxYjioQUYehQ9mAR/+hOSd2jRc/Z2y5UxBymvQ==
dependencies:
base-x "^3.0.2"
base-x "^4.0.0"
buffer-from@^1.0.0:
version "1.1.2"
@ -8387,24 +8390,33 @@ matrix-events-sdk@^0.0.1-beta.7:
resolved "https://registry.yarnpkg.com/matrix-events-sdk/-/matrix-events-sdk-0.0.1-beta.7.tgz#5ffe45eba1f67cc8d7c2377736c728b322524934"
integrity sha512-9jl4wtWanUFSy2sr2lCjErN/oC8KTAtaeaozJtrgot1JiQcEI4Rda9OLgQ7nLKaqb4Z/QUx/fR3XpDzm5Jy1JA==
"matrix-js-sdk@github:matrix-org/matrix-js-sdk#8ba2d257ae24bbed61cd7fe99af081324337161c":
version "19.0.0"
resolved "https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/8ba2d257ae24bbed61cd7fe99af081324337161c"
"matrix-js-sdk@github:matrix-org/matrix-js-sdk#3334c01191bcd82b5243916284c9a08d08fd9795":
version "19.2.0"
resolved "https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/3334c01191bcd82b5243916284c9a08d08fd9795"
dependencies:
"@babel/runtime" "^7.12.5"
"@types/sdp-transform" "^2.4.5"
another-json "^0.2.0"
browser-request "^0.3.3"
bs58 "^4.0.1"
bs58 "^5.0.0"
content-type "^1.0.4"
loglevel "^1.7.1"
matrix-events-sdk "^0.0.1-beta.7"
p-retry "^4.5.0"
matrix-widget-api "^1.0.0"
p-retry "4"
qs "^6.9.6"
request "^2.88.2"
sdp-transform "^2.14.1"
unhomoglyph "^1.0.6"
matrix-widget-api@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/matrix-widget-api/-/matrix-widget-api-1.0.0.tgz#0cde6839cca66ad817ab12aca3490ccc8bac97d1"
integrity sha512-cy8p/8EteRPTFIAw7Q9EgPUJc2jD19ZahMR8bMKf2NkILDcjuPMC0UWnsJyB3fSnlGw+VbGepttRpULM31zX8Q==
dependencies:
"@types/events" "^3.0.0"
events "^3.2.0"
md5.js@^1.3.4:
version "1.3.5"
resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.5.tgz#b5d07b8e3216e3e27cd728d72f70d1e6a342005f"
@ -9189,7 +9201,7 @@ p-map@^4.0.0:
dependencies:
aggregate-error "^3.0.0"
p-retry@^4.5.0:
p-retry@4:
version "4.6.2"
resolved "https://registry.yarnpkg.com/p-retry/-/p-retry-4.6.2.tgz#9baae7184057edd4e17231cee04264106e092a16"
integrity sha512-312Id396EbJdvRONlngUx0NydfrIQ5lsYu0znKVUzVvArzEIt08V1qhtyESbGVd1FGX7UKtiFp5uwKZdM8wIuQ==