Merge branch 'livekit' into johannes/remove-call

.eslintrc.cjs

@@ -1,17 +1,8 @@
 const COPYRIGHT_HEADER = `/*
-Copyright %%CURRENT_YEAR%% New Vector Ltd
+Copyright %%CURRENT_YEAR%% 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.
+SPDX-License-Identifier: AGPL-3.0-only
+Please see LICENSE in the repository root for full details.
 */
 
 `;

.github/workflows/element-call.yaml

@@ -39,7 +39,7 @@ jobs:
           VITE_APP_VERSION: ${{ inputs.vite_app_version }}
           NODE_OPTIONS: "--max-old-space-size=4096"
       - name: Upload Artifact
-        uses: actions/upload-artifact@834a144ee995460fba8ed112a2fc961b36a5ec5a # v4
+        uses: actions/upload-artifact@50769540e7f4bd5e21e526ee35c689e35e0d6874 # v4
         with:
           name: build-output
           path: dist

.github/workflows/translations-download.yaml

@@ -39,7 +39,7 @@ jobs:
 
       - name: Create Pull Request
         id: cpr
-        uses: peter-evans/create-pull-request@c5a7806660adbe173f04e3e038b0ccdcd758773c # v6.1.0
+        uses: peter-evans/create-pull-request@d121e62763d8cc35b5fb1710e887d6e69a52d3a4 # v7.0.2
         with:
           token: ${{ secrets.ELEMENT_BOT_TOKEN }}
           branch: actions/localazy-download

src/analytics/AnalyticsNotice.tsx

@@ -8,14 +8,20 @@ Please see LICENSE in the repository root for full details.
 import { FC } from "react";
 import { Trans } from "react-i18next";
 
-import { Link } from "../typography/Typography";
+import { ExternalLink } from "../button/Link";
 
 export const AnalyticsNotice: FC = () => (
   <Trans i18nKey="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{" "}
-    <Link href="https://element.io/privacy">Privacy Policy</Link> and our{" "}
-    <Link href="https://element.io/cookie-policy">Cookie Policy</Link>.
+    <ExternalLink href="https://element.io/privacy">
+      Privacy Policy
+    </ExternalLink>{" "}
+    and our{" "}
+    <ExternalLink href="https://element.io/cookie-policy">
+      Cookie Policy
+    </ExternalLink>
+    .
   </Trans>
 );

src/auth/RegisterPage.tsx

@@ -19,7 +19,7 @@ import { captureException } from "@sentry/react";
 import { sleep } from "matrix-js-sdk/src/utils";
 import { Trans, useTranslation } from "react-i18next";
 import { logger } from "matrix-js-sdk/src/logger";
-import { Button } from "@vector-im/compound-web";
+import { Button, Text } from "@vector-im/compound-web";
 
 import { FieldRow, InputField, ErrorMessage } from "../input/Input";
 import { useClientLegacy } from "../ClientContext";
@@ -28,10 +28,10 @@ import styles from "./LoginPage.module.css";
 import Logo from "../icons/LogoLarge.svg?react";
 import { LoadingView } from "../FullScreenView";
 import { useRecaptcha } from "./useRecaptcha";
-import { Caption, Link } from "../typography/Typography";
 import { usePageTitle } from "../usePageTitle";
 import { PosthogAnalytics } from "../analytics/PosthogAnalytics";
 import { Config } from "../config/Config";
+import { ExternalLink, Link } from "../button/Link";
 
 export const RegisterPage: FC = () => {
   const { t } = useTranslation();
@@ -201,24 +201,24 @@ export const RegisterPage: FC = () => {
                   data-testid="register_confirm_password"
                 />
               </FieldRow>
-              <Caption>
+              <Text size="sm">
                 <Trans i18nKey="recaptcha_caption">
                   This site is protected by ReCAPTCHA and the Google{" "}
-                  <Link href="https://www.google.com/policies/privacy/">
+                  <ExternalLink href="https://www.google.com/policies/privacy/">
                     Privacy Policy
-                  </Link>{" "}
+                  </ExternalLink>{" "}
                   and{" "}
-                  <Link href="https://policies.google.com/terms">
+                  <ExternalLink href="https://policies.google.com/terms">
                     Terms of Service
-                  </Link>{" "}
+                  </ExternalLink>{" "}
                   apply.
                   <br />
                   By clicking "Register", you agree to our{" "}
-                  <Link href={Config.get().eula}>
+                  <ExternalLink href={Config.get().eula}>
                     End User Licensing Agreement (EULA)
-                  </Link>
+                  </ExternalLink>
                 </Trans>
-              </Caption>
+              </Text>
               {error && (
                 <FieldRow>
                   <ErrorMessage error={error} />

src/button/Link.module.css

@@ -0,0 +1,13 @@
+/*
+Copyright 2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only
+Please see LICENSE in the repository root for full details.
+*/
+
+.external {
+  /* By default links will be blue/purple (or whatever the user agent does), but
+  in our designs we generally want external links to be the same color as the
+  surrounding text */
+  color: inherit;
+}

src/button/Link.tsx

@@ -15,10 +15,16 @@ import {
 import { Link as CpdLink } from "@vector-im/compound-web";
 import { useHistory } from "react-router-dom";
 import { createPath, LocationDescriptor, Path } from "history";
+import classNames from "classnames";
+
+import { useLatest } from "../useLatest";
+import styles from "./Link.module.css";
 
 export function useLink(
   to: LocationDescriptor,
+  state?: unknown,
 ): [Path, (e: MouseEvent) => void] {
+  const latestState = useLatest(state);
   const history = useHistory();
   const path = useMemo(
     () => (typeof to === "string" ? to : createPath(to)),
@@ -27,9 +33,9 @@ export function useLink(
   const onClick = useCallback(
     (e: MouseEvent) => {
       e.preventDefault();
-      history.push(to);
+      history.push(to, latestState.current);
     },
-    [history, to],
+    [history, to, latestState],
   );
 
   return [path, onClick];
@@ -38,15 +44,37 @@ export function useLink(
 type Props = Omit<
   ComponentPropsWithoutRef<typeof CpdLink>,
   "href" | "onClick"
-> & { to: LocationDescriptor };
+> & { to: LocationDescriptor; state?: unknown };
 
 /**
  * A version of Compound's link component that integrates with our router setup.
+ * This is only for app-internal links.
  */
 export const Link = forwardRef<HTMLAnchorElement, Props>(function Link(
-  { to, ...props },
+  { to, state, ...props },
   ref,
 ) {
-  const [path, onClick] = useLink(to);
+  const [path, onClick] = useLink(to, state);
   return <CpdLink ref={ref} {...props} href={path} onClick={onClick} />;
 });
+
+/**
+ * A link to an external web page, made to fit into blocks of text more subtly
+ * than the normal Compound link component.
+ */
+export const ExternalLink = forwardRef<
+  HTMLAnchorElement,
+  ComponentPropsWithoutRef<"a">
+>(function ExternalLink({ className, children, ...props }, ref) {
+  return (
+    <a
+      ref={ref}
+      className={classNames(className, styles.external)}
+      target="_blank"
+      rel="noreferrer noopener"
+      {...props}
+    >
+      {children}
+    </a>
+  );
+});

src/home/CallList.module.css

@@ -50,6 +50,12 @@ Please see LICENSE in the repository root for full details.
   margin-bottom: 0;
 }
 
+.callName {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .facePile {
   margin-top: 8px;
 }

src/home/CallList.tsx

@@ -11,14 +11,13 @@ import { RoomMember } from "matrix-js-sdk/src/models/room-member";
 import { Room } from "matrix-js-sdk/src/models/room";
 import { FC, useCallback, MouseEvent, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { IconButton } from "@vector-im/compound-web";
+import { IconButton, Text } from "@vector-im/compound-web";
 import { CloseIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
 import classNames from "classnames";
 
 import { Avatar, Size } from "../Avatar";
 import styles from "./CallList.module.css";
 import { getRelativeRoomUrl } from "../utils/matrix";
-import { Body } from "../typography/Typography";
 import { GroupCallRoom } from "./useGroupCallRooms";
 import { useRoomEncryptionSystem } from "../e2ee/sharedKeyManagement";
 
@@ -78,9 +77,9 @@ const CallTile: FC<CallTileProps> = ({ name, avatarUrl, room, client }) => {
     <>
       <Avatar id={room.roomId} name={name} size={Size.LG} src={avatarUrl} />
       <div className={styles.callInfo}>
-        <Body overflowEllipsis fontWeight="semiBold">
+        <Text weight="semibold" className={styles.callName}>
           {name}
-        </Body>
+        </Text>
       </div>
       <IconButton
         onClick={onRemove}

src/home/RegisteredView.tsx

@@ -9,7 +9,7 @@ import { useState, useCallback, FormEvent, FormEventHandler, FC } from "react";
 import { useHistory } from "react-router-dom";
 import { MatrixClient } from "matrix-js-sdk/src/client";
 import { useTranslation } from "react-i18next";
-import { Heading } from "@vector-im/compound-web";
+import { Heading, Text } from "@vector-im/compound-web";
 import { logger } from "matrix-js-sdk/src/logger";
 import { Button } from "@vector-im/compound-web";
 
@@ -27,7 +27,6 @@ import { FieldRow, InputField, ErrorMessage } from "../input/Input";
 import { CallList } from "./CallList";
 import { UserMenuContainer } from "../UserMenuContainer";
 import { JoinExistingCallModal } from "./JoinExistingCallModal";
-import { Caption } from "../typography/Typography";
 import { Form } from "../form/Form";
 import { AnalyticsNotice } from "../analytics/AnalyticsNotice";
 import { E2eeType } from "../e2ee/e2eeType";
@@ -144,9 +143,9 @@ export const RegisteredView: FC<Props> = ({ client }) => {
               </Button>
             </FieldRow>
             {optInAnalytics === null && (
-              <Caption className={styles.notice}>
+              <Text size="sm" className={styles.notice}>
                 <AnalyticsNotice />
-              </Caption>
+              </Text>
             )}
             {error && (
               <FieldRow className={styles.fieldRow}>

src/home/UnauthenticatedView.tsx

@@ -9,7 +9,7 @@ import { FC, useCallback, useState, FormEventHandler } from "react";
 import { useHistory } from "react-router-dom";
 import { randomString } from "matrix-js-sdk/src/randomstring";
 import { Trans, useTranslation } from "react-i18next";
-import { Button, Heading } from "@vector-im/compound-web";
+import { Button, Heading, Text } from "@vector-im/compound-web";
 import { logger } from "matrix-js-sdk/src/logger";
 
 import { useClient } from "../ClientContext";
@@ -25,7 +25,6 @@ import {
 import { useInteractiveRegistration } from "../auth/useInteractiveRegistration";
 import { JoinExistingCallModal } from "./JoinExistingCallModal";
 import { useRecaptcha } from "../auth/useRecaptcha";
-import { Body, Caption, Link } from "../typography/Typography";
 import { Form } from "../form/Form";
 import styles from "./UnauthenticatedView.module.css";
 import commonStyles from "./common.module.css";
@@ -34,6 +33,7 @@ import { AnalyticsNotice } from "../analytics/AnalyticsNotice";
 import { Config } from "../config/Config";
 import { E2eeType } from "../e2ee/e2eeType";
 import { useOptInAnalytics } from "../settings/settings";
+import { ExternalLink, Link } from "../button/Link";
 
 export const UnauthenticatedView: FC = () => {
   const { setClient } = useClient();
@@ -178,18 +178,18 @@ export const UnauthenticatedView: FC = () => {
               />
             </FieldRow>
             {optInAnalytics === null && (
-              <Caption className={styles.notice}>
+              <Text size="sm" className={styles.notice}>
                 <AnalyticsNotice />
-              </Caption>
+              </Text>
             )}
-            <Caption className={styles.notice}>
+            <Text size="sm" className={styles.notice}>
               <Trans i18nKey="unauthenticated_view_eula_caption">
                 By clicking "Go", you agree to our{" "}
-                <Link href={Config.get().eula}>
+                <ExternalLink href={Config.get().eula}>
                   End User Licensing Agreement (EULA)
-                </Link>
+                </ExternalLink>
               </Trans>
-            </Caption>
+            </Text>
             {error && (
               <FieldRow>
                 <ErrorMessage error={error} />
@@ -207,19 +207,19 @@ export const UnauthenticatedView: FC = () => {
           </Form>
         </main>
         <footer className={styles.footer}>
-          <Body className={styles.mobileLoginLink}>
-            <Link color="primary" to="/login" data-testid="home_login">
+          <Text className={styles.mobileLoginLink}>
+            <Link to="/login" data-testid="home_login">
               {t("unauthenticated_view_login_button")}
             </Link>
-          </Body>
-          <Body>
+          </Text>
+          <Text>
             <Trans i18nKey="unauthenticated_view_body">
               Not registered yet?{" "}
-              <Link color="primary" to="/register" data-testid="home_register">
+              <Link to="/register" data-testid="home_register">
                 Create an account
               </Link>
             </Trans>
-          </Body>
+          </Text>
         </footer>
       </div>
       {onFinished && (

src/index.css

@@ -237,16 +237,6 @@ body[data-platform="desktop"] {
     line-height: var(--font-size-title);
   }
 
-  a {
-    color: var(--cpd-color-text-action-accent);
-    text-decoration: none;
-  }
-
-  a:hover,
-  a:active {
-    opacity: 0.8;
-  }
-
   hr {
     width: calc(100% - 24px);
     border: none;

src/main.tsx

@@ -18,7 +18,7 @@ import "./index.css";
 import { logger } from "matrix-js-sdk/src/logger";
 import {
   setLogExtension as setLKLogExtension,
-  setLogLevel,
+  setLogLevel as setLKLogLevel,
 } from "livekit-client";
 
 import { App } from "./App";
@@ -28,9 +28,11 @@ import { Initializer } from "./initializer";
 initRageshake().catch((e) => {
   logger.error("Failed to initialize rageshake", e);
 });
-
-setLogLevel("debug");
-setLKLogExtension(global.mx_rage_logger.log);
+setLKLogLevel("debug");
+setLKLogExtension((level, msg, context) => {
+  // we pass a synthetic logger name of "livekit" to the rageshake to make it easier to read
+  global.mx_rage_logger.log(level, "livekit", msg, context);
+});
 
 logger.info(`Element Call ${import.meta.env.VITE_APP_VERSION || "dev"}`);