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 && (