feat(composite): Custom Recording layouts (#1986)

Adds support for custom recording layouts.

🎫 Ticket: https://linear.app/stream/issue/REACT-638/

Author: oliverlaz

sample-apps/react/egress-composite/package.json

@@ -13,6 +13,7 @@
   "dependencies": {
     "@emotion/css": "^11.13.5",
     "@sentry/react": "^10.19.0",
+    "@skooldev/skool-stream-layout": "^1.0.9",
     "@stream-io/video-react-sdk": "workspace:^",
     "clsx": "^2.0.0",
     "js-base64": "^3.7.8",

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

@@ -135,6 +135,11 @@ export type ConfigurationValue = {
     'layout.spotlight.participants_bar_limit'?: 'dynamic' | number; // ✅
 
     custom_actions?: CustomActions;
+    // used for customer-specific layouts that aren't yet available for
+    // selection through our dashboard UI. In this case, customers can enable
+    // them by specifying their identifier in call recording's advanced options.
+    custom_layout_override?: Layout;
+    custom_screen_share_layout_override?: ScreenshareLayout;
   };
 } & {
   setOptionsOverride: Dispatch<
@@ -201,6 +206,11 @@ export const applyConfigurationDefaults = (
     ...rest
   } = configuration;
 
+  // apply overrides
+  rest.layout = options.custom_layout_override ?? rest.layout;
+  rest.screenshare_layout =
+    options.custom_screen_share_layout_override ?? rest.screenshare_layout;
+
   return {
     api_key,
     token,

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

@@ -0,0 +1,55 @@
+import { ComponentType } from 'react';
+
+import { DominantSpeaker, DominantSpeakerScreenShare } from './DominantSpeaker';
+import { PaginatedGrid } from './PaginatedGrid';
+import { Spotlight } from './Spotlight';
+
+// NOTE: with the current setup of the app, using this layout breaks in DEV mode.
+// The reason for it seems to be yarn and how `workspace:^` versions are resolved.
+// This app and the skool layout package both depend on `@stream-io/video-react-sdk`
+// and this causes some resolution conflict internally.
+//
+// The production builds don't seem to be affected, and we have a workaround for dev.
+// The workaround is to modify the egress-composite/package.json with
+// `"@stream-io/video-react-sdk": "x.y.z"` (where x.y.z) is the previously released version
+// e.g.: current: 1.25.1 -> x.y.z should be 1.25.0
+import { SkoolStreamLayout } from '@skooldev/skool-stream-layout';
+
+export const DEFAULT_LAYOUT: Layout = 'spotlight';
+export const DEFAULT_SCREENSHARE_LAYOUT: ScreenshareLayout = 'spotlight';
+
+export type Layout =
+  | 'grid'
+  | 'single-participant'
+  | 'spotlight'
+  | 'mobile'
+  | 'dominant-speaker'
+  // custom layouts
+  | 'skool';
+
+// NOTE: should always be a subset of the Layout type
+export type ScreenshareLayout =
+  | 'single-participant'
+  | 'spotlight'
+  | 'dominant-speaker'
+  // custom layouts
+  | 'skool';
+
+const CustomSkoolStreamLayout = () => {
+  return <SkoolStreamLayout excludeLocalParticipant />;
+};
+
+export const layoutMap: Record<
+  Layout,
+  // normal & screen share view
+  [ComponentType, ComponentType] | [ComponentType]
+> = {
+  'single-participant': [DominantSpeaker, DominantSpeakerScreenShare],
+  'dominant-speaker': [DominantSpeaker, DominantSpeakerScreenShare],
+  mobile: [DominantSpeaker, DominantSpeakerScreenShare],
+  grid: [PaginatedGrid],
+  spotlight: [Spotlight, Spotlight],
+
+  // custom layouts
+  skool: [CustomSkoolStreamLayout, CustomSkoolStreamLayout],
+};

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

@@ -9,6 +9,7 @@ import {
 import { CompositeApp } from './CompositeApp';
 
 import '@stream-io/video-react-sdk/dist/css/styles.css';
+import '@skooldev/skool-stream-layout/dist/styles.css';
 // Uncomment this line to test your own custom CSS
 // import cssUrl from '../public/example/custom.css?url';
 

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

@@ -7059,6 +7059,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@skooldev/skool-stream-layout@npm:^1.0.9":
+  version: 1.0.9
+  resolution: "@skooldev/skool-stream-layout@npm:1.0.9"
+  peerDependencies:
+    "@stream-io/video-react-sdk": ^1.25.0
+    react: ^17 || ^18 || ^19
+    react-dom: ^17 || ^18 || ^19
+  checksum: 10/0ff2dcc31481516021c1d5946a09771c64fe82218a8fc93f29fe20b30d52f91ca0eb5be4a4738d1c4971d7c7e9542646c9fa5ed0ebf8874fb5bb974524153d3a
+  languageName: node
+  linkType: hard
+
 "@stream-io/audio-filters-web@workspace:^, @stream-io/audio-filters-web@workspace:packages/audio-filters-web":
   version: 0.0.0-use.local
   resolution: "@stream-io/audio-filters-web@workspace:packages/audio-filters-web"
@@ -7115,6 +7126,7 @@ __metadata:
     "@playwright/test": "npm:^1.56.0"
     "@sentry/react": "npm:^10.19.0"
     "@sentry/vite-plugin": "npm:^4.3.0"
+    "@skooldev/skool-stream-layout": "npm:^1.0.9"
     "@stream-io/video-react-sdk": "workspace:^"
     "@types/react": "npm:~19.1.17"
     "@types/react-dom": "npm:~19.1.11"