From f272433b7ad1bc3d53720ad4aa005e38be1888bc Mon Sep 17 00:00:00 2001
From: Jamie Kyle <113370520+jamiebuilds-signal@users.noreply.github.com>
Date: Wed, 22 Mar 2023 10:53:13 -0700
Subject: [PATCH] Hide speaking border when presenting/1:1 in group

---
 ts/components/CallingPipRemoteVideo.tsx       |  1 +
 .../GroupCallOverflowArea.stories.tsx         |  1 +
 ts/components/GroupCallOverflowArea.tsx       |  3 ++
 .../GroupCallRemoteParticipant.stories.tsx    | 42 ++++++++++++-------
 ts/components/GroupCallRemoteParticipant.tsx  |  5 +++
 ts/components/GroupCallRemoteParticipants.tsx |  2 +
 6 files changed, 40 insertions(+), 14 deletions(-)

diff --git a/ts/components/CallingPipRemoteVideo.tsx b/ts/components/CallingPipRemoteVideo.tsx
index 44c5a5564..72e05add3 100644
--- a/ts/components/CallingPipRemoteVideo.tsx
+++ b/ts/components/CallingPipRemoteVideo.tsx
@@ -171,6 +171,7 @@ export function CallingPipRemoteVideo({
             i18n={i18n}
             isInPip
             remoteParticipant={activeGroupCallSpeaker}
+            remoteParticipantsCount={activeCall.remoteParticipants.length}
           />
         </div>
       );
diff --git a/ts/components/GroupCallOverflowArea.stories.tsx b/ts/components/GroupCallOverflowArea.stories.tsx
index 2e32834ef..2640282eb 100644
--- a/ts/components/GroupCallOverflowArea.stories.tsx
+++ b/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.
diff --git a/ts/components/GroupCallOverflowArea.tsx b/ts/components/GroupCallOverflowArea.tsx
index 85d61fffb..df352baa1 100644
--- a/ts/components/GroupCallOverflowArea.tsx
+++ b/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>
diff --git a/ts/components/GroupCallRemoteParticipant.stories.tsx b/ts/components/GroupCallRemoteParticipant.stories.tsx
index f118076b8..aa0f9b8e8 100644
--- a/ts/components/GroupCallRemoteParticipant.stories.tsx
+++ b/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 {
+  function createSpeakingProps(
+    index: number,
+    remoteParticipantsCount: number,
+    presenting: boolean
+  ) {
+    return createProps(
+      {
+        isInPip: false,
+        height: 120,
+        left: (120 + 10) * index,
+        top: 0,
+        width: 120,
+        audioLevel: select('audioLevel', [0, 0.5, 1], 0.5),
+        remoteParticipantsCount,
+      },
+      { hasRemoteAudio: true, presenting }
+    );
+  }
   return (
-    <GroupCallRemoteParticipant
-      {...createProps(
-        {
-          isInPip: false,
-          height: 120,
-          left: 0,
-          top: 0,
-          width: 120,
-          audioLevel: select('audioLevel', [0, 0.5, 1], 0.5),
-        },
-        { hasRemoteAudio: true }
-      )}
-    />
+    <>
+      <GroupCallRemoteParticipant {...createSpeakingProps(0, 1, false)} />
+      <GroupCallRemoteParticipant {...createSpeakingProps(1, 2, false)} />
+      <GroupCallRemoteParticipant {...createSpeakingProps(2, 2, true)} />
+    </>
   );
 }
 
diff --git a/ts/components/GroupCallRemoteParticipant.tsx b/ts/components/GroupCallRemoteParticipant.tsx
index b20cef6b2..cd9622c7e 100644
--- a/ts/components/GroupCallRemoteParticipant.tsx
+++ b/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}
diff --git a/ts/components/GroupCallRemoteParticipants.tsx b/ts/components/GroupCallRemoteParticipants.tsx
index 49344603f..54e7c11ae 100644
--- a/ts/components/GroupCallRemoteParticipants.tsx
+++ b/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>
       )}