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

Merge branch 'livekit' into resize-observer

Browse Source
This commit is contained in:
Robin
2024-09-03 15:35:10 -04:00
parent b5f6343a5e c2cc0937c1
commit c8a2ef6a1d
134 changed files with 2547 additions and 4147 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/@types/global.d.ts vendored
View File

@@ -15,6 +15,7 @@ limitations under the License.
*/
import "matrix-js-sdk/src/@types/global";
import { Controls } from "../controls";
declare global {
interface Document {
@@ -23,6 +24,10 @@ declare global {
webkitFullscreenElement: HTMLElement | null;
}
interface Window {
controls: Controls;
}
interface HTMLElement {
// Safari only supports this prefixed, so tell the type system about it
webkitRequestFullscreen: () => void;

33
src/App.tsx
View File

@@ -22,7 +22,6 @@ import {
useLocation,
} from "react-router-dom";
import * as Sentry from "@sentry/react";
import { OverlayProvider } from "@react-aria/overlays";
import { History } from "history";
import { TooltipProvider } from "@vector-im/compound-web";
@@ -92,23 +91,21 @@ export const App: FC<AppProps> = ({ history }) => {
<ClientProvider>
<MediaDevicesProvider>
<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>
<DisconnectedBanner />
<Switch>
<SentryRoute exact path="/">
<HomePage />
</SentryRoute>
<SentryRoute exact path="/login">
<LoginPage />
</SentryRoute>
<SentryRoute exact path="/register">
<RegisterPage />
</SentryRoute>
<SentryRoute path="*">
<RoomPage />
</SentryRoute>
</Switch>
</Sentry.ErrorBoundary>
</MediaDevicesProvider>
</ClientProvider>

2
src/Avatar.tsx
View File

@@ -17,7 +17,7 @@ limitations under the License.
import { useMemo, FC } from "react";
import { Avatar as CompoundAvatar } from "@vector-im/compound-web";
import { getAvatarUrl } from "./matrix-utils";
import { getAvatarUrl } from "./utils/matrix";
import { useClient } from "./ClientContext";
export enum Size {

26
src/ClientContext.tsx
View File

@@ -33,13 +33,10 @@ import {
import { logger } from "matrix-js-sdk/src/logger";
import { useTranslation } from "react-i18next";
import { ISyncStateData, SyncState } from "matrix-js-sdk/src/sync";
import { MatrixError } from "matrix-js-sdk/src/matrix";
import { ErrorView } from "./FullScreenView";
import {
CryptoStoreIntegrityError,
fallbackICEServerAllowed,
initClient,
} from "./matrix-utils";
import { fallbackICEServerAllowed, initClient } from "./utils/matrix";
import { widget } from "./widget";
import {
PosthogAnalytics,
@@ -380,22 +377,17 @@ async function loadClient(): Promise<InitResult | null> {
passwordlessUser,
};
} catch (err) {
if (err instanceof CryptoStoreIntegrityError) {
if (err instanceof MatrixError && err.errcode === "M_UNKNOWN_TOKEN") {
// We can't use this session anymore, so let's log it out
try {
const client = await initClient(initClientParams, false); // Don't need the crypto store just to log out)
await client.logout(true);
} catch (err) {
logger.warn(
"The previous session was lost, and we couldn't log it out, " +
err +
"either",
);
}
logger.log(
"The session from local store is invalid; continuing without a client",
);
clearSession();
// returning null = "no client` pls register" (undefined = "loading" which is the current value when reaching this line)
return null;
}
throw err;
}
/* eslint-enable camelcase */
} catch (err) {
clearSession();
throw err;

24
src/FullScreenView.tsx
View File

@@ -20,9 +20,10 @@ 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 { Button } from "@vector-im/compound-web";
import { Header, HeaderLogo, LeftNav, RightNav } from "./Header";
import { LinkButton, Button } from "./button";
import { LinkButton } from "./button";
import styles from "./FullScreenView.module.css";
import { TranslatedError } from "./TranslatedError";
import { Config } from "./config/Config";
@@ -81,21 +82,11 @@ export const ErrorView: FC<ErrorViewProps> = ({ error }) => {
<RageshakeButton description={`***Error View***: ${error.message}`} />
{!confineToRoom &&
(location.pathname === "/" ? (
<Button
size="lg"
variant="default"
className={styles.homeLink}
onPress={onReload}
>
<Button className={styles.homeLink} onClick={onReload}>
{t("return_home_button")}
</Button>
) : (
<LinkButton
size="lg"
variant="default"
className={styles.homeLink}
to="/"
>
<LinkButton className={styles.homeLink} to="/">
{t("return_home_button")}
</LinkButton>
))}
@@ -122,12 +113,7 @@ export const CrashView: FC = () => {
)}
<RageshakeButton description="***Soft Crash***" />
<Button
size="lg"
variant="default"
className={styles.wideButton}
onPress={onReload}
>
<Button className={styles.wideButton} onClick={onReload}>
{t("return_home_button")}
</Button>
</FullScreenView>

49
src/ListBox.module.css
View File

@@ -1,49 +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.
*/
.listBox {
margin: 0;
padding: 0;
max-height: 150px;
overflow-y: auto;
list-style: none;
background-color: transparent;
border: 1px solid var(--cpd-color-border-interactive-secondary);
background-color: var(--cpd-color-bg-canvas-default);
border-radius: 8px;
}
.option {
display: flex;
align-items: center;
justify-content: space-between;
background-color: transparent;
color: var(--cpd-color-text-primary);
padding: 8px 16px;
outline: none;
cursor: pointer;
font-size: var(--font-size-body);
min-height: 32px;
}
.option.focused {
background-color: rgba(111, 120, 130, 0.2);
}
.option.disabled {
color: var(--cpd-color-text-disabled);
background-color: var(--stopgap-bgColor3);
}

116
src/ListBox.tsx
View File

@@ -1,116 +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 {
MutableRefObject,
PointerEvent,
ReactNode,
useCallback,
useRef,
} from "react";
import { useListBox, useOption, AriaListBoxOptions } from "@react-aria/listbox";
import { ListState } from "@react-stately/list";
import { Node } from "@react-types/shared";
import classNames from "classnames";
import styles from "./ListBox.module.css";
interface ListBoxProps<T> extends AriaListBoxOptions<T> {
optionClassName: string;
state: ListState<T>;
className?: string;
listBoxRef?: MutableRefObject<HTMLUListElement>;
}
export function ListBox<T>({
state,
optionClassName,
className,
listBoxRef,
...rest
}: ListBoxProps<T>): ReactNode {
const ref = useRef<HTMLUListElement>(null);
const listRef = listBoxRef ?? ref;
const { listBoxProps } = useListBox(rest, state, listRef);
return (
<ul
{...listBoxProps}
ref={listRef}
className={classNames(styles.listBox, className)}
>
{[...state.collection].map((item) => (
<Option
key={item.key}
item={item}
state={state}
className={optionClassName}
/>
))}
</ul>
);
}
interface OptionProps<T> {
className: string;
state: ListState<T>;
item: Node<T>;
}
function Option<T>({ item, state, className }: OptionProps<T>): ReactNode {
const ref = useRef(null);
const { optionProps, isSelected, isFocused, isDisabled } = useOption(
{ key: item.key },
state,
ref,
);
// Hack: remove the onPointerUp event handler and re-wire it to
// onClick. Chrome Android triggers a click event after the onpointerup
// event which leaks through to elements underneath the z-indexed select
// popover. preventDefault / stopPropagation don't have any effect, even
// adding just a dummy onClick handler still doesn't work, but it's fine
// if we handle just onClick.
// https://github.com/vector-im/element-call/issues/762
const origPointerUp = optionProps.onPointerUp;
delete optionProps.onPointerUp;
optionProps.onClick = useCallback(
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
(e) => {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
origPointerUp(e as unknown as PointerEvent<HTMLElement>);
},
[origPointerUp],
);
return (
<li
{...optionProps}
ref={ref}
className={classNames(styles.option, className, {
[styles.selected]: isSelected,
[styles.focused]: isFocused,
[styles.disables]: isDisabled,
})}
>
{item.rendered}
</li>
);
}

73
src/Menu.module.css
View File

@@ -1,73 +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.
*/
.menu {
width: 100%;
padding: 0;
margin: 0;
list-style: none;
}
.menuItem {
cursor: pointer;
height: 48px;
display: flex;
align-items: center;
padding: 0 12px;
color: var(--cpd-color-text-primary);
font-size: var(--font-size-body);
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.menuItem > * {
margin: 0 10px 0 0;
}
.menuItem > :last-child {
margin-right: 0;
}
.menuItem.focused,
.menuItem:hover {
background-color: var(--cpd-color-bg-action-secondary-hovered);
}
.menuItem:active {
background-color: var(--cpd-color-bg-action-secondary-pressed);
}
.menuItem.focused:first-child,
.menuItem:hover:first-child {
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
.menuItem.focused:last-child,
.menuItem:hover:last-child {
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
}
.checkIcon {
position: absolute;
right: 16px;
}
.checkIcon * {
stroke: var(--cpd-color-text-primary);
}

102
src/Menu.tsx
View File

@@ -1,102 +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 { Key, ReactNode, useRef, useState } from "react";
import { AriaMenuOptions, useMenu, useMenuItem } from "@react-aria/menu";
import { TreeState, useTreeState } from "@react-stately/tree";
import { mergeProps } from "@react-aria/utils";
import { useFocus } from "@react-aria/interactions";
import classNames from "classnames";
import { Node } from "@react-types/shared";
import styles from "./Menu.module.css";
interface MenuProps<T> extends AriaMenuOptions<T> {
className?: string;
onClose: () => void;
onAction: (value: Key) => void;
label?: string;
}
export function Menu<T extends object>({
className,
onAction,
onClose,
label,
...rest
}: MenuProps<T>): ReactNode {
const state = useTreeState<T>({ ...rest, selectionMode: "none" });
const menuRef = useRef(null);
const { menuProps } = useMenu<T>(rest, state, menuRef);
return (
<ul
{...mergeProps(menuProps, rest)}
ref={menuRef}
className={classNames(styles.menu, className)}
>
{[...state.collection].map((item) => (
<MenuItem
key={item.key}
item={item}
state={state}
onAction={onAction}
onClose={onClose}
/>
))}
</ul>
);
}
interface MenuItemProps<T> {
item: Node<T>;
state: TreeState<T>;
onAction: (value: Key) => void;
onClose: () => void;
}
function MenuItem<T>({
item,
state,
onAction,
onClose,
}: MenuItemProps<T>): ReactNode {
const ref = useRef(null);
const { menuItemProps } = useMenuItem(
{
key: item.key,
onAction,
onClose,
},
state,
ref,
);
const [isFocused, setFocused] = useState(false);
const { focusProps } = useFocus({ onFocusChange: setFocused });
return (
<li
{...mergeProps(menuItemProps, focusProps)}
ref={ref}
className={classNames(styles.menuItem, {
[styles.focused]: isFocused,
})}
>
{item.rendered}
</li>
);
}

4
src/Modal.module.css
View File

@@ -134,6 +134,10 @@ body[data-platform="ios"] .drawer {
padding-block: var(--cpd-space-9x) var(--cpd-space-10x);
}
.modal.tabbed .body {
padding-block-start: 0;
}
.handle {
content: "";
position: absolute;

12
src/Modal.tsx
View File

@@ -15,7 +15,6 @@ limitations under the License.
*/
import { FC, ReactNode, useCallback } from "react";
import { AriaDialogProps } from "@react-types/dialog";
import { useTranslation } from "react-i18next";
import {
Root as DialogRoot,
@@ -35,8 +34,7 @@ import styles from "./Modal.module.css";
import overlayStyles from "./Overlay.module.css";
import { useMediaQuery } from "./useMediaQuery";
// TODO: Support tabs
export interface Props extends AriaDialogProps {
export interface Props {
title: string;
children: ReactNode;
className?: string;
@@ -52,6 +50,11 @@ export interface Props extends AriaDialogProps {
* will be non-dismissable.
*/
onDismiss?: () => void;
/**
* Whether the modal content has tabs.
*/
// TODO: Better tabs support
tabbed?: boolean;
}
/**
@@ -64,6 +67,7 @@ export const Modal: FC<Props> = ({
className,
open,
onDismiss,
tabbed,
...rest
}) => {
const { t } = useTranslation();
@@ -92,6 +96,7 @@ export const Modal: FC<Props> = ({
overlayStyles.overlay,
styles.modal,
styles.drawer,
{ [styles.tabbed]: tabbed },
)}
{...rest}
>
@@ -123,6 +128,7 @@ export const Modal: FC<Props> = ({
overlayStyles.animate,
styles.modal,
styles.dialog,
{ [styles.tabbed]: tabbed },
)}
>
<div className={styles.content}>

11
src/Banner.module.css → src/QrCode.module.css
View File

@@ -1,5 +1,5 @@
/*
Copyright 2023 New Vector Ltd
Copyright 2024 New Vector Ltd
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
@@ -14,9 +14,8 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.banner {
flex: 1;
border-radius: 8px;
padding: 16px;
background-color: var(--cpd-color-bg-subtle-primary);
.qrCode img {
max-width: 100%;
image-rendering: pixelated;
border-radius: var(--cpd-space-4x);
}

25
src/Banner.tsx → src/QrCode.test.tsx
View File

@@ -1,5 +1,5 @@
/*
Copyright 2023 New Vector Ltd
Copyright 2024 New Vector Ltd
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
@@ -14,14 +14,21 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import { FC, ReactNode } from "react";
import { describe, expect, test } from "vitest";
import { render, configure } from "@testing-library/react";
import styles from "./Banner.module.css";
import { QrCode } from "./QrCode";
interface Props {
children: ReactNode;
}
configure({
defaultHidden: true,
});
export const Banner: FC<Props> = ({ children }) => {
return <div className={styles.banner}>{children}</div>;
};
describe("QrCode", () => {
test("renders", async () => {
const { container, findByRole } = render(
<QrCode data="foo" className="bar" />,
);
(await findByRole("img")) as HTMLImageElement;
expect(container.firstChild).toMatchSnapshot();
});
});

57
src/QrCode.tsx Normal file
View File

@@ -0,0 +1,57 @@
/*
Copyright 2024 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, useEffect, useState } from "react";
import { toDataURL } from "qrcode";
import classNames from "classnames";
import { t } from "i18next";
import styles from "./QrCode.module.css";
interface Props {
data: string;
className?: string;
}
export const QrCode: FC<Props> = ({ data, className }) => {
const [url, setUrl] = useState<string | null>(null);
useEffect(() => {
let isCancelled = false;
toDataURL(data, { errorCorrectionLevel: "L" })
.then((url) => {
if (!isCancelled) {
setUrl(url);
}
})
.catch((reason) => {
if (!isCancelled) {
setUrl(null);
}
});
return (): void => {
isCancelled = true;
};
}, [data]);
return (
<div className={classNames(styles.qrCode, className)}>
{url && <img src={url} alt={t("qr_code")} />}
</div>
);
};

85
src/Toast.test.tsx Normal file
View File

@@ -0,0 +1,85 @@
/*
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 { describe, expect, test, vi } from "vitest";
import { render, configure } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { Toast } from "../src/Toast";
import { withFakeTimers } from "./utils/test";
configure({
defaultHidden: true,
});
// Test Explanation:
// This test the toast. We need to use { document: window.document } because the toast listens
// for user input on `window`.
describe("Toast", () => {
test("renders", () => {
const { queryByRole } = render(
<Toast open={false} onDismiss={() => {}}>
Hello world!
</Toast>,
);
expect(queryByRole("dialog")).toBe(null);
const { getByRole } = render(
<Toast open={true} onDismiss={() => {}}>
Hello world!
</Toast>,
);
expect(getByRole("dialog")).toMatchSnapshot();
});
test("dismisses when Esc is pressed", async () => {
const user = userEvent.setup({ document: window.document });
const onDismiss = vi.fn();
render(
<Toast open={true} onDismiss={onDismiss}>
Hello world!
</Toast>,
);
await user.keyboard("[Escape]");
expect(onDismiss).toHaveBeenCalled();
});
test("dismisses when background is clicked", async () => {
const user = userEvent.setup();
const onDismiss = vi.fn();
const { getByRole, unmount } = render(
<Toast open={true} onDismiss={onDismiss}>
Hello world!
</Toast>,
);
const background = getByRole("dialog").previousSibling! as Element;
await user.click(background);
expect(onDismiss).toHaveBeenCalled();
unmount();
});
test("dismisses itself after the specified timeout", () => {
withFakeTimers(() => {
const onDismiss = vi.fn();
render(
<Toast open={true} onDismiss={onDismiss} autoDismiss={2000}>
Hello world!
</Toast>,
);
vi.advanceTimersByTime(2000);
expect(onDismiss).toHaveBeenCalled();
});
});
});

2
src/Toast.tsx
View File

@@ -86,7 +86,7 @@ export const Toast: FC<Props> = ({
<DialogOverlay
className={classNames(overlayStyles.bg, overlayStyles.animate)}
/>
<DialogContent asChild>
<DialogContent aria-describedby={undefined} asChild>
<DialogClose
className={classNames(
overlayStyles.overlay,

30
src/Tooltip.module.css
View File

@@ -1,30 +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.
*/
.tooltip {
background-color: var(--cpd-color-bg-subtle-secondary);
flex-direction: row;
justify-content: center;
align-items: center;
padding: 10px;
color: var(--cpd-color-text-primary);
border-radius: 8px;
max-width: 135px;
width: max-content;
font-size: var(--font-size-caption);
font-weight: 500;
text-align: center;
}

118
src/Tooltip.tsx
View File

@@ -1,118 +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 {
ForwardedRef,
forwardRef,
ReactElement,
ReactNode,
useRef,
} from "react";
import {
TooltipTriggerState,
useTooltipTriggerState,
} from "@react-stately/tooltip";
import { FocusableProvider } from "@react-aria/focus";
import { useTooltipTrigger, useTooltip } from "@react-aria/tooltip";
import { mergeProps, useObjectRef } from "@react-aria/utils";
import classNames from "classnames";
import { OverlayContainer, useOverlayPosition } from "@react-aria/overlays";
import { Placement } from "@react-types/overlays";
import styles from "./Tooltip.module.css";
interface TooltipProps {
className?: string;
state: TooltipTriggerState;
children: ReactNode;
}
const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
(
{ state, className, children, ...rest }: TooltipProps,
ref: ForwardedRef<HTMLDivElement>,
) => {
const { tooltipProps } = useTooltip(rest, state);
return (
<div
className={classNames(styles.tooltip, className)}
{...mergeProps(rest, tooltipProps)}
ref={ref}
>
{children}
</div>
);
},
);
Tooltip.displayName = "Tooltip";
interface TooltipTriggerProps {
children: ReactElement;
placement?: Placement;
delay?: number;
tooltip: () => string;
}
export const TooltipTrigger = forwardRef<HTMLElement, TooltipTriggerProps>(
(
{ children, placement, tooltip, ...rest }: TooltipTriggerProps,
ref: ForwardedRef<HTMLElement>,
) => {
const tooltipTriggerProps = { delay: 250, ...rest };
const tooltipState = useTooltipTriggerState(tooltipTriggerProps);
const triggerRef = useObjectRef<HTMLElement>(ref);
const overlayRef = useRef<HTMLDivElement>(null);
const { triggerProps, tooltipProps } = useTooltipTrigger(
tooltipTriggerProps,
tooltipState,
triggerRef,
);
const { overlayProps } = useOverlayPosition({
placement: placement || "top",
targetRef: triggerRef,
overlayRef,
isOpen: tooltipState.isOpen,
offset: 12,
});
return (
<FocusableProvider ref={triggerRef} {...triggerProps}>
<children.type
{...mergeProps<typeof children.props | typeof rest>(
children.props,
rest,
)}
/>
{tooltipState.isOpen && (
<OverlayContainer>
<Tooltip
state={tooltipState}
ref={overlayRef}
{...mergeProps(tooltipProps, overlayProps)}
>
{tooltip()}
</Tooltip>
</OverlayContainer>
)}
</FocusableProvider>
);
},
);
TooltipTrigger.displayName = "TooltipTrigger";

98
src/UrlParams.test.ts Normal file
View File

@@ -0,0 +1,98 @@
/*
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 { describe, expect, it } from "vitest";
import { getRoomIdentifierFromUrl } from "../src/UrlParams";
const ROOM_NAME = "roomNameHere";
const ROOM_ID = "!d45f138fsd";
const ORIGIN = "https://call.element.io";
const HOMESERVER = "localhost";
describe("UrlParams", () => {
describe("handles URL with /room/", () => {
it("and nothing else", () => {
expect(
getRoomIdentifierFromUrl(`/room/${ROOM_NAME}`, "", "").roomAlias,
).toBe(`#${ROOM_NAME}:${HOMESERVER}`);
});
it("and #", () => {
expect(
getRoomIdentifierFromUrl("", `${ORIGIN}/room/`, `#${ROOM_NAME}`)
.roomAlias,
).toBe(`#${ROOM_NAME}:${HOMESERVER}`);
});
it("and # and server part", () => {
expect(
getRoomIdentifierFromUrl("", `/room/`, `#${ROOM_NAME}:${HOMESERVER}`)
.roomAlias,
).toBe(`#${ROOM_NAME}:${HOMESERVER}`);
});
it("and server part", () => {
expect(
getRoomIdentifierFromUrl(`/room/${ROOM_NAME}:${HOMESERVER}`, "", "")
.roomAlias,
).toBe(`#${ROOM_NAME}:${HOMESERVER}`);
});
});
describe("handles URL without /room/", () => {
it("and nothing else", () => {
expect(getRoomIdentifierFromUrl(`/${ROOM_NAME}`, "", "").roomAlias).toBe(
`#${ROOM_NAME}:${HOMESERVER}`,
);
});
it("and with #", () => {
expect(getRoomIdentifierFromUrl("", "", `#${ROOM_NAME}`).roomAlias).toBe(
`#${ROOM_NAME}:${HOMESERVER}`,
);
});
it("and with # and server part", () => {
expect(
getRoomIdentifierFromUrl("", "", `#${ROOM_NAME}:${HOMESERVER}`)
.roomAlias,
).toBe(`#${ROOM_NAME}:${HOMESERVER}`);
});
it("and with server part", () => {
expect(
getRoomIdentifierFromUrl(`/${ROOM_NAME}:${HOMESERVER}`, "", "")
.roomAlias,
).toBe(`#${ROOM_NAME}:${HOMESERVER}`);
});
});
describe("handles search params", () => {
it("(roomId)", () => {
expect(
getRoomIdentifierFromUrl("", `?roomId=${ROOM_ID}`, "").roomId,
).toBe(ROOM_ID);
});
});
it("ignores room alias", () => {
expect(
getRoomIdentifierFromUrl("", `/room/${ROOM_NAME}:${HOMESERVER}`, "")
.roomAlias,
).toBeFalsy();
});
});

8
src/UserMenu.module.css
View File

@@ -21,6 +21,14 @@ limitations under the License.
flex-shrink: 0;
}
.userButton {
appearance: none;
background: none;
border: none;
margin: 0;
cursor: pointer;
}
.userButton svg * {
fill: var(--cpd-color-icon-primary);
}

57
src/UserMenu.tsx
View File

@@ -14,21 +14,17 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import { FC, ReactNode, useCallback, useMemo } from "react";
import { Item } from "@react-stately/collections";
import { FC, useMemo, useState } from "react";
import { useLocation } from "react-router-dom";
import { useTranslation } from "react-i18next";
import { Menu, MenuItem } from "@vector-im/compound-web";
import { Button, LinkButton } from "./button";
import { PopoverMenuTrigger } from "./popover/PopoverMenu";
import { Menu } from "./Menu";
import { TooltipTrigger } from "./Tooltip";
import { LinkButton } from "./button";
import { Avatar, Size } from "./Avatar";
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";
interface Props {
@@ -91,7 +87,7 @@ export const UserMenu: FC<Props> = ({
return arr;
}, [isAuthenticated, isPasswordlessUser, displayName, preventNavigation, t]);
const tooltip = useCallback(() => t("common.profile"), [t]);
const [open, setOpen] = useState(false);
if (!isAuthenticated) {
return (
@@ -102,10 +98,15 @@ export const UserMenu: FC<Props> = ({
}
return (
<PopoverMenuTrigger placement="bottom right">
<TooltipTrigger tooltip={tooltip} placement="bottom left">
<Button
variant="icon"
<Menu
title={t("a11y.user_menu")}
showTitle={false}
align="end"
open={open}
onOpenChange={setOpen}
trigger={
<button
aria-label={t("common.profile")}
className={styles.userButton}
data-testid="usermenu_open"
>
@@ -119,26 +120,18 @@ export const UserMenu: FC<Props> = ({
) : (
<UserIcon />
)}
</Button>
</TooltipTrigger>
{
// eslint-disable-next-line @typescript-eslint/no-explicit-any
(props: any): ReactNode => (
<Menu {...props} label={t("a11y.user_menu")} onAction={onAction}>
{items.map(({ key, icon: Icon, label, dataTestid }) => (
<Item key={key} textValue={label}>
<Icon
width={24}
height={24}
className={styles.menuIcon}
data-testid={dataTestid}
/>
<Body overflowEllipsis>{label}</Body>
</Item>
))}
</Menu>
)
</button>
}
</PopoverMenuTrigger>
>
{items.map(({ key, icon: Icon, label, dataTestid }) => (
<MenuItem
key={key}
Icon={Icon}
label={label}
data-test-id={dataTestid}
onSelect={() => onAction(key)}
/>
))}
</Menu>
);
};

12
src/__snapshots__/QrCode.test.tsx.snap Normal file
View File

@@ -0,0 +1,12 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`QrCode > renders 1`] = `
<div
class="qrCode bar"
>
<img
alt="qr_code"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHQAAAB0CAYAAABUmhYnAAAAAklEQVR4AewaftIAAALBSURBVO3BQW7kQAwEwSxC//9yro88NSBI4/UQjIg/WGMUa5RijVKsUYo1SrFGKdYoxRqlWKMUa5RijVKsUYo1SrFGKdYoxRrl4qEk/CaVkyR0Kl0STlS6JPwmlSeKNUqxRinWKBcvU3lTEk6S8ITKHSpvSsKbijVKsUYp1igXH5aEO1Q+SaVLQqdyRxLuUPmkYo1SrFGKNcrFl1PpknCShE5lkmKNUqxRijXKxZdLQqdyotIloVP5ZsUapVijFGuUiw9T+UuS8CaVv6RYoxRrlGKNcvGyJPwlSehUuiTckYS/rFijFGuUYo0Sf/DFkvAmlW9WrFGKNUqxRrl4KAknKl0SOpWTJJyodEk4UbkjCXeodEk4UXlTsUYp1ijFGuXiIZUuCXck4USlS0KXhE7lk1TelIRO5YlijVKsUYo1ysXLVLok3KHSJaFT6ZLQJaFTOUnCicodSehUTpLwpmKNUqxRijXKxUNJ6FSeSEKn0iXhROUkCZ3Kb0pCp/KmYo1SrFGKNcrFh6mcJKFT6ZJwotIloVPpVLokdCpdEjqVLgmdyh1J6FSeKNYoxRqlWKPEH3yxJHQqJ0noVO5IwolKl4ROpUtCp/JEsUYp1ijFGuXioST8JpU7ktCpnCShUzlROVHpktCpvKlYoxRrlGKNcvEylTcl4USlS8JJEt6UhBOVTqVLQqfyRLFGKdYoxRrl4sOScIfKEyonSehUTpJwh0qXhN9UrFGKNUqxRrn4ckn4JJU7kvA/FWuUYo1SrFEuvpxKl4QTlS4JncodSehU7kjCm4o1SrFGKdYoFx+m8klJOFE5UemScKJyRxI6lU7lTcUapVijFGuUi5cl4X9SOUnCicoTSThJQqfypmKNUqxRijVK/MEao1ijFGuUYo1SrFGKNUqxRinWKMUapVijFGuUYo1SrFGKNUqxRinWKP8AKoQP/lIBoMIAAAAASUVORK5CYII="
/>
</div>
`;

21
src/__snapshots__/Toast-test.tsx.snap Normal file
View File

@@ -0,0 +1,21 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`Toast renders 1`] = `
<button
aria-labelledby="radix-:r4:"
class="overlay animate toast"
data-state="open"
id="radix-:r3:"
role="dialog"
style="pointer-events: auto;"
tabindex="-1"
type="button"
>
<h3
class="_typography_yh5dq_162 _font-body-sm-semibold_yh5dq_45"
id="radix-:r4:"
>
Hello world!
</h3>
</button>
`;

21
src/__snapshots__/Toast.test.tsx.snap Normal file
View File

@@ -0,0 +1,21 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`Toast > renders 1`] = `
<button
aria-labelledby="radix-:r4:"
class="overlay animate toast"
data-state="open"
id="radix-:r3:"
role="dialog"
style="pointer-events: auto;"
tabindex="-1"
type="button"
>
<h3
class="_typography_yh5dq_162 _font-body-sm-semibold_yh5dq_45"
id="radix-:r4:"
>
Hello world!
</h3>
</button>
`;

4
src/analytics/PosthogAnalytics.ts
View File

@@ -16,7 +16,7 @@ limitations under the License.
import posthog, { CaptureOptions, PostHog, Properties } from "posthog-js";
import { logger } from "matrix-js-sdk/src/logger";
import { MatrixClient } from "matrix-js-sdk";
import { MatrixClient } from "matrix-js-sdk/src/matrix";
import { Buffer } from "buffer";
import { widget } from "../widget";
@@ -144,7 +144,7 @@ export class PosthogAnalytics {
advanced_disable_decide: true,
});
this.enabled = true;
} else {
} else if (import.meta.env.MODE !== "test") {
logger.info(
"Posthog is not enabled because there is no api key or no host given in the config",
);

2
src/analytics/PosthogSpanProcessor.ts
View File

@@ -72,7 +72,7 @@ export class PosthogSpanProcessor implements SpanProcessor {
try {
return JSON.parse(data);
} catch (e) {
logger.warn("Invalid prev call data", data);
logger.warn("Invalid prev call data", data, "error:", e);
return null;
}
}

44
src/array-utils.ts
View File

@@ -1,44 +0,0 @@
/*
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.
*/
/**
* Gets the index of the last element in the array to satsify the given
* predicate.
*/
// TODO: remove this once TypeScript recognizes the existence of
// Array.prototype.findLastIndex
export function findLastIndex<T>(
array: T[],
predicate: (item: T, index: number) => boolean,
): number | null {
for (let i = array.length - 1; i >= 0; i--) {
if (predicate(array[i], i)) return i;
}
return null;
}
/**
* Counts the number of elements in an array that satsify the given predicate.
*/
export const count = <T>(
array: T[],
predicate: (item: T, index: number) => boolean,
): number =>
array.reduce(
(acc, item, index) => (predicate(item, index) ? acc + 1 : acc),
0,
);

6
src/auth/LoginPage.tsx
View File

@@ -17,11 +17,11 @@ limitations under the License.
import { FC, FormEvent, useCallback, useRef, useState } from "react";
import { useHistory, useLocation, Link } from "react-router-dom";
import { Trans, useTranslation } from "react-i18next";
import { Button } from "@vector-im/compound-web";
import Logo from "../icons/LogoLarge.svg?react";
import { useClient } from "../ClientContext";
import { FieldRow, InputField, ErrorMessage } from "../input/Input";
import { Button } from "../button";
import styles from "./LoginPage.module.css";
import { useInteractiveLogin } from "./useInteractiveLogin";
import { usePageTitle } from "../usePageTitle";
@@ -32,8 +32,8 @@ export const LoginPage: FC = () => {
const { t } = useTranslation();
usePageTitle(t("login_title"));
const { setClient } = useClient();
const login = useInteractiveLogin();
const { client, setClient } = useClient();
const login = useInteractiveLogin(client);
const homeserver = Config.defaultHomeserverUrl(); // TODO: Make this configurable
const usernameRef = useRef<HTMLInputElement>(null);
const passwordRef = useRef<HTMLInputElement>(null);

4
src/auth/RegisterPage.tsx
View File

@@ -28,9 +28,9 @@ 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 { Button } from "@vector-im/compound-web";
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";
@@ -56,7 +56,7 @@ export const RegisterPage: FC = () => {
const [error, setError] = useState<Error>();
const [password, setPassword] = useState("");
const [passwordConfirmation, setPasswordConfirmation] = useState("");
const { recaptchaKey, register } = useInteractiveRegistration();
const { recaptchaKey, register } = useInteractiveRegistration(client);
const { execute, reset, recaptchaId } = useRecaptcha(recaptchaKey);
const onSubmitRegisterForm = useCallback(

98
src/auth/useInteractiveLogin.ts
View File

@@ -22,10 +22,17 @@ import {
MatrixClient,
} from "matrix-js-sdk/src/matrix";
import { initClient } from "../matrix-utils";
import { initClient } from "../utils/matrix";
import { Session } from "../ClientContext";
export function useInteractiveLogin(): (
/**
* This provides the login method to login using user credentials.
* @param oldClient If there is an already authenticated client it should be passed to this hook
* this allows the interactive login to sign out the client before logging in.
* @returns A async method that can be called/awaited to log in with the provided credentials.
*/
export function useInteractiveLogin(
oldClient?: MatrixClient,
): (
homeserver: string,
username: string,
password: string,
@@ -36,47 +43,52 @@ export function useInteractiveLogin(): (
username: string,
password: string,
) => Promise<[MatrixClient, Session]>
>(async (homeserver: string, username: string, password: string) => {
const authClient = createClient({ baseUrl: homeserver });
>(
async (homeserver: string, username: string, password: string) => {
const authClient = createClient({ baseUrl: homeserver });
const interactiveAuth = new InteractiveAuth({
matrixClient: authClient,
doRequest: (): Promise<LoginResponse> =>
authClient.login("m.login.password", {
identifier: {
type: "m.id.user",
user: username,
},
password,
}),
stateUpdated: (): void => {},
requestEmailToken: (): Promise<{ sid: string }> => {
return Promise.resolve({ sid: "" });
},
});
const interactiveAuth = new InteractiveAuth({
matrixClient: authClient,
doRequest: (): Promise<LoginResponse> =>
authClient.login("m.login.password", {
identifier: {
type: "m.id.user",
user: username,
},
password,
}),
stateUpdated: (): void => {},
requestEmailToken: (): Promise<{ sid: string }> => {
return Promise.resolve({ sid: "" });
},
});
// XXX: This claims to return an IAuthData which contains none of these
// things - the js-sdk types may be wrong?
/* eslint-disable camelcase,@typescript-eslint/no-explicit-any */
const { user_id, access_token, device_id } =
(await interactiveAuth.attemptAuth()) as any;
const session = {
user_id,
access_token,
device_id,
passwordlessUser: false,
};
// XXX: This claims to return an IAuthData which contains none of these
// things - the js-sdk types may be wrong?
/* eslint-disable camelcase,@typescript-eslint/no-explicit-any */
const { user_id, access_token, device_id } =
(await interactiveAuth.attemptAuth()) as any;
const session = {
user_id,
access_token,
device_id,
passwordlessUser: false,
};
const client = await initClient(
{
baseUrl: homeserver,
accessToken: access_token,
userId: user_id,
deviceId: device_id,
},
false,
);
/* eslint-enable camelcase */
return [client, session];
}, []);
// To not confuse the rust crypto sessions we need to logout the old client before initializing the new one.
await oldClient?.logout(true);
const client = await initClient(
{
baseUrl: homeserver,
accessToken: access_token,
userId: user_id,
deviceId: device_id,
},
false,
);
/* eslint-enable camelcase */
return [client, session];
},
[oldClient],
);
}

10
src/auth/useInteractiveRegistration.ts
View File

@@ -22,12 +22,14 @@ import {
RegisterResponse,
} from "matrix-js-sdk/src/matrix";
import { initClient } from "../matrix-utils";
import { initClient } from "../utils/matrix";
import { Session } from "../ClientContext";
import { Config } from "../config/Config";
import { widget } from "../widget";
export const useInteractiveRegistration = (): {
export const useInteractiveRegistration = (
oldClient?: MatrixClient,
): {
privacyPolicyUrl?: string;
recaptchaKey?: string;
register: (
@@ -105,7 +107,7 @@ export const useInteractiveRegistration = (): {
/* eslint-disable camelcase,@typescript-eslint/no-explicit-any */
const { user_id, access_token, device_id } =
(await interactiveAuth.attemptAuth()) as any;
await oldClient?.logout(true);
const client = await initClient(
{
baseUrl: Config.defaultHomeserverUrl()!,
@@ -136,7 +138,7 @@ export const useInteractiveRegistration = (): {
return [client, session];
},
[],
[oldClient],
);
return { privacyPolicyUrl, recaptchaKey, register };

1
src/auth/useRecaptcha.ts
View File

@@ -20,7 +20,6 @@ import { useTranslation } from "react-i18next";
import { logger } from "matrix-js-sdk/src/logger";
import { translatedError } from "../TranslatedError";
declare global {
interface Window {
mxOnRecaptchaLoaded: () => void;

238
src/button/Button.module.css
View File

@@ -1,5 +1,5 @@
/*
Copyright 2021 New Vector Ltd
Copyright 2024 New Vector Ltd
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
@@ -14,240 +14,6 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.button,
.toolbarButton,
.toolbarButtonSecondary,
.iconButton,
.iconCopyButton,
.secondary,
.secondaryHangup,
.copyButton,
.dropdownButton {
position: relative;
display: flex;
justify-content: center;
align-items: center;
background-color: transparent;
padding: 0;
border: none;
cursor: pointer;
text-decoration: none;
box-sizing: border-box;
}
.secondary,
.secondaryHangup,
.button,
.copyButton {
padding: 8px 20px;
border-radius: 8px;
font-size: var(--font-size-body);
font-weight: 600;
}
.button {
color: var(--stopgap-color-on-solid-accent);
background-color: var(--cpd-color-text-action-accent);
}
.button:focus-visible,
.toolbarButton:focus-visible,
.toolbarButtonSecondary:focus-visible,
.iconButton:focus-visible,
.iconCopyButton:focus-visible,
.secondary:focus-visible,
.secondaryHangup:focus-visible,
.copyButton:focus-visible {
outline: auto;
}
.toolbarButton:disabled {
background-color: var(--cpd-color-bg-action-primary-disabled);
box-shadow: none;
}
.toolbarButton,
.toolbarButtonSecondary {
width: 50px;
height: 50px;
border-radius: 50px;
background-color: var(--cpd-color-bg-canvas-default);
color: var(--cpd-color-icon-primary);
border: 1px solid var(--cpd-color-gray-400);
box-shadow: var(--subtle-drop-shadow);
}
.toolbarButton.on,
.toolbarButton.off {
background-color: var(--cpd-color-bg-action-primary-rest);
color: var(--cpd-color-icon-on-solid-primary);
}
.toolbarButtonSecondary.on {
background-color: var(--cpd-color-text-success-primary);
}
.toolbarButton:active,
.toolbarButtonSecondary:active {
background-color: var(--cpd-color-bg-subtle-primary);
border: none;
box-shadow: none;
}
.toolbarButton.on:active,
.toolbarButton.off:active {
background-color: var(--cpd-color-bg-action-primary-pressed);
}
.iconButton:not(.stroke) svg * {
fill: var(--cpd-color-bg-action-primary-rest);
}
.iconButton:not(.stroke):tertiary svg * {
fill: var(--cpd-color-icon-accent-tertiary);
}
.iconButton.on:not(.stroke) svg * {
fill: var(--cpd-color-icon-accent-tertiary);
}
.iconButton.on.stroke svg * {
stroke: var(--cpd-color-icon-accent-tertiary);
}
.hangupButton {
background-color: var(--cpd-color-bg-critical-primary);
border-color: var(--cpd-color-border-critical-subtle);
.endCall > svg {
color: var(--stopgap-color-on-solid-accent);
}
.hangupButton:active {
background-color: var(--cpd-color-bg-critical-pressed);
}
.secondary,
.copyButton {
color: var(--cpd-color-text-action-accent);
border: 2px solid var(--cpd-color-text-action-accent);
background-color: transparent;
}
.secondaryHangup {
color: var(--cpd-color-text-critical-primary);
border: 2px solid var(--cpd-color-border-critical-primary);
background-color: transparent;
}
.copyButton.secondaryCopy {
color: var(--cpd-color-text-primary);
border-color: var(--cpd-color-border-interactive-primary);
}
.copyButton {
width: 100%;
height: 40px;
transition:
border-color 250ms,
background-color 250ms;
}
.copyButton span {
font-weight: 600;
font-size: var(--font-size-body);
margin-right: 10px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.copyButton svg {
flex-shrink: 0;
}
.copyButton:not(.on) svg * {
fill: var(--cpd-color-icon-accent-tertiary);
}
.copyButton.on {
border-color: transparent;
background-color: var(--cpd-color-text-action-accent);
color: white;
}
.copyButton.on svg * {
stroke: white;
}
.copyButton.secondaryCopy:not(.on) svg * {
fill: var(--cpd-color-bg-action-primary-rest);
}
.iconCopyButton svg * {
fill: var(--cpd-color-icon-secondary);
}
.iconCopyButton.on svg *,
.iconCopyButton.on:hover svg * {
fill: transparent;
stroke: var(--cpd-color-text-action-accent);
}
.dropdownButton {
color: var(--cpd-color-text-primary);
padding: 2px 8px;
border-radius: 8px;
}
.dropdownButton:active,
.dropdownButton.on {
background-color: var(--cpd-color-bg-action-secondary-pressed);
}
.dropdownButton svg {
margin-left: 8px;
}
.dropdownButton svg * {
fill: var(--cpd-color-icon-primary);
}
.lg {
height: 40px;
}
.linkButton {
background-color: transparent;
border: none;
color: var(--cpd-color-text-action-accent);
cursor: pointer;
}
@media (hover: hover) {
.toolbarButton:hover,
.toolbarButtonSecondary:hover {
background-color: var(--cpd-color-bg-subtle-primary);
border: none;
box-shadow: none;
}
.toolbarButton.on:hover,
.toolbarButton.off:hover {
background-color: var(--cpd-color-bg-action-primary-hovered);
}
.iconButton:not(.stroke):hover svg * {
fill: var(--cpd-color-icon-accent-tertiary);
}
.hangupButton:hover {
background-color: var(--cpd-color-bg-critical-hovered);
}
.iconCopyButton:hover svg * {
fill: var(--cpd-color-icon-accent-tertiary);
}
.dropdownButton:hover {
background-color: var(--cpd-color-bg-action-secondary-hovered);
}
}

207
src/button/Button.tsx
View File

@@ -1,5 +1,5 @@
/*
Copyright 2022 - 2023 New Vector Ltd
Copyright 2022-2024 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.
@@ -13,13 +13,10 @@ 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, forwardRef } from "react";
import { PressEvent } from "@react-types/shared";
import { ComponentPropsWithoutRef, FC } from "react";
import classNames from "classnames";
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 { Button as CpdButton, Tooltip } from "@vector-im/compound-web";
import {
MicOnSolidIcon,
MicOffSolidIcon,
@@ -28,120 +25,15 @@ import {
EndCallIcon,
ShareScreenSolidIcon,
SettingsSolidIcon,
ChevronDownIcon,
} from "@vector-im/compound-design-tokens/assets/web/icons";
import styles from "./Button.module.css";
export type ButtonVariant =
| "default"
| "toolbar"
| "toolbarSecondary"
| "icon"
| "secondary"
| "copy"
| "secondaryCopy"
| "iconCopy"
| "secondaryHangup"
| "dropdown"
| "link";
export const variantToClassName = {
default: [styles.button],
toolbar: [styles.toolbarButton],
toolbarSecondary: [styles.toolbarButtonSecondary],
icon: [styles.iconButton],
secondary: [styles.secondary],
copy: [styles.copyButton],
secondaryCopy: [styles.secondaryCopy, styles.copyButton],
iconCopy: [styles.iconCopyButton],
secondaryHangup: [styles.secondaryHangup],
dropdown: [styles.dropdownButton],
link: [styles.linkButton],
};
export type ButtonSize = "lg";
export const sizeToClassName: { lg: string[] } = {
lg: [styles.lg],
};
interface Props {
variant: ButtonVariant;
size: ButtonSize;
on: () => void;
off: () => void;
iconStyle: string;
className: string;
children: Element[];
onPress: (e: PressEvent) => void;
onPressStart: (e: PressEvent) => void;
disabled: boolean;
// TODO: add all props for <Button>
[index: string]: unknown;
interface MicButtonProps extends ComponentPropsWithoutRef<"button"> {
muted: boolean;
}
export const Button = forwardRef<HTMLButtonElement, Props>(
(
{
variant = "default",
size,
on,
off,
iconStyle,
className,
children,
onPress,
onPressStart,
...rest
},
ref,
) => {
const buttonRef = useObjectRef<HTMLButtonElement>(ref);
const { buttonProps } = useButton(
{ onPress, onPressStart, ...rest },
buttonRef,
);
// TODO: react-aria's useButton hook prevents form submission via keyboard
// Remove the hack below after this is merged https://github.com/adobe/react-spectrum/pull/904
let filteredButtonProps = buttonProps;
if (rest.type === "submit" && !rest.onPress) {
const { ...filtered } = buttonProps;
filteredButtonProps = filtered;
}
return (
<button
className={classNames(
variantToClassName[variant],
sizeToClassName[size],
styles[iconStyle],
className,
{
[styles.on]: on,
[styles.off]: off,
},
)}
{...mergeProps(rest, filteredButtonProps)}
ref={buttonRef}
>
<>
{children}
{variant === "dropdown" && <ChevronDownIcon />}
</>
</button>
);
},
);
Button.displayName = "Button";
export const MicButton: FC<{
muted: boolean;
// TODO: add all props for <Button>
[index: string]: unknown;
}> = ({ muted, ...rest }) => {
export const MicButton: FC<MicButtonProps> = ({ muted, ...props }) => {
const { t } = useTranslation();
const Icon = muted ? MicOffSolidIcon : MicOnSolidIcon;
const label = muted
@@ -150,18 +42,21 @@ export const MicButton: FC<{
return (
<Tooltip label={label}>
<Button variant="toolbar" {...rest} on={muted}>
<Icon aria-hidden width={24} height={24} />
</Button>
<CpdButton
iconOnly
Icon={Icon}
kind={muted ? "primary" : "secondary"}
{...props}
/>
</Tooltip>
);
};
export const VideoButton: FC<{
interface VideoButtonProps extends ComponentPropsWithoutRef<"button"> {
muted: boolean;
// TODO: add all props for <Button>
[index: string]: unknown;
}> = ({ muted, ...rest }) => {
}
export const VideoButton: FC<VideoButtonProps> = ({ muted, ...props }) => {
const { t } = useTranslation();
const Icon = muted ? VideoCallOffSolidIcon : VideoCallSolidIcon;
const label = muted
@@ -170,19 +65,24 @@ export const VideoButton: FC<{
return (
<Tooltip label={label}>
<Button variant="toolbar" {...rest} on={muted}>
<Icon aria-hidden width={24} height={24} />
</Button>
<CpdButton
iconOnly
Icon={Icon}
kind={muted ? "primary" : "secondary"}
{...props}
/>
</Tooltip>
);
};
export const ScreenshareButton: FC<{
interface ShareScreenButtonProps extends ComponentPropsWithoutRef<"button"> {
enabled: boolean;
className?: string;
// TODO: add all props for <Button>
[index: string]: unknown;
}> = ({ enabled, className, ...rest }) => {
}
export const ShareScreenButton: FC<ShareScreenButtonProps> = ({
enabled,
...props
}) => {
const { t } = useTranslation();
const label = enabled
? t("stop_screenshare_button_label")
@@ -190,45 +90,48 @@ export const ScreenshareButton: FC<{
return (
<Tooltip label={label}>
<Button variant="toolbar" {...rest} on={enabled}>
<ShareScreenSolidIcon aria-hidden width={24} height={24} />
</Button>
<CpdButton
iconOnly
Icon={ShareScreenSolidIcon}
kind={enabled ? "primary" : "secondary"}
{...props}
/>
</Tooltip>
);
};
export const HangupButton: FC<{
className?: string;
// TODO: add all props for <Button>
[index: string]: unknown;
}> = ({ className, ...rest }) => {
export const EndCallButton: FC<ComponentPropsWithoutRef<"button">> = ({
className,
...props
}) => {
const { t } = useTranslation();
return (
<Tooltip label={t("hangup_button_label")}>
<Button
variant="toolbar"
className={classNames(styles.hangupButton, className)}
{...rest}
>
<EndCallIcon aria-hidden width={24} height={24} />
</Button>
<CpdButton
className={classNames(className, styles.endCall)}
iconOnly
Icon={EndCallIcon}
destructive
{...props}
/>
</Tooltip>
);
};
export const SettingsButton: FC<{
className?: string;
// TODO: add all props for <Button>
[index: string]: unknown;
}> = ({ className, ...rest }) => {
export const SettingsButton: FC<ComponentPropsWithoutRef<"button">> = (
props,
) => {
const { t } = useTranslation();
return (
<Tooltip label={t("common.settings")}>
<Button variant="toolbar" {...rest}>
<SettingsSolidIcon aria-hidden width={24} height={24} />
</Button>
<CpdButton
iconOnly
Icon={SettingsSolidIcon}
kind="secondary"
{...props}
/>
</Tooltip>
);
};

69
src/button/CopyButton.tsx
View File

@@ -1,69 +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 { useTranslation } from "react-i18next";
import useClipboard from "react-use-clipboard";
import { FC } from "react";
import CheckIcon from "../icons/Check.svg?react";
import CopyIcon from "../icons/Copy.svg?react";
import { Button, ButtonVariant } from "./Button";
interface Props {
value: string;
children?: JSX.Element | string;
className?: string;
variant?: ButtonVariant;
copiedMessage?: string;
}
export const CopyButton: FC<Props> = ({
value,
children,
className,
variant,
copiedMessage,
...rest
}) => {
const { t } = useTranslation();
const [isCopied, setCopied] = useClipboard(value, { successDuration: 3000 });
return (
<Button
{...rest}
variant={variant === "icon" ? "iconCopy" : variant || "copy"}
on={isCopied}
className={className}
onPress={setCopied}
iconStyle={isCopied ? "stroke" : "fill"}
aria-label={t("action.copy")}
>
{isCopied ? (
<>
{variant !== "icon" && (
<span>{copiedMessage || t("common.copied")}</span>
)}
<CheckIcon />
</>
) : (
<>
{variant !== "icon" && <span>{children || value}</span>}
<CopyIcon />
</>
)}
</Button>
);
};

61
src/button/Link.tsx Normal file
View File

@@ -0,0 +1,61 @@
/*
Copyright 2024 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 {
ComponentPropsWithoutRef,
forwardRef,
MouseEvent,
useCallback,
useMemo,
} from "react";
import { Link as CpdLink } from "@vector-im/compound-web";
import { useHistory } from "react-router-dom";
import { createPath, LocationDescriptor, Path } from "history";
export function useLink(
to: LocationDescriptor,
): [Path, (e: MouseEvent) => void] {
const history = useHistory();
const path = useMemo(
() => (typeof to === "string" ? to : createPath(to)),
[to],
);
const onClick = useCallback(
(e: MouseEvent) => {
e.preventDefault();
history.push(to);
},
[history, to],
);
return [path, onClick];
}
type Props = Omit<
ComponentPropsWithoutRef<typeof CpdLink>,
"href" | "onClick"
> & { to: LocationDescriptor };
/**
* A version of Compound's link component that integrates with our router setup.
*/
export const Link = forwardRef<HTMLAnchorElement, Props>(function Link(
{ to, ...props },
ref,
) {
const [path, onClick] = useLink(to);
return <CpdLink ref={ref} {...props} href={path} onClick={onClick} />;
});

59
src/button/LinkButton.tsx
View File

@@ -1,5 +1,5 @@
/*
Copyright 2022 New Vector Ltd
Copyright 2024 New Vector Ltd
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
@@ -14,45 +14,24 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import { FC, HTMLAttributes } from "react";
import { Link } from "react-router-dom";
import classNames from "classnames";
import * as H from "history";
import { ComponentPropsWithoutRef, forwardRef } from "react";
import { Button } from "@vector-im/compound-web";
import { LocationDescriptor } from "history";
import {
variantToClassName,
sizeToClassName,
ButtonVariant,
ButtonSize,
} from "./Button";
import { useLink } from "./Link";
interface Props extends HTMLAttributes<HTMLAnchorElement> {
children: JSX.Element | string;
to: H.LocationDescriptor | ((location: H.Location) => H.LocationDescriptor);
size?: ButtonSize;
variant?: ButtonVariant;
className?: string;
}
type Props = Omit<
ComponentPropsWithoutRef<typeof Button<"a">>,
"as" | "href"
> & { to: LocationDescriptor };
export const LinkButton: FC<Props> = ({
children,
to,
size,
variant,
className,
...rest
}) => {
return (
<Link
className={classNames(
variantToClassName[variant || "secondary"],
size ? sizeToClassName[size] : [],
className,
)}
to={to}
{...rest}
>
{children}
</Link>
);
};
/**
* A version of Compound's button component that acts as a link and integrates
* with our router setup.
*/
export const LinkButton = forwardRef<HTMLAnchorElement, Props>(
function LinkButton({ to, ...props }, ref) {
const [path, onClick] = useLink(to);
return <Button as="a" ref={ref} {...props} href={path} onClick={onClick} />;
},
);

1
src/button/index.ts
View File

@@ -15,5 +15,4 @@ limitations under the License.
*/
export * from "./Button";
export * from "./CopyButton";
export * from "./LinkButton";

12
src/config/Config.ts
View File

@@ -44,6 +44,18 @@ export class Config {
return Config.internalInstance.initPromise;
}
/**
* This is a alternative initializer that does not load anything
* from a hosted config file but instead just initializes the conifg using the
* default config.
*
* It is supposed to only be used in tests. (It is executed in `vite.setup.js`)
*/
public static initDefault(): void {
Config.internalInstance = new Config();
Config.internalInstance.config = { ...DEFAULT_CONFIG };
}
// Convenience accessors
public static defaultHomeserverUrl(): string | undefined {
return (

39
src/controls.ts Normal file
View File

@@ -0,0 +1,39 @@
/*
Copyright 2024 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 { Subject } from "rxjs";
export interface Controls {
canEnterPip: () => boolean;
enablePip: () => void;
disablePip: () => void;
}
export const setPipEnabled = new Subject<boolean>();
window.controls = {
canEnterPip(): boolean {
return setPipEnabled.observed;
},
enablePip(): void {
if (!setPipEnabled.observed) throw new Error("No call is running");
setPipEnabled.next(true);
},
disablePip(): void {
if (!setPipEnabled.observed) throw new Error("No call is running");
setPipEnabled.next(false);
},
};

15
src/home/CallList.module.css
View File

@@ -42,8 +42,7 @@ limitations under the License.
align-items: center;
}
.avatar,
.copyButtonSpacer {
.avatar {
flex-shrink: 0;
}
@@ -64,18 +63,6 @@ limitations under the License.
margin-top: 8px;
}
.copyButtonSpacer,
.copyButton {
width: 16px;
height: 16px;
}
.copyButton {
position: absolute;
top: 12px;
right: 12px;
}
.callList {
display: flex;
flex-wrap: wrap;

49
src/home/CallList.test.tsx Normal file
View File

@@ -0,0 +1,49 @@
/*
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 { render, RenderResult } from "@testing-library/react";
import { MatrixClient } from "matrix-js-sdk/src/matrix";
import { MemoryRouter } from "react-router-dom";
import { describe, expect, it } from "vitest";
import { CallList } from "../../src/home/CallList";
import { GroupCallRoom } from "../../src/home/useGroupCallRooms";
describe("CallList", () => {
const renderComponent = (rooms: GroupCallRoom[]): RenderResult => {
return render(
<MemoryRouter>
<CallList client={{} as MatrixClient} rooms={rooms} />
</MemoryRouter>,
);
};
it("should show room", async () => {
const rooms = [
{
roomName: "Room #1",
roomAlias: "#room-name:server.org",
room: {
roomId: "!roomId",
},
},
] as GroupCallRoom[];
const result = renderComponent(rooms);
expect(result.queryByText("Room #1")).toBeTruthy();
});
});

11
src/home/CallList.tsx
View File

@@ -1,5 +1,5 @@
/*
Copyright 2022 New Vector Ltd
Copyright 2022-2024 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.
@@ -20,10 +20,9 @@ import { RoomMember } from "matrix-js-sdk/src/models/room-member";
import { Room } from "matrix-js-sdk/src/models/room";
import { FC } from "react";
import { CopyButton } from "../button";
import { Avatar, Size } from "../Avatar";
import styles from "./CallList.module.css";
import { getAbsoluteRoomUrl, getRelativeRoomUrl } from "../matrix-utils";
import { getRelativeRoomUrl } from "../utils/matrix";
import { Body } from "../typography/Typography";
import { GroupCallRoom } from "./useGroupCallRooms";
import { useRoomEncryptionSystem } from "../e2ee/sharedKeyManagement";
@@ -81,12 +80,6 @@ const CallTile: FC<CallTileProps> = ({ name, avatarUrl, room }) => {
</div>
<div className={styles.copyButtonSpacer} />
</Link>
<CopyButton
className={styles.copyButton}
variant="icon"
// Todo add the viaServers to the created link
value={getAbsoluteRoomUrl(room.roomId, roomEncryptionSystem, room.name)}
/>
</div>
);
};

11
src/home/JoinExistingCallModal.tsx
View File

@@ -14,19 +14,18 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import { PressEvent } from "@react-types/shared";
import { useTranslation } from "react-i18next";
import { FC } from "react";
import { FC, MouseEvent } from "react";
import { Button } from "@vector-im/compound-web";
import { Modal } from "../Modal";
import { Button } from "../button";
import { FieldRow } from "../input/Input";
import styles from "./JoinExistingCallModal.module.css";
interface Props {
open: boolean;
onDismiss: () => void;
onJoin: (e: PressEvent) => void;
onJoin: (e: MouseEvent) => void;
}
export const JoinExistingCallModal: FC<Props> = ({
@@ -44,8 +43,8 @@ export const JoinExistingCallModal: FC<Props> = ({
>
<p>{t("join_existing_call_modal.text")}</p>
<FieldRow rightAlign className={styles.buttons}>
<Button onPress={onDismiss}>{t("action.no")}</Button>
<Button onPress={onJoin} data-testid="home_joinExistingRoom">
<Button onClick={onDismiss}>{t("action.no")}</Button>
<Button onClick={onJoin} data-testid="home_joinExistingRoom">
{t("join_existing_call_modal.join_button")}
</Button>
</FieldRow>

11
src/home/RegisteredView.tsx
View File

@@ -20,19 +20,19 @@ import { MatrixClient } from "matrix-js-sdk/src/client";
import { useTranslation } from "react-i18next";
import { Heading } from "@vector-im/compound-web";
import { logger } from "matrix-js-sdk/src/logger";
import { Button } from "@vector-im/compound-web";
import {
createRoom,
getRelativeRoomUrl,
roomAliasLocalpartFromRoomName,
sanitiseRoomNameInput,
} from "../matrix-utils";
} from "../utils/matrix";
import { useGroupCallRooms } from "./useGroupCallRooms";
import { Header, HeaderLogo, LeftNav, RightNav } from "../Header";
import commonStyles from "./common.module.css";
import styles from "./RegisteredView.module.css";
import { FieldRow, InputField, ErrorMessage } from "../input/Input";
import { Button } from "../button";
import { CallList } from "./CallList";
import { UserMenuContainer } from "../UserMenuContainer";
import { JoinExistingCallModal } from "./JoinExistingCallModal";
@@ -40,10 +40,7 @@ import { Caption } from "../typography/Typography";
import { Form } from "../form/Form";
import { AnalyticsNotice } from "../analytics/AnalyticsNotice";
import { E2eeType } from "../e2ee/e2eeType";
import {
useSetting,
optInAnalytics as optInAnalyticsSetting,
} from "../settings/settings";
import { useOptInAnalytics } from "../settings/settings";
interface Props {
client: MatrixClient;
@@ -52,7 +49,7 @@ interface Props {
export const RegisteredView: FC<Props> = ({ client }) => {
const [loading, setLoading] = useState(false);
const [error, setError] = useState<Error>();
const [optInAnalytics] = useSetting(optInAnalyticsSetting);
const [optInAnalytics] = useOptInAnalytics();
const history = useHistory();
const { t } = useTranslation();
const [joinExistingCallModalOpen, setJoinExistingCallModalOpen] =

12
src/home/UnauthenticatedView.tsx
View File

@@ -18,20 +18,19 @@ import { FC, useCallback, useState, FormEventHandler } from "react";
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 { Button, 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";
import { UserMenuContainer } from "../UserMenuContainer";
import { FieldRow, InputField, ErrorMessage } from "../input/Input";
import { Button } from "../button";
import {
createRoom,
getRelativeRoomUrl,
roomAliasLocalpartFromRoomName,
sanitiseRoomNameInput,
} from "../matrix-utils";
} from "../utils/matrix";
import { useInteractiveRegistration } from "../auth/useInteractiveRegistration";
import { JoinExistingCallModal } from "./JoinExistingCallModal";
import { useRecaptcha } from "../auth/useRecaptcha";
@@ -43,16 +42,13 @@ import { generateRandomName } from "../auth/generateRandomName";
import { AnalyticsNotice } from "../analytics/AnalyticsNotice";
import { Config } from "../config/Config";
import { E2eeType } from "../e2ee/e2eeType";
import {
useSetting,
optInAnalytics as optInAnalyticsSetting,
} from "../settings/settings";
import { useOptInAnalytics } from "../settings/settings";
export const UnauthenticatedView: FC = () => {
const { setClient } = useClient();
const [loading, setLoading] = useState(false);
const [error, setError] = useState<Error>();
const [optInAnalytics] = useSetting(optInAnalyticsSetting);
const [optInAnalytics] = useOptInAnalytics();
const { recaptchaKey, register } = useInteractiveRegistration();
const { execute, reset, recaptchaId } = useRecaptcha(recaptchaKey);

5
src/home/useGroupCallRooms.ts
View File

@@ -18,7 +18,7 @@ import { MatrixClient } from "matrix-js-sdk/src/client";
import { Room, RoomEvent } from "matrix-js-sdk/src/models/room";
import { RoomMember } from "matrix-js-sdk/src/models/room-member";
import { useState, useEffect } from "react";
import { EventTimeline, EventType, JoinRule } from "matrix-js-sdk";
import { EventTimeline, EventType, JoinRule } from "matrix-js-sdk/src/matrix";
import { MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc/MatrixRTCSession";
import { MatrixRTCSessionManagerEvents } from "matrix-js-sdk/src/matrixrtc/MatrixRTCSessionManager";
import { KnownMembership } from "matrix-js-sdk/src/types";
@@ -134,7 +134,7 @@ export function useGroupCallRooms(client: MatrixClient): GroupCallRoom[] {
useEffect(() => {
function updateRooms(): void {
// We want to show all rooms that historically had a call and which we are (can become) part of.
// We want to show all rooms that historically had a call and which we are (or can become) part of.
const rooms = client
.getRooms()
.filter(roomHasCallMembershipEvents)
@@ -142,7 +142,6 @@ export function useGroupCallRooms(client: MatrixClient): GroupCallRoom[] {
const sortedRooms = sortRooms(client, rooms);
const items = sortedRooms.map((room) => {
const session = client.matrixRTC.getRoomSession(room);
session.memberships;
return {
roomAlias: room.getCanonicalAlias() ?? undefined,
roomName: room.name,

10
src/icons/ArrowDown.svg
View File

@@ -1,10 +0,0 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_965_9448)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M1.70711 5.36321C2.09763 4.97268 2.73182 4.97166 3.1236 5.36091L8.08934 10.2946L13.0391 5.34488C13.4296 4.95435 14.0638 4.95333 14.4556 5.34258C14.8474 5.73184 14.8484 6.36398 14.4579 6.75451L8.80101 12.4114C8.41049 12.8019 7.7763 12.8029 7.38452 12.4137L1.70939 6.77513C1.3176 6.38587 1.31658 5.75373 1.70711 5.36321Z" fill="#8E99A4"/>
</g>
<defs>
<clipPath id="clip0_965_9448">
<rect width="16" height="16" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 633 B

5
src/icons/Audio.svg
View File

@@ -1,5 +0,0 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.9699 2.22605L6 7.20093L1.5 7.20093C0.671573 7.20093 0 7.8725 0 8.70093V15.3009C0 16.1294 0.671571 16.8009 1.5 16.8009L6 16.8009L11.9699 21.7758C12.4584 22.1829 13.2 21.8355 13.2 21.1996V2.80221C13.2 2.16634 12.4584 1.81897 11.9699 2.22605Z" fill="white"/>
<path d="M21.1888 4.1866C20.8497 3.75065 20.2214 3.67212 19.7855 4.01119C19.35 4.34988 19.2712 4.97715 19.6089 5.41304L19.6097 5.41402L19.6107 5.41531L19.6243 5.43347C19.6376 5.45126 19.6589 5.48033 19.6872 5.52017C19.7438 5.59988 19.828 5.72244 19.9308 5.88385C20.1365 6.20718 20.4145 6.68332 20.6932 7.28057C21.2535 8.48111 21.7994 10.134 21.7994 12.0005C21.7994 13.8671 21.2535 15.52 20.6932 16.7205C20.4145 17.3178 20.1365 17.7939 19.9308 18.1172C19.828 18.2786 19.7438 18.4012 19.6872 18.4809C19.6589 18.5208 19.6376 18.5498 19.6243 18.5676L19.6107 18.5858L19.6097 18.5871L19.6088 18.5882C19.2712 19.0241 19.3501 19.6512 19.7855 19.9899C20.2214 20.329 20.8497 20.2504 21.1888 19.8145L20.4435 19.2348C21.1888 19.8145 21.1888 19.8145 21.1888 19.8145L21.1908 19.8119L21.1936 19.8082L21.2019 19.7974L21.2284 19.7621C21.2503 19.7327 21.2805 19.6915 21.3179 19.6389C21.3925 19.5338 21.4958 19.3832 21.6181 19.191C21.8623 18.8072 22.1843 18.2547 22.5056 17.5663C23.1453 16.1954 23.7994 14.2482 23.7994 12.0005C23.7994 9.75284 23.1453 7.80569 22.5056 6.4348C22.1843 5.74634 21.8623 5.1939 21.6181 4.81009C21.4958 4.61793 21.3925 4.46727 21.3179 4.36217C21.2805 4.30959 21.2503 4.26835 21.2284 4.23893L21.2019 4.20373L21.1936 4.19288L21.1908 4.18917L21.1897 4.18774C21.1897 4.18774 21.1888 4.1866 20.3994 4.80054L21.1888 4.1866Z" fill="white"/>
<path d="M17.5896 7.78682C17.2506 7.35087 16.6223 7.27234 16.1864 7.61141C15.7515 7.94959 15.6723 8.57548 16.0083 9.01128L16.0117 9.01586C16.0162 9.02185 16.0246 9.03334 16.0365 9.05007C16.0603 9.08359 16.0977 9.13784 16.1441 9.21085C16.2374 9.3574 16.3654 9.57639 16.4941 9.85222C16.7544 10.4099 17.0003 11.1627 17.0003 12.0008C17.0003 12.8388 16.7544 13.5916 16.4941 14.1493C16.3654 14.4251 16.2374 14.6441 16.1441 14.7907C16.0977 14.8637 16.0603 14.9179 16.0365 14.9514C16.0246 14.9682 16.0162 14.9797 16.0117 14.9857L16.0083 14.9903C15.6723 15.4261 15.7515 16.0519 16.1864 16.3901C16.6223 16.7292 17.2506 16.6506 17.5896 16.2147L16.8003 15.6008C17.5896 16.2147 17.5896 16.2147 17.5896 16.2147L17.5914 16.2124L17.5936 16.2095L17.5994 16.2021L17.6158 16.1802C17.6289 16.1626 17.6463 16.1389 17.6672 16.1094C17.709 16.0505 17.7654 15.9682 17.8315 15.8644C17.9632 15.6574 18.1352 15.3621 18.3065 14.9951C18.6462 14.267 19.0003 13.2199 19.0003 12.0008C19.0003 10.7816 18.6462 9.73448 18.3065 9.00645C18.1352 8.63942 17.9632 8.34412 17.8315 8.1371C17.7654 8.03333 17.709 7.95097 17.6672 7.89207C17.6463 7.8626 17.6289 7.83893 17.6158 7.82132L17.5994 7.79946L17.5936 7.79198L17.5914 7.78911L17.5905 7.78789C17.5905 7.78789 17.5896 7.78682 16.8003 8.40076L17.5896 7.78682Z" fill="white"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 2.9 KiB

3
src/icons/Copy.svg
View File

@@ -1,3 +0,0 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M4 2C2.89543 2 2 2.89543 2 4V8.66667C2 9.77124 2.89543 10.6667 4 10.6667H5.33333V12C5.33333 13.1046 6.22877 14 7.33333 14H12C13.1046 14 14 13.1046 14 12V7.33333C14 6.22876 13.1046 5.33333 12 5.33333H10.6667V4C10.6667 2.89543 9.77123 2 8.66667 2H4ZM9.33333 5.33333V4C9.33333 3.63181 9.03486 3.33333 8.66667 3.33333H4C3.63181 3.33333 3.33333 3.63181 3.33333 4V8.66667C3.33333 9.03486 3.63181 9.33333 4 9.33333H5.33333V7.33333C5.33333 6.22877 6.22876 5.33333 7.33333 5.33333H9.33333ZM6.66667 7.33333C6.66667 6.96514 6.96514 6.66667 7.33333 6.66667H12C12.3682 6.66667 12.6667 6.96514 12.6667 7.33333V12C12.6667 12.3682 12.3682 12.6667 12 12.6667H7.33333C6.96514 12.6667 6.66667 12.3682 6.66667 12V7.33333Z" fill="#8E99A4"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 872 B

3
src/icons/Developer.svg
View File

@@ -1,3 +0,0 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M5 3C2.23858 3 0 5.23858 0 8C0 10.7614 2.23858 13 5 13H11C13.7614 13 16 10.7614 16 8C16 5.23858 13.7614 3 11 3H5ZM8 8C8 9.65685 6.65685 11 5 11C3.34315 11 2 9.65685 2 8C2 6.34315 3.34315 5 5 5C6.65685 5 8 6.34315 8 8Z" fill="#A9B2BC"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 388 B

4
src/icons/Edit.svg
View File

@@ -1,4 +0,0 @@
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.64856 7.35501C2.65473 7.31601 2.67231 7.27972 2.69908 7.25069L8.40377 1.06442C8.47865 0.983217 8.60518 0.978093 8.68638 1.05297L9.8626 2.13763C9.9438 2.21251 9.94893 2.33904 9.87405 2.42024L4.16936 8.60651C4.1426 8.63554 4.10783 8.656 4.06946 8.6653L2.66781 9.00511C2.52911 9.03873 2.40084 8.92044 2.42315 8.77948L2.64856 7.35501Z" fill="white"/>
<path d="M1.75 9.44346C1.33579 9.44346 1 9.77925 1 10.1935C1 10.6077 1.33579 10.9435 1.75 10.9435L10.75 10.9435C11.1642 10.9435 11.5 10.6077 11.5 10.1935C11.5 9.77925 11.1642 9.44346 10.75 9.44346L1.75 9.44346Z" fill="white"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 689 B

3
src/icons/Feedback.svg
View File

@@ -1,3 +0,0 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.283 21.4401C17.6495 21.4401 21.9999 17.0881 21.9999 11.7196C21.9999 6.3511 17.6495 1.99908 12.283 1.99908C6.91643 1.99908 2.566 6.3511 2.566 11.7196C2.566 13.2234 2.90739 14.6476 3.51687 15.9186L2.04468 20.7049C1.80806 21.4742 2.5308 22.1936 3.29898 21.9535L8.04564 20.4696C9.32625 21.0914 10.7639 21.4401 12.283 21.4401Z" fill="#ffffff"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 496 B

5
src/icons/Overflow.svg
View File

@@ -1,5 +0,0 @@
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.33398 15C8.33398 16.3807 7.2147 17.5 5.83398 17.5C4.45327 17.5 3.33398 16.3807 3.33398 15C3.33398 13.6193 4.45327 12.5 5.83398 12.5C7.2147 12.5 8.33398 13.6193 8.33398 15Z" fill="white"/>
<path d="M17.5002 15C17.5002 16.3807 16.381 17.5 15.0002 17.5C13.6195 17.5 12.5002 16.3807 12.5002 15C12.5002 13.6193 13.6195 12.5 15.0002 12.5C16.381 12.5 17.5002 13.6193 17.5002 15Z" fill="white"/>
<path d="M24.1665 17.5C25.5472 17.5 26.6665 16.3807 26.6665 15C26.6665 13.6193 25.5472 12.5 24.1665 12.5C22.7858 12.5 21.6665 13.6193 21.6665 15C21.6665 16.3807 22.7858 17.5 24.1665 17.5Z" fill="white"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 707 B

4
src/icons/Video.svg
View File

@@ -1,4 +0,0 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.50001 3.33334C1.11929 3.33334 0 4.45264 0 5.83336V14.1667C0 15.5474 1.11929 16.6667 2.50001 16.6667H11.6667C13.0474 16.6667 14.1667 15.5474 14.1667 14.1667V5.83336C14.1667 4.45264 13.0474 3.33334 11.6667 3.33334H2.50001Z" fill="white"/>
<path d="M18.6462 5.24983L15.8334 7.50004V12.5001L18.6462 14.7503C19.1918 15.1868 20.0001 14.7983 20.0001 14.0996V5.90056C20.0001 5.2018 19.1918 4.81332 18.6462 5.24983Z" fill="white"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 538 B

149
src/index.css
View File

@@ -20,9 +20,12 @@ limitations under the License.
Therefore we define a unicode-range to load which excludes the glyphs
(to avoid having to maintain a fork of Inter). */
@import "normalize.css/normalize.css";
@import "@vector-im/compound-design-tokens/assets/web/css/compound-design-tokens.css";
@import "@vector-im/compound-web/dist/style.css";
@layer normalize, compound-legacy, compound;
@import url("normalize.css/normalize.css") layer(normalize);
@import url("@vector-im/compound-design-tokens/assets/web/css/compound-design-tokens.css")
layer(compound);
@import url("@vector-im/compound-web/dist/style.css") layer(compound.components);
:root {
--font-scale: 1;
@@ -195,87 +198,89 @@ body[data-platform="desktop"] {
--cpd-font-family-sans: "Inter", sans-serif;
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
a {
margin-top: 0;
}
@layer compound-legacy {
h1,
h2,
h3,
h4,
h5,
h6,
p,
a {
margin-top: 0;
}
/* Headline Semi Bold */
h1 {
font-weight: 600;
font-size: var(--font-size-headline);
}
/* Headline Semi Bold */
h1 {
font-weight: 600;
font-size: var(--font-size-headline);
}
/* Title */
h2 {
font-weight: 600;
font-size: var(--font-size-title);
}
/* Title */
h2 {
font-weight: 600;
font-size: var(--font-size-title);
}
/* Subtitle */
h3 {
font-weight: 600;
font-size: var(--font-size-subtitle);
}
/* Subtitle */
h3 {
font-weight: 600;
font-size: var(--font-size-subtitle);
}
/* Body Semi Bold */
h4 {
font-weight: 600;
font-size: var(--font-size-body);
}
/* Body Semi Bold */
h4 {
font-weight: 600;
font-size: var(--font-size-body);
}
h1,
h2,
h3 {
line-height: 1.2;
}
h1,
h2,
h3 {
line-height: 1.2;
}
/* Body */
p {
font-size: var(--font-size-body);
line-height: var(--font-size-title);
}
/* Body */
p {
font-size: var(--font-size-body);
line-height: var(--font-size-title);
}
a {
color: var(--cpd-color-text-action-accent);
text-decoration: none;
}
a {
color: var(--cpd-color-text-action-accent);
text-decoration: none;
}
a:hover,
a:active {
opacity: 0.8;
}
a:hover,
a:active {
opacity: 0.8;
}
hr {
width: calc(100% - 24px);
border: none;
border-top: 1px solid var(--cpd-color-border-interactive-secondary);
color: var(--cpd-color-border-interactive-secondary);
overflow: visible;
text-align: center;
height: 5px;
font-weight: 600;
font-size: var(--font-size-body);
line-height: 24px;
margin: 0 12px;
}
hr {
width: calc(100% - 24px);
border: none;
border-top: 1px solid var(--cpd-color-border-interactive-secondary);
color: var(--cpd-color-border-interactive-secondary);
overflow: visible;
text-align: center;
height: 5px;
font-weight: 600;
font-size: var(--font-size-body);
line-height: 24px;
margin: 0 12px;
}
summary {
font-size: var(--font-size-body);
}
summary {
font-size: var(--font-size-body);
}
details > :not(summary) {
margin-left: var(--font-size-body);
}
details > :not(summary) {
margin-left: var(--font-size-body);
}
details[open] > summary {
margin-bottom: var(--font-size-body);
details[open] > summary {
margin-bottom: var(--font-size-body);
}
}
#root > [data-overlay-container] {

37
src/initializer.test.ts Normal file
View File

@@ -0,0 +1,37 @@
/*
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 { expect, test } from "vitest";
import { Initializer } from "../src/initializer";
test("initBeforeReact sets font family from URL param", () => {
window.location.hash = "#?font=DejaVu Sans";
Initializer.initBeforeReact();
expect(
getComputedStyle(document.documentElement).getPropertyValue(
"--font-family",
),
).toBe('"DejaVu Sans"');
});
test("initBeforeReact sets font scale from URL param", () => {
window.location.hash = "#?fontScale=1.2";
Initializer.initBeforeReact();
expect(
getComputedStyle(document.documentElement).getPropertyValue("--font-scale"),
).toBe("1.2");
});

53
src/input/AvatarInputField.module.css
View File

@@ -1,5 +1,5 @@
/*
Copyright 2022 New Vector Ltd
Copyright 2022-2024 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.
@@ -15,45 +15,30 @@ limitations under the License.
*/
.avatarInputField {
display: flex;
flex-direction: column;
justify-content: center;
}
.avatarContainer {
position: relative;
margin-bottom: 8px;
}
.avatar {
display: block;
}
.fileInput {
width: 0.1px;
height: 0.1px;
opacity: 0;
overflow: hidden;
display: none;
}
.edit {
border-radius: var(--cpd-radius-pill-effect);
padding: 2px;
background: var(--cpd-color-bg-canvas-default);
position: absolute;
z-index: -1;
inset-block-end: -2px;
inset-inline-end: -2px;
}
.fileInput:focus + .fileInputButton {
outline: auto;
}
.fileInputButton {
position: absolute;
bottom: 11px;
right: -4px;
background-color: var(--cpd-color-subtle-primary);
width: 20px;
height: 20px;
border-radius: 10px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.removeButton {
color: var(--cpd-color-text-action-accent);
font-size: var(--font-size-caption);
padding: 6px 0;
.edit button {
min-block-size: 0;
block-size: var(--cpd-space-7x);
inline-size: var(--cpd-space-7x);
padding: var(--cpd-space-1x);
}

186
src/input/AvatarInputField.tsx
View File

@@ -1,5 +1,5 @@
/*
Copyright 2022 New Vector Ltd
Copyright 2022-2024 New Vector Ltd
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
@@ -14,21 +14,25 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import { useObjectRef } from "@react-aria/utils";
import {
AllHTMLAttributes,
useEffect,
useCallback,
useState,
forwardRef,
ChangeEvent,
useRef,
FC,
} from "react";
import classNames from "classnames";
import { useTranslation } from "react-i18next";
import { Button, Menu, MenuItem } from "@vector-im/compound-web";
import {
DeleteIcon,
EditIcon,
ShareIcon,
} from "@vector-im/compound-design-tokens/assets/web/icons";
import { Avatar, Size } from "../Avatar";
import { Button } from "../button";
import EditIcon from "../icons/Edit.svg?react";
import styles from "./AvatarInputField.module.css";
interface Props extends AllHTMLAttributes<HTMLInputElement> {
@@ -40,89 +44,115 @@ interface Props extends AllHTMLAttributes<HTMLInputElement> {
onRemoveAvatar: () => void;
}
export const AvatarInputField = forwardRef<HTMLInputElement, Props>(
(
{
id,
label,
className,
avatarUrl,
userId,
displayName,
onRemoveAvatar,
...rest
},
ref,
) => {
const { t } = useTranslation();
export const AvatarInputField: FC<Props> = ({
id,
label,
className,
avatarUrl,
userId,
displayName,
onRemoveAvatar,
...rest
}) => {
const { t } = useTranslation();
const [removed, setRemoved] = useState(false);
const [objUrl, setObjUrl] = useState<string | undefined>(undefined);
const [removed, setRemoved] = useState(false);
const [objUrl, setObjUrl] = useState<string | undefined>(undefined);
const [menuOpen, setMenuOpen] = useState(false);
const fileInputRef = useObjectRef(ref);
const fileInputRef = useRef<HTMLInputElement | null>(null);
useEffect(() => {
const currentInput = fileInputRef.current;
useEffect(() => {
const currentInput = fileInputRef.current!;
const onChange = (e: Event): void => {
const inputEvent = e as unknown as ChangeEvent<HTMLInputElement>;
if (inputEvent.target.files && inputEvent.target.files.length > 0) {
setObjUrl(URL.createObjectURL(inputEvent.target.files[0]));
setRemoved(false);
} else {
setObjUrl(undefined);
}
};
const onChange = (e: Event): void => {
const inputEvent = e as unknown as ChangeEvent<HTMLInputElement>;
if (inputEvent.target.files && inputEvent.target.files.length > 0) {
setObjUrl(URL.createObjectURL(inputEvent.target.files[0]));
setRemoved(false);
} else {
setObjUrl(undefined);
}
};
currentInput.addEventListener("change", onChange);
currentInput.addEventListener("change", onChange);
return (): void => {
currentInput?.removeEventListener("change", onChange);
};
});
return (): void => {
currentInput?.removeEventListener("change", onChange);
};
});
const onPressRemoveAvatar = useCallback(() => {
setRemoved(true);
onRemoveAvatar();
}, [onRemoveAvatar]);
const onSelectUpload = useCallback(() => {
fileInputRef.current!.click();
}, [fileInputRef]);
return (
<div className={classNames(styles.avatarInputField, className)}>
<div className={styles.avatarContainer}>
<Avatar
id={userId}
name={displayName}
size={Size.XL}
src={removed ? undefined : objUrl || avatarUrl}
/>
<input
id={id}
accept="image/png, image/jpeg"
ref={fileInputRef}
type="file"
className={styles.fileInput}
role="button"
aria-label={label}
{...rest}
/>
{/* https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/issues/966 */}
{/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
<label htmlFor={id} className={styles.fileInputButton}>
<EditIcon />
</label>
</div>
{(avatarUrl || objUrl) && !removed && (
<Button
className={styles.removeButton}
variant="icon"
onPress={onPressRemoveAvatar}
const onSelectRemove = useCallback(() => {
setRemoved(true);
onRemoveAvatar();
}, [onRemoveAvatar]);
return (
<div className={classNames(styles.avatarInputField, className)}>
<Avatar
id={userId}
className={styles.avatar}
name={displayName}
size={Size.XL}
src={removed ? undefined : objUrl || avatarUrl}
/>
<input
id={id}
accept="image/*"
ref={fileInputRef}
type="file"
className={styles.fileInput}
role="button"
aria-label={label}
{...rest}
/>
<div className={styles.edit}>
{(avatarUrl || objUrl) && !removed ? (
<Menu
title={t("action.edit")}
showTitle={false}
open={menuOpen}
onOpenChange={setMenuOpen}
trigger={
<Button
iconOnly
Icon={EditIcon}
kind="tertiary"
size="sm"
aria-label={t("action.edit")}
/>
}
>
{t("action.remove")}
</Button>
<MenuItem
Icon={ShareIcon}
label={t("action.upload_file")}
onSelect={onSelectUpload}
/>
<MenuItem
Icon={DeleteIcon}
label={t("action.remove")}
kind="critical"
onSelect={onSelectRemove}
/>
</Menu>
) : (
<Button
type="button"
iconOnly
Icon={EditIcon}
kind="tertiary"
size="sm"
aria-label={t("action.edit")}
onClick={onSelectUpload}
/>
)}
</div>
);
},
);
</div>
);
};
AvatarInputField.displayName = "AvatarInputField";

60
src/input/SelectInput.module.css
View File

@@ -1,60 +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.
*/
.selectInput {
position: relative;
display: inline-block;
margin-bottom: 28px;
max-width: 444px;
}
.label {
margin-top: 0;
margin-bottom: 12px;
}
.selectTrigger {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 12px;
background-color: var(--cpd-color-bg-canvas-default);
border-radius: 8px;
border: 1px solid var(--cpd-color-border-interactive-primary);
font-size: var(--font-size-body);
color: var(--cpd-color-text-primary);
height: 40px;
max-width: 100%;
width: 100%;
}
.selectTrigger:focus {
outline: auto;
}
.selectedItem {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding-right: 20px;
}
.popover {
position: absolute;
margin-top: 5px;
width: 100%;
z-index: 1;
}

80
src/input/SelectInput.tsx
View File

@@ -1,80 +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 { useRef } from "react";
import { AriaSelectOptions, HiddenSelect, useSelect } from "@react-aria/select";
import { useButton } from "@react-aria/button";
import { useSelectState } from "@react-stately/select";
import classNames from "classnames";
import { useTranslation } from "react-i18next";
import { Popover } from "../popover/Popover";
import { ListBox } from "../ListBox";
import styles from "./SelectInput.module.css";
import ArrowDownIcon from "../icons/ArrowDown.svg?react";
interface Props extends AriaSelectOptions<object> {
className?: string;
}
export function SelectInput(props: Props): JSX.Element {
const { t } = useTranslation();
const state = useSelectState(props);
const ref = useRef(null);
const { labelProps, triggerProps, valueProps, menuProps } = useSelect(
props,
state,
ref,
);
const { buttonProps } = useButton(triggerProps, ref);
return (
<div className={classNames(styles.selectInput, props.className)}>
<h4 {...labelProps} className={styles.label}>
{props.label}
</h4>
<HiddenSelect
state={state}
triggerRef={ref}
label={props.label}
name={props.name}
/>
<button {...buttonProps} ref={ref} className={styles.selectTrigger}>
<span {...valueProps} className={styles.selectedItem}>
{state.selectedItem
? state.selectedItem.rendered
: t("select_input_unset_button")}
</span>
<ArrowDownIcon />
</button>
{state.isOpen && (
<Popover
isOpen={state.isOpen}
onClose={state.close}
className={styles.popover}
>
<ListBox
{...menuProps}
state={state}
optionClassName={styles.option}
/>
</Popover>
)}
</div>
);
}

0
src/livekit/LivekitFocus.ts
View File

2
src/livekit/openIDSFU.ts
View File

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import { IOpenIDToken, MatrixClient } from "matrix-js-sdk";
import { IOpenIDToken, MatrixClient } from "matrix-js-sdk/src/matrix";
import { logger } from "matrix-js-sdk/src/logger";
import { MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc/MatrixRTCSession";
import { useEffect, useState } from "react";

1
src/livekit/useECConnectionState.ts
View File

@@ -115,6 +115,7 @@ async function doConnect(
await connectAndPublish(livekitRoom, sfuConfig, preCreatedAudioTrack, []);
} catch (e) {
preCreatedAudioTrack?.stop();
logger.warn("Stopped precreated audio tracks.", e);
}
}

2
src/otel/OTelCall.ts
View File

@@ -15,7 +15,7 @@ limitations under the License.
*/
import { Span } from "@opentelemetry/api";
import { MatrixCall } from "matrix-js-sdk";
import { MatrixCall } from "matrix-js-sdk/src/matrix";
import { CallEvent } from "matrix-js-sdk/src/webrtc/call";
import {
TransceiverStats,

2
src/otel/OTelCallAbstractMediaStreamSpan.ts
View File

@@ -67,7 +67,7 @@ export abstract class OTelCallAbstractMediaStreamSpan {
});
}
public abstract update(data: Object): void;
public abstract update(data: object): void;
public end(): void {
this.trackSpans.forEach((tSpan) => {

2
src/otel/OTelGroupCallMembership.ts
View File

@@ -20,7 +20,7 @@ import {
MatrixClient,
MatrixEvent,
RoomMember,
} from "matrix-js-sdk";
} from "matrix-js-sdk/src/matrix";
import { logger } from "matrix-js-sdk/src/logger";
import {
CallError,

290
src/otel/ObjectFlattener.test.ts Normal file
View File

@@ -0,0 +1,290 @@
/*
Copyright 2024 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 { GroupCallStatsReport } from "matrix-js-sdk/src/webrtc/groupCall";
import {
AudioConcealment,
ByteSentStatsReport,
ConnectionStatsReport,
} from "matrix-js-sdk/src/webrtc/stats/statsReport";
import { describe, expect, it } from "vitest";
import { ObjectFlattener } from "../../src/otel/ObjectFlattener";
/*
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.
*/
describe("ObjectFlattener", () => {
const noConcealment: AudioConcealment = {
concealedAudio: 0,
totalAudioDuration: 0,
};
const statsReport: GroupCallStatsReport<ConnectionStatsReport> = {
report: {
callId: "callId",
opponentMemberId: "opponentMemberId",
bandwidth: { upload: 426, download: 0 },
bitrate: {
upload: 426,
download: 0,
audio: {
upload: 124,
download: 0,
},
video: {
upload: 302,
download: 0,
},
},
packetLoss: {
total: 0,
download: 0,
upload: 0,
},
framerate: {
local: new Map([
["LOCAL_AUDIO_TRACK_ID", 0],
["LOCAL_VIDEO_TRACK_ID", 30],
]),
remote: new Map([
["REMOTE_AUDIO_TRACK_ID", 0],
["REMOTE_VIDEO_TRACK_ID", 60],
]),
},
resolution: {
local: new Map([
["LOCAL_AUDIO_TRACK_ID", { height: -1, width: -1 }],
["LOCAL_VIDEO_TRACK_ID", { height: 460, width: 780 }],
]),
remote: new Map([
["REMOTE_AUDIO_TRACK_ID", { height: -1, width: -1 }],
["REMOTE_VIDEO_TRACK_ID", { height: 960, width: 1080 }],
]),
},
jitter: new Map([
["REMOTE_AUDIO_TRACK_ID", 2],
["REMOTE_VIDEO_TRACK_ID", 50],
]),
codec: {
local: new Map([
["LOCAL_AUDIO_TRACK_ID", "opus"],
["LOCAL_VIDEO_TRACK_ID", "v8"],
]),
remote: new Map([
["REMOTE_AUDIO_TRACK_ID", "opus"],
["REMOTE_VIDEO_TRACK_ID", "v9"],
]),
},
transport: [
{
ip: "ff11::5fa:abcd:999c:c5c5:50000",
type: "udp",
localIp: "2aaa:9999:2aaa:999:8888:2aaa:2aaa:7777:50000",
isFocus: true,
localCandidateType: "host",
remoteCandidateType: "host",
networkType: "ethernet",
rtt: NaN,
},
{
ip: "10.10.10.2:22222",
type: "tcp",
localIp: "10.10.10.100:33333",
isFocus: true,
localCandidateType: "srfx",
remoteCandidateType: "srfx",
networkType: "ethernet",
rtt: 0,
},
],
audioConcealment: new Map([
["REMOTE_AUDIO_TRACK_ID", noConcealment],
["REMOTE_VIDEO_TRACK_ID", noConcealment],
]),
totalAudioConcealment: noConcealment,
},
};
describe("on flattenObjectRecursive", () => {
it("should flatter an Map object", () => {
const flatObject = {};
ObjectFlattener.flattenObjectRecursive(
statsReport.report.resolution,
flatObject,
"matrix.call.stats.connection.resolution.",
0,
);
expect(flatObject).toEqual({
"matrix.call.stats.connection.resolution.local.LOCAL_AUDIO_TRACK_ID.height":
-1,
"matrix.call.stats.connection.resolution.local.LOCAL_AUDIO_TRACK_ID.width":
-1,
"matrix.call.stats.connection.resolution.local.LOCAL_VIDEO_TRACK_ID.height": 460,
"matrix.call.stats.connection.resolution.local.LOCAL_VIDEO_TRACK_ID.width": 780,
"matrix.call.stats.connection.resolution.remote.REMOTE_AUDIO_TRACK_ID.height":
-1,
"matrix.call.stats.connection.resolution.remote.REMOTE_AUDIO_TRACK_ID.width":
-1,
"matrix.call.stats.connection.resolution.remote.REMOTE_VIDEO_TRACK_ID.height": 960,
"matrix.call.stats.connection.resolution.remote.REMOTE_VIDEO_TRACK_ID.width": 1080,
});
});
it("should flatter an Array object", () => {
const flatObject = {};
ObjectFlattener.flattenObjectRecursive(
statsReport.report.transport,
flatObject,
"matrix.call.stats.connection.transport.",
0,
);
expect(flatObject).toEqual({
"matrix.call.stats.connection.transport.0.ip":
"ff11::5fa:abcd:999c:c5c5:50000",
"matrix.call.stats.connection.transport.0.type": "udp",
"matrix.call.stats.connection.transport.0.localIp":
"2aaa:9999:2aaa:999:8888:2aaa:2aaa:7777:50000",
"matrix.call.stats.connection.transport.0.isFocus": true,
"matrix.call.stats.connection.transport.0.localCandidateType": "host",
"matrix.call.stats.connection.transport.0.remoteCandidateType": "host",
"matrix.call.stats.connection.transport.0.networkType": "ethernet",
"matrix.call.stats.connection.transport.0.rtt": "NaN",
"matrix.call.stats.connection.transport.1.ip": "10.10.10.2:22222",
"matrix.call.stats.connection.transport.1.type": "tcp",
"matrix.call.stats.connection.transport.1.localIp":
"10.10.10.100:33333",
"matrix.call.stats.connection.transport.1.isFocus": true,
"matrix.call.stats.connection.transport.1.localCandidateType": "srfx",
"matrix.call.stats.connection.transport.1.remoteCandidateType": "srfx",
"matrix.call.stats.connection.transport.1.networkType": "ethernet",
"matrix.call.stats.connection.transport.1.rtt": 0,
});
});
});
describe("on flattenReportObject Connection Stats", () => {
it("should flatten a Report to otel Attributes Object", () => {
expect(
ObjectFlattener.flattenReportObject(
"matrix.call.stats.connection",
statsReport.report,
),
).toEqual({
"matrix.call.stats.connection.callId": "callId",
"matrix.call.stats.connection.opponentMemberId": "opponentMemberId",
"matrix.call.stats.connection.bandwidth.download": 0,
"matrix.call.stats.connection.bandwidth.upload": 426,
"matrix.call.stats.connection.bitrate.audio.download": 0,
"matrix.call.stats.connection.bitrate.audio.upload": 124,
"matrix.call.stats.connection.bitrate.download": 0,
"matrix.call.stats.connection.bitrate.upload": 426,
"matrix.call.stats.connection.bitrate.video.download": 0,
"matrix.call.stats.connection.bitrate.video.upload": 302,
"matrix.call.stats.connection.codec.local.LOCAL_AUDIO_TRACK_ID": "opus",
"matrix.call.stats.connection.codec.local.LOCAL_VIDEO_TRACK_ID": "v8",
"matrix.call.stats.connection.codec.remote.REMOTE_AUDIO_TRACK_ID":
"opus",
"matrix.call.stats.connection.codec.remote.REMOTE_VIDEO_TRACK_ID": "v9",
"matrix.call.stats.connection.framerate.local.LOCAL_AUDIO_TRACK_ID": 0,
"matrix.call.stats.connection.framerate.local.LOCAL_VIDEO_TRACK_ID": 30,
"matrix.call.stats.connection.framerate.remote.REMOTE_AUDIO_TRACK_ID": 0,
"matrix.call.stats.connection.framerate.remote.REMOTE_VIDEO_TRACK_ID": 60,
"matrix.call.stats.connection.jitter.REMOTE_AUDIO_TRACK_ID": 2,
"matrix.call.stats.connection.jitter.REMOTE_VIDEO_TRACK_ID": 50,
"matrix.call.stats.connection.packetLoss.download": 0,
"matrix.call.stats.connection.packetLoss.total": 0,
"matrix.call.stats.connection.packetLoss.upload": 0,
"matrix.call.stats.connection.resolution.local.LOCAL_AUDIO_TRACK_ID.height":
-1,
"matrix.call.stats.connection.resolution.local.LOCAL_AUDIO_TRACK_ID.width":
-1,
"matrix.call.stats.connection.resolution.local.LOCAL_VIDEO_TRACK_ID.height": 460,
"matrix.call.stats.connection.resolution.local.LOCAL_VIDEO_TRACK_ID.width": 780,
"matrix.call.stats.connection.resolution.remote.REMOTE_AUDIO_TRACK_ID.height":
-1,
"matrix.call.stats.connection.resolution.remote.REMOTE_AUDIO_TRACK_ID.width":
-1,
"matrix.call.stats.connection.resolution.remote.REMOTE_VIDEO_TRACK_ID.height": 960,
"matrix.call.stats.connection.resolution.remote.REMOTE_VIDEO_TRACK_ID.width": 1080,
"matrix.call.stats.connection.transport.0.ip":
"ff11::5fa:abcd:999c:c5c5:50000",
"matrix.call.stats.connection.transport.0.type": "udp",
"matrix.call.stats.connection.transport.0.localIp":
"2aaa:9999:2aaa:999:8888:2aaa:2aaa:7777:50000",
"matrix.call.stats.connection.transport.0.isFocus": true,
"matrix.call.stats.connection.transport.0.localCandidateType": "host",
"matrix.call.stats.connection.transport.0.remoteCandidateType": "host",
"matrix.call.stats.connection.transport.0.networkType": "ethernet",
"matrix.call.stats.connection.transport.0.rtt": "NaN",
"matrix.call.stats.connection.transport.1.ip": "10.10.10.2:22222",
"matrix.call.stats.connection.transport.1.type": "tcp",
"matrix.call.stats.connection.transport.1.localIp":
"10.10.10.100:33333",
"matrix.call.stats.connection.transport.1.isFocus": true,
"matrix.call.stats.connection.transport.1.localCandidateType": "srfx",
"matrix.call.stats.connection.transport.1.remoteCandidateType": "srfx",
"matrix.call.stats.connection.transport.1.networkType": "ethernet",
"matrix.call.stats.connection.transport.1.rtt": 0,
"matrix.call.stats.connection.audioConcealment.REMOTE_AUDIO_TRACK_ID.concealedAudio": 0,
"matrix.call.stats.connection.audioConcealment.REMOTE_AUDIO_TRACK_ID.totalAudioDuration": 0,
"matrix.call.stats.connection.audioConcealment.REMOTE_VIDEO_TRACK_ID.concealedAudio": 0,
"matrix.call.stats.connection.audioConcealment.REMOTE_VIDEO_TRACK_ID.totalAudioDuration": 0,
"matrix.call.stats.connection.totalAudioConcealment.concealedAudio": 0,
"matrix.call.stats.connection.totalAudioConcealment.totalAudioDuration": 0,
});
});
});
describe("on flattenByteSendStatsReportObject", () => {
const byteSentStatsReport = new Map<
string,
number
>() as ByteSentStatsReport;
byteSentStatsReport.callId = "callId";
byteSentStatsReport.opponentMemberId = "opponentMemberId";
byteSentStatsReport.set("4aa92608-04c6-428e-8312-93e17602a959", 132093);
byteSentStatsReport.set("a08e4237-ee30-4015-a932-b676aec894b1", 913448);
it("should flatten a Report to otel Attributes Object", () => {
expect(
ObjectFlattener.flattenReportObject(
"matrix.call.stats.bytesSend",
byteSentStatsReport,
),
).toEqual({
"matrix.call.stats.bytesSend.4aa92608-04c6-428e-8312-93e17602a959": 132093,
"matrix.call.stats.bytesSend.a08e4237-ee30-4015-a932-b676aec894b1": 913448,
});
expect(byteSentStatsReport.callId).toEqual("callId");
expect(byteSentStatsReport.opponentMemberId).toEqual("opponentMemberId");
});
});
});

2
src/otel/ObjectFlattener.ts
View File

@@ -74,7 +74,7 @@ export class ObjectFlattener {
}
public static flattenObjectRecursive(
obj: Object,
obj: object,
flatObject: Attributes,
prefix: string,
depth: number,

24
src/popover/Popover.module.css
View File

@@ -1,24 +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.
*/
.popover {
display: flex;
flex-direction: column;
width: 194px;
background: var(--cpd-color-bg-subtle-secondary);
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
border-radius: 8px;
}

62
src/popover/Popover.tsx
View File

@@ -1,62 +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 { forwardRef, HTMLAttributes } from "react";
import { DismissButton, useOverlay } from "@react-aria/overlays";
import { FocusScope } from "@react-aria/focus";
import classNames from "classnames";
import { useObjectRef } from "@react-aria/utils";
import styles from "./Popover.module.css";
interface Props extends HTMLAttributes<HTMLDivElement> {
isOpen: boolean;
onClose: () => void;
className?: string;
children?: JSX.Element;
}
export const Popover = forwardRef<HTMLDivElement, Props>(
({ isOpen = true, onClose, className, children, ...rest }, ref) => {
const popoverRef = useObjectRef(ref);
const { overlayProps } = useOverlay(
{
isOpen,
onClose,
shouldCloseOnBlur: true,
isDismissable: true,
},
popoverRef,
);
return (
<FocusScope restoreFocus>
<div
{...overlayProps}
{...rest}
className={classNames(styles.popover, className)}
ref={popoverRef}
>
{children}
<DismissButton onDismiss={onClose} />
</div>
</FocusScope>
);
},
);
Popover.displayName = "Popover";

20
src/popover/PopoverMenu.module.css
View File

@@ -1,20 +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.
*/
.popoverMenuTrigger {
position: relative;
display: inline-block;
}

98
src/popover/PopoverMenu.tsx
View File

@@ -1,98 +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 { forwardRef, useRef } from "react";
import { useMenuTriggerState } from "@react-stately/menu";
import { useMenuTrigger } from "@react-aria/menu";
import { OverlayContainer, useOverlayPosition } from "@react-aria/overlays";
import { mergeProps, useObjectRef } from "@react-aria/utils";
import classNames from "classnames";
import { MenuTriggerProps } from "@react-types/menu";
import { Placement } from "@react-types/overlays";
import styles from "./PopoverMenu.module.css";
import { Popover } from "./Popover";
interface PopoverMenuTriggerProps extends MenuTriggerProps {
children: JSX.Element;
placement: Placement;
className: string;
disableOnState: boolean;
[index: string]: unknown;
}
export const PopoverMenuTrigger = forwardRef<
HTMLDivElement,
PopoverMenuTriggerProps
>(({ children, placement, className, disableOnState, ...rest }, ref) => {
const popoverMenuState = useMenuTriggerState(rest);
const buttonRef = useObjectRef(ref);
const { menuTriggerProps, menuProps } = useMenuTrigger(
{},
popoverMenuState,
buttonRef,
);
const popoverRef = useRef(null);
const { overlayProps } = useOverlayPosition({
targetRef: buttonRef,
overlayRef: popoverRef,
placement: placement || "top",
offset: 5,
isOpen: popoverMenuState.isOpen,
});
if (
!Array.isArray(children) ||
children.length > 2 ||
typeof children[1] !== "function"
) {
throw new Error(
"PopoverMenu must have two props. The first being a button and the second being a render prop.",
);
}
const [popoverTrigger, popoverMenu] = children;
return (
<div className={classNames(styles.popoverMenuTrigger, className)}>
<popoverTrigger.type
{...mergeProps(popoverTrigger.props, menuTriggerProps)}
on={!disableOnState && popoverMenuState.isOpen}
ref={buttonRef}
/>
{popoverMenuState.isOpen && (
<OverlayContainer>
<Popover
{...overlayProps}
isOpen={popoverMenuState.isOpen}
onClose={popoverMenuState.close}
ref={popoverRef}
>
{popoverMenu({
...menuProps,
autoFocus: popoverMenuState.focusStrategy,
onClose: popoverMenuState.close,
})}
</Popover>
</OverlayContainer>
)}
</div>
);
});
PopoverMenuTrigger.displayName = "PopoverMenuTrigger";

2
src/room/AppSelectionModal.tsx
View File

@@ -22,7 +22,7 @@ import { logger } from "matrix-js-sdk/src/logger";
import { Modal } from "../Modal";
import { useRoomEncryptionSystem } from "../e2ee/sharedKeyManagement";
import { getAbsoluteRoomUrl } from "../matrix-utils";
import { getAbsoluteRoomUrl } from "../utils/matrix";
import styles from "./AppSelectionModal.module.css";
import { editFragmentQuery } from "../UrlParams";
import { E2eeType } from "../e2ee/e2eeType";

3
src/room/CallEndedView.module.css
View File

@@ -42,9 +42,8 @@ limitations under the License.
}
.callEndedButton {
margin: auto;
margin-top: 54px;
margin-left: 30px;
margin-right: 30px !important;
}
.submitButton {

25
src/room/CallEndedView.tsx
View File

@@ -18,17 +18,19 @@ import { FC, FormEventHandler, ReactNode, useCallback, useState } from "react";
import { MatrixClient } from "matrix-js-sdk/src/client";
import { Trans, useTranslation } from "react-i18next";
import { useHistory } from "react-router-dom";
import { Button } from "@vector-im/compound-web";
import styles from "./CallEndedView.module.css";
import feedbackStyle from "../input/FeedbackInput.module.css";
import { Button, LinkButton } from "../button";
import { useProfile } from "../profile/useProfile";
import { Body, Link, Headline } from "../typography/Typography";
import { Body, Headline } from "../typography/Typography";
import { Header, HeaderLogo, LeftNav, RightNav } from "../Header";
import { PosthogAnalytics } from "../analytics/PosthogAnalytics";
import { FieldRow, InputField } from "../input/Input";
import { StarRatingInput } from "../input/StarRatingInput";
import { RageshakeButton } from "../settings/RageshakeButton";
import { Link } from "../button/Link";
import { LinkButton } from "../button";
interface Props {
client: MatrixClient;
@@ -95,12 +97,7 @@ export const CallEndedView: FC<Props> = ({
calls
</p>
</Trans>
<LinkButton
className={styles.callEndedButton}
size="lg"
variant="default"
to="/register"
>
<LinkButton className={styles.callEndedButton} to="/register">
{t("call_ended_view.create_account_button")}
</LinkButton>
</div>
@@ -136,8 +133,6 @@ export const CallEndedView: FC<Props> = ({
<Button
type="submit"
className={styles.submitButton}
size="lg"
variant="default"
data-testid="home_go"
>
{submitting ? t("submitting") : t("action.submit")}
@@ -159,7 +154,7 @@ export const CallEndedView: FC<Props> = ({
</Trans>
</Headline>
<div className={styles.disconnectedButtons}>
<Button size="lg" variant="default" onClick={reconnect}>
<Button onClick={reconnect}>
{t("call_ended_view.reconnect_button")}
</Button>
<div className={styles.rageshakeButton}>
@@ -169,9 +164,7 @@ export const CallEndedView: FC<Props> = ({
</main>
{!confineToRoom && (
<Body className={styles.footer}>
<Link color="primary" to="/">
{t("return_home_button")}
</Link>
<Link to="/"> {t("return_home_button")} </Link>
</Body>
)}
</>
@@ -198,9 +191,7 @@ export const CallEndedView: FC<Props> = ({
</main>
{!confineToRoom && (
<Body className={styles.footer}>
<Link color="primary" to="/">
{t("call_ended_view.not_now_button")}
</Link>
<Link to="/"> {t("call_ended_view.not_now_button")} </Link>
</Body>
)}
</>

2
src/room/GroupCallLoader.tsx
View File

@@ -17,7 +17,7 @@ limitations under the License.
import { useCallback } from "react";
import { MatrixClient } from "matrix-js-sdk/src/client";
import { useTranslation } from "react-i18next";
import { MatrixError } from "matrix-js-sdk";
import { MatrixError } from "matrix-js-sdk/src/matrix";
import { useHistory } from "react-router-dom";
import { Heading, Link, Text } from "@vector-im/compound-web";

2
src/room/GroupCallView.tsx
View File

@@ -35,7 +35,7 @@ import { MatrixInfo } from "./VideoPreview";
import { CallEndedView } from "./CallEndedView";
import { PosthogAnalytics } from "../analytics/PosthogAnalytics";
import { useProfile } from "../profile/useProfile";
import { findDeviceByName } from "../media-utils";
import { findDeviceByName } from "../utils/media";
import { ActiveCall } from "./InCallView";
import { MUTE_PARTICIPANT_COUNT, MuteStates } from "./MuteStates";
import { useMediaDevices, MediaDevices } from "../livekit/MediaDevicesContext";

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

@@ -58,6 +58,10 @@ limitations under the License.
);
}
.footer.hidden {
display: none;
}
.footer.overlay {
position: absolute;
inset-block-end: 0;
@@ -67,6 +71,7 @@ limitations under the License.
}
.footer.overlay.hidden {
display: grid;
opacity: 0;
pointer-events: none;
}

61
src/room/InCallView.tsx
View File

@@ -19,7 +19,6 @@ import {
RoomContext,
useLocalParticipant,
} from "@livekit/components-react";
import { usePreventScroll } from "@react-aria/overlays";
import { ConnectionState, Room } from "livekit-client";
import { MatrixClient } from "matrix-js-sdk/src/client";
import {
@@ -44,10 +43,10 @@ import LogoMark from "../icons/LogoMark.svg?react";
import LogoType from "../icons/LogoType.svg?react";
import type { IWidgetApiRequest } from "matrix-widget-api";
import {
HangupButton,
EndCallButton,
MicButton,
VideoButton,
ScreenshareButton,
ShareScreenButton,
SettingsButton,
} from "../button";
import { Header, LeftNav, RightNav, RoomHeaderInfo } from "../Header";
@@ -69,7 +68,7 @@ import { InviteButton } from "../button/InviteButton";
import { LayoutToggle } from "./LayoutToggle";
import { ECConnectionState } from "../livekit/useECConnectionState";
import { useOpenIDSFU } from "../livekit/openIDSFU";
import { GridMode, Layout, useCallViewModel } from "../state/CallViewModel";
import { CallViewModel, GridMode, Layout } from "../state/CallViewModel";
import { Grid, TileProps } from "../grid/Grid";
import { useObservable } from "../state/useObservable";
import { useInitial } from "../useInitial";
@@ -93,7 +92,7 @@ const canScreenshare = "getDisplayMedia" in (navigator.mediaDevices ?? {});
const maxTapDurationMs = 400;
export interface ActiveCallProps
extends Omit<InCallViewProps, "livekitRoom" | "connState"> {
extends Omit<InCallViewProps, "vm" | "livekitRoom" | "connState"> {
e2eeSystem: EncryptionSystem;
}
@@ -105,6 +104,8 @@ export const ActiveCall: FC<ActiveCallProps> = (props) => {
sfuConfig,
props.e2eeSystem,
);
const connStateObservable = useObservable(connState);
const [vm, setVm] = useState<CallViewModel | null>(null);
useEffect(() => {
return (): void => {
@@ -113,17 +114,41 @@ export const ActiveCall: FC<ActiveCallProps> = (props) => {
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
if (!livekitRoom) return null;
useEffect(() => {
if (livekitRoom !== undefined) {
const vm = new CallViewModel(
props.rtcSession.room,
livekitRoom,
props.e2eeSystem.kind !== E2eeType.NONE,
connStateObservable,
);
setVm(vm);
return (): void => vm.destroy();
}
}, [
props.rtcSession.room,
livekitRoom,
props.e2eeSystem.kind,
connStateObservable,
]);
if (livekitRoom === undefined || vm === null) return null;
return (
<RoomContext.Provider value={livekitRoom}>
<InCallView {...props} livekitRoom={livekitRoom} connState={connState} />
<InCallView
{...props}
vm={vm}
livekitRoom={livekitRoom}
connState={connState}
/>
</RoomContext.Provider>
);
};
export interface InCallViewProps {
client: MatrixClient;
vm: CallViewModel;
matrixInfo: MatrixInfo;
rtcSession: MatrixRTCSession;
livekitRoom: Room;
@@ -138,6 +163,7 @@ export interface InCallViewProps {
export const InCallView: FC<InCallViewProps> = ({
client,
vm,
matrixInfo,
rtcSession,
livekitRoom,
@@ -148,7 +174,6 @@ export const InCallView: FC<InCallViewProps> = ({
connState,
onShareClick,
}) => {
usePreventScroll();
useWakeLock();
useEffect(() => {
@@ -193,12 +218,6 @@ export const InCallView: FC<InCallViewProps> = ({
const reducedControls = boundsValid && bounds.width <= 340;
const noControls = reducedControls && bounds.height <= 400;
const vm = useCallViewModel(
rtcSession.room,
livekitRoom,
matrixInfo.e2eeSystem.kind !== E2eeType.NONE,
connState,
);
const windowMode = useObservableEagerState(vm.windowMode);
const layout = useObservableEagerState(vm.layout);
const gridMode = useObservableEagerState(vm.gridMode);
@@ -471,14 +490,14 @@ export const InCallView: FC<InCallViewProps> = ({
<MicButton
key="1"
muted={!muteStates.audio.enabled}
onPress={toggleMicrophone}
onClick={toggleMicrophone}
disabled={muteStates.audio.setEnabled === null}
data-testid="incall_mute"
/>,
<VideoButton
key="2"
muted={!muteStates.video.enabled}
onPress={toggleCamera}
onClick={toggleCamera}
disabled={muteStates.video.setEnabled === null}
data-testid="incall_videomute"
/>,
@@ -486,21 +505,21 @@ export const InCallView: FC<InCallViewProps> = ({
if (!reducedControls) {
if (canScreenshare && !hideScreensharing) {
buttons.push(
<ScreenshareButton
<ShareScreenButton
key="3"
enabled={isScreenShareEnabled}
onPress={toggleScreensharing}
onClick={toggleScreensharing}
data-testid="incall_screenshare"
/>,
);
}
buttons.push(<SettingsButton key="4" onPress={openSettings} />);
buttons.push(<SettingsButton key="4" onClick={openSettings} />);
}
buttons.push(
<HangupButton
<EndCallButton
key="6"
onPress={function (): void {
onClick={function (): void {
onLeave();
}}
data-testid="incall_leave"

9
src/room/InviteModal.module.css
View File

@@ -24,3 +24,12 @@ limitations under the License.
.button {
width: 100%;
}
.qrCode {
display: flex;
justify-content: center;
}
.qrCode img {
margin-block-end: var(--cpd-space-8x);
}

6
src/room/InviteModal.tsx
View File

@@ -16,7 +16,7 @@ limitations under the License.
import { FC, MouseEvent, useCallback, useMemo, useState } from "react";
import { useTranslation } from "react-i18next";
import { Room } from "matrix-js-sdk";
import { Room } from "matrix-js-sdk/src/matrix";
import { Button, Text } from "@vector-im/compound-web";
import {
LinkIcon,
@@ -25,10 +25,11 @@ import {
import useClipboard from "react-use-clipboard";
import { Modal } from "../Modal";
import { getAbsoluteRoomUrl } from "../matrix-utils";
import { getAbsoluteRoomUrl } from "../utils/matrix";
import styles from "./InviteModal.module.css";
import { Toast } from "../Toast";
import { useRoomEncryptionSystem } from "../e2ee/sharedKeyManagement";
import { QrCode } from "../QrCode";
interface Props {
room: Room;
@@ -61,6 +62,7 @@ export const InviteModal: FC<Props> = ({ room, open, onDismiss }) => {
return (
<>
<Modal title={t("invite_modal.title")} open={open} onDismiss={onDismiss}>
<QrCode className={styles.qrCode} data={url} />
<Text className={styles.url} size="sm" weight="semibold">
{url}
</Text>

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

@@ -19,7 +19,6 @@ limitations under the License.
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;
position: relative;
}
@@ -32,9 +31,9 @@ limitations under the License.
inline-size: var(--cpd-space-11x);
cursor: pointer;
border-radius: var(--cpd-radius-pill-effect);
color: var(--cpd-color-icon-primary);
background: var(--cpd-color-bg-action-secondary-rest);
box-shadow: var(--small-drop-shadow);
transition: background-color 0.1s;
}
.toggle svg {
@@ -43,6 +42,7 @@ limitations under the License.
padding: calc(2.5 * var(--cpd-space-1x));
pointer-events: none;
color: var(--cpd-color-icon-primary);
transition: color 0.1s;
}
.toggle svg:nth-child(2) {
@@ -61,7 +61,7 @@ limitations under the License.
}
.toggle input:active {
background: var(--cpd-color-bg-action-secondary-hovered);
background: var(--cpd-color-bg-action-secondary-pressed);
box-shadow: none;
}
@@ -80,7 +80,7 @@ limitations under the License.
}
.toggle input:checked:active {
background: var(--cpd-color-bg-action-primary-hovered);
background: var(--cpd-color-bg-action-primary-pressed);
}
.toggle input:first-child {

15
src/room/LobbyView.tsx
View File

@@ -17,7 +17,7 @@ limitations under the License.
import { FC, useCallback, useState } from "react";
import { useTranslation } from "react-i18next";
import { MatrixClient } from "matrix-js-sdk/src/matrix";
import { Button, Link } from "@vector-im/compound-web";
import { Button } from "@vector-im/compound-web";
import classNames from "classnames";
import { useHistory } from "react-router-dom";
@@ -29,7 +29,7 @@ import { MatrixInfo, VideoPreview } from "./VideoPreview";
import { MuteStates } from "./MuteStates";
import { InviteButton } from "../button/InviteButton";
import {
HangupButton,
EndCallButton,
MicButton,
SettingsButton,
VideoButton,
@@ -37,6 +37,7 @@ import {
import { SettingsModal, defaultSettingsTab } from "../settings/SettingsModal";
import { useMediaQuery } from "../useMediaQuery";
import { E2eeType } from "../e2ee/e2eeType";
import { Link } from "../button/Link";
interface Props {
client: MatrixClient;
@@ -92,7 +93,7 @@ export const LobbyView: FC<Props> = ({
const recentsButtonInFooter = useMediaQuery("(max-height: 500px)");
const recentsButton = !confineToRoom && (
<Link className={styles.recents} href="#" onClick={onLeaveClick}>
<Link className={styles.recents} to="/">
{t("lobby.leave_button")}
</Link>
);
@@ -140,16 +141,16 @@ export const LobbyView: FC<Props> = ({
<div className={inCallStyles.buttons}>
<MicButton
muted={!muteStates.audio.enabled}
onPress={onAudioPress}
onClick={onAudioPress}
disabled={muteStates.audio.setEnabled === null}
/>
<VideoButton
muted={!muteStates.video.enabled}
onPress={onVideoPress}
onClick={onVideoPress}
disabled={muteStates.video.setEnabled === null}
/>
<SettingsButton onPress={openSettings} />
{!confineToRoom && <HangupButton onPress={onLeaveClick} />}
<SettingsButton onClick={openSettings} />
{!confineToRoom && <EndCallButton onClick={onLeaveClick} />}
</div>
</div>
</div>

4
src/room/RageshakeRequestModal.tsx
View File

@@ -16,9 +16,9 @@ limitations under the License.
import { FC, useEffect } from "react";
import { useTranslation } from "react-i18next";
import { Button } from "@vector-im/compound-web";
import { Modal, Props as ModalProps } from "../Modal";
import { Button } from "../button";
import { FieldRow, ErrorMessage } from "../input/Input";
import { useSubmitRageshake } from "../settings/submit-rageshake";
import { Body } from "../typography/Typography";
@@ -52,7 +52,7 @@ export const RageshakeRequestModal: FC<Props> = ({
<Body>{t("rageshake_request_modal.body")}</Body>
<FieldRow>
<Button
onPress={(): void =>
onClick={(): void =>
void submitRageshake({
sendLogs: true,
rageshakeRequestId,

4
src/room/RoomAuthView.tsx
View File

@@ -18,9 +18,9 @@ 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 { Button } from "@vector-im/compound-web";
import styles from "./RoomAuthView.module.css";
import { Button } from "../button";
import { Body, Caption, Link, Headline } from "../typography/Typography";
import { Header, HeaderLogo, LeftNav, RightNav } from "../Header";
import { FieldRow, InputField, ErrorMessage } from "../input/Input";
@@ -117,7 +117,7 @@ export const RoomAuthView: FC = () => {
Not registered yet?{" "}
<Link
color="primary"
to={{ pathname: "/login", state: { from: location } }}
to={{ pathname: "/register", state: { from: location } }}
>
Create an account
</Link>

7
src/room/RoomPage.tsx
View File

@@ -35,10 +35,7 @@ import { LobbyView } from "./LobbyView";
import { E2eeType } from "../e2ee/e2eeType";
import { useProfile } from "../profile/useProfile";
import { useMuteStates } from "./MuteStates";
import {
useSetting,
optInAnalytics as optInAnalyticsSetting,
} from "../settings/settings";
import { useOptInAnalytics } from "../settings/settings";
export const RoomPage: FC = () => {
const {
@@ -83,7 +80,7 @@ export const RoomPage: FC = () => {
registerPasswordlessUser,
]);
const [optInAnalytics, setOptInAnalytics] = useSetting(optInAnalyticsSetting);
const [optInAnalytics, setOptInAnalytics] = useOptInAnalytics();
useEffect(() => {
// During the beta, opt into analytics by default
if (optInAnalytics === null && setOptInAnalytics) setOptInAnalytics(true);

164
src/room/checkForParallelCalls.test.ts Normal file
View File

@@ -0,0 +1,164 @@
/*
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 { vi, Mocked, test, expect } from "vitest";
import { RoomState } from "matrix-js-sdk/src/models/room-state";
import { PosthogAnalytics } from "../../src/analytics/PosthogAnalytics";
import { checkForParallelCalls } from "../../src/room/checkForParallelCalls";
import { withFakeTimers } from "../utils/test";
const withMockedPosthog = (
continuation: (posthog: Mocked<PosthogAnalytics>) => void,
): void => {
const posthog = vi.mocked({
trackEvent: vi.fn(),
} as unknown as PosthogAnalytics);
const instanceSpy = vi
.spyOn(PosthogAnalytics, "instance", "get")
.mockReturnValue(posthog);
try {
continuation(posthog);
} finally {
instanceSpy.mockRestore();
}
};
const mockRoomState = (
groupCallMemberContents: Record<string, unknown>[],
): RoomState => {
const stateEvents = groupCallMemberContents.map((content) => ({
getContent: (): Record<string, unknown> => content,
}));
return { getStateEvents: () => stateEvents } as unknown as RoomState;
};
test("checkForParallelCalls does nothing if all participants are in the same call", () => {
withFakeTimers(() => {
withMockedPosthog((posthog) => {
const roomState = mockRoomState([
{
"m.calls": [
{
"m.call_id": "1",
"m.devices": [
{
device_id: "Element Call",
session_id: "a",
expires_ts: Date.now() + 1000,
},
],
},
{
"m.call_id": null, // invalid
"m.devices": [
{
device_id: "Element Android",
session_id: "a",
expires_ts: Date.now() + 1000,
},
],
},
null, // invalid
],
},
{
"m.calls": [
{
"m.call_id": "1",
"m.devices": [
{
device_id: "Element Desktop",
session_id: "a",
expires_ts: Date.now() + 1000,
},
],
},
],
},
]);
checkForParallelCalls(roomState);
expect(posthog.trackEvent).not.toHaveBeenCalled();
});
});
});
test("checkForParallelCalls sends diagnostics to PostHog if there is a split-brain", () => {
withFakeTimers(() => {
withMockedPosthog((posthog) => {
const roomState = mockRoomState([
{
"m.calls": [
{
"m.call_id": "1",
"m.devices": [
{
device_id: "Element Call",
session_id: "a",
expires_ts: Date.now() + 1000,
},
],
},
{
"m.call_id": "2",
"m.devices": [
{
device_id: "Element Android",
session_id: "a",
expires_ts: Date.now() + 1000,
},
],
},
],
},
{
"m.calls": [
{
"m.call_id": "1",
"m.devices": [
{
device_id: "Element Desktop",
session_id: "a",
expires_ts: Date.now() + 1000,
},
],
},
{
"m.call_id": "2",
"m.devices": [
{
device_id: "Element Call",
session_id: "a",
expires_ts: Date.now() - 1000,
},
],
},
],
},
]);
checkForParallelCalls(roomState);
expect(posthog.trackEvent).toHaveBeenCalledWith({
eventName: "ParallelCalls",
participantsPerCall: {
"1": 2,
"2": 1,
},
});
});
});
});

2
src/room/useLoadGroupCall.ts
View File

@@ -26,7 +26,7 @@ import { SyncState } from "matrix-js-sdk/src/sync";
import { MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc/MatrixRTCSession";
import { RoomEvent, Room } from "matrix-js-sdk/src/models/room";
import { KnownMembership } from "matrix-js-sdk/src/types";
import { JoinRule } from "matrix-js-sdk";
import { JoinRule } from "matrix-js-sdk/src/matrix";
import { useTranslation } from "react-i18next";
import { widget } from "../widget";

64
src/room/usePageUnload.ts
View File

@@ -1,64 +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 { useEffect } from "react";
import { platform } from "../Platform";
export function usePageUnload(callback: () => void): void {
useEffect(() => {
let pageVisibilityTimeout: ReturnType<typeof setTimeout>;
function onBeforeUnload(event: PageTransitionEvent): void {
if (event.type === "visibilitychange") {
if (document.visibilityState === "visible") {
clearTimeout(pageVisibilityTimeout);
} else {
// Wait 5 seconds before closing the page to avoid accidentally leaving
// TODO: Make this configurable?
pageVisibilityTimeout = setTimeout(() => {
callback();
}, 5000);
}
} else {
callback();
}
}
// iOS doesn't fire beforeunload event, so leave the call when you hide the page.
if (platform === "ios") {
window.addEventListener("pagehide", onBeforeUnload);
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
document.addEventListener("visibilitychange", onBeforeUnload);
}
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
window.addEventListener("beforeunload", onBeforeUnload);
return (): void => {
window.removeEventListener("pagehide", onBeforeUnload);
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
document.removeEventListener("visibilitychange", onBeforeUnload);
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
window.removeEventListener("beforeunload", onBeforeUnload);
clearTimeout(pageVisibilityTimeout);
};
}, [callback]);
}

94
src/rtcSessionHelper.test.ts Normal file
View File

@@ -0,0 +1,94 @@
/*
Copyright 2024 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 { MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc/MatrixRTCSession";
import { expect, test, vi } from "vitest";
import { enterRTCSession } from "../src/rtcSessionHelpers";
import { Config } from "../src/config/Config";
test("It joins the correct Session", async () => {
const focusFromOlderMembership = {
type: "livekit",
livekit_service_url: "http://my-oldest-member-service-url.com",
livekit_alias: "my-oldest-member-service-alias",
};
const focusConfigFromWellKnown = {
type: "livekit",
livekit_service_url: "http://my-well-known-service-url.com",
};
const focusConfigFromWellKnown2 = {
type: "livekit",
livekit_service_url: "http://my-well-known-service-url2.com",
};
const clientWellKnown = {
"org.matrix.msc4143.rtc_foci": [
focusConfigFromWellKnown,
focusConfigFromWellKnown2,
],
};
vi.spyOn(Config, "get").mockReturnValue({
livekit: { livekit_service_url: "http://my-default-service-url.com" },
eula: "",
});
const mockedSession = vi.mocked({
room: {
roomId: "roomId",
client: {
getClientWellKnown: vi.fn().mockReturnValue(clientWellKnown),
},
},
memberships: [],
getFocusInUse: vi.fn().mockReturnValue(focusFromOlderMembership),
getOldestMembership: vi.fn().mockReturnValue({
getPreferredFoci: vi.fn().mockReturnValue([focusFromOlderMembership]),
}),
joinRoomSession: vi.fn(),
}) as unknown as MatrixRTCSession;
await enterRTCSession(mockedSession, false);
expect(mockedSession.joinRoomSession).toHaveBeenLastCalledWith(
[
{
livekit_alias: "my-oldest-member-service-alias",
livekit_service_url: "http://my-oldest-member-service-url.com",
type: "livekit",
},
{
livekit_alias: "roomId",
livekit_service_url: "http://my-well-known-service-url.com",
type: "livekit",
},
{
livekit_alias: "roomId",
livekit_service_url: "http://my-well-known-service-url2.com",
type: "livekit",
},
{
livekit_alias: "roomId",
livekit_service_url: "http://my-default-service-url.com",
type: "livekit",
},
],
{
focus_selection: "oldest_membership",
type: "livekit",
},
{ manageMediaKeys: false },
);
});

5
src/settings/FeedbackSettingsTab.tsx
View File

@@ -17,12 +17,11 @@ limitations under the License.
import { FC, useCallback } from "react";
import { randomString } from "matrix-js-sdk/src/randomstring";
import { useTranslation } from "react-i18next";
import { Button } from "@vector-im/compound-web";
import { Button } from "../button";
import { FieldRow, InputField, ErrorMessage } from "../input/Input";
import { useSubmitRageshake, useRageshakeRequest } from "./submit-rageshake";
import { Body } from "../typography/Typography";
import styles from "../input/SelectInput.module.css";
import feedbackStyles from "../input/FeedbackInput.module.css";
interface Props {
@@ -62,7 +61,7 @@ export const FeedbackSettingsTab: FC<Props> = ({ roomId }) => {
return (
<div>
<h4 className={styles.label}>{t("settings.feedback_tab_h4")}</h4>
<h4>{t("settings.feedback_tab_h4")}</h4>
<Body>{t("settings.feedback_tab_body")}</Body>
<form onSubmit={onSubmitFeedback}>
<FieldRow>

6
src/settings/RageshakeButton.tsx
View File

@@ -16,8 +16,8 @@ limitations under the License.
import { useTranslation } from "react-i18next";
import { FC, useCallback } from "react";
import { Button } from "@vector-im/compound-web";
import { Button } from "../button";
import { Config } from "../config/Config";
import styles from "./RageshakeButton.module.css";
import { useSubmitRageshake } from "./submit-rageshake";
@@ -52,9 +52,7 @@ export const RageshakeButton: FC<Props> = ({ description }) => {
logsComponent = (
<Button
size="lg"
variant="default"
onPress={sendDebugLogs}
onClick={sendDebugLogs}
className={styles.wideButton}
disabled={sending}
>

328
src/settings/SettingsModal.tsx
View File

@@ -14,21 +14,14 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import { ChangeEvent, FC, Key, ReactNode, useCallback } from "react";
import { Item } from "@react-stately/collections";
import { ChangeEvent, FC, ReactNode, useCallback } from "react";
import { Trans, useTranslation } from "react-i18next";
import { MatrixClient } from "matrix-js-sdk";
import { MatrixClient } from "matrix-js-sdk/src/matrix";
import { Dropdown } from "@vector-im/compound-web";
import { Modal } from "../Modal";
import styles from "./SettingsModal.module.css";
import { TabContainer, TabItem } from "../tabs/Tabs";
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 { Tab, TabContainer } from "../tabs/Tabs";
import { FieldRow, InputField } from "../input/Input";
import { Caption } from "../typography/Typography";
import { AnalyticsNotice } from "../analytics/AnalyticsNotice";
@@ -42,9 +35,9 @@ import {
import { widget } from "../widget";
import {
useSetting,
optInAnalytics as optInAnalyticsSetting,
developerSettingsTab as developerSettingsTabSetting,
duplicateTiles as duplicateTilesSetting,
useOptInAnalytics,
} from "./settings";
import { isFirefox } from "../Platform";
@@ -77,7 +70,7 @@ export const SettingsModal: FC<Props> = ({
}) => {
const { t } = useTranslation();
const [optInAnalytics, setOptInAnalytics] = useSetting(optInAnalyticsSetting);
const [optInAnalytics, setOptInAnalytics] = useOptInAnalytics();
const [developerSettingsTab, setDeveloperSettingsTab] = useSetting(
developerSettingsTabSetting,
);
@@ -90,24 +83,30 @@ export const SettingsModal: FC<Props> = ({
): ReactNode => {
if (devices.available.length == 0) return null;
const values = devices.available.map(
({ deviceId, label }, index) =>
[
deviceId,
!!label && label.trim().length > 0
? label
: `${caption} ${index + 1}`,
] as [string, string],
);
return (
<SelectInput
<Dropdown
label={caption}
selectedKey={
defaultValue={
devices.selectedId === "" || !devices.selectedId
? "default"
: devices.selectedId
}
onSelectionChange={(id): void => devices.select(id.toString())}
>
{devices.available.map(({ deviceId, label }, index) => (
<Item key={deviceId}>
{!!label && label.trim().length > 0
? label
: `${caption} ${index + 1}`}
</Item>
))}
</SelectInput>
onValueChange={(id): void => devices.select(id)}
values={values}
// XXX This is unused because we set a defaultValue. The component
// shouldn't require this prop.
placeholder=""
/>
);
};
@@ -125,158 +124,123 @@ export const SettingsModal: FC<Props> = ({
const devices = useMediaDevices();
useMediaDeviceNames(devices, open);
const audioTab = (
<TabItem
key="audio"
title={
<>
<AudioIcon width={16} height={16} />
<span className={styles.tabLabel}>{t("common.audio")}</span>
</>
}
>
{generateDeviceSelection(devices.audioInput, t("common.microphone"))}
{!isFirefox() &&
generateDeviceSelection(
devices.audioOutput,
t("settings.speaker_device_selection_label"),
)}
</TabItem>
);
const videoTab = (
<TabItem
key="video"
title={
<>
<VideoIcon width={16} height={16} />
<span>{t("common.video")}</span>
</>
}
>
{generateDeviceSelection(devices.videoInput, t("common.camera"))}
</TabItem>
);
const profileTab = (
<TabItem
key="profile"
title={
<>
<UserIcon width={15} height={15} />
<span>{t("common.profile")}</span>
</>
}
>
<ProfileSettingsTab client={client} />
</TabItem>
);
const feedbackTab = (
<TabItem
key="feedback"
title={
<>
<FeedbackIcon width={16} height={16} />
<span>{t("settings.feedback_tab_title")}</span>
</>
}
>
<FeedbackSettingsTab roomId={roomId} />
</TabItem>
);
const moreTab = (
<TabItem
key="more"
title={
<>
<OverflowIcon width={16} height={16} />
<span>{t("settings.more_tab_title")}</span>
</>
}
>
<h4>{t("settings.developer_tab_title")}</h4>
<p>
{t("version", {
version: import.meta.env.VITE_APP_VERSION || "dev",
})}
</p>
<FieldRow>
<InputField
id="developerSettingsTab"
type="checkbox"
checked={developerSettingsTab}
label={t("settings.developer_settings_label")}
description={t("settings.developer_settings_label_description")}
onChange={(event: ChangeEvent<HTMLInputElement>): void =>
setDeveloperSettingsTab(event.target.checked)
}
/>
</FieldRow>
<h4>{t("common.analytics")}</h4>
<FieldRow>
<InputField
id="optInAnalytics"
type="checkbox"
checked={optInAnalytics ?? undefined}
description={optInDescription}
onChange={(event: ChangeEvent<HTMLInputElement>): void => {
setOptInAnalytics?.(event.target.checked);
}}
/>
</FieldRow>
</TabItem>
);
const developerTab = (
<TabItem
key="developer"
title={
<>
<DeveloperIcon width={16} height={16} />
<span>{t("settings.developer_tab_title")}</span>
</>
}
>
<p>
{t("version", {
productName: import.meta.env.VITE_PRODUCT_NAME || "Element Call",
version: import.meta.env.VITE_APP_VERSION || "dev",
})}
</p>
<p>
{t("crypto_version", {
version: client.getCrypto()?.getVersion() || "unknown",
})}
</p>
<p>
{t("matrix_id", {
id: client.getUserId() || "unknown",
})}
</p>
<p>
{t("device_id", {
id: client.getDeviceId() || "unknown",
})}
</p>
<FieldRow>
<InputField
id="duplicateTiles"
type="number"
label={t("settings.duplicate_tiles_label")}
value={duplicateTiles.toString()}
onChange={useCallback(
(event: ChangeEvent<HTMLInputElement>): void => {
const value = event.target.valueAsNumber;
setDuplicateTiles(Number.isNaN(value) ? 0 : value);
},
[setDuplicateTiles],
const audioTab: Tab<SettingsTab> = {
key: "audio",
name: t("common.audio"),
content: (
<>
{generateDeviceSelection(devices.audioInput, t("common.microphone"))}
{!isFirefox() &&
generateDeviceSelection(
devices.audioOutput,
t("settings.speaker_device_selection_label"),
)}
/>
</FieldRow>
</TabItem>
);
</>
),
};
const videoTab: Tab<SettingsTab> = {
key: "video",
name: t("common.video"),
content: generateDeviceSelection(devices.videoInput, t("common.camera")),
};
const profileTab: Tab<SettingsTab> = {
key: "profile",
name: t("common.profile"),
content: <ProfileSettingsTab client={client} />,
};
const feedbackTab: Tab<SettingsTab> = {
key: "feedback",
name: t("settings.feedback_tab_title"),
content: <FeedbackSettingsTab roomId={roomId} />,
};
const moreTab: Tab<SettingsTab> = {
key: "more",
name: t("settings.more_tab_title"),
content: (
<>
<h4>{t("settings.developer_tab_title")}</h4>
<p>
{t("version", {
productName: import.meta.env.VITE_PRODUCT_NAME || "Element Call",
version: import.meta.env.VITE_APP_VERSION || "dev",
})}
</p>
<FieldRow>
<InputField
id="developerSettingsTab"
type="checkbox"
checked={developerSettingsTab}
label={t("settings.developer_settings_label")}
description={t("settings.developer_settings_label_description")}
onChange={(event: ChangeEvent<HTMLInputElement>): void =>
setDeveloperSettingsTab(event.target.checked)
}
/>
</FieldRow>
<h4>{t("common.analytics")}</h4>
<FieldRow>
<InputField
id="optInAnalytics"
type="checkbox"
checked={optInAnalytics ?? undefined}
description={optInDescription}
onChange={(event: ChangeEvent<HTMLInputElement>): void => {
setOptInAnalytics?.(event.target.checked);
}}
/>
</FieldRow>
</>
),
};
const developerTab: Tab<SettingsTab> = {
key: "developer",
name: t("settings.developer_tab_title"),
content: (
<>
<p>
{t("version", {
productName: import.meta.env.VITE_PRODUCT_NAME || "Element Call",
version: import.meta.env.VITE_APP_VERSION || "dev",
})}
</p>
<p>
{t("crypto_version", {
version: client.getCrypto()?.getVersion() || "unknown",
})}
</p>
<p>
{t("matrix_id", {
id: client.getUserId() || "unknown",
})}
</p>
<p>
{t("device_id", {
id: client.getDeviceId() || "unknown",
})}
</p>
<FieldRow>
<InputField
id="duplicateTiles"
type="number"
label={t("settings.duplicate_tiles_label")}
value={duplicateTiles.toString()}
onChange={useCallback(
(event: ChangeEvent<HTMLInputElement>): void => {
const value = event.target.valueAsNumber;
setDuplicateTiles(Number.isNaN(value) ? 0 : value);
},
[setDuplicateTiles],
)}
/>
</FieldRow>
</>
),
};
const tabs = [audioTab, videoTab];
if (widget === null) tabs.push(profileTab);
@@ -289,14 +253,14 @@ export const SettingsModal: FC<Props> = ({
className={styles.settingsModal}
open={open}
onDismiss={onDismiss}
tabbed
>
<TabContainer
onSelectionChange={onTabChange as (tab: Key) => void}
selectedKey={tab}
className={styles.tabContainer}
>
{tabs}
</TabContainer>
label={t("common.settings")}
tab={tab}
onTabChange={onTabChange}
tabs={tabs}
/>
</Modal>
);
};

4
src/settings/rageshake.ts
View File

@@ -505,7 +505,9 @@ function tryInitStorage(): Promise<void> {
let indexedDB;
try {
indexedDB = window.indexedDB;
} catch (e) {}
} catch (e) {
logger.warn("Could not get indexDB from window.", e);
}
if (indexedDB) {
global.mx_rage_store = new IndexedDBLogStore(

5
src/settings/settings.ts
View File

@@ -30,7 +30,10 @@ export class Setting<T> {
try {
initialValue = JSON.parse(storedValue);
} catch (e) {
logger.warn(`Invalid value stored for setting ${key}: ${storedValue}`);
logger.warn(
`Invalid value stored for setting ${key}: ${storedValue}.`,
e,
);
}
}

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

@@ -85,7 +85,9 @@ export function useSubmitRageshake(): {
try {
// MDN claims broad support across browsers
touchInput = String(window.matchMedia("(pointer: coarse)").matches);
} catch (e) {}
} catch (e) {
logger.warn("Could not get coarse pointer for rageshake submit.", e);
}
let description = opts.rageshakeRequestId
? `Rageshake ${opts.rageshakeRequestId}`
@@ -216,7 +218,9 @@ export function useSubmitRageshake(): {
"storageManager_persisted",
String(await navigator.storage.persisted()),
);
} catch (e) {}
} catch (e) {
logger.warn("coulr not get navigator peristed storage", e);
}
} else if (document.hasStorageAccess) {
// Safari
try {
@@ -224,7 +228,9 @@ export function useSubmitRageshake(): {
"storageManager_persisted",
String(await document.hasStorageAccess()),
);
} catch (e) {}
} catch (e) {
logger.warn("could not get storage access", e);
}
}
if (navigator.storage && navigator.storage.estimate) {
@@ -244,7 +250,9 @@ export function useSubmitRageshake(): {
);
});
}
} catch (e) {}
} catch (e) {
logger.warn("could not obatain storage estimate", e);
}
}
if (opts.sendLogs) {

95
src/state/CallViewModel.ts
View File

@@ -26,7 +26,6 @@ import {
RemoteParticipant,
} from "livekit-client";
import { Room as MatrixRoom, RoomMember } from "matrix-js-sdk/src/matrix";
import { useEffect, useRef } from "react";
import {
EMPTY,
Observable,
@@ -44,7 +43,6 @@ import {
race,
sample,
scan,
shareReplay,
skip,
startWith,
switchAll,
@@ -58,12 +56,10 @@ import {
import { logger } from "matrix-js-sdk/src/logger";
import { ViewModel } from "./ViewModel";
import { useObservable } from "./useObservable";
import {
ECAddonConnectionState,
ECConnectionState,
} from "../livekit/useECConnectionState";
import { usePrevious } from "../usePrevious";
import {
LocalUserMediaViewModel,
MediaViewModel,
@@ -71,10 +67,11 @@ import {
ScreenShareViewModel,
UserMediaViewModel,
} from "./MediaViewModel";
import { accumulate, finalizeValue } from "../observable-utils";
import { accumulate, finalizeValue } from "../utils/observable";
import { ObservableScope } from "./ObservableScope";
import { duplicateTiles } from "../settings/settings";
import { isFirefox } from "../Platform";
import { setPipEnabled } from "../controls";
// How long we wait after a focus switch before showing the real participant
// list again
@@ -194,11 +191,9 @@ class UserMedia {
),
),
startWith(false),
distinctUntilChanged(),
this.scope.bind(),
// Make this Observable hot so that the timers don't reset when you
// resubscribe
shareReplay(1),
this.scope.state(),
);
this.presenter = observeParticipantEvents(
@@ -261,7 +256,7 @@ function findMatrixMember(
export class CallViewModel extends ViewModel {
private readonly rawRemoteParticipants = connectedParticipantsObserver(
this.livekitRoom,
).pipe(shareReplay(1));
).pipe(this.scope.state());
// Lists of participants to "hold" on display, even if LiveKit claims that
// they've left
@@ -383,7 +378,7 @@ export class CallViewModel extends ViewModel {
finalizeValue((ts) => {
for (const t of ts) t.destroy();
}),
shareReplay(1),
this.scope.state(),
);
private readonly userMedia: Observable<UserMedia[]> = this.mediaItems.pipe(
@@ -402,7 +397,7 @@ export class CallViewModel extends ViewModel {
map((mediaItems) =>
mediaItems.filter((m): m is ScreenShare => m instanceof ScreenShare),
),
shareReplay(1),
this.scope.state(),
);
private readonly hasRemoteScreenShares: Observable<boolean> =
@@ -443,9 +438,8 @@ export class CallViewModel extends ViewModel {
},
null,
),
distinctUntilChanged(),
map((speaker) => speaker.vm),
shareReplay(1),
this.scope.state(),
throttleTime(1600, undefined, { leading: true, trailing: true }),
);
@@ -513,16 +507,17 @@ export class CallViewModel extends ViewModel {
private readonly spotlight: Observable<MediaViewModel[]> =
this.spotlightAndPip.pipe(
switchMap(([spotlight]) => spotlight),
shareReplay(1),
this.scope.state(),
);
private readonly pip: Observable<UserMediaViewModel | null> =
this.spotlightAndPip.pipe(switchMap(([, pip]) => pip));
/**
* The general shape of the window.
*/
public readonly windowMode: Observable<WindowMode> = fromEvent(
private readonly pipEnabled: Observable<boolean> = setPipEnabled.pipe(
startWith(false),
);
private readonly naturalWindowMode: Observable<WindowMode> = fromEvent(
window,
"resize",
).pipe(
@@ -538,15 +533,21 @@ export class CallViewModel extends ViewModel {
if (width <= 600) return "narrow";
return "normal";
}),
distinctUntilChanged(),
shareReplay(1),
this.scope.state(),
);
/**
* The general shape of the window.
*/
public readonly windowMode: Observable<WindowMode> = this.pipEnabled.pipe(
switchMap((pip) => (pip ? of<WindowMode>("pip") : this.naturalWindowMode)),
);
private readonly spotlightExpandedToggle = new Subject<void>();
public readonly spotlightExpanded: Observable<boolean> =
this.spotlightExpandedToggle.pipe(
accumulate(false, (expanded) => !expanded),
shareReplay(1),
this.scope.state(),
);
private readonly gridModeUserSelection = new Subject<GridMode>();
@@ -572,8 +573,7 @@ export class CallViewModel extends ViewModel {
)
).pipe(startWith(userSelection ?? "grid")),
),
distinctUntilChanged(),
shareReplay(1),
this.scope.state(),
);
public setGridMode(value: GridMode): void {
@@ -629,7 +629,7 @@ export class CallViewModel extends ViewModel {
);
private readonly pipLayout: Observable<Layout> = this.spotlight.pipe(
map((spotlight): Layout => ({ type: "pip", spotlight })),
map((spotlight) => ({ type: "pip", spotlight })),
);
public readonly layout: Observable<Layout> = this.windowMode.pipe(
@@ -690,13 +690,12 @@ export class CallViewModel extends ViewModel {
return this.pipLayout;
}
}),
shareReplay(1),
this.scope.state(),
);
public showSpotlightIndicators: Observable<boolean> = this.layout.pipe(
map((l) => l.type !== "grid"),
distinctUntilChanged(),
shareReplay(1),
this.scope.state(),
);
/**
@@ -720,8 +719,7 @@ export class CallViewModel extends ViewModel {
public showSpeakingIndicators: Observable<boolean> = this.layout.pipe(
map((l) => l.type !== "one-on-one" && !l.type.startsWith("spotlight-")),
distinctUntilChanged(),
shareReplay(1),
this.scope.state(),
);
public readonly toggleSpotlightExpanded: Observable<(() => void) | null> =
@@ -741,7 +739,7 @@ export class CallViewModel extends ViewModel {
map((enabled) =>
enabled ? (): void => this.spotlightExpandedToggle.next() : null,
),
shareReplay(1),
this.scope.state(),
);
private readonly screenTap = new Subject<void>();
@@ -771,8 +769,7 @@ export class CallViewModel extends ViewModel {
public readonly showHeader: Observable<boolean> = this.windowMode.pipe(
map((mode) => mode !== "pip" && mode !== "flat"),
distinctUntilChanged(),
shareReplay(1),
this.scope.state(),
);
public readonly showFooter = this.windowMode.pipe(
@@ -815,8 +812,7 @@ export class CallViewModel extends ViewModel {
);
}
}),
distinctUntilChanged(),
shareReplay(1),
this.scope.state(),
);
public constructor(
@@ -829,34 +825,3 @@ export class CallViewModel extends ViewModel {
super();
}
}
export function useCallViewModel(
matrixRoom: MatrixRoom,
livekitRoom: LivekitRoom,
encrypted: boolean,
connectionState: ECConnectionState,
): CallViewModel {
const prevMatrixRoom = usePrevious(matrixRoom);
const prevLivekitRoom = usePrevious(livekitRoom);
const prevEncrypted = usePrevious(encrypted);
const connectionStateObservable = useObservable(connectionState);
const vm = useRef<CallViewModel>();
if (
matrixRoom !== prevMatrixRoom ||
livekitRoom !== prevLivekitRoom ||
encrypted !== prevEncrypted
) {
vm.current?.destroy();
vm.current = new CallViewModel(
matrixRoom,
livekitRoom,
encrypted,
connectionStateObservable,
);
}
useEffect(() => vm.current?.destroy(), []);
return vm.current!;
}

132
src/state/MediaViewModel.test.ts Normal file
View File

@@ -0,0 +1,132 @@
/*
Copyright 2024 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 { RoomMember } from "matrix-js-sdk/src/matrix";
import { expect, test, vi } from "vitest";
import { LocalParticipant, RemoteParticipant } from "livekit-client";
import {
LocalUserMediaViewModel,
RemoteUserMediaViewModel,
} from "./MediaViewModel";
import { withTestScheduler } from "../utils/test";
function withLocal(continuation: (vm: LocalUserMediaViewModel) => void): void {
const member = {} as unknown as RoomMember;
const vm = new LocalUserMediaViewModel(
"a",
member,
{} as unknown as LocalParticipant,
true,
);
try {
continuation(vm);
} finally {
vm.destroy();
}
}
function withRemote(
participant: Partial<RemoteParticipant>,
continuation: (vm: RemoteUserMediaViewModel) => void,
): void {
const member = {} as unknown as RoomMember;
const vm = new RemoteUserMediaViewModel(
"a",
member,
{ setVolume() {}, ...participant } as RemoteParticipant,
true,
);
try {
continuation(vm);
} finally {
vm.destroy();
}
}
test("set a participant's volume", () => {
const setVolumeSpy = vi.fn();
withRemote({ setVolume: setVolumeSpy }, (vm) =>
withTestScheduler(({ expectObservable, schedule }) => {
schedule("-a|", {
a() {
vm.setLocalVolume(0.8);
expect(setVolumeSpy).toHaveBeenLastCalledWith(0.8);
},
});
expectObservable(vm.localVolume).toBe("ab", { a: 1, b: 0.8 });
}),
);
});
test("mute and unmute a participant", () => {
const setVolumeSpy = vi.fn();
withRemote({ setVolume: setVolumeSpy }, (vm) =>
withTestScheduler(({ expectObservable, schedule }) => {
schedule("-abc|", {
a() {
vm.toggleLocallyMuted();
expect(setVolumeSpy).toHaveBeenLastCalledWith(0);
},
b() {
vm.setLocalVolume(0.8);
expect(setVolumeSpy).toHaveBeenLastCalledWith(0);
},
c() {
vm.toggleLocallyMuted();
expect(setVolumeSpy).toHaveBeenLastCalledWith(0.8);
},
});
expectObservable(vm.locallyMuted).toBe("ab-c", {
a: false,
b: true,
c: false,
});
}),
);
});
test("toggle fit/contain for a participant's video", () => {
withRemote({}, (vm) =>
withTestScheduler(({ expectObservable, schedule }) => {
schedule("-ab|", {
a: () => vm.toggleFitContain(),
b: () => vm.toggleFitContain(),
});
expectObservable(vm.cropVideo).toBe("abc", {
a: true,
b: false,
c: true,
});
}),
);
});
test("local media remembers whether it should always be shown", () => {
withLocal((vm) =>
withTestScheduler(({ expectObservable, schedule }) => {
schedule("-a|", { a: () => vm.setAlwaysShow(false) });
expectObservable(vm.alwaysShow).toBe("ab", { a: true, b: false });
}),
);
// Next local media should start out *not* always shown
withLocal((vm) =>
withTestScheduler(({ expectObservable, schedule }) => {
schedule("-a|", { a: () => vm.setAlwaysShow(true) });
expectObservable(vm.alwaysShow).toBe("ab", { a: false, b: true });
}),
);
});

19
src/state/MediaViewModel.ts
View File

@@ -36,12 +36,10 @@ import {
BehaviorSubject,
Observable,
combineLatest,
distinctUntilChanged,
distinctUntilKeyChanged,
fromEvent,
map,
of,
shareReplay,
startWith,
switchMap,
} from "rxjs";
@@ -84,7 +82,6 @@ function observeTrackReference(
source,
})),
distinctUntilKeyChanged("publication"),
shareReplay(1),
);
}
@@ -119,15 +116,19 @@ abstract class BaseMediaViewModel extends ViewModel {
videoSource: VideoSource,
) {
super();
const audio = observeTrackReference(participant, audioSource);
this.video = observeTrackReference(participant, videoSource);
const audio = observeTrackReference(participant, audioSource).pipe(
this.scope.state(),
);
this.video = observeTrackReference(participant, videoSource).pipe(
this.scope.state(),
);
this.unencryptedWarning = combineLatest(
[audio, this.video],
(a, v) =>
callEncrypted &&
(a.publication?.isEncrypted === false ||
v.publication?.isEncrypted === false),
).pipe(distinctUntilChanged(), shareReplay(1));
).pipe(this.scope.state());
}
}
@@ -151,7 +152,7 @@ abstract class BaseUserMediaViewModel extends BaseMediaViewModel {
ParticipantEvent.IsSpeakingChanged,
).pipe(
map((p) => p.isSpeaking),
shareReplay(1),
this.scope.state(),
);
/**
@@ -184,7 +185,7 @@ abstract class BaseUserMediaViewModel extends BaseMediaViewModel {
Track.Source.Camera,
);
const media = observeParticipantMedia(participant).pipe(shareReplay(1));
const media = observeParticipantMedia(participant).pipe(this.scope.state());
this.audioEnabled = media.pipe(
map((m) => m.microphoneTrack?.isMuted === false),
);
@@ -216,7 +217,7 @@ export class LocalUserMediaViewModel extends BaseUserMediaViewModel {
map(() => facingModeFromLocalTrack(track).facingMode === "user"),
);
}),
shareReplay(1),
this.scope.state(),
);
/**

Some files were not shown because too many files have changed in this diff Show More