Calls: Various fixes (#1561)

src/components/calls/ActiveCallHeader.tsx

@@ -32,6 +32,10 @@ const ActiveCallHeader: FC<StateProps & DispatchProps> = ({
 
   useEffect(() => {
     document.body.classList.toggle('has-group-call-header', isGroupCallPanelHidden);
+
+    return () => {
+      document.body.classList.toggle('has-group-call-header', false);
+    };
   }, [isGroupCallPanelHidden]);
 
   if (!groupCall || !meParticipant) return undefined;

src/components/calls/group/GroupCall.tsx

@@ -184,6 +184,13 @@ const GroupCall: FC<OwnProps & StateProps & DispatchProps> = ({
     }
   }, [closeFullscreen, isFullscreen, openFullscreen]);
 
+  const handleClose = () => {
+    toggleGroupCallPanel();
+    if (isFullscreen) {
+      closeFullscreen();
+    }
+  };
+
   useEffect(() => {
     if (!IS_REQUEST_FULLSCREEN_SUPPORTED) return undefined;
     const container = containerRef.current;
@@ -302,7 +309,7 @@ const GroupCall: FC<OwnProps & StateProps & DispatchProps> = ({
           round
           size="smaller"
           color="translucent"
-          onClick={toggleGroupCallPanel}
+          onClick={handleClose}
         >
           <i className="icon-close" />
         </Button>

src/components/calls/group/GroupCallParticipantList.tsx

@@ -8,7 +8,6 @@ import { pick } from '../../../util/iteratees';
 import useLang from '../../../hooks/useLang';
 import { selectActiveGroupCall } from '../../../modules/selectors/calls';
 import useInfiniteScroll from '../../../hooks/useInfiniteScroll';
-import { selectChat } from '../../../modules/selectors';
 
 import GroupCallParticipant from './GroupCallParticipant';
 import InfiniteScroll from '../../ui/InfiniteScroll';
@@ -31,7 +30,6 @@ const GroupCallParticipantList: FC<OwnProps & StateProps & DispatchProps> = ({
   participants,
   participantsCount,
   openParticipantMenu,
-  canInvite,
 }) => {
   const lang = useLang();
 
@@ -47,14 +45,12 @@ const GroupCallParticipantList: FC<OwnProps & StateProps & DispatchProps> = ({
 
   return (
     <div className="participants">
-      {canInvite && (
+      <div className="invite-btn" onClick={createGroupCallInviteLink}>
-        <div className="invite-btn" onClick={createGroupCallInviteLink}>
+        <div className="icon">
-          <div className="icon">
+          <i className="icon-add-user" />
-            <i className="icon-add-user" />
-          </div>
-          <div className="text">{lang('VoipGroupInviteMember')}</div>
         </div>
-      )}
+        <div className="text">{lang('VoipGroupInviteMember')}</div>
+      </div>
 
       <InfiniteScroll
         items={viewportIds}
@@ -79,13 +75,11 @@ const GroupCallParticipantList: FC<OwnProps & StateProps & DispatchProps> = ({
 
 export default memo(withGlobal<OwnProps>(
   (global): StateProps => {
-    const { participantsCount, participants, chatId } = selectActiveGroupCall(global) || {};
+    const { participantsCount, participants } = selectActiveGroupCall(global) || {};
-    const chat = chatId && selectChat(global, chatId);
 
     return {
       participants,
       participantsCount: participantsCount || 0,
-      canInvite: !!chat && !!chat.username,
     };
   },
   (setGlobal, actions): DispatchProps => pick(actions, [

src/global/cache.ts

@@ -222,7 +222,6 @@ function updateCache() {
       'shouldShowContextMenuHint',
       'leftColumnWidth',
       'serviceNotifications',
-      // TODO Support 'groupCalls'
     ]),
     audioPlayer: {
       volume: global.audioPlayer.volume,

src/modules/actions/ui/calls.ts

@@ -149,19 +149,31 @@ addReducer('createGroupCall', (global, actions, payload) => {
 addReducer('createGroupCallInviteLink', (global, actions) => {
   const groupCall = selectActiveGroupCall(global);
 
-  if (!groupCall) {
+  if (!groupCall || !groupCall.chatId) {
     return;
   }
 
+  const chat = selectChat(global, groupCall.chatId);
+  if (!chat) {
+    return;
+  }
+
+  const canInvite = !!chat && !!chat.username;
+
   (async () => {
-    const result = await callApi('exportGroupCallInvite', {
+    let { inviteLink } = chat.fullInfo!;
-      call: groupCall,
+    if (canInvite) {
-      canSelfUnmute: false,
+      inviteLink = await callApi('exportGroupCallInvite', {
-    });
+        call: groupCall,
+        canSelfUnmute: false,
+      });
+    }
 
-    if (!result) return;
+    if (!inviteLink) {
+      return;
+    }
 
-    copyTextToClipboard(result);
+    copyTextToClipboard(inviteLink);
     actions.showNotification({
       message: 'Link copied to clipboard',
     });