fix(egress-composite): adjust PaginatedGrid sizing

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

@@ -14,8 +14,6 @@
     "@emotion/css": "^11.13.5",
     "@sentry/react": "^10.19.0",
     "@stream-io/video-react-sdk": "workspace:^",
-    "clsx": "^2.0.0",
-    "js-base64": "^3.7.8",
     "react": "19.1.0",
     "react-dom": "19.1.0"
   },

sample-apps/react/egress-composite/src/CompositeApp.scss

@@ -1,31 +1,33 @@
-:root {
-  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
-  font-size: 16px;
-  line-height: 24px;
-  font-weight: 400;
+@layer base-layer {
+  :root {
+    font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
+    font-size: 16px;
+    line-height: 24px;
+    font-weight: 400;
 
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-text-size-adjust: 100%;
-}
+    font-synthesis: none;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-text-size-adjust: 100%;
+  }
 
-.str-video {
-  color: var(--str-video__text-color1);
-  position: relative;
-  height: 100vh;
-}
+  .str-video {
+    color: var(--str-video__text-color1);
+    position: relative;
+    height: 100vh;
+  }
 
-body {
-  margin: 0;
-  min-width: 320px;
-  min-height: 100vh;
-  background-color: #000000;
-  overflow: hidden;
-}
+  body {
+    margin: 0;
+    min-width: 320px;
+    min-height: 100vh;
+    background-color: #000000;
+    overflow: hidden;
+  }
 
-#root {
-  margin: 0 auto;
-  text-align: center;
+  #root {
+    margin: 0 auto;
+    text-align: center;
+  }
 }

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

@@ -4,7 +4,7 @@ import {
   StreamTheme,
   StreamVideo,
 } from '@stream-io/video-react-sdk';
-import clsx from 'clsx';
+import { cx } from '@emotion/css';
 
 import {
   EgressReadyNotificationProvider,
@@ -24,9 +24,7 @@ import { WithCustomActions } from './components/CustomActionsContext';
 export const CompositeApp = () => {
   const { client, call } = useInitializeClientAndCall();
 
-  // @ts-expect-error makes it easy to debug in the browser console
   window.call = call;
-  // @ts-expect-error makes it easy to debug in the browser console
   window.client = client;
 
   return (
@@ -57,7 +55,7 @@ export const StreamThemeWrapper = ({ children }: PropsWithChildren) => {
 
   return (
     <StreamTheme
-      className={clsx(
+      className={cx(
         videoStyles,
         genericLayoutStyles,
         participantStyles,

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

@@ -7,7 +7,6 @@ import {
   useMemo,
   useState,
 } from 'react';
-import { decode } from 'js-base64';
 import {
   LogLevel,
   ParticipantFilter,
@@ -179,7 +178,7 @@ export const extractPayloadFromToken = (
   if (!payload) throw new Error('Malformed token, missing payload');
 
   try {
-    return JSON.parse(decode(payload)) ?? {};
+    return JSON.parse(atob(payload)) ?? {};
   } catch (e) {
     console.log('Error parsing token payload', e);
     return {};

sample-apps/react/egress-composite/src/components/LogoAndTitle.scss

@@ -1,17 +1,18 @@
-.eca__logo-and-title-overlay {
+@layer base-layer {
+  .eca__logo-and-title-overlay {
     position: absolute;
     display: grid;
     top: 0;
     right: 0;
-  
+
     width: 100%;
     height: 100%;
-  
+
     &__logo {
       position: absolute;
     }
     &__title {
       position: absolute;
     }
   }
-  
+}

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

@@ -1,11 +1,13 @@
-.eca__dominant-speaker__container {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
+@layer base-layer {
+  .eca__dominant-speaker__container {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
 
-  .str-video__participant-view {
-    max-width: unset;
+    .str-video__participant-view {
+      max-width: unset;
+    }
   }
 }

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

@@ -1,19 +1,21 @@
-.eca__dominant-speaker-screen-share__container {
-  height: 100%;
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
+@layer base-layer {
+  .eca__dominant-speaker-screen-share__container {
+    height: 100%;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
 
-  .eca__dominant-speaker-screen-share__current-speaker {
-    position: absolute;
-    width: 240px;
-    right: 10px;
-    top: 10px;
-  }
+    .eca__dominant-speaker-screen-share__current-speaker {
+      position: absolute;
+      width: 240px;
+      right: 10px;
+      top: 10px;
+    }
 
-  .str-video__participant-view {
-    max-width: unset;
+    .str-video__participant-view {
+      max-width: unset;
+    }
   }
 }

sample-apps/react/egress-composite/src/components/layouts/PaginatedGrid/PaginatedGrid.scss

@@ -1,15 +1,31 @@
-.paginated-grid {
-  --gap-size: 10px;
-
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--gap-size);
-  height: 100vh;
-  align-items: center;
-  align-content: center;
-  justify-content: center;
-
-  .str-video__participant-view {
-    transition: width 0.2s ease-in-out;
+@layer base-layer {
+  .paginated-grid {
+    --gap-size: 10px;
+
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--gap-size);
+    height: 100vh;
+    align-items: center;
+    align-content: center;
+    justify-content: center;
+
+    .str-video__paginated-grid-layout__group {
+      .str-video__participant-view {
+        transition: width 0.2s ease-in-out;
+      }
+
+      max-width: 130vh;
+
+      &.str-video__paginated-grid-layout--one {
+        max-width: 110vh;
+      }
+      &.str-video__paginated-grid-layout--two-four {
+        max-width: 130vh;
+      }
+      &.str-video__paginated-grid-layout--five-nine {
+        max-width: 130vh;
+      }
+    }
   }
 }

sample-apps/react/egress-composite/src/components/layouts/Spotlight/Spotlight.scss

@@ -1,13 +1,15 @@
-.spotlight {
-  display: flex;
-  flex-wrap: wrap;
-  height: 100vh;
-  align-items: center;
-  align-content: center;
-  justify-content: center;
+@layer base-layer {
+  .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;
-    max-width: unset;
+    .str-video__participant-view {
+      transition: width 0.2s ease-in-out;
+      // max-width: unset;
+    }
   }
 }

sample-apps/react/egress-composite/src/global.d.ts

@@ -0,0 +1,9 @@
+import { Call, StreamVideoClient } from '@stream-io/video-react-sdk';
+
+declare global {
+  interface Window {
+    setupLayout: (configuration: ConfigurationValue) => void;
+    call: Call;
+    client: StreamVideoClient;
+  }
+}

sample-apps/react/egress-composite/src/hooks/options/useGenericLayoutStyles.ts

@@ -1,5 +1,4 @@
-import { css } from '@emotion/css';
-import clsx from 'clsx';
+import { css, cx } from '@emotion/css';
 
 import { useConfigurationContext } from '../../ConfigurationContext';
 
@@ -23,32 +22,20 @@ export const useGenericLayoutStyles = () => {
 
   const styles = [
     css`
-      & .eca__dominant-speaker__container {
-        padding-inline: ${singleParticipantPaddingInline};
-        padding-block: ${singleParticipantPaddingBlock};
-      }
-    `,
-    layoutBackgroundColor &&
-      css`
+      @layer overrides-layer {
+        & .eca__dominant-speaker__container {
+          padding-inline: ${singleParticipantPaddingInline};
+          padding-block: ${singleParticipantPaddingBlock};
+        }
+
         background-color: ${layoutBackgroundColor};
-      `,
-    layoutBackgroundImage &&
-      css`
         background-image: ${layoutBackgroundImage};
-      `,
-    layoutBackgroundSize &&
-      css`
         background-size: ${layoutBackgroundSize};
-      `,
-    layoutBackgroundPosition &&
-      css`
         background-position: ${layoutBackgroundPosition};
-      `,
-    layoutBackgroundRepeat &&
-      css`
         background-repeat: ${layoutBackgroundRepeat};
-      `,
+      }
+    `,
   ];
 
-  return clsx(styles);
+  return cx(styles);
 };

sample-apps/react/egress-composite/src/hooks/options/useLogoAndTitleStyles.ts

@@ -1,5 +1,4 @@
-import { css } from '@emotion/css';
-import clsx from 'clsx';
+import { css, cx } from '@emotion/css';
 
 import {
   positionMap,
@@ -26,26 +25,27 @@ export const useLogoAndTitleStyles = () => {
 
   const styles = [
     css`
-      & .eca__logo-and-title-overlay__logo {
-        justify-self: ${positionMap.horizontal[logoHorizontalPosition]};
-        align-self: ${positionMap.vertical[logoVerticalPosition]};
-        margin-block: ${logoMarginBlock};
-        margin-inline: ${logoMarginInline};
-        width: ${logoWidth};
-        height: ${logoHeight};
-      }
-    `,
-    css`
-      & .eca__logo-and-title-overlay__title {
-        color: ${titleColor};
-        font-size: ${titleFontSize};
-        justify-self: ${positionMap.horizontal[titleHorizontalPosition]};
-        align-self: ${positionMap.vertical[titleVerticalPosition]};
-        margin-block: ${titleMarginBlock};
-        margin-inline: ${titleMarginInline};
+      @layer overrides-layer {
+        & .eca__logo-and-title-overlay__logo {
+          justify-self: ${positionMap.horizontal[logoHorizontalPosition]};
+          align-self: ${positionMap.vertical[logoVerticalPosition]};
+          margin-block: ${logoMarginBlock};
+          margin-inline: ${logoMarginInline};
+          width: ${logoWidth};
+          height: ${logoHeight};
+        }
+
+        & .eca__logo-and-title-overlay__title {
+          color: ${titleColor};
+          font-size: ${titleFontSize};
+          justify-self: ${positionMap.horizontal[titleHorizontalPosition]};
+          align-self: ${positionMap.vertical[titleVerticalPosition]};
+          margin-block: ${titleMarginBlock};
+          margin-inline: ${titleMarginInline};
+        }
       }
     `,
   ];
 
-  return clsx(styles);
+  return cx(styles);
 };