xmj/element-call
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Merge branch 'main' into matroska

Browse source
This commit is contained in:
Robin Townsend 2022-08-05 16:16:59 -04:00
commit eb43b96a1b
79 changed files with 1416 additions and 748 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
.env.example
View file

@ -27,3 +27,4 @@
# VITE_THEME_QUINARY_CONTENT=#394049
# VITE_THEME_SYSTEM=#21262c
# VITE_THEME_BACKGROUND=#15191e
# VITE_THEME_BACKGROUND_85=#15191ed9

2
src/@types/global.d.ts vendored
View file

@ -24,7 +24,7 @@ declare global {
// TypeScript doesn't know about the experimental setSinkId method, so we
// declare it ourselves
interface MediaElement extends HTMLMediaElement {
interface MediaElement extends HTMLVideoElement {
setSinkId: (id: string) => void;
}
}

7
src/App.jsx → src/App.tsx
View file

@ -18,6 +18,7 @@ import React from "react";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import * as Sentry from "@sentry/react";
import { OverlayProvider } from "@react-aria/overlays";
import { HomePage } from "./home/HomePage";
import { LoginPage } from "./auth/LoginPage";
import { RegisterPage } from "./auth/RegisterPage";
@ -31,7 +32,11 @@ import { CrashView } from "./FullScreenView";
const SentryRoute = Sentry.withSentryRouting(Route);
export default function App({ history }) {
interface AppProps {
history: History;
}
export default function App({ history }: AppProps) {
usePageFocusStyle();
const errorPage = <CrashView />;

6
src/Avatar.tsx
View file

@ -48,11 +48,11 @@ const resolveAvatarSrc = (client: MatrixClient, src: string, size: number) =>
interface Props extends React.HTMLAttributes<HTMLDivElement> {
bgKey?: string;
src: string;
fallback: string;
src?: string;
size?: Size | number;
className: string;
className?: string;
style?: CSSProperties;
fallback: string;
}
export const Avatar: React.FC<Props> = ({

7
src/ClientContext.tsx
View file

@ -67,6 +67,7 @@ interface ClientState {
changePassword: (password: string) => Promise<void>;
logout: () => void;
setClient: (client: MatrixClient, session: Session) => void;
error?: Error;
}
const ClientContext = createContext<ClientState>(null);
@ -151,6 +152,7 @@ export const ClientProvider: FC<Props> = ({ children }) => {
isAuthenticated: Boolean(client),
isPasswordlessUser,
userName: client?.getUserIdLocalpart(),
error: undefined,
});
})
.catch((err) => {
@ -161,6 +163,7 @@ export const ClientProvider: FC<Props> = ({ children }) => {
isAuthenticated: false,
isPasswordlessUser: false,
userName: null,
error: undefined,
});
});
}, []);
@ -190,6 +193,7 @@ export const ClientProvider: FC<Props> = ({ children }) => {
isAuthenticated: true,
isPasswordlessUser: false,
userName: client.getUserIdLocalpart(),
error: undefined,
});
},
[client]
@ -210,6 +214,7 @@ export const ClientProvider: FC<Props> = ({ children }) => {
isAuthenticated: true,
isPasswordlessUser: session.passwordlessUser,
userName: newClient.getUserIdLocalpart(),
error: undefined,
});
} else {
clearSession();
@ -220,6 +225,7 @@ export const ClientProvider: FC<Props> = ({ children }) => {
isAuthenticated: false,
isPasswordlessUser: false,
userName: null,
error: undefined,
});
}
},
@ -278,6 +284,7 @@ export const ClientProvider: FC<Props> = ({ children }) => {
logout,
userName,
setClient,
error: undefined,
}),
[
loading,

53
src/Facepile.jsx → src/Facepile.tsx
View file

@ -1,22 +1,48 @@
import React from "react";
import styles from "./Facepile.module.css";
import classNames from "classnames";
import { Avatar, sizes } from "./Avatar";
/*
Copyright 2022 New Vector Ltd
const overlapMap = {
xs: 2,
sm: 4,
md: 8,
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 React, { HTMLAttributes } from "react";
import classNames from "classnames";
import { MatrixClient, RoomMember } from "matrix-js-sdk";
import styles from "./Facepile.module.css";
import { Avatar, Size, sizes } from "./Avatar";
const overlapMap: Partial<Record<Size, number>> = {
[Size.XS]: 2,
[Size.SM]: 4,
[Size.MD]: 8,
};
interface Props extends HTMLAttributes<HTMLDivElement> {
className: string;
client: MatrixClient;
participants: RoomMember[];
max?: number;
size?: Size;
}
export function Facepile({
className,
client,
participants,
max,
size,
max = 3,
size = Size.XS,
...rest
}) {
}: Props) {
const _size = sizes.get(size);
const _overlap = overlapMap[size];
@ -56,8 +82,3 @@ export function Facepile({
</div>
);
}
Facepile.defaultProps = {
max: 3,
size: "xs",
};

24
src/FullScreenView.jsx → src/FullScreenView.tsx
View file

@ -1,13 +1,19 @@
import React, { useCallback, useEffect } from "react";
import React, { ReactNode, useCallback, useEffect } from "react";
import { useLocation } from "react-router-dom";
import styles from "./FullScreenView.module.css";
import { Header, HeaderLogo, LeftNav, RightNav } from "./Header";
import classNames from "classnames";
import { Header, HeaderLogo, LeftNav, RightNav } from "./Header";
import { LinkButton, Button } from "./button";
import { useSubmitRageshake } from "./settings/submit-rageshake";
import { ErrorMessage } from "./input/Input";
import styles from "./FullScreenView.module.css";
export function FullScreenView({ className, children }) {
interface FullScreenViewProps {
className?: string;
children: ReactNode;
}
export function FullScreenView({ className, children }: FullScreenViewProps) {
return (
<div className={classNames(styles.page, className)}>
<Header>
@ -23,7 +29,11 @@ export function FullScreenView({ className, children }) {
);
}
export function ErrorView({ error }) {
interface ErrorViewProps {
error: Error;
}
export function ErrorView({ error }: ErrorViewProps) {
const location = useLocation();
useEffect(() => {
@ -31,7 +41,7 @@ export function ErrorView({ error }) {
}, [error]);
const onReload = useCallback(() => {
window.location = "/";
window.location.href = "/";
}, []);
return (
@ -72,7 +82,7 @@ export function CrashView() {
}, [submitRageshake]);
const onReload = useCallback(() => {
window.location = "/";
window.location.href = "/";
}, []);
let logsComponent;

85
src/Header.jsx → src/Header.tsx
View file

@ -1,18 +1,26 @@
import classNames from "classnames";
import React, { useCallback, useRef } from "react";
import React, { HTMLAttributes, ReactNode, useCallback, useRef } from "react";
import { Link } from "react-router-dom";
import styles from "./Header.module.css";
import { ReactComponent as Logo } from "./icons/Logo.svg";
import { ReactComponent as VideoIcon } from "./icons/Video.svg";
import { ReactComponent as ArrowLeftIcon } from "./icons/ArrowLeft.svg";
import { useButton } from "@react-aria/button";
import { Subtitle } from "./typography/Typography";
import { Avatar } from "./Avatar";
import { IncompatibleVersionModal } from "./IncompatibleVersionModal";
import { AriaButtonProps } from "@react-types/button";
import { Room } from "matrix-js-sdk";
import styles from "./Header.module.css";
import { useModalTriggerState } from "./Modal";
import { Button } from "./button";
import { ReactComponent as Logo } from "./icons/Logo.svg";
import { ReactComponent as VideoIcon } from "./icons/Video.svg";
import { Subtitle } from "./typography/Typography";
import { Avatar, Size } from "./Avatar";
import { IncompatibleVersionModal } from "./IncompatibleVersionModal";
import { ReactComponent as ArrowLeftIcon } from "./icons/ArrowLeft.svg";
export function Header({ children, className, ...rest }) {
interface HeaderProps extends HTMLAttributes<HTMLElement> {
children: ReactNode;
className?: string;
}
export function Header({ children, className, ...rest }: HeaderProps) {
return (
<header className={classNames(styles.header, className)} {...rest}>
{children}
@ -20,7 +28,18 @@ export function Header({ children, className, ...rest }) {
);
}
export function LeftNav({ children, className, hideMobile, ...rest }) {
interface LeftNavProps extends HTMLAttributes<HTMLElement> {
children: ReactNode;
className?: string;
hideMobile?: boolean;
}
export function LeftNav({
children,
className,
hideMobile,
...rest
}: LeftNavProps) {
return (
<div
className={classNames(
@ -36,7 +55,18 @@ export function LeftNav({ children, className, hideMobile, ...rest }) {
);
}
export function RightNav({ children, className, hideMobile, ...rest }) {
interface RightNavProps extends HTMLAttributes<HTMLElement> {
children?: ReactNode;
className?: string;
hideMobile?: string;
}
export function RightNav({
children,
className,
hideMobile,
...rest
}: RightNavProps) {
return (
<div
className={classNames(
@ -52,7 +82,11 @@ export function RightNav({ children, className, hideMobile, ...rest }) {
);
}
export function HeaderLogo({ className }) {
interface HeaderLogoProps {
className?: string;
}
export function HeaderLogo({ className }: HeaderLogoProps) {
return (
<Link className={classNames(styles.headerLogo, className)} to="/">
<Logo />
@ -60,12 +94,17 @@ export function HeaderLogo({ className }) {
);
}
export function RoomHeaderInfo({ roomName, avatarUrl }) {
interface RoomHeaderInfo {
roomName: string;
avatarUrl: string;
}
export function RoomHeaderInfo({ roomName, avatarUrl }: RoomHeaderInfo) {
return (
<>
<div className={styles.roomAvatar}>
<Avatar
size="md"
size={Size.MD}
src={avatarUrl}
bgKey={roomName}
fallback={roomName.slice(0, 1).toUpperCase()}
@ -77,12 +116,18 @@ export function RoomHeaderInfo({ roomName, avatarUrl }) {
);
}
interface RoomSetupHeaderInfoProps extends AriaButtonProps<"button"> {
roomName: string;
avatarUrl: string;
isEmbedded: boolean;
}
export function RoomSetupHeaderInfo({
roomName,
avatarUrl,
isEmbedded,
...rest
}) {
}: RoomSetupHeaderInfoProps) {
const ref = useRef();
const { buttonProps } = useButton(rest, ref);
@ -102,7 +147,15 @@ export function RoomSetupHeaderInfo({
);
}
export function VersionMismatchWarning({ users, room }) {
interface VersionMismatchWarningProps {
users: Set<string>;
room: Room;
}
export function VersionMismatchWarning({
users,
room,
}: VersionMismatchWarningProps) {
const { modalState, modalProps } = useModalTriggerState();
const onDetailsClick = useCallback(() => {

5
src/IndexedDBWorker.js
View file

@ -1,5 +0,0 @@
import { IndexedDBStoreWorker } from "matrix-js-sdk/src/indexeddb-worker";
const remoteWorker = new IndexedDBStoreWorker(self.postMessage);
self.onmessage = remoteWorker.onMessage;

6
src/IndexedDBWorker.ts Normal file
View file

@ -0,0 +1,6 @@
import { IndexedDBStoreWorker } from "matrix-js-sdk/src/indexeddb-worker";
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const remoteWorker = new IndexedDBStoreWorker((self as any).postMessage);
self.onmessage = remoteWorker.onMessage;

50
src/ListBox.jsx
View file

@ -1,50 +0,0 @@
import React, { useRef } from "react";
import { useListBox, useOption } from "@react-aria/listbox";
import styles from "./ListBox.module.css";
import classNames from "classnames";
export function ListBox(props) {
const ref = useRef();
let { listBoxRef = ref, state } = props;
const { listBoxProps } = useListBox(props, state, listBoxRef);
return (
<ul
{...listBoxProps}
ref={listBoxRef}
className={classNames(styles.listBox, props.className)}
>
{[...state.collection].map((item) => (
<Option
key={item.key}
item={item}
state={state}
className={props.optionClassName}
/>
))}
</ul>
);
}
function Option({ item, state, className }) {
const ref = useRef();
const { optionProps, isSelected, isFocused, isDisabled } = useOption(
{ key: item.key },
state,
ref
);
return (
<li
{...optionProps}
ref={ref}
className={classNames(styles.option, className, {
[styles.selected]: isSelected,
[styles.focused]: isFocused,
[styles.disables]: isDisabled,
})}
>
{item.rendered}
</li>
);
}

89
src/ListBox.tsx Normal file
View file

@ -0,0 +1,89 @@
/*
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 React, { 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> {
className: string;
optionClassName: string;
listBoxRef: React.MutableRefObject<HTMLUListElement>;
state: ListState<T>;
}
export function ListBox<T>({
state,
optionClassName,
className,
listBoxRef,
...rest
}: ListBoxProps<T>) {
const ref = useRef<HTMLUListElement>();
if (!listBoxRef) listBoxRef = ref;
const { listBoxProps } = useListBox(rest, state, listBoxRef);
return (
<ul
{...listBoxProps}
ref={listBoxRef}
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>) {
const ref = useRef();
const { optionProps, isSelected, isFocused, isDisabled } = useOption(
{ key: item.key },
state,
ref
);
return (
<li
{...optionProps}
ref={ref}
className={classNames(styles.option, className, {
[styles.selected]: isSelected,
[styles.focused]: isFocused,
[styles.disables]: isDisabled,
})}
>
{item.rendered}
</li>
);
}

41
src/Menu.jsx → src/Menu.tsx
View file

@ -1,15 +1,30 @@
import React, { useRef, useState } from "react";
import styles from "./Menu.module.css";
import { useMenu, useMenuItem } from "@react-aria/menu";
import { useTreeState } from "@react-stately/tree";
import React, { Key, 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";
export function Menu({ className, onAction, ...rest }) {
const state = useTreeState({ ...rest, selectionMode: "none" });
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>) {
const state = useTreeState<T>({ ...rest, selectionMode: "none" });
const menuRef = useRef();
const { menuProps } = useMenu(rest, state, menuRef);
const { menuProps } = useMenu<T>(rest, state, menuRef);
return (
<ul
@ -23,19 +38,25 @@ export function Menu({ className, onAction, ...rest }) {
item={item}
state={state}
onAction={onAction}
onClose={rest.onClose}
onClose={onClose}
/>
))}
</ul>
);
}
function MenuItem({ item, state, onAction, onClose }) {
interface MenuItemProps<T> {
item: Node<T>;
state: TreeState<T>;
onAction: (value: Key) => void;
onClose: () => void;
}
function MenuItem<T>({ item, state, onAction, onClose }: MenuItemProps<T>) {
const ref = useRef();
const { menuItemProps } = useMenuItem(
{
key: item.key,
isDisabled: item.isDisabled,
onAction,
onClose,
},

1
src/Modal.module.css
View file

@ -28,6 +28,7 @@
}
.modalHeader h3 {
font-weight: 600;
font-size: 24px;
margin: 0;
}

105
src/Modal.jsx → src/Modal.tsx
View file

@ -1,29 +1,73 @@
import React, { useRef, useMemo } from "react";
/*
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.
*/
/* eslint-disable jsx-a11y/no-autofocus */
import React, { useRef, useMemo, ReactNode } from "react";
import {
useOverlay,
usePreventScroll,
useModal,
OverlayContainer,
OverlayProps,
} from "@react-aria/overlays";
import { useOverlayTriggerState } from "@react-stately/overlays";
import {
OverlayTriggerState,
useOverlayTriggerState,
} from "@react-stately/overlays";
import { useDialog } from "@react-aria/dialog";
import { FocusScope } from "@react-aria/focus";
import { useButton } from "@react-aria/button";
import { ButtonAria, useButton } from "@react-aria/button";
import classNames from "classnames";
import { AriaDialogProps } from "@react-types/dialog";
import { ReactComponent as CloseIcon } from "./icons/Close.svg";
import styles from "./Modal.module.css";
import classNames from "classnames";
export function Modal(props) {
const { title, children, className, mobileFullScreen } = props;
export interface ModalProps extends OverlayProps, AriaDialogProps {
title: string;
children: ReactNode;
className?: string;
mobileFullScreen?: boolean;
onClose?: () => void;
}
export function Modal({
title,
children,
className,
mobileFullScreen,
onClose,
...rest
}: ModalProps) {
const modalRef = useRef();
const { overlayProps, underlayProps } = useOverlay(props, modalRef);
const { overlayProps, underlayProps } = useOverlay(
{ ...rest, onClose },
modalRef
);
usePreventScroll();
const { modalProps } = useModal();
const { dialogProps, titleProps } = useDialog(props, modalRef);
const { dialogProps, titleProps } = useDialog(rest, modalRef);
const closeButtonRef = useRef();
const { buttonProps: closeButtonProps } = useButton({
onPress: () => props.onClose(),
});
const { buttonProps: closeButtonProps } = useButton(
{
onPress: () => onClose(),
},
closeButtonRef
);
return (
<OverlayContainer>
@ -58,7 +102,16 @@ export function Modal(props) {
);
}
export function ModalContent({ children, className, ...rest }) {
interface ModalContentProps {
children: ReactNode;
className?: string;
}
export function ModalContent({
children,
className,
...rest
}: ModalContentProps) {
return (
<div className={classNames(styles.content, className)} {...rest}>
{children}
@ -66,7 +119,10 @@ export function ModalContent({ children, className, ...rest }) {
);
}
export function useModalTriggerState() {
export function useModalTriggerState(): {
modalState: OverlayTriggerState;
modalProps: { isOpen: boolean; onClose: () => void };
} {
const modalState = useOverlayTriggerState({});
const modalProps = useMemo(
() => ({ isOpen: modalState.isOpen, onClose: modalState.close }),
@ -75,7 +131,10 @@ export function useModalTriggerState() {
return { modalState, modalProps };
}
export function useToggleModalButton(modalState, ref) {
export function useToggleModalButton(
modalState: OverlayTriggerState,
ref: React.RefObject<HTMLButtonElement>
): ButtonAria<React.ButtonHTMLAttributes<HTMLButtonElement>> {
return useButton(
{
onPress: () => modalState.toggle(),
@ -84,7 +143,10 @@ export function useToggleModalButton(modalState, ref) {
);
}
export function useOpenModalButton(modalState, ref) {
export function useOpenModalButton(
modalState: OverlayTriggerState,
ref: React.RefObject<HTMLButtonElement>
): ButtonAria<React.ButtonHTMLAttributes<HTMLButtonElement>> {
return useButton(
{
onPress: () => modalState.open(),
@ -93,7 +155,10 @@ export function useOpenModalButton(modalState, ref) {
);
}
export function useCloseModalButton(modalState, ref) {
export function useCloseModalButton(
modalState: OverlayTriggerState,
ref: React.RefObject<HTMLButtonElement>
): ButtonAria<React.ButtonHTMLAttributes<HTMLButtonElement>> {
return useButton(
{
onPress: () => modalState.close(),
@ -102,8 +167,12 @@ export function useCloseModalButton(modalState, ref) {
);
}
export function ModalTrigger({ children }) {
const { modalState, modalProps } = useModalState();
interface ModalTriggerProps {
children: ReactNode;
}
export function ModalTrigger({ children }: ModalTriggerProps) {
const { modalState, modalProps } = useModalTriggerState();
const buttonRef = useRef();
const { buttonProps } = useToggleModalButton(modalState, buttonRef);

41
src/SequenceDiagramViewerPage.jsx
View file

@ -1,41 +0,0 @@
import React, { useCallback, useState } from "react";
import { SequenceDiagramViewer } from "./room/GroupCallInspector";
import { FieldRow, InputField } from "./input/Input";
import { usePageTitle } from "./usePageTitle";
export function SequenceDiagramViewerPage() {
usePageTitle("Inspector");
const [debugLog, setDebugLog] = useState();
const [selectedUserId, setSelectedUserId] = useState();
const onChangeDebugLog = useCallback((e) => {
if (e.target.files && e.target.files.length > 0) {
e.target.files[0].text().then((text) => {
setDebugLog(JSON.parse(text));
});
}
}, []);
return (
<div style={{ marginTop: 20 }}>
<FieldRow>
<InputField
type="file"
id="debugLog"
name="debugLog"
label="Debug Log"
onChange={onChangeDebugLog}
/>
</FieldRow>
{debugLog && (
<SequenceDiagramViewer
localUserId={debugLog.localUserId}
selectedUserId={selectedUserId}
onSelectUserId={setSelectedUserId}
remoteUserIds={debugLog.remoteUserIds}
events={debugLog.eventsByUserId[selectedUserId]}
/>
)}
</div>
);
}

67
src/SequenceDiagramViewerPage.tsx Normal file
View file

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

76
src/Tooltip.jsx
View file

@ -1,76 +0,0 @@
import React, { forwardRef, useRef } from "react";
import { 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 styles from "./Tooltip.module.css";
import classNames from "classnames";
import { OverlayContainer, useOverlayPosition } from "@react-aria/overlays";
export const Tooltip = forwardRef(
({ position, state, className, ...props }, ref) => {
let { tooltipProps } = useTooltip(props, state);
return (
<div
className={classNames(styles.tooltip, className)}
{...mergeProps(props, tooltipProps)}
ref={ref}
>
{props.children}
</div>
);
}
);
export const TooltipTrigger = forwardRef(({ children, ...rest }, ref) => {
const tooltipState = useTooltipTriggerState(rest);
const triggerRef = useObjectRef(ref);
const overlayRef = useRef();
const { triggerProps, tooltipProps } = useTooltipTrigger(
rest,
tooltipState,
triggerRef
);
const { overlayProps } = useOverlayPosition({
placement: rest.placement || "top",
targetRef: triggerRef,
overlayRef,
isOpen: tooltipState.isOpen,
offset: 5,
});
if (
!Array.isArray(children) ||
children.length > 2 ||
typeof children[1] !== "function"
) {
throw new Error(
"TooltipTrigger must have two props. The first being a button and the second being a render prop."
);
}
const [tooltipTrigger, tooltip] = children;
return (
<FocusableProvider ref={triggerRef} {...triggerProps}>
{<tooltipTrigger.type {...mergeProps(tooltipTrigger.props, rest)} />}
{tooltipState.isOpen && (
<OverlayContainer>
<Tooltip
state={tooltipState}
{...mergeProps(tooltipProps, overlayProps)}
ref={overlayRef}
>
{tooltip()}
</Tooltip>
</OverlayContainer>
)}
</FocusableProvider>
);
});
TooltipTrigger.defaultProps = {
delay: 250,
};

114
src/Tooltip.tsx Normal file
View file

@ -0,0 +1,114 @@
/*
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 React, {
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;
}
export 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>
);
}
);
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();
const { triggerProps, tooltipProps } = useTooltipTrigger(
tooltipTriggerProps,
tooltipState,
triggerRef
);
const { overlayProps } = useOverlayPosition({
placement: placement || "top",
targetRef: triggerRef,
overlayRef,
isOpen: tooltipState.isOpen,
offset: 5,
});
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>
);
}
);

27
src/UserMenu.jsx → src/UserMenu.tsx
View file

@ -1,16 +1,26 @@
import React, { useMemo } from "react";
import { Item } from "@react-stately/collections";
import { useLocation } from "react-router-dom";
import { Button, LinkButton } from "./button";
import { PopoverMenuTrigger } from "./popover/PopoverMenu";
import { Menu } from "./Menu";
import { Tooltip, TooltipTrigger } from "./Tooltip";
import { Avatar } from "./Avatar";
import { TooltipTrigger } from "./Tooltip";
import { Avatar, Size } from "./Avatar";
import { ReactComponent as UserIcon } from "./icons/User.svg";
import { ReactComponent as LoginIcon } from "./icons/Login.svg";
import { ReactComponent as LogoutIcon } from "./icons/Logout.svg";
import styles from "./UserMenu.module.css";
import { useLocation } from "react-router-dom";
import { Body } from "./typography/Typography";
import styles from "./UserMenu.module.css";
interface UserMenuProps {
preventNavigation: boolean;
isAuthenticated: boolean;
isPasswordlessUser: boolean;
displayName: string;
avatarUrl: string;
onAction: (value: string) => void;
}
export function UserMenu({
preventNavigation,
@ -19,7 +29,7 @@ export function UserMenu({
displayName,
avatarUrl,
onAction,
}) {
}: UserMenuProps) {
const location = useLocation();
const items = useMemo(() => {
@ -62,11 +72,11 @@ export function UserMenu({
return (
<PopoverMenuTrigger placement="bottom right">
<TooltipTrigger placement="bottom left">
<TooltipTrigger tooltip={() => "Profile"} placement="bottom left">
<Button variant="icon" className={styles.userButton}>
{isAuthenticated && (!isPasswordlessUser || avatarUrl) ? (
<Avatar
size="sm"
size={Size.SM}
className={styles.avatar}
src={avatarUrl}
fallback={displayName.slice(0, 1).toUpperCase()}
@ -75,12 +85,11 @@ export function UserMenu({
<UserIcon />
)}
</Button>
{() => "Profile"}
</TooltipTrigger>
{(props) => (
<Menu {...props} label="User menu" onAction={onAction}>
{items.map(({ key, icon: Icon, label }) => (
<Item key={key} textValue={label} className={styles.menuItem}>
<Item key={key} textValue={label}>
<Icon width={24} height={24} className={styles.menuIcon} />
<Body overflowEllipsis>{label}</Body>
</Item>

9
src/UserMenuContainer.jsx → src/UserMenuContainer.tsx
View file

@ -1,12 +1,17 @@
import React, { useCallback } from "react";
import { useHistory, useLocation } from "react-router-dom";
import { useClient } from "./ClientContext";
import { useProfile } from "./profile/useProfile";
import { useModalTriggerState } from "./Modal";
import { ProfileModal } from "./profile/ProfileModal";
import { UserMenu } from "./UserMenu";
export function UserMenuContainer({ preventNavigation }) {
interface Props {
preventNavigation?: boolean;
}
export function UserMenuContainer({ preventNavigation = false }: Props) {
const location = useLocation();
const history = useHistory();
const { isAuthenticated, isPasswordlessUser, logout, userName, client } =
@ -15,7 +20,7 @@ export function UserMenuContainer({ preventNavigation }) {
const { modalState, modalProps } = useModalTriggerState();
const onAction = useCallback(
(value) => {
(value: string) => {
switch (value) {
case "user":
modalState.open();

2
src/auth/RegisterPage.tsx
View file

@ -100,7 +100,7 @@ export const RegisterPage: FC = () => {
submit()
.then(() => {
if (location.state?.from) {
history.push(location.state.from);
history.push(location.state?.from);
} else {
history.push("/");
}

49
src/button/Button.tsx
View file

@ -30,7 +30,7 @@ import { ReactComponent as SettingsIcon } from "../icons/Settings.svg";
import { ReactComponent as AddUserIcon } from "../icons/AddUser.svg";
import { ReactComponent as ArrowDownIcon } from "../icons/ArrowDown.svg";
import { TooltipTrigger } from "../Tooltip";
import { ReactComponent as OverflowIcon } from "../icons/Overflow.svg";
import { VolumeIcon } from "./VolumeIcon";
export type ButtonVariant =
| "default"
@ -74,6 +74,7 @@ interface Props {
children: Element[];
onPress: (e: PressEvent) => void;
onPressStart: (e: PressEvent) => void;
// TODO: add all props for <Button>
[index: string]: unknown;
}
export const Button = forwardRef<HTMLButtonElement, Props>(
@ -136,14 +137,16 @@ export function MicButton({
...rest
}: {
muted: boolean;
// TODO: add all props for <Button>
[index: string]: unknown;
}) {
return (
<TooltipTrigger>
<TooltipTrigger
tooltip={() => (muted ? "Unmute microphone" : "Mute microphone")}
>
<Button variant="toolbar" {...rest} off={muted}>
{muted ? <MuteMicIcon /> : <MicIcon />}
</Button>
{() => (muted ? "Unmute microphone" : "Mute microphone")}
</TooltipTrigger>
);
}
@ -153,14 +156,16 @@ export function VideoButton({
...rest
}: {
muted: boolean;
// TODO: add all props for <Button>
[index: string]: unknown;
}) {
return (
<TooltipTrigger>
<TooltipTrigger
tooltip={() => (muted ? "Turn on camera" : "Turn off camera")}
>
<Button variant="toolbar" {...rest} off={muted}>
{muted ? <DisableVideoIcon /> : <VideoIcon />}
</Button>
{() => (muted ? "Turn on camera" : "Turn off camera")}
</TooltipTrigger>
);
}
@ -172,14 +177,16 @@ export function ScreenshareButton({
}: {
enabled: boolean;
className?: string;
// TODO: add all props for <Button>
[index: string]: unknown;
}) {
return (
<TooltipTrigger>
<TooltipTrigger
tooltip={() => (enabled ? "Stop sharing screen" : "Share screen")}
>
<Button variant="toolbarSecondary" {...rest} on={enabled}>
<ScreenshareIcon />
</Button>
{() => (enabled ? "Stop sharing screen" : "Share screen")}
</TooltipTrigger>
);
}
@ -189,10 +196,11 @@ export function HangupButton({
...rest
}: {
className?: string;
// TODO: add all props for <Button>
[index: string]: unknown;
}) {
return (
<TooltipTrigger>
<TooltipTrigger tooltip={() => "Leave"}>
<Button
variant="toolbar"
className={classNames(styles.hangupButton, className)}
@ -200,7 +208,6 @@ export function HangupButton({
>
<HangupIcon />
</Button>
{() => "Leave"}
</TooltipTrigger>
);
}
@ -210,14 +217,14 @@ export function SettingsButton({
...rest
}: {
className?: string;
// TODO: add all props for <Button>
[index: string]: unknown;
}) {
return (
<TooltipTrigger>
<TooltipTrigger tooltip={() => "Settings"}>
<Button variant="toolbar" {...rest}>
<SettingsIcon />
</Button>
{() => "Settings"}
</TooltipTrigger>
);
}
@ -227,25 +234,31 @@ export function InviteButton({
...rest
}: {
className?: string;
// TODO: add all props for <Button>
[index: string]: unknown;
}) {
return (
<TooltipTrigger>
<TooltipTrigger tooltip={() => "Invite"}>
<Button variant="toolbar" {...rest}>
<AddUserIcon />
</Button>
{() => "Invite"}
</TooltipTrigger>
);
}
export function OptionsButton(props: Omit<Props, "variant">) {
interface AudioButtonProps extends Omit<Props, "variant"> {
/**
* A number between 0 and 1
*/
volume: number;
}
export function AudioButton({ volume, ...rest }: AudioButtonProps) {
return (
<TooltipTrigger>
<Button variant="icon" {...props}>
<OverflowIcon />
<TooltipTrigger tooltip={() => "Local volume"}>
<Button variant="icon" {...rest}>
<VolumeIcon volume={volume} />
</Button>
{() => "Options"}
</TooltipTrigger>
);
}

8
src/button/CopyButton.tsx
View file

@ -23,10 +23,10 @@ import { Button, ButtonVariant } from "./Button";
interface Props {
value: string;
children: JSX.Element;
className: string;
variant: ButtonVariant;
copiedMessage: string;
children?: JSX.Element | string;
className?: string;
variant?: ButtonVariant;
copiedMessage?: string;
}
export function CopyButton({
value,

24
src/button/LinkButton.tsx
View file

@ -14,9 +14,10 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import React from "react";
import React, { HTMLAttributes } from "react";
import { Link } from "react-router-dom";
import classNames from "classnames";
import * as H from "history";
import {
variantToClassName,
@ -24,19 +25,21 @@ import {
ButtonVariant,
ButtonSize,
} from "./Button";
interface Props {
className: string;
variant: ButtonVariant;
size: ButtonSize;
children: JSX.Element;
[index: string]: unknown;
interface Props extends HTMLAttributes<HTMLAnchorElement> {
children: JSX.Element | string;
to: H.LocationDescriptor | ((location: H.Location) => H.LocationDescriptor);
size?: ButtonSize;
variant?: ButtonVariant;
className?: string;
}
export function LinkButton({
className,
variant,
size,
children,
to,
size,
variant,
className,
...rest
}: Props) {
return (
@ -46,6 +49,7 @@ export function LinkButton({
sizeToClassName[size],
className
)}
to={to}
{...rest}
>
{children}

35
src/button/VolumeIcon.tsx Normal file
View file

@ -0,0 +1,35 @@
/*
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 React from "react";
import { ReactComponent as AudioMuted } from "../icons/AudioMuted.svg";
import { ReactComponent as AudioLow } from "../icons/AudioLow.svg";
import { ReactComponent as Audio } from "../icons/Audio.svg";
interface Props {
/**
* Number between 0 and 1
*/
volume: number;
}
export function VolumeIcon({ volume }: Props) {
if (volume <= 0) return <AudioMuted />;
if (volume <= 0.5) return <AudioLow />;
return <Audio />;
}

40
src/form/Form.tsx Normal file
View file

@ -0,0 +1,40 @@
/*
Copyright 2022 Matrix.org Foundation C.I.C.
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 classNames from "classnames";
import React, { FormEventHandler, forwardRef } from "react";
import styles from "./Form.module.css";
interface FormProps {
className: string;
onSubmit: FormEventHandler<HTMLFormElement>;
children: JSX.Element[];
}
export const Form = forwardRef<HTMLFormElement, FormProps>(
({ children, className, onSubmit }, ref) => {
return (
<form
onSubmit={onSubmit}
className={classNames(styles.form, className)}
ref={ref}
>
{children}
</form>
);
}
);

25
src/home/CallList.jsx → src/home/CallList.tsx
View file

@ -16,14 +16,22 @@ limitations under the License.
import React from "react";
import { Link } from "react-router-dom";
import { MatrixClient, RoomMember } from "matrix-js-sdk";
import { CopyButton } from "../button";
import { Facepile } from "../Facepile";
import { Avatar } from "../Avatar";
import { Avatar, Size } from "../Avatar";
import styles from "./CallList.module.css";
import { getRoomUrl } from "../matrix-utils";
import { Body, Caption } from "../typography/Typography";
import { GroupCallRoom } from "./useGroupCallRooms";
export function CallList({ rooms, client, disableFacepile }) {
interface CallListProps {
rooms: GroupCallRoom[];
client: MatrixClient;
disableFacepile?: boolean;
}
export function CallList({ rooms, client, disableFacepile }: CallListProps) {
return (
<>
<div className={styles.callList}>
@ -48,7 +56,14 @@ export function CallList({ rooms, client, disableFacepile }) {
</>
);
}
interface CallTileProps {
name: string;
avatarUrl: string;
roomId: string;
participants: RoomMember[];
client: MatrixClient;
disableFacepile?: boolean;
}
function CallTile({
name,
avatarUrl,
@ -56,12 +71,12 @@ function CallTile({
participants,
client,
disableFacepile,
}) {
}: CallTileProps) {
return (
<div className={styles.callTile}>
<Link to={`/room/${roomId}`} className={styles.callTileLink}>
<Avatar
size="lg"
size={Size.LG}
bgKey={name}
src={avatarUrl}
fallback={name.slice(0, 1).toUpperCase()}

2
src/home/CallTypeDropdown.tsx
View file

@ -46,7 +46,7 @@ export const CallTypeDropdown: FC<Props> = ({ callType, setCallType }) => {
{callType === CallType.Video ? "Video call" : "Walkie-talkie call"}
</Headline>
</Button>
{(props) => (
{(props: JSX.IntrinsicAttributes) => (
<Menu {...props} label="Call type menu" onAction={setCallType}>
<Item key={CallType.Video} textValue="Video call">
<VideoIcon />

1
src/home/HomePage.jsx → src/home/HomePage.tsx
View file

@ -15,6 +15,7 @@ limitations under the License.
*/
import React from "react";
import { useClient } from "../ClientContext";
import { ErrorView, LoadingView } from "../FullScreenView";
import { UnauthenticatedView } from "./UnauthenticatedView";

12
src/home/JoinExistingCallModal.jsx → src/home/JoinExistingCallModal.tsx
View file

@ -15,18 +15,26 @@ limitations under the License.
*/
import React from "react";
import { PressEvent } from "@react-types/shared";
import { Modal, ModalContent } from "../Modal";
import { Button } from "../button";
import { FieldRow } from "../input/Input";
import styles from "./JoinExistingCallModal.module.css";
export function JoinExistingCallModal({ onJoin, ...rest }) {
interface Props {
onJoin: (e: PressEvent) => void;
onClose: (e: PressEvent) => void;
// TODO: add used parameters for <Modal>
[index: string]: unknown;
}
export function JoinExistingCallModal({ onJoin, onClose, ...rest }: Props) {
return (
<Modal title="Join existing call?" isDismissable {...rest}>
<ModalContent>
<p>This call already exists, would you like to join?</p>
<FieldRow rightAlign className={styles.buttons}>
<Button onPress={rest.onClose}>No</Button>
<Button onPress={onClose}>No</Button>
<Button onPress={onJoin}>Yes, join call</Button>
</FieldRow>
</ModalContent>

41
src/home/RegisteredView.jsx → src/home/RegisteredView.tsx
View file

@ -14,7 +14,15 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import React, { useState, useCallback } from "react";
import React, {
useState,
useCallback,
FormEvent,
FormEventHandler,
} from "react";
import { useHistory } from "react-router-dom";
import { MatrixClient } from "matrix-js-sdk";
import { createRoom, roomAliasLocalpartFromRoomName } from "../matrix-utils";
import { useGroupCallRooms } from "./useGroupCallRooms";
import { Header, HeaderLogo, LeftNav, RightNav } from "../Header";
@ -26,28 +34,35 @@ import { CallList } from "./CallList";
import { UserMenuContainer } from "../UserMenuContainer";
import { useModalTriggerState } from "../Modal";
import { JoinExistingCallModal } from "./JoinExistingCallModal";
import { useHistory } from "react-router-dom";
import { Title } from "../typography/Typography";
import { Form } from "../form/Form";
import { CallType, CallTypeDropdown } from "./CallTypeDropdown";
export function RegisteredView({ client }) {
interface Props {
client: MatrixClient;
isPasswordlessUser: boolean;
}
export function RegisteredView({ client, isPasswordlessUser }: Props) {
const [callType, setCallType] = useState(CallType.Video);
const [loading, setLoading] = useState(false);
const [error, setError] = useState();
const [error, setError] = useState<Error>();
const history = useHistory();
const onSubmit = useCallback(
(e) => {
const { modalState, modalProps } = useModalTriggerState();
const onSubmit: FormEventHandler<HTMLFormElement> = useCallback(
(e: FormEvent) => {
e.preventDefault();
const data = new FormData(e.target);
const roomName = data.get("callName");
const ptt = callType === CallType.Radio;
const data = new FormData(e.target as HTMLFormElement);
const roomNameData = data.get("callName");
const roomName = typeof roomNameData === "string" ? roomNameData : "";
// const ptt = callType === CallType.Radio;
async function submit() {
setError(undefined);
setLoading(true);
const [roomIdOrAlias] = await createRoom(client, roomName, ptt);
const [roomIdOrAlias] = await createRoom(client, roomName);
if (roomIdOrAlias) {
history.push(`/room/${roomIdOrAlias}`);
@ -64,17 +79,15 @@ export function RegisteredView({ client }) {
console.error(error);
setLoading(false);
setError(error);
reset();
}
});
},
[client, callType]
[client, history, modalState]
);
const recentRooms = useGroupCallRooms(client);
const { modalState, modalProps } = useModalTriggerState();
const [existingRoomId, setExistingRoomId] = useState();
const [existingRoomId, setExistingRoomId] = useState<string>();
const onJoinExistingRoom = useCallback(() => {
history.push(`/${existingRoomId}`);
}, [history, existingRoomId]);

29
src/home/useGroupCallRooms.js → src/home/useGroupCallRooms.ts
View file

@ -14,11 +14,21 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import { GroupCall, MatrixClient, Room, RoomMember } from "matrix-js-sdk";
import { GroupCallEventHandlerEvent } from "matrix-js-sdk/src/webrtc/groupCallEventHandler";
import { useState, useEffect } from "react";
const tsCache = {};
export interface GroupCallRoom {
roomId: string;
roomName: string;
avatarUrl: string;
room: Room;
groupCall: GroupCall;
participants: RoomMember[];
}
const tsCache: { [index: string]: number } = {};
function getLastTs(client, r) {
function getLastTs(client: MatrixClient, r: Room) {
if (tsCache[r.roomId]) {
return tsCache[r.roomId];
}
@ -59,13 +69,13 @@ function getLastTs(client, r) {
return ts;
}
function sortRooms(client, rooms) {
function sortRooms(client: MatrixClient, rooms: Room[]): Room[] {
return rooms.sort((a, b) => {
return getLastTs(client, b) - getLastTs(client, a);
});
}
export function useGroupCallRooms(client) {
export function useGroupCallRooms(client: MatrixClient): GroupCallRoom[] {
const [rooms, setRooms] = useState([]);
useEffect(() => {
@ -90,12 +100,15 @@ export function useGroupCallRooms(client) {
updateRooms();
client.on("GroupCall.incoming", updateRooms);
client.on("GroupCall.participants", updateRooms);
client.on(GroupCallEventHandlerEvent.Incoming, updateRooms);
client.on(GroupCallEventHandlerEvent.Participants, updateRooms);
return () => {
client.removeListener("GroupCall.incoming", updateRooms);
client.removeListener("GroupCall.participants", updateRooms);
client.removeListener(GroupCallEventHandlerEvent.Incoming, updateRooms);
client.removeListener(
GroupCallEventHandlerEvent.Participants,
updateRooms
);
};
}, [client]);

8
src/icons/Audio.svg
View file

@ -1,5 +1,5 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7.97991 1.48403L4 4.80062L1 4.80062C0.447715 4.80062 0 5.24834 0 5.80062V10.2006C0 10.7529 0.447714 11.2006 0.999999 11.2006L4 11.2006L7.97991 14.5172C8.30557 14.7886 8.8 14.557 8.8 14.1331V1.86814C8.8 1.44422 8.30557 1.21265 7.97991 1.48403Z" fill="white"/>
<path d="M14.1258 2.79107C13.8998 2.50044 13.4809 2.44808 13.1903 2.67413C12.9 2.89992 12.8475 3.3181 13.0726 3.6087L13.0731 3.60935L13.0738 3.61021L13.0829 3.62231C13.0917 3.63418 13.1059 3.65355 13.1248 3.68011C13.1625 3.73326 13.2187 3.81496 13.2872 3.92256C13.4243 4.13812 13.6097 4.45554 13.7955 4.85371C14.169 5.65407 14.5329 6.75597 14.5329 8.00036C14.5329 9.24475 14.169 10.3466 13.7955 11.147C13.6097 11.5452 13.4243 11.8626 13.2872 12.0782C13.2187 12.1858 13.1625 12.2675 13.1248 12.3206C13.1059 12.3472 13.0917 12.3665 13.0829 12.3784L13.0738 12.3905L13.0731 12.3914L13.0725 12.3921C12.8475 12.6827 12.9 13.1008 13.1903 13.3266C13.4809 13.5526 13.8998 13.5003 14.1258 13.2097L13.629 12.8232C14.1258 13.2096 14.1258 13.2097 14.1258 13.2097L14.1272 13.2079L14.1291 13.2055L14.1346 13.1982L14.1523 13.1748C14.1669 13.1552 14.187 13.1277 14.2119 13.0926C14.2617 13.0225 14.3305 12.9221 14.4121 12.794C14.5749 12.5381 14.7895 12.1698 15.0037 11.7109C15.4302 10.7969 15.8663 9.49883 15.8663 8.00036C15.8663 6.50189 15.4302 5.20379 15.0037 4.28987C14.7895 3.83089 14.5749 3.4626 14.4121 3.20673C14.3305 3.07862 14.2617 2.97818 14.2119 2.90811C14.187 2.87306 14.1669 2.84556 14.1523 2.82596L14.1346 2.80249L14.1291 2.79525L14.1272 2.79278L14.1264 2.79183C14.1264 2.79183 14.1258 2.79107 13.5996 3.20036L14.1258 2.79107Z" fill="white"/>
<path d="M11.7264 5.19121C11.5004 4.90058 11.0815 4.84823 10.7909 5.07427C10.501 5.29973 10.4482 5.71698 10.6722 6.00752L10.6745 6.01057C10.6775 6.01457 10.6831 6.02223 10.691 6.03338C10.7069 6.05572 10.7318 6.09189 10.7628 6.14057C10.8249 6.23827 10.9103 6.38426 10.9961 6.56815C11.1696 6.93993 11.3335 7.44183 11.3335 8.00051C11.3335 8.55918 11.1696 9.06108 10.9961 9.43287C10.9103 9.61675 10.8249 9.76275 10.7628 9.86045C10.7318 9.90912 10.7069 9.94529 10.691 9.96763C10.6831 9.97879 10.6775 9.98645 10.6745 9.99044L10.6722 9.9935C10.4482 10.284 10.501 10.7013 10.7909 10.9267C11.0815 11.1528 11.5004 11.1004 11.7264 10.8098L11.2002 10.4005C11.7264 10.8098 11.7264 10.8098 11.7264 10.8098L11.7276 10.8083L11.7291 10.8064L11.7329 10.8014L11.7439 10.7868C11.7526 10.7751 11.7642 10.7593 11.7781 10.7396C11.806 10.7004 11.8436 10.6455 11.8876 10.5763C11.9755 10.4383 12.0901 10.2414 12.2043 9.99672C12.4308 9.51136 12.6669 8.81326 12.6669 8.00051C12.6669 7.18775 12.4308 6.48965 12.2043 6.0043C12.0901 5.75961 11.9755 5.56275 11.8876 5.42473C11.8436 5.35555 11.806 5.30065 11.7781 5.26138C11.7642 5.24173 11.7526 5.22596 11.7439 5.21422L11.7329 5.19964L11.7291 5.19465L11.7276 5.19274L11.727 5.19193C11.727 5.19193 11.7264 5.19121 11.2002 5.60051L11.7264 5.19121Z" fill="white"/>
<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 Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.9 KiB

After

Width:  |  Height:  |  Size: 2.9 KiB

4
src/icons/AudioLow.svg Normal file
View file

@ -0,0 +1,4 @@
<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="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

After

Width:  |  Height:  |  Size: 1.6 KiB

3
src/icons/AudioMuted.svg Normal file
View file

@ -0,0 +1,3 @@
<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="M2.63174 0.583224C2.15798 0.109466 1.38987 0.109466 0.91611 0.583224C0.442351 1.05698 0.442351 1.8251 0.91611 2.29885L5.3958 6.77855H5.37083L15.3629 16.7706V16.7456L20.7144 22.0972C21.1882 22.5709 21.9563 22.5709 22.4301 22.0972C22.9038 21.6234 22.9038 20.8553 22.4301 20.3816L2.63174 0.583224ZM15.3629 3.23319V9.88521L10.2275 4.74987L13.2404 2.2391C14.0833 1.53675 15.3629 2.13608 15.3629 3.23319ZM4.07191 16.8718H7.7929V16.872L13.2404 21.4116C14.0833 22.114 15.3629 21.5146 15.3629 20.4175V20.2018L2.4839 7.32287C1.87536 7.79641 1.48389 8.53577 1.48389 9.36657V14.2838C1.48389 15.7131 2.64258 16.8718 4.07191 16.8718Z" fill="white"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 788 B

1
src/index.css
View file

@ -38,6 +38,7 @@ limitations under the License.
--quinary-content: #394049;
--system: #21262c;
--background: #15191e;
--background-85: rgba(23, 25, 28, 0.85);
--bgColor3: #444; /* This isn't found anywhere in the designs or Compound */
}

4
src/main.tsx
View file

@ -84,6 +84,10 @@ if (import.meta.env.VITE_CUSTOM_THEME) {
"--background",
import.meta.env.VITE_THEME_BACKGROUND as string
);
style.setProperty(
"--background-85",
import.meta.env.VITE_THEME_BACKGROUND_85 as string
);
}
const history = createBrowserHistory();

14
src/popover/Popover.jsx → src/popover/Popover.tsx
View file

@ -14,14 +14,22 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import React, { forwardRef, useRef } from "react";
import React, { forwardRef, HTMLAttributes } from "react";
import { DismissButton, useOverlay } from "@react-aria/overlays";
import { FocusScope } from "@react-aria/focus";
import classNames from "classnames";
import styles from "./Popover.module.css";
import { useObjectRef } from "@react-aria/utils";
export const Popover = forwardRef(
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);

84
src/popover/PopoverMenu.jsx
View file

@ -1,84 +0,0 @@
/*
Copyright 2022 Matrix.org Foundation C.I.C.
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 React, { forwardRef, useRef } from "react";
import styles from "./PopoverMenu.module.css";
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 { Popover } from "./Popover";
export const PopoverMenuTrigger = forwardRef(
({ children, placement, className, disableOnState, ...rest }, ref) => {
const popoverMenuState = useMenuTriggerState(rest);
const buttonRef = useObjectRef(ref);
const { menuTriggerProps, menuProps } = useMenuTrigger(
{},
popoverMenuState,
buttonRef
);
const popoverRef = useRef();
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>
);
}
);

96
src/popover/PopoverMenu.tsx Normal file
View file

@ -0,0 +1,96 @@
/*
Copyright 2022 Matrix.org Foundation C.I.C.
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 React, { 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();
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>
);
});

2
src/profile/ProfileModal.tsx
View file

@ -26,7 +26,7 @@ import styles from "./ProfileModal.module.css";
interface Props {
client: MatrixClient;
onClose: () => {};
onClose: () => void;
[rest: string]: unknown;
}
export function ProfileModal({ client, ...rest }: Props) {

18
src/room/AudioPreview.jsx → src/room/AudioPreview.tsx
View file

@ -15,12 +15,24 @@ limitations under the License.
*/
import React from "react";
import styles from "./AudioPreview.module.css";
import { GroupCallState } from "matrix-js-sdk/src/webrtc/groupCall";
import { SelectInput } from "../input/SelectInput";
import { Item } from "@react-stately/collections";
import styles from "./AudioPreview.module.css";
import { SelectInput } from "../input/SelectInput";
import { Body } from "../typography/Typography";
interface Props {
state: GroupCallState;
roomName: string;
audioInput: string;
audioInputs: MediaDeviceInfo[];
setAudioInput: (deviceId: string) => void;
audioOutput: string;
audioOutputs: MediaDeviceInfo[];
setAudioOutput: (deviceId: string) => void;
}
export function AudioPreview({
state,
roomName,
@ -30,7 +42,7 @@ export function AudioPreview({
audioOutput,
audioOutputs,
setAudioOutput,
}) {
}: Props) {
return (
<>
<h1>{`${roomName} - Walkie-talkie call`}</h1>

4
src/room/CallEndedView.jsx → src/room/CallEndedView.tsx
View file

@ -15,13 +15,15 @@ limitations under the License.
*/
import React from "react";
import { MatrixClient } from "matrix-js-sdk";
import styles from "./CallEndedView.module.css";
import { LinkButton } from "../button";
import { useProfile } from "../profile/useProfile";
import { Subtitle, Body, Link, Headline } from "../typography/Typography";
import { Header, HeaderLogo, LeftNav, RightNav } from "../Header";
export function CallEndedView({ client }) {
export function CallEndedView({ client }: { client: MatrixClient }) {
const { displayName } = useProfile(client);
return (

25
src/room/FeedbackModal.jsx → src/room/FeedbackModal.tsx
View file

@ -15,6 +15,8 @@ limitations under the License.
*/
import React, { useCallback, useEffect } from "react";
import { randomString } from "matrix-js-sdk/src/randomstring";
import { Modal, ModalContent } from "../Modal";
import { Button } from "../button";
import { FieldRow, InputField, ErrorMessage } from "../input/Input";
@ -23,9 +25,14 @@ import {
useRageshakeRequest,
} from "../settings/submit-rageshake";
import { Body } from "../typography/Typography";
import { randomString } from "matrix-js-sdk/src/randomstring";
export function FeedbackModal({ inCall, roomId, ...rest }) {
interface Props {
inCall: boolean;
roomId: string;
onClose?: () => void;
// TODO: add all props for for <Modal>
[index: string]: unknown;
}
export function FeedbackModal({ inCall, roomId, onClose, ...rest }: Props) {
const { submitRageshake, sending, sent, error } = useSubmitRageshake();
const sendRageshakeRequest = useRageshakeRequest();
@ -33,8 +40,12 @@ export function FeedbackModal({ inCall, roomId, ...rest }) {
(e) => {
e.preventDefault();
const data = new FormData(e.target);
const description = data.get("description");
const sendLogs = data.get("sendLogs");
const descriptionData = data.get("description");
const description =
typeof descriptionData === "string" ? descriptionData : "";
const sendLogsData = data.get("sendLogs");
const sendLogs =
typeof sendLogsData === "string" ? sendLogsData === "true" : false;
const rageshakeRequestId = randomString(16);
submitRageshake({
@ -53,9 +64,9 @@ export function FeedbackModal({ inCall, roomId, ...rest }) {
useEffect(() => {
if (sent) {
rest.onClose();
onClose();
}
}, [sent, rest.onClose]);
}, [sent, onClose]);
return (
<Modal title="Submit Feedback" isDismissable {...rest}>

17
src/room/GridLayoutMenu.jsx → src/room/GridLayoutMenu.tsx
View file

@ -15,6 +15,8 @@ limitations under the License.
*/
import React from "react";
import { Item } from "@react-stately/collections";
import { Button } from "../button";
import { PopoverMenuTrigger } from "../popover/PopoverMenu";
import { ReactComponent as SpotlightIcon } from "../icons/Spotlight.svg";
@ -22,19 +24,22 @@ import { ReactComponent as FreedomIcon } from "../icons/Freedom.svg";
import { ReactComponent as CheckIcon } from "../icons/Check.svg";
import menuStyles from "../Menu.module.css";
import { Menu } from "../Menu";
import { Item } from "@react-stately/collections";
import { Tooltip, TooltipTrigger } from "../Tooltip";
import { TooltipTrigger } from "../Tooltip";
export function GridLayoutMenu({ layout, setLayout }) {
type Layout = "freedom" | "spotlight";
interface Props {
layout: Layout;
setLayout: (layout: Layout) => void;
}
export function GridLayoutMenu({ layout, setLayout }: Props) {
return (
<PopoverMenuTrigger placement="bottom right">
<TooltipTrigger>
<TooltipTrigger tooltip={() => "Layout Type"}>
<Button variant="icon">
{layout === "spotlight" ? <SpotlightIcon /> : <FreedomIcon />}
</Button>
{() => "Layout Type"}
</TooltipTrigger>
{(props) => (
{(props: JSX.IntrinsicAttributes) => (
<Menu {...props} label="Grid layout menu" onAction={setLayout}>
<Item key="freedom" textValue="Freedom">
<FreedomIcon />

257
src/room/GroupCallInspector.jsx → src/room/GroupCallInspector.tsx
View file

@ -22,40 +22,26 @@ import React, {
useRef,
createContext,
useContext,
Dispatch,
} from "react";
import ReactJson from "react-json-view";
import ReactJson, { CollapsedFieldProps } from "react-json-view";
import mermaid from "mermaid";
import { Item } from "@react-stately/collections";
import { MatrixEvent, GroupCall, IContent } from "matrix-js-sdk";
import { ClientEvent, MatrixClient } from "matrix-js-sdk/src/client";
import { RoomStateEvent } from "matrix-js-sdk/src/models/room-state";
import { CallEvent } from "matrix-js-sdk/src/webrtc/call";
import styles from "./GroupCallInspector.module.css";
import { SelectInput } from "../input/SelectInput";
import { Item } from "@react-stately/collections";
function getCallUserId(call) {
return call.getOpponentMember()?.userId || call.invitee || null;
interface InspectorContextState {
eventsByUserId?: { [userId: string]: SequenceDiagramMatrixEvent[] };
remoteUserIds?: string[];
localUserId?: string;
localSessionId?: string;
}
function getCallState(call) {
return {
id: call.callId,
opponentMemberId: getCallUserId(call),
state: call.state,
direction: call.direction,
};
}
function getHangupCallState(call) {
return {
...getCallState(call),
hangupReason: call.hangupReason,
};
}
const dateFormatter = new Intl.DateTimeFormat([], {
hour: "2-digit",
minute: "2-digit",
second: "2-digit",
fractionalSecondDigits: 3,
});
const defaultCollapsedFields = [
"org.matrix.msc3401.call",
"org.matrix.msc3401.call.member",
@ -67,19 +53,19 @@ const defaultCollapsedFields = [
"content",
];
function shouldCollapse({ name, src, type, namespace }) {
function shouldCollapse({ name }: CollapsedFieldProps) {
return defaultCollapsedFields.includes(name);
}
function getUserName(userId) {
const match = userId.match(/@([^\:]+):/);
function getUserName(userId: string) {
const match = userId.match(/@([^:]+):/);
return match && match.length > 0
? match[1].replace("-", " ").replace(/\W/g, "")
: userId.replace(/\W/g, "");
}
function formatContent(type, content) {
function formatContent(type: string, content: CallEventContent) {
if (type === "m.call.hangup") {
return `callId: ${content.call_id.slice(-4)} reason: ${
content.reason
@ -109,14 +95,35 @@ function formatContent(type, content) {
}
}
function formatTimestamp(timestamp) {
const dateFormatter = new Intl.DateTimeFormat([], {
hour: "2-digit",
minute: "2-digit",
second: "2-digit",
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore the linter does not know about this property of the DataTimeFormatOptions
fractionalSecondDigits: 3,
});
function formatTimestamp(timestamp: number | Date) {
return dateFormatter.format(timestamp);
}
export const InspectorContext = createContext();
export const InspectorContext =
createContext<
[
InspectorContextState,
React.Dispatch<React.SetStateAction<InspectorContextState>>
]
>(undefined);
export function InspectorContextProvider({ children }) {
const context = useState({});
export function InspectorContextProvider({
children,
}: {
children: React.ReactNode;
}) {
// The context will be initialized empty.
// It is then set from within GroupCallInspector.
const context = useState<InspectorContextState>({});
return (
<InspectorContext.Provider value={context}>
{children}
@ -124,14 +131,43 @@ export function InspectorContextProvider({ children }) {
);
}
type CallEventContent = {
["m.calls"]: {
["m.devices"]: { session_id: string; [x: string]: unknown }[];
["m.call_id"]: string;
}[];
} & {
call_id: string;
reason: string;
sender_session_id: string;
dest_session_id: string;
} & IContent;
export type SequenceDiagramMatrixEvent = {
to: string;
from: string;
timestamp: number;
type: string;
content: CallEventContent;
ignored: boolean;
};
interface SequenceDiagramViewerProps {
localUserId: string;
remoteUserIds: string[];
selectedUserId: string;
onSelectUserId: Dispatch<(prevState: undefined) => undefined>;
events: SequenceDiagramMatrixEvent[];
}
export function SequenceDiagramViewer({
localUserId,
remoteUserIds,
selectedUserId,
onSelectUserId,
events,
}) {
const mermaidElRef = useRef();
}: SequenceDiagramViewerProps) {
const mermaidElRef = useRef<HTMLDivElement>();
useEffect(() => {
mermaid.initialize({
@ -165,7 +201,7 @@ export function SequenceDiagramViewer({
}
`;
mermaid.mermaidAPI.render("mermaid", graphDefinition, (svgCode) => {
mermaid.mermaidAPI.render("mermaid", graphDefinition, (svgCode: string) => {
mermaidElRef.current.innerHTML = svgCode;
});
}, [events, localUserId, selectedUserId]);
@ -190,9 +226,18 @@ export function SequenceDiagramViewer({
);
}
function reducer(state, action) {
function reducer(
state: InspectorContextState,
action: {
type?: CallEvent | ClientEvent | RoomStateEvent;
event?: MatrixEvent;
rawEvent?: Record<string, unknown>;
callStateEvent?: MatrixEvent;
memberStateEvents?: MatrixEvent[];
}
) {
switch (action.type) {
case "receive_room_state_event": {
case RoomStateEvent.Events: {
const { event, callStateEvent, memberStateEvents } = action;
let eventsByUserId = state.eventsByUserId;
@ -247,12 +292,12 @@ function reducer(state, action) {
),
};
}
case "received_voip_event": {
case ClientEvent.ReceivedVoipEvent: {
const event = action.event;
const eventsByUserId = { ...state.eventsByUserId };
const fromId = event.getSender();
const toId = state.localUserId;
const content = event.getContent();
const content = event.getContent<CallEventContent>();
const remoteUserIds = eventsByUserId[fromId]
? state.remoteUserIds
@ -272,11 +317,11 @@ function reducer(state, action) {
return { ...state, eventsByUserId, remoteUserIds };
}
case "send_voip_event": {
const event = action.event;
case CallEvent.SendVoipEvent: {
const event = action.rawEvent;
const eventsByUserId = { ...state.eventsByUserId };
const fromId = state.localUserId;
const toId = event.userId;
const toId = event.userId as string;
const remoteUserIds = eventsByUserId[toId]
? state.remoteUserIds
@ -287,8 +332,8 @@ function reducer(state, action) {
{
from: fromId,
to: toId,
type: event.eventType,
content: event.content,
type: event.eventType as string,
content: event.content as CallEventContent,
timestamp: Date.now(),
ignored: false,
},
@ -301,7 +346,11 @@ function reducer(state, action) {
}
}
function useGroupCallState(client, groupCall, pollCallStats) {
function useGroupCallState(
client: MatrixClient,
groupCall: GroupCall,
showPollCallStats: boolean
) {
const [state, dispatch] = useReducer(reducer, {
localUserId: client.getUserId(),
localSessionId: client.getSessionId(),
@ -312,7 +361,7 @@ function useGroupCallState(client, groupCall, pollCallStats) {
});
useEffect(() => {
function onUpdateRoomState(event) {
function onUpdateRoomState(event?: MatrixEvent) {
const callStateEvent = groupCall.room.currentState.getStateEvents(
"org.matrix.msc3401.call",
groupCall.groupCallId
@ -323,120 +372,60 @@ function useGroupCallState(client, groupCall, pollCallStats) {
);
dispatch({
type: "receive_room_state_event",
type: RoomStateEvent.Events,
event,
callStateEvent,
memberStateEvents,
});
}
// function onCallsChanged() {
// const calls = groupCall.calls.reduce((obj, call) => {
// obj[
// `${call.callId} (${call.getOpponentMember()?.userId || call.sender})`
// ] = getCallState(call);
// return obj;
// }, {});
// updateState({ calls });
// }
// function onCallHangup(call) {
// setState(({ hangupCalls, ...rest }) => ({
// ...rest,
// hangupCalls: {
// ...hangupCalls,
// [`${call.callId} (${
// call.getOpponentMember()?.userId || call.sender
// })`]: getHangupCallState(call),
// },
// }));
// dispatch({ type: "call_hangup", call });
// }
function onReceivedVoipEvent(event) {
dispatch({ type: "received_voip_event", event });
function onReceivedVoipEvent(event: MatrixEvent) {
dispatch({ type: ClientEvent.ReceivedVoipEvent, event });
}
function onSendVoipEvent(event) {
dispatch({ type: "send_voip_event", event });
function onSendVoipEvent(event: Record<string, unknown>) {
dispatch({ type: CallEvent.SendVoipEvent, rawEvent: event });
}
client.on("RoomState.events", onUpdateRoomState);
client.on(RoomStateEvent.Events, onUpdateRoomState);
//groupCall.on("calls_changed", onCallsChanged);
groupCall.on("send_voip_event", onSendVoipEvent);
groupCall.on(CallEvent.SendVoipEvent, onSendVoipEvent);
//client.on("state", onCallsChanged);
//client.on("hangup", onCallHangup);
client.on("received_voip_event", onReceivedVoipEvent);
client.on(ClientEvent.ReceivedVoipEvent, onReceivedVoipEvent);
onUpdateRoomState();
return () => {
client.removeListener("RoomState.events", onUpdateRoomState);
client.removeListener(RoomStateEvent.Events, onUpdateRoomState);
//groupCall.removeListener("calls_changed", onCallsChanged);
groupCall.removeListener("send_voip_event", onSendVoipEvent);
groupCall.removeListener(CallEvent.SendVoipEvent, onSendVoipEvent);
//client.removeListener("state", onCallsChanged);
//client.removeListener("hangup", onCallHangup);
client.removeListener("received_voip_event", onReceivedVoipEvent);
client.removeListener(ClientEvent.ReceivedVoipEvent, onReceivedVoipEvent);
};
}, [client, groupCall]);
// useEffect(() => {
// let timeout;
// async function updateCallStats() {
// const callIds = groupCall.calls.map(
// (call) =>
// `${call.callId} (${call.getOpponentMember()?.userId || call.sender})`
// );
// const stats = await Promise.all(
// groupCall.calls.map((call) =>
// call.peerConn
// ? call.peerConn
// .getStats(null)
// .then((stats) =>
// Object.fromEntries(
// Array.from(stats).map(([_id, report], i) => [
// report.type + i,
// report,
// ])
// )
// )
// : Promise.resolve(null)
// )
// );
// const callStats = {};
// for (let i = 0; i < groupCall.calls.length; i++) {
// callStats[callIds[i]] = stats[i];
// }
// dispatch({ type: "callStats", callStats });
// timeout = setTimeout(updateCallStats, 1000);
// }
// if (pollCallStats) {
// updateCallStats();
// }
// return () => {
// clearTimeout(timeout);
// };
// }, [pollCallStats]);
return state;
}
export function GroupCallInspector({ client, groupCall, show }) {
interface GroupCallInspectorProps {
client: MatrixClient;
groupCall: GroupCall;
show: boolean;
}
export function GroupCallInspector({
client,
groupCall,
show,
}: GroupCallInspectorProps) {
const [currentTab, setCurrentTab] = useState("sequence-diagrams");
const [selectedUserId, setSelectedUserId] = useState();
const [selectedUserId, setSelectedUserId] = useState<string>();
const state = useGroupCallState(client, groupCall, show);
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const [_, setState] = useContext(InspectorContext);
useEffect(() => {
setState({ json: state });
setState(state);
}, [setState, state]);
if (!show) {
@ -446,7 +435,7 @@ export function GroupCallInspector({ client, groupCall, show }) {
return (
<Resizable
enable={{ top: true }}
defaultSize={{ height: 200 }}
defaultSize={{ height: 200, width: undefined }}
className={styles.inspector}
>
<div className={styles.toolbar}>

18
src/room/GroupCallLoader.jsx → src/room/GroupCallLoader.tsx
View file

@ -14,18 +14,28 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import React from "react";
import React, { ReactNode } from "react";
import { GroupCall, MatrixClient } from "matrix-js-sdk";
import { useLoadGroupCall } from "./useLoadGroupCall";
import { ErrorView, FullScreenView } from "../FullScreenView";
import { usePageTitle } from "../usePageTitle";
interface Props {
client: MatrixClient;
roomIdOrAlias: string;
viaServers: string[];
children: (groupCall: GroupCall) => ReactNode;
createPtt: boolean;
}
export function GroupCallLoader({
client,
roomIdOrAlias,
viaServers,
createPtt,
children,
}) {
createPtt,
}: Props): JSX.Element {
const { loading, error, groupCall } = useLoadGroupCall(
client,
roomIdOrAlias,
@ -47,5 +57,5 @@ export function GroupCallLoader({
return <ErrorView error={error} />;
}
return children(groupCall);
return <>{children(groupCall)}</>;
}

23
src/room/GroupCallView.jsx → src/room/GroupCallView.tsx
View file

@ -16,7 +16,9 @@ limitations under the License.
import React, { useCallback, useEffect, useState } from "react";
import { useHistory } from "react-router-dom";
import { GroupCallState } from "matrix-js-sdk/src/webrtc/groupCall";
import { GroupCall, GroupCallState } from "matrix-js-sdk/src/webrtc/groupCall";
import { MatrixClient } from "matrix-js-sdk";
import { useGroupCall } from "./useGroupCall";
import { ErrorView, FullScreenView } from "../FullScreenView";
import { LobbyView } from "./LobbyView";
@ -26,14 +28,25 @@ import { CallEndedView } from "./CallEndedView";
import { useRoomAvatar } from "./useRoomAvatar";
import { useSentryGroupCallHandler } from "./useSentryGroupCallHandler";
import { useLocationNavigation } from "../useLocationNavigation";
declare global {
interface Window {
groupCall: GroupCall;
}
}
interface Props {
client: MatrixClient;
isPasswordlessUser: boolean;
isEmbedded: boolean;
roomIdOrAlias: string;
groupCall: GroupCall;
}
export function GroupCallView({
client,
isPasswordlessUser,
isEmbedded,
roomIdOrAlias,
groupCall,
}) {
}: Props) {
const {
state,
error,
@ -52,7 +65,6 @@ export function GroupCallView({
isScreensharing,
localScreenshareFeed,
screenshareFeeds,
hasLocalParticipant,
participants,
unencryptedEventsFromUsers,
} = useGroupCall(groupCall);
@ -80,7 +92,7 @@ export function GroupCallView({
if (!isPasswordlessUser) {
history.push("/");
}
}, [leave, history]);
}, [leave, isPasswordlessUser, history]);
if (error) {
return <ErrorView error={error} />;
@ -142,7 +154,6 @@ export function GroupCallView({
<LobbyView
client={client}
groupCall={groupCall}
hasLocalParticipant={hasLocalParticipant}
roomName={groupCall.room.name}
avatarUrl={avatarUrl}
state={state}

73
src/room/InCallView.jsx → src/room/InCallView.tsx
View file

@ -14,7 +14,11 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import React, { useCallback, useMemo, useRef } from "react";
import React, { useCallback, useMemo } from "react";
import { usePreventScroll } from "@react-aria/overlays";
import { GroupCall, MatrixClient } from "matrix-js-sdk";
import { CallFeed } from "matrix-js-sdk/src/webrtc/callFeed";
import styles from "./InCallView.module.css";
import {
HangupButton,
@ -38,7 +42,6 @@ import { Avatar } from "../Avatar";
import { UserMenuContainer } from "../UserMenuContainer";
import { useRageshakeRequestModal } from "../settings/submit-rageshake";
import { RageshakeRequestModal } from "./RageshakeRequestModal";
import { usePreventScroll } from "@react-aria/overlays";
import { useMediaHandler } from "../settings/useMediaHandler";
import { useShowInspector } from "../settings/useSetting";
import { useModalTriggerState } from "../Modal";
@ -50,6 +53,33 @@ const canScreenshare = "getDisplayMedia" in (navigator.mediaDevices ?? {});
// For now we can disable screensharing in Safari.
const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
interface Props {
client: MatrixClient;
groupCall: GroupCall;
roomName: string;
avatarUrl: string;
microphoneMuted: boolean;
localVideoMuted: boolean;
toggleLocalVideoMuted: () => void;
toggleMicrophoneMuted: () => void;
toggleScreensharing: () => void;
userMediaFeeds: CallFeed[];
activeSpeaker: string;
onLeave: () => void;
isScreensharing: boolean;
screenshareFeeds: CallFeed[];
localScreenshareFeed: CallFeed;
roomIdOrAlias: string;
unencryptedEventsFromUsers: Set<string>;
}
interface Participant {
id: string;
callFeed: CallFeed;
focused: boolean;
isLocal: boolean;
presenter: boolean;
}
export function InCallView({
client,
groupCall,
@ -65,9 +95,10 @@ export function InCallView({
toggleScreensharing,
isScreensharing,
screenshareFeeds,
localScreenshareFeed,
roomIdOrAlias,
unencryptedEventsFromUsers,
}) {
}: Props) {
usePreventScroll();
const [layout, setLayout] = useVideoGridLayout(screenshareFeeds.length > 0);
@ -79,7 +110,7 @@ export function InCallView({
useModalTriggerState();
const items = useMemo(() => {
const participants = [];
const participants: Participant[] = [];
for (const callFeed of userMediaFeeds) {
participants.push({
@ -90,6 +121,7 @@ export function InCallView({
? callFeed.userId === activeSpeaker
: false,
isLocal: callFeed.isLocal(),
presenter: false,
});
}
@ -107,29 +139,27 @@ export function InCallView({
callFeed,
focused: true,
isLocal: callFeed.isLocal(),
presenter: false,
});
}
return participants;
}, [userMediaFeeds, activeSpeaker, screenshareFeeds, layout]);
const renderAvatar = useCallback(
(roomMember, width, height) => {
const avatarUrl = roomMember.user?.avatarUrl;
const size = Math.round(Math.min(width, height) / 2);
const renderAvatar = useCallback((roomMember, width, height) => {
const avatarUrl = roomMember.user?.avatarUrl;
const size = Math.round(Math.min(width, height) / 2);
return (
<Avatar
key={roomMember.userId}
size={size}
src={avatarUrl}
fallback={roomMember.name.slice(0, 1).toUpperCase()}
className={styles.avatar}
/>
);
},
[client]
);
return (
<Avatar
key={roomMember.userId}
size={size}
src={avatarUrl}
fallback={roomMember.name.slice(0, 1).toUpperCase()}
className={styles.avatar}
/>
);
}, []);
const {
modalState: rageshakeRequestModalState,
@ -158,7 +188,7 @@ export function InCallView({
</div>
) : (
<VideoGrid items={items} layout={layout} disableAnimations={isSafari}>
{({ item, ...rest }) => (
{({ item, ...rest }: { item: Participant; [x: string]: unknown }) => (
<VideoTileContainer
key={item.id}
item={item}
@ -185,7 +215,6 @@ export function InCallView({
<OverflowMenu
inCall
roomIdOrAlias={roomIdOrAlias}
client={client}
groupCall={groupCall}
showInvite={true}
feedbackModalState={feedbackModalState}

41
src/room/InviteModal.jsx → src/room/InviteModal.tsx
View file

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

26
src/room/LobbyView.jsx → src/room/LobbyView.tsx
View file

@ -15,10 +15,14 @@ limitations under the License.
*/
import React, { useEffect, useRef } from "react";
import { GroupCall, GroupCallState } from "matrix-js-sdk/src/webrtc/groupCall";
import { MatrixClient } from "matrix-js-sdk/src/client";
import { PressEvent } from "@react-types/shared";
import { CallFeed } from "matrix-js-sdk/src/webrtc/callFeed";
import styles from "./LobbyView.module.css";
import { Button, CopyButton } from "../button";
import { Header, LeftNav, RightNav, RoomHeaderInfo } from "../Header";
import { GroupCallState } from "matrix-js-sdk/src/webrtc/groupCall";
import { useCallFeed } from "../video-grid/useCallFeed";
import { getRoomUrl } from "../matrix-utils";
import { UserMenuContainer } from "../UserMenuContainer";
@ -28,6 +32,22 @@ import { useMediaHandler } from "../settings/useMediaHandler";
import { VideoPreview } from "./VideoPreview";
import { AudioPreview } from "./AudioPreview";
interface Props {
client: MatrixClient;
groupCall: GroupCall;
roomName: string;
avatarUrl: string;
state: GroupCallState;
onInitLocalCallFeed: () => void;
onEnter: (e: PressEvent) => void;
localCallFeed: CallFeed;
microphoneMuted: boolean;
toggleLocalVideoMuted: () => void;
toggleMicrophoneMuted: () => void;
localVideoMuted: boolean;
roomIdOrAlias: string;
isEmbedded: boolean;
}
export function LobbyView({
client,
groupCall,
@ -43,7 +63,7 @@ export function LobbyView({
toggleMicrophoneMuted,
roomIdOrAlias,
isEmbedded,
}) {
}: Props) {
const { stream } = useCallFeed(localCallFeed);
const {
audioInput,
@ -60,7 +80,7 @@ export function LobbyView({
useLocationNavigation(state === GroupCallState.InitializingLocalCallFeed);
const joinCallButtonRef = useRef();
const joinCallButtonRef = useRef<HTMLButtonElement>();
useEffect(() => {
if (state === GroupCallState.LocalCallFeedInitialized) {

79
src/room/OverflowMenu.jsx → src/room/OverflowMenu.tsx
View file

@ -15,10 +15,13 @@ limitations under the License.
*/
import React, { useCallback } from "react";
import { Item } from "@react-stately/collections";
import { GroupCall } from "matrix-js-sdk/src/webrtc/groupCall";
import { OverlayTriggerState } from "@react-stately/overlays";
import { Button } from "../button";
import { Menu } from "../Menu";
import { PopoverMenuTrigger } from "../popover/PopoverMenu";
import { Item } from "@react-stately/collections";
import { ReactComponent as SettingsIcon } from "../icons/Settings.svg";
import { ReactComponent as AddUserIcon } from "../icons/AddUser.svg";
import { ReactComponent as OverflowIcon } from "../icons/Overflow.svg";
@ -28,7 +31,17 @@ import { SettingsModal } from "../settings/SettingsModal";
import { InviteModal } from "./InviteModal";
import { TooltipTrigger } from "../Tooltip";
import { FeedbackModal } from "./FeedbackModal";
interface Props {
roomIdOrAlias: string;
inCall: boolean;
groupCall: GroupCall;
showInvite: boolean;
feedbackModalState: OverlayTriggerState;
feedbackModalProps: {
isOpen: boolean;
onClose: () => void;
};
}
export function OverflowMenu({
roomIdOrAlias,
inCall,
@ -36,39 +49,57 @@ export function OverflowMenu({
showInvite,
feedbackModalState,
feedbackModalProps,
}) {
const { modalState: inviteModalState, modalProps: inviteModalProps } =
useModalTriggerState();
const { modalState: settingsModalState, modalProps: settingsModalProps } =
useModalTriggerState();
}: Props) {
const {
modalState: inviteModalState,
modalProps: inviteModalProps,
}: {
modalState: OverlayTriggerState;
modalProps: {
isOpen: boolean;
onClose: () => void;
};
} = useModalTriggerState();
const {
modalState: settingsModalState,
modalProps: settingsModalProps,
}: {
modalState: OverlayTriggerState;
modalProps: {
isOpen: boolean;
onClose: () => void;
};
} = useModalTriggerState();
// TODO: On closing modal, focus should be restored to the trigger button
// https://github.com/adobe/react-spectrum/issues/2444
const onAction = useCallback((key) => {
switch (key) {
case "invite":
inviteModalState.open();
break;
case "settings":
settingsModalState.open();
break;
case "feedback":
feedbackModalState.open();
break;
}
});
const onAction = useCallback(
(key) => {
switch (key) {
case "invite":
inviteModalState.open();
break;
case "settings":
settingsModalState.open();
break;
case "feedback":
feedbackModalState.open();
break;
}
},
[feedbackModalState, inviteModalState, settingsModalState]
);
return (
<>
<PopoverMenuTrigger disableOnState>
<TooltipTrigger placement="top">
<TooltipTrigger tooltip={() => "More"} placement="top">
<Button variant="toolbar">
<OverflowIcon />
</Button>
{() => "More"}
</TooltipTrigger>
{(props) => (
<Menu {...props} label="More menu" onAction={onAction}>
{(props: JSX.IntrinsicAttributes) => (
<Menu {...props} label="more menu" onAction={onAction}>
{showInvite && (
<Item key="invite" textValue="Invite people">
<AddUserIcon />

4
src/room/PTTCallView.tsx
View file

@ -38,6 +38,7 @@ import { usePTTSounds } from "../sound/usePttSounds";
import { PTTClips } from "../sound/PTTClips";
import { GroupCallInspector } from "./GroupCallInspector";
import { OverflowMenu } from "./OverflowMenu";
import { Size } from "../Avatar";
function getPromptText(
networkWaiting: boolean,
@ -112,7 +113,7 @@ export const PTTCallView: React.FC<Props> = ({
const { modalState: feedbackModalState, modalProps: feedbackModalProps } =
useModalTriggerState();
const [containerRef, bounds] = useMeasure({ polyfill: ResizeObserver });
const facepileSize = bounds.width < 800 ? "sm" : "md";
const facepileSize = bounds.width < 800 ? Size.SM : Size.MD;
const showControls = bounds.height > 500;
const pttButtonSize = 232;
@ -205,7 +206,6 @@ export const PTTCallView: React.FC<Props> = ({
<OverflowMenu
inCall
roomIdOrAlias={roomIdOrAlias}
client={client}
groupCall={groupCall}
showInvite={false}
feedbackModalState={feedbackModalState}

10
src/room/PTTFeed.jsx → src/room/PTTFeed.tsx
View file

@ -14,12 +14,20 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import { CallFeed } from "matrix-js-sdk/src/webrtc/callFeed";
import React from "react";
import { useCallFeed } from "../video-grid/useCallFeed";
import { useMediaStream } from "../video-grid/useMediaStream";
import styles from "./PTTFeed.module.css";
export function PTTFeed({ callFeed, audioOutputDevice }) {
export function PTTFeed({
callFeed,
audioOutputDevice,
}: {
callFeed: CallFeed;
audioOutputDevice: string;
}) {
const { isLocal, stream } = useCallFeed(callFeed);
const mediaRef = useMediaStream(stream, audioOutputDevice, isLocal);
return <audio ref={mediaRef} className={styles.audioFeed} playsInline />;

21
src/room/RageshakeRequestModal.jsx → src/room/RageshakeRequestModal.tsx
View file

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

9
src/room/RoomAuthView.jsx → src/room/RoomAuthView.tsx
View file

@ -15,11 +15,12 @@ limitations under the License.
*/
import React, { useCallback, useState } from "react";
import { useLocation } from "react-router-dom";
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 { useLocation } from "react-router-dom";
import { FieldRow, InputField, ErrorMessage } from "../input/Input";
import { Form } from "../form/Form";
import { UserMenuContainer } from "../UserMenuContainer";
@ -27,7 +28,7 @@ import { useRegisterPasswordlessUser } from "../auth/useRegisterPasswordlessUser
export function RoomAuthView() {
const [loading, setLoading] = useState(false);
const [error, setError] = useState();
const [error, setError] = useState<Error>();
const { registerPasswordlessUser, recaptchaId, privacyPolicyUrl } =
useRegisterPasswordlessUser();
@ -36,7 +37,9 @@ export function RoomAuthView() {
(e) => {
e.preventDefault();
const data = new FormData(e.target);
const displayName = data.get("displayName");
const dataForDisplayName = data.get("displayName");
const displayName =
typeof dataForDisplayName === "string" ? dataForDisplayName : "";
registerPasswordlessUser(displayName).catch((error) => {
console.error("Failed to register passwordless user", e);

5
src/room/RoomPage.jsx → src/room/RoomPage.tsx
View file

@ -15,6 +15,7 @@ limitations under the License.
*/
import React, { FC, useEffect, useState } from "react";
import { useClient } from "../ClientContext";
import { ErrorView, LoadingView } from "../FullScreenView";
import { RoomAuthView } from "./RoomAuthView";
@ -24,7 +25,7 @@ import { useRoomParams } from "./useRoomParams";
import { MediaHandlerProvider } from "../settings/useMediaHandler";
import { useRegisterPasswordlessUser } from "../auth/useRegisterPasswordlessUser";
export function RoomPage() {
export const RoomPage: FC = () => {
const { loading, isAuthenticated, error, client, isPasswordlessUser } =
useClient();
@ -84,4 +85,4 @@ export function RoomPage() {
</GroupCallLoader>
</MediaHandlerProvider>
);
}
};

1
src/room/RoomRedirect.jsx → src/room/RoomRedirect.tsx
View file

@ -16,6 +16,7 @@ limitations under the License.
import React, { useEffect } from "react";
import { useLocation, useHistory } from "react-router-dom";
import { defaultHomeserverHost } from "../matrix-utils";
import { LoadingView } from "../FullScreenView";

14
src/room/Timer.jsx → src/room/Timer.tsx
View file

@ -16,11 +16,11 @@ limitations under the License.
import React, { useEffect, useState } from "react";
function leftPad(value) {
return value < 10 ? "0" + value : value;
function leftPad(value: number): string {
return value < 10 ? "0" + value : "" + value;
}
function formatTime(msElapsed) {
function formatTime(msElapsed: number): string {
const secondsElapsed = msElapsed / 1000;
const hours = Math.floor(secondsElapsed / 3600);
const minutes = Math.floor(secondsElapsed / 60) - hours * 60;
@ -28,15 +28,15 @@ function formatTime(msElapsed) {
return `${leftPad(hours)}:${leftPad(minutes)}:${leftPad(seconds)}`;
}
export function Timer({ value }) {
const [timestamp, setTimestamp] = useState();
export function Timer({ value }: { value: string }) {
const [timestamp, setTimestamp] = useState<string>();
useEffect(() => {
const startTimeMs = performance.now();
let animationFrame;
let animationFrame: number;
function onUpdate(curTimeMs) {
function onUpdate(curTimeMs: number) {
const msElapsed = curTimeMs - startTimeMs;
setTimestamp(formatTime(msElapsed));
animationFrame = requestAnimationFrame(onUpdate);

25
src/room/VideoPreview.jsx → src/room/VideoPreview.tsx
View file

@ -15,18 +15,31 @@ limitations under the License.
*/
import React from "react";
import useMeasure from "react-use-measure";
import { ResizeObserver } from "@juggle/resize-observer";
import { GroupCallState } from "matrix-js-sdk/src/webrtc/groupCall";
import { MatrixClient } from "matrix-js-sdk/src/client";
import { MicButton, VideoButton } from "../button";
import { useMediaStream } from "../video-grid/useMediaStream";
import { OverflowMenu } from "./OverflowMenu";
import { Avatar } from "../Avatar";
import { useProfile } from "../profile/useProfile";
import useMeasure from "react-use-measure";
import { ResizeObserver } from "@juggle/resize-observer";
import { GroupCallState } from "matrix-js-sdk/src/webrtc/groupCall";
import styles from "./VideoPreview.module.css";
import { Body } from "../typography/Typography";
import { useModalTriggerState } from "../Modal";
interface Props {
client: MatrixClient;
state: GroupCallState;
roomIdOrAlias: string;
microphoneMuted: boolean;
localVideoMuted: boolean;
toggleLocalVideoMuted: () => void;
toggleMicrophoneMuted: () => void;
audioOutput: string;
stream: MediaStream;
}
export function VideoPreview({
client,
state,
@ -37,7 +50,7 @@ export function VideoPreview({
toggleMicrophoneMuted,
audioOutput,
stream,
}) {
}: Props) {
const videoRef = useMediaStream(stream, audioOutput, true);
const { displayName, avatarUrl } = useProfile(client);
const [previewRef, previewBounds] = useMeasure({ polyfill: ResizeObserver });
@ -81,9 +94,11 @@ export function VideoPreview({
/>
<OverflowMenu
roomIdOrAlias={roomIdOrAlias}
client={client}
feedbackModalState={feedbackModalState}
feedbackModalProps={feedbackModalProps}
inCall={false}
groupCall={undefined}
showInvite={false}
/>
</div>
</>

4
src/room/useGroupCall.ts
View file

@ -29,7 +29,7 @@ import { RoomMember } from "matrix-js-sdk/src/models/room-member";
import { usePageUnload } from "./usePageUnload";
export interface UseGroupCallType {
export interface UseGroupCallReturnType {
state: GroupCallState;
calls: MatrixCall[];
localCallFeed: CallFeed;
@ -72,7 +72,7 @@ interface State {
hasLocalParticipant: boolean;
}
export function useGroupCall(groupCall: GroupCall): UseGroupCallType {
export function useGroupCall(groupCall: GroupCall): UseGroupCallReturnType {
const [
{
state,

6
src/room/usePageUnload.js → src/room/usePageUnload.ts
View file

@ -32,11 +32,11 @@ function isIOS() {
);
}
export function usePageUnload(callback) {
export function usePageUnload(callback: () => void) {
useEffect(() => {
let pageVisibilityTimeout;
let pageVisibilityTimeout: number;
function onBeforeUnload(event) {
function onBeforeUnload(event: PageTransitionEvent) {
if (event.type === "visibilitychange") {
if (document.visibilityState === "visible") {
clearTimeout(pageVisibilityTimeout);

16
src/room/useSentryGroupCallHandler.js → src/room/useSentryGroupCallHandler.ts
View file

@ -16,28 +16,30 @@ limitations under the License.
import { useEffect } from "react";
import * as Sentry from "@sentry/react";
import { GroupCall, GroupCallEvent } from "matrix-js-sdk/src/webrtc/groupCall";
import { CallEvent, MatrixCall } from "matrix-js-sdk/src/webrtc/call";
export function useSentryGroupCallHandler(groupCall) {
export function useSentryGroupCallHandler(groupCall: GroupCall) {
useEffect(() => {
function onHangup(call) {
function onHangup(call: MatrixCall) {
if (call.hangupReason === "ice_failed") {
Sentry.captureException(new Error("Call hangup due to ICE failure."));
}
}
function onError(error) {
function onError(error: Error) {
Sentry.captureException(error);
}
if (groupCall) {
groupCall.on("hangup", onHangup);
groupCall.on("error", onError);
groupCall.on(CallEvent.Hangup, onHangup);
groupCall.on(GroupCallEvent.Error, onError);
}
return () => {
if (groupCall) {
groupCall.removeListener("hangup", onHangup);
groupCall.removeListener("error", onError);
groupCall.removeListener(CallEvent.Hangup, onHangup);
groupCall.removeListener(GroupCallEvent.Error, onError);
}
};
}, [groupCall]);

5
src/settings/SettingsModal.tsx
View file

@ -32,9 +32,8 @@ import { useDownloadDebugLog } from "./submit-rageshake";
import { Body } from "../typography/Typography";
interface Props {
setShowInspector: boolean;
showInspector: boolean;
[rest: string]: unknown;
isOpen: boolean;
onClose: () => void;
}
export const SettingsModal = (props: Props) => {

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

@ -26,11 +26,11 @@ import { InspectorContext } from "../room/GroupCallInspector";
import { useModalTriggerState } from "../Modal";
interface RageShakeSubmitOptions {
description: string;
roomId: string;
label: string;
sendLogs: boolean;
rageshakeRequestId: string;
rageshakeRequestId?: string;
description?: string;
roomId?: string;
label?: string;
}
export function useSubmitRageshake(): {
@ -40,7 +40,7 @@ export function useSubmitRageshake(): {
error: Error;
} {
const client: MatrixClient = useClient().client;
const [{ json }] = useContext(InspectorContext);
const json = useContext(InspectorContext);
const [{ sending, sent, error }, setState] = useState({
sending: false,
@ -274,7 +274,7 @@ export function useSubmitRageshake(): {
}
export function useDownloadDebugLog(): () => void {
const [{ json }] = useContext(InspectorContext);
const json = useContext(InspectorContext);
const downloadDebugLog = useCallback(() => {
const blob = new Blob([JSON.stringify(json)], { type: "application/json" });

3
src/settings/useMediaHandler.tsx
View file

@ -24,6 +24,7 @@ import React, {
useMemo,
useContext,
createContext,
ReactNode,
} from "react";
export interface MediaHandlerContextInterface {
@ -73,7 +74,7 @@ function updateMediaPreferences(newPreferences: MediaPreferences): void {
}
interface Props {
client: MatrixClient;
children: JSX.Element[];
children: ReactNode;
}
export function MediaHandlerProvider({ client, children }: Props): JSX.Element {
const [

4
src/useLocationNavigation.js → src/useLocationNavigation.ts
View file

@ -1,7 +1,7 @@
import { useEffect } from "react";
import { useHistory } from "react-router-dom";
export function useLocationNavigation(enabled = false) {
export function useLocationNavigation(enabled = false): void {
const history = useHistory();
useEffect(() => {
@ -12,7 +12,7 @@ export function useLocationNavigation(enabled = false) {
const url = new URL(tx.pathname, window.location.href);
url.search = tx.search;
url.hash = tx.hash;
window.location = url.href;
window.location.href = url.href;
});
}

3
src/usePageFocusStyle.js → src/usePageFocusStyle.ts
View file

@ -1,8 +1,9 @@
import { useEffect } from "react";
import { useFocusVisible } from "@react-aria/interactions";
import styles from "./usePageFocusStyle.module.css";
export function usePageFocusStyle() {
export function usePageFocusStyle(): void {
const { isFocusVisible } = useFocusVisible();
useEffect(() => {

9
src/usePageTitle.js
View file

@ -1,9 +0,0 @@
import { useEffect } from "react";
export function usePageTitle(title) {
useEffect(() => {
const productName =
import.meta.env.VITE_PRODUCT_NAME || "Matrix Video Chat";
document.title = title ? `${productName} | ${title}` : productName;
}, [title]);
}

20
src/form/Form.jsx → src/usePageTitle.ts
View file

@ -1,5 +1,5 @@
/*
Copyright 2022 Matrix.org Foundation C.I.C.
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.
@ -14,14 +14,12 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import classNames from "classnames";
import React, { forwardRef } from "react";
import styles from "./Form.module.css";
import { useEffect } from "react";
export const Form = forwardRef(({ children, className, ...rest }, ref) => {
return (
<form {...rest} className={classNames(styles.form, className)} ref={ref}>
{children}
</form>
);
});
export function usePageTitle(title: string): void {
useEffect(() => {
const productName =
import.meta.env.VITE_PRODUCT_NAME || "Matrix Video Chat";
document.title = title ? `${productName} | ${title}` : productName;
}, [title]);
}

18
src/video-grid/VideoTile.jsx
View file

@ -20,7 +20,7 @@ import classNames from "classnames";
import styles from "./VideoTile.module.css";
import { ReactComponent as MicMutedIcon } from "../icons/MicMuted.svg";
import { ReactComponent as VideoMutedIcon } from "../icons/VideoMuted.svg";
import { OptionsButton } from "../button/Button";
import { AudioButton } from "../button/Button";
export const VideoTile = forwardRef(
(
@ -38,6 +38,7 @@ export const VideoTile = forwardRef(
mediaRef,
onOptionsPress,
showOptions,
localVolume,
...rest
},
ref
@ -53,6 +54,15 @@ export const VideoTile = forwardRef(
ref={ref}
{...rest}
>
{showOptions && (
<div className={classNames(styles.toolbar)}>
<AudioButton
className={styles.button}
volume={localVolume}
onPress={onOptionsPress}
/>
</div>
)}
{(videoMuted || noVideo) && (
<>
<div className={styles.videoMutedOverlay} />
@ -72,11 +82,7 @@ export const VideoTile = forwardRef(
</div>
)
)}
{showOptions && (
<div className={classNames(styles.infoBubble, styles.optionsButton)}>
<OptionsButton onPress={onOptionsPress} />
</div>
)}
<video ref={mediaRef} playsInline disablePictureInPicture />
</animated.div>
);

42
src/video-grid/VideoTile.module.css
View file

@ -48,8 +48,8 @@
position: absolute;
height: 24px;
padding: 0 8px;
color: white;
background-color: rgba(23, 25, 28, 0.85);
color: var(--primary-content);
background-color: var(--background-85);
display: flex;
align-items: center;
justify-content: center;
@ -60,14 +60,40 @@
z-index: 1;
}
.optionsButton {
right: 16px;
top: 16px;
.toolbar {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 42px;
color: var(--primary-content);
background-color: var(--background-85);
display: flex;
align-items: center;
justify-content: flex-end;
overflow: hidden;
z-index: 1;
}
.optionsButton button svg {
height: 20px;
width: 20px;
.videoTile:not(.isLocal):not(:hover) .toolbar {
display: none;
}
.videoTile:not(.isLocal):hover .presenterLabel {
top: calc(42px + 20px); /* toolbar + margin */
}
.button {
margin-right: 16px;
}
.button svg {
width: 16px;
height: 16px;
}
.memberName {

1
src/video-grid/VideoTileContainer.jsx
View file

@ -82,6 +82,7 @@ export function VideoTileContainer({
avatar={getAvatar && getAvatar(member, width, height)}
onOptionsPress={onOptionsPress}
showOptions={!item.callFeed.isLocal()}
localVolume={localVolume}
{...rest}
/>
{videoTileSettingsModalState.isOpen && (

11
src/video-grid/VideoTileSettingsModal.module.css
View file

@ -1,5 +1,16 @@
.videoTileSettingsModal {
width: 700px;
height: 316px;
display: flex;
}
.content {
position: relative;
margin: 27px 34px;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
}
.localVolumePercentage {

15
src/video-grid/VideoTileSettingsModal.tsx
View file

@ -17,10 +17,10 @@ limitations under the License.
import React, { ChangeEvent, useState } from "react";
import { CallFeed } from "matrix-js-sdk/src/webrtc/callFeed";
import selectInputStyles from "../input/SelectInput.module.css";
import { FieldRow } from "../input/Input";
import { Modal } from "../Modal";
import styles from "./VideoTileSettingsModal.module.css";
import { VolumeIcon } from "../button/VolumeIcon";
interface LocalVolumeProps {
feed: CallFeed;
@ -39,11 +39,8 @@ const LocalVolume: React.FC<LocalVolumeProps> = ({
return (
<>
<h4 className={selectInputStyles.label}> Local Volume </h4>
<FieldRow>
<span className={styles.localVolumePercentage}>
{`${Math.round(localVolume * 100)}%`}
</span>
<VolumeIcon volume={localVolume} />
<input
className={styles.localVolumeSlider}
type="range"
@ -65,7 +62,13 @@ interface Props {
export const VideoTileSettingsModal = ({ feed, ...rest }: Props) => {
return (
<Modal title="Feed settings" isDismissable mobileFullScreen {...rest}>
<Modal
className={styles.videoTileSettingsModal}
title="Local volume"
isDismissable
mobileFullScreen
{...rest}
>
<div className={styles.content}>
<LocalVolume feed={feed} />
</div>

4
src/video-grid/useMediaStream.ts
View file

@ -34,7 +34,7 @@ export const useMediaStream = (
stream: MediaStream,
audioOutputDevice: string,
mute = false,
localVolume: number
localVolume?: number
): RefObject<MediaElement> => {
const mediaRef = useRef<MediaElement>();
@ -196,7 +196,7 @@ export const useSpatialMediaStream = (
audioContext: AudioContext,
audioDestination: AudioNode,
mute = false,
localVolume: number
localVolume?: number
): [RefObject<Element>, RefObject<MediaElement>] => {
const tileRef = useRef<Element>();
const [spatialAudio] = useSpatialAudio();

11
tsconfig.json
View file

@ -8,14 +8,7 @@
"noImplicitAny": false,
"noUnusedLocals": true,
"jsx": "preserve",
"lib": [
"es2020",
"dom",
"dom.iterable"
],
"lib": ["es2020", "dom", "dom.iterable"]
},
"include": [
"./src/**/*.ts",
"./src/**/*.tsx",
],
"include": ["./src/**/*.ts", "./src/**/*.tsx"]
}

10
yarn.lock
View file

@ -8397,7 +8397,6 @@ matrix-events-sdk@^0.0.1-beta.7:
resolved "https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/8ba2d257ae24bbed61cd7fe99af081324337161c"
dependencies:
"@babel/runtime" "^7.12.5"
"@types/sdp-transform" "^2.4.5"
another-json "^0.2.0"
browser-request "^0.3.3"
bs58 "^4.0.1"
@ -8407,13 +8406,12 @@ matrix-events-sdk@^0.0.1-beta.7:
p-retry "^4.5.0"
qs "^6.9.6"
request "^2.88.2"
sdp-transform "^2.14.1"
unhomoglyph "^1.0.6"
matrix-widget-api@^0.1.0-beta.18:
version "0.1.0-beta.18"
resolved "https://registry.yarnpkg.com/matrix-widget-api/-/matrix-widget-api-0.1.0-beta.18.tgz#4efd30edec3eeb4211285985464c062fcab59795"
integrity sha512-kCpcs6rrB94Mmr2/1gBJ+6auWyZ5UvOMOn5K2VFafz2/NDMzZg9OVWj9KFYnNAuwwBE5/tCztYEj6OQ+hgbwOQ==
matrix-widget-api@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/matrix-widget-api/-/matrix-widget-api-1.0.0.tgz#0cde6839cca66ad817ab12aca3490ccc8bac97d1"
integrity sha512-cy8p/8EteRPTFIAw7Q9EgPUJc2jD19ZahMR8bMKf2NkILDcjuPMC0UWnsJyB3fSnlGw+VbGepttRpULM31zX8Q==
dependencies:
"@types/events" "^3.0.0"
events "^3.2.0"