- {resolvedSrc ? (
- 
- ) : typeof fallback === "string" ? (
- {fallback}
- ) : (
- fallback
- )}
-
+
-
- );
-};
diff --git a/src/Facepile.tsx b/src/Facepile.tsx
index 0c9ec239..7ed995ce 100644
--- a/src/Facepile.tsx
+++ b/src/Facepile.tsx
@@ -14,27 +14,20 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
-import { HTMLAttributes, useMemo } from "react";
-import classNames from "classnames";
+import { HTMLAttributes } from "react";
import { MatrixClient } from "matrix-js-sdk/src/client";
import { RoomMember } from "matrix-js-sdk/src/models/room-member";
import { useTranslation } from "react-i18next";
+import { AvatarStack } from "@vector-im/compound-web";
-import styles from "./Facepile.module.css";
-import { Avatar, Size, sizes } from "./Avatar";
-
-const overlapMap: Partial m.name),
+ })}
{...rest}
>
- {members.slice(0, max).map((member, i) => {
+ {displayedMembers.map((member, i) => {
const avatarUrl = member.getMxcAvatarUrl();
return (
+
);
}
diff --git a/src/Header.module.css b/src/Header.module.css
index e54edff5..84b9df7b 100644
--- a/src/Header.module.css
+++ b/src/Header.module.css
@@ -28,8 +28,8 @@ limitations under the License.
flex: 1;
align-items: center;
white-space: nowrap;
- padding: 0 20px;
- height: 64px;
+ padding-inline: var(--inline-content-inset);
+ height: 80px;
}
.headerLogo {
@@ -66,51 +66,56 @@ limitations under the License.
margin-right: 0;
}
+.roomHeaderInfo {
+ display: grid;
+ column-gap: var(--cpd-space-4x);
+ grid-template-columns: auto auto;
+ grid-template-rows: 1fr auto;
+}
+
+.roomHeaderInfo[data-size="sm"] {
+ grid-template-areas: "avatar name" ". participants";
+}
+
+.roomHeaderInfo[data-size="lg"] {
+ grid-template-areas: "avatar name" "avatar participants";
+}
+
.roomAvatar {
- position: relative;
- display: none;
- justify-content: center;
+ align-self: flex-start;
+ grid-area: avatar;
+}
+
+.nameLine {
+ grid-area: name;
+ flex-grow: 1;
+ display: flex;
align-items: center;
- width: 36px;
- height: 36px;
- border-radius: 36px;
- background-color: #5c56f5;
+ gap: var(--cpd-space-1x);
}
-.roomAvatar > * {
- fill: white;
- stroke: white;
-}
-
-.userName {
- font-weight: 600;
- margin-right: 8px;
- text-overflow: ellipsis;
+.nameLine > h1 {
+ margin: 0;
+ /* XXX I can't actually get this ellipsis overflow to trigger, because
+ constraint propagation in a nested flexbox layout is a massive pain */
overflow: hidden;
- flex-shrink: 1;
+ text-overflow: ellipsis;
}
-.versionMismatchWarning {
- padding-left: 15px;
+.nameLine > svg {
+ flex-shrink: 0;
}
-.versionMismatchWarning::before {
- content: "";
- display: inline-block;
- position: relative;
- top: 1px;
- width: 16px;
- height: 16px;
- mask-image: url("./icons/AlertTriangleFilled.svg");
- mask-repeat: no-repeat;
- mask-size: contain;
- background-color: var(--cpd-color-icon-critical-primary);
- padding-right: 5px;
+.participantsLine {
+ grid-area: participants;
+ display: flex;
+ align-items: center;
+ gap: var(--cpd-space-1-5x);
+ font: var(--cpd-font-body-sm-medium);
}
@media (min-width: 800px) {
.headerLogo,
- .roomAvatar,
.leftNav.hideMobile,
.rightNav.hideMobile {
display: flex;
@@ -119,8 +124,4 @@ limitations under the License.
.leftNav h3 {
font-size: var(--font-size-subtitle);
}
-
- .nav {
- height: 76px;
- }
}
diff --git a/src/Header.stories.jsx b/src/Header.stories.jsx
deleted file mode 100644
index e5c4473a..00000000
--- a/src/Header.stories.jsx
+++ /dev/null
@@ -1,105 +0,0 @@
-import { GridLayoutMenu } from "./room/GridLayoutMenu";
-import {
- Header,
- HeaderLogo,
- LeftNav,
- RightNav,
- RoomHeaderInfo,
-} from "./Header";
-import { UserMenu } from "./UserMenu";
-
-export default {
- title: "Header",
- component: Header,
- parameters: {
- layout: "fullscreen",
- },
-};
-
-export const HomeAnonymous = () => (
-
+
);
-}
+};
diff --git a/src/IncompatibleVersionModal.tsx b/src/IncompatibleVersionModal.tsx
deleted file mode 100644
index d11822de..00000000
--- a/src/IncompatibleVersionModal.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-/*
-Copyright 2022 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 { Room } from "matrix-js-sdk/src/models/room";
-import { FC, useMemo } from "react";
-import { Trans, useTranslation } from "react-i18next";
-
-import { Modal, ModalContent } from "./Modal";
-import { Body } from "./typography/Typography";
-
-interface Props {
- userIds: Set
+
+ {name}
+
+
+ {participants.length > 0 && (
+
+
)}
-
+ - {userLis}
@@ -44,7 +42,6 @@ export function CallList({ rooms, client, disableFacepile }: CallListProps) {
avatarUrl={avatarUrl}
roomId={room.roomId}
participants={participants}
- disableFacepile={disableFacepile}
/>
))}
{rooms.length > 3 && (
@@ -63,39 +60,18 @@ interface CallTileProps {
roomId: string;
participants: RoomMember[];
client: MatrixClient;
- disableFacepile?: boolean;
}
-function CallTile({
- name,
- avatarUrl,
- roomId,
- participants,
- client,
- disableFacepile,
-}: CallTileProps) {
+function CallTile({ name, avatarUrl, roomId }: CallTileProps) {
const roomSharedKey = useRoomSharedKey(roomId);
return (
-
{t("Your recent calls")}
- {
id: string;
label: string;
avatarUrl: string | undefined;
+ userId: string;
displayName: string;
onRemoveAvatar: () => void;
}
export const AvatarInputField = forwardRef(
(
- { id, label, className, avatarUrl, displayName, onRemoveAvatar, ...rest },
+ {
+ id,
+ label,
+ className,
+ avatarUrl,
+ userId,
+ displayName,
+ onRemoveAvatar,
+ ...rest
+ },
ref
) => {
const { t } = useTranslation();
@@ -80,9 +90,10 @@ export const AvatarInputField = forwardRef(
- {children}
-
- );
- }
-}
-
-type SFUConfigLoading = {
- kind: "loading";
-};
-
-type SFUConfigLoaded = {
- kind: "loaded";
- sfuConfig: SFUConfig;
-};
-
-type SFUConfigFailed = {
- kind: "failed";
- error: Error;
-};
diff --git a/src/livekit/openIDSFU.ts b/src/livekit/openIDSFU.ts
index 083e95b2..d10f56fb 100644
--- a/src/livekit/openIDSFU.ts
+++ b/src/livekit/openIDSFU.ts
@@ -14,82 +14,78 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
-import { GroupCall, IOpenIDToken, MatrixClient } from "matrix-js-sdk";
+import { IOpenIDToken, MatrixClient } from "matrix-js-sdk";
import { logger } from "matrix-js-sdk/src/logger";
+import { MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc/MatrixRTCSession";
+import { useEffect, useState } from "react";
-import { Config } from "../config/Config";
+import { LivekitFocus } from "./LivekitFocus";
+import { useActiveFocus } from "../room/useActiveFocus";
export interface SFUConfig {
url: string;
jwt: string;
}
+export function sfuConfigEquals(a?: SFUConfig, b?: SFUConfig): boolean {
+ if (a === undefined && b === undefined) return true;
+ if (a === undefined || b === undefined) return false;
+
+ return a.jwt === b.jwt && a.url === b.url;
+}
+
// The bits we need from MatrixClient
export type OpenIDClientParts = Pick<
MatrixClient,
"getOpenIdToken" | "getDeviceId"
>;
+export function useOpenIDSFU(
+ client: OpenIDClientParts,
+ rtcSession: MatrixRTCSession
+) {
+ const [sfuConfig, setSFUConfig] = useState(undefined);
+
+ const activeFocus = useActiveFocus(rtcSession);
+
+ useEffect(() => {
+ (async () => {
+ const sfuConfig = activeFocus
+ ? await getSFUConfigWithOpenID(client, activeFocus)
+ : undefined;
+ setSFUConfig(sfuConfig);
+ })();
+ }, [client, activeFocus]);
+
+ return sfuConfig;
+}
+
export async function getSFUConfigWithOpenID(
client: OpenIDClientParts,
- groupCall: GroupCall,
- roomName: string
-): Promise {
+ activeFocus: LivekitFocus
+): Promise {
const openIdToken = await client.getOpenIdToken();
logger.debug("Got openID token", openIdToken);
- // if the call has a livekit service URL, try it.
- if (groupCall.livekitServiceURL) {
- try {
- logger.info(
- `Trying to get JWT from call's configured URL of ${groupCall.livekitServiceURL}...`
- );
- const sfuConfig = await getLiveKitJWT(
- client,
- groupCall.livekitServiceURL,
- roomName,
- openIdToken
- );
- logger.info(`Got JWT from call state event URL.`);
-
- return sfuConfig;
- } catch (e) {
- logger.warn(
- `Failed to get JWT from group call's configured URL of ${groupCall.livekitServiceURL}.`,
- e
- );
- }
- }
-
- // otherwise, try our configured one and, if it works, update the call's service URL in the state event
- // NB. This wuill update it for everyone so we may end up with multiple clients updating this when they
- // join at similar times, but we don't have a huge number of options here.
- const urlFromConf = Config.get().livekit!.livekit_service_url;
- logger.info(`Trying livekit service URL from our config: ${urlFromConf}...`);
try {
+ logger.info(
+ `Trying to get JWT from call's active focus URL of ${activeFocus.livekit_service_url}...`
+ );
const sfuConfig = await getLiveKitJWT(
client,
- urlFromConf,
- roomName,
+ activeFocus.livekit_service_url,
+ activeFocus.livekit_alias,
openIdToken
);
-
- logger.info(
- `Got JWT, updating call livekit service URL with: ${urlFromConf}...`
- );
- try {
- await groupCall.updateLivekitServiceURL(urlFromConf);
- logger.info(`Call livekit service URL updated.`);
- } catch (e) {
- logger.warn(
- `Failed to update call livekit service URL: continuing anyway.`
- );
- }
+ logger.info(`Got JWT from call's active focus URL.`);
return sfuConfig;
} catch (e) {
- logger.error("Failed to get JWT from URL defined in Config.", e);
- throw e;
+ logger.warn(
+ `Failed to get JWT from RTC session's active focus URL of ${activeFocus.livekit_service_url}.`,
+ e
+ );
+ return undefined;
}
}
diff --git a/src/livekit/useECConnectionState.ts b/src/livekit/useECConnectionState.ts
new file mode 100644
index 00000000..01adb64d
--- /dev/null
+++ b/src/livekit/useECConnectionState.ts
@@ -0,0 +1,100 @@
+/*
+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 { ConnectionState, Room, RoomEvent } from "livekit-client";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { logger } from "matrix-js-sdk/src/logger";
+
+import { SFUConfig, sfuConfigEquals } from "./openIDSFU";
+
+/*
+ * Additional values for states that a call can be in, beyond what livekit
+ * provides in ConnectionState. Also reconnects the call if the SFU Config
+ * changes.
+ */
+export enum ECAddonConnectionState {
+ // We are switching from one focus to another (or between livekit room aliases on the same focus)
+ ECSwitchingFocus = "ec_switching_focus",
+ // The call has just been initialised and is waiting for credentials to arrive before attempting
+ // to connect. This distinguishes from the 'Disconected' state which is now just for when livekit
+ // gives up on connectivity and we consider the call to have failed.
+ ECWaiting = "ec_waiting",
+}
+
+export type ECConnectionState = ConnectionState | ECAddonConnectionState;
+
+// This is mostly necessary because an empty useRef is an empty object
+// which is truthy, so we can't just use Boolean(currentSFUConfig.current)
+function sfuConfigValid(sfuConfig?: SFUConfig): boolean {
+ return Boolean(sfuConfig?.url) && Boolean(sfuConfig?.jwt);
+}
+
+export function useECConnectionState(
+ livekitRoom?: Room,
+ sfuConfig?: SFUConfig
+): ECConnectionState {
+ const [connState, setConnState] = useState(
+ sfuConfig && livekitRoom
+ ? livekitRoom.state
+ : ECAddonConnectionState.ECWaiting
+ );
+
+ const [isSwitchingFocus, setSwitchingFocus] = useState(false);
+
+ const onConnStateChanged = useCallback((state: ConnectionState) => {
+ if (state == ConnectionState.Connected) setSwitchingFocus(false);
+ setConnState(state);
+ }, []);
+
+ useEffect(() => {
+ const oldRoom = livekitRoom;
+
+ if (livekitRoom) {
+ livekitRoom.on(RoomEvent.ConnectionStateChanged, onConnStateChanged);
+ }
+
+ return () => {
+ if (oldRoom)
+ oldRoom.off(RoomEvent.ConnectionStateChanged, onConnStateChanged);
+ };
+ }, [livekitRoom, onConnStateChanged]);
+
+ const currentSFUConfig = useRef(Object.assign({}, sfuConfig));
+
+ // Id we are transitioning from a valid config to another valid one, we need
+ // to explicitly switch focus
+ useEffect(() => {
+ if (
+ sfuConfigValid(sfuConfig) &&
+ sfuConfigValid(currentSFUConfig.current) &&
+ !sfuConfigEquals(currentSFUConfig.current, sfuConfig)
+ ) {
+ logger.info(
+ `SFU config changed! URL was ${currentSFUConfig.current?.url} now ${sfuConfig?.url}`
+ );
+
+ (async () => {
+ setSwitchingFocus(true);
+ await livekitRoom?.disconnect();
+ await livekitRoom?.connect(sfuConfig!.url, sfuConfig!.jwt);
+ })();
+ }
+
+ currentSFUConfig.current = Object.assign({}, sfuConfig);
+ }, [sfuConfig, livekitRoom]);
+
+ return isSwitchingFocus ? ECAddonConnectionState.ECSwitchingFocus : connState;
+}
diff --git a/src/livekit/useLiveKit.ts b/src/livekit/useLiveKit.ts
index 14acfff3..1f5704b3 100644
--- a/src/livekit/useLiveKit.ts
+++ b/src/livekit/useLiveKit.ts
@@ -22,7 +22,7 @@ import {
RoomOptions,
setLogLevel,
} from "livekit-client";
-import { useConnectionState, useLiveKitRoom } from "@livekit/components-react";
+import { useLiveKitRoom } from "@livekit/components-react";
import { useEffect, useMemo, useRef } from "react";
import E2EEWorker from "livekit-client/e2ee-worker?worker";
import { logger } from "matrix-js-sdk/src/logger";
@@ -35,6 +35,10 @@ import {
MediaDevices,
useMediaDevices,
} from "./MediaDevicesContext";
+import {
+ ECConnectionState,
+ useECConnectionState,
+} from "./useECConnectionState";
export type E2EEConfig = {
sharedKey: string;
@@ -42,11 +46,16 @@ export type E2EEConfig = {
setLogLevel("debug");
+interface UseLivekitResult {
+ livekitRoom?: Room;
+ connState: ECConnectionState;
+}
+
export function useLiveKit(
muteStates: MuteStates,
sfuConfig?: SFUConfig,
e2eeConfig?: E2EEConfig
-): Room | undefined {
+): UseLivekitResult {
const e2eeOptions = useMemo(() => {
if (!e2eeConfig?.sharedKey) return undefined;
@@ -101,7 +110,7 @@ export function useLiveKit(
room: roomWithoutProps,
});
- const connectionState = useConnectionState(roomWithoutProps);
+ const connectionState = useECConnectionState(room, sfuConfig);
useEffect(() => {
// Sync the requested mute states with LiveKit's mute states. We do it this
@@ -149,5 +158,8 @@ export function useLiveKit(
}
}, [room, devices, connectionState]);
- return room;
+ return {
+ connState: connectionState,
+ livekitRoom: room,
+ };
}
diff --git a/src/matrix-utils.ts b/src/matrix-utils.ts
index d074fa3f..aed343a5 100644
--- a/src/matrix-utils.ts
+++ b/src/matrix-utils.ts
@@ -172,7 +172,6 @@ export async function initClient(
localTimeoutMs: 5000,
useE2eForGroupCall: e2eEnabled,
fallbackICEServerAllowed: fallbackICEServerAllowed,
- useLivekitForGroupCalls: true,
});
try {
diff --git a/src/Facepile.module.css b/src/room/EncryptionLock.module.css
similarity index 54%
rename from src/Facepile.module.css
rename to src/room/EncryptionLock.module.css
index 0c911658..7329c2b4 100644
--- a/src/Facepile.module.css
+++ b/src/room/EncryptionLock.module.css
@@ -1,11 +1,11 @@
/*
-Copyright 2022 New Vector Ltd
+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
+ 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,
@@ -14,29 +14,21 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
-.facepile {
- width: 100%;
- position: relative;
+.lock {
+ padding: var(--cpd-space-1x);
+ border-radius: var(--cpd-radius-pill-effect);
}
-.facepile.xs {
- height: 24px;
+.lock[data-encrypted="true"] {
+ color: var(--cpd-color-icon-success-primary);
}
-.facepile.sm {
- height: 32px;
+.lock[data-encrypted="false"] {
+ color: var(--cpd-color-icon-secondary);
}
-.facepile.md {
- height: 36px;
-}
-
-.facepile .avatar {
- position: absolute;
- top: 0;
- border: 1px solid var(--cpd-color-bg-canvas-default);
-}
-
-.facepile.md .avatar {
- border-width: 2px;
+@media (hover: hover) {
+ .lock:hover {
+ background: var(--cpd-color-bg-subtle-primary);
+ }
}
diff --git a/src/room/EncryptionLock.tsx b/src/room/EncryptionLock.tsx
new file mode 100644
index 00000000..6544a35b
--- /dev/null
+++ b/src/room/EncryptionLock.tsx
@@ -0,0 +1,46 @@
+/*
+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 } from "react";
+import { Tooltip } from "@vector-im/compound-web";
+import { useTranslation } from "react-i18next";
+import { ReactComponent as LockIcon } from "@vector-im/compound-design-tokens/icons/lock.svg";
+import { ReactComponent as LockOffIcon } from "@vector-im/compound-design-tokens/icons/lock-off.svg";
+
+import styles from "./EncryptionLock.module.css";
+
+interface Props {
+ encrypted: boolean;
+}
+
+export const EncryptionLock: FC = ({ encrypted }) => {
+ const { t } = useTranslation();
+ const Icon = encrypted ? LockIcon : LockOffIcon;
+
+ return (
+
+
+ );
+};
diff --git a/src/room/GridLayoutMenu.module.css b/src/room/GridLayoutMenu.module.css
deleted file mode 100644
index e69de29b..00000000
diff --git a/src/room/GridLayoutMenu.tsx b/src/room/GridLayoutMenu.tsx
deleted file mode 100644
index 1722f20a..00000000
--- a/src/room/GridLayoutMenu.tsx
+++ /dev/null
@@ -1,82 +0,0 @@
-/*
-Copyright 2022 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 { useCallback } from "react";
-import { Item } from "@react-stately/collections";
-import { useTranslation } from "react-i18next";
-
-import { Button } from "../button";
-import { PopoverMenuTrigger } from "../popover/PopoverMenu";
-import { ReactComponent as SpotlightIcon } from "../icons/Spotlight.svg";
-import { ReactComponent as FreedomIcon } from "../icons/Freedom.svg";
-import { ReactComponent as CheckIcon } from "../icons/Check.svg";
-import menuStyles from "../Menu.module.css";
-import { Menu } from "../Menu";
-import { TooltipTrigger } from "../Tooltip";
-
-export type Layout = "freedom" | "spotlight";
-
-interface Props {
- layout: Layout;
- setLayout: (layout: Layout) => void;
-}
-
-export function GridLayoutMenu({ layout, setLayout }: Props) {
- const { t } = useTranslation();
- const tooltip = useCallback(() => t("Change layout"), [t]);
-
- const onAction = useCallback(
- (key: React.Key) => {
- setLayout(key.toString() as Layout);
- },
- [setLayout]
- );
-
- const onClose = useCallback(() => {}, []);
-
- return (
-
-
-
-
- {(props: JSX.IntrinsicAttributes) => (
-
- )}
-
- );
-}
diff --git a/src/room/GroupCallLoader.tsx b/src/room/GroupCallLoader.tsx
index ca52a163..78fa780c 100644
--- a/src/room/GroupCallLoader.tsx
+++ b/src/room/GroupCallLoader.tsx
@@ -16,8 +16,8 @@ limitations under the License.
import { ReactNode } from "react";
import { MatrixClient } from "matrix-js-sdk/src/client";
-import { GroupCall } from "matrix-js-sdk/src/webrtc/groupCall";
import { useTranslation } from "react-i18next";
+import { MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc/MatrixRTCSession";
import { useLoadGroupCall } from "./useLoadGroupCall";
import { ErrorView, FullScreenView } from "../FullScreenView";
@@ -26,7 +26,7 @@ interface Props {
client: MatrixClient;
roomIdOrAlias: string;
viaServers: string[];
- children: (groupCall: GroupCall) => ReactNode;
+ children: (rtcSession: MatrixRTCSession) => ReactNode;
createPtt: boolean;
}
@@ -53,7 +53,7 @@ export function GroupCallLoader({
);
case "loaded":
- return <>{children(groupCallState.groupCall)};
+ return <>{children(groupCallState.rtcSession)};
case "failed":
return ();
+ for (const membership of memberships) {
+ if (!addedUserIds.has(membership.member.userId)) {
+ addedUserIds.add(membership.member.userId);
+ members.push(membership.member);
+ }
+ }
+ return members;
+ }, [memberships]);
const deviceContext = useMediaDevices();
const latestDevices = useRef();
latestDevices.current = deviceContext;
- const muteStates = useMuteStates(participants.size);
+ const muteStates = useMuteStates(memberships.length);
const latestMuteStates = useRef();
latestMuteStates.current = muteStates;
@@ -161,10 +187,13 @@ export function GroupCallView({
}
}
- await enter();
+ enterRTCSession(rtcSession);
PosthogAnalytics.instance.eventCallEnded.cacheStartCall(new Date());
- PosthogAnalytics.instance.eventCallStarted.track(groupCall.groupCallId);
+ // we only have room sessions right now, so call ID is the emprty string - we use the room ID
+ PosthogAnalytics.instance.eventCallStarted.track(
+ rtcSession.room.roomId
+ );
await Promise.all([
widget!.api.setAlwaysOnScreen(true),
@@ -177,19 +206,18 @@ export function GroupCallView({
widget!.lazyActions.off(ElementWidgetActions.JoinCall, onJoin);
};
}
- }, [groupCall, preload, enter]);
+ }, [rtcSession, preload]);
useEffect(() => {
if (isEmbedded && !preload) {
// In embedded mode, bypass the lobby and just enter the call straight away
- enter();
+ enterRTCSession(rtcSession);
PosthogAnalytics.instance.eventCallEnded.cacheStartCall(new Date());
- PosthogAnalytics.instance.eventCallStarted.track(groupCall.groupCallId);
+ // use the room ID as above
+ PosthogAnalytics.instance.eventCallStarted.track(rtcSession.room.roomId);
}
- }, [groupCall, isEmbedded, preload, enter]);
-
- useSentryGroupCallHandler(groupCall);
+ }, [rtcSession, isEmbedded, preload]);
const [left, setLeft] = useState(false);
const [leaveError, setLeaveError] = useState(undefined);
@@ -200,21 +228,16 @@ export function GroupCallView({
setLeaveError(leaveError);
setLeft(true);
- let participantCount = 0;
- for (const deviceMap of groupCall.participants.values()) {
- participantCount += deviceMap.size;
- }
-
// In embedded/widget mode the iFrame will be killed right after the call ended prohibiting the posthog event from getting sent,
// therefore we want the event to be sent instantly without getting queued/batched.
const sendInstantly = !!widget;
PosthogAnalytics.instance.eventCallEnded.track(
- groupCall.groupCallId,
- participantCount,
+ rtcSession.room.roomId,
+ rtcSession.memberships.length,
sendInstantly
);
- leave();
+ leaveRTCSession(rtcSession);
if (widget) {
// we need to wait until the callEnded event is tracked. Otherwise the iFrame gets killed before the callEnded event got tracked.
await new Promise((resolve) => window.setTimeout(resolve, 10)); // 10ms
@@ -231,13 +254,13 @@ export function GroupCallView({
history.push("/");
}
},
- [groupCall, leave, isPasswordlessUser, isEmbedded, history]
+ [rtcSession, isPasswordlessUser, isEmbedded, history]
);
useEffect(() => {
- if (widget && state === GroupCallState.Entered) {
+ if (widget && isJoined) {
const onHangup = async (ev: CustomEvent) => {
- leave();
+ leaveRTCSession(rtcSession);
await widget!.api.transport.reply(ev.detail, {});
widget!.api.setAlwaysOnScreen(false);
};
@@ -246,7 +269,7 @@ export function GroupCallView({
widget!.lazyActions.off(ElementWidgetActions.HangupCall, onHangup);
};
}
- }, [groupCall, state, leave]);
+ }, [isJoined, rtcSession]);
const [e2eeEnabled] = useEnableE2EE();
@@ -258,8 +281,19 @@ export function GroupCallView({
const onReconnect = useCallback(() => {
setLeft(false);
setLeaveError(undefined);
- groupCall.enter();
- }, [groupCall]);
+ enterRTCSession(rtcSession);
+ }, [rtcSession]);
+
+ const joinRule = useJoinRule(rtcSession.room);
+
+ const { modalState: shareModalState, modalProps: shareModalProps } =
+ useModalTriggerState();
+
+ const onShareClickFn = useCallback(
+ () => shareModalState.open(),
+ [shareModalState]
+ );
+ const onShareClick = joinRule === JoinRule.Public ? onShareClickFn : null;
if (e2eeEnabled && isRoomE2EE && !e2eeSharedKey) {
return (
@@ -277,33 +311,27 @@ export function GroupCallView({
return
+ <>
+ {shareModal}
+
);
} else if (left) {
// The call ended view is shown for two reasons: prompting guests to create
@@ -319,7 +347,7 @@ export function GroupCallView({
) {
return (
enter()}
- isEmbedded={isEmbedded}
- hideHeader={hideHeader}
- />
+ <>
+ {shareModal}
+ enterRTCSession(rtcSession)}
+ isEmbedded={isEmbedded}
+ hideHeader={hideHeader}
+ participatingMembers={participatingMembers}
+ onShareClick={onShareClick}
+ />
+
);
}
}
diff --git a/src/room/InCallView.module.css b/src/room/InCallView.module.css
index 1fce9d0c..b34daa13 100644
--- a/src/room/InCallView.module.css
+++ b/src/room/InCallView.module.css
@@ -49,30 +49,38 @@ limitations under the License.
left: 0;
bottom: 0;
width: 100%;
- display: flex;
- justify-content: center;
+ box-sizing: border-box;
+ display: grid;
+ grid-template-columns: 1fr auto 1fr;
+ grid-template-areas: "logo buttons layout";
align-items: center;
- gap: 12px;
- padding: var(--footerPadding) 0;
- /* TODO: Un-hardcode these colors */
+ gap: var(--cpd-space-3x);
+ padding: var(--footerPadding) var(--inline-content-inset);
background: linear-gradient(
- 360deg,
- #15191e 0%,
- rgba(16, 19, 23, 0.9) 37%,
- rgba(16, 19, 23, 0.8) 49.68%,
- rgba(16, 19, 23, 0.7) 56.68%,
- rgba(16, 19, 23, 0.427397) 72.92%,
- rgba(16, 19, 23, 0.257534) 81.06%,
- rgba(16, 19, 23, 0.136986) 87.29%,
- rgba(16, 19, 23, 0.0658079) 92.4%,
- rgba(16, 19, 23, 0) 100%
+ 180deg,
+ rgba(0, 0, 0, 0) 0%,
+ var(--cpd-color-bg-canvas-default) 100%
);
}
-.maximised .footer {
- position: absolute;
- width: 100%;
- bottom: 0;
+.logo {
+ grid-area: logo;
+ justify-self: start;
+ display: flex;
+ align-items: center;
+ gap: var(--cpd-space-2x);
+ padding-inline-start: var(--cpd-space-1x);
+}
+
+.buttons {
+ grid-area: buttons;
+ display: flex;
+ gap: var(--cpd-space-3x);
+}
+
+.layout {
+ grid-area: layout;
+ justify-self: end;
}
@media (min-height: 300px) {
@@ -86,7 +94,7 @@ limitations under the License.
--footerPadding: 60px;
}
- .footer {
- gap: 16px;
+ .buttons {
+ gap: var(--cpd-space-4x);
}
}
diff --git a/src/room/InCallView.tsx b/src/room/InCallView.tsx
index 1d4336fd..22c13846 100644
--- a/src/room/InCallView.tsx
+++ b/src/room/InCallView.tsx
@@ -23,19 +23,19 @@ import {
useTracks,
} from "@livekit/components-react";
import { usePreventScroll } from "@react-aria/overlays";
-import classNames from "classnames";
-import { DisconnectReason, Room, RoomEvent, Track } from "livekit-client";
+import { ConnectionState, Room, Track } from "livekit-client";
import { MatrixClient } from "matrix-js-sdk/src/client";
import { RoomMember } from "matrix-js-sdk/src/models/room-member";
-import { GroupCall } from "matrix-js-sdk/src/webrtc/groupCall";
+import { Room as MatrixRoom } from "matrix-js-sdk/src/models/room";
import { Ref, useCallback, useEffect, useMemo, useRef } from "react";
import { useTranslation } from "react-i18next";
import useMeasure from "react-use-measure";
import { OverlayTriggerState } from "@react-stately/overlays";
-import { JoinRule } from "matrix-js-sdk/src/@types/partials";
import { logger } from "matrix-js-sdk/src/logger";
-import { RoomEventCallbacks } from "livekit-client/dist/src/room/Room";
+import { MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc/MatrixRTCSession";
+import { ReactComponent as LogoMark } from "../icons/LogoMark.svg";
+import { ReactComponent as LogoType } from "../icons/LogoType.svg";
import type { IWidgetApiRequest } from "matrix-widget-api";
import {
HangupButton,
@@ -43,52 +43,38 @@ import {
VideoButton,
ScreenshareButton,
SettingsButton,
- InviteButton,
} from "../button";
-import {
- Header,
- LeftNav,
- RightNav,
- RoomHeaderInfo,
- VersionMismatchWarning,
-} from "../Header";
+import { Header, LeftNav, RightNav, RoomHeaderInfo } from "../Header";
import {
useVideoGridLayout,
TileDescriptor,
VideoGrid,
} from "../video-grid/VideoGrid";
-import {
- useShowInspector,
- useShowConnectionStats,
-} from "../settings/useSetting";
+import { useShowConnectionStats } from "../settings/useSetting";
import { useModalTriggerState } from "../Modal";
import { PosthogAnalytics } from "../analytics/PosthogAnalytics";
import { useUrlParams } from "../UrlParams";
import { useCallViewKeyboardShortcuts } from "../useCallViewKeyboardShortcuts";
import { usePrefersReducedMotion } from "../usePrefersReducedMotion";
import { ElementWidgetActions, widget } from "../widget";
-import { GridLayoutMenu } from "./GridLayoutMenu";
-import { GroupCallInspector } from "./GroupCallInspector";
import styles from "./InCallView.module.css";
-import { useJoinRule } from "./useJoinRule";
-import { ParticipantInfo } from "./useGroupCall";
import { ItemData, TileContent, VideoTile } from "../video-grid/VideoTile";
import { NewVideoGrid } from "../video-grid/NewVideoGrid";
import { OTelGroupCallMembership } from "../otel/OTelGroupCallMembership";
import { SettingsModal } from "../settings/SettingsModal";
-import { InviteModal } from "./InviteModal";
import { useRageshakeRequestModal } from "../settings/submit-rageshake";
import { RageshakeRequestModal } from "./RageshakeRequestModal";
import { E2EEConfig, useLiveKit } from "../livekit/useLiveKit";
import { useFullscreen } from "./useFullscreen";
import { useLayoutStates } from "../video-grid/Layout";
-import { useSFUConfig } from "../livekit/OpenIDLoader";
-import { E2EELock } from "../E2EELock";
-import { useEventEmitterThree } from "../useEvents";
import { useWakeLock } from "../useWakeLock";
import { useMergedRefs } from "../useMergedRefs";
import { MuteStates } from "./MuteStates";
-import { useIsRoomE2EE } from "../e2ee/sharedKeyManagement";
+import { MatrixInfo } from "./VideoPreview";
+import { ShareButton } from "../button/ShareButton";
+import { LayoutToggle } from "./LayoutToggle";
+import { ECConnectionState } from "../livekit/useECConnectionState";
+import { useOpenIDSFU } from "../livekit/openIDSFU";
const canScreenshare = "getDisplayMedia" in (navigator.mediaDevices ?? {});
// There is currently a bug in Safari our our code with cloning and sending MediaStreams
@@ -96,13 +82,18 @@ const canScreenshare = "getDisplayMedia" in (navigator.mediaDevices ?? {});
// For now we can disable screensharing in Safari.
const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
-export interface ActiveCallProps extends Omit {
+export interface ActiveCallProps
+ extends Omit {
e2eeConfig?: E2EEConfig;
}
export function ActiveCall(props: ActiveCallProps) {
- const sfuConfig = useSFUConfig();
- const livekitRoom = useLiveKit(props.muteStates, sfuConfig, props.e2eeConfig);
+ const sfuConfig = useOpenIDSFU(props.client, props.rtcSession);
+ const { livekitRoom, connState } = useLiveKit(
+ props.muteStates,
+ sfuConfig,
+ props.e2eeConfig
+ );
if (!livekitRoom) {
return null;
@@ -114,39 +105,49 @@ export function ActiveCall(props: ActiveCallProps) {
return (
-
);
}
export interface InCallViewProps {
client: MatrixClient;
- groupCall: GroupCall;
+ matrixInfo: MatrixInfo;
+ rtcSession: MatrixRTCSession;
livekitRoom: Room;
muteStates: MuteStates;
- participants: Map>;
+ participatingMembers: RoomMember[];
onLeave: (error?: Error) => void;
- unencryptedEventsFromUsers: Set;
hideHeader: boolean;
otelGroupCallMembership?: OTelGroupCallMembership;
+ connState: ECConnectionState;
+ onShareClick: (() => void) | null;
}
export function InCallView({
client,
- groupCall,
+ matrixInfo,
+ rtcSession,
livekitRoom,
muteStates,
- participants,
+ participatingMembers,
onLeave,
- unencryptedEventsFromUsers,
hideHeader,
otelGroupCallMembership,
+ connState,
+ onShareClick,
}: InCallViewProps) {
const { t } = useTranslation();
usePreventScroll();
useWakeLock();
- const isRoomE2EE = useIsRoomE2EE(groupCall.room.roomId);
+ useEffect(() => {
+ if (connState === ConnectionState.Disconnected) {
+ // annoyingly we don't get the disconnection reason this way,
+ // only by listening for the emitted event
+ onLeave(new Error("Disconnected from call server"));
+ }
+ }, [connState, onLeave]);
const containerRef1 = useRef(null);
const [containerRef2, bounds] = useMeasure({ polyfill: ResizeObserver });
@@ -164,7 +165,7 @@ export function InCallView({
screenSharingTracks.length > 0
);
- const [showInspector] = useShowInspector();
+ //const [showInspector] = useShowInspector();
const [showConnectionStats] = useShowConnectionStats();
const { hideScreensharing } = useUrlParams();
@@ -182,41 +183,22 @@ export function InCallView({
[muteStates]
);
- const joinRule = useJoinRule(groupCall.room);
-
// This function incorrectly assumes that there is a camera and microphone, which is not always the case.
// TODO: Make sure that this module is resilient when it comes to camera/microphone availability!
useCallViewKeyboardShortcuts(
containerRef1,
toggleMicrophone,
toggleCamera,
- async (muted) => await localParticipant.setMicrophoneEnabled(!muted)
- );
-
- const onDisconnected = useCallback(
- (reason?: DisconnectReason) => {
- PosthogAnalytics.instance.eventCallDisconnected.track(reason);
- logger.info("Disconnected from livekit call with reason ", reason);
- onLeave(
- new Error("Disconnected from LiveKit call with reason " + reason)
- );
- },
- [onLeave]
+ (muted) => muteStates.audio.setEnabled?.(!muted)
);
const onLeavePress = useCallback(() => {
onLeave();
}, [onLeave]);
- useEventEmitterThree(
- livekitRoom,
- RoomEvent.Disconnected,
- onDisconnected
- );
-
useEffect(() => {
widget?.api.transport.send(
- layout === "freedom"
+ layout === "grid"
? ElementWidgetActions.TileLayout
: ElementWidgetActions.SpotlightLayout,
{}
@@ -226,7 +208,7 @@ export function InCallView({
useEffect(() => {
if (widget) {
const onTileLayout = async (ev: CustomEvent) => {
- setLayout("freedom");
+ setLayout("grid");
await widget!.api.transport.reply(ev.detail, {});
};
const onSpotlightLayout = async (ev: CustomEvent) => {
@@ -250,10 +232,11 @@ export function InCallView({
}
}, [setLayout]);
- const reducedControls = boundsValid && bounds.width <= 400;
+ const mobile = boundsValid && bounds.width <= 660;
+ const reducedControls = boundsValid && bounds.width <= 340;
const noControls = reducedControls && bounds.height <= 400;
- const items = useParticipantTiles(livekitRoom, participants);
+ const items = useParticipantTiles(livekitRoom, rtcSession.room);
const { fullscreenItem, toggleFullscreen, exitFullscreen } =
useFullscreen(items);
@@ -270,7 +253,7 @@ export function InCallView({
);
const Grid =
- items.length > 12 && layout === "freedom" ? NewVideoGrid : VideoGrid;
+ items.length > 12 && layout === "grid" ? NewVideoGrid : VideoGrid;
const prefersReducedMotion = usePrefersReducedMotion();
@@ -327,7 +310,7 @@ export function InCallView({
const {
modalState: rageshakeRequestModalState,
modalProps: rageshakeRequestModalProps,
- } = useRageshakeRequestModal(groupCall.room.roomId);
+ } = useRageshakeRequestModal(rtcSession.room.roomId);
const {
modalState: settingsModalState,
@@ -344,25 +327,6 @@ export function InCallView({
settingsModalState.open();
}, [settingsModalState]);
- const {
- modalState: inviteModalState,
- modalProps: inviteModalProps,
- }: {
- modalState: OverlayTriggerState;
- modalProps: {
- isOpen: boolean;
- onClose: () => void;
- };
- } = useModalTriggerState();
-
- const openInvite = useCallback(() => {
- inviteModalState.open();
- }, [inviteModalState]);
-
- const containerClasses = classNames(styles.inRoom, {
- [styles.maximised]: undefined,
- });
-
const toggleScreensharing = useCallback(async () => {
exitFullscreen();
await localParticipant.setScreenShareEnabled(!isScreenShareEnabled, {
@@ -420,29 +384,47 @@ export function InCallView({
buttons.push(
>
+ matrixRoom: MatrixRoom
): TileDescriptor[] {
const sfuParticipants = useParticipants({
room: livekitRoom,
});
const items = useMemo(() => {
- // The IDs of the participants who published membership event to the room (i.e. are present from Matrix perspective).
- const matrixParticipants: Map = new Map(
- [...participants.entries()].flatMap(([user, devicesMap]) => {
- return [...devicesMap.keys()].map((deviceId) => [
- `${user.userId}:${deviceId}`,
- user,
- ]);
- })
- );
-
const hasPresenter =
sfuParticipants.find((p) => p.isScreenShareEnabled) !== undefined;
let allGhosts = true;
@@ -514,7 +504,14 @@ function useParticipantTiles(
: false;
const id = sfuParticipant.identity;
- const member = matrixParticipants.get(id);
+ const member = findMatrixMember(matrixRoom, id);
+ // We always start with a local participant wit the empty string as their ID before we're
+ // connected, this is fine and we'll be in "all ghosts" mode.
+ if (id !== "" && member === undefined) {
+ logger.warn(
+ `Ruh, roh! No matrix member found for SFU participant '${id}': creating g-g-g-ghost!`
+ );
+ }
allGhosts &&= member === undefined;
const userMediaTile = {
@@ -566,7 +563,7 @@ function useParticipantTiles(
// If every item is a ghost, that probably means we're still connecting and
// shouldn't bother showing anything yet
return allGhosts ? [] : tiles;
- }, [participants, sfuParticipants]);
+ }, [matrixRoom, sfuParticipants]);
return items;
}
diff --git a/src/room/LayoutToggle.module.css b/src/room/LayoutToggle.module.css
new file mode 100644
index 00000000..e54e9447
--- /dev/null
+++ b/src/room/LayoutToggle.module.css
@@ -0,0 +1,77 @@
+/*
+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.
+*/
+
+.toggle {
+ padding: 2px;
+ border: 1px solid var(--cpd-color-border-interactive-secondary);
+ border-radius: var(--cpd-radius-pill-effect);
+ box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.5);
+ display: flex;
+}
+
+.toggle input {
+ appearance: none;
+ outline: none !important;
+}
+
+.toggle label {
+ display: block;
+ padding: calc(2.5 * var(--cpd-space-1x));
+ cursor: pointer;
+ border-radius: var(--cpd-radius-pill-effect);
+ color: var(--cpd-color-icon-primary);
+ background: var(--cpd-color-bg-action-secondary-rest);
+ box-shadow: var(--small-drop-shadow);
+}
+
+@media (hover: hover) {
+ .toggle label:hover {
+ background: var(--cpd-color-bg-action-secondary-hovered);
+ box-shadow: none;
+ }
+}
+
+.toggle label:active {
+ background: var(--cpd-color-bg-action-secondary-hovered);
+ box-shadow: none;
+}
+
+.toggle input:checked + label {
+ color: var(--cpd-color-icon-on-solid-primary);
+ background: var(--cpd-color-bg-action-primary-rest);
+}
+
+@media (hover: hover) {
+ .toggle input:checked + label:hover {
+ background: var(--cpd-color-bg-action-primary-hovered);
+ }
+}
+
+.toggle input:checked + label:active {
+ background: var(--cpd-color-bg-action-primary-hovered);
+}
+
+.toggle label > svg {
+ display: block;
+}
+
+.toggle label:last-child {
+ margin-inline-start: 5px;
+}
+
+.toggle input:focus-visible + label {
+ outline: auto;
+}
diff --git a/src/room/LayoutToggle.tsx b/src/room/LayoutToggle.tsx
new file mode 100644
index 00000000..5252204b
--- /dev/null
+++ b/src/room/LayoutToggle.tsx
@@ -0,0 +1,75 @@
+/*
+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 { ChangeEvent, FC, useCallback, useId } from "react";
+import { useTranslation } from "react-i18next";
+import { Tooltip } from "@vector-im/compound-web";
+import { ReactComponent as SpotlightViewIcon } from "@vector-im/compound-design-tokens/icons/spotlight-view.svg";
+import { ReactComponent as GridViewIcon } from "@vector-im/compound-design-tokens/icons/grid-view.svg";
+import classNames from "classnames";
+
+import styles from "./LayoutToggle.module.css";
+
+export type Layout = "spotlight" | "grid";
+
+interface Props {
+ layout: Layout;
+ setLayout: (layout: Layout) => void;
+ className?: string;
+}
+
+export const LayoutToggle: FC = ({ layout, setLayout, className }) => {
+ const { t } = useTranslation();
+
+ const onChange = useCallback(
+ (e: ChangeEvent) => setLayout(e.target.value as Layout),
+ [setLayout]
+ );
+
+ const spotlightId = useId();
+ const gridId = useId();
+
+ return (
+ = ({
+ client,
matrixInfo,
muteStates,
onEnter,
isEmbedded,
hideHeader,
+ participatingMembers,
+ onShareClick,
}) => {
const { t } = useTranslation();
const roomSharedKey = useRoomSharedKey(matrixInfo.roomId);
@@ -59,10 +66,17 @@ export const LobbyView: FC = ({
{!hideHeader && (
-
-
)}
diff --git a/src/room/RoomPage.tsx b/src/room/RoomPage.tsx
index ddf92959..50156e70 100644
--- a/src/room/RoomPage.tsx
+++ b/src/room/RoomPage.tsx
@@ -15,8 +15,8 @@ limitations under the License.
*/
import { FC, useEffect, useState, useCallback } from "react";
+import { MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc/MatrixRTCSession";
-import type { GroupCall } from "matrix-js-sdk/src/webrtc/groupCall";
import { useClientLegacy } from "../ClientContext";
import { ErrorView, LoadingView } from "../FullScreenView";
import { RoomAuthView } from "./RoomAuthView";
@@ -73,10 +73,10 @@ export const RoomPage: FC = () => {
]);
const groupCallView = useCallback(
- (groupCall: GroupCall) => (
+ (rtcSession: MatrixRTCSession) => (
{
roomId: string;
}
-export const InviteModal: FC = ({ roomId, ...rest }) => {
+export const ShareModal: FC = ({ roomId, ...rest }) => {
const { t } = useTranslation();
const roomSharedKey = useRoomSharedKey(roomId);
return (
= ({ matrixInfo, muteStates }) => {
const devices = useMediaDevices();
+ // Capture the audio options as they were when we first mounted, because
+ // we're not doing anything with the audio anyway so we don't need to
+ // re-open the devices when they change (see below).
const initialAudioOptions = useRef();
initialAudioOptions.current ??= muteStates.audio.enabled && {
deviceId: devices.audioInput.selectedId,
@@ -79,7 +85,9 @@ export const VideoPreview: FC = ({ matrixInfo, muteStates }) => {
// request over with at the same time. But changing the audio settings
// shouldn't cause this hook to recreate the track, which is why we
// reference the initial values here.
- audio: initialAudioOptions.current,
+ // We also pass in a clone because livekit mutates the object passed in,
+ // which would cause the devices to be re-opened on the next render.
+ audio: Object.assign({}, initialAudioOptions.current),
video: muteStates.video.enabled && {
deviceId: devices.videoInput.selectedId,
},
@@ -130,9 +138,10 @@ export const VideoPreview: FC = ({ matrixInfo, muteStates }) => {
{!muteStates.video.enabled && (
;
- leave: () => void;
- toggleLocalVideoMuted: () => void;
- toggleMicrophoneMuted: () => void;
- toggleScreensharing: () => void;
- setMicrophoneMuted: (muted: boolean) => void;
- requestingScreenshare: boolean;
- isScreensharing: boolean;
- screenshareFeeds: CallFeed[];
- participants: Map>;
- hasLocalParticipant: boolean;
- unencryptedEventsFromUsers: Set;
- otelGroupCallMembership?: OTelGroupCallMembership;
-}
-
-interface State {
- state: GroupCallState;
- localCallFeed?: CallFeed;
- activeSpeaker?: CallFeed;
- userMediaFeeds: CallFeed[];
- error?: TranslatedError;
- microphoneMuted: boolean;
- localVideoMuted: boolean;
- screenshareFeeds: CallFeed[];
- isScreensharing: boolean;
- requestingScreenshare: boolean;
- participants: Map>;
- hasLocalParticipant: boolean;
-}
-
-// This is a bit of a hack, but we keep the opentelemetry tracker object at the file
-// level so that it doesn't pop in & out of existence as react mounts & unmounts
-// components. The right solution is probably for this to live in the js-sdk and have
-// the same lifetime as groupcalls themselves.
-let groupCallOTelMembership: OTelGroupCallMembership | undefined;
-let groupCallOTelMembershipGroupCallId: string;
-
-function getParticipants(
- groupCall: GroupCall
-): Map> {
- const participants = new Map>();
-
- for (const [member, participantsStateMap] of groupCall.participants) {
- const participantInfoMap = new Map();
- participants.set(member, participantInfoMap);
-
- for (const [deviceId, participant] of participantsStateMap) {
- const feed = groupCall.userMediaFeeds.find(
- (f) => f.userId === member.userId && f.deviceId === deviceId
- );
-
- let connectionState: ConnectionState;
- // If we allow calls without media, we have no feeds and cannot read the connection status from them.
- // @TODO: The connection state should generally not be determined by the feed.
- if (
- groupCall.allowCallWithoutVideoAndAudio &&
- !feed &&
- !participant.screensharing
- ) {
- connectionState = ConnectionState.Connected;
- } else {
- connectionState = feed
- ? feed.connected
- ? ConnectionState.Connected
- : ConnectionState.WaitMedia
- : ConnectionState.EstablishingCall;
- }
- participantInfoMap.set(deviceId, {
- connectionState,
- presenter: participant.screensharing,
- });
- }
- }
-
- return participants;
-}
-
-export function useGroupCall(
- groupCall: GroupCall,
- client: MatrixClient
-): UseGroupCallReturnType {
- const [
- {
- state,
- localCallFeed,
- activeSpeaker,
- userMediaFeeds,
- error,
- microphoneMuted,
- localVideoMuted,
- isScreensharing,
- screenshareFeeds,
- participants,
- hasLocalParticipant,
- requestingScreenshare,
- },
- setState,
- ] = useState({
- state: GroupCallState.LocalCallFeedUninitialized,
- userMediaFeeds: [],
- microphoneMuted: false,
- localVideoMuted: false,
- isScreensharing: false,
- screenshareFeeds: [],
- requestingScreenshare: false,
- participants: getParticipants(groupCall),
- hasLocalParticipant: false,
- });
-
- if (groupCallOTelMembershipGroupCallId !== groupCall.groupCallId) {
- if (groupCallOTelMembership) groupCallOTelMembership.dispose();
-
- // If the user disables analytics, this will stay around until they leave the call
- // so analytics will be disabled once they leave.
- if (ElementCallOpenTelemetry.instance) {
- groupCallOTelMembership = new OTelGroupCallMembership(groupCall, client);
- groupCallOTelMembershipGroupCallId = groupCall.groupCallId;
- } else {
- groupCallOTelMembership = undefined;
- }
- }
-
- const [unencryptedEventsFromUsers, addUnencryptedEventUser] = useReducer(
- (state: Set, newVal: string) => {
- return new Set(state).add(newVal);
- },
- new Set()
- );
-
- const updateState = useCallback(
- (state: Partial) => setState((prev) => ({ ...prev, ...state })),
- [setState]
- );
-
- const doNothingMediaActionCallback = useCallback(
- (details: MediaSessionActionDetails) => {},
- []
- );
-
- const leaveCall = useCallback(() => {
- groupCallOTelMembership?.onLeaveCall();
- groupCall.leave();
- }, [groupCall]);
-
- 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({
- state: groupCall.state,
- localCallFeed: groupCall.localCallFeed,
- activeSpeaker: groupCall.activeSpeaker,
- userMediaFeeds: [...groupCall.userMediaFeeds],
- microphoneMuted: groupCall.isMicrophoneMuted(),
- localVideoMuted: groupCall.isLocalVideoMuted(),
- isScreensharing: groupCall.isScreensharing(),
- screenshareFeeds: [...groupCall.screenshareFeeds],
- });
- }
-
- const prevUserMediaFeeds = new Set();
-
- function onUserMediaFeedsChanged(userMediaFeeds: CallFeed[]): void {
- for (const feed of prevUserMediaFeeds) {
- feed.off(CallFeedEvent.ConnectedChanged, onConnectedChanged);
- }
- prevUserMediaFeeds.clear();
-
- for (const feed of userMediaFeeds) {
- feed.on(CallFeedEvent.ConnectedChanged, onConnectedChanged);
- prevUserMediaFeeds.add(feed);
- }
-
- updateState({
- userMediaFeeds: [...userMediaFeeds],
- participants: getParticipants(groupCall),
- });
- }
-
- const prevScreenshareFeeds = new Set();
-
- function onScreenshareFeedsChanged(screenshareFeeds: CallFeed[]): void {
- for (const feed of prevScreenshareFeeds) {
- feed.off(CallFeedEvent.ConnectedChanged, onConnectedChanged);
- }
- prevScreenshareFeeds.clear();
-
- for (const feed of screenshareFeeds) {
- feed.on(CallFeedEvent.ConnectedChanged, onConnectedChanged);
- prevScreenshareFeeds.add(feed);
- }
-
- updateState({
- screenshareFeeds: [...screenshareFeeds],
- });
- }
-
- function onConnectedChanged(connected: boolean): void {
- updateState({
- participants: getParticipants(groupCall),
- });
- }
-
- function onActiveSpeakerChanged(activeSpeaker: CallFeed | undefined): void {
- updateState({
- activeSpeaker: activeSpeaker,
- });
- }
-
- function onLocalMuteStateChanged(
- microphoneMuted: boolean,
- localVideoMuted: boolean
- ): void {
- updateState({
- microphoneMuted,
- localVideoMuted,
- });
- }
-
- function onLocalScreenshareStateChanged(
- isScreensharing: boolean,
- _localScreenshareFeed?: CallFeed,
- localDesktopCapturerSourceId?: string
- ): void {
- updateState({
- isScreensharing,
- });
- }
-
- function onCallsChanged(): void {
- updateState({ participants: getParticipants(groupCall) });
- }
-
- function onParticipantsChanged(): void {
- updateState({
- participants: getParticipants(groupCall),
- hasLocalParticipant: groupCall.hasLocalParticipant(),
- });
- }
-
- function onError(e: GroupCallError): void {
- Sentry.captureException(e);
- if (e.code === GroupCallErrorCode.UnknownDevice) {
- const unknownDeviceError = e as GroupCallUnknownDeviceError;
- addUnencryptedEventUser(unknownDeviceError.userId);
- }
- }
-
- function onConnectionStatsReport(
- report: GroupCallStatsReport
- ): void {
- groupCallOTelMembership?.onConnectionStatsReport(report);
- }
-
- function onByteSentStatsReport(
- report: GroupCallStatsReport
- ): void {
- groupCallOTelMembership?.onByteSentStatsReport(report);
- }
-
- function onSummaryStatsReport(
- report: GroupCallStatsReport
- ): void {
- groupCallOTelMembership?.onSummaryStatsReport(report);
- }
-
- function onCallFeedStatsReport(
- report: GroupCallStatsReport
- ): void {
- groupCallOTelMembership?.onCallFeedStatsReport(report);
- }
-
- groupCall.on(GroupCallEvent.GroupCallStateChanged, onGroupCallStateChanged);
- groupCall.on(GroupCallEvent.UserMediaFeedsChanged, onUserMediaFeedsChanged);
- groupCall.on(
- GroupCallEvent.ScreenshareFeedsChanged,
- onScreenshareFeedsChanged
- );
- groupCall.on(GroupCallEvent.ActiveSpeakerChanged, onActiveSpeakerChanged);
- groupCall.on(GroupCallEvent.LocalMuteStateChanged, onLocalMuteStateChanged);
- groupCall.on(
- GroupCallEvent.LocalScreenshareStateChanged,
- onLocalScreenshareStateChanged
- );
- groupCall.on(GroupCallEvent.CallsChanged, onCallsChanged);
- groupCall.on(GroupCallEvent.ParticipantsChanged, onParticipantsChanged);
- groupCall.on(GroupCallEvent.Error, onError);
- groupCall.on(
- GroupCallStatsReportEvent.ConnectionStats,
- onConnectionStatsReport
- );
- groupCall.on(
- GroupCallStatsReportEvent.ByteSentStats,
- onByteSentStatsReport
- );
- groupCall.on(GroupCallStatsReportEvent.SummaryStats, onSummaryStatsReport);
- groupCall.on(
- GroupCallStatsReportEvent.CallFeedStats,
- onCallFeedStatsReport
- );
-
- groupCall.room.currentState.on(
- RoomStateEvent.Update,
- checkForParallelCalls
- );
-
- updateState({
- error: undefined,
- state: groupCall.state,
- localCallFeed: groupCall.localCallFeed,
- activeSpeaker: groupCall.activeSpeaker,
- userMediaFeeds: [...groupCall.userMediaFeeds],
- microphoneMuted: groupCall.isMicrophoneMuted(),
- localVideoMuted: groupCall.isLocalVideoMuted(),
- isScreensharing: groupCall.isScreensharing(),
- screenshareFeeds: [...groupCall.screenshareFeeds],
- participants: getParticipants(groupCall),
- hasLocalParticipant: groupCall.hasLocalParticipant(),
- });
-
- return () => {
- groupCall.removeListener(
- GroupCallEvent.GroupCallStateChanged,
- onGroupCallStateChanged
- );
- groupCall.removeListener(
- GroupCallEvent.UserMediaFeedsChanged,
- onUserMediaFeedsChanged
- );
- groupCall.removeListener(
- GroupCallEvent.ScreenshareFeedsChanged,
- onScreenshareFeedsChanged
- );
- groupCall.removeListener(
- GroupCallEvent.ActiveSpeakerChanged,
- onActiveSpeakerChanged
- );
- groupCall.removeListener(
- GroupCallEvent.LocalMuteStateChanged,
- onLocalMuteStateChanged
- );
- groupCall.removeListener(
- GroupCallEvent.LocalScreenshareStateChanged,
- onLocalScreenshareStateChanged
- );
- groupCall.removeListener(GroupCallEvent.CallsChanged, onCallsChanged);
- groupCall.removeListener(
- GroupCallEvent.ParticipantsChanged,
- onParticipantsChanged
- );
- groupCall.removeListener(GroupCallEvent.Error, onError);
- groupCall.removeListener(
- GroupCallStatsReportEvent.ConnectionStats,
- onConnectionStatsReport
- );
- groupCall.removeListener(
- GroupCallStatsReportEvent.ByteSentStats,
- onByteSentStatsReport
- );
- groupCall.removeListener(
- GroupCallStatsReportEvent.SummaryStats,
- onSummaryStatsReport
- );
- groupCall.removeListener(
- GroupCallStatsReportEvent.CallFeedStats,
- onCallFeedStatsReport
- );
- groupCall.room.currentState.off(
- RoomStateEvent.Update,
- checkForParallelCalls
- );
- leaveCall();
- };
- }, [groupCall, updateState, leaveCall]);
-
- usePageUnload(() => {
- leaveCall();
- });
-
- const initLocalCallFeed = useCallback(
- () => groupCall.initLocalCallFeed(),
- [groupCall]
- );
-
- const enter = useCallback(async () => {
- if (
- groupCall.state !== GroupCallState.LocalCallFeedUninitialized &&
- groupCall.state !== GroupCallState.LocalCallFeedInitialized
- ) {
- return;
- }
-
- PosthogAnalytics.instance.eventCallEnded.cacheStartCall(new Date());
- PosthogAnalytics.instance.eventCallStarted.track(groupCall.groupCallId);
-
- // This must be called before we start trying to join the call, as we need to
- // have started tracking by the time calls start getting created.
- groupCallOTelMembership?.onJoinCall();
-
- await groupCall.enter().catch((error) => {
- console.error(error);
- updateState({ error });
- });
- }, [groupCall, updateState]);
-
- const toggleLocalVideoMuted = useCallback(() => {
- const toggleToMute = !groupCall.isLocalVideoMuted();
- groupCall.setLocalVideoMuted(toggleToMute);
- groupCallOTelMembership?.onToggleLocalVideoMuted(toggleToMute);
- // TODO: These explict posthog calls should be unnecessary now with the posthog otel exporter?
- PosthogAnalytics.instance.eventMuteCamera.track(
- toggleToMute,
- groupCall.groupCallId
- );
- }, [groupCall]);
-
- const setMicrophoneMuted = useCallback(
- (setMuted: boolean) => {
- groupCall.setMicrophoneMuted(setMuted);
- groupCallOTelMembership?.onSetMicrophoneMuted(setMuted);
- PosthogAnalytics.instance.eventMuteMicrophone.track(
- setMuted,
- groupCall.groupCallId
- );
- },
- [groupCall]
- );
-
- const toggleMicrophoneMuted = useCallback(() => {
- const toggleToMute = !groupCall.isMicrophoneMuted();
- groupCallOTelMembership?.onToggleMicrophoneMuted(toggleToMute);
- setMicrophoneMuted(toggleToMute);
- }, [groupCall, setMicrophoneMuted]);
-
- const toggleScreensharing = useCallback(async () => {
- groupCallOTelMembership?.onToggleScreensharing(!groupCall.isScreensharing);
-
- if (!groupCall.isScreensharing()) {
- // toggling on
- updateState({ requestingScreenshare: true });
-
- try {
- await groupCall.setScreensharingEnabled(true, {
- audio: true,
- throwOnFail: true,
- });
- updateState({ requestingScreenshare: false });
- } catch (e) {
- // this will fail in Electron because getDisplayMedia just throws a permission
- // error, so if we have a widget API, try requesting via that.
- if (widget) {
- const reply = await widget.api.transport.send(
- ElementWidgetActions.ScreenshareRequest,
- {}
- );
- if (!reply.pending) {
- updateState({ requestingScreenshare: false });
- }
- }
- }
- } else {
- // toggling off
- groupCall.setScreensharingEnabled(false);
- }
- }, [groupCall, updateState]);
-
- const onScreenshareStart = useCallback(
- async (ev: CustomEvent) => {
- updateState({ requestingScreenshare: false });
-
- const data = ev.detail.data as unknown as ScreenshareStartData;
-
- await groupCall.setScreensharingEnabled(true, {
- desktopCapturerSourceId: data.desktopCapturerSourceId as string,
- audio: !data.desktopCapturerSourceId,
- });
- await widget?.api.transport.reply(ev.detail, {});
- },
- [groupCall, updateState]
- );
-
- const onScreenshareStop = useCallback(
- async (ev: CustomEvent) => {
- updateState({ requestingScreenshare: false });
- await groupCall.setScreensharingEnabled(false);
- await widget?.api.transport.reply(ev.detail, {});
- },
- [groupCall, updateState]
- );
-
- useEffect(() => {
- if (widget) {
- widget.lazyActions.on(
- ElementWidgetActions.ScreenshareStart,
- onScreenshareStart
- );
- widget.lazyActions.on(
- ElementWidgetActions.ScreenshareStop,
- onScreenshareStop
- );
-
- return () => {
- widget?.lazyActions.off(
- ElementWidgetActions.ScreenshareStart,
- onScreenshareStart
- );
- widget?.lazyActions.off(
- ElementWidgetActions.ScreenshareStop,
- onScreenshareStop
- );
- };
- }
- }, [onScreenshareStart, onScreenshareStop]);
-
- const { t } = useTranslation();
-
- useEffect(() => {
- if (window.RTCPeerConnection === undefined) {
- const error = translatedError(
- "WebRTC is not supported or is being blocked in this browser.",
- t
- );
- console.error(error);
- updateState({ error });
- }
- }, [t, updateState]);
-
- return {
- state,
- localCallFeed,
- activeSpeaker,
- userMediaFeeds,
- microphoneMuted,
- localVideoMuted,
- error,
- initLocalCallFeed,
- enter,
- leave: leaveCall,
- toggleLocalVideoMuted,
- toggleMicrophoneMuted,
- toggleScreensharing,
- setMicrophoneMuted,
- requestingScreenshare,
- isScreensharing,
- screenshareFeeds,
- participants,
- hasLocalParticipant,
- unencryptedEventsFromUsers,
- otelGroupCallMembership: groupCallOTelMembership,
- };
-}
diff --git a/src/room/useLoadGroupCall.ts b/src/room/useLoadGroupCall.ts
index 3436360c..9218bf32 100644
--- a/src/room/useLoadGroupCall.ts
+++ b/src/room/useLoadGroupCall.ts
@@ -15,32 +15,23 @@ limitations under the License.
*/
import { useState, useEffect } from "react";
-import { EventType } from "matrix-js-sdk/src/@types/event";
-import {
- GroupCallType,
- GroupCallIntent,
-} from "matrix-js-sdk/src/webrtc/groupCall";
-import { GroupCallEventHandlerEvent } from "matrix-js-sdk/src/webrtc/groupCallEventHandler";
import { logger } from "matrix-js-sdk/src/logger";
import { ClientEvent, MatrixClient } from "matrix-js-sdk/src/client";
import { SyncState } from "matrix-js-sdk/src/sync";
import { useTranslation } from "react-i18next";
+import { MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc/MatrixRTCSession";
import { randomString } from "matrix-js-sdk/src/randomstring";
import type { Room } from "matrix-js-sdk/src/models/room";
import type { GroupCall } from "matrix-js-sdk/src/webrtc/groupCall";
import { setLocalStorageItem } from "../useLocalStorage";
import { isLocalRoomId, createRoom, roomNameFromRoomId } from "../matrix-utils";
-import { translatedError } from "../TranslatedError";
-import { widget } from "../widget";
import { useEnableE2EE } from "../settings/useSetting";
import { getRoomSharedKeyLocalStorageKey } from "../e2ee/sharedKeyManagement";
-const STATS_COLLECT_INTERVAL_TIME_MS = 10000;
-
export type GroupCallLoaded = {
kind: "loaded";
- groupCall: GroupCall;
+ rtcSession: MatrixRTCSession;
};
export type GroupCallLoadFailed = {
@@ -130,61 +121,12 @@ export const useLoadGroupCall = (
}
};
- const fetchOrCreateGroupCall = async (): Promise => {
+ const fetchOrCreateGroupCall = async (): Promise => {
const room = await fetchOrCreateRoom();
logger.debug(`Fetched / joined room ${roomIdOrAlias}`);
- let groupCall = client.getGroupCallForRoom(room.roomId);
- logger.debug("Got group call", groupCall?.groupCallId);
- if (groupCall) {
- groupCall.setGroupCallStatsInterval(STATS_COLLECT_INTERVAL_TIME_MS);
- return groupCall;
- }
-
- if (
- !widget &&
- room.currentState.mayClientSendStateEvent(
- EventType.GroupCallPrefix,
- client
- )
- ) {
- // The call doesn't exist, but we can create it
- console.log(
- `No call found in ${roomIdOrAlias}: creating ${
- createPtt ? "PTT" : "video"
- } call`
- );
- groupCall = await client.createGroupCall(
- room.roomId,
- createPtt ? GroupCallType.Voice : GroupCallType.Video,
- createPtt,
- GroupCallIntent.Room
- );
- groupCall.setGroupCallStatsInterval(STATS_COLLECT_INTERVAL_TIME_MS);
- return groupCall;
- }
-
- // We don't have permission to create the call, so all we can do is wait
- // for one to come in
- return new Promise((resolve, reject) => {
- const onGroupCallIncoming = (groupCall: GroupCall) => {
- if (groupCall?.room.roomId === room.roomId) {
- clearTimeout(timeout);
- groupCall.setGroupCallStatsInterval(STATS_COLLECT_INTERVAL_TIME_MS);
- client.off(
- GroupCallEventHandlerEvent.Incoming,
- onGroupCallIncoming
- );
- resolve(groupCall);
- }
- };
- client.on(GroupCallEventHandlerEvent.Incoming, onGroupCallIncoming);
-
- const timeout = setTimeout(() => {
- client.off(GroupCallEventHandlerEvent.Incoming, onGroupCallIncoming);
- reject(translatedError("Fetching group call timed out.", t));
- }, 30000);
- });
+ const rtcSession = client.matrixRTC.getRoomSession(room);
+ return rtcSession;
};
const waitForClientSyncing = async () => {
@@ -207,7 +149,7 @@ export const useLoadGroupCall = (
waitForClientSyncing()
.then(fetchOrCreateGroupCall)
- .then((groupCall) => setState({ kind: "loaded", groupCall }))
+ .then((rtcSession) => setState({ kind: "loaded", rtcSession }))
.catch((error) => setState({ kind: "failed", error }));
}, [client, roomIdOrAlias, viaServers, createPtt, t, e2eeEnabled]);
diff --git a/src/usePageFocusStyle.module.css b/src/room/useRoomName.ts
similarity index 51%
rename from src/usePageFocusStyle.module.css
rename to src/room/useRoomName.ts
index 7e92738a..575f7714 100644
--- a/src/usePageFocusStyle.module.css
+++ b/src/room/useRoomName.ts
@@ -1,11 +1,11 @@
/*
-Copyright 2022 New Vector Ltd
+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
+ 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,
@@ -14,6 +14,14 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
-.hideFocus * {
- outline: none !important;
+import { Room, RoomEvent } from "matrix-js-sdk/src/matrix";
+import { useState } from "react";
+
+import { useTypedEventEmitter } from "../useEvents";
+
+export function useRoomName(room: Room): string {
+ const [, setNumUpdates] = useState(0);
+ // Whenever the name changes, force an update
+ useTypedEventEmitter(room, RoomEvent.Name, () => setNumUpdates((n) => n + 1));
+ return room.name;
}
diff --git a/src/room/useSentryGroupCallHandler.ts b/src/room/useSentryGroupCallHandler.ts
deleted file mode 100644
index 188a2934..00000000
--- a/src/room/useSentryGroupCallHandler.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-/*
-Copyright 2022 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 { useEffect } from "react";
-import * as Sentry from "@sentry/react";
-import { GroupCall, GroupCallEvent } from "matrix-js-sdk/src/webrtc/groupCall";
-import { CallEvent, MatrixCall } from "matrix-js-sdk/src/webrtc/call";
-
-export function useSentryGroupCallHandler(groupCall: GroupCall) {
- useEffect(() => {
- function onHangup(call: MatrixCall) {
- if (call.hangupReason === "ice_failed") {
- Sentry.captureException(new Error("Call hangup due to ICE failure."));
- }
- }
-
- function onError(error: Error) {
- Sentry.captureException(error);
- }
-
- if (groupCall) {
- groupCall.on(CallEvent.Hangup, onHangup);
- groupCall.on(GroupCallEvent.Error, onError);
- }
-
- return () => {
- if (groupCall) {
- groupCall.removeListener(CallEvent.Hangup, onHangup);
- groupCall.removeListener(GroupCallEvent.Error, onError);
- }
- };
- }, [groupCall]);
-}
diff --git a/src/rtcSessionHelpers.ts b/src/rtcSessionHelpers.ts
new file mode 100644
index 00000000..3d62f980
--- /dev/null
+++ b/src/rtcSessionHelpers.ts
@@ -0,0 +1,53 @@
+/*
+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 { MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc/MatrixRTCSession";
+
+import { PosthogAnalytics } from "./analytics/PosthogAnalytics";
+import { LivekitFocus } from "./livekit/LivekitFocus";
+import { Config } from "./config/Config";
+
+function makeFocus(livekitAlias: string): LivekitFocus {
+ const urlFromConf = Config.get().livekit!.livekit_service_url;
+ if (!urlFromConf) {
+ throw new Error("No livekit_service_url is configured!");
+ }
+
+ return {
+ type: "livekit",
+ livekit_service_url: urlFromConf,
+ livekit_alias: livekitAlias,
+ };
+}
+
+export function enterRTCSession(rtcSession: MatrixRTCSession) {
+ PosthogAnalytics.instance.eventCallEnded.cacheStartCall(new Date());
+ PosthogAnalytics.instance.eventCallStarted.track(rtcSession.room.roomId);
+
+ // This must be called before we start trying to join the call, as we need to
+ // have started tracking by the time calls start getting created.
+ //groupCallOTelMembership?.onJoinCall();
+
+ // right now we asume everything is a room-scoped call
+ const livekitAlias = rtcSession.room.roomId;
+
+ rtcSession.joinRoomSession([makeFocus(livekitAlias)]);
+}
+
+export function leaveRTCSession(rtcSession: MatrixRTCSession) {
+ //groupCallOTelMembership?.onLeaveCall();
+ rtcSession.leaveRoomSession();
+}
diff --git a/src/settings/ProfileSettingsTab.tsx b/src/settings/ProfileSettingsTab.tsx
index e6a59634..4286a960 100644
--- a/src/settings/ProfileSettingsTab.tsx
+++ b/src/settings/ProfileSettingsTab.tsx
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
-import { useCallback, useEffect, useRef } from "react";
+import { useCallback, useEffect, useMemo, useRef } from "react";
import { MatrixClient } from "matrix-js-sdk/src/client";
import { useTranslation } from "react-i18next";
@@ -29,6 +29,7 @@ interface Props {
export function ProfileSettingsTab({ client }: Props) {
const { t } = useTranslation();
const { error, displayName, avatarUrl, saveProfile } = useProfile(client);
+ const userId = useMemo(() => client.getUserId(), [client]);
const formRef = useRef(null);
@@ -77,12 +78,13 @@ export function ProfileSettingsTab({ client }: Props) {
return (
) : (
-
{name}
- {participants && !disableFacepile && (
-
diff --git a/src/home/RegisteredView.tsx b/src/home/RegisteredView.tsx
index 42aba9e8..0f8cc93c 100644
--- a/src/home/RegisteredView.tsx
+++ b/src/home/RegisteredView.tsx
@@ -170,7 +170,7 @@ export function RegisteredView({ client, isPasswordlessUser }: Props) {
{buttons}
;
+ footer = (
+
+ {!mobile && !hideHeader && (
+
+ );
}
return (
-
+
+ )}
+ {buttons}
+ {!mobile && !hideHeader && (
+
+
);
}
+function findMatrixMember(
+ room: MatrixRoom,
+ id: string
+): RoomMember | undefined {
+ if (!id) return undefined;
+
+ const parts = id.split(":");
+ // must be at least 3 parts because we know the first part is a userId which must necessarily contain a colon
+ if (parts.length < 3) {
+ logger.warn(
+ "Livekit participants ID doesn't look like a userId:deviceId combination"
+ );
+ return undefined;
+ }
+
+ parts.pop();
+ const userId = parts.join(":");
+
+ return room.getMember(userId) ?? undefined;
+}
+
function useParticipantTiles(
livekitRoom: Room,
- participants: Map
{!hideHeader && maximisedParticipant === null && (
-
-
@@ -452,53 +434,61 @@ export function InCallView({
{renderContent()}
{footer}
- {otelGroupCallMembership && (
+ {/*otelGroupCallMembership && (
+
+
+
+
+
+
+
+
+
+ );
+};
diff --git a/src/room/LobbyView.tsx b/src/room/LobbyView.tsx
index a34595c9..716e1200 100644
--- a/src/room/LobbyView.tsx
+++ b/src/room/LobbyView.tsx
@@ -16,32 +16,39 @@ limitations under the License.
import { useRef, useEffect, FC } from "react";
import { Trans, useTranslation } from "react-i18next";
+import { MatrixClient, RoomMember } from "matrix-js-sdk/src/matrix";
import styles from "./LobbyView.module.css";
import { Button, CopyButton } from "../button";
import { Header, LeftNav, RightNav, RoomHeaderInfo } from "../Header";
import { getRoomUrl } from "../matrix-utils";
-import { UserMenuContainer } from "../UserMenuContainer";
import { Body, Link } from "../typography/Typography";
import { useLocationNavigation } from "../useLocationNavigation";
import { MatrixInfo, VideoPreview } from "./VideoPreview";
import { MuteStates } from "./MuteStates";
import { useRoomSharedKey } from "../e2ee/sharedKeyManagement";
+import { ShareButton } from "../button/ShareButton";
interface Props {
+ client: MatrixClient;
matrixInfo: MatrixInfo;
muteStates: MuteStates;
onEnter: () => void;
isEmbedded: boolean;
hideHeader: boolean;
+ participatingMembers: RoomMember[];
+ onShareClick: (() => void) | null;
}
export const LobbyView: FC
- {microphoneMuted === false ?
+
+ {sfuParticipant.isLocal ? t("You") : displayName}
+
+
{showConnectionStats && (