rzerres/element-call
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'livekit' into eslint-upgrade

Browse Source
This commit is contained in:
Robin
2023-10-11 10:30:57 -04:00
parent a7624806b2 17be0578bc
commit cc6f1f8631
100 changed files with 2600 additions and 9682 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
src/App.tsx
View File

@@ -30,8 +30,6 @@ import { LoginPage } from "./auth/LoginPage";
import { RegisterPage } from "./auth/RegisterPage";
import { RoomPage } from "./room/RoomPage";
import { ClientProvider } from "./ClientContext";
import { SequenceDiagramViewerPage } from "./SequenceDiagramViewerPage";
import { InspectorContextProvider } from "./room/GroupCallInspector";
import { CrashView, LoadingView } from "./FullScreenView";
import { DisconnectedBanner } from "./DisconnectedBanner";
import { Initializer } from "./initializer";
@@ -83,30 +81,25 @@ export const App: FC<AppProps> = ({ history }) => {
<Suspense fallback={null}>
<ClientProvider>
<MediaDevicesProvider>
<InspectorContextProvider>
<Sentry.ErrorBoundary fallback={errorPage}>
<OverlayProvider>
<DisconnectedBanner />
<Switch>
<SentryRoute exact path="/">
<HomePage />
</SentryRoute>
<SentryRoute exact path="/login">
<LoginPage />
</SentryRoute>
<SentryRoute exact path="/register">
<RegisterPage />
</SentryRoute>
<SentryRoute path="/inspector">
<SequenceDiagramViewerPage />
</SentryRoute>
<SentryRoute path="*">
<RoomPage />
</SentryRoute>
</Switch>
</OverlayProvider>
</Sentry.ErrorBoundary>
</InspectorContextProvider>
<Sentry.ErrorBoundary fallback={errorPage}>
<OverlayProvider>
<DisconnectedBanner />
<Switch>
<SentryRoute exact path="/">
<HomePage />
</SentryRoute>
<SentryRoute exact path="/login">
<LoginPage />
</SentryRoute>
<SentryRoute exact path="/register">
<RegisterPage />
</SentryRoute>
<SentryRoute path="*">
<RoomPage />
</SentryRoute>
</Switch>
</OverlayProvider>
</Sentry.ErrorBoundary>
</MediaDevicesProvider>
</ClientProvider>
</Suspense>

2
src/E2EEBanner.tsx
View File

@@ -19,7 +19,7 @@ import { FC } from "react";
import { Banner } from "./Banner";
import styles from "./E2EEBanner.module.css";
import { ReactComponent as LockOffIcon } from "./icons/LockOff.svg";
import LockOffIcon from "./icons/LockOff.svg?react";
import { useEnableE2EE } from "./settings/useSetting";
export const E2EEBanner: FC = () => {

66
src/Facepile.tsx
View File

@@ -1,66 +0,0 @@
/*
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 { FC, HTMLAttributes } from "react";
import { MatrixClient } from "matrix-js-sdk/src/client";
import { RoomMember } from "matrix-js-sdk/src/models/room-member";
import { useTranslation } from "react-i18next";
import { AvatarStack } from "@vector-im/compound-web";
import { Avatar, Size } from "./Avatar";
interface Props extends HTMLAttributes<HTMLDivElement> {
className?: string;
client: MatrixClient;
members: RoomMember[];
max?: number;
size?: Size | number;
}
export const Facepile: FC<Props> = ({
className,
client,
members,
max = 3,
size = Size.XS,
...rest
}) => {
const { t } = useTranslation();
const displayedMembers = members.slice(0, max);
return (
<AvatarStack
title={t("{{names, list(style: short;)}}", {
list: displayedMembers.map((m) => m.name),
})}
{...rest}
>
{displayedMembers.map((member, i) => {
const avatarUrl = member.getMxcAvatarUrl();
return (
<Avatar
key={i}
id={member.userId}
name={member.name}
size={size}
src={avatarUrl ?? undefined}
/>
);
})}
</AvatarStack>
);
};

3
src/FullScreenView.tsx
View File

@@ -19,6 +19,7 @@ import { useLocation } from "react-router-dom";
import classNames from "classnames";
import { Trans, useTranslation } from "react-i18next";
import * as Sentry from "@sentry/react";
import { logger } from "matrix-js-sdk/src/logger";
import { Header, HeaderLogo, LeftNav, RightNav } from "./Header";
import { LinkButton, Button } from "./button";
@@ -60,7 +61,7 @@ export const ErrorView: FC<ErrorViewProps> = ({ error }) => {
const { t } = useTranslation();
useEffect(() => {
console.error(error);
logger.error(error);
Sentry.captureException(error);
}, [error]);

1
src/Header.module.css
View File

@@ -111,7 +111,6 @@ limitations under the License.
display: flex;
align-items: center;
gap: var(--cpd-space-1-5x);
font: var(--cpd-font-body-sm-medium);
}
@media (min-width: 800px) {

25
src/Header.tsx
View File

@@ -18,13 +18,12 @@ import classNames from "classnames";
import { FC, HTMLAttributes, ReactNode } from "react";
import { Link } from "react-router-dom";
import { useTranslation } from "react-i18next";
import { MatrixClient, RoomMember } from "matrix-js-sdk/src/matrix";
import { Heading } from "@vector-im/compound-web";
import { Heading, Text } from "@vector-im/compound-web";
import UserProfileIcon from "@vector-im/compound-design-tokens/icons/user-profile.svg?react";
import styles from "./Header.module.css";
import { ReactComponent as Logo } from "./icons/Logo.svg";
import Logo from "./icons/Logo.svg?react";
import { Avatar, Size } from "./Avatar";
import { Facepile } from "./Facepile";
import { EncryptionLock } from "./room/EncryptionLock";
import { useMediaQuery } from "./useMediaQuery";
@@ -118,8 +117,7 @@ interface RoomHeaderInfoProps {
name: string;
avatarUrl: string | null;
encrypted: boolean;
participants: RoomMember[];
client: MatrixClient;
participantCount: number;
}
export const RoomHeaderInfo: FC<RoomHeaderInfoProps> = ({
@@ -127,8 +125,7 @@ export const RoomHeaderInfo: FC<RoomHeaderInfoProps> = ({
name,
avatarUrl,
encrypted,
participants,
client,
participantCount,
}) => {
const { t } = useTranslation();
const size = useMediaQuery("(max-width: 550px)") ? "sm" : "lg";
@@ -153,10 +150,16 @@ export const RoomHeaderInfo: FC<RoomHeaderInfoProps> = ({
</Heading>
<EncryptionLock encrypted={encrypted} />
</div>
{participants.length > 0 && (
{participantCount > 0 && (
<div className={styles.participantsLine}>
<Facepile client={client} members={participants} size={20} />
{t("{{count, number}}", { count: participants.length })}
<UserProfileIcon
width={20}
height={20}
aria-label={t("Participants")}
/>
<Text as="span" size="sm" weight="medium">
{t("{{count, number}}", { count: participantCount })}
</Text>
</div>
)}
</div>

78
src/Modal.module.css
View File

@@ -14,96 +14,18 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.overlay {
position: fixed;
z-index: 100;
inset: 0;
background: rgba(3, 12, 27, 0.528);
}
@keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.dialogOverlay[data-state="open"] {
animation: fade-in 200ms;
}
@keyframes fade-out {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.dialogOverlay[data-state="closed"] {
animation: fade-out 130ms;
}
.modal {
position: fixed;
z-index: 101;
display: flex;
flex-direction: column;
}
.dialog {
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
box-sizing: border-box;
inline-size: 520px;
max-inline-size: 90%;
max-block-size: 600px;
}
@keyframes zoom-in {
from {
opacity: 0;
transform: translate(-50%, -50%) scale(80%);
}
to {
opacity: 1;
transform: translate(-50%, -50%) scale(100%);
}
}
@keyframes zoom-out {
from {
opacity: 1;
transform: translate(-50%, -50%) scale(100%);
}
to {
opacity: 0;
transform: translate(-50%, -50%) scale(80%);
}
}
.dialog[data-state="open"] {
animation: zoom-in 200ms;
}
.dialog[data-state="closed"] {
animation: zoom-out 130ms;
}
@media (prefers-reduced-motion) {
.dialog[data-state="open"] {
animation-name: fade-in;
}
.dialog[data-state="closed"] {
animation-name: fade-out;
}
}
.content {
display: flex;
flex-direction: column;

22
src/Modal.tsx
View File

@@ -27,11 +27,12 @@ import {
} from "@radix-ui/react-dialog";
import { Drawer } from "vaul";
import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
import { ReactComponent as CloseIcon } from "@vector-im/compound-design-tokens/icons/close.svg";
import CloseIcon from "@vector-im/compound-design-tokens/icons/close.svg?react";
import classNames from "classnames";
import { Heading } from "@vector-im/compound-web";
import styles from "./Modal.module.css";
import overlayStyles from "./Overlay.module.css";
import { useMediaQuery } from "./useMediaQuery";
import { Glass } from "./Glass";
@@ -85,9 +86,14 @@ export const Modal: FC<Props> = ({
dismissible={onDismiss !== undefined}
>
<Drawer.Portal>
<Drawer.Overlay className={styles.overlay} />
<Drawer.Overlay className={classNames(overlayStyles.bg)} />
<Drawer.Content
className={classNames(className, styles.modal, styles.drawer)}
className={classNames(
className,
overlayStyles.overlay,
styles.modal,
styles.drawer
)}
{...rest}
>
<div className={styles.content}>
@@ -108,12 +114,18 @@ export const Modal: FC<Props> = ({
<DialogRoot open={open} onOpenChange={onOpenChange}>
<DialogPortal>
<DialogOverlay
className={classNames(styles.overlay, styles.dialogOverlay)}
className={classNames(overlayStyles.bg, overlayStyles.animate)}
/>
<DialogContent asChild {...rest}>
<Glass
frosted
className={classNames(className, styles.modal, styles.dialog)}
className={classNames(
className,
overlayStyles.overlay,
overlayStyles.animate,
styles.modal,
styles.dialog
)}
>
<div className={styles.content}>
<div className={styles.header}>

99
src/Overlay.module.css Normal file
View File

@@ -0,0 +1,99 @@
/*
Copyright 2023 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.
*/
.bg {
position: fixed;
z-index: 100;
inset: 0;
background: rgba(3, 12, 27, 0.528);
}
@keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.bg.animate[data-state="open"] {
animation: fade-in 200ms;
}
@keyframes fade-out {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.bg.animate[data-state="closed"] {
animation: fade-out 130ms;
}
.overlay {
position: fixed;
z-index: 101;
}
.overlay.animate {
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
@keyframes zoom-in {
from {
opacity: 0;
transform: translate(-50%, -50%) scale(80%);
}
to {
opacity: 1;
transform: translate(-50%, -50%) scale(100%);
}
}
@keyframes zoom-out {
from {
opacity: 1;
transform: translate(-50%, -50%) scale(100%);
}
to {
opacity: 0;
transform: translate(-50%, -50%) scale(80%);
}
}
.overlay.animate[data-state="open"] {
animation: zoom-in 200ms;
}
.overlay.animate[data-state="closed"] {
animation: zoom-out 130ms;
}
@media (prefers-reduced-motion) {
.overlay.animate[data-state="open"] {
animation-name: fade-in;
}
.overlay.animate[data-state="closed"] {
animation-name: fade-out;
}
}

72
src/SequenceDiagramViewerPage.tsx
View File

@@ -1,72 +0,0 @@
/*
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 { FC, useCallback, useState } from "react";
import { useTranslation } from "react-i18next";
import {
SequenceDiagramViewer,
SequenceDiagramMatrixEvent,
} from "./room/GroupCallInspector";
import { FieldRow, InputField } from "./input/Input";
import { usePageTitle } from "./usePageTitle";
interface DebugLog {
localUserId: string;
eventsByUserId: { [userId: string]: SequenceDiagramMatrixEvent[] };
remoteUserIds: string[];
}
export const SequenceDiagramViewerPage: FC = () => {
const { t } = useTranslation();
usePageTitle(t("Inspector"));
const [debugLog, setDebugLog] = useState<DebugLog>();
const [selectedUserId, setSelectedUserId] = useState<string>();
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
const onChangeDebugLog = useCallback((e) => {
if (e.target.files && e.target.files.length > 0) {
e.target.files[0].text().then((text: string) => {
setDebugLog(JSON.parse(text));
});
}
}, []);
return (
<div style={{ marginTop: 20 }}>
<FieldRow>
<InputField
type="file"
id="debugLog"
name="debugLog"
label={t("Debug log")}
onChange={onChangeDebugLog}
/>
</FieldRow>
{debugLog && selectedUserId && (
<SequenceDiagramViewer
localUserId={debugLog.localUserId}
selectedUserId={selectedUserId}
onSelectUserId={setSelectedUserId}
remoteUserIds={debugLog.remoteUserIds}
events={debugLog.eventsByUserId[selectedUserId]}
/>
)}
</div>
);
};

38
src/Toast.module.css Normal file
View File

@@ -0,0 +1,38 @@
/*
Copyright 2023 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.
*/
.toast {
color: var(--cpd-color-text-on-solid-primary);
background: var(--cpd-color-alpha-gray-1200);
padding-inline: var(--cpd-space-3x);
padding-block: var(--cpd-space-1x);
border: none;
border-radius: var(--cpd-radius-pill-effect);
box-shadow: var(--small-drop-shadow);
display: flex;
align-items: center;
gap: var(--cpd-space-1x);
}
.toast > h3 {
margin: 0;
}
.toast > svg {
color: var(--cpd-color-icon-on-solid-primary);
flex-shrink: 0;
margin-inline-end: calc(-1 * var(--cpd-space-1x));
}

108
src/Toast.tsx Normal file
View File

@@ -0,0 +1,108 @@
/*
Copyright 2023 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 {
ComponentType,
FC,
SVGAttributes,
useCallback,
useEffect,
} from "react";
import {
Root as DialogRoot,
Portal as DialogPortal,
Overlay as DialogOverlay,
Content as DialogContent,
Close as DialogClose,
Title as DialogTitle,
} from "@radix-ui/react-dialog";
import classNames from "classnames";
import { Text } from "@vector-im/compound-web";
import styles from "./Toast.module.css";
import overlayStyles from "./Overlay.module.css";
interface Props {
/**
* The controlled open state of the toast.
*/
open: boolean;
/**
* Callback for when the user dismisses the toast.
*/
onDismiss: () => void;
/**
* A number of milliseconds after which the toast should be automatically
* dismissed.
*/
autoDismiss?: number;
children: string;
/**
* A supporting icon to display within the toast.
*/
Icon?: ComponentType<SVGAttributes<SVGElement>>;
}
/**
* A temporary message shown in an overlay in the center of the screen.
*/
export const Toast: FC<Props> = ({
open,
onDismiss,
autoDismiss,
children,
Icon,
}) => {
const onOpenChange = useCallback(
(open: boolean) => {
if (!open) onDismiss();
},
[onDismiss]
);
useEffect(() => {
if (open && autoDismiss !== undefined) {
const timeout = setTimeout(onDismiss, autoDismiss);
return () => clearTimeout(timeout);
}
}, [open, autoDismiss, onDismiss]);
return (
<DialogRoot open={open} onOpenChange={onOpenChange}>
<DialogPortal>
<DialogOverlay
className={classNames(overlayStyles.bg, overlayStyles.animate)}
/>
<DialogContent asChild>
<DialogClose
className={classNames(
overlayStyles.overlay,
overlayStyles.animate,
styles.toast
)}
>
<DialogTitle asChild>
<Text as="h3" size="sm" weight="semibold">
{children}
</Text>
</DialogTitle>
{Icon && <Icon width={20} height={20} aria-hidden />}
</DialogClose>
</DialogContent>
</DialogPortal>
</DialogRoot>
);
};

44
src/UrlParams.ts
View File

@@ -33,6 +33,9 @@ interface RoomIdentifier {
// clearer what each flag means, and helps us avoid coupling Element Call's
// behavior to the needs of specific consumers.
interface UrlParams {
// Widget api related params
widgetId: string | null;
parentUrl: string | null;
/**
* Anything about what room we're pointed to should be from useRoomIdentifier which
* parses the path and resolves alias with respect to the default server name, however
@@ -178,6 +181,9 @@ export const getUrlParams = (
const fontScale = parseFloat(parser.getParam("fontScale") ?? "");
return {
widgetId: parser.getParam("widgetId"),
parentUrl: parser.getParam("parentUrl"),
// NB. we don't validate roomId here as we do in getRoomIdentifierFromUrl:
// what would we do if it were invalid? If the widget API says that's what
// the room ID is, then that's what it is.
@@ -218,33 +224,39 @@ export function getRoomIdentifierFromUrl(
hash: string
): RoomIdentifier {
let roomAlias: string | null = null;
pathname = pathname.substring(1); // Strip the "/"
const pathComponents = pathname.split("/");
const pathHasRoom = pathComponents[0] == "room";
const hasRoomAlias = pathComponents.length > 1;
// Here we handle the beginning of the alias and make sure it starts with a "#"
// What type is our url: roomAlias in hash, room alias as the search path, roomAlias after /room/
if (hash === "" || hash.startsWith("#?")) {
roomAlias = pathname.substring(1); // Strip the "/"
// Delete "/room/", if present
if (roomAlias.startsWith("room/")) {
roomAlias = roomAlias.substring("room/".length);
if (hasRoomAlias && pathHasRoom) {
roomAlias = pathComponents[1];
}
// Add "#", if not present
if (!roomAlias.startsWith("#")) {
roomAlias = `#${roomAlias}`;
if (!pathHasRoom) {
roomAlias = pathComponents[0];
}
} else {
roomAlias = hash;
}
// Delete "?" and what comes afterwards
roomAlias = roomAlias.split("?")[0];
roomAlias = roomAlias?.split("?")[0] ?? null;
if (roomAlias.length <= 1) {
if (roomAlias) {
// Make roomAlias is null, if it only is a "#"
roomAlias = null;
} else {
// Add server part, if not present
if (!roomAlias.includes(":")) {
roomAlias = `${roomAlias}:${Config.defaultServerName()}`;
if (roomAlias.length <= 1) {
roomAlias = null;
} else {
// Add "#", if not present
if (!roomAlias.startsWith("#")) {
roomAlias = `#${roomAlias}`;
}
// Add server part, if not present
if (!roomAlias.includes(":")) {
roomAlias = `${roomAlias}:${Config.defaultServerName()}`;
}
}
}

8
src/UserMenu.tsx
View File

@@ -24,10 +24,10 @@ import { PopoverMenuTrigger } from "./popover/PopoverMenu";
import { Menu } from "./Menu";
import { TooltipTrigger } from "./Tooltip";
import { Avatar, Size } from "./Avatar";
import { ReactComponent as UserIcon } from "./icons/User.svg";
import { ReactComponent as SettingsIcon } from "./icons/Settings.svg";
import { ReactComponent as LoginIcon } from "./icons/Login.svg";
import { ReactComponent as LogoutIcon } from "./icons/Logout.svg";
import UserIcon from "./icons/User.svg?react";
import SettingsIcon from "./icons/Settings.svg?react";
import LoginIcon from "./icons/Login.svg?react";
import LogoutIcon from "./icons/Logout.svg?react";
import { Body } from "./typography/Typography";
import styles from "./UserMenu.module.css";

2
src/auth/LoginPage.tsx
View File

@@ -18,7 +18,7 @@ import { FC, FormEvent, useCallback, useRef, useState } from "react";
import { useHistory, useLocation, Link } from "react-router-dom";
import { Trans, useTranslation } from "react-i18next";
import { ReactComponent as Logo } from "../icons/LogoLarge.svg";
import Logo from "../icons/LogoLarge.svg?react";
import { useClient } from "../ClientContext";
import { FieldRow, InputField, ErrorMessage } from "../input/Input";
import { Button } from "../button";

5
src/auth/RegisterPage.tsx
View File

@@ -27,13 +27,14 @@ import { useHistory, useLocation } from "react-router-dom";
import { captureException } from "@sentry/react";
import { sleep } from "matrix-js-sdk/src/utils";
import { Trans, useTranslation } from "react-i18next";
import { logger } from "matrix-js-sdk/src/logger";
import { FieldRow, InputField, ErrorMessage } from "../input/Input";
import { Button } from "../button";
import { useClientLegacy } from "../ClientContext";
import { useInteractiveRegistration } from "./useInteractiveRegistration";
import styles from "./LoginPage.module.css";
import { ReactComponent as Logo } from "../icons/LogoLarge.svg";
import Logo from "../icons/LogoLarge.svg?react";
import { LoadingView } from "../FullScreenView";
import { useRecaptcha } from "./useRecaptcha";
import { Caption, Link } from "../typography/Typography";
@@ -97,7 +98,7 @@ export const RegisterPage: FC = () => {
await newClient.joinRoom(roomId);
} else {
captureException(error);
console.error(`Couldn't join room ${roomId}`, error);
logger.error(`Couldn't join room ${roomId}`, error);
}
}
}

3
src/auth/useRecaptcha.ts
View File

@@ -17,6 +17,7 @@ limitations under the License.
import { useEffect, useCallback, useRef, useState } from "react";
import { randomString } from "matrix-js-sdk/src/randomstring";
import { useTranslation } from "react-i18next";
import { logger } from "matrix-js-sdk/src/logger";
import { translatedError } from "../TranslatedError";
@@ -78,7 +79,7 @@ export function useRecaptcha(sitekey?: string): {
}
if (!window.grecaptcha) {
console.log("Recaptcha not loaded");
logger.log("Recaptcha not loaded");
return Promise.reject(translatedError("Recaptcha not loaded", t));
}

20
src/button/Button.tsx
View File

@@ -20,18 +20,18 @@ import { useButton } from "@react-aria/button";
import { mergeProps, useObjectRef } from "@react-aria/utils";
import { useTranslation } from "react-i18next";
import { Tooltip } from "@vector-im/compound-web";
import { ReactComponent as MicOnSolidIcon } from "@vector-im/compound-design-tokens/icons/mic-on-solid.svg";
import { ReactComponent as MicOffSolidIcon } from "@vector-im/compound-design-tokens/icons/mic-off-solid.svg";
import { ReactComponent as VideoCallIcon } from "@vector-im/compound-design-tokens/icons/video-call.svg";
import { ReactComponent as VideoCallOffIcon } from "@vector-im/compound-design-tokens/icons/video-call-off.svg";
import { ReactComponent as EndCallIcon } from "@vector-im/compound-design-tokens/icons/end-call.svg";
import { ReactComponent as ShareScreenSolidIcon } from "@vector-im/compound-design-tokens/icons/share-screen-solid.svg";
import { ReactComponent as SettingsSolidIcon } from "@vector-im/compound-design-tokens/icons/settings-solid.svg";
import { ReactComponent as ChevronDownIcon } from "@vector-im/compound-design-tokens/icons/chevron-down.svg";
import MicOnSolidIcon from "@vector-im/compound-design-tokens/icons/mic-on-solid.svg?react";
import MicOffSolidIcon from "@vector-im/compound-design-tokens/icons/mic-off-solid.svg?react";
import VideoCallIcon from "@vector-im/compound-design-tokens/icons/video-call.svg?react";
import VideoCallOffIcon from "@vector-im/compound-design-tokens/icons/video-call-off.svg?react";
import EndCallIcon from "@vector-im/compound-design-tokens/icons/end-call.svg?react";
import ShareScreenSolidIcon from "@vector-im/compound-design-tokens/icons/share-screen-solid.svg?react";
import SettingsSolidIcon from "@vector-im/compound-design-tokens/icons/settings-solid.svg?react";
import ChevronDownIcon from "@vector-im/compound-design-tokens/icons/chevron-down.svg?react";
import styles from "./Button.module.css";
import { ReactComponent as Fullscreen } from "../icons/Fullscreen.svg";
import { ReactComponent as FullscreenExit } from "../icons/FullscreenExit.svg";
import Fullscreen from "../icons/Fullscreen.svg?react";
import FullscreenExit from "../icons/FullscreenExit.svg?react";
import { VolumeIcon } from "./VolumeIcon";
export type ButtonVariant =

4
src/button/CopyButton.tsx
View File

@@ -18,8 +18,8 @@ import { useTranslation } from "react-i18next";
import useClipboard from "react-use-clipboard";
import { FC } from "react";
import { ReactComponent as CheckIcon } from "../icons/Check.svg";
import { ReactComponent as CopyIcon } from "../icons/Copy.svg";
import CheckIcon from "../icons/Check.svg?react";
import CopyIcon from "../icons/Copy.svg?react";
import { Button, ButtonVariant } from "./Button";
interface Props {

6
src/button/ShareButton.tsx → src/button/InviteButton.tsx
View File

@@ -17,15 +17,15 @@ limitations under the License.
import { ComponentPropsWithoutRef, FC } from "react";
import { Button } from "@vector-im/compound-web";
import { useTranslation } from "react-i18next";
import { ReactComponent as UserAddSolidIcon } from "@vector-im/compound-design-tokens/icons/user-add-solid.svg";
import UserAddSolidIcon from "@vector-im/compound-design-tokens/icons/user-add-solid.svg?react";
export const ShareButton: FC<
export const InviteButton: FC<
Omit<ComponentPropsWithoutRef<"button">, "children">
> = (props) => {
const { t } = useTranslation();
return (
<Button kind="secondary" size="sm" Icon={UserAddSolidIcon} {...props}>
{t("Share")}
{t("Invite")}
</Button>
);
};

6
src/button/VolumeIcon.tsx
View File

@@ -17,9 +17,9 @@ limitations under the License.
import { ComponentPropsWithoutRef, FC } from "react";
import { ReactComponent as AudioMuted } from "../icons/AudioMuted.svg";
import { ReactComponent as AudioLow } from "../icons/AudioLow.svg";
import { ReactComponent as Audio } from "../icons/Audio.svg";
import AudioMuted from "../icons/AudioMuted.svg?react";
import AudioLow from "../icons/AudioLow.svg?react";
import Audio from "../icons/Audio.svg?react";
interface Props extends ComponentPropsWithoutRef<"svg"> {
/**

25
src/e2ee/sharedKeyManagement.ts
View File

@@ -19,7 +19,7 @@ import { useEffect, useMemo } from "react";
import { useEnableE2EE } from "../settings/useSetting";
import { useLocalStorage } from "../useLocalStorage";
import { useClient } from "../ClientContext";
import { PASSWORD_STRING, useUrlParams } from "../UrlParams";
import { useUrlParams } from "../UrlParams";
import { widget } from "../widget";
export const getRoomSharedKeyLocalStorageKey = (roomId: string): string =>
@@ -60,29 +60,6 @@ export const useRoomSharedKey = (roomId: string): string | null => {
return useInternalRoomSharedKey(roomId)[0] ?? passwordFormUrl;
};
export const useManageRoomSharedKey = (roomId: string): string | null => {
const urlParams = useUrlParams();
const urlPassword = useKeyFromUrl(roomId);
const [e2eeSharedKey] = useInternalRoomSharedKey(roomId);
useEffect(() => {
const hash = location.hash;
if (!hash.includes("?")) return;
if (!hash.includes(PASSWORD_STRING)) return;
if (urlParams.password !== e2eeSharedKey) return;
const [hashStart, passwordStart] = hash.split(PASSWORD_STRING);
const hashEnd = passwordStart.split("&").slice(1).join("&");
location.replace((hashStart ?? "") + (hashEnd ?? ""));
}, [urlParams, e2eeSharedKey]);
return e2eeSharedKey ?? urlPassword;
};
export const useIsRoomE2EE = (roomId: string): boolean | null => {
const { client } = useClient();
const room = useMemo(() => client?.getRoom(roomId) ?? null, [roomId, client]);

8
src/home/CallList.tsx
View File

@@ -71,9 +71,11 @@ const CallTile: FC<CallTileProps> = ({ name, avatarUrl, room }) => {
return (
<div className={styles.callTile}>
<Link
// note we explicitly omit the password here as we don't want it on this link because
// it's just for the user to navigate around and not for sharing
to={getRelativeRoomUrl(room.roomId, room.name)}
to={getRelativeRoomUrl(
room.roomId,
room.name,
roomSharedKey ?? undefined
)}
className={styles.callTileLink}
>
<Avatar id={room.roomId} name={name} size={Size.LG} src={avatarUrl} />

29
src/home/RegisteredView.tsx
View File

@@ -17,9 +17,9 @@ limitations under the License.
import { useState, useCallback, FormEvent, FormEventHandler, FC } from "react";
import { useHistory } from "react-router-dom";
import { MatrixClient } from "matrix-js-sdk/src/client";
import { randomString } from "matrix-js-sdk/src/randomstring";
import { useTranslation } from "react-i18next";
import { Heading } from "@vector-im/compound-web";
import { logger } from "matrix-js-sdk/src/logger";
import {
createRoom,
@@ -41,8 +41,6 @@ import { Form } from "../form/Form";
import { useEnableE2EE, useOptInAnalytics } from "../settings/useSetting";
import { AnalyticsNotice } from "../analytics/AnalyticsNotice";
import { E2EEBanner } from "../E2EEBanner";
import { setLocalStorageItem } from "../useLocalStorage";
import { getRoomSharedKeyLocalStorageKey } from "../e2ee/sharedKeyManagement";
interface Props {
client: MatrixClient;
@@ -76,18 +74,19 @@ export const RegisteredView: FC<Props> = ({ client }) => {
setError(undefined);
setLoading(true);
const roomId = (
await createRoom(client, roomName, e2eeEnabled ?? false)
)[1];
const createRoomResult = await createRoom(
client,
roomName,
e2eeEnabled ?? false
);
if (e2eeEnabled) {
setLocalStorageItem(
getRoomSharedKeyLocalStorageKey(roomId),
randomString(32)
);
}
history.push(getRelativeRoomUrl(roomId, roomName));
history.push(
getRelativeRoomUrl(
createRoomResult.roomId,
roomName,
createRoomResult.password
)
);
}
submit().catch((error) => {
@@ -97,7 +96,7 @@ export const RegisteredView: FC<Props> = ({ client }) => {
setError(undefined);
setJoinExistingCallModalOpen(true);
} else {
console.error(error);
logger.error(error);
setLoading(false);
setError(error);
}

30
src/home/UnauthenticatedView.tsx
View File

@@ -19,6 +19,7 @@ import { useHistory } from "react-router-dom";
import { randomString } from "matrix-js-sdk/src/randomstring";
import { Trans, useTranslation } from "react-i18next";
import { Heading } from "@vector-im/compound-web";
import { logger } from "matrix-js-sdk/src/logger";
import { useClient } from "../ClientContext";
import { Header, HeaderLogo, LeftNav, RightNav } from "../Header";
@@ -43,8 +44,6 @@ import { AnalyticsNotice } from "../analytics/AnalyticsNotice";
import { useEnableE2EE, useOptInAnalytics } from "../settings/useSetting";
import { Config } from "../config/Config";
import { E2EEBanner } from "../E2EEBanner";
import { getRoomSharedKeyLocalStorageKey } from "../e2ee/sharedKeyManagement";
import { setLocalStorageItem } from "../useLocalStorage";
export const UnauthenticatedView: FC = () => {
const { setClient } = useClient();
@@ -86,18 +85,13 @@ export const UnauthenticatedView: FC = () => {
true
);
let roomId: string;
let createRoomResult;
try {
roomId = (
await createRoom(client, roomName, e2eeEnabled ?? false)
)[1];
if (e2eeEnabled) {
setLocalStorageItem(
getRoomSharedKeyLocalStorageKey(roomId),
randomString(32)
);
}
createRoomResult = await createRoom(
client,
roomName,
e2eeEnabled ?? false
);
} catch (error) {
if (!setClient) {
throw error;
@@ -126,11 +120,17 @@ export const UnauthenticatedView: FC = () => {
}
setClient({ client, session });
history.push(getRelativeRoomUrl(roomId, roomName));
history.push(
getRelativeRoomUrl(
createRoomResult.roomId,
roomName,
createRoomResult.password
)
);
}
submit().catch((error) => {
console.error(error);
logger.error(error);
setLoading(false);
setError(error);
reset();

8
src/index.css
View File

@@ -41,8 +41,12 @@ limitations under the License.
--cpd-color-border-accent: var(--cpd-color-green-800);
/* The distance to inset non-full-width content from the edge of the window
along the inline axis */
--inline-content-inset: max(var(--cpd-space-4x), calc((100vw - 1180px) / 2));
along the inline axis. This ramps up from 16px for typical mobile windows, to
96px for typical desktop windows. */
--inline-content-inset: min(
var(--cpd-space-24x),
max(var(--cpd-space-4x), calc((100vw - 900px) / 3))
);
--small-drop-shadow: 0px 1.2px 2.4px 0px rgba(0, 0, 0, 0.15);
--subtle-drop-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
--background-gradient: url("graphics/backgroundGradient.svg");

2
src/input/AvatarInputField.tsx
View File

@@ -28,7 +28,7 @@ import { useTranslation } from "react-i18next";
import { Avatar, Size } from "../Avatar";
import { Button } from "../button";
import { ReactComponent as EditIcon } from "../icons/Edit.svg";
import EditIcon from "../icons/Edit.svg?react";
import styles from "./AvatarInputField.module.css";
interface Props extends AllHTMLAttributes<HTMLInputElement> {

2
src/input/Input.tsx
View File

@@ -25,7 +25,7 @@ import {
import classNames from "classnames";
import styles from "./Input.module.css";
import { ReactComponent as CheckIcon } from "../icons/Check.svg";
import CheckIcon from "../icons/Check.svg?react";
import { TranslatedError } from "../TranslatedError";
interface FieldRowProps {

2
src/input/SelectInput.tsx
View File

@@ -24,7 +24,7 @@ import { useTranslation } from "react-i18next";
import { Popover } from "../popover/Popover";
import { ListBox } from "../ListBox";
import styles from "./SelectInput.module.css";
import { ReactComponent as ArrowDownIcon } from "../icons/ArrowDown.svg";
import ArrowDownIcon from "../icons/ArrowDown.svg?react";
interface Props extends AriaSelectOptions<object> {
className?: string;

4
src/input/StarRatingInput.tsx
View File

@@ -17,8 +17,8 @@ import { useState } from "react";
import { useTranslation } from "react-i18next";
import styles from "./StarRatingInput.module.css";
import { ReactComponent as StarSelected } from "../icons/StarSelected.svg";
import { ReactComponent as StarUnselected } from "../icons/StarUnselected.svg";
import StarSelected from "../icons/StarSelected.svg?react";
import StarUnselected from "../icons/StarUnselected.svg?react";
interface Props {
starCount: number;

124
src/livekit/useLiveKit.ts
View File

@@ -20,6 +20,7 @@ import {
ExternalE2EEKeyProvider,
Room,
RoomOptions,
Track,
} from "livekit-client";
import { useLiveKitRoom } from "@livekit/components-react";
import { useEffect, useMemo, useRef, useState } from "react";
@@ -100,6 +101,17 @@ export function useLiveKit(
// block audio from being enabled until the connection is finished.
const [blockAudio, setBlockAudio] = useState(true);
// Store if audio/video are currently updating. If to prohibit unnecessary calls
// to setMicrophoneEnabled/setCameraEnabled
const audioMuteUpdating = useRef(false);
const videoMuteUpdating = useRef(false);
// Store the current button mute state that gets passed to this hook via props.
// We need to store it for awaited code that relies on the current value.
const buttonEnabled = useRef({
audio: initialMuteStates.current.audio.enabled,
video: initialMuteStates.current.video.enabled,
});
// We have to create the room manually here due to a bug inside
// @livekit/components-react. JSON.stringify() is used in deps of a
// useEffect() with an argument that references itself, if E2EE is enabled
@@ -136,20 +148,50 @@ export function useLiveKit(
// and setting tracks to be enabled during this time causes errors.
if (room !== undefined && connectionState === ConnectionState.Connected) {
const participant = room.localParticipant;
if (participant.isMicrophoneEnabled !== muteStates.audio.enabled) {
participant
.setMicrophoneEnabled(muteStates.audio.enabled)
.catch((e) =>
logger.error("Failed to sync audio mute state with LiveKit", e)
);
}
if (participant.isCameraEnabled !== muteStates.video.enabled) {
participant
.setCameraEnabled(muteStates.video.enabled)
.catch((e) =>
logger.error("Failed to sync video mute state with LiveKit", e)
);
}
// Always update the muteButtonState Ref so that we can read the current
// state in awaited blocks.
buttonEnabled.current = {
audio: muteStates.audio.enabled,
video: muteStates.video.enabled,
};
const syncMuteStateAudio = async (): Promise<void> => {
if (
participant.isMicrophoneEnabled !== buttonEnabled.current.audio &&
!audioMuteUpdating.current
) {
audioMuteUpdating.current = true;
try {
await participant.setMicrophoneEnabled(buttonEnabled.current.audio);
} catch (e) {
logger.error("Failed to sync audio mute state with LiveKit", e);
}
audioMuteUpdating.current = false;
// Run the check again after the change is done. Because the user
// can update the state (presses mute button) while the device is enabling
// 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.
syncMuteStateAudio();
}
};
const syncMuteStateVideo = async (): Promise<void> => {
if (
participant.isCameraEnabled !== buttonEnabled.current.video &&
!videoMuteUpdating.current
) {
videoMuteUpdating.current = true;
try {
await participant.setCameraEnabled(buttonEnabled.current.video);
} catch (e) {
logger.error("Failed to sync audio mute state with LiveKit", e);
}
videoMuteUpdating.current = false;
// see above
syncMuteStateVideo();
}
};
syncMuteStateAudio();
syncMuteStateVideo();
}
}, [room, muteStates, connectionState]);
@@ -158,12 +200,54 @@ export function useLiveKit(
if (room !== undefined && connectionState === ConnectionState.Connected) {
const syncDevice = (kind: MediaDeviceKind, device: MediaDevice): void => {
const id = device.selectedId;
if (id !== undefined && room.getActiveDevice(kind) !== id) {
room
.switchActiveDevice(kind, id)
.catch((e) =>
logger.error(`Failed to sync ${kind} device with LiveKit`, e)
);
// Detect if we're trying to use chrome's default device, in which case
// we need to to see if the default device has changed to a different device
// by comparing the group ID of the device we're using against the group ID
// of what the default device is *now*.
// This is special-cased for only audio inputs because we need to dig around
// in the LocalParticipant object for the track object and there's not a nice
// way to do that generically. There is usually no OS-level default video capture
// device anyway, and audio outputs work differently.
if (
id === "default" &&
kind === "audioinput" &&
room.options.audioCaptureDefaults?.deviceId === "default"
) {
const activeMicTrack = Array.from(
room.localParticipant.audioTracks.values()
).find((d) => d.source === Track.Source.Microphone)?.track;
const defaultDevice = device.available.find(
(d) => d.deviceId === "default"
);
if (
defaultDevice &&
activeMicTrack &&
// only restart if the stream is still running: LiveKit will detect
// when a track stops & restart appropriately, so this is not our job.
// Plus, we need to avoid restarting again if the track is already in
// the process of being restarted.
activeMicTrack.mediaStreamTrack.readyState !== "ended" &&
defaultDevice.groupId !==
activeMicTrack.mediaStreamTrack.getSettings().groupId
) {
// It's different, so restart the track, ie. cause Livekit to do another
// getUserMedia() call with deviceId: default to get the *new* default device.
// Note that room.switchActiveDevice() won't work: Livekit will ignore it because
// the deviceId hasn't changed (was & still is default).
room.localParticipant
.getTrack(Track.Source.Microphone)
?.audioTrack?.restartTrack();
}
} else {
if (id !== undefined && room.getActiveDevice(kind) !== id) {
room
.switchActiveDevice(kind, id)
.catch((e) =>
logger.error(`Failed to sync ${kind} device with LiveKit`, e)
);
}
}
};

15
src/main.tsx
View File

@@ -24,20 +24,21 @@ import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { createBrowserHistory } from "history";
import "./index.css";
import { setLogLevel as setLKLogLevel } from "livekit-client";
import { logger } from "matrix-js-sdk/src/logger";
import {
setLogExtension as setLKLogExtension,
setLogLevel,
} from "livekit-client";
import { App } from "./App";
import { init as initRageshake } from "./settings/rageshake";
import { Initializer } from "./initializer";
initRageshake();
// set livekit's log level: we do this after initialising rageshakes because
// we need rageshake to do its monkey patching first, so the livekit
// logger gets the patched log funxction, so it picks up livekit's
// logs.
setLKLogLevel("debug");
setLogLevel("debug");
setLKLogExtension(global.mx_rage_logger.log);
console.info(`Element Call ${import.meta.env.VITE_APP_VERSION || "dev"}`);
logger.info(`Element Call ${import.meta.env.VITE_APP_VERSION || "dev"}`);
const root = createRoot(document.getElementById("root")!);

55
src/matrix-utils.ts
View File

@@ -1,5 +1,5 @@
/*
Copyright 2022 New Vector Ltd
Copyright 2022-2023 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.
@@ -35,6 +35,8 @@ import IndexedDBWorker from "./IndexedDBWorker?worker";
import { getUrlParams, PASSWORD_STRING } from "./UrlParams";
import { loadOlm } from "./olm";
import { Config } from "./config/Config";
import { setLocalStorageItem } from "./useLocalStorage";
import { getRoomSharedKeyLocalStorageKey } from "./e2ee/sharedKeyManagement";
export const fallbackICEServerAllowed =
import.meta.env.VITE_FALLBACK_STUN_ALLOWED === "true";
@@ -71,6 +73,23 @@ function waitForSync(client: MatrixClient): Promise<void> {
});
}
function secureRandomString(entropyBytes: number): string {
const key = new Uint8Array(entropyBytes);
crypto.getRandomValues(key);
// encode to base64url as this value goes into URLs
// base64url is just base64 with thw two non-alphanum characters swapped out for
// ones that can be put in a URL without encoding. Browser JS has a native impl
// for base64 encoding but only a string (there isn't one that takes a UInt8Array
// yet) so just use the built-in one and convert, replace the chars and strip the
// padding from the end (otherwise we'd need to pull in another dependency).
return btoa(
key.reduce((acc, current) => acc + String.fromCharCode(current), "")
)
.replace("+", "-")
.replace("/", "_")
.replace(/=*$/, "");
}
/**
* Initialises and returns a new standalone Matrix Client.
* If true is passed for the 'restore' parameter, a check will be made
@@ -177,7 +196,7 @@ export async function initClient(
try {
await client.store.startup();
} catch (error) {
console.error(
logger.error(
"Error starting matrix client store. Falling back to memory store.",
error
);
@@ -269,11 +288,17 @@ export function isLocalRoomId(roomId: string, client: MatrixClient): boolean {
return parts[1] === client.getDomain();
}
interface CreateRoomResult {
roomId: string;
alias?: string;
password?: string;
}
export async function createRoom(
client: MatrixClient,
name: string,
e2ee: boolean
): Promise<[string, string]> {
): Promise<CreateRoomResult> {
logger.log(`Creating room for group call`);
const createPromise = client.createRoom({
visibility: Visibility.Private,
@@ -336,7 +361,20 @@ export async function createRoom(
true
);
return [fullAliasFromRoomName(name, client), result.room_id];
let password;
if (e2ee) {
password = secureRandomString(16);
setLocalStorageItem(
getRoomSharedKeyLocalStorageKey(result.room_id),
password
);
}
return {
roomId: result.room_id,
alias: e2ee ? undefined : fullAliasFromRoomName(name, client),
password,
};
}
/**
@@ -366,9 +404,16 @@ export function getRelativeRoomUrl(
roomName?: string,
password?: string
): string {
// The password shouldn't need URL encoding here (we generate URL-safe ones) but encode
// it in case it came from another client that generated a non url-safe one
const encodedPassword = password ? encodeURIComponent(password) : undefined;
if (password && encodedPassword !== password) {
logger.info("Encoded call password used non URL-safe chars: buggy client?");
}
return `/room/#${
roomName ? "/" + roomAliasLocalpartFromRoomName(roomName) : ""
}?roomId=${roomId}${password ? "&" + PASSWORD_STRING + password : ""}`;
}?roomId=${roomId}${password ? "&" + PASSWORD_STRING + encodedPassword : ""}`;
}
export function getAvatarUrl(

3
src/profile/useProfile.ts
View File

@@ -19,6 +19,7 @@ import { MatrixEvent } from "matrix-js-sdk/src/models/event";
import { User, UserEvent } from "matrix-js-sdk/src/models/user";
import { FileType } from "matrix-js-sdk/src/http-api";
import { useState, useCallback, useEffect } from "react";
import { logger } from "matrix-js-sdk/src/logger";
interface ProfileLoadState {
success: boolean;
@@ -131,7 +132,7 @@ export function useProfile(client: MatrixClient | undefined): UseProfile {
}));
}
} else {
console.error("Client not initialized before calling saveProfile");
logger.error("Client not initialized before calling saveProfile");
}
},
[client]

2
src/room/AppSelectionModal.tsx
View File

@@ -17,7 +17,7 @@ limitations under the License.
import { FC, MouseEvent, useCallback, useMemo, useState } from "react";
import { useTranslation } from "react-i18next";
import { Button, Text } from "@vector-im/compound-web";
import { ReactComponent as PopOutIcon } from "@vector-im/compound-design-tokens/icons/pop-out.svg";
import PopOutIcon from "@vector-im/compound-design-tokens/icons/pop-out.svg?react";
import { logger } from "matrix-js-sdk/src/logger";
import { Modal } from "../Modal";

4
src/room/EncryptionLock.tsx
View File

@@ -17,8 +17,8 @@ limitations under the License.
import { FC } from "react";
import { Tooltip } from "@vector-im/compound-web";
import { useTranslation } from "react-i18next";
import { ReactComponent as LockIcon } from "@vector-im/compound-design-tokens/icons/lock.svg";
import { ReactComponent as LockOffIcon } from "@vector-im/compound-design-tokens/icons/lock-off.svg";
import LockIcon from "@vector-im/compound-design-tokens/icons/lock.svg?react";
import LockOffIcon from "@vector-im/compound-design-tokens/icons/lock-off.svg?react";
import styles from "./EncryptionLock.module.css";

41
src/room/GroupCallInspector.module.css
View File

@@ -1,41 +0,0 @@
/*
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.
*/
.inspector {
background-color: var(--cpd-color-bg-subtle-secondary);
}
.scrollContainer {
height: 100%;
overflow-y: auto;
}
.sequenceDiagramViewer {
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
}
.selectInput {
align-self: flex-start;
}
.sequenceDiagramViewer :global(.messageText) {
font-size: var(--font-size-caption);
fill: var(--cpd-color-text-primary) !important;
stroke: var(--cpd-color-text-primary) !important;
}

543
src/room/GroupCallInspector.tsx
View File

@@ -1,543 +0,0 @@
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-nocheck
/*
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 * as Sentry from "@sentry/react";
import { Resizable } from "re-resizable";
import {
useEffect,
useState,
useReducer,
useRef,
createContext,
useContext,
Dispatch,
SetStateAction,
FC,
PropsWithChildren,
} from "react";
import ReactJson, { CollapsedFieldProps } from "react-json-view";
import mermaid from "mermaid";
import { Item } from "@react-stately/collections";
import { MatrixEvent, IContent } from "matrix-js-sdk/src/models/event";
import {
GroupCall,
GroupCallError,
GroupCallEvent,
} from "matrix-js-sdk/src/webrtc/groupCall";
import { ClientEvent, MatrixClient } from "matrix-js-sdk/src/client";
import { RoomStateEvent } from "matrix-js-sdk/src/models/room-state";
import {
CallEvent,
CallState,
CallError,
MatrixCall,
VoipEvent,
} from "matrix-js-sdk/src/webrtc/call";
import styles from "./GroupCallInspector.module.css";
import { SelectInput } from "../input/SelectInput";
import { PosthogAnalytics } from "../analytics/PosthogAnalytics";
import { OTelGroupCallMembership } from "../otel/OTelGroupCallMembership";
interface InspectorContextState {
eventsByUserId?: { [userId: string]: SequenceDiagramMatrixEvent[] };
remoteUserIds?: string[];
localUserId?: string;
localSessionId?: string;
}
const defaultCollapsedFields = [
"org.matrix.msc3401.call",
"org.matrix.msc3401.call.member",
"calls",
"callStats",
"hangupCalls",
"toDeviceEvents",
"sentVoipEvents",
"content",
];
function shouldCollapse({ name }: CollapsedFieldProps): boolean {
return name ? defaultCollapsedFields.includes(name) : false;
}
function getUserName(userId: string): string {
const match = userId.match(/@([^:]+):/);
return match && match.length > 0
? match[1].replace("-", " ").replace(/\W/g, "")
: userId.replace(/\W/g, "");
}
function formatContent(type: string, content: CallEventContent): string {
if (type === "m.call.hangup") {
return `callId: ${content.call_id.slice(-4)} reason: ${
content.reason
} senderSID: ${content.sender_session_id} destSID: ${
content.dest_session_id
}`;
}
if (type.startsWith("m.call.")) {
return `callId: ${content.call_id?.slice(-4)} senderSID: ${
content.sender_session_id
} destSID: ${content.dest_session_id}`;
} else if (type === "org.matrix.msc3401.call.member") {
const call =
content["m.calls"] &&
content["m.calls"].length > 0 &&
content["m.calls"][0];
const device =
call &&
call["m.devices"] &&
call["m.devices"].length > 0 &&
call["m.devices"][0];
return `conf_id: ${call && call["m.call_id"].slice(-4)} sessionId: ${
device && device.session_id
}`;
} else {
return "";
}
}
const dateFormatter = new Intl.DateTimeFormat([], {
hour: "2-digit",
minute: "2-digit",
second: "2-digit",
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore the linter does not know about this property of the DataTimeFormatOptions
fractionalSecondDigits: 3,
});
function formatTimestamp(timestamp: number | Date): string {
return dateFormatter.format(timestamp);
}
function formatType(event: SequenceDiagramMatrixEvent): string {
if (event.content.msgtype === "m.bad.encrypted") return "Undecryptable";
return event.type;
}
function lineForEvent(event: SequenceDiagramMatrixEvent): string {
return `${getUserName(event.from)} ${
event.ignored ? "-x" : "->>"
} ${getUserName(event.to)}: ${formatTimestamp(event.timestamp)} ${formatType(
event
)} ${formatContent(event.type, event.content)}`;
}
export const InspectorContext =
createContext<
[InspectorContextState, Dispatch<SetStateAction<InspectorContextState>>]
>(undefined);
export const InspectorContextProvider: FC<PropsWithChildren<{}>> = ({
children,
}) => {
// We take the tuple of [currentState, setter] and stick
// it straight into the context for other things to call
// the setState method... this feels like a fairly severe
// contortion of the hooks API - is this really the best way
// to do this?
const context = useState<InspectorContextState>({});
return (
<InspectorContext.Provider value={context}>
{children}
</InspectorContext.Provider>
);
};
type CallEventContent = {
["m.calls"]: {
["m.devices"]: { session_id: string; [x: string]: unknown }[];
["m.call_id"]: string;
}[];
} & {
call_id: string;
reason: string;
sender_session_id: string;
dest_session_id: string;
} & IContent;
export type SequenceDiagramMatrixEvent = {
to: string;
from: string;
timestamp: number;
type: string;
content: CallEventContent;
ignored: boolean;
};
interface SequenceDiagramViewerProps {
localUserId: string;
remoteUserIds: string[];
selectedUserId: string;
onSelectUserId: (userId: string) => void;
events: SequenceDiagramMatrixEvent[];
}
export const SequenceDiagramViewer: FC<SequenceDiagramViewerProps> = ({
localUserId,
remoteUserIds,
selectedUserId,
onSelectUserId,
events,
}) => {
const mermaidElRef = useRef<HTMLDivElement>(null);
useEffect(() => {
mermaid.initialize({
startOnLoad: true,
theme: "dark",
sequence: {
showSequenceNumbers: true,
},
});
}, []);
useEffect(() => {
const graphDefinition = `sequenceDiagram
participant ${getUserName(localUserId)}
participant Room
participant ${selectedUserId ? getUserName(selectedUserId) : "unknown"}
${events ? events.map(lineForEvent).join("\n ") : ""}
`;
mermaid.mermaidAPI.render("mermaid", graphDefinition, (svgCode: string) => {
if (!mermaidElRef.current) return;
mermaidElRef.current.innerHTML = svgCode;
});
}, [events, localUserId, selectedUserId]);
return (
<div className={styles.scrollContainer}>
<div className={styles.sequenceDiagramViewer}>
<SelectInput
className={styles.selectInput}
label="Remote User"
selectedKey={selectedUserId}
onSelectionChange={(key): void => onSelectUserId(key.toString())}
>
{remoteUserIds.map((userId) => (
<Item key={userId}>{userId}</Item>
))}
</SelectInput>
<div id="mermaid" />
<div ref={mermaidElRef} />
</div>
</div>
);
};
function reducer(
state: InspectorContextState,
action: {
type?: CallEvent | ClientEvent | RoomStateEvent;
event?: MatrixEvent;
rawEvent?: VoipEvent;
callStateEvent?: MatrixEvent;
memberStateEvents?: MatrixEvent[];
}
): InspectorContextState {
switch (action.type) {
case RoomStateEvent.Events: {
const { event, callStateEvent, memberStateEvents } = action;
let eventsByUserId = state.eventsByUserId;
let remoteUserIds = state.remoteUserIds;
if (event) {
const fromId = event.getStateKey();
remoteUserIds =
fromId === state.localUserId || eventsByUserId[fromId]
? state.remoteUserIds
: [...state.remoteUserIds, fromId];
eventsByUserId = { ...state.eventsByUserId };
if (event.getStateKey() === state.localUserId) {
for (const userId in eventsByUserId) {
eventsByUserId[userId] = [
...(eventsByUserId[userId] || []),
{
from: fromId,
to: "Room",
type: event.getType(),
content: event.getContent(),
timestamp: event.getTs() || Date.now(),
ignored: false,
},
];
}
} else {
eventsByUserId[fromId] = [
...(eventsByUserId[fromId] || []),
{
from: fromId,
to: "Room",
type: event.getType(),
content: event.getContent(),
timestamp: event.getTs() || Date.now(),
ignored: false,
},
];
}
}
return {
...state,
eventsByUserId,
remoteUserIds,
callStateEvent: callStateEvent.getContent(),
memberStateEvents: Object.fromEntries(
memberStateEvents.map((e) => [e.getStateKey(), e.getContent()])
),
};
}
case ClientEvent.ReceivedVoipEvent: {
const event = action.event;
const eventsByUserId = { ...state.eventsByUserId };
const fromId = event.getSender();
const toId = state.localUserId;
const content = event.getContent<CallEventContent>();
const remoteUserIds = eventsByUserId[fromId]
? state.remoteUserIds
: [...state.remoteUserIds, fromId];
eventsByUserId[fromId] = [
...(eventsByUserId[fromId] || []),
{
from: fromId,
to: toId,
type: event.getType(),
content,
timestamp: event.getTs() || Date.now(),
ignored: state.localSessionId !== content.dest_session_id,
},
];
return { ...state, eventsByUserId, remoteUserIds };
}
case CallEvent.SendVoipEvent: {
const event = action.rawEvent;
const eventsByUserId = { ...state.eventsByUserId };
const fromId = state.localUserId;
const toId = event.userId as string;
const remoteUserIds = eventsByUserId[toId]
? state.remoteUserIds
: [...state.remoteUserIds, toId];
eventsByUserId[toId] = [
...(eventsByUserId[toId] || []),
{
from: fromId,
to: toId,
type: event.eventType as string,
content: event.content as CallEventContent,
timestamp: Date.now(),
ignored: false,
},
];
return { ...state, eventsByUserId, remoteUserIds };
}
default:
return state;
}
}
function useGroupCallState(
client: MatrixClient,
groupCall: GroupCall,
otelGroupCallMembership: OTelGroupCallMembership
): InspectorContextState {
const [state, dispatch] = useReducer(reducer, {
localUserId: client.getUserId(),
localSessionId: client.getSessionId(),
eventsByUserId: {},
remoteUserIds: [],
callStateEvent: null,
memberStateEvents: {},
});
useEffect(() => {
function onUpdateRoomState(event?: MatrixEvent): void {
const callStateEvent = groupCall.room.currentState.getStateEvents(
"org.matrix.msc3401.call",
groupCall.groupCallId
);
const memberStateEvents = groupCall.room.currentState.getStateEvents(
"org.matrix.msc3401.call.member"
);
dispatch({
type: RoomStateEvent.Events,
event,
callStateEvent,
memberStateEvents,
});
otelGroupCallMembership?.onUpdateRoomState(event);
}
function onReceivedVoipEvent(event: MatrixEvent): void {
dispatch({ type: ClientEvent.ReceivedVoipEvent, event });
otelGroupCallMembership?.onReceivedVoipEvent(event);
}
function onSendVoipEvent(event: VoipEvent, call: MatrixCall): void {
dispatch({ type: CallEvent.SendVoipEvent, rawEvent: event });
otelGroupCallMembership?.onSendEvent(call, event);
}
function onCallStateChange(
newState: CallState,
_: CallState,
call: MatrixCall
): void {
otelGroupCallMembership?.onCallStateChange(call, newState);
}
function onCallError(error: CallError, call: MatrixCall): void {
otelGroupCallMembership.onCallError(error, call);
}
function onGroupCallError(error: GroupCallError): void {
otelGroupCallMembership.onGroupCallError(error);
}
function onUndecryptableToDevice(event: MatrixEvent): void {
dispatch({ type: ClientEvent.ReceivedVoipEvent, event });
Sentry.captureMessage("Undecryptable to-device Event");
// probably unnecessary if it's now captured via otel?
PosthogAnalytics.instance.eventUndecryptableToDevice.track(
groupCall.groupCallId
);
otelGroupCallMembership.onUndecryptableToDevice(event);
}
client.on(RoomStateEvent.Events, onUpdateRoomState);
groupCall.on(CallEvent.SendVoipEvent, onSendVoipEvent);
groupCall.on(CallEvent.State, onCallStateChange);
groupCall.on(CallEvent.Error, onCallError);
groupCall.on(GroupCallEvent.Error, onGroupCallError);
//client.on("state", onCallsChanged);
//client.on("hangup", onCallHangup);
client.on(ClientEvent.ReceivedVoipEvent, onReceivedVoipEvent);
client.on(ClientEvent.UndecryptableToDeviceEvent, onUndecryptableToDevice);
onUpdateRoomState();
return () => {
client.removeListener(RoomStateEvent.Events, onUpdateRoomState);
groupCall.removeListener(CallEvent.SendVoipEvent, onSendVoipEvent);
groupCall.removeListener(CallEvent.State, onCallStateChange);
groupCall.removeListener(CallEvent.Error, onCallError);
groupCall.removeListener(GroupCallEvent.Error, onGroupCallError);
//client.removeListener("state", onCallsChanged);
//client.removeListener("hangup", onCallHangup);
client.removeListener(ClientEvent.ReceivedVoipEvent, onReceivedVoipEvent);
client.removeListener(
ClientEvent.UndecryptableToDeviceEvent,
onUndecryptableToDevice
);
};
}, [client, groupCall, otelGroupCallMembership]);
return state;
}
interface GroupCallInspectorProps {
client: MatrixClient;
groupCall: GroupCall;
otelGroupCallMembership: OTelGroupCallMembership;
show: boolean;
}
export const GroupCallInspector: FC<GroupCallInspectorProps> = ({
client,
groupCall,
otelGroupCallMembership,
show,
}) => {
const [currentTab, setCurrentTab] = useState("sequence-diagrams");
const [selectedUserId, setSelectedUserId] = useState<string>();
const state = useGroupCallState(client, groupCall, otelGroupCallMembership);
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const [_, setState] = useContext(InspectorContext);
useEffect(() => {
setState(state);
}, [setState, state]);
if (!show) {
return null;
}
return (
<Resizable
enable={{ top: true }}
defaultSize={{ height: 200, width: 0 }}
className={styles.inspector}
>
<div className={styles.toolbar}>
<button onClick={(): void => setCurrentTab("sequence-diagrams")}>
Sequence Diagrams
</button>
<button onClick={(): void => setCurrentTab("inspector")}>
Inspector
</button>
</div>
{currentTab === "sequence-diagrams" &&
state.localUserId &&
selectedUserId &&
state.eventsByUserId &&
state.remoteUserIds && (
<SequenceDiagramViewer
localUserId={state.localUserId}
selectedUserId={selectedUserId}
onSelectUserId={setSelectedUserId}
remoteUserIds={state.remoteUserIds}
events={state.eventsByUserId[selectedUserId]}
/>
)}
{currentTab === "inspector" && (
<ReactJson
theme="monokai"
src={state}
name={null}
indentWidth={2}
shouldCollapse={shouldCollapse}
displayDataTypes={false}
displayObjectSize={false}
enableClipboard
style={{ height: "100%", overflowY: "scroll" }}
/>
)}
</Resizable>
);
};

53
src/room/GroupCallView.tsx
View File

@@ -20,7 +20,7 @@ import { MatrixClient } from "matrix-js-sdk/src/client";
import { Room, isE2EESupported } from "livekit-client";
import { logger } from "matrix-js-sdk/src/logger";
import { MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc/MatrixRTCSession";
import { JoinRule, RoomMember } from "matrix-js-sdk/src/matrix";
import { JoinRule } from "matrix-js-sdk/src/matrix";
import { Heading, Link, Text } from "@vector-im/compound-web";
import { useTranslation } from "react-i18next";
@@ -39,15 +39,12 @@ import { useMediaDevices, MediaDevices } from "../livekit/MediaDevicesContext";
import { useMatrixRTCSessionMemberships } from "../useMatrixRTCSessionMemberships";
import { enterRTCSession, leaveRTCSession } from "../rtcSessionHelpers";
import { useMatrixRTCSessionJoinState } from "../useMatrixRTCSessionJoinState";
import {
useManageRoomSharedKey,
useIsRoomE2EE,
} from "../e2ee/sharedKeyManagement";
import { useIsRoomE2EE, useRoomSharedKey } from "../e2ee/sharedKeyManagement";
import { useEnableE2EE } from "../settings/useSetting";
import { useRoomAvatar } from "./useRoomAvatar";
import { useRoomName } from "./useRoomName";
import { useJoinRule } from "./useJoinRule";
import { ShareModal } from "./ShareModal";
import { InviteModal } from "./InviteModal";
declare global {
interface Window {
@@ -75,7 +72,7 @@ export const GroupCallView: FC<Props> = ({
const memberships = useMatrixRTCSessionMemberships(rtcSession);
const isJoined = useMatrixRTCSessionJoinState(rtcSession);
const e2eeSharedKey = useManageRoomSharedKey(rtcSession.room.roomId);
const e2eeSharedKey = useRoomSharedKey(rtcSession.room.roomId);
const isRoomE2EE = useIsRoomE2EE(rtcSession.room.roomId);
useEffect(() => {
@@ -111,18 +108,11 @@ export const GroupCallView: FC<Props> = ({
client,
]);
const participatingMembers = useMemo(() => {
const members: RoomMember[] = [];
// Count each member only once, regardless of how many devices they use
const addedUserIds = new Set<string>();
for (const membership of memberships) {
if (!addedUserIds.has(membership.member.userId)) {
addedUserIds.add(membership.member.userId);
members.push(membership.member);
}
}
return members;
}, [memberships]);
// Count each member only once, regardless of how many devices they use
const participantCount = useMemo(
() => new Set<string>(memberships.map((m) => m.sender!)).size,
[memberships]
);
const deviceContext = useMediaDevices();
const latestDevices = useRef<MediaDevices>();
@@ -226,13 +216,16 @@ export const GroupCallView: FC<Props> = ({
sendInstantly
);
leaveRTCSession(rtcSession);
await leaveRTCSession(rtcSession);
if (widget) {
// 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();
// we will always send the hangup event after the memberships have been updated
// calling leaveRTCSession.
widget.api.transport.send(ElementWidgetActions.HangupCall, {});
}
@@ -278,15 +271,15 @@ export const GroupCallView: FC<Props> = ({
const joinRule = useJoinRule(rtcSession.room);
const [shareModalOpen, setShareModalOpen] = useState(false);
const onDismissShareModal = useCallback(
() => setShareModalOpen(false),
[setShareModalOpen]
const [shareModalOpen, setInviteModalOpen] = useState(false);
const onDismissInviteModal = useCallback(
() => setInviteModalOpen(false),
[setInviteModalOpen]
);
const onShareClickFn = useCallback(
() => setShareModalOpen(true),
[setShareModalOpen]
() => setInviteModalOpen(true),
[setInviteModalOpen]
);
const onShareClick = joinRule === JoinRule.Public ? onShareClickFn : null;
@@ -329,10 +322,10 @@ export const GroupCallView: FC<Props> = ({
}
const shareModal = (
<ShareModal
<InviteModal
room={rtcSession.room}
open={shareModalOpen}
onDismiss={onDismissShareModal}
onDismiss={onDismissInviteModal}
/>
);
@@ -344,7 +337,7 @@ export const GroupCallView: FC<Props> = ({
client={client}
matrixInfo={matrixInfo}
rtcSession={rtcSession}
participatingMembers={participatingMembers}
participantCount={participantCount}
onLeave={onLeave}
hideHeader={hideHeader}
muteStates={muteStates}
@@ -395,7 +388,7 @@ export const GroupCallView: FC<Props> = ({
onEnter={(): void => enterRTCSession(rtcSession)}
confineToRoom={confineToRoom}
hideHeader={hideHeader}
participatingMembers={participatingMembers}
participantCount={participantCount}
onShareClick={onShareClick}
/>
</>

26
src/room/InCallView.module.css
View File

@@ -17,18 +17,18 @@ limitations under the License.
.inRoom {
display: flex;
flex-direction: column;
overflow: hidden;
min-height: 100%;
height: 100%;
width: 100%;
--footerPadding: var(--cpd-space-4x);
--footerHeight: calc(50px + 2 * var(--footerPadding));
}
.controlsOverlay {
position: relative;
flex: 1;
display: flex;
flex-direction: column;
overflow: auto;
overflow-inline: hidden;
contain: strict;
}
.centerMessage {
@@ -45,17 +45,15 @@ limitations under the License.
}
.footer {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
box-sizing: border-box;
position: sticky;
inset-block-end: 0;
display: grid;
grid-template-columns: 1fr auto 1fr;
grid-template-areas: "logo buttons layout";
align-items: center;
gap: var(--cpd-space-3x);
padding: var(--footerPadding) var(--inline-content-inset);
padding-block: var(--cpd-space-4x);
padding-inline: var(--inline-content-inset);
background: linear-gradient(
180deg,
rgba(0, 0, 0, 0) 0%,
@@ -84,14 +82,14 @@ limitations under the License.
}
@media (min-height: 400px) {
.inRoom {
--footerPadding: var(--cpd-space-10x);
.footer {
padding-block: var(--cpd-space-10x);
}
}
@media (min-height: 800px) {
.inRoom {
--footerPadding: var(--cpd-space-15x);
.footer {
padding-block: var(--cpd-space-15x);
}
}

38
src/room/InCallView.tsx
View File

@@ -42,8 +42,8 @@ import useMeasure from "react-use-measure";
import { logger } from "matrix-js-sdk/src/logger";
import { MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc/MatrixRTCSession";
import { ReactComponent as LogoMark } from "../icons/LogoMark.svg";
import { ReactComponent as LogoType } from "../icons/LogoType.svg";
import LogoMark from "../icons/LogoMark.svg?react";
import LogoType from "../icons/LogoType.svg?react";
import type { IWidgetApiRequest } from "matrix-widget-api";
import {
HangupButton,
@@ -78,7 +78,7 @@ import { useWakeLock } from "../useWakeLock";
import { useMergedRefs } from "../useMergedRefs";
import { MuteStates } from "./MuteStates";
import { MatrixInfo } from "./VideoPreview";
import { ShareButton } from "../button/ShareButton";
import { InviteButton } from "../button/InviteButton";
import { LayoutToggle } from "./LayoutToggle";
import {
ECAddonConnectionState,
@@ -129,7 +129,7 @@ export interface InCallViewProps {
rtcSession: MatrixRTCSession;
livekitRoom: Room;
muteStates: MuteStates;
participatingMembers: RoomMember[];
participantCount: number;
onLeave: (error?: Error) => void;
hideHeader: boolean;
otelGroupCallMembership?: OTelGroupCallMembership;
@@ -143,7 +143,7 @@ export const InCallView: FC<InCallViewProps> = ({
rtcSession,
livekitRoom,
muteStates,
participatingMembers,
participantCount,
onLeave,
hideHeader,
otelGroupCallMembership,
@@ -178,7 +178,6 @@ export const InCallView: FC<InCallViewProps> = ({
screenSharingTracks.length > 0
);
//const [showInspector] = useShowInspector();
const [showConnectionStats] = useShowConnectionStats();
const { hideScreensharing } = useUrlParams();
@@ -353,19 +352,19 @@ export const InCallView: FC<InCallViewProps> = ({
const buttons: JSX.Element[] = [];
buttons.push(
<VideoButton
key="2"
muted={!muteStates.video.enabled}
onPress={toggleCamera}
disabled={muteStates.video.setEnabled === null}
data-testid="incall_videomute"
/>,
<MicButton
key="1"
muted={!muteStates.audio.enabled}
onPress={toggleMicrophone}
disabled={muteStates.audio.setEnabled === null}
data-testid="incall_mute"
/>,
<VideoButton
key="2"
muted={!muteStates.video.enabled}
onPress={toggleCamera}
disabled={muteStates.video.setEnabled === null}
data-testid="incall_videomute"
/>
);
@@ -420,13 +419,12 @@ export const InCallView: FC<InCallViewProps> = ({
name={matrixInfo.roomName}
avatarUrl={matrixInfo.roomAvatar}
encrypted={matrixInfo.roomEncrypted}
participants={participatingMembers}
client={client}
participantCount={participantCount}
/>
</LeftNav>
<RightNav>
{!reducedControls && onShareClick !== null && (
<ShareButton onClick={onShareClick} />
<InviteButton onClick={onShareClick} />
)}
</RightNav>
</Header>
@@ -436,14 +434,6 @@ export const InCallView: FC<InCallViewProps> = ({
{renderContent()}
{footer}
</div>
{/*otelGroupCallMembership && (
<GroupCallInspector
client={client}
groupCall={groupCall}
otelGroupCallMembership={otelGroupCallMembership}
show={showInspector}
/>
)*/}
{!noControls && <RageshakeRequestModal {...rageshakeRequestModalProps} />}
<SettingsModal
client={client}

8
src/room/ShareModal.module.css → src/room/InviteModal.module.css
View File

@@ -14,6 +14,12 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.copyButton {
.url {
text-align: center;
color: var(--cpd-color-text-secondary);
margin-block-end: var(--cpd-space-8x);
}
.button {
width: 100%;
}

84
src/room/InviteModal.tsx Normal file
View File

@@ -0,0 +1,84 @@
/*
Copyright 2022 - 2023 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 { FC, MouseEvent, useCallback, useMemo, useState } from "react";
import { useTranslation } from "react-i18next";
import { Room } from "matrix-js-sdk";
import { Button, Text } from "@vector-im/compound-web";
import LinkIcon from "@vector-im/compound-design-tokens/icons/link.svg?react";
import CheckIcon from "@vector-im/compound-design-tokens/icons/check.svg?react";
import useClipboard from "react-use-clipboard";
import { Modal } from "../Modal";
import { getAbsoluteRoomUrl } from "../matrix-utils";
import styles from "./InviteModal.module.css";
import { useRoomSharedKey } from "../e2ee/sharedKeyManagement";
import { Toast } from "../Toast";
interface Props {
room: Room;
open: boolean;
onDismiss: () => void;
}
export const InviteModal: FC<Props> = ({ room, open, onDismiss }) => {
const { t } = useTranslation();
const roomSharedKey = useRoomSharedKey(room.roomId);
const url = useMemo(
() =>
getAbsoluteRoomUrl(room.roomId, room.name, roomSharedKey ?? undefined),
[room, roomSharedKey]
);
const [, setCopied] = useClipboard(url);
const [toastOpen, setToastOpen] = useState(false);
const onToastDismiss = useCallback(() => setToastOpen(false), [setToastOpen]);
const onButtonClick = useCallback(
(e: MouseEvent) => {
e.stopPropagation();
setCopied();
onDismiss();
setToastOpen(true);
},
[setCopied, onDismiss]
);
return (
<>
<Modal title={t("Invite to this call")} open={open} onDismiss={onDismiss}>
<Text className={styles.url} size="sm" weight="semibold">
{url}
</Text>
<Button
className={styles.button}
Icon={LinkIcon}
onClick={onButtonClick}
data-testid="modal_inviteLink"
>
{t("Copy link")}
</Button>
</Modal>
<Toast
open={toastOpen}
onDismiss={onToastDismiss}
autoDismiss={2000}
Icon={CheckIcon}
>
{t("Link copied to clipboard")}
</Toast>
</>
);
};

1
src/room/LayoutToggle.module.css
View File

@@ -18,6 +18,7 @@ limitations under the License.
padding: 2px;
border: 1px solid var(--cpd-color-border-interactive-secondary);
border-radius: var(--cpd-radius-pill-effect);
background: var(--cpd-color-bg-canvas-default);
box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.5);
display: flex;
}

4
src/room/LayoutToggle.tsx
View File

@@ -17,8 +17,8 @@ limitations under the License.
import { ChangeEvent, FC, useCallback, useId } from "react";
import { useTranslation } from "react-i18next";
import { Tooltip } from "@vector-im/compound-web";
import { ReactComponent as SpotlightViewIcon } from "@vector-im/compound-design-tokens/icons/spotlight-view.svg";
import { ReactComponent as GridViewIcon } from "@vector-im/compound-design-tokens/icons/grid-view.svg";
import SpotlightViewIcon from "@vector-im/compound-design-tokens/icons/spotlight-view.svg?react";
import GridViewIcon from "@vector-im/compound-design-tokens/icons/grid-view.svg?react";
import classNames from "classnames";
import styles from "./LayoutToggle.module.css";

1
src/room/LobbyView.module.css
View File

@@ -23,7 +23,6 @@ limitations under the License.
flex: 1;
overflow: hidden;
height: 100%;
padding-block-end: var(--footerHeight);
}
@media (max-width: 500px) {

23
src/room/LobbyView.tsx
View File

@@ -16,7 +16,7 @@ limitations under the License.
import { FC, useCallback, useState } from "react";
import { useTranslation } from "react-i18next";
import { MatrixClient, RoomMember } from "matrix-js-sdk/src/matrix";
import { MatrixClient } from "matrix-js-sdk/src/matrix";
import { Button, Link } from "@vector-im/compound-web";
import classNames from "classnames";
import { useHistory } from "react-router-dom";
@@ -27,7 +27,7 @@ import { Header, LeftNav, RightNav, RoomHeaderInfo } from "../Header";
import { useLocationNavigation } from "../useLocationNavigation";
import { MatrixInfo, VideoPreview } from "./VideoPreview";
import { MuteStates } from "./MuteStates";
import { ShareButton } from "../button/ShareButton";
import { InviteButton } from "../button/InviteButton";
import {
HangupButton,
MicButton,
@@ -44,7 +44,7 @@ interface Props {
onEnter: () => void;
confineToRoom: boolean;
hideHeader: boolean;
participatingMembers: RoomMember[];
participantCount: number;
onShareClick: (() => void) | null;
}
@@ -55,7 +55,7 @@ export const LobbyView: FC<Props> = ({
onEnter,
confineToRoom,
hideHeader,
participatingMembers,
participantCount,
onShareClick,
}) => {
const { t } = useTranslation();
@@ -104,12 +104,11 @@ export const LobbyView: FC<Props> = ({
name={matrixInfo.roomName}
avatarUrl={matrixInfo.roomAvatar}
encrypted={matrixInfo.roomEncrypted}
participants={participatingMembers}
client={client}
participantCount={participantCount}
/>
</LeftNav>
<RightNav>
{onShareClick !== null && <ShareButton onClick={onShareClick} />}
{onShareClick !== null && <InviteButton onClick={onShareClick} />}
</RightNav>
</Header>
)}
@@ -129,16 +128,16 @@ export const LobbyView: FC<Props> = ({
<div className={inCallStyles.footer}>
{recentsButtonInFooter && recentsButton}
<div className={inCallStyles.buttons}>
<VideoButton
muted={!muteStates.video.enabled}
onPress={onVideoPress}
disabled={muteStates.video.setEnabled === null}
/>
<MicButton
muted={!muteStates.audio.enabled}
onPress={onAudioPress}
disabled={muteStates.audio.setEnabled === null}
/>
<VideoButton
muted={!muteStates.video.enabled}
onPress={onVideoPress}
disabled={muteStates.video.setEnabled === null}
/>
<SettingsButton onPress={openSettings} />
{!confineToRoom && <HangupButton onPress={onLeaveClick} />}
</div>

3
src/room/RoomAuthView.tsx
View File

@@ -17,6 +17,7 @@ limitations under the License.
import { FC, useCallback, useState } from "react";
import { useLocation } from "react-router-dom";
import { Trans, useTranslation } from "react-i18next";
import { logger } from "matrix-js-sdk/src/logger";
import styles from "./RoomAuthView.module.css";
import { Button } from "../button";
@@ -46,7 +47,7 @@ export const RoomAuthView: FC = () => {
typeof dataForDisplayName === "string" ? dataForDisplayName : "";
registerPasswordlessUser(displayName).catch((error) => {
console.error("Failed to register passwordless user", e);
logger.error("Failed to register passwordless user", e);
setLoading(false);
setError(error);
});

3
src/room/RoomPage.tsx
View File

@@ -16,6 +16,7 @@ limitations under the License.
import { FC, useEffect, useState, useCallback, ReactNode } from "react";
import { MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc/MatrixRTCSession";
import { logger } from "matrix-js-sdk/src/logger";
import { useClientLegacy } from "../ClientContext";
import { ErrorView, LoadingView } from "../FullScreenView";
@@ -37,7 +38,7 @@ export const RoomPage: FC = () => {
const roomIdOrAlias = roomId ?? roomAlias;
if (!roomIdOrAlias) {
console.error("No room specified");
logger.error("No room specified");
}
const [optInAnalytics, setOptInAnalytics] = useOptInAnalytics();

51
src/room/ShareModal.tsx
View File

@@ -1,51 +0,0 @@
/*
Copyright 2022 - 2023 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 { FC } from "react";
import { useTranslation } from "react-i18next";
import { Room } from "matrix-js-sdk";
import { Modal } from "../Modal";
import { CopyButton } from "../button";
import { getAbsoluteRoomUrl } from "../matrix-utils";
import styles from "./ShareModal.module.css";
import { useRoomSharedKey } from "../e2ee/sharedKeyManagement";
interface Props {
room: Room;
open: boolean;
onDismiss: () => void;
}
export const ShareModal: FC<Props> = ({ room, open, onDismiss }) => {
const { t } = useTranslation();
const roomSharedKey = useRoomSharedKey(room.roomId);
return (
<Modal title={t("Share this call")} open={open} onDismiss={onDismiss}>
<p>{t("Copy and share this call link")}</p>
<CopyButton
className={styles.copyButton}
value={getAbsoluteRoomUrl(
room.roomId,
room.name,
roomSharedKey ?? undefined
)}
data-testid="modal_inviteLink"
/>
</Modal>
);
};

3
src/room/VideoPreview.tsx
View File

@@ -24,6 +24,7 @@ import {
Track,
} from "livekit-client";
import classNames from "classnames";
import { logger } from "matrix-js-sdk/src/logger";
import { Avatar } from "../Avatar";
import styles from "./VideoPreview.module.css";
@@ -80,7 +81,7 @@ export const VideoPreview: FC<Props> = ({
},
},
(error) => {
console.error("Error while creating preview Tracks:", error);
logger.error("Error while creating preview Tracks:", error);
}
);
const videoTrack = useMemo(

8
src/rtcSessionHelpers.ts
View File

@@ -41,13 +41,15 @@ export function enterRTCSession(rtcSession: MatrixRTCSession): void {
// have started tracking by the time calls start getting created.
//groupCallOTelMembership?.onJoinCall();
// right now we asume everything is a room-scoped call
// right now we assume everything is a room-scoped call
const livekitAlias = rtcSession.room.roomId;
rtcSession.joinRoomSession([makeFocus(livekitAlias)]);
}
export function leaveRTCSession(rtcSession: MatrixRTCSession): void {
export async function leaveRTCSession(
rtcSession: MatrixRTCSession
): Promise<void> {
//groupCallOTelMembership?.onLeaveCall();
rtcSession.leaveRoomSession();
await rtcSession.leaveRoomSession();
}

33
src/settings/SettingsModal.tsx
View File

@@ -22,15 +22,14 @@ import { MatrixClient } from "matrix-js-sdk";
import { Modal } from "../Modal";
import styles from "./SettingsModal.module.css";
import { TabContainer, TabItem } from "../tabs/Tabs";
import { ReactComponent as AudioIcon } from "../icons/Audio.svg";
import { ReactComponent as VideoIcon } from "../icons/Video.svg";
import { ReactComponent as DeveloperIcon } from "../icons/Developer.svg";
import { ReactComponent as OverflowIcon } from "../icons/Overflow.svg";
import { ReactComponent as UserIcon } from "../icons/User.svg";
import { ReactComponent as FeedbackIcon } from "../icons/Feedback.svg";
import AudioIcon from "../icons/Audio.svg?react";
import VideoIcon from "../icons/Video.svg?react";
import DeveloperIcon from "../icons/Developer.svg?react";
import OverflowIcon from "../icons/Overflow.svg?react";
import UserIcon from "../icons/User.svg?react";
import FeedbackIcon from "../icons/Feedback.svg?react";
import { SelectInput } from "../input/SelectInput";
import {
useShowInspector,
useOptInAnalytics,
useDeveloperSettingsTab,
useShowConnectionStats,
@@ -38,8 +37,6 @@ import {
isFirefox,
} from "./useSetting";
import { FieldRow, InputField } from "../input/Input";
import { Button } from "../button";
import { useDownloadDebugLog } from "./submit-rageshake";
import { Body, Caption } from "../typography/Typography";
import { AnalyticsNotice } from "../analytics/AnalyticsNotice";
import { ProfileSettingsTab } from "./ProfileSettingsTab";
@@ -62,7 +59,6 @@ interface Props {
export const SettingsModal: FC<Props> = (props) => {
const { t } = useTranslation();
const [showInspector, setShowInspector] = useShowInspector();
const [optInAnalytics, setOptInAnalytics] = useOptInAnalytics();
const [developerSettingsTab, setDeveloperSettingsTab] =
useDeveloperSettingsTab();
@@ -70,8 +66,6 @@ export const SettingsModal: FC<Props> = (props) => {
useShowConnectionStats();
const [enableE2EE, setEnableE2EE] = useEnableE2EE();
const downloadDebugLog = useDownloadDebugLog();
// Generate a `SelectInput` with a list of devices for a given device kind.
const generateDeviceSelection = (
devices: MediaDevice,
@@ -237,18 +231,6 @@ export const SettingsModal: FC<Props> = (props) => {
})}
</Body>
</FieldRow>
<FieldRow>
<InputField
id="showInspector"
name="inspector"
label={t("Show call inspector")}
type="checkbox"
checked={showInspector}
onChange={(e: ChangeEvent<HTMLInputElement>): void =>
setShowInspector(e.target.checked)
}
/>
</FieldRow>
<FieldRow>
<InputField
id="showConnectionStats"
@@ -278,9 +260,6 @@ export const SettingsModal: FC<Props> = (props) => {
}
/>
</FieldRow>
<FieldRow>
<Button onPress={downloadDebugLog}>{t("Download debug logs")}</Button>
</FieldRow>
</TabItem>
);

101
src/settings/rageshake.ts
View File

@@ -41,6 +41,7 @@ import EventEmitter from "events";
import { throttle } from "lodash";
import { logger } from "matrix-js-sdk/src/logger";
import { randomString } from "matrix-js-sdk/src/randomstring";
import { LoggingMethod } from "loglevel";
// the length of log data we keep in indexeddb (and include in the reports)
const MAX_LOG_SIZE = 1024 * 1024 * 5; // 5 MB
@@ -50,15 +51,13 @@ const MAX_LOG_SIZE = 1024 * 1024 * 5; // 5 MB
// we can batch the writes a little.
const MAX_FLUSH_INTERVAL_MS = 2 * 1000;
// only descend this far into nested object trees
const DEPTH_LIMIT = 3;
enum ConsoleLoggerEvent {
Log = "log",
}
type LogFunction = (
...args: (Error | DOMException | object | string)[]
) => void;
type LogFunctionName = "log" | "info" | "warn" | "error";
// A class which monkey-patches the global console and stores log lines.
interface LogEntry {
@@ -69,37 +68,11 @@ interface LogEntry {
class ConsoleLogger extends EventEmitter {
private logs = "";
private originalFunctions: { [key in LogFunctionName]?: LogFunction } = {};
public monkeyPatch(consoleObj: Console): void {
// Monkey-patch console logging
const consoleFunctionsToLevels = {
log: "I",
info: "I",
warn: "W",
error: "E",
};
Object.entries(consoleFunctionsToLevels).forEach(([name, level]) => {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
const originalFn = consoleObj[name].bind(consoleObj);
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
this.originalFunctions[name] = originalFn;
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
consoleObj[name] = (...args): void => {
this.log(level, ...args);
originalFn(...args);
};
});
}
public log(
level: string,
...args: (Error | DOMException | object | string)[]
): void {
public log = (
level: LogLevel,
...args: (Error | DOMException | object | string | undefined)[]
): void => {
// We don't know what locale the user may be running so use ISO strings
const ts = new Date().toISOString();
@@ -129,7 +102,7 @@ class ConsoleLogger extends EventEmitter {
this.logs += line;
this.emit(ConsoleLoggerEvent.Log);
}
};
/**
* Returns the log lines to flush to disk and empties the internal log buffer
@@ -510,7 +483,7 @@ declare global {
*/
export function init(): Promise<void> {
global.mx_rage_logger = new ConsoleLogger();
global.mx_rage_logger.monkeyPatch(window.console);
setLogExtension(global.mx_rage_logger.log);
return tryInitStorage();
}
@@ -581,13 +554,65 @@ type StringifyReplacer = (
// Injects `<$ cycle-trimmed $>` wherever it cuts a cyclical object relationship
const getCircularReplacer = (): StringifyReplacer => {
const seen = new WeakSet();
return (key: string, value: unknown): unknown => {
const depthMap = new WeakMap<object, number>();
return function (this: unknown, key: string, value: unknown): unknown {
if (typeof value === "object" && value !== null) {
if (seen.has(value)) {
return "<$ cycle-trimmed $>";
}
seen.add(value);
let depth = 0;
if (this) {
depth = depthMap.get(this) ?? 0;
}
depthMap.set(value, depth + 1);
if (depth > DEPTH_LIMIT) return "<$ object-pruned $>";
}
return value;
};
};
enum LogLevel {
trace = 0,
debug = 1,
info = 2,
warn = 3,
error = 4,
silent = 5,
}
type LogExtensionFunc = (
level: LogLevel,
...rest: (Error | DOMException | object | string)[]
) => void;
type LogLevelString = keyof typeof LogLevel;
/**
* This method borrowed from livekit (who also use loglevel and in turn essentially
* took loglevel's example honouring log levels). Adds a loglevel logging extension
* in the recommended way.
*/
export function setLogExtension(extension: LogExtensionFunc): void {
const originalFactory = logger.methodFactory;
logger.methodFactory = function (
methodName,
configLevel,
loggerName
): LoggingMethod {
const rawMethod = originalFactory(methodName, configLevel, loggerName);
const logLevel = LogLevel[methodName as LogLevelString];
const needLog = logLevel >= configLevel && logLevel < LogLevel.silent;
return (...args) => {
rawMethod.apply(this, args);
if (needLog) {
extension(logLevel, ...args);
}
};
};
logger.setLevel(logger.getLevel()); // Be sure to call setLevel method in order to apply plugin
}

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

@@ -14,22 +14,16 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import {
ComponentProps,
useCallback,
useContext,
useEffect,
useState,
} from "react";
import { ComponentProps, useCallback, useEffect, useState } from "react";
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
import pako from "pako";
import { MatrixEvent } from "matrix-js-sdk/src/models/event";
import { ClientEvent } from "matrix-js-sdk/src/client";
import { logger } from "matrix-js-sdk/src/logger";
import { getLogsForReport } from "./rageshake";
import { useClient } from "../ClientContext";
import { InspectorContext } from "../room/GroupCallInspector";
import { Config } from "../config/Config";
import { ElementCallOpenTelemetry } from "../otel/otel";
import { RageshakeRequestModal } from "../room/RageshakeRequestModal";
@@ -57,10 +51,6 @@ export function useSubmitRageshake(): {
} {
const { client } = useClient();
// The value of the context is the whole tuple returned from setState,
// so we just want the current state.
const [inspectorState] = useContext(InspectorContext) ?? [];
const [{ sending, sent, error }, setState] = useState<{
sending: boolean;
sent: boolean;
@@ -269,16 +259,6 @@ export function useSubmitRageshake(): {
gzip(ElementCallOpenTelemetry.instance.rageshakeProcessor!.dump()),
"traces.json.gz"
);
if (inspectorState) {
body.append(
"file",
new Blob([JSON.stringify(inspectorState)], {
type: "text/plain",
}),
"groupcall.txt"
);
}
}
if (opts.rageshakeRequestId) {
@@ -296,10 +276,10 @@ export function useSubmitRageshake(): {
setState({ sending: false, sent: true, error: undefined });
} catch (error) {
setState({ sending: false, sent: false, error: error as Error });
console.error(error);
logger.error(error);
}
},
[client, inspectorState, sending]
[client, sending]
);
return {
@@ -310,27 +290,6 @@ export function useSubmitRageshake(): {
};
}
export function useDownloadDebugLog(): () => void {
const json = useContext(InspectorContext);
const downloadDebugLog = useCallback(() => {
const blob = new Blob([JSON.stringify(json)], { type: "application/json" });
const url = URL.createObjectURL(blob);
const el = document.createElement("a");
el.href = url;
el.download = "groupcall.json";
el.style.display = "none";
document.body.appendChild(el);
el.click();
setTimeout(() => {
URL.revokeObjectURL(url);
el.parentNode!.removeChild(el);
}, 0);
}, [json]);
return downloadDebugLog;
}
export function useRageshakeRequest(): (
roomId: string,
rageshakeRequestId: string

3
src/settings/useSetting.ts
View File

@@ -83,9 +83,6 @@ export const useSpatialAudio = (): DisableableSetting<boolean> => {
return [false, null];
};
export const useShowInspector = (): Setting<boolean> =>
useSetting("show-inspector", false);
// null = undecided
export const useOptInAnalytics = (): DisableableSetting<boolean | null> => {
const settingVal = useSetting<boolean | null>("opt-in-analytics", null);

66
src/tabs/Tabs.stories.tsx
View File

@@ -1,66 +0,0 @@
/*
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 { FC } from "react";
import { TabContainer, TabItem } from "./Tabs";
import { ReactComponent as AudioIcon } from "../icons/Audio.svg";
import { ReactComponent as VideoIcon } from "../icons/Video.svg";
import { ReactComponent as DeveloperIcon } from "../icons/Developer.svg";
import { Body } from "../typography/Typography";
export default {
title: "Tabs",
component: TabContainer,
parameters: {
layout: "fullscreen",
},
};
export const Tabs: FC = () => (
<TabContainer>
<TabItem
title={
<>
<AudioIcon width={16} height={16} />
<Body>Audio</Body>
</>
}
>
Audio Tab Content
</TabItem>
<TabItem
title={
<>
<VideoIcon width={16} height={16} />
<Body>Video</Body>
</>
}
>
Video Tab Content
</TabItem>
<TabItem
title={
<>
<DeveloperIcon width={16} height={16} />
<Body>Developer</Body>
</>
}
>
Developer Tab Content
</TabItem>
</TabContainer>
);

42
src/typography/Typography.stories.tsx
View File

@@ -1,42 +0,0 @@
/*
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 { FC } from "react";
import { Headline, Title, Subtitle, Body, Caption, Micro } from "./Typography";
export default {
title: "Typography",
parameters: {
layout: "fullscreen",
},
};
export const Typography: FC = () => (
<>
<Headline>Headline Semi Bold</Headline>
<Title>Title</Title>
<Subtitle>Subtitle</Subtitle>
<Subtitle fontWeight="semiBold">Subtitle Semi Bold</Subtitle>
<Body>Body</Body>
<Body fontWeight="semiBold">Body Semi Bold</Body>
<Caption>Caption</Caption>
<Caption fontWeight="semiBold">Caption Semi Bold</Caption>
<Caption fontWeight="bold">Caption Bold</Caption>
<Micro>Micro</Micro>
<Micro fontWeight="bold">Micro bold</Micro>
</>
);

7
src/video-grid/NewVideoGrid.module.css
View File

@@ -15,14 +15,11 @@ limitations under the License.
*/
.grid {
contain: strict;
contain: layout style;
position: relative;
flex-grow: 1;
margin-inline: var(--inline-content-inset);
padding-block-end: var(--footerHeight);
margin-block-start: var(--cpd-space-4x);
overflow-y: auto;
overflow-x: hidden;
margin-block: var(--cpd-space-4x);
}
.slots {

1
src/video-grid/VideoGrid.module.css
View File

@@ -19,5 +19,4 @@ limitations under the License.
overflow: hidden;
flex: 1;
touch-action: none;
margin-bottom: var(--footerHeight);
}

3
src/video-grid/VideoGrid.tsx
View File

@@ -39,6 +39,7 @@ import {
} from "@react-spring/web";
import useMeasure from "react-use-measure";
import { ResizeObserver as JuggleResizeObserver } from "@juggle/resize-observer";
import { logger } from "matrix-js-sdk/src/logger";
import styles from "./VideoGrid.module.css";
import { Layout } from "../room/LayoutToggle";
@@ -299,7 +300,7 @@ function getFreedomLayoutTilePositions(
}
if (tileCount > 12) {
console.warn("Over 12 tiles is not currently supported");
logger.warn("Over 12 tiles is not currently supported");
}
const { layoutDirection, itemGridRatio } = getGridLayout(

11
src/video-grid/VideoTile.module.css
View File

@@ -43,7 +43,8 @@ limitations under the License.
}
.videoTile.speaking {
outline: 4px solid var(--cpd-color-border-accent);
/* !important because speaking border should take priority over hover */
outline: 4px solid var(--cpd-color-border-accent) !important;
}
@media (hover: hover) {
@@ -70,8 +71,7 @@ limitations under the License.
padding: var(--cpd-space-1x);
padding-block: var(--cpd-space-1x);
color: var(--cpd-color-text-primary);
/* TODO: un-hardcode this color. It comes from the dark theme. */
background-color: rgba(237, 244, 252, 0.79);
background-color: var(--cpd-color-bg-canvas-default);
display: flex;
align-items: center;
border-radius: var(--cpd-radius-pill-effect);
@@ -82,11 +82,6 @@ limitations under the License.
box-shadow: var(--small-drop-shadow);
}
:global(.cpd-theme-dark) .nameTag {
/* TODO: un-hardcode this color. It comes from the light theme. */
background-color: rgba(2, 7, 13, 0.77);
}
.nameTag > svg {
flex-shrink: 0;
}

4
src/video-grid/VideoTile.tsx
View File

@@ -34,8 +34,8 @@ import {
RoomMember,
RoomMemberEvent,
} from "matrix-js-sdk/src/models/room-member";
import { ReactComponent as MicOnSolidIcon } from "@vector-im/compound-design-tokens/icons/mic-on-solid.svg";
import { ReactComponent as MicOffSolidIcon } from "@vector-im/compound-design-tokens/icons/mic-off-solid.svg";
import MicOnSolidIcon from "@vector-im/compound-design-tokens/icons/mic-on-solid.svg?react";
import MicOffSolidIcon from "@vector-im/compound-design-tokens/icons/mic-off-solid.svg?react";
import { Text } from "@vector-im/compound-web";
import { Avatar } from "../Avatar";

4
src/widget.ts
View File

@@ -70,9 +70,7 @@ interface WidgetHelpers {
*/
export const widget = ((): WidgetHelpers | null => {
try {
const query = new URLSearchParams(window.location.search);
const widgetId = query.get("widgetId");
const parentUrl = query.get("parentUrl");
const { widgetId, parentUrl } = getUrlParams();
if (widgetId && parentUrl) {
const parentOrigin = new URL(parentUrl).origin;