Merge branch 'main' into big-grid

README.md

@@ -42,6 +42,12 @@ server {
 }
 ```
 
+By default, the app expects you to have a Matrix homeserver (such as [Synapse](https://matrix-org.github.io/synapse/latest/setup/installation.html)) installed locally and running on port 8008. If you wish to use a homeserver on a different URL or one that is hosted on a different server, you can add a config file as above, and include the homeserver URL that you'd like to use.
+
+Element Call requires a homeserver with registration enabled without any 3pid or token requirements, if you want it to be used by unregistered users. Furthermore, it is not recommended to use it with an existing homeserver where user accounts have joined normal rooms, as it may not be able to handle those yet and it may behave unreliably.
+
+Therefore, to use a self-hosted homeserver, this is recommended to be a new server where any user account created has not joined any normal rooms anywhere in the Matrix federated network. The homeserver used can be setup to disable federation, so as to prevent spam registrations (if you keep registrations open) and to ensure Element Call continues to work in case any user decides to log in to their Element Call account using the standard Element app and joins normal rooms that Element Call cannot handle.
+
 ## Development
 
 Element Call is built against [matrix-js-sdk](https://github.com/matrix-org/matrix-js-sdk/pull/2553). To get started, clone, install, and link the package:
@@ -62,8 +68,6 @@ yarn
 yarn link matrix-js-sdk
 ```
 
-By default, the app expects you to have [Synapse](https://matrix-org.github.io/synapse/latest/setup/installation.html) installed locally and running on port 8008. If you wish to use another homeserver, you can add a config file as above.
-
 You're now ready to launch the development server:
 
 ```

config/element_io_preview.json

@@ -5,6 +5,10 @@
       "server_name": "call.ems.host"
     }
   },
+  "posthog": {
+    "api_key": "phc_rXGHx9vDmyEvyRxPziYtdVIv0ahEv8A9uLWFcCi1WcU",
+    "api_host": "https://posthog-element-call.element.io"
+  },
   "rageshake": {
     "submit_url": "https://element.io/bugreports/submit"
   }

public/locales/cs/app.json

@@ -136,5 +136,8 @@
   "<0>Why not finish by setting up a password to keep your account?</0><1>You'll be able to keep your name and set an avatar for use on future calls</1>": "<0>Proč neskončit nastavením hesla, abyste mohli účet použít znovu?</0><1>Budete si moci nechat své jméno a nastavit si avatar pro budoucí hovory </1>",
   "<0>Join call now</0><1>Or</1><2>Copy call link and join later</2>": "<0>Připojit se</0><1>Or</1><2>Zkopírovat odkaz a připojit se později</2>",
   "<0>Already have an account?</0><1><0>Log in</0> Or <2>Access as a guest</2></1>": "<0>Už máte účet?</0><1><0>Přihlásit se</0> Or <2>Jako host</2></1>",
-  "{{name}} (Waiting for video...)": "{{name}} (Čekání na video...)"
+  "{{name}} (Waiting for video...)": "{{name}} (Čekání na video...)",
+  "This feature is only supported on Firefox.": "Tato funkce je podporována jen ve Firefoxu.",
+  "<0>Submitting debug logs will help us track down the problem.</0>": "<0>Odeslání ladících záznamů nám pomůže diagnostikovat problém.</0>",
+  "<0>Oops, something's gone wrong.</0>": "<0>Oops, něco se pokazilo.</0>"
 }

public/locales/ja/app.json

@@ -90,6 +90,18 @@
   "Video": "ビデオ",
   "Waiting for other participants…": "他の参加者を待機しています…",
   "Waiting for network": "ネットワークを待機しています",
-  "Walkie-talkie call name": "トランシーバー通話の名前",
-  "Walkie-talkie call": "トランシーバー通話"
+  "Walkie-talkie call name": "トランシーバー通話の名称",
+  "Walkie-talkie call": "トランシーバー通話",
+  "Camera {{n}}": "カメラ {{n}}",
+  "{{name}} is talking…": "{{name}}が話しています…",
+  "Yes, join call": "はい、通話に参加",
+  "Spatial audio": "空間オーディオ",
+  "Select an option": "オプションを選択",
+  "Debug log request": "デバッグログを要求",
+  "Your recent calls": "最近の通話",
+  "You can't talk at the same time": "同時に会話することはできません",
+  "WebRTC is not supported or is being blocked in this browser.": "お使いのブラウザでWebRTCがサポートされていないか、またはブロックされています。",
+  "Login to your account": "お持ちのアカウントでログイン",
+  "Freedom": "自由",
+  "{{displayName}}, your call is now ended": "{{displayName}}、通話が終了しました"
 }

public/locales/pl/app.json

@@ -124,5 +124,16 @@
   "{{name}} is talking…": "{{name}} mówi…",
   "{{name}} is presenting": "{{name}} prezentuje",
   "{{displayName}}, your call is now ended": "{{displayName}}, twoje połączenie zostało zakończone",
-  "{{count}} people connected|one": "{{count}} osoba połączona"
+  "{{count}} people connected|one": "{{count}} osoba połączona",
+  "Whether to enable single-key keyboard shortcuts, e.g. 'm' to mute/unmute the mic.": "Czy włączyć skróty klawiszowe pojedynczych klawiszy, np. 'm' aby wyciszyć/załączyć mikrofon.",
+  "This feature is only supported on Firefox.": "Ta funkcjonalność jest dostępna tylko w Firefox.",
+  "Single-key keyboard shortcuts": "Skróty klawiszowe (pojedyncze klawisze)",
+  "Copy": "Kopiuj",
+  "Allow analytics": "Zezwól na analitykę",
+  "Advanced": "Zaawansowane",
+  "<0>Submitting debug logs will help us track down the problem.</0>": "<0>Wysłanie logów debuggowania pomoże nam ustalić przyczynę problemu.</0>",
+  "<0>Oops, something's gone wrong.</0>": "<0>Ojej, coś poszło nie tak.</0>",
+  "<0>Join call now</0><1>Or</1><2>Copy call link and join later</2>": "<0>Dołącz do rozmowy teraz</0><1>Or</1><2>Skopiuj link do rozmowy i dołącz później</2>",
+  "{{name}} (Waiting for video...)": "{{name}} (Oczekiwanie na wideo...)",
+  "{{name}} (Connecting...)": "{{name}} (Łączenie...)"
 }

public/locales/ru/app.json

@@ -132,6 +132,12 @@
   "Copy": "Копировать",
   "Allow analytics": "Разрешить аналитику",
   "Advanced": "Расширенные",
-  "<0>Join call now</0><1>Or</1><2>Copy call link and join later</2>": "<0>Присоединиться сейчас</0><1>или<1><2>Скопировать ссылку на звонок и присоединиться позже</2>",
-  "{{name}} (Connecting...)": "{{name}} (Соединение...)"
+  "<0>Join call now</0><1>Or</1><2>Copy call link and join later</2>": "<0>Присоединиться сейчас</0><1>или<1><2>cкопировать ссылку на звонок и присоединиться позже</2>",
+  "{{name}} (Connecting...)": "{{name}} (Соединение...)",
+  "Whether to enable single-key keyboard shortcuts, e.g. 'm' to mute/unmute the mic.": "Включить горячие клавиши, например 'm' чтобы отключить/включить микрофон.",
+  "This feature is only supported on Firefox.": "Эта возможность доступна только в Firefox.",
+  "Single-key keyboard shortcuts": "Горячие клавиши",
+  "<0>Submitting debug logs will help us track down the problem.</0>": "<0>Отправка журналов поможет нам найти и устранить проблему.</0>",
+  "<0>Oops, something's gone wrong.</0>": "<0>Упс, что-то пошло не так.</0>",
+  "{{name}} (Waiting for video...)": "{{name}} (Ожидание видео...)"
 }

src/PosthogAnalytics.ts

@@ -94,7 +94,7 @@ export class PosthogAnalytics {
   private static ANALYTICS_EVENT_TYPE = "im.vector.analytics";
 
   // set true during the constructor if posthog config is present, otherwise false
-  private static internalInstance = null;
+  private static internalInstance: PosthogAnalytics | null = null;
 
   private identificationPromise: Promise<void>;
   private readonly enabled: boolean = false;
@@ -137,6 +137,9 @@ export class PosthogAnalytics {
       });
       this.enabled = true;
     } else {
+      logger.info(
+        "Posthog is not enabled because there is no api key or no host given in the config"
+      );
       this.enabled = false;
     }
     this.startListeningToSettingsChanges();
@@ -225,9 +228,7 @@ export class PosthogAnalytics {
   }
 
   public async identifyUser(analyticsIdGenerator: () => string) {
-    // There might be a better way to get the client here.
-
-    if (this.anonymity == Anonymity.Pseudonymous) {
+    if (this.anonymity == Anonymity.Pseudonymous && this.enabled) {
       // Check the user's account_data for an analytics ID to use. Storing the ID in account_data allows
       // different devices to send the same ID.
       let analyticsID = await this.getAnalyticsId();

src/initializer.tsx

@@ -214,5 +214,5 @@ export class Initializer {
       resolve();
     }
   }
-  private initPromise: Promise<void>;
+  private initPromise: Promise<void> | null;
 }

src/room/PTTButton.tsx

@@ -17,6 +17,7 @@ limitations under the License.
 import React, { useCallback, useState, useRef } from "react";
 import classNames from "classnames";
 import { useSpring, animated } from "@react-spring/web";
+import { logger } from "@sentry/utils";
 
 import styles from "./PTTButton.module.css";
 import { ReactComponent as MicIcon } from "../icons/Mic.svg";
@@ -68,11 +69,23 @@ export const PTTButton: React.FC<Props> = ({
     enqueueNetworkWaiting(true, 100);
     startTalking();
   }, [enqueueNetworkWaiting, startTalking, buttonHeld]);
+
   const unhold = useCallback(() => {
+    if (!buttonHeld) return;
     setButtonHeld(false);
     setNetworkWaiting(false);
     stopTalking();
-  }, [setNetworkWaiting, stopTalking]);
+  }, [setNetworkWaiting, stopTalking, buttonHeld]);
+
+  const onMouseUp = useCallback(() => {
+    logger.info("Mouse up event: unholding PTT button");
+    unhold();
+  }, [unhold]);
+
+  const onBlur = useCallback(() => {
+    logger.info("Blur event: unholding PTT button");
+    unhold();
+  }, [unhold]);
 
   const onButtonMouseDown = useCallback(
     (e: React.MouseEvent<HTMLButtonElement>) => {
@@ -85,7 +98,7 @@ export const PTTButton: React.FC<Props> = ({
   // These listeners go on the window so even if the user's cursor / finger
   // leaves the button while holding it, the button stays pushed until
   // they stop clicking / tapping.
-  useEventTarget(window, "mouseup", unhold);
+  useEventTarget(window, "mouseup", onMouseUp);
   useEventTarget(
     window,
     "touchend",
@@ -103,6 +116,8 @@ export const PTTButton: React.FC<Props> = ({
         }
         if (!touchFound) return;
 
+        logger.info("Touch event ended: unholding PTT button");
+
         e.preventDefault();
         unhold();
         setActiveTouchId(null);
@@ -163,6 +178,8 @@ export const PTTButton: React.FC<Props> = ({
 
           e.preventDefault();
 
+          logger.info("Keyup event for spacebar: unholding PTT button");
+
           unhold();
         }
       },
@@ -171,7 +188,7 @@ export const PTTButton: React.FC<Props> = ({
   );
 
   // TODO: We will need to disable this for a global PTT hotkey to work
-  useEventTarget(window, "blur", unhold);
+  useEventTarget(window, "blur", onBlur);
 
   const prefersReducedMotion = usePrefersReducedMotion();
   const { shadow } = useSpring({

src/room/PTTCallView.tsx

@@ -210,36 +210,36 @@ export const PTTCallView: React.FC<Props> = ({
         </Header>
       )}
       <div className={styles.center}>
-        {showControls && (
-          <>
-            <div className={styles.participants}>
-              <p>
-                {t("{{count}} people connected", {
-                  count: participatingMembers.length,
-                })}
-              </p>
-              <Facepile
-                size={facepileSize}
-                max={8}
-                className={styles.facepile}
-                client={client}
-                members={participatingMembers}
-              />
-            </div>
-            <div className={styles.footer}>
-              <OverflowMenu
-                inCall
-                roomIdOrAlias={roomIdOrAlias}
-                groupCall={groupCall}
-                showInvite={false}
-                feedbackModalState={feedbackModalState}
-                feedbackModalProps={feedbackModalProps}
-              />
-              {!isEmbedded && <HangupButton onPress={onLeave} />}
-              <InviteButton onPress={() => inviteModalState.open()} />
-            </div>
-          </>
-        )}
+        {/* Always render this because the window will become shorter when the on-screen
+            keyboard appears, so if we don't render it, the dialog will unmount. */}
+        <div style={{ display: showControls ? "block" : "none" }}>
+          <div className={styles.participants}>
+            <p>
+              {t("{{count}} people connected", {
+                count: participatingMembers.length,
+              })}
+            </p>
+            <Facepile
+              size={facepileSize}
+              max={8}
+              className={styles.facepile}
+              client={client}
+              members={participatingMembers}
+            />
+          </div>
+          <div className={styles.footer}>
+            <OverflowMenu
+              inCall
+              roomIdOrAlias={roomIdOrAlias}
+              groupCall={groupCall}
+              showInvite={false}
+              feedbackModalState={feedbackModalState}
+              feedbackModalProps={feedbackModalProps}
+            />
+            {!isEmbedded && <HangupButton onPress={onLeave} />}
+            <InviteButton onPress={() => inviteModalState.open()} />
+          </div>
+        </div>
 
         <div className={styles.pttButtonContainer}>
           {showControls &&

src/room/useGroupCall.ts

@@ -158,6 +158,38 @@ export function useGroupCall(groupCall: GroupCall): UseGroupCallReturnType {
     [setState]
   );
 
+  const doNothingMediaActionCallback = useCallback(
+    (details: MediaSessionActionDetails) => {},
+    []
+  );
+
+  useEffect(() => {
+    // disable the media action keys, otherwise audio elements get paused when
+    // the user presses media keys or unplugs headphones, etc.
+    // Note there are actions for muting / unmuting a microphone & hanging up
+    // which we could wire up.
+    const mediaActions: MediaSessionAction[] = [
+      "play",
+      "pause",
+      "stop",
+      "nexttrack",
+      "previoustrack",
+    ];
+
+    for (const mediaAction of mediaActions) {
+      navigator.mediaSession.setActionHandler(
+        mediaAction,
+        doNothingMediaActionCallback
+      );
+    }
+
+    return () => {
+      for (const mediaAction of mediaActions) {
+        navigator.mediaSession.setActionHandler(mediaAction, null);
+      }
+    };
+  }, [doNothingMediaActionCallback]);
+
   useEffect(() => {
     function onGroupCallStateChanged() {
       updateState({