From 7f41c71b350cfec6bea2b0f6dbf64c755eace356 Mon Sep 17 00:00:00 2001
From: Anton Arnautov <43254280+arnautov-anton@users.noreply.github.com>
Date: Thu, 24 Aug 2023 13:54:15 +0200
Subject: [PATCH] feat(egress-composite): new configuration system (#689)

Adds `ConfigurationContext` for configuration data provisioning across
the whole application.

To load the application append this script to the page `head`:
```html
<script type="application/javascript">
	window.StreamCompositeApp.configureAndRender({
                // required
		call_id: "<your-call-id>",
                // optional
		options: {
			layout: {
				main: "grid",
				screenshare: "dominant_speaker",
			},
		},
	});
</script>
```
Accepted configuration values (subject to change):
https://github.com/GetStream/stream-video-js/blob/7d5d435634a0a4e601cf6b35f289a709f09a2bdb/sample-apps/react/egress-composite/src/ConfigurationContext.tsx#L4-L56

---------

Co-authored-by: Oliver Lazoroski <oliver.lazoroski@gmail.com>
Co-authored-by: Tommaso Barbugli <tbarbugli@gmail.com>
---
 .../workflows/deploy-react-sample-apps.yml    |  2 +-
 .../react/egress-composite/.env-example       |  2 +-
 .../react/egress-composite/package.json       |  1 +
 .../egress-composite/src/CompositeApp.scss    |  2 +-
 .../egress-composite/src/CompositeApp.tsx     | 57 +++++++-------
 .../src/ConfigurationContext.tsx              | 74 +++++++++++++++++++
 .../src/components/LogoAndTitleOverlay.tsx    | 36 +++++++++
 .../src/components/UIDispatcher.tsx           | 23 ++++++
 .../egress-composite/src/components/index.ts  |  2 +
 .../layouts/DominantSpeaker}/AudioTracks.tsx  |  2 +-
 .../DominantSpeaker/DominantSpeaker.scss}     |  2 +-
 .../DominantSpeaker}/DominantSpeaker.tsx      |  4 +-
 .../DominantSpeakerScreenShare.scss}          |  6 +-
 .../DominantSpeakerScreenShare.tsx            |  8 +-
 .../layouts/DominantSpeaker/index.ts          |  2 +
 .../useSpotlightParticipant.ts                | 10 ++-
 .../layouts/PaginatedGrid/PaginatedGrid.scss} |  2 +-
 .../layouts/PaginatedGrid/PaginatedGrid.tsx   | 29 ++++++++
 .../components/layouts/PaginatedGrid/index.ts |  1 +
 .../layouts/Spotlight/Spotlight.scss          | 12 +++
 .../layouts/Spotlight/Spotlight.tsx           | 33 +++++++++
 .../src/components/layouts/Spotlight/index.ts |  1 +
 .../{ => components}/layouts/egressReady.ts   |  2 +-
 .../src/components/layouts/index.ts           | 19 +++++
 .../src/hooks/useAppConfig.ts                 | 42 -----------
 .../src/layouts/dominant-speaker/index.ts     | 10 ---
 .../src/layouts/grid/GridView.tsx             | 25 -------
 .../src/layouts/grid/index.ts                 | 11 ---
 .../egress-composite/src/layouts/index.ts     | 20 -----
 .../react/egress-composite/src/main.tsx       | 55 +++++++++++++-
 30 files changed, 337 insertions(+), 158 deletions(-)
 create mode 100644 sample-apps/react/egress-composite/src/ConfigurationContext.tsx
 create mode 100644 sample-apps/react/egress-composite/src/components/LogoAndTitleOverlay.tsx
 create mode 100644 sample-apps/react/egress-composite/src/components/UIDispatcher.tsx
 create mode 100644 sample-apps/react/egress-composite/src/components/index.ts
 rename sample-apps/react/egress-composite/src/{layouts/dominant-speaker => components/layouts/DominantSpeaker}/AudioTracks.tsx (92%)
 rename sample-apps/react/egress-composite/src/{layouts/dominant-speaker/Spotlight.scss => components/layouts/DominantSpeaker/DominantSpeaker.scss} (85%)
 rename sample-apps/react/egress-composite/src/{layouts/dominant-speaker => components/layouts/DominantSpeaker}/DominantSpeaker.tsx (93%)
 rename sample-apps/react/egress-composite/src/{layouts/dominant-speaker/ScreenShare.scss => components/layouts/DominantSpeaker/DominantSpeakerScreenShare.scss} (54%)
 rename sample-apps/react/egress-composite/src/{layouts/dominant-speaker => components/layouts/DominantSpeaker}/DominantSpeakerScreenShare.tsx (86%)
 create mode 100644 sample-apps/react/egress-composite/src/components/layouts/DominantSpeaker/index.ts
 rename sample-apps/react/egress-composite/src/{layouts/dominant-speaker => components/layouts/DominantSpeaker}/useSpotlightParticipant.ts (81%)
 rename sample-apps/react/egress-composite/src/{layouts/grid/GridView.scss => components/layouts/PaginatedGrid/PaginatedGrid.scss} (93%)
 create mode 100644 sample-apps/react/egress-composite/src/components/layouts/PaginatedGrid/PaginatedGrid.tsx
 create mode 100644 sample-apps/react/egress-composite/src/components/layouts/PaginatedGrid/index.ts
 create mode 100644 sample-apps/react/egress-composite/src/components/layouts/Spotlight/Spotlight.scss
 create mode 100644 sample-apps/react/egress-composite/src/components/layouts/Spotlight/Spotlight.tsx
 create mode 100644 sample-apps/react/egress-composite/src/components/layouts/Spotlight/index.ts
 rename sample-apps/react/egress-composite/src/{ => components}/layouts/egressReady.ts (95%)
 create mode 100644 sample-apps/react/egress-composite/src/components/layouts/index.ts
 delete mode 100644 sample-apps/react/egress-composite/src/hooks/useAppConfig.ts
 delete mode 100644 sample-apps/react/egress-composite/src/layouts/dominant-speaker/index.ts
 delete mode 100644 sample-apps/react/egress-composite/src/layouts/grid/GridView.tsx
 delete mode 100644 sample-apps/react/egress-composite/src/layouts/grid/index.ts
 delete mode 100644 sample-apps/react/egress-composite/src/layouts/index.ts

diff --git a/.github/workflows/deploy-react-sample-apps.yml b/.github/workflows/deploy-react-sample-apps.yml
index 3d77d186c5..bd83b08348 100644
--- a/.github/workflows/deploy-react-sample-apps.yml
+++ b/.github/workflows/deploy-react-sample-apps.yml
@@ -48,7 +48,7 @@ jobs:
       VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
       VERCEL_PROJECT_ID: ${{ matrix.application.project-id }}
       VITE_STREAM_API_KEY: ${{ vars.EGRESS_STREAM_API_KEY }}
-      VITE_STREAM_TOKEN: ${{ secrets.EGRESS_USER_TOKEN }}
+      VITE_STREAM_USER_TOKEN: ${{ secrets.EGRESS_USER_TOKEN }}
       VITE_STREAM_KEY: ${{ vars.STREAM_API_KEY_SAMPLE_APPS }}
       VITE_STREAM_SECRET: ${{ secrets.STREAM_SECRET_SAMPLE_APPS }}
       VITE_VIDEO_DEMO_SENTRY_DNS: ${{secrets.VIDEO_DEMO_SENTRY_DNS}}
diff --git a/sample-apps/react/egress-composite/.env-example b/sample-apps/react/egress-composite/.env-example
index 69eb913b7c..02ce8040e0 100644
--- a/sample-apps/react/egress-composite/.env-example
+++ b/sample-apps/react/egress-composite/.env-example
@@ -1,2 +1,2 @@
 VITE_STREAM_API_KEY="<your API key>"
-VITE_STREAM_TOKEN="<user token>"
+VITE_STREAM_USER_TOKEN="<user token>"
diff --git a/sample-apps/react/egress-composite/package.json b/sample-apps/react/egress-composite/package.json
index a3e808efa4..de86946e0a 100644
--- a/sample-apps/react/egress-composite/package.json
+++ b/sample-apps/react/egress-composite/package.json
@@ -5,6 +5,7 @@
   "type": "module",
   "scripts": {
     "start": "vite",
+    "dev": "vite",
     "build": "tsc && vite build",
     "preview": "vite preview"
   },
diff --git a/sample-apps/react/egress-composite/src/CompositeApp.scss b/sample-apps/react/egress-composite/src/CompositeApp.scss
index b7d394107b..8922fbdd31 100644
--- a/sample-apps/react/egress-composite/src/CompositeApp.scss
+++ b/sample-apps/react/egress-composite/src/CompositeApp.scss
@@ -13,6 +13,7 @@
 
 .str-video {
   color: var(--str-video__text-color1);
+  position: relative;
 }
 
 body {
@@ -24,7 +25,6 @@ body {
 }
 
 #root {
-  max-width: 1920px;
   margin: 0 auto;
   text-align: center;
 }
diff --git a/sample-apps/react/egress-composite/src/CompositeApp.tsx b/sample-apps/react/egress-composite/src/CompositeApp.tsx
index 5448568124..62f628d8d4 100644
--- a/sample-apps/react/egress-composite/src/CompositeApp.tsx
+++ b/sample-apps/react/egress-composite/src/CompositeApp.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { PropsWithChildren, useEffect, useState } from 'react';
 import {
   Call,
   CallingState,
@@ -7,41 +7,50 @@ import {
   StreamTheme,
   StreamVideo,
   StreamVideoClient,
-  useCallStateHooks,
 } from '@stream-io/video-react-sdk';
-import Layouts, { DEFAULT_LAYOUT_ID, LayoutId } from './layouts';
-import { useAppConfig } from './hooks/useAppConfig';
+
+import { useConfigurationContext } from './ConfigurationContext';
 import { EgressReadyNotificationProvider } from './hooks/useNotifyEgress';
+
 import './CompositeApp.scss';
+import { UIDispatcher, LogoAndTitleOverlay } from './components';
 
 export const CompositeApp = () => {
-  const config = useAppConfig();
+  const {
+    base_url: baseURL,
+    api_key: apiKey,
+    user_id: userId,
+    call_type: callType,
+    call_id: callId,
+    token,
+  } = useConfigurationContext();
+
   const options: StreamClientOptions = {};
-  if (config.baseURL) {
-    options.baseURL = config.baseURL;
+  if (baseURL) {
+    options.baseURL = baseURL;
   }
   const [client] = useState<StreamVideoClient>(
-    () => new StreamVideoClient(config.apiKey, options),
+    () => new StreamVideoClient(apiKey, options),
   );
 
   useEffect(() => {
     client.connectUser(
       {
-        id: config.userId,
+        id: userId,
       },
-      config.token,
+      token,
     );
 
     return () => {
       client.disconnectUser();
     };
-  }, [client, config.userId, config.token]);
+  }, [client, token, userId]);
 
   const [activeCall, setActiveCall] = useState<Call>();
   useEffect(() => {
     if (!client) return;
     let joinInterrupted = false;
-    const call = client.call(config.callType, config.callId);
+    const call = client.call(callType, callId);
     const currentCall = call.join().then(() => {
       if (!joinInterrupted) {
         setActiveCall(call);
@@ -57,7 +66,7 @@ export const CompositeApp = () => {
         setActiveCall(undefined);
       });
     };
-  }, [client, config.callId, config.callType]);
+  }, [client, callType, callId]);
 
   if (!client) {
     return <h2>Connecting...</h2>;
@@ -65,29 +74,23 @@ export const CompositeApp = () => {
 
   return (
     <StreamVideo client={client}>
-      <StreamTheme>
+      <StreamThemeWrapper>
         <EgressReadyNotificationProvider>
           {activeCall && (
             <StreamCallProvider call={activeCall}>
-              <UiDispatcher layout={config.layout} />
+              <UIDispatcher />
+              <LogoAndTitleOverlay />
             </StreamCallProvider>
           )}
         </EgressReadyNotificationProvider>
-      </StreamTheme>
+        {/* <StyleComponent /> */}
+      </StreamThemeWrapper>
     </StreamVideo>
   );
 };
 
-const UiDispatcher = (props: { layout: LayoutId }) => {
-  const { layout } = props;
-  const { ParticipantsView, ScreenShareView } =
-    Layouts[layout || DEFAULT_LAYOUT_ID];
-
-  const { useHasOngoingScreenShare } = useCallStateHooks();
-  const hasScreenShare = useHasOngoingScreenShare();
-  if (hasScreenShare) {
-    return <ScreenShareView />;
-  }
+const StreamThemeWrapper = ({ children }: PropsWithChildren) => {
+  // TODO: background style
 
-  return <ParticipantsView />;
+  return <StreamTheme>{children}</StreamTheme>;
 };
diff --git a/sample-apps/react/egress-composite/src/ConfigurationContext.tsx b/sample-apps/react/egress-composite/src/ConfigurationContext.tsx
new file mode 100644
index 0000000000..5a5c811db4
--- /dev/null
+++ b/sample-apps/react/egress-composite/src/ConfigurationContext.tsx
@@ -0,0 +1,74 @@
+import { createContext, useContext } from 'react';
+import { decode } from 'js-base64';
+
+export type ConfigurationValue = {
+  base_url?: string;
+
+  api_key: string;
+  call_type: string;
+  call_id: string;
+  token: string;
+  user_id: string; // pulled from the token payload
+
+  ext_css?: string;
+
+  layout?: 'grid' | 'single_participant' | 'spotlight' | 'mobile';
+  screenshare_layout?: 'single_participant' | 'spotlight';
+
+  options: {
+    'video.background_color'?: string;
+    'video.scale_mode'?: 'fill' | 'fit';
+    'video.screenshare_scale_mode'?: 'fill' | 'fit';
+
+    'logo.image_url'?: string;
+    'logo.horizontal_position'?: 'center' | 'left' | 'right';
+    'logo.vertical_position'?: 'center' | 'left' | 'right';
+
+    'participant.label_display'?: boolean;
+    'participant.label_text_color'?: string;
+    'participant.label_background_color'?: string;
+    'participant.label_display_border'?: boolean;
+    'participant.label_border_radius'?: string;
+    'participant.label_border_color'?: string;
+    'participant.label_horizontal_position'?: 'center' | 'left' | 'right';
+    'participant.label_vertical_position'?: 'center' | 'left' | 'right';
+
+    // participant_border_color: string;
+    // participant_border_radius: string;
+    // participant_border_width: string;
+    'participant.participant_highlight_border_color'?: string; // talking
+    'participant.placeholder_background_color'?: string;
+
+    // used with any layout
+    'layout.size_percentage'?: number;
+
+    // grid-specific
+    '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;
+    // spotlight-specific
+    'layout.spotlight.bar_position'?: 'top' | 'right' | 'bottom' | 'left';
+    'layout.spotlight.bar_limit'?: number;
+  };
+};
+
+export const ConfigurationContext = createContext<ConfigurationValue>(
+  {} as ConfigurationValue,
+);
+
+export const extractPayloadFromToken = (token: string) => {
+  const [, payload] = token.split('.');
+
+  if (!payload) throw new Error('Malformed token, missing payload');
+
+  try {
+    return (JSON.parse(decode(payload)) ?? {}) as Record<string, unknown>;
+  } catch (e) {
+    console.log('Error parsing token payload', e);
+    return {};
+  }
+};
+
+export const useConfigurationContext = () => useContext(ConfigurationContext);
diff --git a/sample-apps/react/egress-composite/src/components/LogoAndTitleOverlay.tsx b/sample-apps/react/egress-composite/src/components/LogoAndTitleOverlay.tsx
new file mode 100644
index 0000000000..378763fc7f
--- /dev/null
+++ b/sample-apps/react/egress-composite/src/components/LogoAndTitleOverlay.tsx
@@ -0,0 +1,36 @@
+import { useConfigurationContext } from '../ConfigurationContext';
+
+export const LogoAndTitleOverlay = () => {
+  const { options } = useConfigurationContext();
+
+  const image_url = options['logo.image_url'];
+
+  return (
+    <div
+      style={{
+        top: 0,
+        left: 0,
+        position: 'absolute',
+        width: '100%',
+        height: '100%',
+      }}
+    >
+      {/* {text?.length && (
+          <div
+            data-test-id="title"
+            style={{ ...DEFAULT_TITLE_STYLE, ...titleStyle }}
+          >
+            {text}
+          </div>
+        )} */}
+      {image_url && (
+        <img
+          data-test-id="logo"
+          src={image_url}
+          // style={{ ...DEFAULT_LOGO_STYLE, ...logoStyle }}
+          alt="logo"
+        />
+      )}
+    </div>
+  );
+};
diff --git a/sample-apps/react/egress-composite/src/components/UIDispatcher.tsx b/sample-apps/react/egress-composite/src/components/UIDispatcher.tsx
new file mode 100644
index 0000000000..34677500c5
--- /dev/null
+++ b/sample-apps/react/egress-composite/src/components/UIDispatcher.tsx
@@ -0,0 +1,23 @@
+import { useCallStateHooks } from '@stream-io/video-react-sdk';
+
+import { useConfigurationContext } from '../ConfigurationContext';
+import { LayoutType, layoutMap } from './layouts';
+import { Spotlight } from './layouts/Spotlight';
+
+const DEFAULT_LAYOUT: LayoutType = 'spotlight';
+const DEFAULT_SCREENSHARE_LAYOUT: LayoutType = 'spotlight';
+
+export const UIDispatcher = () => {
+  const {
+    layout = DEFAULT_LAYOUT,
+    screenshare_layout = DEFAULT_SCREENSHARE_LAYOUT,
+  } = useConfigurationContext();
+  const { useHasOngoingScreenShare } = useCallStateHooks();
+  const hasScreenShare = useHasOngoingScreenShare();
+
+  const DefaultView = layoutMap[layout]?.[0] ?? Spotlight;
+
+  const ScreenShareView = layoutMap[screenshare_layout]?.[1] ?? Spotlight;
+
+  return hasScreenShare ? <ScreenShareView /> : <DefaultView />;
+};
diff --git a/sample-apps/react/egress-composite/src/components/index.ts b/sample-apps/react/egress-composite/src/components/index.ts
new file mode 100644
index 0000000000..1b7f446e53
--- /dev/null
+++ b/sample-apps/react/egress-composite/src/components/index.ts
@@ -0,0 +1,2 @@
+export * from './LogoAndTitleOverlay';
+export * from './UIDispatcher';
diff --git a/sample-apps/react/egress-composite/src/layouts/dominant-speaker/AudioTracks.tsx b/sample-apps/react/egress-composite/src/components/layouts/DominantSpeaker/AudioTracks.tsx
similarity index 92%
rename from sample-apps/react/egress-composite/src/layouts/dominant-speaker/AudioTracks.tsx
rename to sample-apps/react/egress-composite/src/components/layouts/DominantSpeaker/AudioTracks.tsx
index 24bb9a9bc3..cd3a671770 100644
--- a/sample-apps/react/egress-composite/src/layouts/dominant-speaker/AudioTracks.tsx
+++ b/sample-apps/react/egress-composite/src/components/layouts/DominantSpeaker/AudioTracks.tsx
@@ -12,7 +12,7 @@ export const AudioTracks = (props: {
           key={participant.sessionId}
           audioStream={participant.audioStream}
           muted={participant.sessionId === dominantSpeaker?.sessionId}
-          data-userId={participant.userId}
+          data-user-id={participant.userId}
         />
       ))}
     </div>
diff --git a/sample-apps/react/egress-composite/src/layouts/dominant-speaker/Spotlight.scss b/sample-apps/react/egress-composite/src/components/layouts/DominantSpeaker/DominantSpeaker.scss
similarity index 85%
rename from sample-apps/react/egress-composite/src/layouts/dominant-speaker/Spotlight.scss
rename to sample-apps/react/egress-composite/src/components/layouts/DominantSpeaker/DominantSpeaker.scss
index d619ccb290..97ed594294 100644
--- a/sample-apps/react/egress-composite/src/layouts/dominant-speaker/Spotlight.scss
+++ b/sample-apps/react/egress-composite/src/components/layouts/DominantSpeaker/DominantSpeaker.scss
@@ -1,4 +1,4 @@
-.spotlight-container {
+.dominant-speaker__container {
   height: 100vh;
 
   .str-video__participant-view {
diff --git a/sample-apps/react/egress-composite/src/layouts/dominant-speaker/DominantSpeaker.tsx b/sample-apps/react/egress-composite/src/components/layouts/DominantSpeaker/DominantSpeaker.tsx
similarity index 93%
rename from sample-apps/react/egress-composite/src/layouts/dominant-speaker/DominantSpeaker.tsx
rename to sample-apps/react/egress-composite/src/components/layouts/DominantSpeaker/DominantSpeaker.tsx
index 65d0f94835..e644087cec 100644
--- a/sample-apps/react/egress-composite/src/layouts/dominant-speaker/DominantSpeaker.tsx
+++ b/sample-apps/react/egress-composite/src/components/layouts/DominantSpeaker/DominantSpeaker.tsx
@@ -7,7 +7,7 @@ import {
 } from '@stream-io/video-react-sdk';
 import { useSpotlightParticipant } from './useSpotlightParticipant';
 import { useEgressReadyWhenAnyParticipantMounts } from '../egressReady';
-import './Spotlight.scss';
+import './DominantSpeaker.scss';
 import { AudioTracks } from './AudioTracks';
 
 export const DominantSpeaker = () => {
@@ -24,7 +24,7 @@ export const DominantSpeaker = () => {
   if (!activeCall) return <h2>No active call</h2>;
   return (
     <>
-      <div className="spotlight-container">
+      <div className="dominant-speaker__container">
         {speakerInSpotlight && (
           <ParticipantView
             participant={speakerInSpotlight}
diff --git a/sample-apps/react/egress-composite/src/layouts/dominant-speaker/ScreenShare.scss b/sample-apps/react/egress-composite/src/components/layouts/DominantSpeaker/DominantSpeakerScreenShare.scss
similarity index 54%
rename from sample-apps/react/egress-composite/src/layouts/dominant-speaker/ScreenShare.scss
rename to sample-apps/react/egress-composite/src/components/layouts/DominantSpeaker/DominantSpeakerScreenShare.scss
index e7cda5c91f..a990349533 100644
--- a/sample-apps/react/egress-composite/src/layouts/dominant-speaker/ScreenShare.scss
+++ b/sample-apps/react/egress-composite/src/components/layouts/DominantSpeaker/DominantSpeakerScreenShare.scss
@@ -1,14 +1,14 @@
-.screen-share-container {
+.dominant-speaker-screen-share__container {
   height: 100vh;
   display: flex;
   flex-direction: column;
   align-items: center;
 
-  .screen-share-player {
+  .dominant-speaker-screen-share__player {
     flex: 1;
   }
 
-  .current-speaker {
+  .dominant-speaker-screen-share__current-speaker {
     position: absolute;
     width: 240px;
     right: 10px;
diff --git a/sample-apps/react/egress-composite/src/layouts/dominant-speaker/DominantSpeakerScreenShare.tsx b/sample-apps/react/egress-composite/src/components/layouts/DominantSpeaker/DominantSpeakerScreenShare.tsx
similarity index 86%
rename from sample-apps/react/egress-composite/src/layouts/dominant-speaker/DominantSpeakerScreenShare.tsx
rename to sample-apps/react/egress-composite/src/components/layouts/DominantSpeaker/DominantSpeakerScreenShare.tsx
index b1805ab4c6..102cd7bae4 100644
--- a/sample-apps/react/egress-composite/src/layouts/dominant-speaker/DominantSpeakerScreenShare.tsx
+++ b/sample-apps/react/egress-composite/src/components/layouts/DominantSpeaker/DominantSpeakerScreenShare.tsx
@@ -6,7 +6,7 @@ import {
   Video,
 } from '@stream-io/video-react-sdk';
 import { useEgressReadyWhenAnyParticipantMounts } from '../egressReady';
-import './ScreenShare.scss';
+import './DominantSpeakerScreenShare.scss';
 import { AudioTracks } from './AudioTracks';
 
 export const DominantSpeakerScreenShare = () => {
@@ -26,9 +26,9 @@ export const DominantSpeakerScreenShare = () => {
 
   return (
     <>
-      <div className="screen-share-container">
+      <div className="dominant-speaker-screen-share__container">
         <Video
-          className="screen-share-player"
+          className="dominant-speaker-screen-share__player"
           participant={screenSharingParticipant}
           kind="screen"
           autoPlay
@@ -39,7 +39,7 @@ export const DominantSpeakerScreenShare = () => {
           Presenter:{' '}
           {screenSharingParticipant.name || screenSharingParticipant.userId}
         </span>
-        <div className="current-speaker">
+        <div className="dominant-speaker-screen-share__current-speaker">
           <ParticipantView
             participant={screenSharingParticipant}
             ParticipantViewUI={
diff --git a/sample-apps/react/egress-composite/src/components/layouts/DominantSpeaker/index.ts b/sample-apps/react/egress-composite/src/components/layouts/DominantSpeaker/index.ts
new file mode 100644
index 0000000000..7b7468e838
--- /dev/null
+++ b/sample-apps/react/egress-composite/src/components/layouts/DominantSpeaker/index.ts
@@ -0,0 +1,2 @@
+export { DominantSpeaker } from './DominantSpeaker';
+export { DominantSpeakerScreenShare } from './DominantSpeakerScreenShare';
diff --git a/sample-apps/react/egress-composite/src/layouts/dominant-speaker/useSpotlightParticipant.ts b/sample-apps/react/egress-composite/src/components/layouts/DominantSpeaker/useSpotlightParticipant.ts
similarity index 81%
rename from sample-apps/react/egress-composite/src/layouts/dominant-speaker/useSpotlightParticipant.ts
rename to sample-apps/react/egress-composite/src/components/layouts/DominantSpeaker/useSpotlightParticipant.ts
index 301eef7850..3589a0cd75 100644
--- a/sample-apps/react/egress-composite/src/layouts/dominant-speaker/useSpotlightParticipant.ts
+++ b/sample-apps/react/egress-composite/src/components/layouts/DominantSpeaker/useSpotlightParticipant.ts
@@ -4,19 +4,21 @@ import {
   StreamVideoParticipant,
   useCallStateHooks,
 } from '@stream-io/video-react-sdk';
-import { useAppConfig } from '../../hooks/useAppConfig';
+import { useConfigurationContext } from '../../../ConfigurationContext';
 
 export const useSpotlightParticipant = () => {
   const [speakerInSpotlight, setSpeakerInSpotlight] =
     useState<StreamVideoParticipant>();
 
-  const { spotlightMode } = useAppConfig();
   const { useDominantSpeaker, useRemoteParticipants } = useCallStateHooks();
+  const {
+    options: { 'layout.single_participant.mode': mode },
+  } = useConfigurationContext();
   const dominantSpeaker = useDominantSpeaker();
   const allParticipants = useRemoteParticipants();
   useEffect(() => {
     let shuffleId: NodeJS.Timeout;
-    if (spotlightMode === 'shuffle') {
+    if (mode === 'shuffle') {
       shuffleId = setInterval(() => {
         const randomParticipant =
           allParticipants[Math.floor(Math.random() * allParticipants.length)];
@@ -35,7 +37,7 @@ export const useSpotlightParticipant = () => {
     return () => {
       clearInterval(shuffleId);
     };
-  }, [allParticipants, dominantSpeaker, spotlightMode]);
+  }, [allParticipants, dominantSpeaker, mode]);
 
   return speakerInSpotlight;
 };
diff --git a/sample-apps/react/egress-composite/src/layouts/grid/GridView.scss b/sample-apps/react/egress-composite/src/components/layouts/PaginatedGrid/PaginatedGrid.scss
similarity index 93%
rename from sample-apps/react/egress-composite/src/layouts/grid/GridView.scss
rename to sample-apps/react/egress-composite/src/components/layouts/PaginatedGrid/PaginatedGrid.scss
index 4dda650319..d5a631d385 100644
--- a/sample-apps/react/egress-composite/src/layouts/grid/GridView.scss
+++ b/sample-apps/react/egress-composite/src/components/layouts/PaginatedGrid/PaginatedGrid.scss
@@ -1,4 +1,4 @@
-.grid-view {
+.paginated-grid {
   --gap-size: 10px;
 
   display: flex;
diff --git a/sample-apps/react/egress-composite/src/components/layouts/PaginatedGrid/PaginatedGrid.tsx b/sample-apps/react/egress-composite/src/components/layouts/PaginatedGrid/PaginatedGrid.tsx
new file mode 100644
index 0000000000..577ec4fcfb
--- /dev/null
+++ b/sample-apps/react/egress-composite/src/components/layouts/PaginatedGrid/PaginatedGrid.tsx
@@ -0,0 +1,29 @@
+import {
+  DefaultParticipantViewUI,
+  PaginatedGridLayout,
+} from '@stream-io/video-react-sdk';
+import { useConfigurationContext } from '../../../ConfigurationContext';
+
+import './PaginatedGrid.scss';
+
+export const PaginatedGrid = () => {
+  // const setParticipantVideoRef = useEgressReadyWhenAnyParticipantMounts();
+  const {
+    options: { 'layout.grid.page_size': pageSize = 20 },
+  } = useConfigurationContext();
+
+  return (
+    <div className="paginated-grid">
+      <PaginatedGridLayout
+        ParticipantViewUI={
+          <DefaultParticipantViewUI
+            indicatorsVisible={false}
+            showMenuButton={false}
+          />
+        }
+        excludeLocalParticipant
+        groupSize={pageSize}
+      />
+    </div>
+  );
+};
diff --git a/sample-apps/react/egress-composite/src/components/layouts/PaginatedGrid/index.ts b/sample-apps/react/egress-composite/src/components/layouts/PaginatedGrid/index.ts
new file mode 100644
index 0000000000..f1de0bf932
--- /dev/null
+++ b/sample-apps/react/egress-composite/src/components/layouts/PaginatedGrid/index.ts
@@ -0,0 +1 @@
+export { PaginatedGrid } from './PaginatedGrid';
diff --git a/sample-apps/react/egress-composite/src/components/layouts/Spotlight/Spotlight.scss b/sample-apps/react/egress-composite/src/components/layouts/Spotlight/Spotlight.scss
new file mode 100644
index 0000000000..197cd87ee5
--- /dev/null
+++ b/sample-apps/react/egress-composite/src/components/layouts/Spotlight/Spotlight.scss
@@ -0,0 +1,12 @@
+.spotlight {
+  display: flex;
+  flex-wrap: wrap;
+  height: 100vh;
+  align-items: center;
+  align-content: center;
+  justify-content: center;
+
+  .str-video__participant-view {
+    transition: width 0.2s ease-in-out;
+  }
+}
diff --git a/sample-apps/react/egress-composite/src/components/layouts/Spotlight/Spotlight.tsx b/sample-apps/react/egress-composite/src/components/layouts/Spotlight/Spotlight.tsx
new file mode 100644
index 0000000000..c90f246d61
--- /dev/null
+++ b/sample-apps/react/egress-composite/src/components/layouts/Spotlight/Spotlight.tsx
@@ -0,0 +1,33 @@
+import {
+  DefaultParticipantViewUI,
+  SpeakerLayout,
+} from '@stream-io/video-react-sdk';
+import { useConfigurationContext } from '../../../ConfigurationContext';
+
+import './Spotlight.scss';
+
+export const Spotlight = () => {
+  const {
+    options: { 'layout.spotlight.bar_position': barPosition = 'bottom' },
+  } = useConfigurationContext();
+
+  return (
+    <div className="spotlight">
+      <SpeakerLayout
+        participantsBarPosition={barPosition}
+        ParticipantViewUIBar={
+          <DefaultParticipantViewUI
+            indicatorsVisible={false}
+            showMenuButton={false}
+          />
+        }
+        ParticipantViewUISpotlight={
+          <DefaultParticipantViewUI
+            indicatorsVisible={false}
+            showMenuButton={false}
+          />
+        }
+      />
+    </div>
+  );
+};
diff --git a/sample-apps/react/egress-composite/src/components/layouts/Spotlight/index.ts b/sample-apps/react/egress-composite/src/components/layouts/Spotlight/index.ts
new file mode 100644
index 0000000000..a74d9f105e
--- /dev/null
+++ b/sample-apps/react/egress-composite/src/components/layouts/Spotlight/index.ts
@@ -0,0 +1 @@
+export { Spotlight } from './Spotlight';
diff --git a/sample-apps/react/egress-composite/src/layouts/egressReady.ts b/sample-apps/react/egress-composite/src/components/layouts/egressReady.ts
similarity index 95%
rename from sample-apps/react/egress-composite/src/layouts/egressReady.ts
rename to sample-apps/react/egress-composite/src/components/layouts/egressReady.ts
index e4103c1fc3..f7952f3a8a 100644
--- a/sample-apps/react/egress-composite/src/layouts/egressReady.ts
+++ b/sample-apps/react/egress-composite/src/components/layouts/egressReady.ts
@@ -1,4 +1,4 @@
-import { useNotifyEgressReady } from '../hooks/useNotifyEgress';
+import { useNotifyEgressReady } from '../../hooks/useNotifyEgress';
 import { useEffect, useState } from 'react';
 import { SfuModels, StreamVideoParticipant } from '@stream-io/video-react-sdk';
 
diff --git a/sample-apps/react/egress-composite/src/components/layouts/index.ts b/sample-apps/react/egress-composite/src/components/layouts/index.ts
new file mode 100644
index 0000000000..60950e537f
--- /dev/null
+++ b/sample-apps/react/egress-composite/src/components/layouts/index.ts
@@ -0,0 +1,19 @@
+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 const layoutMap: Record<
+  LayoutType,
+  // normal & screen share view
+  [ComponentType, ComponentType] | [ComponentType]
+> = {
+  single_participant: [DominantSpeaker, DominantSpeakerScreenShare],
+  grid: [PaginatedGrid],
+  spotlight: [Spotlight, Spotlight],
+  mobile: [() => null],
+};
diff --git a/sample-apps/react/egress-composite/src/hooks/useAppConfig.ts b/sample-apps/react/egress-composite/src/hooks/useAppConfig.ts
deleted file mode 100644
index e55a93de03..0000000000
--- a/sample-apps/react/egress-composite/src/hooks/useAppConfig.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import { useMemo } from 'react';
-import { decode } from 'js-base64';
-import { DEFAULT_LAYOUT_ID, LayoutId, SpotlightMode } from '../layouts';
-
-export type AppConfig = {
-  baseURL?: string;
-  apiKey: string;
-  token: string;
-  userId: string;
-  callId: string;
-  callType: string;
-  spotlightMode: SpotlightMode;
-  layout: LayoutId;
-  gridSize: number;
-};
-
-export const useAppConfig = () => {
-  const query = window.location.search;
-  return useMemo<AppConfig>(() => {
-    const urlParams = new URLSearchParams(query);
-    const apiKey =
-      urlParams.get('api_key') || import.meta.env.VITE_STREAM_API_KEY;
-    const token = urlParams.get('token') || import.meta.env.VITE_STREAM_TOKEN;
-    const payload = JSON.parse(decode(token.split('.')[1]));
-    const spotlightMode =
-      (urlParams.get('spotlight_mode') as SpotlightMode) || DEFAULT_LAYOUT_ID;
-    const layout = (urlParams.get('layout') as LayoutId) || DEFAULT_LAYOUT_ID;
-    const gridSize = Number(urlParams.get('grid.size')) || 25;
-
-    return {
-      apiKey: apiKey,
-      token: token,
-      callId: urlParams.get('call_id')! || 'egress-test',
-      callType: urlParams.get('call_type')! || 'default',
-      userId: payload!['user_id'] || urlParams.get('user_id') || 'egress',
-      baseURL: urlParams.get('base_url')!,
-      spotlightMode: spotlightMode,
-      layout: layout,
-      gridSize: gridSize,
-    };
-  }, [query]);
-};
diff --git a/sample-apps/react/egress-composite/src/layouts/dominant-speaker/index.ts b/sample-apps/react/egress-composite/src/layouts/dominant-speaker/index.ts
deleted file mode 100644
index 9b37b7274e..0000000000
--- a/sample-apps/react/egress-composite/src/layouts/dominant-speaker/index.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { DominantSpeaker } from './DominantSpeaker';
-import { DominantSpeakerScreenShare } from './DominantSpeakerScreenShare';
-import { Layout } from '../index';
-
-const DominantSpeakerLayout: Layout = {
-  ParticipantsView: DominantSpeaker,
-  ScreenShareView: DominantSpeakerScreenShare,
-};
-
-export default DominantSpeakerLayout;
diff --git a/sample-apps/react/egress-composite/src/layouts/grid/GridView.tsx b/sample-apps/react/egress-composite/src/layouts/grid/GridView.tsx
deleted file mode 100644
index 17f554f623..0000000000
--- a/sample-apps/react/egress-composite/src/layouts/grid/GridView.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import {
-  DefaultParticipantViewUI,
-  PaginatedGridLayout,
-} from '@stream-io/video-react-sdk';
-import { useAppConfig } from '../../hooks/useAppConfig';
-
-import './GridView.scss';
-
-export const GridView = () => {
-  const { gridSize } = useAppConfig();
-  return (
-    <div className="grid-view">
-      <PaginatedGridLayout
-        ParticipantViewUI={
-          <DefaultParticipantViewUI
-            indicatorsVisible={false}
-            showMenuButton={false}
-          />
-        }
-        excludeLocalParticipant
-        groupSize={gridSize || 25}
-      />
-    </div>
-  );
-};
diff --git a/sample-apps/react/egress-composite/src/layouts/grid/index.ts b/sample-apps/react/egress-composite/src/layouts/grid/index.ts
deleted file mode 100644
index 62d2d05c0b..0000000000
--- a/sample-apps/react/egress-composite/src/layouts/grid/index.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { GridView } from './GridView';
-import { DominantSpeakerScreenShare } from '../dominant-speaker/DominantSpeakerScreenShare';
-import { Layout } from '../index';
-
-const GridLayout: Layout = {
-  ParticipantsView: GridView,
-  // reuses the screen share view from dominant speaker layout
-  ScreenShareView: DominantSpeakerScreenShare,
-};
-
-export default GridLayout;
diff --git a/sample-apps/react/egress-composite/src/layouts/index.ts b/sample-apps/react/egress-composite/src/layouts/index.ts
deleted file mode 100644
index 45fcd9bd0b..0000000000
--- a/sample-apps/react/egress-composite/src/layouts/index.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { ComponentType } from 'react';
-import DominantSpeakerLayout from './dominant-speaker';
-import GridLayout from './grid';
-
-export const DEFAULT_LAYOUT_ID: LayoutId = 'grid';
-
-export type SpotlightMode = 'dominant-speaker' | 'shuffle';
-export type LayoutId = 'dominant-speaker' | 'grid';
-
-export interface Layout {
-  ParticipantsView: ComponentType;
-  ScreenShareView: ComponentType;
-}
-
-const layouts: Record<LayoutId, Layout> = {
-  'dominant-speaker': DominantSpeakerLayout,
-  grid: GridLayout,
-};
-
-export default layouts;
diff --git a/sample-apps/react/egress-composite/src/main.tsx b/sample-apps/react/egress-composite/src/main.tsx
index cd54e77859..6aac896765 100644
--- a/sample-apps/react/egress-composite/src/main.tsx
+++ b/sample-apps/react/egress-composite/src/main.tsx
@@ -1,8 +1,57 @@
 import { createRoot } from 'react-dom/client';
+import {
+  ConfigurationContext,
+  ConfigurationValue,
+  extractPayloadFromToken,
+} from './ConfigurationContext';
 import { CompositeApp } from './CompositeApp';
 
 import '@stream-io/video-react-sdk/dist/css/styles.css';
 
-createRoot(document.getElementById('root') as HTMLElement).render(
-  <CompositeApp />,
-);
+const DEFAULT_USER_ID = 'egress';
+const DEFAULT_CALL_TYPE = 'default';
+
+// @ts-expect-error TODO: this is a global function, we need to declare it
+window.setupLayout = (configuration: ConfigurationValue) => {
+  const {
+    // apply defaults
+    api_key = import.meta.env.VITE_STREAM_API_KEY as string,
+    token = import.meta.env.VITE_STREAM_USER_TOKEN as string,
+    user_id = (extractPayloadFromToken(token as string)['user_id'] ??
+      DEFAULT_USER_ID) as string,
+    call_type = DEFAULT_CALL_TYPE,
+    options = {},
+    ...rest
+  } = configuration;
+
+  const newConfiguration = {
+    api_key,
+    token,
+    user_id,
+    call_type,
+    options,
+    ...rest,
+  };
+
+  console.log('Mounting with config:', { configuration: newConfiguration });
+
+  createRoot(document.getElementById('root') as HTMLElement).render(
+    <ConfigurationContext.Provider value={newConfiguration}>
+      <CompositeApp />
+    </ConfigurationContext.Provider>,
+  );
+};
+
+// (() => {
+//   const v = document.createElement('script');
+//   v.innerHTML = `window.setupLayout({
+//     call_id: "<call_id>",
+//     layout: "grid",
+//     screenshare_layout: "spotlight",
+
+//     options: {
+//       "logo.image_url": "https://theme.zdassets.com/theme_assets/9442057/efc3820e436f9150bc8cf34267fff4df052a1f9c.png",
+//     }
+//   });`;
+//   document.head.appendChild(v);
+// })();