Adding call to convo header menu

ts/components/session/ActionsPanel.tsx

@@ -289,7 +289,7 @@ export const ActionsPanel = () => {
       <ModalContainer />
 
       <CallContainer />
-      
+
       <div className="module-left-pane__sections-container">
         <Section type={SectionType.Profile} avatarPath={ourPrimaryConversation.avatarPath} />
         <Section type={SectionType.Message} />

ts/components/session/menu/ConversationHeaderMenu.tsx

@@ -15,6 +15,7 @@ import {
   getNotificationForConvoMenuItem,
   getPinConversationMenuItem,
   getRemoveModeratorsMenuItem,
+  getStartCallMenuItem,
   getUpdateGroupNameMenuItem,
 } from './Menu';
 import _ from 'lodash';
@@ -53,6 +54,7 @@ const ConversationHeaderMenu = (props: PropsConversationHeaderMenu) => {
 
   return (
     <Menu id={triggerId} animation={animation.fade}>
+      {getStartCallMenuItem(conversationId)}
       {getDisappearingMenuItem(isPublic, isKickedFromGroup, left, isBlocked, conversationId)}
       {getNotificationForConvoMenuItem({
         isKickedFromGroup,

ts/components/session/menu/Menu.tsx

@@ -29,6 +29,7 @@ import {
 import { SessionButtonColor } from '../SessionButton';
 import { getTimerOptions } from '../../../state/selectors/timerOptions';
 import { ToastUtils } from '../../../session/utils';
+import { getConversationById } from '../../../data/data';
 
 const maxNumberOfPinnedConversations = 5;
 
@@ -318,6 +319,43 @@ export function getMarkAllReadMenuItem(conversationId: string): JSX.Element | nu
   );
 }
 
+export function getStartCallMenuItem(conversationId: string): JSX.Element | null {
+  // TODO: possibly conditionally show options?
+  const callOptions = [
+    {
+      name: 'Video call',
+      value: 'video-call',
+    },
+    {
+      name: 'Audio call',
+      value: 'audio-call',
+    },
+  ];
+
+  return (
+    <Submenu label={'Start call'}>
+      {callOptions.map(item => (
+        <Item
+          key={item.value}
+          onClick={async () => {
+            // TODO: either pass param to callRecipient or call different call methods based on item selected.
+            const convo = await getConversationById(conversationId);
+            if (convo) {
+              // window?.libsession?.Utils.CallManager.USER_callRecipient(
+              //   '054774a456f15c7aca42fe8d245983549000311aaebcf58ce246250c41fe227676'
+              // );
+              window?.libsession?.Utils.CallManager.USER_callRecipient(convo.id);
+              convo.callState = 'connecting';
+            }
+          }}
+        >
+          {item.name}
+        </Item>
+      ))}
+    </Submenu>
+  );
+}
+
 export function getDisappearingMenuItem(
   isPublic: boolean | undefined,
   isKickedFromGroup: boolean | undefined,

ts/models/conversation.ts

@@ -184,7 +184,7 @@ export class ConversationModel extends Backbone.Model<ConversationAttributes> {
   public markRead: (newestUnreadDate: number, providedOptions?: any) => Promise<void>;
   public initialPromise: any;
 
-  public callState: 'incoming' | 'connecting' | 'ongoing' | 'none' | undefined;
+  public callState: 'offering' | 'incoming' | 'connecting' | 'ongoing' | 'none' | undefined;
 
   private typingRefreshTimer?: NodeJS.Timeout | null;
   private typingPauseTimer?: NodeJS.Timeout | null;

ts/window.d.ts

@@ -83,5 +83,6 @@ declare global {
     callWorker: (fnName: string, ...args: any) => Promise<any>;
     setStartInTray: (val: boolean) => Promise<void>;
     getStartInTray: () => Promise<boolean>;
+    libsession: any;
   }
 }