Merge branch 'livekit' into remove-walkie-talkie

src/UrlParams.ts

@@ -90,6 +90,22 @@ interface UrlParams {
   password: string | null;
 }
 
+export function editFragmentQuery(
+  hash: string,
+  edit: (params: URLSearchParams) => URLSearchParams
+): string {
+  const fragmentQueryStart = hash.indexOf("?");
+  const fragmentParams = edit(
+    new URLSearchParams(
+      fragmentQueryStart === -1 ? "" : hash.substring(fragmentQueryStart)
+    )
+  );
+  return `${hash.substring(
+    0,
+    fragmentQueryStart
+  )}?${fragmentParams.toString()}`;
+}
+
 /**
  * Gets the app parameters for the current URL.
  * @param ignoreRoomAlias If true, does not try to parse a room alias from the URL

src/button/Button.tsx

@@ -145,11 +145,11 @@ export function MicButton({
 }) {
   const { t } = useTranslation();
   const Icon = muted ? MicOffSolidIcon : MicOnSolidIcon;
-  const label = muted ? t("Microphone off") : t("Microphone on");
+  const label = muted ? t("Unmute microphone") : t("Mute microphone");
 
   return (
     <Tooltip label={label}>
-      <Button variant="toolbar" {...rest} on={!muted}>
+      <Button variant="toolbar" {...rest} on={muted}>
         <Icon aria-label={label} />
       </Button>
     </Tooltip>
@@ -166,11 +166,11 @@ export function VideoButton({
 }) {
   const { t } = useTranslation();
   const Icon = muted ? VideoCallOffIcon : VideoCallIcon;
-  const label = muted ? t("Video off") : t("Video on");
+  const label = muted ? t("Start video") : t("Stop video");
 
   return (
     <Tooltip label={label}>
-      <Button variant="toolbar" {...rest} on={!muted}>
+      <Button variant="toolbar" {...rest} on={muted}>
         <Icon aria-label={label} />
       </Button>
     </Tooltip>

src/room/AppSelectionModal.module.css

@@ -0,0 +1,33 @@
+/*
+Copyright 2023 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.
+*/
+
+.modal p {
+  text-align: center;
+  margin-block-end: var(--cpd-space-8x);
+}
+
+.modal button,
+.modal a {
+  width: 100%;
+}
+
+.modal button {
+  margin-block-end: var(--cpd-space-6x);
+}
+
+.modal a {
+  box-sizing: border-box;
+}

src/room/AppSelectionModal.tsx

@@ -0,0 +1,80 @@
+/*
+Copyright 2023 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, MouseEvent, useCallback, useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Button, Text } from "@vector-im/compound-web";
+import { ReactComponent as PopOutIcon } from "@vector-im/compound-design-tokens/icons/pop-out.svg";
+
+import { Modal } from "../Modal";
+import { useRoomSharedKey } from "../e2ee/sharedKeyManagement";
+import { getRoomUrl } from "../matrix-utils";
+import styles from "./AppSelectionModal.module.css";
+import { editFragmentQuery } from "../UrlParams";
+
+interface Props {
+  roomId: string | null;
+}
+
+export const AppSelectionModal: FC<Props> = ({ roomId }) => {
+  const { t } = useTranslation();
+
+  const [open, setOpen] = useState(true);
+  const onBrowserClick = useCallback(
+    (e: MouseEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+      setOpen(false);
+    },
+    [setOpen]
+  );
+
+  const roomSharedKey = useRoomSharedKey(roomId ?? "");
+  const appUrl = useMemo(() => {
+    // If the room ID is not known, fall back to the URL of the current page
+    const url = new URL(
+      roomId === null
+        ? window.location.href
+        : getRoomUrl(roomId, roomSharedKey ?? undefined)
+    );
+    // Edit the URL so that it opens in embedded mode. We do this for two
+    // reasons: It causes the mobile app to limit the user to only visiting the
+    // room in question, and it prevents this app selection prompt from being
+    // shown a second time.
+    url.hash = editFragmentQuery(url.hash, (params) => {
+      params.set("isEmbedded", "");
+      return params;
+    });
+
+    const result = new URL("element://call");
+    result.searchParams.set("url", url.toString());
+    return result.toString();
+  }, [roomId, roomSharedKey]);
+
+  return (
+    <Modal className={styles.modal} title={t("Select app")} open={open}>
+      <Text size="md" weight="semibold">
+        {t("Ready to join?")}
+      </Text>
+      <Button kind="secondary" onClick={onBrowserClick}>
+        {t("Continue in browser")}
+      </Button>
+      <Button as="a" href={appUrl} Icon={PopOutIcon}>
+        {t("Open in the app")}
+      </Button>
+    </Modal>
+  );
+};

src/room/CallEndedView.module.css

@@ -17,7 +17,8 @@ limitations under the License.
 .headline {
   text-align: center;
   margin-bottom: 60px;
-  white-space: pre;
+  white-space: pre-wrap;
+  overflow-wrap: break-word;
 }
 
 .callEndedContent {
@@ -66,6 +67,7 @@ limitations under the License.
   flex: 1;
   flex-direction: column;
   align-items: center;
+  padding-inline: var(--inline-content-inset);
 }
 
 .logo {

src/room/RoomPage.tsx

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { FC, useEffect, useState, useCallback } from "react";
+import { FC, useEffect, useState, useCallback, ReactNode } from "react";
 import { MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc/MatrixRTCSession";
 
 import { useClientLegacy } from "../ClientContext";
@@ -26,6 +26,8 @@ import { useUrlParams } from "../UrlParams";
 import { useRegisterPasswordlessUser } from "../auth/useRegisterPasswordlessUser";
 import { useOptInAnalytics } from "../settings/useSetting";
 import { HomePage } from "../home/HomePage";
+import { platform } from "../Platform";
+import { AppSelectionModal } from "./AppSelectionModal";
 
 export const RoomPage: FC = () => {
   const {
@@ -85,29 +87,36 @@ export const RoomPage: FC = () => {
     [client, passwordlessUser, isEmbedded, preload, hideHeader]
   );
 
+  let content: ReactNode;
   if (loading || isRegistering) {
-    return <LoadingView />;
-  }
-
-  if (error) {
-    return <ErrorView error={error} />;
-  }
-
-  if (!client) {
-    return <RoomAuthView />;
-  }
-
-  if (!roomIdOrAlias) {
-    return <HomePage />;
+    content = <LoadingView />;
+  } else if (error) {
+    content = <ErrorView error={error} />;
+  } else if (!client) {
+    content = <RoomAuthView />;
+  } else if (!roomIdOrAlias) {
+    // TODO: This doesn't belong here, the app routes need to be reworked
+    content = <HomePage />;
+  } else {
+    content = (
+      <GroupCallLoader
+        client={client}
+        roomIdOrAlias={roomIdOrAlias}
+        viaServers={viaServers}
+      >
+        {groupCallView}
+      </GroupCallLoader>
+    );
   }
 
   return (
-    <GroupCallLoader
-      client={client}
-      roomIdOrAlias={roomIdOrAlias}
-      viaServers={viaServers}
-    >
-      {groupCallView}
-    </GroupCallLoader>
+    <>
+      {content}
+      {/* On mobile, show a prompt to launch the mobile app. If in embedded mode,
+    that means we *are* in the mobile app and should show no further prompt. */}
+      {(platform === "android" || platform === "ios") && !isEmbedded && (
+        <AppSelectionModal roomId={roomId} />
+      )}
+    </>
   );
 };