Add call button to header

Signed-off-by: Timo K <toger5@hotmail.de>

src/app/features/room/RoomView.tsx

@@ -96,7 +96,7 @@ export function RoomView({ room, eventId }: { room: Room; eventId?: string }) {
 
   return (
     <Page ref={roomViewRef}>
-      <RoomViewHeader />
+      <RoomViewHeader onCallClick={() => setShowCall(true)} callJoined={callJoined} />
       <Box grow="Yes" direction="Row">
         {showCall && (
           <CallView

src/app/features/room/RoomViewHeader.tsx

@@ -69,6 +69,7 @@ import { useRoomNavigate } from '../../hooks/useRoomNavigate';
 import { useRoomCreators } from '../../hooks/useRoomCreators';
 import { useRoomPermissions } from '../../hooks/useRoomPermissions';
 import { InviteUserPrompt } from '../../components/invite-user-prompt';
+import { useCallOngoing } from '../../hooks/useCallOngoing';
 
 type RoomMenuProps = {
   room: Room;
@@ -253,8 +254,11 @@ const RoomMenu = forwardRef<HTMLDivElement, RoomMenuProps>(({ room, requestClose
     </Menu>
   );
 });
-
-export function RoomViewHeader() {
+interface RoomViewHeaderProps {
+  onCallClick?: () => void;
+  callJoined?: boolean;
+}
+export function RoomViewHeader({ onCallClick, callJoined }: RoomViewHeaderProps) {
   const navigate = useNavigate();
   const mx = useMatrixClient();
   const useAuthentication = useMediaAuthentication();
@@ -274,6 +278,7 @@ export function RoomViewHeader() {
   const avatarUrl = avatarMxc
     ? mxcUrlToHttp(mx, avatarMxc, useAuthentication, 96, 96, 'crop') ?? undefined
     : undefined;
+  const callOngoing = useCallOngoing(room);
 
   const [peopleDrawer, setPeopleDrawer] = useSetting(settingsAtom, 'isPeopleDrawer');
 
@@ -295,6 +300,9 @@ export function RoomViewHeader() {
     setPinMenuAnchor(evt.currentTarget.getBoundingClientRect());
   };
 
+  const notParticipatingState = callOngoing ? 'join' : 'start';
+  const buttonState = callJoined ? 'participating' : notParticipatingState;
+
   return (
     <PageHeader balance={screenSize === ScreenSize.Mobile}>
       <Box grow="Yes" gap="300">
@@ -387,6 +395,33 @@ export function RoomViewHeader() {
               )}
             </TooltipProvider>
           )}
+
+          <TooltipProvider
+            position="Bottom"
+            offset={4}
+            tooltip={
+              <Tooltip>
+                {buttonState === 'start' && <Text>Start Call</Text>}
+                {buttonState === 'join' && <Text>Join Call</Text>}
+                {buttonState === 'participating' && <Text>Call Ongoing</Text>}
+              </Tooltip>
+            }
+          >
+            {(triggerRef) => (
+              <IconButton
+                variant={buttonState === 'join' ? 'Primary' : undefined}
+                style={{ position: 'relative' }}
+                onClick={onCallClick}
+                ref={triggerRef}
+                disabled={buttonState === 'participating'}
+                aria-pressed={!!pinMenuAnchor}
+              >
+                {buttonState === 'join' && <Text size="B400">Join</Text>}
+                <Icon size="400" src={Icons.Phone} filled={buttonState === 'participating'} />
+              </IconButton>
+            )}
+          </TooltipProvider>
+
           <TooltipProvider
             position="Bottom"
             offset={4}

src/app/hooks/useCallOngoing.ts

@@ -0,0 +1,29 @@
+import { Room } from 'matrix-js-sdk';
+import { useEffect, useState } from 'react';
+
+import { MatrixRTCSessionManagerEvents } from 'matrix-js-sdk/lib/matrixrtc/MatrixRTCSessionManager';
+
+export const useCallOngoing = (room: Room) => {
+  const [callOngoing, setCallOngoing] = useState(
+    room.client.matrixRTC.getRoomSession(room).memberships.length > 0
+  );
+
+  useEffect(() => {
+    const start = (roomId: string) => {
+      if (roomId !== room.roomId) return;
+      setCallOngoing(true);
+    };
+    const end = (roomId: string) => {
+      if (roomId !== room.roomId) return;
+      setCallOngoing(false);
+    };
+    room.client.matrixRTC.on(MatrixRTCSessionManagerEvents.SessionStarted, start);
+    room.client.matrixRTC.on(MatrixRTCSessionManagerEvents.SessionEnded, end);
+    return () => {
+      room.client.matrixRTC.off(MatrixRTCSessionManagerEvents.SessionStarted, start);
+      room.client.matrixRTC.off(MatrixRTCSessionManagerEvents.SessionEnded, end);
+    };
+  }, [room]);
+
+  return callOngoing;
+};