Calls: Fix old call panel being stuck (#1923)

src/components/calls/phone/PhoneCall.tsx

@@ -101,8 +101,16 @@ const PhoneCall: FC<StateProps> = ({
   const isActive = phoneCall?.state === 'active';
   const isConnected = phoneCall?.isConnected;
 
+  const [isHangingUp, startHangingUp, stopHangingUp] = useFlag();
+  const handleHangUp = useCallback(() => {
+    startHangingUp();
+    hangUp();
+  }, [hangUp, startHangingUp]);
+
   useEffect(() => {
-    if (isIncomingRequested) {
+    if (isHangingUp) {
+      playGroupCallSound({ sound: 'end' });
+    } else if (isIncomingRequested) {
       playGroupCallSound({ sound: 'incoming' });
     } else if (isBusy) {
       playGroupCallSound({ sound: 'busy' });
@@ -113,13 +121,7 @@ const PhoneCall: FC<StateProps> = ({
     } else if (isConnected) {
       playGroupCallSound({ sound: 'connect' });
     }
-  }, [isBusy, isDiscarded, isIncomingRequested, isOutgoingRequested, isConnected, playGroupCallSound]);
-
-  const [isHangingUp, startHangingUp, stopHangingUp] = useFlag();
-  const handleHangUp = useCallback(() => {
-    startHangingUp();
-    hangUp();
-  }, [hangUp, startHangingUp]);
+  }, [isBusy, isDiscarded, isIncomingRequested, isOutgoingRequested, isConnected, playGroupCallSound, isHangingUp]);
 
   useEffect(() => {
     if (phoneCall?.id) {

src/global/actions/api/calls.async.ts

@@ -313,5 +313,13 @@ addActionHandler('hangUp', (global) => {
     };
   }
 
+  setTimeout(() => {
+    setGlobal({
+      ...getGlobal(),
+      phoneCall: undefined,
+      isCallPanelVisible: undefined,
+    });
+  }, 500);
+
   return undefined;
 });

src/global/actions/apiUpdaters/calls.ts

@@ -69,16 +69,28 @@ addActionHandler('apiUpdate', (global, actions, update) => {
         currentUserId,
       } = global;
 
-      if (phoneCall) return undefined;
-
       const { call } = update;
+
+      if (phoneCall) {
+        if (call.state === 'discarded') {
+          return {
+            ...global,
+            ...(call.needRating && { ratingPhoneCall: call }),
+            isCallPanelVisible: undefined,
+            phoneCall: undefined,
+          };
+        }
+
+        return undefined;
+      }
+
       const isOutgoing = call?.adminId === currentUserId;
 
       if (!isOutgoing && call.state === 'requested') {
         onTickEnd(() => {
           notifyAboutCall({
             call,
-            user: selectPhoneCallUser(global)!,
+            user: selectPhoneCallUser(getGlobal())!,
           });
         });