Merge remote-tracking branch 'origin/livekit' into dbkr/openid

This commit is contained in:
David Baker 2023-07-03 17:03:58 +01:00
commit 4524b418ff
70 changed files with 609 additions and 323 deletions

1
.gitignore vendored
View file

@ -7,3 +7,4 @@ dist-ssr
.idea/ .idea/
public/config.json public/config.json
/coverage /coverage
yarn-error.log

View file

@ -1,4 +1,3 @@
import React from "react";
import { addDecorator } from "@storybook/react"; import { addDecorator } from "@storybook/react";
import { MemoryRouter } from "react-router-dom"; import { MemoryRouter } from "react-router-dom";
import { usePageFocusStyle } from "../src/usePageFocusStyle"; import { usePageFocusStyle } from "../src/usePageFocusStyle";

View file

@ -8,7 +8,12 @@ module.exports = {
}, },
}, },
], ],
"@babel/preset-react", [
"@babel/preset-react",
{
runtime: "automatic",
},
],
"@babel/preset-typescript", "@babel/preset-typescript",
], ],
plugins: ["babel-plugin-transform-vite-meta-env"], plugins: ["babel-plugin-transform-vite-meta-env"],

View file

@ -48,6 +48,7 @@
"@types/grecaptcha": "^3.0.4", "@types/grecaptcha": "^3.0.4",
"@types/sdp-transform": "^2.4.5", "@types/sdp-transform": "^2.4.5",
"@use-gesture/react": "^10.2.11", "@use-gesture/react": "^10.2.11",
"@vitejs/plugin-react": "^4.0.1",
"classnames": "^2.3.1", "classnames": "^2.3.1",
"color-hash": "^2.0.1", "color-hash": "^2.0.1",
"events": "^3.3.0", "events": "^3.3.0",
@ -105,9 +106,9 @@
"storybook-builder-vite": "^0.1.12", "storybook-builder-vite": "^0.1.12",
"typescript": "^4.9.5", "typescript": "^4.9.5",
"typescript-strict-plugin": "^2.0.1", "typescript-strict-plugin": "^2.0.1",
"vite": "^2.4.2", "vite": "^4.2.0",
"vite-plugin-html-template": "^1.1.0", "vite-plugin-html-template": "^1.1.0",
"vite-plugin-svgr": "^0.4.0" "vite-plugin-svgr": "^3.2.0"
}, },
"jest": { "jest": {
"testEnvironment": "jsdom", "testEnvironment": "jsdom",
@ -119,7 +120,8 @@
"/node_modules/(?!internmap)+$" "/node_modules/(?!internmap)+$"
], ],
"moduleNameMapper": { "moduleNameMapper": {
"\\.(css|less|svg)+$": "identity-obj-proxy", "\\.css$": "identity-obj-proxy",
"\\.svg$": "<rootDir>/test/mocks/svgr.ts",
"^\\./IndexedDBWorker\\?worker$": "<rootDir>/test/mocks/workerMock.ts", "^\\./IndexedDBWorker\\?worker$": "<rootDir>/test/mocks/workerMock.ts",
"^\\./olm$": "<rootDir>/test/mocks/olmMock.ts" "^\\./olm$": "<rootDir>/test/mocks/olmMock.ts"
}, },

View file

@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
import React, { Suspense, useEffect, useState } from "react"; import { Suspense, useEffect, useState } from "react";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom"; import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import * as Sentry from "@sentry/react"; import * as Sentry from "@sentry/react";
import { OverlayProvider } from "@react-aria/overlays"; import { OverlayProvider } from "@react-aria/overlays";

View file

@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
import React, { useMemo, CSSProperties } from "react"; import { useMemo, CSSProperties, HTMLAttributes, FC } from "react";
import classNames from "classnames"; import classNames from "classnames";
import { MatrixClient } from "matrix-js-sdk/src/client"; import { MatrixClient } from "matrix-js-sdk/src/client";
@ -62,7 +62,7 @@ function hashStringToArrIndex(str: string, arrLength: number) {
const resolveAvatarSrc = (client: MatrixClient, src: string, size: number) => const resolveAvatarSrc = (client: MatrixClient, src: string, size: number) =>
src?.startsWith("mxc://") ? client && getAvatarUrl(client, src, size) : src; src?.startsWith("mxc://") ? client && getAvatarUrl(client, src, size) : src;
interface Props extends React.HTMLAttributes<HTMLDivElement> { interface Props extends HTMLAttributes<HTMLDivElement> {
bgKey?: string; bgKey?: string;
src?: string; src?: string;
size?: Size | number; size?: Size | number;
@ -71,7 +71,7 @@ interface Props extends React.HTMLAttributes<HTMLDivElement> {
fallback: string; fallback: string;
} }
export const Avatar: React.FC<Props> = ({ export const Avatar: FC<Props> = ({
bgKey, bgKey,
src, src,
fallback, fallback,

View file

@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
import React, { import {
FC, FC,
useCallback, useCallback,
useEffect, useEffect,

View file

@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
import React, { HTMLAttributes, useMemo } from "react"; import { HTMLAttributes, useMemo } from "react";
import classNames from "classnames"; import classNames from "classnames";
import { MatrixClient } from "matrix-js-sdk/src/client"; import { MatrixClient } from "matrix-js-sdk/src/client";
import { RoomMember } from "matrix-js-sdk/src/models/room-member"; import { RoomMember } from "matrix-js-sdk/src/models/room-member";

View file

@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
import React, { ReactNode, useCallback, useEffect } from "react"; import { ReactNode, useCallback, useEffect } from "react";
import { useLocation } from "react-router-dom"; import { useLocation } from "react-router-dom";
import classNames from "classnames"; import classNames from "classnames";
import { Trans, useTranslation } from "react-i18next"; import { Trans, useTranslation } from "react-i18next";

View file

@ -1,4 +1,3 @@
import React from "react";
import { GridLayoutMenu } from "./room/GridLayoutMenu"; import { GridLayoutMenu } from "./room/GridLayoutMenu";
import { import {
Header, Header,

View file

@ -15,7 +15,7 @@ limitations under the License.
*/ */
import classNames from "classnames"; import classNames from "classnames";
import React, { HTMLAttributes, ReactNode, useCallback } from "react"; import { HTMLAttributes, ReactNode, useCallback } from "react";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import { Room } from "matrix-js-sdk/src/models/room"; import { Room } from "matrix-js-sdk/src/models/room";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";

View file

@ -15,7 +15,7 @@ limitations under the License.
*/ */
import { Room } from "matrix-js-sdk/src/models/room"; import { Room } from "matrix-js-sdk/src/models/room";
import React, { useMemo } from "react"; import { FC, useMemo } from "react";
import { Trans, useTranslation } from "react-i18next"; import { Trans, useTranslation } from "react-i18next";
import { Modal, ModalContent } from "./Modal"; import { Modal, ModalContent } from "./Modal";
@ -27,7 +27,7 @@ interface Props {
onClose: () => void; onClose: () => void;
} }
export const IncompatibleVersionModal: React.FC<Props> = ({ export const IncompatibleVersionModal: FC<Props> = ({
userIds, userIds,
room, room,
onClose, onClose,

View file

@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
import React, { useCallback, useRef } from "react"; import { MutableRefObject, PointerEvent, useCallback, useRef } from "react";
import { useListBox, useOption, AriaListBoxOptions } from "@react-aria/listbox"; import { useListBox, useOption, AriaListBoxOptions } from "@react-aria/listbox";
import { ListState } from "@react-stately/list"; import { ListState } from "@react-stately/list";
import { Node } from "@react-types/shared"; import { Node } from "@react-types/shared";
@ -26,7 +26,7 @@ interface ListBoxProps<T> extends AriaListBoxOptions<T> {
optionClassName: string; optionClassName: string;
state: ListState<T>; state: ListState<T>;
className?: string; className?: string;
listBoxRef?: React.MutableRefObject<HTMLUListElement>; listBoxRef?: MutableRefObject<HTMLUListElement>;
} }
export function ListBox<T>({ export function ListBox<T>({
@ -84,7 +84,7 @@ function Option<T>({ item, state, className }: OptionProps<T>) {
delete optionProps.onPointerUp; delete optionProps.onPointerUp;
optionProps.onClick = useCallback( optionProps.onClick = useCallback(
(e) => { (e) => {
origPointerUp(e as unknown as React.PointerEvent<HTMLElement>); origPointerUp(e as unknown as PointerEvent<HTMLElement>);
}, },
[origPointerUp] [origPointerUp]
); );

View file

@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
import React, { Key, useRef, useState } from "react"; import { Key, useRef, useState } from "react";
import { AriaMenuOptions, useMenu, useMenuItem } from "@react-aria/menu"; import { AriaMenuOptions, useMenu, useMenuItem } from "@react-aria/menu";
import { TreeState, useTreeState } from "@react-stately/tree"; import { TreeState, useTreeState } from "@react-stately/tree";
import { mergeProps } from "@react-aria/utils"; import { mergeProps } from "@react-aria/utils";

View file

@ -16,7 +16,7 @@ limitations under the License.
/* eslint-disable jsx-a11y/no-autofocus */ /* eslint-disable jsx-a11y/no-autofocus */
import React, { useRef, useMemo, ReactNode } from "react"; import { useRef, useMemo, ReactNode } from "react";
import { import {
useOverlay, useOverlay,
usePreventScroll, usePreventScroll,

View file

@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
import React, { useCallback, useState } from "react"; import { useCallback, useState } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { import {

View file

@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
import React, { import {
ForwardedRef, ForwardedRef,
forwardRef, forwardRef,
ReactElement, ReactElement,

View file

@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
import React, { useCallback, useMemo } from "react"; import { useCallback, useMemo } from "react";
import { Item } from "@react-stately/collections"; import { Item } from "@react-stately/collections";
import { useLocation } from "react-router-dom"; import { useLocation } from "react-router-dom";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";

View file

@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
import React, { useCallback, useState } from "react"; import { useCallback, useState } from "react";
import { useHistory, useLocation } from "react-router-dom"; import { useHistory, useLocation } from "react-router-dom";
import { useClient } from "./ClientContext"; import { useClient } from "./ClientContext";

View file

@ -1,4 +1,4 @@
import React, { FC } from "react"; import { FC } from "react";
import { Trans } from "react-i18next"; import { Trans } from "react-i18next";
import { Link } from "../typography/Typography"; import { Link } from "../typography/Typography";

View file

@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
import React, { FC, FormEvent, useCallback, useRef, useState } from "react"; import { FC, FormEvent, useCallback, useRef, useState } from "react";
import { useHistory, useLocation, Link } from "react-router-dom"; import { useHistory, useLocation, Link } from "react-router-dom";
import { Trans, useTranslation } from "react-i18next"; import { Trans, useTranslation } from "react-i18next";

View file

@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
import React, { import {
ChangeEvent, ChangeEvent,
FC, FC,
FormEvent, FormEvent,

View file

@ -13,7 +13,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
import React, { forwardRef, useCallback } from "react"; import { forwardRef, useCallback } from "react";
import { PressEvent } from "@react-types/shared"; import { PressEvent } from "@react-types/shared";
import classNames from "classnames"; import classNames from "classnames";
import { useButton } from "@react-aria/button"; import { useButton } from "@react-aria/button";

View file

@ -14,7 +14,6 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
import React from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import useClipboard from "react-use-clipboard"; import useClipboard from "react-use-clipboard";

View file

@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
import React, { HTMLAttributes } from "react"; import { HTMLAttributes } from "react";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import classNames from "classnames"; import classNames from "classnames";
import * as H from "history"; import * as H from "history";

View file

@ -15,8 +15,6 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
import React from "react";
import { ReactComponent as AudioMuted } from "../icons/AudioMuted.svg"; import { ReactComponent as AudioMuted } from "../icons/AudioMuted.svg";
import { ReactComponent as AudioLow } from "../icons/AudioLow.svg"; import { ReactComponent as AudioLow } from "../icons/AudioLow.svg";
import { ReactComponent as Audio } from "../icons/Audio.svg"; import { ReactComponent as Audio } from "../icons/Audio.svg";

View file

@ -15,7 +15,7 @@ limitations under the License.
*/ */
import classNames from "classnames"; import classNames from "classnames";
import React, { FormEventHandler, forwardRef, ReactNode } from "react"; import { FormEventHandler, forwardRef, ReactNode } from "react";
import styles from "./Form.module.css"; import styles from "./Form.module.css";

View file

@ -14,7 +14,6 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
import React from "react";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import { MatrixClient } from "matrix-js-sdk/src/client"; import { MatrixClient } from "matrix-js-sdk/src/client";
import { RoomMember } from "matrix-js-sdk/src/models/room-member"; import { RoomMember } from "matrix-js-sdk/src/models/room-member";

View file

@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
import React, { FC } from "react"; import { FC } from "react";
import { Item } from "@react-stately/collections"; import { Item } from "@react-stately/collections";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";

View file

@ -14,7 +14,6 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
import React from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { useClient } from "../ClientContext"; import { useClient } from "../ClientContext";

View file

@ -14,7 +14,6 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
import React from "react";
import { PressEvent } from "@react-types/shared"; import { PressEvent } from "@react-types/shared";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";

View file

@ -14,12 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
import React, { import { useState, useCallback, FormEvent, FormEventHandler } from "react";
useState,
useCallback,
FormEvent,
FormEventHandler,
} from "react";
import { useHistory } from "react-router-dom"; import { useHistory } from "react-router-dom";
import { MatrixClient } from "matrix-js-sdk/src/client"; import { MatrixClient } from "matrix-js-sdk/src/client";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";

View file

@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
import React, { FC, useCallback, useState, FormEventHandler } from "react"; import { FC, useCallback, useState, FormEventHandler } from "react";
import { useHistory } from "react-router-dom"; import { useHistory } from "react-router-dom";
import { randomString } from "matrix-js-sdk/src/randomstring"; import { randomString } from "matrix-js-sdk/src/randomstring";
import { Trans, useTranslation } from "react-i18next"; import { Trans, useTranslation } from "react-i18next";

View file

@ -15,7 +15,7 @@ limitations under the License.
*/ */
import { useObjectRef } from "@react-aria/utils"; import { useObjectRef } from "@react-aria/utils";
import React, { AllHTMLAttributes, useEffect } from "react"; import { AllHTMLAttributes, ChangeEvent, useEffect } from "react";
import { useCallback } from "react"; import { useCallback } from "react";
import { useState } from "react"; import { useState } from "react";
import { forwardRef } from "react"; import { forwardRef } from "react";
@ -51,7 +51,7 @@ export const AvatarInputField = forwardRef<HTMLInputElement, Props>(
const currentInput = fileInputRef.current; const currentInput = fileInputRef.current;
const onChange = (e: Event) => { const onChange = (e: Event) => {
const inputEvent = e as unknown as React.ChangeEvent<HTMLInputElement>; const inputEvent = e as unknown as ChangeEvent<HTMLInputElement>;
if (inputEvent.target.files.length > 0) { if (inputEvent.target.files.length > 0) {
setObjUrl(URL.createObjectURL(inputEvent.target.files[0])); setObjUrl(URL.createObjectURL(inputEvent.target.files[0]));
setRemoved(false); setRemoved(false);

View file

@ -14,7 +14,14 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
import React, { ChangeEvent, FC, forwardRef, ReactNode, useId } from "react"; import {
ChangeEvent,
FC,
ForwardedRef,
forwardRef,
ReactNode,
useId,
} from "react";
import classNames from "classnames"; import classNames from "classnames";
import styles from "./Input.module.css"; import styles from "./Input.module.css";
@ -114,7 +121,7 @@ export const InputField = forwardRef<
{type === "textarea" ? ( {type === "textarea" ? (
<textarea <textarea
id={id} id={id}
ref={ref as React.ForwardedRef<HTMLTextAreaElement>} ref={ref as ForwardedRef<HTMLTextAreaElement>}
disabled={disabled} disabled={disabled}
aria-describedby={descriptionId} aria-describedby={descriptionId}
{...rest} {...rest}
@ -122,7 +129,7 @@ export const InputField = forwardRef<
) : ( ) : (
<input <input
id={id} id={id}
ref={ref as React.ForwardedRef<HTMLInputElement>} ref={ref as ForwardedRef<HTMLInputElement>}
type={type} type={type}
checked={checked} checked={checked}
disabled={disabled} disabled={disabled}

View file

@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
import React, { useRef } from "react"; import { useRef } from "react";
import { AriaSelectOptions, HiddenSelect, useSelect } from "@react-aria/select"; import { AriaSelectOptions, HiddenSelect, useSelect } from "@react-aria/select";
import { useButton } from "@react-aria/button"; import { useButton } from "@react-aria/button";
import { useSelectState } from "@react-stately/select"; import { useSelectState } from "@react-stately/select";

View file

@ -13,7 +13,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
import React, { useState } from "react"; import { useState } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import styles from "./StarRatingInput.module.css"; import styles from "./StarRatingInput.module.css";

View file

@ -1,6 +1,7 @@
import { Room, RoomOptions } from "livekit-client"; import { Room, RoomOptions } from "livekit-client";
import { useLiveKitRoom } from "@livekit/components-react"; import { useLiveKitRoom } from "@livekit/components-react";
import React from "react"; import React from "react";
import { useMemo } from "react";
import { defaultLiveKitOptions } from "./options"; import { defaultLiveKitOptions } from "./options";
import { SFUConfig } from "./openIDSFU"; import { SFUConfig } from "./openIDSFU";
@ -19,7 +20,7 @@ export function useLiveKit(
userChoices: UserChoices, userChoices: UserChoices,
sfuConfig: SFUConfig sfuConfig: SFUConfig
): Room | undefined { ): Room | undefined {
const roomOptions = React.useMemo((): RoomOptions => { const roomOptions = useMemo((): RoomOptions => {
const options = defaultLiveKitOptions; const options = defaultLiveKitOptions;
options.videoCaptureDefaults = { options.videoCaptureDefaults = {
...options.videoCaptureDefaults, ...options.videoCaptureDefaults,

View file

@ -20,7 +20,7 @@ limitations under the License.
// dependency references. // dependency references.
import "matrix-js-sdk/src/browser-index"; import "matrix-js-sdk/src/browser-index";
import React, { StrictMode } from "react"; import { StrictMode } from "react";
import { createRoot } from "react-dom/client"; import { createRoot } from "react-dom/client";
import { createBrowserHistory } from "history"; import { createBrowserHistory } from "history";

View file

@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
import React, { forwardRef, HTMLAttributes } from "react"; import { forwardRef, HTMLAttributes } from "react";
import { DismissButton, useOverlay } from "@react-aria/overlays"; import { DismissButton, useOverlay } from "@react-aria/overlays";
import { FocusScope } from "@react-aria/focus"; import { FocusScope } from "@react-aria/focus";
import classNames from "classnames"; import classNames from "classnames";

View file

@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
import React, { forwardRef, useRef } from "react"; import { forwardRef, useRef } from "react";
import { useMenuTriggerState } from "@react-stately/menu"; import { useMenuTriggerState } from "@react-stately/menu";
import { useMenuTrigger } from "@react-aria/menu"; import { useMenuTrigger } from "@react-aria/menu";
import { OverlayContainer, useOverlayPosition } from "@react-aria/overlays"; import { OverlayContainer, useOverlayPosition } from "@react-aria/overlays";

View file

@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
import React, { FormEventHandler, useCallback, useState } from "react"; import { FormEventHandler, useCallback, useState } from "react";
import { MatrixClient } from "matrix-js-sdk/src/client"; import { MatrixClient } from "matrix-js-sdk/src/client";
import { Trans, useTranslation } from "react-i18next"; import { Trans, useTranslation } from "react-i18next";
import { useHistory } from "react-router-dom"; import { useHistory } from "react-router-dom";

View file

@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
import React, { useCallback } from "react"; import { useCallback } from "react";
import { Item } from "@react-stately/collections"; import { Item } from "@react-stately/collections";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";

View file

@ -16,13 +16,16 @@ limitations under the License.
import * as Sentry from "@sentry/react"; import * as Sentry from "@sentry/react";
import { Resizable } from "re-resizable"; import { Resizable } from "re-resizable";
import React, { import {
useEffect, useEffect,
useState, useState,
useReducer, useReducer,
useRef, useRef,
createContext, createContext,
useContext, useContext,
Dispatch,
SetStateAction,
ReactNode,
} from "react"; } from "react";
import ReactJson, { CollapsedFieldProps } from "react-json-view"; import ReactJson, { CollapsedFieldProps } from "react-json-view";
import mermaid from "mermaid"; import mermaid from "mermaid";
@ -136,16 +139,13 @@ function lineForEvent(event: SequenceDiagramMatrixEvent): string {
export const InspectorContext = export const InspectorContext =
createContext< createContext<
[ [InspectorContextState, Dispatch<SetStateAction<InspectorContextState>>]
InspectorContextState,
React.Dispatch<React.SetStateAction<InspectorContextState>>
]
>(undefined); >(undefined);
export function InspectorContextProvider({ export function InspectorContextProvider({
children, children,
}: { }: {
children: React.ReactNode; children: ReactNode;
}) { }) {
// We take the tuple of [currentState, setter] and stick // We take the tuple of [currentState, setter] and stick
// it straight into the context for other things to call // it straight into the context for other things to call

View file

@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
import React, { ReactNode } from "react"; import { ReactNode } from "react";
import { MatrixClient } from "matrix-js-sdk/src/client"; import { MatrixClient } from "matrix-js-sdk/src/client";
import { GroupCall } from "matrix-js-sdk/src/webrtc/groupCall"; import { GroupCall } from "matrix-js-sdk/src/webrtc/groupCall";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";

View file

@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
import React, { useCallback, useEffect, useState } from "react"; import { useCallback, useEffect, useState } from "react";
import { useHistory } from "react-router-dom"; import { useHistory } from "react-router-dom";
import { GroupCall, GroupCallState } from "matrix-js-sdk/src/webrtc/groupCall"; import { GroupCall, GroupCallState } from "matrix-js-sdk/src/webrtc/groupCall";
import { MatrixClient } from "matrix-js-sdk/src/client"; import { MatrixClient } from "matrix-js-sdk/src/client";

View file

@ -28,7 +28,7 @@ import { Room, Track } from "livekit-client";
import { MatrixClient } from "matrix-js-sdk/src/client"; import { MatrixClient } from "matrix-js-sdk/src/client";
import { RoomMember } from "matrix-js-sdk/src/models/room-member"; import { RoomMember } from "matrix-js-sdk/src/models/room-member";
import { GroupCall } from "matrix-js-sdk/src/webrtc/groupCall"; import { GroupCall } from "matrix-js-sdk/src/webrtc/groupCall";
import React, { Ref, useCallback, useEffect, useMemo, useRef } from "react"; import { Ref, useCallback, useEffect, useMemo, useRef } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import useMeasure from "react-use-measure"; import useMeasure from "react-use-measure";
import { OverlayTriggerState } from "@react-stately/overlays"; import { OverlayTriggerState } from "@react-stately/overlays";
@ -51,9 +51,9 @@ import {
VersionMismatchWarning, VersionMismatchWarning,
} from "../Header"; } from "../Header";
import { import {
VideoGrid,
useVideoGridLayout, useVideoGridLayout,
TileDescriptor, TileDescriptor,
VideoGrid,
} from "../video-grid/VideoGrid"; } from "../video-grid/VideoGrid";
import { import {
useShowInspector, useShowInspector,

View file

@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
import React, { FC } from "react"; import { FC } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { Modal, ModalContent, ModalProps } from "../Modal"; import { Modal, ModalContent, ModalProps } from "../Modal";

View file

@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
import React from "react"; import { useRef, useEffect, useState } from "react";
import { Trans, useTranslation } from "react-i18next"; import { Trans, useTranslation } from "react-i18next";
import styles from "./LobbyView.module.css"; import styles from "./LobbyView.module.css";
@ -39,14 +39,14 @@ export function LobbyView(props: Props) {
const { t } = useTranslation(); const { t } = useTranslation();
useLocationNavigation(); useLocationNavigation();
const joinCallButtonRef = React.useRef<HTMLButtonElement>(); const joinCallButtonRef = useRef<HTMLButtonElement>();
React.useEffect(() => { useEffect(() => {
if (joinCallButtonRef.current) { if (joinCallButtonRef.current) {
joinCallButtonRef.current.focus(); joinCallButtonRef.current.focus();
} }
}, [joinCallButtonRef]); }, [joinCallButtonRef]);
const [userChoices, setUserChoices] = React.useState<UserChoices | undefined>( const [userChoices, setUserChoices] = useState<UserChoices | undefined>(
undefined undefined
); );

View file

@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
import React, { FC, useEffect } from "react"; import { FC, useEffect } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { Modal, ModalContent, ModalProps } from "../Modal"; import { Modal, ModalContent, ModalProps } from "../Modal";

View file

@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
import React, { useCallback, useState } from "react"; import { useCallback, useState } from "react";
import { useLocation } from "react-router-dom"; import { useLocation } from "react-router-dom";
import { Trans, useTranslation } from "react-i18next"; import { Trans, useTranslation } from "react-i18next";

View file

@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
import React, { FC, useEffect, useState, useCallback } from "react"; import { FC, useEffect, useState, useCallback } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import type { GroupCall } from "matrix-js-sdk/src/webrtc/groupCall"; import type { GroupCall } from "matrix-js-sdk/src/webrtc/groupCall";

View file

@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
import React, { useEffect } from "react"; import { useEffect } from "react";
import { useLocation, useHistory } from "react-router-dom"; import { useLocation, useHistory } from "react-router-dom";
import { Config } from "../config/Config"; import { Config } from "../config/Config";

View file

@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
import React, { useCallback } from "react"; import { useState, useEffect, useRef, useCallback } from "react";
import useMeasure from "react-use-measure"; import useMeasure from "react-use-measure";
import { ResizeObserver } from "@juggle/resize-observer"; import { ResizeObserver } from "@juggle/resize-observer";
import { OverlayTriggerState } from "@react-stately/overlays"; import { OverlayTriggerState } from "@react-stately/overlays";
@ -65,8 +65,8 @@ export function VideoPreview({ matrixInfo, onUserChoicesChanged }: Props) {
const mediaDevices = useMediaDevices(); const mediaDevices = useMediaDevices();
// Create local media tracks. // Create local media tracks.
const [videoEnabled, setVideoEnabled] = React.useState<boolean>(true); const [videoEnabled, setVideoEnabled] = useState<boolean>(true);
const [audioEnabled, setAudioEnabled] = React.useState<boolean>(true); const [audioEnabled, setAudioEnabled] = useState<boolean>(true);
const [videoId, audioId] = [ const [videoId, audioId] = [
mediaDevices.videoIn.selectedId, mediaDevices.videoIn.selectedId,
mediaDevices.audioIn.selectedId, mediaDevices.audioIn.selectedId,
@ -85,7 +85,7 @@ export function VideoPreview({ matrixInfo, onUserChoicesChanged }: Props) {
const activeVideoId = video?.selectedDevice?.deviceId; const activeVideoId = video?.selectedDevice?.deviceId;
const activeAudioId = audio?.selectedDevice?.deviceId; const activeAudioId = audio?.selectedDevice?.deviceId;
React.useEffect(() => { useEffect(() => {
const createChoices = ( const createChoices = (
enabled: boolean, enabled: boolean,
deviceId?: string deviceId?: string
@ -116,7 +116,7 @@ export function VideoPreview({ matrixInfo, onUserChoicesChanged }: Props) {
mediaDevices.videoIn.setSelected, mediaDevices.videoIn.setSelected,
mediaDevices.audioIn.setSelected, mediaDevices.audioIn.setSelected,
]; ];
React.useEffect(() => { useEffect(() => {
if (activeVideoId && activeVideoId !== "") { if (activeVideoId && activeVideoId !== "") {
selectVideo(activeVideoId); selectVideo(activeVideoId);
} }
@ -125,8 +125,8 @@ export function VideoPreview({ matrixInfo, onUserChoicesChanged }: Props) {
} }
}, [selectVideo, selectAudio, activeVideoId, activeAudioId]); }, [selectVideo, selectAudio, activeVideoId, activeAudioId]);
const mediaElement = React.useRef(null); const mediaElement = useRef(null);
React.useEffect(() => { useEffect(() => {
if (mediaElement.current) { if (mediaElement.current) {
video?.localTrack?.attach(mediaElement.current); video?.localTrack?.attach(mediaElement.current);
} }

View file

@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
import React, { useCallback } from "react"; import { useCallback } from "react";
import { randomString } from "matrix-js-sdk/src/randomstring"; import { randomString } from "matrix-js-sdk/src/randomstring";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";

View file

@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
import React, { useCallback, useEffect, useRef } from "react"; import { useCallback, useEffect, useRef } from "react";
import { MatrixClient } from "matrix-js-sdk/src/client"; import { MatrixClient } from "matrix-js-sdk/src/client";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";

View file

@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
import React, { useCallback, useState } from "react"; import { ChangeEvent, useCallback, useState } from "react";
import { Item } from "@react-stately/collections"; import { Item } from "@react-stately/collections";
import { Trans, useTranslation } from "react-i18next"; import { Trans, useTranslation } from "react-i18next";
import { MatrixClient } from "matrix-js-sdk"; import { MatrixClient } from "matrix-js-sdk";
@ -188,7 +188,7 @@ export const SettingsModal = (props: Props) => {
description={t( description={t(
"Expose developer settings in the settings window." "Expose developer settings in the settings window."
)} )}
onChange={(event: React.ChangeEvent<HTMLInputElement>) => onChange={(event: ChangeEvent<HTMLInputElement>) =>
setDeveloperSettingsTab(event.target.checked) setDeveloperSettingsTab(event.target.checked)
} }
/> />
@ -200,7 +200,7 @@ export const SettingsModal = (props: Props) => {
type="checkbox" type="checkbox"
checked={optInAnalytics} checked={optInAnalytics}
description={optInDescription} description={optInDescription}
onChange={(event: React.ChangeEvent<HTMLInputElement>) => onChange={(event: ChangeEvent<HTMLInputElement>) =>
setOptInAnalytics(event.target.checked) setOptInAnalytics(event.target.checked)
} }
/> />
@ -230,7 +230,7 @@ export const SettingsModal = (props: Props) => {
label={t("Show call inspector")} label={t("Show call inspector")}
type="checkbox" type="checkbox"
checked={showInspector} checked={showInspector}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => onChange={(e: ChangeEvent<HTMLInputElement>) =>
setShowInspector(e.target.checked) setShowInspector(e.target.checked)
} }
/> />
@ -242,7 +242,7 @@ export const SettingsModal = (props: Props) => {
label={t("Show connection stats")} label={t("Show connection stats")}
type="checkbox" type="checkbox"
checked={showConnectionStats} checked={showConnectionStats}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => onChange={(e: ChangeEvent<HTMLInputElement>) =>
setShowConnectionStats(e.target.checked) setShowConnectionStats(e.target.checked)
} }
/> />

View file

@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
import React from "react"; import { FC } from "react";
import { TabContainer, TabItem } from "./Tabs"; import { TabContainer, TabItem } from "./Tabs";
import { ReactComponent as AudioIcon } from "../icons/Audio.svg"; import { ReactComponent as AudioIcon } from "../icons/Audio.svg";
@ -30,7 +30,7 @@ export default {
}, },
}; };
export const Tabs: React.FC<{}> = () => ( export const Tabs: FC = () => (
<TabContainer> <TabContainer>
<TabItem <TabItem
title={ title={

View file

@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
import React, { useRef } from "react"; import { useRef } from "react";
import { useTabList, useTab, useTabPanel } from "@react-aria/tabs"; import { useTabList, useTab, useTabPanel } from "@react-aria/tabs";
import { Item } from "@react-stately/collections"; import { Item } from "@react-stately/collections";
import { useTabListState, TabListState } from "@react-stately/tabs"; import { useTabListState, TabListState } from "@react-stately/tabs";

View file

@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
import React from "react"; import { FC } from "react";
import { Headline, Title, Subtitle, Body, Caption, Micro } from "./Typography"; import { Headline, Title, Subtitle, Body, Caption, Micro } from "./Typography";
@ -25,7 +25,7 @@ export default {
}, },
}; };
export const Typography: React.FC<{}> = () => ( export const Typography: FC = () => (
<> <>
<Headline>Headline Semi Bold</Headline> <Headline>Headline Semi Bold</Headline>
<Title>Title</Title> <Title>Title</Title>

View file

@ -17,7 +17,6 @@ limitations under the License.
import TinyQueue from "tinyqueue"; import TinyQueue from "tinyqueue";
import { RectReadOnly } from "react-use-measure"; import { RectReadOnly } from "react-use-measure";
import { FC, memo, ReactNode } from "react"; import { FC, memo, ReactNode } from "react";
import React from "react";
import { TileDescriptor } from "./VideoGrid"; import { TileDescriptor } from "./VideoGrid";
import { Slot } from "./NewVideoGrid"; import { Slot } from "./NewVideoGrid";

View file

@ -16,7 +16,7 @@ limitations under the License.
import { SpringRef, TransitionFn, useTransition } from "@react-spring/web"; import { SpringRef, TransitionFn, useTransition } from "@react-spring/web";
import { EventTypes, Handler, useScroll } from "@use-gesture/react"; import { EventTypes, Handler, useScroll } from "@use-gesture/react";
import React, { import {
CSSProperties, CSSProperties,
FC, FC,
ReactNode, ReactNode,

View file

@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
import React, { memo, ReactNode, RefObject, useRef } from "react"; import { memo, ReactNode, RefObject, useRef } from "react";
import { EventTypes, Handler, useDrag } from "@use-gesture/react"; import { EventTypes, Handler, useDrag } from "@use-gesture/react";
import { SpringValue, to } from "@react-spring/web"; import { SpringValue, to } from "@react-spring/web";

View file

@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
import React, { import {
ComponentProps, ComponentProps,
Key, Key,
ReactNode, ReactNode,
@ -819,7 +819,7 @@ export interface VideoGridProps<T> {
layout: Layout; layout: Layout;
disableAnimations: boolean; disableAnimations: boolean;
layoutStates: LayoutStatesMap; layoutStates: LayoutStatesMap;
children: (props: ChildrenProperties<T>) => React.ReactNode; children: (props: ChildrenProperties<T>) => ReactNode;
} }
// Represents something that should get a tile on the layout, // Represents something that should get a tile on the layout,

View file

@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
import React, { useCallback } from "react"; import { ComponentProps, forwardRef, useCallback, useEffect } from "react";
import { animated } from "@react-spring/web"; import { animated } from "@react-spring/web";
import classNames from "classnames"; import classNames from "classnames";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
@ -57,12 +57,12 @@ interface Props {
targetWidth: number; targetWidth: number;
targetHeight: number; targetHeight: number;
className?: string; className?: string;
style?: React.ComponentProps<typeof animated.div>["style"]; style?: ComponentProps<typeof animated.div>["style"];
showSpeakingIndicator: boolean; showSpeakingIndicator: boolean;
showConnectionStats: boolean; showConnectionStats: boolean;
} }
export const VideoTile = React.forwardRef<HTMLDivElement, Props>( export const VideoTile = forwardRef<HTMLDivElement, Props>(
( (
{ {
data, data,
@ -87,7 +87,7 @@ export const VideoTile = React.forwardRef<HTMLDivElement, Props>(
() => member?.rawDisplayName ?? "[👻]", () => member?.rawDisplayName ?? "[👻]",
[member] [member]
); );
React.useEffect(() => { useEffect(() => {
if (member) { if (member) {
const updateName = () => { const updateName = () => {
setDisplayName(member.rawDisplayName); setDisplayName(member.rawDisplayName);

View file

@ -14,8 +14,6 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
import React from "react";
import { render, RenderResult } from "@testing-library/react"; import { render, RenderResult } from "@testing-library/react";
import { CallList } from "../../src/home/CallList"; import { CallList } from "../../src/home/CallList";
import { MatrixClient } from "matrix-js-sdk"; import { MatrixClient } from "matrix-js-sdk";

3
test/mocks/svgr.ts Normal file
View file

@ -0,0 +1,3 @@
// Mock file for SVG imports
export default "SvgrURL";
export const ReactComponent = "div";

View file

@ -7,7 +7,7 @@
"noEmit": true, "noEmit": true,
"noImplicitAny": false, "noImplicitAny": false,
"noUnusedLocals": true, "noUnusedLocals": true,
"jsx": "preserve", "jsx": "react-jsx",
"lib": ["es2020", "dom", "dom.iterable"], "lib": ["es2020", "dom", "dom.iterable"],
"strict": false, "strict": false,
"plugins": [ "plugins": [

View file

@ -18,14 +18,14 @@ import { defineConfig, loadEnv } from "vite";
import svgrPlugin from "vite-plugin-svgr"; import svgrPlugin from "vite-plugin-svgr";
import htmlTemplate from "vite-plugin-html-template"; import htmlTemplate from "vite-plugin-html-template";
import sentryVitePlugin from "@sentry/vite-plugin"; import sentryVitePlugin from "@sentry/vite-plugin";
import react from "@vitejs/plugin-react";
import path from "path";
// https://vitejs.dev/config/ // https://vitejs.dev/config/
export default defineConfig(({ mode }) => { export default defineConfig(({ mode }) => {
const env = loadEnv(mode, process.cwd()); const env = loadEnv(mode, process.cwd());
const plugins = [ const plugins = [
react(),
svgrPlugin(), svgrPlugin(),
htmlTemplate.default({ htmlTemplate.default({
data: { data: {
@ -49,6 +49,9 @@ export default defineConfig(({ mode }) => {
} }
return { return {
server: {
port: 3000,
},
build: { build: {
sourcemap: true, sourcemap: true,
}, },

706
yarn.lock

File diff suppressed because it is too large Load diff