diff --git a/public/sound/call.ogg b/public/sound/call.ogg
new file mode 100644
index 0000000000..173f73d201
Binary files /dev/null and b/public/sound/call.ogg differ
diff --git a/src/app/features/call-status/CallRoomName.tsx b/src/app/features/call-status/CallRoomName.tsx
index 39f0e91445..8b65528a6c 100644
--- a/src/app/features/call-status/CallRoomName.tsx
+++ b/src/app/features/call-status/CallRoomName.tsx
@@ -1,6 +1,6 @@
import React from 'react';
import { Room } from 'matrix-js-sdk';
-import { Chip, Text } from 'folds';
+import { Chip, Icon, Icons, Text } from 'folds';
import { useAtomValue } from 'jotai';
import { useRoomName } from '../../hooks/useRoomMeta';
import { RoomIcon } from '../../components/room-avatar';
@@ -38,7 +38,11 @@ export function CallRoomName({ room }: CallRoomNameProps) {
variant="Background"
radii="Pill"
before={
-
+ dm ? (
+
+ ) : (
+
+ )
}
onClick={() => navigateRoom(room.roomId)}
>
diff --git a/src/app/features/room/Room.tsx b/src/app/features/room/Room.tsx
index 5e5d7d7840..b3e8a4eb11 100644
--- a/src/app/features/room/Room.tsx
+++ b/src/app/features/room/Room.tsx
@@ -18,12 +18,18 @@ import { CallView } from '../call/CallView';
import { RoomViewHeader } from './RoomViewHeader';
import { callChatAtom } from '../../state/callEmbed';
import { CallChatView } from './CallChatView';
+import { useCallEmbed } from '../../hooks/useCallEmbed';
+import { useCallMembers, useCallSession } from '../../hooks/useCall';
export function Room() {
const { eventId } = useParams();
const room = useRoom();
const mx = useMatrixClient();
+ const callSession = useCallSession(room);
+ const callMembers = useCallMembers(room, callSession);
+ const callEmbed = useCallEmbed();
+
const [isDrawer] = useSetting(settingsAtom, 'isPeopleDrawer');
const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
const screenSize = useScreenSizeContext();
@@ -43,7 +49,7 @@ export function Room() {
)
);
- const callView = room.isCallRoom();
+ const callView = callEmbed?.roomId === room.roomId || room.isCallRoom() || callMembers.length > 0;
return (
diff --git a/src/app/features/room/RoomViewHeader.tsx b/src/app/features/room/RoomViewHeader.tsx
index a19058d26f..ce26ec17e3 100644
--- a/src/app/features/room/RoomViewHeader.tsx
+++ b/src/app/features/room/RoomViewHeader.tsx
@@ -68,6 +68,7 @@ import { useRoomPermissions } from '../../hooks/useRoomPermissions';
import { InviteUserPrompt } from '../../components/invite-user-prompt';
import { ContainerColor } from '../../styles/ContainerColor.css';
import { RoomSettingsPage } from '../../state/roomSettings';
+import { useCallEmbed, useCallStart } from '../../hooks/useCallEmbed';
type RoomMenuProps = {
room: Room;
@@ -304,6 +305,11 @@ export function RoomViewHeader({ callView }: { callView?: boolean }) {
setPeopleDrawer(!peopleDrawer);
};
+ const callEmbed = useCallEmbed();
+ const startCall = useCallStart(direct);
+ const callStarted = callEmbed && callEmbed.roomId === room.roomId;
+ const inAnotherCall = callEmbed && !callStarted;
+
return (
}
/>
-
+ {direct && !callStarted && (
+
+ {inAnotherCall ? (
+ Already in another call — End the current call to join!
+ ) : (
+ Start Call
+ )}
+
+ }
+ >
+ {(triggerRef) => (
+ startCall(room, { microphone: true, video: true, sound: true })}
+ disabled={inAnotherCall}
+ >
+
+
+ )}
+
+ )}
{screenSize === ScreenSize.Desktop && (