fix(egress-composite): rename "single_participant" to "single-partici…

…pant" (#1100) Rename `single_participant` to `single-participant` layout type to match specs.
GetStream · Sep 22, 2023 · adda17e · adda17e
1 parent bcdcbec
commit adda17e
Show file tree

Hide file tree

Showing 6 changed files with 15 additions and 14 deletions.
diff --git a/sample-apps/react/egress-composite/src/ConfigurationContext.tsx b/sample-apps/react/egress-composite/src/ConfigurationContext.tsx
@@ -1,6 +1,7 @@
 import { createContext, useContext } from 'react';
 import { decode } from 'js-base64';
 import { StreamVideoParticipant } from '@stream-io/video-react-sdk';
+import { Layout, ScreenshareLayout } from './components/layouts';
 
 const DEFAULT_USER_ID = 'egress';
 const DEFAULT_CALL_TYPE = 'default';
@@ -16,8 +17,8 @@ export type ConfigurationValue = {
 
   ext_css?: string;
 
-  layout?: 'grid' | 'single_participant' | 'spotlight' | 'mobile';
-  screenshare_layout?: 'single_participant' | 'spotlight';
+  layout?: Layout;
+  screenshare_layout?: ScreenshareLayout;
 
   test_environment?: {
     participants?: Partial<StreamVideoParticipant>[];
@@ -54,8 +55,8 @@ export type ConfigurationValue = {
     'layout.grid.gap'?: string;
     '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.mode'?: 'shuffle' | 'default';
+    'layout.single-participant.shuffle_delay'?: number;
     // spotlight-specific
     'layout.spotlight.bar_position'?: 'top' | 'right' | 'bottom' | 'left';
     'layout.spotlight.bar_limit'?: number;

diff --git a/sample-apps/react/egress-composite/src/components/UIDispatcher.tsx b/sample-apps/react/egress-composite/src/components/UIDispatcher.tsx
@@ -1,11 +1,11 @@
 import { useCallStateHooks } from '@stream-io/video-react-sdk';
 
 import { useConfigurationContext } from '../ConfigurationContext';
-import { LayoutType, layoutMap } from './layouts';
+import { Layout, ScreenshareLayout, layoutMap } from './layouts';
 import { Spotlight } from './layouts/Spotlight';
 
-const DEFAULT_LAYOUT: LayoutType = 'spotlight';
-const DEFAULT_SCREENSHARE_LAYOUT: LayoutType = 'spotlight';
+const DEFAULT_LAYOUT: Layout = 'spotlight';
+const DEFAULT_SCREENSHARE_LAYOUT: ScreenshareLayout = 'spotlight';
 
 export const UIDispatcher = () => {
   const {

diff --git a/...le-apps/react/egress-composite/src/components/layouts/DominantSpeaker/DominantSpeaker.tsx b/...le-apps/react/egress-composite/src/components/layouts/DominantSpeaker/DominantSpeaker.tsx
@@ -27,7 +27,7 @@ export const DominantSpeaker = () => {
     <>
       <div
         className="dominant-speaker__container"
-        data-testid="single_participant"
+        data-testid="single-participant"
       >
         {speakerInSpotlight && (
           <ParticipantView

diff --git a/.../react/egress-composite/src/components/layouts/DominantSpeaker/useSpotlightParticipant.ts b/.../react/egress-composite/src/components/layouts/DominantSpeaker/useSpotlightParticipant.ts
@@ -12,7 +12,7 @@ export const useSpotlightParticipant = () => {
 
   const { useDominantSpeaker, useRemoteParticipants } = useCallStateHooks();
   const {
-    options: { 'layout.single_participant.mode': mode },
+    options: { 'layout.single-participant.mode': mode },
   } = useConfigurationContext();
   const dominantSpeaker = useDominantSpeaker();
   const allParticipants = useRemoteParticipants();

diff --git a/sample-apps/react/egress-composite/src/components/layouts/index.ts b/sample-apps/react/egress-composite/src/components/layouts/index.ts
@@ -1,18 +1,18 @@
 import { ComponentType } from 'react';
 
-import { ConfigurationValue } from '../../ConfigurationContext';
 import { DominantSpeaker, DominantSpeakerScreenShare } from './DominantSpeaker';
 import { PaginatedGrid } from './PaginatedGrid';
 import { Spotlight } from './Spotlight';
 
-export type LayoutType = Exclude<ConfigurationValue['layout'], undefined>;
+export type Layout = 'grid' | 'single-participant' | 'spotlight' | 'mobile';
+export type ScreenshareLayout = 'single-participant' | 'spotlight';
 
 export const layoutMap: Record<
-  LayoutType,
+  Layout,
   // normal & screen share view
   [ComponentType, ComponentType] | [ComponentType]
 > = {
-  single_participant: [DominantSpeaker, DominantSpeakerScreenShare],
+  'single-participant': [DominantSpeaker, DominantSpeakerScreenShare],
   grid: [PaginatedGrid],
   spotlight: [Spotlight, Spotlight],
   mobile: [() => null],

diff --git a/sample-apps/react/egress-composite/tests/layouts.spec.ts b/sample-apps/react/egress-composite/tests/layouts.spec.ts
@@ -14,7 +14,7 @@ test.describe('Layouts', () => {
     [
       { name: undefined, participantCountPerWindow: 5 }, // default
       { name: 'grid', participantCountPerWindow: 5 },
-      { name: 'single_participant', participantCountPerWindow: 1 },
+      { name: 'single-participant', participantCountPerWindow: 1 },
       { name: 'spotlight', participantCountPerWindow: 5 },
     ] as const
   ).forEach((layout) => {