feat: allow disabling presenter's video in the dominant speaker layout

Author: oliverlaz

sample-apps/react/egress-composite/src/ConfigurationContext.tsx

@@ -119,11 +119,14 @@ export type ConfigurationValue = {
     // grid-specific
     'layout.grid.gap'?: string | number; // ❌
     'layout.grid.page_size'?: number; // ✅
+
     // dominant_speaker-specific (single-participant)
     'layout.single-participant.mode'?: 'shuffle' | 'default'; // ✅
     'layout.single-participant.shuffle_delay'?: number; // ✅
     'layout.single-participant.padding_inline'?: string; // ✅
     'layout.single-participant.padding_block'?: string | number; // ✅
+    'layout.single-participant.presenter_visible'?: boolean; // ✅
+
     // spotlight-specific
     'layout.spotlight.participants_bar_position'?: Exclude<
       VerticalPosition | HorizontalPosition,

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

@@ -8,6 +8,7 @@ import {
 } from '@stream-io/video-react-sdk';
 
 import { useEgressReadyWhenAnyParticipantMounts } from '../egressReady';
+import { useConfigurationContext } from '../../../ConfigurationContext';
 
 import './DominantSpeakerScreenShare.scss';
 
@@ -23,6 +24,12 @@ export const DominantSpeakerScreenShare = () => {
       SfuModels.TrackType.SCREEN_SHARE,
     );
 
+  const {
+    options: {
+      'layout.single-participant.presenter_visible': presenterVisible = true,
+    },
+  } = useConfigurationContext();
+
   return (
     <div
       className="eca__dominant-speaker-screen-share__container"
@@ -36,18 +43,20 @@ export const DominantSpeakerScreenShare = () => {
         muteAudio // audio is handled by <ParticipantsAudio />
         ParticipantViewUI={null}
       />
-      <div className="eca__dominant-speaker-screen-share__current-speaker">
-        <ParticipantView
-          participant={screensharingParticipant}
-          muteAudio // audio is handled by <ParticipantsAudio />
-          ParticipantViewUI={
-            <DefaultParticipantViewUI
-              indicatorsVisible={false}
-              showMenuButton={false}
-            />
-          }
-        />
-      </div>
+      {presenterVisible && (
+        <div className="eca__dominant-speaker-screen-share__current-speaker">
+          <ParticipantView
+            participant={screensharingParticipant}
+            muteAudio // audio is handled by <ParticipantsAudio />
+            ParticipantViewUI={
+              <DefaultParticipantViewUI
+                indicatorsVisible={false}
+                showMenuButton={false}
+              />
+            }
+          />
+        </div>
+      )}
     </div>
   );
 };