rzerres/element-call
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Untangle the semantics of isEmbedded

Browse Source 
This deletes the isEmbedded flag from UrlParams, replacing it with an alternative set of flags that I think is more sensible and well-defined.
This commit is contained in:
Robin
2023-09-18 20:47:47 -04:00
parent 535712d108
commit 4253963b95
8 changed files with 87 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/room/AppSelectionModal.tsx
View File

@@ -50,12 +50,11 @@ export const AppSelectionModal: FC<Props> = ({ roomId }) => {
? 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.
// 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("embed", "");
params.set("appPrompt", "false");
params.set("confineToRoom", "");
return params;
});

59
src/room/CallEndedView.tsx
View File

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import { FormEventHandler, useCallback, useState } from "react";
import { FC, FormEventHandler, useCallback, useState } from "react";
import { MatrixClient } from "matrix-js-sdk/src/client";
import { Trans, useTranslation } from "react-i18next";
import { useHistory } from "react-router-dom";
@@ -30,19 +30,23 @@ import { FieldRow, InputField } from "../input/Input";
import { StarRatingInput } from "../input/StarRatingInput";
import { RageshakeButton } from "../settings/RageshakeButton";
export function CallEndedView({
client,
isPasswordlessUser,
endedCallId,
leaveError,
reconnect,
}: {
interface Props {
client: MatrixClient;
isPasswordlessUser: boolean;
confineToRoom: boolean;
endedCallId: string;
leaveError?: Error;
reconnect: () => void;
}) {
}
export const CallEndedView: FC<Props> = ({
client,
isPasswordlessUser,
confineToRoom,
endedCallId,
leaveError,
reconnect,
}) => {
const { t } = useTranslation();
const history = useHistory();
@@ -72,14 +76,14 @@ export function CallEndedView({
if (isPasswordlessUser) {
// setting this renders the callEndedView with the invitation to create an account
setSurverySubmitted(true);
} else {
} else if (!confineToRoom) {
// if the user already has an account immediately go back to the home screen
history.push("/");
}
}, 1000);
}, 1000);
},
[endedCallId, history, isPasswordlessUser, starRating]
[endedCallId, history, isPasswordlessUser, confineToRoom, starRating]
);
const createAccountDialog = isPasswordlessUser && (
@@ -161,11 +165,13 @@ export function CallEndedView({
</div>
</div>
</main>
<Body className={styles.footer}>
<Link color="primary" to="/">
{t("Return to home screen")}
</Link>
</Body>
{!confineToRoom && (
<Body className={styles.footer}>
<Link color="primary" to="/">
{t("Return to home screen")}
</Link>
</Body>
)}
</>
);
} else {
@@ -183,15 +189,18 @@ export function CallEndedView({
"\n" +
t("How did it go?")}
</Headline>
{!surveySubmitted && PosthogAnalytics.instance.isEnabled()
{(!surveySubmitted || confineToRoom) &&
PosthogAnalytics.instance.isEnabled()
? qualitySurveyDialog
: createAccountDialog}
</main>
<Body className={styles.footer}>
<Link color="primary" to="/">
{t("Not now, return to home screen")}
</Link>
</Body>
{!confineToRoom && (
<Body className={styles.footer}>
<Link color="primary" to="/">
{t("Not now, return to home screen")}
</Link>
</Body>
)}
</>
);
}
@@ -200,12 +209,10 @@ export function CallEndedView({
return (
<>
<Header>
<LeftNav>
<HeaderLogo />
</LeftNav>
<LeftNav>{!confineToRoom && <HeaderLogo />}</LeftNav>
<RightNav />
</Header>
<div className={styles.container}>{renderBody()}</div>
</>
);
}
};

13
src/room/GroupCallView.tsx
View File

@@ -56,7 +56,7 @@ declare global {
interface Props {
client: MatrixClient;
isPasswordlessUser: boolean;
isEmbedded: boolean;
confineToRoom: boolean;
preload: boolean;
hideHeader: boolean;
rtcSession: MatrixRTCSession;
@@ -65,7 +65,7 @@ interface Props {
export function GroupCallView({
client,
isPasswordlessUser,
isEmbedded,
confineToRoom,
preload,
hideHeader,
rtcSession,
@@ -233,13 +233,13 @@ export function GroupCallView({
if (
!isPasswordlessUser &&
!isEmbedded &&
!confineToRoom &&
!PosthogAnalytics.instance.isEnabled()
) {
history.push("/");
}
},
[rtcSession, isPasswordlessUser, isEmbedded, history]
[rtcSession, isPasswordlessUser, confineToRoom, history]
);
useEffect(() => {
@@ -334,7 +334,7 @@ export function GroupCallView({
// submitting anything.
if (
isPasswordlessUser ||
(PosthogAnalytics.instance.isEnabled() && !isEmbedded) ||
(PosthogAnalytics.instance.isEnabled() && widget === null) ||
leaveError
) {
return (
@@ -342,6 +342,7 @@ export function GroupCallView({
endedCallId={rtcSession.room.roomId}
client={client}
isPasswordlessUser={isPasswordlessUser}
confineToRoom={confineToRoom}
leaveError={leaveError}
reconnect={onReconnect}
/>
@@ -363,7 +364,7 @@ export function GroupCallView({
matrixInfo={matrixInfo}
muteStates={muteStates}
onEnter={() => enterRTCSession(rtcSession)}
isEmbedded={isEmbedded}
confineToRoom={confineToRoom}
hideHeader={hideHeader}
participatingMembers={participatingMembers}
onShareClick={onShareClick}

8
src/room/LobbyView.tsx
View File

@@ -42,7 +42,7 @@ interface Props {
matrixInfo: MatrixInfo;
muteStates: MuteStates;
onEnter: () => void;
isEmbedded: boolean;
confineToRoom: boolean;
hideHeader: boolean;
participatingMembers: RoomMember[];
onShareClick: (() => void) | null;
@@ -53,7 +53,7 @@ export const LobbyView: FC<Props> = ({
matrixInfo,
muteStates,
onEnter,
isEmbedded,
confineToRoom,
hideHeader,
participatingMembers,
onShareClick,
@@ -85,7 +85,7 @@ export const LobbyView: FC<Props> = ({
const onLeaveClick = useCallback(() => history.push("/"), [history]);
const recentsButtonInFooter = useMediaQuery("(max-height: 500px)");
const recentsButton = !isEmbedded && (
const recentsButton = !confineToRoom && (
<Link className={styles.recents} href="#" onClick={onLeaveClick}>
{t("Back to recents")}
</Link>
@@ -140,7 +140,7 @@ export const LobbyView: FC<Props> = ({
disabled={muteStates.audio.setEnabled === null}
/>
<SettingsButton onPress={openSettings} />
{!isEmbedded && <HangupButton onPress={onLeaveClick} />}
{!confineToRoom && <HangupButton onPress={onLeaveClick} />}
</div>
</div>
</div>

12
src/room/RoomPage.tsx
View File

@@ -30,7 +30,8 @@ import { platform } from "../Platform";
import { AppSelectionModal } from "./AppSelectionModal";
export const RoomPage: FC = () => {
const { isEmbedded, preload, hideHeader, displayName } = useUrlParams();
const { confineToRoom, appPrompt, preload, hideHeader, displayName } =
useUrlParams();
const { roomAlias, roomId, viaServers } = useRoomIdentifier();
@@ -74,12 +75,12 @@ export const RoomPage: FC = () => {
client={client!}
rtcSession={rtcSession}
isPasswordlessUser={passwordlessUser}
isEmbedded={isEmbedded}
confineToRoom={confineToRoom}
preload={preload}
hideHeader={hideHeader}
/>
),
[client, passwordlessUser, isEmbedded, preload, hideHeader]
[client, passwordlessUser, confineToRoom, preload, hideHeader]
);
let content: ReactNode;
@@ -107,9 +108,8 @@ export const RoomPage: FC = () => {
return (
<>
{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 && (
{/* On Android and iOS, show a prompt to launch the mobile app. */}
{appPrompt && (platform === "android" || platform === "ios") && (
<AppSelectionModal roomId={roomId} />
)}
</>