Merge pull request #1122 from robintown/speaking-fixes

Fix speaking indicators showing up when they shouldn't

src/room/InCallView.tsx

@@ -289,6 +289,7 @@ export function InCallView({
           targetWidth={bounds.width}
           key={maximisedParticipant.id}
           data={maximisedParticipant.data}
+          showSpeakingIndicator={false}
         />
       );
     }
@@ -300,7 +301,11 @@ export function InCallView({
         disableAnimations={prefersReducedMotion || isSafari}
       >
         {(props) => (
-          <VideoTile {...props} ref={props.ref as Ref<HTMLDivElement>} />
+          <VideoTile
+            showSpeakingIndicator={items.length > 2}
+            {...props}
+            ref={props.ref as Ref<HTMLDivElement>}
+          />
         )}
       </Grid>
     );

src/video-grid/VideoTile.tsx

@@ -53,10 +53,21 @@ interface Props {
   targetHeight: number;
   className?: string;
   style?: React.ComponentProps<typeof animated.div>["style"];
+  showSpeakingIndicator: boolean;
 }
 
 export const VideoTile = React.forwardRef<HTMLDivElement, Props>(
-  ({ data, className, style, targetWidth, targetHeight }, tileRef) => {
+  (
+    {
+      data,
+      className,
+      style,
+      targetWidth,
+      targetHeight,
+      showSpeakingIndicator,
+    },
+    tileRef
+  ) => {
     const { t } = useTranslation();
 
     const { content, sfuParticipant, member } = data;
@@ -96,7 +107,10 @@ export const VideoTile = React.forwardRef<HTMLDivElement, Props>(
       <animated.div
         className={classNames(styles.videoTile, className, {
           [styles.isLocal]: sfuParticipant.isLocal,
-          [styles.speaking]: sfuParticipant.isSpeaking,
+          [styles.speaking]:
+            sfuParticipant.isSpeaking &&
+            content === TileContent.UserMedia &&
+            showSpeakingIndicator,
           [styles.muted]: microphoneMuted,
           [styles.screenshare]: content === TileContent.ScreenShare,
         })}