Matrix/element-call-Github
1
0
Fork 0
mirror of https://github.com/vector-im/element-call.git synced 2026-05-01 09:54:37 +00:00
Code Issues Packages Projects Releases Wiki Activity

Get rid of the 'open in app' mobile prompt

Browse Source 
We've determined that calls are working fine in mobile browsers these days and we no longer need it.
This commit is contained in:
Robin
2026-04-13 15:43:39 +02:00
parent 3b0dce33a2
commit 364fdb5e54
31 changed files with 8 additions and 331 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/room/AppSelectionModal.module.css
View File

@@ -1,24 +0,0 @@
/*
Copyright 2023, 2024 New Vector Ltd.
SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE in the repository root for full details.
*/
.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;
}

92
src/room/AppSelectionModal.tsx
View File

@@ -1,92 +0,0 @@
/*
Copyright 2023, 2024 New Vector Ltd.
SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE in the repository root for full details.
*/
import {
type FC,
type MouseEvent,
useCallback,
useMemo,
useState,
} from "react";
import { useTranslation } from "react-i18next";
import { Button, Text } from "@vector-im/compound-web";
import { PopOutIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
import { logger } from "matrix-js-sdk/lib/logger";
import { Modal } from "../Modal";
import { useRoomEncryptionSystem } from "../e2ee/sharedKeyManagement";
import { getAbsoluteRoomUrl } from "../utils/matrix";
import styles from "./AppSelectionModal.module.css";
import { editFragmentQuery } from "../UrlParams";
import { E2eeType } from "../e2ee/e2eeType";
interface Props {
roomId: string;
}
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 e2eeSystem = useRoomEncryptionSystem(roomId);
if (e2eeSystem.kind === E2eeType.NONE) {
logger.error(
"Generating app redirect URL for encrypted room but don't have key available!",
);
}
const appUrl = useMemo(() => {
// If the room ID is not known, fall back to the URL of the current page
// Also, we don't really know the room name at this stage as we haven't
// started a client and synced to get the room details. We could take the one
// we got in our own URL and use that, but it's not a string that a human
// ever sees so it's somewhat redundant. We just don't pass a name.
const url = new URL(
roomId === null
? window.location.href
: getAbsoluteRoomUrl(roomId, e2eeSystem),
);
// Edit the URL to prevent the app selection prompt from appearing a second
// time within the app, and to keep the user confined to the current room
url.hash = editFragmentQuery(url.hash, (params) => {
params.set("appPrompt", "false");
params.set("confineToRoom", "true");
return params;
});
const result = new URL("io.element.call:/");
result.searchParams.set("url", url.toString());
return result.toString();
}, [e2eeSystem, roomId]);
return (
<Modal
className={styles.modal}
title={t("app_selection_modal.title")}
open={open}
>
<Text size="md" weight="semibold">
{t("app_selection_modal.text")}
</Text>
<Button kind="secondary" onClick={onBrowserClick}>
{t("app_selection_modal.continue_in_browser")}
</Button>
<Button as="a" href={appUrl} Icon={PopOutIcon}>
{t("app_selection_modal.open_in_app")}
</Button>
</Modal>
);
};

38
src/room/RoomPage.tsx
View File

@@ -29,15 +29,12 @@ import { GroupCallView } from "./GroupCallView";
import { useRoomIdentifier, useUrlParams } from "../UrlParams";
import { useRegisterPasswordlessUser } from "../auth/useRegisterPasswordlessUser";
import { HomePage } from "../home/HomePage";
import { platform } from "../Platform";
import { AppSelectionModal } from "./AppSelectionModal";
import { widget } from "../widget";
import { CallTerminatedMessage, useLoadGroupCall } from "./useLoadGroupCall";
import { LobbyView } from "./LobbyView";
import { E2eeType } from "../e2ee/e2eeType";
import { useProfile } from "../profile/useProfile";
import { useOptInAnalytics } from "../settings/settings";
import { Config } from "../config/Config";
import { Link } from "../button/Link";
import { ErrorView } from "../ErrorView";
import { useMediaDevices } from "../MediaDevicesContext";
@@ -45,10 +42,9 @@ import { MuteStates } from "../state/MuteStates";
import { ObservableScope } from "../state/ObservableScope";
import { calculateInitialMuteState } from "../state/initialMuteState.ts";
export const RoomPage: FC = () => {
export const RoomPage: FC = (): ReactNode => {
const urlParams = useUrlParams();
const { confineToRoom, appPrompt, preload, header, displayName, skipLobby } =
urlParams;
const { confineToRoom, preload, header, displayName, skipLobby } = urlParams;
const { t } = useTranslation();
const { roomAlias, roomId, viaServers } = useRoomIdentifier();
@@ -242,28 +238,10 @@ export const RoomPage: FC = () => {
}
};
let content: ReactNode;
if (loading || isRegistering) {
content = <LoadingPage />;
} else if (error) {
content = <ErrorPage widget={widget} 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 = groupCallView();
}
return (
<>
{content}
{/* On Android and iOS, show a prompt to launch the mobile app. */}
{appPrompt &&
Config.get().app_prompt &&
(platform === "android" || platform === "ios") &&
roomId && <AppSelectionModal roomId={roomId} />}
</>
);
if (loading || isRegistering) return <LoadingPage />;
if (error) return <ErrorPage widget={widget} error={error} />;
if (!client) return <RoomAuthView />;
// TODO: This doesn't belong here, the app routes need to be reworked
if (!roomIdOrAlias) return <HomePage />;
return groupCallView();
};