add option to start video all in DM

src/app/features/room/Room.tsx

@@ -18,12 +18,15 @@ import { CallView } from '../call/CallView';
 import { RoomViewHeader } from './RoomViewHeader';
 import { callChatAtom } from '../../state/callEmbed';
 import { CallChatView } from './CallChatView';
+import { useCallEmbed } from '../../hooks/useCallEmbed';
 
 export function Room() {
   const { eventId } = useParams();
   const room = useRoom();
   const mx = useMatrixClient();
 
+  const callEmbed = useCallEmbed();
+
   const [isDrawer] = useSetting(settingsAtom, 'isPeopleDrawer');
   const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
   const screenSize = useScreenSizeContext();
@@ -43,7 +46,7 @@ export function Room() {
     )
   );
 
-  const callView = room.isCallRoom();
+  const callView = callEmbed?.roomId === room.roomId || room.isCallRoom();
 
   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"