Merge branch 'livekit' into layout-state

src/App.tsx

@@ -72,7 +72,9 @@ export const App: FC<AppProps> = ({ history }) => {
   const [loaded, setLoaded] = useState(false);
   useEffect(() => {
     Initializer.init()?.then(() => {
+      if (loaded) return;
       setLoaded(true);
+      widget?.api.sendContentLoaded();
     });
   });
 

src/FullScreenView.tsx

@@ -27,6 +27,7 @@ import styles from "./FullScreenView.module.css";
 import { TranslatedError } from "./TranslatedError";
 import { Config } from "./config/Config";
 import { RageshakeButton } from "./settings/RageshakeButton";
+import { useUrlParams } from "./UrlParams";
 
 interface FullScreenViewProps {
   className?: string;
@@ -37,12 +38,11 @@ export const FullScreenView: FC<FullScreenViewProps> = ({
   className,
   children,
 }) => {
+  const { hideHeader } = useUrlParams();
   return (
     <div className={classNames(styles.page, className)}>
       <Header>
-        <LeftNav>
-          <HeaderLogo />
-        </LeftNav>
+        <LeftNav>{!hideHeader && <HeaderLogo />}</LeftNav>
         <RightNav />
       </Header>
       <div className={styles.container}>

src/analytics/PosthogAnalytics.ts

@@ -31,6 +31,7 @@ import {
   UndecryptableToDeviceEventTracker,
   QualitySurveyEventTracker,
   CallDisconnectedEventTracker,
+  CallConnectDurationTracker,
 } from "./PosthogEvents";
 import { Config } from "../config/Config";
 import { getUrlParams } from "../UrlParams";
@@ -444,4 +445,5 @@ export class PosthogAnalytics {
   public eventUndecryptableToDevice = new UndecryptableToDeviceEventTracker();
   public eventQualitySurvey = new QualitySurveyEventTracker();
   public eventCallDisconnected = new CallDisconnectedEventTracker();
+  public eventCallConnectDuration = new CallConnectDurationTracker();
 }

src/analytics/PosthogEvents.ts

@@ -15,6 +15,7 @@ limitations under the License.
 */
 
 import { DisconnectReason } from "livekit-client";
+import { logger } from "matrix-js-sdk/src/logger";
 
 import {
   IPosthogEvent,
@@ -201,3 +202,38 @@ export class CallDisconnectedEventTracker {
     });
   }
 }
+
+interface CallConnectDuration extends IPosthogEvent {
+  eventName: "CallConnectDuration";
+  totalDuration: number;
+  websocketDuration: number;
+  peerConnectionDuration: number;
+}
+
+export class CallConnectDurationTracker {
+  private connectStart = 0;
+  private websocketConnected = 0;
+  public cacheConnectStart(): void {
+    this.connectStart = Date.now();
+  }
+  public cacheWsConnect(): void {
+    this.websocketConnected = Date.now();
+  }
+
+  public track(options = { log: false }): void {
+    const now = Date.now();
+    const totalDuration = now - this.connectStart;
+    const websocketDuration = this.websocketConnected - this.connectStart;
+    const peerConnectionDuration = now - this.websocketConnected;
+    PosthogAnalytics.instance.trackEvent<CallConnectDuration>({
+      eventName: "CallConnectDuration",
+      totalDuration,
+      websocketDuration,
+      peerConnectionDuration,
+    });
+    if (options.log)
+      logger.log(
+        `Time to connect:\ntotal: ${totalDuration}ms\npeerConnection: ${websocketDuration}ms\nwebsocket: ${peerConnectionDuration}ms`,
+      );
+  }
+}

src/auth/LoginPage.tsx

@@ -82,7 +82,12 @@ export const LoginPage: FC = () => {
     },
     [login, location, history, homeserver, setClient],
   );
-
+  // we need to limit the length of the homserver name to not cover the whole loginview input with the string.
+  let shortendHomeserverName = Config.defaultServerName()?.slice(0, 25);
+  shortendHomeserverName =
+    shortendHomeserverName?.length !== Config.defaultServerName()?.length
+      ? shortendHomeserverName + "..."
+      : shortendHomeserverName;
   return (
     <>
       <div className={styles.container}>
@@ -102,7 +107,7 @@ export const LoginPage: FC = () => {
                   autoCorrect="off"
                   autoCapitalize="none"
                   prefix="@"
-                  suffix={`:${Config.defaultServerName()}`}
+                  suffix={`:${shortendHomeserverName}`}
                   data-testid="login_username"
                 />
               </FieldRow>

src/auth/useInteractiveRegistration.ts

@@ -21,6 +21,7 @@ import { createClient, MatrixClient } from "matrix-js-sdk/src/matrix";
 import { initClient } from "../matrix-utils";
 import { Session } from "../ClientContext";
 import { Config } from "../config/Config";
+import { widget } from "../widget";
 
 export const useInteractiveRegistration = (): {
   privacyPolicyUrl?: string;
@@ -48,6 +49,8 @@ export const useInteractiveRegistration = (): {
   }
 
   useEffect(() => {
+    if (widget) return;
+    // An empty registerRequest is used to get the privacy policy and recaptcha key.
     authClient.current!.registerRequest({}).catch((error) => {
       setPrivacyPolicyUrl(
         error.data?.params["m.login.terms"]?.policies?.privacy_policy?.en?.url,

src/index.css

@@ -156,6 +156,12 @@ body {
   margin: 0;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  -webkit-tap-highlight-color: transparent;
+}
+
+/* We use this to not render the page at all until we know the theme.*/
+.no-theme {
+  opacity: 0;
 }
 
 html,

src/livekit/options.ts

@@ -59,4 +59,5 @@ export const defaultLiveKitOptions: RoomOptions = {
   stopLocalTrackOnUnpublish: true,
   reconnectPolicy: new DefaultReconnectPolicy(),
   disconnectOnPageLeave: true,
+  webAudioMix: false,
 };

src/livekit/useECConnectionState.ts

@@ -27,6 +27,14 @@ import { logger } from "matrix-js-sdk/src/logger";
 import * as Sentry from "@sentry/react";
 
 import { SFUConfig, sfuConfigEquals } from "./openIDSFU";
+import { PosthogAnalytics } from "../analytics/PosthogAnalytics";
+
+declare global {
+  interface Window {
+    peerConnectionTimeout?: number;
+    websocketTimeout?: number;
+  }
+}
 
 /*
  * Additional values for states that a call can be in, beyond what livekit
@@ -124,7 +132,21 @@ async function connectAndPublish(
   micTrack: LocalTrack | undefined,
   screenshareTracks: MediaStreamTrack[],
 ): Promise<void> {
-  await livekitRoom!.connect(sfuConfig!.url, sfuConfig!.jwt);
+  const tracker = PosthogAnalytics.instance.eventCallConnectDuration;
+  // Track call connect duration
+  tracker.cacheConnectStart();
+  livekitRoom.once(RoomEvent.SignalConnected, tracker.cacheWsConnect);
+
+  await livekitRoom!.connect(sfuConfig!.url, sfuConfig!.jwt, {
+    // Due to stability issues on Firefox we are testing the effect of different
+    // timeouts, and allow these values to be set through the console
+    peerConnectionTimeout: window.peerConnectionTimeout ?? 45000,
+    websocketTimeout: window.websocketTimeout ?? 45000,
+  });
+
+  // remove listener in case the connect promise rejects before `SignalConnected` is emitted.
+  livekitRoom.off(RoomEvent.SignalConnected, tracker.cacheWsConnect);
+  tracker.track({ log: true });
 
   if (micTrack) {
     logger.info(`Publishing precreated mic track`);

src/state/useObservable.ts

@@ -1,5 +1,5 @@
 /*
-Copyright 2023 New Vector Ltd
+Copyright 2023-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,18 +14,17 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { useEffect, useRef } from "react";
+import { useRef } from "react";
 import { BehaviorSubject, Observable } from "rxjs";
 
 /**
  * React hook that creates an Observable from a changing value. The Observable
- * replays its current value upon subscription, emits whenever the value
- * changes, and completes when the component is unmounted.
+ * replays its current value upon subscription and emits whenever the value
+ * changes.
  */
 export function useObservable<T>(value: T): Observable<T> {
   const subject = useRef<BehaviorSubject<T>>();
   subject.current ??= new BehaviorSubject(value);
   if (value !== subject.current.value) subject.current.next(value);
-  useEffect(() => subject.current!.complete(), []);
   return subject.current;
 }

src/useTheme.ts

@@ -22,10 +22,9 @@ export const useTheme = (): void => {
   const { theme: themeName } = useUrlParams();
   const previousTheme = useRef<string | null>(document.body.classList.item(0));
   useLayoutEffect(() => {
-    // Don't update the current theme if the url does not contain a theme prop.
-    if (!themeName) return;
-    const theme = themeName.includes("light") ? "light" : "dark";
-    const themeHighContrast = themeName.includes("high-contrast") ? "-hc" : "";
+    // If the url does not contain a theme props we default to "dark".
+    const theme = themeName?.includes("light") ? "light" : "dark";
+    const themeHighContrast = themeName?.includes("high-contrast") ? "-hc" : "";
     const themeString = "cpd-theme-" + theme + themeHighContrast;
     if (themeString !== previousTheme.current) {
       document.body.classList.remove(
@@ -37,5 +36,6 @@ export const useTheme = (): void => {
       document.body.classList.add(themeString);
       previousTheme.current = themeString;
     }
+    document.body.classList.remove("no-theme");
   }, [previousTheme, themeName]);
 };

src/widget.ts

@@ -158,6 +158,8 @@ export const widget = ((): WidgetHelpers | null => {
           useE2eForGroupCall: e2eEnabled,
           fallbackICEServerAllowed: allowIceFallback,
         },
+        // ContentLoaded event will be sent as soon as the theme is set (see useTheme.ts)
+        false,
       );
 
       const clientPromise = new Promise<MatrixClient>((resolve) => {