Merge branch 'main' into big-grid

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({