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/
public/config.json
/coverage
yarn-error.log

View file

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

View file

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

View file

@ -48,6 +48,7 @@
"@types/grecaptcha": "^3.0.4",
"@types/sdp-transform": "^2.4.5",
"@use-gesture/react": "^10.2.11",
"@vitejs/plugin-react": "^4.0.1",
"classnames": "^2.3.1",
"color-hash": "^2.0.1",
"events": "^3.3.0",
@ -105,9 +106,9 @@
"storybook-builder-vite": "^0.1.12",
"typescript": "^4.9.5",
"typescript-strict-plugin": "^2.0.1",
"vite": "^2.4.2",
"vite": "^4.2.0",
"vite-plugin-html-template": "^1.1.0",
"vite-plugin-svgr": "^0.4.0"
"vite-plugin-svgr": "^3.2.0"
},
"jest": {
"testEnvironment": "jsdom",
@ -119,7 +120,8 @@
"/node_modules/(?!internmap)+$"
],
"moduleNameMapper": {
"\\.(css|less|svg)+$": "identity-obj-proxy",
"\\.css$": "identity-obj-proxy",
"\\.svg$": "<rootDir>/test/mocks/svgr.ts",
"^\\./IndexedDBWorker\\?worker$": "<rootDir>/test/mocks/workerMock.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.
*/
import React, { Suspense, useEffect, useState } from "react";
import { Suspense, useEffect, useState } from "react";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import * as Sentry from "@sentry/react";
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.
*/
import React, { useMemo, CSSProperties } from "react";
import { useMemo, CSSProperties, HTMLAttributes, FC } from "react";
import classNames from "classnames";
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) =>
src?.startsWith("mxc://") ? client && getAvatarUrl(client, src, size) : src;
interface Props extends React.HTMLAttributes<HTMLDivElement> {
interface Props extends HTMLAttributes<HTMLDivElement> {
bgKey?: string;
src?: string;
size?: Size | number;
@ -71,7 +71,7 @@ interface Props extends React.HTMLAttributes<HTMLDivElement> {
fallback: string;
}
export const Avatar: React.FC<Props> = ({
export const Avatar: FC<Props> = ({
bgKey,
src,
fallback,

View file

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

View file

@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import React, { HTMLAttributes, useMemo } from "react";
import { HTMLAttributes, useMemo } from "react";
import classNames from "classnames";
import { MatrixClient } from "matrix-js-sdk/src/client";
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.
*/
import React, { ReactNode, useCallback, useEffect } from "react";
import { ReactNode, useCallback, useEffect } from "react";
import { useLocation } from "react-router-dom";
import classNames from "classnames";
import { Trans, useTranslation } from "react-i18next";

View file

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

View file

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

View file

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

View file

@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
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 { TreeState, useTreeState } from "@react-stately/tree";
import { mergeProps } from "@react-aria/utils";

View file

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

View file

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

View file

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

View file

@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import React, { useCallback, useMemo } from "react";
import { useCallback, useMemo } from "react";
import { Item } from "@react-stately/collections";
import { useLocation } from "react-router-dom";
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.
*/
import React, { useCallback, useState } from "react";
import { useCallback, useState } from "react";
import { useHistory, useLocation } from "react-router-dom";
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 { Link } from "../typography/Typography";

View file

@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
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 { 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.
*/
import React, {
import {
ChangeEvent,
FC,
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
limitations under the License.
*/
import React, { forwardRef, useCallback } from "react";
import { forwardRef, useCallback } from "react";
import { PressEvent } from "@react-types/shared";
import classNames from "classnames";
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.
*/
import React from "react";
import { useTranslation } from "react-i18next";
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.
*/
import React, { HTMLAttributes } from "react";
import { HTMLAttributes } from "react";
import { Link } from "react-router-dom";
import classNames from "classnames";
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.
*/
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";

View file

@ -15,7 +15,7 @@ limitations under the License.
*/
import classNames from "classnames";
import React, { FormEventHandler, forwardRef, ReactNode } from "react";
import { FormEventHandler, forwardRef, ReactNode } from "react";
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.
*/
import React from "react";
import { Link } from "react-router-dom";
import { MatrixClient } from "matrix-js-sdk/src/client";
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.
*/
import React, { FC } from "react";
import { FC } from "react";
import { Item } from "@react-stately/collections";
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.
*/
import React from "react";
import { useTranslation } from "react-i18next";
import { useClient } from "../ClientContext";

View file

@ -14,7 +14,6 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import React from "react";
import { PressEvent } from "@react-types/shared";
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.
*/
import React, {
useState,
useCallback,
FormEvent,
FormEventHandler,
} from "react";
import { useState, useCallback, FormEvent, FormEventHandler } from "react";
import { useHistory } from "react-router-dom";
import { MatrixClient } from "matrix-js-sdk/src/client";
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.
*/
import React, { FC, useCallback, useState, FormEventHandler } from "react";
import { FC, useCallback, useState, FormEventHandler } from "react";
import { useHistory } from "react-router-dom";
import { randomString } from "matrix-js-sdk/src/randomstring";
import { Trans, useTranslation } from "react-i18next";

View file

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

View file

@ -14,7 +14,14 @@ See the License for the specific language governing permissions and
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 styles from "./Input.module.css";
@ -114,7 +121,7 @@ export const InputField = forwardRef<
{type === "textarea" ? (
<textarea
id={id}
ref={ref as React.ForwardedRef<HTMLTextAreaElement>}
ref={ref as ForwardedRef<HTMLTextAreaElement>}
disabled={disabled}
aria-describedby={descriptionId}
{...rest}
@ -122,7 +129,7 @@ export const InputField = forwardRef<
) : (
<input
id={id}
ref={ref as React.ForwardedRef<HTMLInputElement>}
ref={ref as ForwardedRef<HTMLInputElement>}
type={type}
checked={checked}
disabled={disabled}

View file

@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import React, { useRef } from "react";
import { useRef } from "react";
import { AriaSelectOptions, HiddenSelect, useSelect } from "@react-aria/select";
import { useButton } from "@react-aria/button";
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
limitations under the License.
*/
import React, { useState } from "react";
import { useState } from "react";
import { useTranslation } from "react-i18next";
import styles from "./StarRatingInput.module.css";

View file

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

View file

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

View file

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

View file

@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import React, { forwardRef, useRef } from "react";
import { forwardRef, useRef } from "react";
import { useMenuTriggerState } from "@react-stately/menu";
import { useMenuTrigger } from "@react-aria/menu";
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.
*/
import React, { FormEventHandler, useCallback, useState } from "react";
import { FormEventHandler, useCallback, useState } from "react";
import { MatrixClient } from "matrix-js-sdk/src/client";
import { Trans, useTranslation } from "react-i18next";
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.
*/
import React, { useCallback } from "react";
import { useCallback } from "react";
import { Item } from "@react-stately/collections";
import { useTranslation } from "react-i18next";

View file

@ -16,13 +16,16 @@ limitations under the License.
import * as Sentry from "@sentry/react";
import { Resizable } from "re-resizable";
import React, {
import {
useEffect,
useState,
useReducer,
useRef,
createContext,
useContext,
Dispatch,
SetStateAction,
ReactNode,
} from "react";
import ReactJson, { CollapsedFieldProps } from "react-json-view";
import mermaid from "mermaid";
@ -136,16 +139,13 @@ function lineForEvent(event: SequenceDiagramMatrixEvent): string {
export const InspectorContext =
createContext<
[
InspectorContextState,
React.Dispatch<React.SetStateAction<InspectorContextState>>
]
[InspectorContextState, Dispatch<SetStateAction<InspectorContextState>>]
>(undefined);
export function InspectorContextProvider({
children,
}: {
children: React.ReactNode;
children: ReactNode;
}) {
// We take the tuple of [currentState, setter] and stick
// 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.
*/
import React, { ReactNode } from "react";
import { ReactNode } from "react";
import { MatrixClient } from "matrix-js-sdk/src/client";
import { GroupCall } from "matrix-js-sdk/src/webrtc/groupCall";
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.
*/
import React, { useCallback, useEffect, useState } from "react";
import { useCallback, useEffect, useState } from "react";
import { useHistory } from "react-router-dom";
import { GroupCall, GroupCallState } from "matrix-js-sdk/src/webrtc/groupCall";
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 { RoomMember } from "matrix-js-sdk/src/models/room-member";
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 useMeasure from "react-use-measure";
import { OverlayTriggerState } from "@react-stately/overlays";
@ -51,9 +51,9 @@ import {
VersionMismatchWarning,
} from "../Header";
import {
VideoGrid,
useVideoGridLayout,
TileDescriptor,
VideoGrid,
} from "../video-grid/VideoGrid";
import {
useShowInspector,

View file

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

View file

@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import React, { FC, useEffect } from "react";
import { FC, useEffect } from "react";
import { useTranslation } from "react-i18next";
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.
*/
import React, { useCallback, useState } from "react";
import { useCallback, useState } from "react";
import { useLocation } from "react-router-dom";
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.
*/
import React, { FC, useEffect, useState, useCallback } from "react";
import { FC, useEffect, useState, useCallback } from "react";
import { useTranslation } from "react-i18next";
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.
*/
import React, { useEffect } from "react";
import { useEffect } from "react";
import { useLocation, useHistory } from "react-router-dom";
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.
*/
import React, { useCallback } from "react";
import { useState, useEffect, useRef, useCallback } from "react";
import useMeasure from "react-use-measure";
import { ResizeObserver } from "@juggle/resize-observer";
import { OverlayTriggerState } from "@react-stately/overlays";
@ -65,8 +65,8 @@ export function VideoPreview({ matrixInfo, onUserChoicesChanged }: Props) {
const mediaDevices = useMediaDevices();
// Create local media tracks.
const [videoEnabled, setVideoEnabled] = React.useState<boolean>(true);
const [audioEnabled, setAudioEnabled] = React.useState<boolean>(true);
const [videoEnabled, setVideoEnabled] = useState<boolean>(true);
const [audioEnabled, setAudioEnabled] = useState<boolean>(true);
const [videoId, audioId] = [
mediaDevices.videoIn.selectedId,
mediaDevices.audioIn.selectedId,
@ -85,7 +85,7 @@ export function VideoPreview({ matrixInfo, onUserChoicesChanged }: Props) {
const activeVideoId = video?.selectedDevice?.deviceId;
const activeAudioId = audio?.selectedDevice?.deviceId;
React.useEffect(() => {
useEffect(() => {
const createChoices = (
enabled: boolean,
deviceId?: string
@ -116,7 +116,7 @@ export function VideoPreview({ matrixInfo, onUserChoicesChanged }: Props) {
mediaDevices.videoIn.setSelected,
mediaDevices.audioIn.setSelected,
];
React.useEffect(() => {
useEffect(() => {
if (activeVideoId && activeVideoId !== "") {
selectVideo(activeVideoId);
}
@ -125,8 +125,8 @@ export function VideoPreview({ matrixInfo, onUserChoicesChanged }: Props) {
}
}, [selectVideo, selectAudio, activeVideoId, activeAudioId]);
const mediaElement = React.useRef(null);
React.useEffect(() => {
const mediaElement = useRef(null);
useEffect(() => {
if (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.
*/
import React, { useCallback } from "react";
import { useCallback } from "react";
import { randomString } from "matrix-js-sdk/src/randomstring";
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.
*/
import React, { useCallback, useEffect, useRef } from "react";
import { useCallback, useEffect, useRef } from "react";
import { MatrixClient } from "matrix-js-sdk/src/client";
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.
*/
import React, { useCallback, useState } from "react";
import { ChangeEvent, useCallback, useState } from "react";
import { Item } from "@react-stately/collections";
import { Trans, useTranslation } from "react-i18next";
import { MatrixClient } from "matrix-js-sdk";
@ -188,7 +188,7 @@ export const SettingsModal = (props: Props) => {
description={t(
"Expose developer settings in the settings window."
)}
onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
onChange={(event: ChangeEvent<HTMLInputElement>) =>
setDeveloperSettingsTab(event.target.checked)
}
/>
@ -200,7 +200,7 @@ export const SettingsModal = (props: Props) => {
type="checkbox"
checked={optInAnalytics}
description={optInDescription}
onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
onChange={(event: ChangeEvent<HTMLInputElement>) =>
setOptInAnalytics(event.target.checked)
}
/>
@ -230,7 +230,7 @@ export const SettingsModal = (props: Props) => {
label={t("Show call inspector")}
type="checkbox"
checked={showInspector}
onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
onChange={(e: ChangeEvent<HTMLInputElement>) =>
setShowInspector(e.target.checked)
}
/>
@ -242,7 +242,7 @@ export const SettingsModal = (props: Props) => {
label={t("Show connection stats")}
type="checkbox"
checked={showConnectionStats}
onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
onChange={(e: ChangeEvent<HTMLInputElement>) =>
setShowConnectionStats(e.target.checked)
}
/>

View file

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

View file

@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import React, { useRef } from "react";
import { useRef } from "react";
import { useTabList, useTab, useTabPanel } from "@react-aria/tabs";
import { Item } from "@react-stately/collections";
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.
*/
import React from "react";
import { FC } from "react";
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>
<Title>Title</Title>

View file

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

View file

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

View file

@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
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 { 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.
*/
import React, {
import {
ComponentProps,
Key,
ReactNode,
@ -819,7 +819,7 @@ export interface VideoGridProps<T> {
layout: Layout;
disableAnimations: boolean;
layoutStates: LayoutStatesMap;
children: (props: ChildrenProperties<T>) => React.ReactNode;
children: (props: ChildrenProperties<T>) => ReactNode;
}
// 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.
*/
import React, { useCallback } from "react";
import { ComponentProps, forwardRef, useCallback, useEffect } from "react";
import { animated } from "@react-spring/web";
import classNames from "classnames";
import { useTranslation } from "react-i18next";
@ -57,12 +57,12 @@ interface Props {
targetWidth: number;
targetHeight: number;
className?: string;
style?: React.ComponentProps<typeof animated.div>["style"];
style?: ComponentProps<typeof animated.div>["style"];
showSpeakingIndicator: boolean;
showConnectionStats: boolean;
}
export const VideoTile = React.forwardRef<HTMLDivElement, Props>(
export const VideoTile = forwardRef<HTMLDivElement, Props>(
(
{
data,
@ -87,7 +87,7 @@ export const VideoTile = React.forwardRef<HTMLDivElement, Props>(
() => member?.rawDisplayName ?? "[👻]",
[member]
);
React.useEffect(() => {
useEffect(() => {
if (member) {
const updateName = () => {
setDisplayName(member.rawDisplayName);

View file

@ -14,8 +14,6 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import React from "react";
import { render, RenderResult } from "@testing-library/react";
import { CallList } from "../../src/home/CallList";
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,
"noImplicitAny": false,
"noUnusedLocals": true,
"jsx": "preserve",
"jsx": "react-jsx",
"lib": ["es2020", "dom", "dom.iterable"],
"strict": false,
"plugins": [

View file

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

706
yarn.lock

File diff suppressed because it is too large Load diff