fix(recording): more reliable detection of the dominant speaker (#1972)

Extends the egress-composite app with additional tracing logs for
dominant speaker changes.
Also, fixes a "participant sorting" bug that, in some circumstances,
caused an incorrect participant to be flagged as the dominant one.
Ref: https://getstream.slack.com/archives/C05KL0HEWLA/p1761659680348299

Ticket:
https://linear.app/stream/issue/REACT-630/recording-unexpected-participant-is-flagged-as-dominant-one

Author: oliverlaz

sample-apps/react/egress-composite/src/components/layouts/DominantSpeaker/DominantSpeaker.tsx

@@ -1,8 +1,20 @@
+import { useEffect, useRef } from 'react';
 import {
+  CallTypes,
+  combineComparators,
   DefaultParticipantViewUI,
+  defaultSortPreset,
+  dominantSpeaker,
   ParticipantsAudio,
   ParticipantView,
+  pinned,
+  publishingAudio,
+  publishingVideo,
+  reactionType,
+  screenSharing,
   SfuModels,
+  speaking,
+  StreamVideoParticipant,
   useCall,
   useCallStateHooks,
 } from '@stream-io/video-react-sdk';
@@ -13,8 +25,9 @@ import { useEgressReadyWhenAnyParticipantMounts } from '../egressReady';
 import './DominantSpeaker.scss';
 
 export const DominantSpeaker = () => {
-  const activeCall = useCall();
+  const call = useCall();
   const speakerInSpotlight = useSpotlightParticipant();
+  const lastSpeakerInSpotlight = useRef<StreamVideoParticipant | null>(null);
   const { useRemoteParticipants } = useCallStateHooks();
   const remoteParticipants = useRemoteParticipants();
   const { setVideoElement, setVideoPlaceholderElement } =
@@ -23,7 +36,39 @@ export const DominantSpeaker = () => {
       SfuModels.TrackType.VIDEO,
     );
 
-  if (!activeCall) return <h2>No active call</h2>;
+  useEffect(() => {
+    if (!call) return;
+    const comparator = combineComparators(
+      screenSharing,
+      pinned,
+      dominantSpeaker,
+      speaking,
+      reactionType('raised-hand'),
+      publishingVideo,
+      publishingAudio,
+    );
+    call.setSortParticipantsBy(comparator);
+    return () => {
+      // reset the sorting to the default for the call type
+      const callConfig = CallTypes.get(call.type);
+      const preset = callConfig.options.sortParticipantsBy || defaultSortPreset;
+      call.setSortParticipantsBy(preset);
+    };
+  }, [call]);
+
+  useEffect(() => {
+    if (!call || !speakerInSpotlight) return;
+
+    const sessionId = lastSpeakerInSpotlight.current?.sessionId;
+    if (speakerInSpotlight.sessionId === sessionId) return;
+
+    const tag = 'recorder.dominant_speaker_layout.spotlight_speaker_changed';
+    call.tracer.trace(tag, speakerInSpotlight);
+
+    lastSpeakerInSpotlight.current = speakerInSpotlight;
+  }, [call, speakerInSpotlight]);
+
+  if (!call) return <h2>No active call</h2>;
   return (
     <div
       className="eca__dominant-speaker__container"

sample-apps/react/egress-composite/src/components/layouts/DominantSpeaker/useSpotlightParticipant.ts

@@ -5,7 +5,9 @@ import {
 } from '@stream-io/video-react-sdk';
 import { useConfigurationContext } from '../../../ConfigurationContext';
 
-export const useSpotlightParticipant = () => {
+export const useSpotlightParticipant = ():
+  | StreamVideoParticipant
+  | undefined => {
   const [speakerInSpotlight, setSpeakerInSpotlight] =
     useState<StreamVideoParticipant>();