Hide speaking border when presenting/1:1 in group

ts/components/CallingPipRemoteVideo.tsx

@@ -171,6 +171,7 @@ export function CallingPipRemoteVideo({
             i18n={i18n}
             isInPip
             remoteParticipant={activeGroupCallSpeaker}
+            remoteParticipantsCount={activeCall.remoteParticipants.length}
           />
         </div>
       );

ts/components/GroupCallOverflowArea.stories.tsx

@@ -40,6 +40,7 @@ const defaultProps = {
   i18n,
   onParticipantVisibilityChanged: action('onParticipantVisibilityChanged'),
   remoteAudioLevels: new Map<number, number>(),
+  remoteParticipantsCount: 1,
 };
 
 // This component is usually rendered on a call screen.

ts/components/GroupCallOverflowArea.tsx

@@ -25,6 +25,7 @@ type PropsType = {
   ) => unknown;
   overflowedParticipants: ReadonlyArray<GroupCallRemoteParticipantType>;
   remoteAudioLevels: Map<number, number>;
+  remoteParticipantsCount: number;
 };
 
 export function GroupCallOverflowArea({
@@ -34,6 +35,7 @@ export function GroupCallOverflowArea({
   onParticipantVisibilityChanged,
   overflowedParticipants,
   remoteAudioLevels,
+  remoteParticipantsCount,
 }: PropsType): JSX.Element | null {
   const overflowRef = useRef<HTMLDivElement | null>(null);
   const [overflowScrollTop, setOverflowScrollTop] = useState(0);
@@ -123,6 +125,7 @@ export function GroupCallOverflowArea({
               OVERFLOW_PARTICIPANT_WIDTH / remoteParticipant.videoAspectRatio
             )}
             remoteParticipant={remoteParticipant}
+            remoteParticipantsCount={remoteParticipantsCount}
           />
         ))}
       </div>

ts/components/GroupCallRemoteParticipant.stories.tsx

@@ -16,6 +16,7 @@ const i18n = setupI18n('en', enMessages);
 
 type OverridePropsType = {
   audioLevel?: number;
+  remoteParticipantsCount?: number;
 } & (
   | {
       isInPip: true;
@@ -36,9 +37,11 @@ const createProps = (
   {
     isBlocked = false,
     hasRemoteAudio = false,
+    presenting = false,
   }: {
     isBlocked?: boolean;
     hasRemoteAudio?: boolean;
+    presenting?: boolean;
   } = {}
 ): PropsType => ({
   getFrameBuffer,
@@ -50,7 +53,7 @@ const createProps = (
     demuxId: 123,
     hasRemoteAudio,
     hasRemoteVideo: true,
-    presenting: false,
+    presenting,
     sharingScreen: false,
     videoAspectRatio: 1.3,
     ...getDefaultConversation({
@@ -60,6 +63,7 @@ const createProps = (
       uuid: '992ed3b9-fc9b-47a9-bdb4-e0c7cbb0fda5',
     }),
   },
+  remoteParticipantsCount: 1,
   ...overrideProps,
 });
 
@@ -82,20 +86,30 @@ export function Default(): JSX.Element {
 }
 
 export function Speaking(): JSX.Element {
-  return (
+  function createSpeakingProps(
-    <GroupCallRemoteParticipant
+    index: number,
-      {...createProps(
+    remoteParticipantsCount: number,
+    presenting: boolean
+  ) {
+    return createProps(
       {
         isInPip: false,
         height: 120,
-          left: 0,
+        left: (120 + 10) * index,
         top: 0,
         width: 120,
         audioLevel: select('audioLevel', [0, 0.5, 1], 0.5),
+        remoteParticipantsCount,
       },
-        { hasRemoteAudio: true }
+      { hasRemoteAudio: true, presenting }
-      )}
+    );
-    />
+  }
+  return (
+    <>
+      <GroupCallRemoteParticipant {...createSpeakingProps(0, 1, false)} />
+      <GroupCallRemoteParticipant {...createSpeakingProps(1, 2, false)} />
+      <GroupCallRemoteParticipant {...createSpeakingProps(2, 2, true)} />
+    </>
   );
 }
 

ts/components/GroupCallRemoteParticipant.tsx

@@ -37,6 +37,7 @@ type BasePropsType = {
   i18n: LocalizerType;
   onVisibilityChanged?: (demuxId: number, isVisible: boolean) => unknown;
   remoteParticipant: GroupCallRemoteParticipantType;
+  remoteParticipantsCount: number;
 };
 
 type InPipPropsType = {
@@ -65,6 +66,7 @@ export const GroupCallRemoteParticipant: React.FC<PropsType> = React.memo(
       getGroupCallVideoFrameSource,
       i18n,
       onVisibilityChanged,
+      remoteParticipantsCount,
     } = props;
 
     const {
@@ -81,6 +83,7 @@ export const GroupCallRemoteParticipant: React.FC<PropsType> = React.memo(
       sharingScreen,
       title,
       videoAspectRatio,
+      presenting,
     } = props.remoteParticipant;
 
     const isSpeaking = useValueAtFixedRate(
@@ -278,6 +281,8 @@ export const GroupCallRemoteParticipant: React.FC<PropsType> = React.memo(
           className={classNames(
             'module-ongoing-call__group-call-remote-participant',
             isSpeaking &&
+              !presenting &&
+              remoteParticipantsCount > 1 &&
               'module-ongoing-call__group-call-remote-participant--speaking'
           )}
           ref={intersectionRef}

ts/components/GroupCallRemoteParticipants.tsx

@@ -295,6 +295,7 @@ export function GroupCallRemoteParticipants({
             remoteParticipant={remoteParticipant}
             top={top}
             width={renderedWidth}
+            remoteParticipantsCount={remoteParticipants.length}
           />
         );
       });
@@ -438,6 +439,7 @@ export function GroupCallRemoteParticipants({
             onParticipantVisibilityChanged={onParticipantVisibilityChanged}
             overflowedParticipants={overflowedParticipants}
             remoteAudioLevels={remoteAudioLevels}
+            remoteParticipantsCount={remoteParticipants.length}
           />
         </div>
       )}