feat: Add option to start video call in DM

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={
-        <RoomIcon size="200" joinRule={room.getJoinRule()} roomType={room.getType()} filled />
+        dm ? (
+          <Icon size="200" src={Icons.VolumeHigh} filled />
+        ) : (
+          <RoomIcon size="200" joinRule={room.getJoinRule()} roomType={room.getType()} filled />
+        )
       }
       onClick={() => navigateRoom(room.roomId)}
     >

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 (
     <PowerLevelsContextProvider value={powerLevels}>

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 (
     <PageHeader
       className={ContainerColor({ variant: 'Surface' })}
@@ -453,7 +459,33 @@ export function RoomViewHeader({ callView }: { callView?: boolean }) {
               </FocusTrap>
             }
           />
-
+          {direct && !callStarted && (
+            <TooltipProvider
+              position="Bottom"
+              offset={4}
+              tooltip={
+                <Tooltip>
+                  {inAnotherCall ? (
+                    <Text size="L400">Already in another call — End the current call to join!</Text>
+                  ) : (
+                    <Text>Start Call</Text>
+                  )}
+                </Tooltip>
+              }
+            >
+              {(triggerRef) => (
+                <IconButton
+                  variant="Surface"
+                  fill="None"
+                  ref={triggerRef}
+                  onClick={() => startCall(room, { microphone: true, video: true, sound: true })}
+                  disabled={inAnotherCall}
+                >
+                  <Icon size="400" src={Icons.VideoCamera} filled={callStarted} />
+                </IconButton>
+              )}
+            </TooltipProvider>
+          )}
           {screenSize === ScreenSize.Desktop && (
             <TooltipProvider
               position="Bottom"