diff --git a/src/Banner.module.css b/src/QrCode.module.css
similarity index 78%
rename from src/Banner.module.css
rename to src/QrCode.module.css
index cd1b5272..500490bf 100644
--- a/src/Banner.module.css
+++ b/src/QrCode.module.css
@@ -1,5 +1,5 @@
/*
-Copyright 2023 New Vector Ltd
+Copyright 2024 New Vector Ltd
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
@@ -14,9 +14,8 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
-.banner {
- flex: 1;
- border-radius: 8px;
- padding: 16px;
- background-color: var(--cpd-color-bg-subtle-primary);
+.qrCode img {
+ max-width: 100%;
+ image-rendering: pixelated;
+ border-radius: var(--cpd-space-4x);
}
diff --git a/src/Banner.tsx b/src/QrCode.test.tsx
similarity index 52%
rename from src/Banner.tsx
rename to src/QrCode.test.tsx
index 87ce8a96..6537076d 100644
--- a/src/Banner.tsx
+++ b/src/QrCode.test.tsx
@@ -1,5 +1,5 @@
/*
-Copyright 2023 New Vector Ltd
+Copyright 2024 New Vector Ltd
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
@@ -14,14 +14,21 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
-import { FC, ReactNode } from "react";
+import { describe, expect, test } from "vitest";
+import { render, configure } from "@testing-library/react";
-import styles from "./Banner.module.css";
+import { QrCode } from "./QrCode";
-interface Props {
- children: ReactNode;
-}
+configure({
+ defaultHidden: true,
+});
-export const Banner: FC
= ({ children }) => {
- return {children}
;
-};
+describe("QrCode", () => {
+ test("renders", async () => {
+ const { container, findByRole } = render(
+ ,
+ );
+ (await findByRole("img")) as HTMLImageElement;
+ expect(container.firstChild).toMatchSnapshot();
+ });
+});
diff --git a/src/QrCode.tsx b/src/QrCode.tsx
new file mode 100644
index 00000000..515234ab
--- /dev/null
+++ b/src/QrCode.tsx
@@ -0,0 +1,57 @@
+/*
+Copyright 2024 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { FC, useEffect, useState } from "react";
+import { toDataURL } from "qrcode";
+import classNames from "classnames";
+import { t } from "i18next";
+
+import styles from "./QrCode.module.css";
+
+interface Props {
+ data: string;
+ className?: string;
+}
+
+export const QrCode: FC = ({ data, className }) => {
+ const [url, setUrl] = useState(null);
+
+ useEffect(() => {
+ let isCancelled = false;
+
+ toDataURL(data, { errorCorrectionLevel: "L" })
+ .then((url) => {
+ if (!isCancelled) {
+ setUrl(url);
+ }
+ })
+ .catch((reason) => {
+ if (!isCancelled) {
+ setUrl(null);
+ }
+ });
+
+ return (): void => {
+ isCancelled = true;
+ };
+ }, [data]);
+
+ return (
+
+ {url &&
}
+
- {children}
-
- );
- },
-);
-
-Tooltip.displayName = "Tooltip";
-
-interface TooltipTriggerProps {
- children: ReactElement;
- placement?: Placement;
- delay?: number;
- tooltip: () => string;
-}
-
-export const TooltipTrigger = forwardRef(
- (
- { children, placement, tooltip, ...rest }: TooltipTriggerProps,
- ref: ForwardedRef,
- ) => {
- const tooltipTriggerProps = { delay: 250, ...rest };
- const tooltipState = useTooltipTriggerState(tooltipTriggerProps);
- const triggerRef = useObjectRef(ref);
- const overlayRef = useRef(null);
- const { triggerProps, tooltipProps } = useTooltipTrigger(
- tooltipTriggerProps,
- tooltipState,
- triggerRef,
- );
-
- const { overlayProps } = useOverlayPosition({
- placement: placement || "top",
- targetRef: triggerRef,
- overlayRef,
- isOpen: tooltipState.isOpen,
- offset: 12,
- });
-
- return (
-
- (
- children.props,
- rest,
- )}
- />
- {tooltipState.isOpen && (
-
-
- {tooltip()}
-
-
- )}
-
- );
- },
-);
-
-TooltipTrigger.displayName = "TooltipTrigger";
diff --git a/test/UrlParams-test.ts b/src/UrlParams.test.ts
similarity index 91%
rename from test/UrlParams-test.ts
rename to src/UrlParams.test.ts
index eb03d976..12076512 100644
--- a/test/UrlParams-test.ts
+++ b/src/UrlParams.test.ts
@@ -14,23 +14,16 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
-import { vi } from "vitest";
+import { describe, expect, it } from "vitest";
import { getRoomIdentifierFromUrl } from "../src/UrlParams";
-import { Config } from "../src/config/Config";
const ROOM_NAME = "roomNameHere";
const ROOM_ID = "!d45f138fsd";
const ORIGIN = "https://call.element.io";
-const HOMESERVER = "call.ems.host";
-
-vi.mock("../src/config/Config");
+const HOMESERVER = "localhost";
describe("UrlParams", () => {
- beforeAll(() => {
- vi.mocked(Config.defaultServerName).mockReturnValue("call.ems.host");
- });
-
describe("handles URL with /room/", () => {
it("and nothing else", () => {
expect(
diff --git a/src/UserMenu.module.css b/src/UserMenu.module.css
index 575b71b9..d4e06037 100644
--- a/src/UserMenu.module.css
+++ b/src/UserMenu.module.css
@@ -21,6 +21,14 @@ limitations under the License.
flex-shrink: 0;
}
+.userButton {
+ appearance: none;
+ background: none;
+ border: none;
+ margin: 0;
+ cursor: pointer;
+}
+
.userButton svg * {
fill: var(--cpd-color-icon-primary);
}
diff --git a/src/UserMenu.tsx b/src/UserMenu.tsx
index 7cab4575..55ccc2c0 100644
--- a/src/UserMenu.tsx
+++ b/src/UserMenu.tsx
@@ -14,21 +14,17 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
-import { FC, ReactNode, useCallback, useMemo } from "react";
-import { Item } from "@react-stately/collections";
+import { FC, useMemo, useState } from "react";
import { useLocation } from "react-router-dom";
import { useTranslation } from "react-i18next";
+import { Menu, MenuItem } from "@vector-im/compound-web";
-import { Button, LinkButton } from "./button";
-import { PopoverMenuTrigger } from "./popover/PopoverMenu";
-import { Menu } from "./Menu";
-import { TooltipTrigger } from "./Tooltip";
+import { LinkButton } from "./button";
import { Avatar, Size } from "./Avatar";
import UserIcon from "./icons/User.svg?react";
import SettingsIcon from "./icons/Settings.svg?react";
import LoginIcon from "./icons/Login.svg?react";
import LogoutIcon from "./icons/Logout.svg?react";
-import { Body } from "./typography/Typography";
import styles from "./UserMenu.module.css";
interface Props {
@@ -91,7 +87,7 @@ export const UserMenu: FC = ({
return arr;
}, [isAuthenticated, isPasswordlessUser, displayName, preventNavigation, t]);
- const tooltip = useCallback(() => t("common.profile"), [t]);
+ const [open, setOpen] = useState(false);
if (!isAuthenticated) {
return (
@@ -102,10 +98,15 @@ export const UserMenu: FC = ({
}
return (
-
-
-
-
- {
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
- (props: any): ReactNode => (
-
- )
+
}
-
+ >
+ {items.map(({ key, icon: Icon, label, dataTestid }) => (
+ 
+
### Add a new translation key
To add a new translation key you can do these steps:
diff --git a/codecov.yaml b/codecov.yaml
new file mode 100644
index 00000000..30c038ec
--- /dev/null
+++ b/codecov.yaml
@@ -0,0 +1,13 @@
+# Don't post comments on PRs; they're noisy and the same information can be
+# gotten through the checks section at the bottom of the PR anyways
+comment: false
+coverage:
+ status:
+ project:
+ default:
+ # Track the impact of changes on overall coverage without blocking PRs
+ informational: true
+ patch:
+ default:
+ # Expect 80% coverage on all lines that a PR touches
+ target: 80%
diff --git a/docs/README.md b/docs/README.md
index a78c7253..113b52c5 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -2,5 +2,6 @@
This folder contains documentation for Element Call setup and usage.
-- [Url format and parameters](./url-params.md)
- [Embedded vs standalone mode](./embedded-standalone.md)
+- [Url format and parameters](./url-params.md)
+- [Global JS controls](./controls.md)
diff --git a/docs/controls.md b/docs/controls.md
new file mode 100644
index 00000000..02df61ef
--- /dev/null
+++ b/docs/controls.md
@@ -0,0 +1,7 @@
+# Global JS controls
+
+A few aspects of Element Call's interface can be controlled through a global API on the `window`:
+
+- `controls.canEnterPip(): boolean` Determines whether it's possible to enter picture-in-picture mode.
+- `controls.enablePip(): void` Puts the call interface into picture-in-picture mode. Throws if not in a call.
+- `controls.disablePip(): void` Takes the call interface out of picture-in-picture mode, restoring it to its natural display mode. Throws if not in a call.
diff --git a/knip.ts b/knip.ts
new file mode 100644
index 00000000..becafc2e
--- /dev/null
+++ b/knip.ts
@@ -0,0 +1,30 @@
+import { KnipConfig } from "knip";
+
+export default {
+ entry: ["src/main.tsx", "i18next-parser.config.ts"],
+ ignoreBinaries: [
+ // This is deprecated, so Knip doesn't actually recognize it as a globally
+ // installed binary. TODO We should switch to Compose v2:
+ // https://docs.docker.com/compose/migrate/
+ "docker-compose",
+ ],
+ ignoreDependencies: [
+ // Used in CSS
+ "normalize.css",
+ // Used for its global type declarations
+ "@types/grecaptcha",
+ // Because we use matrix-js-sdk as a Git dependency rather than consuming
+ // the proper release artifacts, and also import directly from src/, we're
+ // forced to re-install some of the types that it depends on even though
+ // these look unused to Knip
+ "@types/content-type",
+ "@types/sdp-transform",
+ "@types/uuid",
+ // We obviously use this, but if the package has been linked with yarn link,
+ // then Knip will flag it as a false positive
+ // https://github.com/webpro-nl/knip/issues/766
+ "@vector-im/compound-web",
+ "matrix-widget-api",
+ ],
+ ignoreExportsUsedInFile: true,
+} satisfies KnipConfig;
diff --git a/package.json b/package.json
index 690f2723..42f2e9fb 100644
--- a/package.json
+++ b/package.json
@@ -8,103 +8,60 @@
"serve": "vite preview",
"prettier:check": "prettier -c .",
"prettier:format": "prettier -w .",
- "lint": "yarn lint:types && yarn lint:eslint",
+ "lint": "yarn lint:types && yarn lint:eslint && yarn lint:knip",
"lint:eslint": "eslint --max-warnings 0 src",
"lint:eslint-fix": "eslint --max-warnings 0 src --fix",
+ "lint:knip": "knip",
"lint:types": "tsc",
- "i18n": "node_modules/i18next-parser/bin/cli.js",
- "i18n:check": "node_modules/i18next-parser/bin/cli.js --fail-on-warnings --fail-on-update",
+ "i18n": "i18next",
+ "i18n:check": "i18next --fail-on-warnings --fail-on-update",
"test": "vitest",
- "test:coverage": "vitest run --coverage",
+ "test:coverage": "vitest --coverage",
"backend": "docker-compose -f backend-docker-compose.yml up"
},
- "dependencies": {
- "@livekit/components-core": "^0.11.0",
- "@livekit/components-react": "^2.0.0",
- "@opentelemetry/api": "^1.4.0",
- "@opentelemetry/context-zone": "^1.9.1",
- "@opentelemetry/exporter-jaeger": "^1.9.1",
- "@opentelemetry/exporter-trace-otlp-http": "^0.52.0",
- "@opentelemetry/instrumentation-document-load": "^0.39.0",
- "@opentelemetry/instrumentation-user-interaction": "^0.39.0",
- "@opentelemetry/sdk-trace-web": "^1.9.1",
- "@radix-ui/react-dialog": "^1.0.4",
- "@radix-ui/react-slider": "^1.1.2",
- "@radix-ui/react-visually-hidden": "^1.0.3",
- "@react-aria/button": "^3.3.4",
- "@react-aria/focus": "^3.5.0",
- "@react-aria/menu": "^3.3.0",
- "@react-aria/overlays": "^3.7.3",
- "@react-aria/select": "^3.6.0",
- "@react-aria/tabs": "^3.1.0",
- "@react-aria/tooltip": "^3.1.3",
- "@react-aria/utils": "^3.10.0",
- "@react-spring/web": "^9.4.4",
- "@react-stately/collections": "^3.3.4",
- "@react-stately/select": "^3.1.3",
- "@react-stately/tooltip": "^3.0.5",
- "@react-stately/tree": "^3.2.0",
- "@sentry/react": "^8.0.0",
- "@sentry/tracing": "^7.0.0",
- "@types/lodash": "^4.14.199",
- "@use-gesture/react": "^10.2.11",
- "@vector-im/compound-design-tokens": "^1.0.0",
- "@vector-im/compound-web": "^6.0.0",
- "@vitejs/plugin-basic-ssl": "^1.0.1",
- "@vitejs/plugin-react": "^4.0.1",
- "buffer": "^6.0.3",
- "classnames": "^2.3.1",
- "events": "^3.3.0",
- "i18next": "^23.0.0",
- "i18next-browser-languagedetector": "^8.0.0",
- "i18next-http-backend": "^2.0.0",
- "livekit-client": "^2.0.2",
- "lodash": "^4.17.21",
- "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#467908703bc67fa3e23d978f5549e2709d4acf74",
- "matrix-widget-api": "^1.8.2",
- "normalize.css": "^8.0.1",
- "observable-hooks": "^4.2.3",
- "pako": "^2.0.4",
- "postcss-preset-env": "^10.0.0",
- "posthog-js": "^1.29.0",
- "react": "18",
- "react-dom": "18",
- "react-i18next": "^15.0.0",
- "react-router-dom": "^5.2.0",
- "react-use-clipboard": "^1.0.7",
- "react-use-measure": "^2.1.1",
- "rxjs": "^7.8.1",
- "sdp-transform": "^2.14.1",
- "tinyqueue": "^3.0.0",
- "unique-names-generator": "^4.6.0",
- "uuid": "10",
- "vaul": "^0.9.0"
- },
"devDependencies": {
"@babel/core": "^7.16.5",
"@babel/preset-env": "^7.22.20",
"@babel/preset-react": "^7.22.15",
"@babel/preset-typescript": "^7.23.0",
- "@react-spring/rafz": "^9.7.3",
- "@react-types/dialog": "^3.5.5",
+ "@livekit/components-core": "^0.11.0",
+ "@livekit/components-react": "^2.0.0",
+ "@opentelemetry/api": "^1.4.0",
+ "@opentelemetry/core": "^1.25.1",
+ "@opentelemetry/exporter-trace-otlp-http": "^0.53.0",
+ "@opentelemetry/resources": "^1.25.1",
+ "@opentelemetry/sdk-trace-base": "^1.25.1",
+ "@opentelemetry/sdk-trace-web": "^1.9.1",
+ "@opentelemetry/semantic-conventions": "^1.25.1",
+ "@radix-ui/react-dialog": "^1.0.4",
+ "@radix-ui/react-slider": "^1.1.2",
+ "@radix-ui/react-visually-hidden": "^1.0.3",
+ "@react-spring/web": "^9.4.4",
+ "@sentry/react": "^8.0.0",
"@sentry/vite-plugin": "^2.0.0",
"@testing-library/dom": "^10.1.0",
"@testing-library/react": "^16.0.0",
"@testing-library/user-event": "^14.5.1",
"@types/content-type": "^1.1.5",
- "@types/dom-screen-wake-lock": "^1.0.1",
- "@types/dompurify": "^3.0.2",
- "@types/grecaptcha": "^3.0.4",
+ "@types/grecaptcha": "^3.0.9",
+ "@types/jsdom": "^21.1.7",
+ "@types/lodash": "^4.14.199",
"@types/node": "^20.0.0",
+ "@types/qrcode": "^1.5.5",
"@types/react-dom": "^18.3.0",
"@types/react-router-dom": "^5.3.3",
- "@types/request": "^2.48.8",
"@types/sdp-transform": "^2.4.5",
"@types/uuid": "10",
- "@typescript-eslint/eslint-plugin": "^7.0.0",
- "@typescript-eslint/parser": "^7.0.0",
- "babel-loader": "^9.0.0",
+ "@typescript-eslint/eslint-plugin": "^8.0.0",
+ "@typescript-eslint/parser": "^8.0.0",
+ "@use-gesture/react": "^10.2.11",
+ "@vector-im/compound-design-tokens": "^1.0.0",
+ "@vector-im/compound-web": "^6.0.0",
+ "@vitejs/plugin-basic-ssl": "^1.0.1",
+ "@vitejs/plugin-react": "^4.0.1",
+ "@vitest/coverage-v8": "^2.0.5",
"babel-plugin-transform-vite-meta-env": "^1.0.3",
+ "classnames": "^2.3.1",
"eslint": "^8.14.0",
"eslint-config-google": "^0.14.0",
"eslint-config-prettier": "^9.0.0",
@@ -115,12 +72,39 @@
"eslint-plugin-react": "^7.29.4",
"eslint-plugin-react-hooks": "^4.5.0",
"eslint-plugin-unicorn": "^55.0.0",
+ "global-jsdom": "^24.0.0",
+ "history": "^4.0.0",
+ "i18next": "^23.0.0",
+ "i18next-browser-languagedetector": "^8.0.0",
+ "i18next-http-backend": "^2.0.0",
"i18next-parser": "^9.0.0",
- "jsdom": "^24.0.0",
+ "jsdom": "^25.0.0",
+ "knip": "^5.27.2",
+ "livekit-client": "^2.0.2",
+ "lodash": "^4.17.21",
+ "loglevel": "^1.9.1",
+ "matrix-js-sdk": "^v34.4.0",
+ "matrix-widget-api": "^1.8.2",
+ "normalize.css": "^8.0.1",
+ "observable-hooks": "^4.2.3",
+ "pako": "^2.0.4",
+ "postcss": "^8.4.41",
+ "postcss-preset-env": "^10.0.0",
+ "posthog-js": "^1.29.0",
"prettier": "^3.0.0",
+ "qrcode": "^1.5.4",
+ "react": "18",
+ "react-dom": "18",
+ "react-i18next": "^15.0.0",
+ "react-router-dom": "^5.2.0",
+ "react-use-clipboard": "^1.0.7",
+ "react-use-measure": "^2.1.1",
+ "rxjs": "^7.8.1",
"sass": "^1.42.1",
"typescript": "^5.1.6",
"typescript-eslint-language-service": "^5.0.5",
+ "unique-names-generator": "^4.6.0",
+ "vaul": "^0.9.0",
"vite": "^5.0.0",
"vite-plugin-html-template": "^1.1.0",
"vite-plugin-svgr": "^4.0.0",
diff --git a/public/locales/en-GB/app.json b/public/locales/en-GB/app.json
index acecfc4f..6581274a 100644
--- a/public/locales/en-GB/app.json
+++ b/public/locales/en-GB/app.json
@@ -4,8 +4,8 @@
},
"action": {
"close": "Close",
- "copy": "Copy",
"copy_link": "Copy link",
+ "edit": "Edit",
"go": "Go",
"invite": "Invite",
"no": "No",
@@ -13,7 +13,8 @@
"remove": "Remove",
"sign_in": "Sign in",
"sign_out": "Sign out",
- "submit": "Submit"
+ "submit": "Submit",
+ "upload_file": "Upload file"
},
"analytics_notice": "By participating in this beta, you consent to the collection of anonymous data, which we use to improve the product. You can find more information about which data we track in our <2>Privacy Policy and our <5>Cookie Policy.",
"app_selection_modal": {
@@ -43,7 +44,6 @@
"avatar": "Avatar",
"back": "Back",
"camera": "Camera",
- "copied": "Copied!",
"display_name": "Display name",
"encrypted": "Encrypted",
"error": "Error",
@@ -107,6 +107,7 @@
"mute_microphone_button_label": "Mute microphone",
"participant_count_one": "{{count, number}}",
"participant_count_other": "{{count, number}}",
+ "qr_code": "QR Code",
"rageshake_button_error_caption": "Retry sending logs",
"rageshake_request_modal": {
"body": "Another user on this call is having an issue. In order to better diagnose these issues we'd like to collect a debug log.",
@@ -130,7 +131,6 @@
"room_auth_view_eula_caption": "By clicking \"Join call now\", you agree to our <2>End User Licensing Agreement (EULA)",
"room_auth_view_join_button": "Join call now",
"screenshare_button_label": "Share screen",
- "select_input_unset_button": "Select an option",
"settings": {
"developer_settings_label": "Developer Settings",
"developer_settings_label_description": "Expose developer settings in the settings window.",
diff --git a/renovate.json b/renovate.json
index 10dfca5d..91fc985a 100644
--- a/renovate.json
+++ b/renovate.json
@@ -44,20 +44,5 @@
"prHeader": "Please review modals on mobile for visual regressions."
}
],
- "semanticCommits": "disabled",
- "ignoreDeps": [
- "@react-aria/button",
- "@react-aria/focus",
- "@react-aria/menu",
- "@react-aria/overlays",
- "@react-aria/select",
- "@react-aria/tabs",
- "@react-aria/tooltip",
- "@react-aria/utils",
- "@react-stately/collections",
- "@react-stately/select",
- "@react-stately/tooltip",
- "@react-stately/tree",
- "@react-types/dialog"
- ]
+ "semanticCommits": "disabled"
}
diff --git a/src/@types/global.d.ts b/src/@types/global.d.ts
index ad0f6570..fcb86147 100644
--- a/src/@types/global.d.ts
+++ b/src/@types/global.d.ts
@@ -15,6 +15,7 @@ limitations under the License.
*/
import "matrix-js-sdk/src/@types/global";
+import { Controls } from "../controls";
declare global {
interface Document {
@@ -23,6 +24,10 @@ declare global {
webkitFullscreenElement: HTMLElement | null;
}
+ interface Window {
+ controls: Controls;
+ }
+
interface HTMLElement {
// Safari only supports this prefixed, so tell the type system about it
webkitRequestFullscreen: () => void;
diff --git a/src/App.tsx b/src/App.tsx
index bcd049b1..fc12af39 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -22,7 +22,6 @@ import {
useLocation,
} from "react-router-dom";
import * as Sentry from "@sentry/react";
-import { OverlayProvider } from "@react-aria/overlays";
import { History } from "history";
import { TooltipProvider } from "@vector-im/compound-web";
@@ -92,23 +91,21 @@ export const App: FC