Allow PiP while awaiting approval to join adhoc calls

ts/components/CallManager.tsx

@@ -311,6 +311,24 @@ function ActiveCallManager({
       throw missingCaseError(activeCall);
   }
 
+  if (pip) {
+    return (
+      <CallingPip
+        activeCall={activeCall}
+        getGroupCallVideoFrameSource={getGroupCallVideoFrameSourceForActiveCall}
+        hangUpActiveCall={hangUpActiveCall}
+        hasLocalVideo={hasLocalVideo}
+        i18n={i18n}
+        setGroupCallVideoRequest={setGroupCallVideoRequestForConversation}
+        setLocalPreview={setLocalPreview}
+        setRendererCanvas={setRendererCanvas}
+        switchToPresentationView={switchToPresentationView}
+        switchFromPresentationView={switchFromPresentationView}
+        togglePip={togglePip}
+      />
+    );
+  }
+
   if (showCallLobby) {
     return (
       <>
@@ -336,6 +354,7 @@ function ActiveCallManager({
           setOutgoingRing={setOutgoingRing}
           showParticipantsList={showParticipantsList}
           toggleParticipants={toggleParticipants}
+          togglePip={togglePip}
           toggleSettings={toggleSettings}
         />
         {settingsDialogOpen && renderDeviceSelection()}
@@ -361,24 +380,6 @@ function ActiveCallManager({
     );
   }
 
-  if (pip) {
-    return (
-      <CallingPip
-        activeCall={activeCall}
-        getGroupCallVideoFrameSource={getGroupCallVideoFrameSourceForActiveCall}
-        hangUpActiveCall={hangUpActiveCall}
-        hasLocalVideo={hasLocalVideo}
-        i18n={i18n}
-        setGroupCallVideoRequest={setGroupCallVideoRequestForConversation}
-        setLocalPreview={setLocalPreview}
-        setRendererCanvas={setRendererCanvas}
-        switchToPresentationView={switchToPresentationView}
-        switchFromPresentationView={switchFromPresentationView}
-        togglePip={togglePip}
-      />
-    );
-  }
-
   let isHandRaised = false;
   if (isGroupOrAdhocActiveCall(activeCall)) {
     const { raisedHands, localDemuxId } = activeCall;

ts/components/CallingLobby.stories.tsx

@@ -75,6 +75,7 @@ const createProps = (overrideProps: Partial<PropsType> = {}): PropsType => {
     setOutgoingRing: action('set-outgoing-ring'),
     showParticipantsList: overrideProps.showParticipantsList ?? false,
     toggleParticipants: action('toggle-participants'),
+    togglePip: action('toggle-pip'),
     toggleSettings: action('toggle-settings'),
   };
 };

ts/components/CallingLobby.tsx

@@ -75,6 +75,7 @@ export type PropsType = {
   setOutgoingRing: (_: boolean) => void;
   showParticipantsList: boolean;
   toggleParticipants: () => void;
+  togglePip: () => void;
   toggleSettings: () => void;
 };
 
@@ -98,6 +99,7 @@ export function CallingLobby({
   setLocalVideo,
   setOutgoingRing,
   toggleParticipants,
+  togglePip,
   toggleSettings,
   outgoingRing,
 }: PropsType): JSX.Element {
@@ -119,6 +121,10 @@ export function CallingLobby({
     setOutgoingRing(!outgoingRing);
   }, [outgoingRing, setOutgoingRing]);
 
+  const togglePipForCallingHeader = isAdhocJoinRequestPending
+    ? togglePip
+    : undefined;
+
   React.useEffect(() => {
     setLocalPreview({ element: localVideoRef });
 
@@ -155,7 +161,9 @@ export function CallingLobby({
 
   const isOnline = useIsOnline();
 
-  const [isCallConnecting, setIsCallConnecting] = React.useState(false);
+  const [isCallConnecting, setIsCallConnecting] = React.useState(
+    isAdhocJoinRequestPending || false
+  );
 
   // eslint-disable-next-line no-nested-ternary
   const videoButtonType = hasLocalVideo
@@ -266,6 +274,7 @@ export function CallingLobby({
           i18n={i18n}
           isGroupCall={isGroupOrAdhocCall}
           participantCount={peekedParticipants.length}
+          togglePip={togglePipForCallingHeader}
           toggleSettings={toggleSettings}
           onCancel={onCallCanceled}
         />

ts/components/CallingPipRemoteVideo.tsx

@@ -14,7 +14,7 @@ import type {
   GroupCallRemoteParticipantType,
   GroupCallVideoRequest,
 } from '../types/Calling';
-import { CallMode } from '../types/Calling';
+import { CallMode, GroupCallJoinState } from '../types/Calling';
 import { AvatarColors } from '../types/Colors';
 import type { SetRendererCanvasType } from '../state/ducks/calling';
 import { useGetCallingFrameBuffer } from '../calling/useGetCallingFrameBuffer';
@@ -41,6 +41,7 @@ function NoVideo({
     acceptedMessageRequest,
     avatarPath,
     color,
+    type: conversationType,
     isMe,
     phoneNumber,
     profileName,
@@ -58,7 +59,7 @@ function NoVideo({
             badge={undefined}
             color={color || AvatarColors[0]}
             noteToSelf={false}
-            conversationType="direct"
+            conversationType={conversationType}
             i18n={i18n}
             isMe={isMe}
             phoneNumber={phoneNumber}
@@ -103,6 +104,10 @@ export function CallingPipRemoteVideo({
         return undefined;
       }
 
+      if (activeCall.joinState !== GroupCallJoinState.Joined) {
+        return undefined;
+      }
+
       return maxBy(activeCall.remoteParticipants, participant =>
         participant.presenting ? Infinity : participant.speakerTime || -Infinity
       );