Additional logging for calling service

ts/components/CallManager.tsx

@@ -93,7 +93,7 @@ export type PropsType = {
   stopRingtone: () => unknown;
   switchToPresentationView: () => void;
   switchFromPresentationView: () => void;
-  hangUpActiveCall: () => void;
+  hangUpActiveCall: (reason: string) => void;
   theme: ThemeType;
   togglePip: () => void;
   toggleScreenRecordingPermissionsDialog: () => unknown;
@@ -187,6 +187,10 @@ const ActiveCallManager: React.FC<ActiveCallManagerPropsType> = ({
     [setGroupCallVideoRequest, conversation.id]
   );
 
+  const onSafetyNumberDialogCancel = useCallback(() => {
+    hangUpActiveCall('safety number dialog cancel');
+  }, [hangUpActiveCall]);
+
   let isCallFull: boolean;
   let showCallLobby: boolean;
   let groupMembers:
@@ -351,7 +355,7 @@ const ActiveCallManager: React.FC<ActiveCallManagerPropsType> = ({
           contacts={activeCall.conversationsWithSafetyNumberChanges}
           getPreferredBadge={getPreferredBadge}
           i18n={i18n}
-          onCancel={hangUpActiveCall}
+          onCancel={onSafetyNumberDialogCancel}
           onConfirm={() => {
             keyChangeOk({ conversationId: activeCall.conversation.id });
           }}

ts/components/CallScreen.tsx

@@ -51,7 +51,7 @@ export type PropsType = {
   getGroupCallVideoFrameSource: (demuxId: number) => VideoFrameSource;
   getPresentingSources: () => void;
   groupMembers?: Array<Pick<ConversationType, 'id' | 'firstName' | 'title'>>;
-  hangUpActiveCall: () => void;
+  hangUpActiveCall: (reason: string) => void;
   i18n: LocalizerType;
   joinedAt?: number;
   me: ConversationType;
@@ -181,6 +181,10 @@ export const CallScreen: React.FC<PropsType> = ({
     }
   }, [getPresentingSources, presentingSource, setPresenting]);
 
+  const hangUp = useCallback(() => {
+    hangUpActiveCall('button click');
+  }, [hangUpActiveCall]);
+
   const [controlsHover, setControlsHover] = useState(false);
 
   const onControlsMouseEnter = useCallback(() => {
@@ -521,7 +525,7 @@ export const CallScreen: React.FC<PropsType> = ({
             i18n={i18n}
             onMouseEnter={onControlsMouseEnter}
             onMouseLeave={onControlsMouseLeave}
-            onClick={hangUpActiveCall}
+            onClick={hangUp}
           />
         </div>
         <div className="module-ongoing-call__footer__local-preview">

ts/components/CallingPip.tsx

@@ -51,7 +51,7 @@ type SnapCandidate = {
 export type PropsType = {
   activeCall: ActiveCallType;
   getGroupCallVideoFrameSource: (demuxId: number) => VideoFrameSource;
-  hangUpActiveCall: () => void;
+  hangUpActiveCall: (reason: string) => void;
   hasLocalVideo: boolean;
   i18n: LocalizerType;
   setGroupCallVideoRequest: (_: Array<GroupCallVideoRequest>) => void;
@@ -100,6 +100,10 @@ export const CallingPip = ({
     setLocalPreview({ element: localVideoRef });
   }, [setLocalPreview]);
 
+  const hangUp = React.useCallback(() => {
+    hangUpActiveCall('pip button click');
+  }, [hangUpActiveCall]);
+
   const handleMouseMove = React.useCallback(
     (ev: MouseEvent) => {
       if (positionState.mode === PositionMode.BeingDragged) {
@@ -294,7 +298,7 @@ export const CallingPip = ({
         <button
           aria-label={i18n('calling__hangup')}
           className="module-calling-pip__button--hangup"
-          onClick={hangUpActiveCall}
+          onClick={hangUp}
           type="button"
         />
         <button