Skip to content

Commit 9c7009f

Browse files
arnautov-antonoliverlazjdimovska
authored
fix(egress-composite): adjust PaginatedGrid sizing (#1966)
### 💡 Overview Ref: https://getstream.slack.com/archives/C090P1YS3U6/p1760375157855869 ### 📝 Implementation notes As a side-quest this PR refactors styling overrides and adds layers for easier CSS adjustments, removes `clsx` (in favour of `cx` from `@emotion/css`) and replaces `decode` from `js-base64` with `atob`. 🎫 Ticket: https://linear.app/stream/issue/XYZ-123 📑 Docs: GetStream/docs-content#1204 <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Grid layout size constraints: responsive participant sizing with improved two-up behavior and enforced 16:9 aspect ratio when enabled. * **Chores** * Removed unused dependencies and migrated classname composition to Emotion. * Consolidated styles into CSS layers and added local stylesheet to app entry. * Added a configurable size-constraints option and corresponding test updates. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Oliver Lazoroski <oliver.lazoroski@gmail.com> Co-authored-by: jonadimovska <jona.dimovska@hotmail.com>
1 parent de54294 commit 9c7009f

23 files changed

Lines changed: 231 additions & 203 deletions

‎packages/react-sdk/src/core/components/CallLayout/PaginatedGridLayout.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@ const PaginatedGridLayoutGroup = ({
4141
}: PaginatedGridLayoutGroupProps) => {
4242
return (
4343
<div
44+
data-group-size={group.length}
4445
className={clsx('str-video__paginated-grid-layout__group', {
4546
'str-video__paginated-grid-layout--one': group.length === 1,
4647
'str-video__paginated-grid-layout--two-four':

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

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,6 @@
1616
"@sentry/react": "^10.30.0",
1717
"@skooldev/skool-stream-layout": "1.0.19",
1818
"@stream-io/video-react-sdk": "workspace:^",
19-
"clsx": "^2.0.0",
20-
"js-base64": "^3.7.8",
2119
"react": "19.1.0",
2220
"react-dom": "19.1.0"
2321
},

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

Lines changed: 28 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,33 @@
1-
:root {
2-
font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
3-
font-size: 16px;
4-
line-height: 24px;
5-
font-weight: 400;
1+
@layer base-layer {
2+
:root {
3+
font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
4+
font-size: 16px;
5+
line-height: 24px;
6+
font-weight: 400;
67

7-
font-synthesis: none;
8-
text-rendering: optimizeLegibility;
9-
-webkit-font-smoothing: antialiased;
10-
-moz-osx-font-smoothing: grayscale;
11-
-webkit-text-size-adjust: 100%;
12-
}
8+
font-synthesis: none;
9+
text-rendering: optimizeLegibility;
10+
-webkit-font-smoothing: antialiased;
11+
-moz-osx-font-smoothing: grayscale;
12+
-webkit-text-size-adjust: 100%;
13+
}
1314

14-
.str-video {
15-
color: var(--str-video__text-color1);
16-
position: relative;
17-
height: 100vh;
18-
}
15+
.str-video {
16+
color: var(--str-video__text-color1);
17+
position: relative;
18+
height: 100vh;
19+
}
1920

20-
body {
21-
margin: 0;
22-
min-width: 320px;
23-
min-height: 100vh;
24-
background-color: #000000;
25-
overflow: hidden;
26-
}
21+
body {
22+
margin: 0;
23+
min-width: 320px;
24+
min-height: 100vh;
25+
background-color: #000000;
26+
overflow: hidden;
27+
}
2728

28-
#root {
29-
margin: 0 auto;
30-
text-align: center;
29+
#root {
30+
margin: 0 auto;
31+
text-align: center;
32+
}
3133
}

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

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import {
44
StreamTheme,
55
StreamVideo,
66
} from '@stream-io/video-react-sdk';
7-
import clsx from 'clsx';
7+
import { cx } from '@emotion/css';
88

99
import {
1010
EgressReadyNotificationProvider,
@@ -29,9 +29,7 @@ import { useConfigurationContext } from './ConfigurationContext';
2929
export const CompositeApp = () => {
3030
const { client, call } = useInitializeClientAndCall();
3131

32-
// @ts-expect-error makes it easy to debug in the browser console
3332
window.call = call;
34-
// @ts-expect-error makes it easy to debug in the browser console
3533
window.client = client;
3634

3735
const {
@@ -67,7 +65,7 @@ export const StreamThemeWrapper = ({ children }: PropsWithChildren) => {
6765

6866
return (
6967
<StreamTheme
70-
className={clsx(
68+
className={cx(
7169
videoStyles,
7270
genericLayoutStyles,
7371
participantStyles,

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ import {
77
useMemo,
88
useState,
99
} from 'react';
10-
import { decode } from 'js-base64';
1110
import {
1211
LogLevel,
1312
ParticipantFilter,
@@ -120,6 +119,7 @@ export type ConfigurationValue = {
120119
// grid-specific
121120
'layout.grid.gap'?: string | number; // ❌
122121
'layout.grid.page_size'?: number; // ✅
122+
'layout.grid.expand_tiles'?: boolean; // ✅
123123

124124
// dominant_speaker-specific (single-participant)
125125
'layout.single-participant.mode'?: 'shuffle' | 'default'; // ✅
@@ -189,7 +189,7 @@ export const extractPayloadFromToken = (
189189
if (!payload) throw new Error('Malformed token, missing payload');
190190

191191
try {
192-
return JSON.parse(decode(payload)) ?? {};
192+
return JSON.parse(atob(payload)) ?? {};
193193
} catch (e) {
194194
console.log('Error parsing token payload', e);
195195
return {};

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

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,18 @@
1-
.eca__logo-and-title-overlay {
1+
@layer base-layer {
2+
.eca__logo-and-title-overlay {
23
position: absolute;
34
display: grid;
45
top: 0;
56
right: 0;
6-
7+
78
width: 100%;
89
height: 100%;
9-
10+
1011
&__logo {
1112
position: absolute;
1213
}
1314
&__title {
1415
position: absolute;
1516
}
1617
}
17-
18+
}

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

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
1-
.eca__dominant-speaker__container {
2-
width: 100%;
3-
height: 100%;
4-
display: flex;
5-
justify-content: center;
6-
align-items: center;
1+
@layer base-layer {
2+
.eca__dominant-speaker__container {
3+
width: 100%;
4+
height: 100%;
5+
display: flex;
6+
justify-content: center;
7+
align-items: center;
78

8-
.str-video__participant-view {
9-
max-width: unset;
9+
.str-video__participant-view {
10+
max-width: unset;
11+
}
1012
}
1113
}

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

Lines changed: 17 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,21 @@
1-
.eca__dominant-speaker-screen-share__container {
2-
height: 100%;
3-
width: 100%;
4-
display: flex;
5-
flex-direction: column;
6-
align-items: center;
7-
justify-content: center;
1+
@layer base-layer {
2+
.eca__dominant-speaker-screen-share__container {
3+
height: 100%;
4+
width: 100%;
5+
display: flex;
6+
flex-direction: column;
7+
align-items: center;
8+
justify-content: center;
89

9-
.eca__dominant-speaker-screen-share__current-speaker {
10-
position: absolute;
11-
width: 240px;
12-
right: 10px;
13-
top: 10px;
14-
}
10+
.eca__dominant-speaker-screen-share__current-speaker {
11+
position: absolute;
12+
width: 240px;
13+
right: 10px;
14+
top: 10px;
15+
}
1516

16-
.str-video__participant-view {
17-
max-width: unset;
17+
.str-video__participant-view {
18+
max-width: unset;
19+
}
1820
}
1921
}

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

Lines changed: 36 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,38 @@
1-
.paginated-grid {
2-
--gap-size: 10px;
3-
4-
display: flex;
5-
flex-wrap: wrap;
6-
gap: var(--gap-size);
7-
height: 100vh;
8-
align-items: center;
9-
align-content: center;
10-
justify-content: center;
11-
12-
.str-video__participant-view {
13-
transition: width 0.2s ease-in-out;
1+
@layer base-layer {
2+
.paginated-grid {
3+
--gap-size: 10px;
4+
5+
display: flex;
6+
flex-wrap: wrap;
7+
gap: var(--gap-size);
8+
height: 100vh;
9+
align-items: center;
10+
align-content: center;
11+
justify-content: center;
12+
13+
.str-video__participant-view {
14+
transition: width 0.2s ease-in-out;
15+
}
16+
17+
&--expanded .str-video__paginated-grid-layout__group {
18+
.str-video__participant-view {
19+
aspect-ratio: 16/9;
20+
}
21+
22+
max-width: 130vh;
23+
24+
&.str-video__paginated-grid-layout--one {
25+
max-width: 125vh;
26+
}
27+
&.str-video__paginated-grid-layout--two-four {
28+
max-width: 180vh;
29+
}
30+
&.str-video__paginated-grid-layout--two-four[data-group-size='2'] {
31+
max-width: 100%;
32+
}
33+
&.str-video__paginated-grid-layout--five-nine {
34+
max-width: 180vh;
35+
}
36+
}
1437
}
1538
}

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

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { PaginatedGridLayout } from '@stream-io/video-react-sdk';
2-
2+
import { cx } from '@emotion/css';
33
import { useConfigurationContext } from '../../../ConfigurationContext';
44
import { EgressReadyParticipantViewUI } from '../EgressReadyParticipantViewUI';
55

@@ -9,13 +9,20 @@ export const PaginatedGrid = () => {
99
const {
1010
options: {
1111
'layout.grid.page_size': pageSize = 20,
12+
'layout.grid.expand_tiles': expandTiles = false,
1213
'layout.forceMirrorParticipants': forceMirrorParticipants,
1314
'participant.filter': filterParticipants,
1415
},
1516
} = useConfigurationContext();
1617

1718
return (
18-
<div className="paginated-grid" data-testid="grid">
19+
<div
20+
className={cx(
21+
'paginated-grid',
22+
expandTiles && 'paginated-grid--expanded',
23+
)}
24+
data-testid="grid"
25+
>
1926
<PaginatedGridLayout
2027
ParticipantViewUI={
2128
<EgressReadyParticipantViewUI

0 commit comments

Comments
 (0)