Skip to content

Commit a18c60d

Browse files
arnautov-antonarnautov-anton
committed
Initial commit
1 parent c689dc2 commit a18c60d

20 files changed

+205
-203
lines changed

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

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,6 @@
1414
"@emotion/css": "^11.13.5",
1515
"@sentry/react": "^10.19.0",
1616
"@stream-io/video-react-sdk": "workspace:^",
17-
"clsx": "^2.0.0",
18-
"js-base64": "^3.7.8",
1917
"react": "19.1.0",
2018
"react-dom": "19.1.0"
2119
},

‎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,
@@ -24,9 +24,7 @@ import { WithCustomActions } from './components/CustomActionsContext';
2424
export const CompositeApp = () => {
2525
const { client, call } = useInitializeClientAndCall();
2626

27-
// @ts-expect-error makes it easy to debug in the browser console
2827
window.call = call;
29-
// @ts-expect-error makes it easy to debug in the browser console
3028
window.client = client;
3129

3230
return (
@@ -57,7 +55,7 @@ export const StreamThemeWrapper = ({ children }: PropsWithChildren) => {
5755

5856
return (
5957
<StreamTheme
60-
className={clsx(
58+
className={cx(
6159
videoStyles,
6260
genericLayoutStyles,
6361
participantStyles,

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

Lines changed: 1 addition & 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,
@@ -179,7 +178,7 @@ export const extractPayloadFromToken = (
179178
if (!payload) throw new Error('Malformed token, missing payload');
180179

181180
try {
182-
return JSON.parse(decode(payload)) ?? {};
181+
return JSON.parse(atob(payload)) ?? {};
183182
} catch (e) {
184183
console.log('Error parsing token payload', e);
185184
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: 29 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,31 @@
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__paginated-grid-layout__group {
14+
.str-video__participant-view {
15+
transition: width 0.2s ease-in-out;
16+
}
17+
18+
max-width: 130vh;
19+
20+
&.str-video__paginated-grid-layout--one {
21+
max-width: 110vh;
22+
}
23+
&.str-video__paginated-grid-layout--two-four {
24+
max-width: 130vh;
25+
}
26+
&.str-video__paginated-grid-layout--five-nine {
27+
max-width: 130vh;
28+
}
29+
}
1430
}
1531
}

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

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,15 @@
1-
.spotlight {
2-
display: flex;
3-
flex-wrap: wrap;
4-
height: 100vh;
5-
align-items: center;
6-
align-content: center;
7-
justify-content: center;
1+
@layer base-layer {
2+
.spotlight {
3+
display: flex;
4+
flex-wrap: wrap;
5+
height: 100vh;
6+
align-items: center;
7+
align-content: center;
8+
justify-content: center;
89

9-
.str-video__participant-view {
10-
transition: width 0.2s ease-in-out;
11-
max-width: unset;
10+
.str-video__participant-view {
11+
transition: width 0.2s ease-in-out;
12+
max-width: unset;
13+
}
1214
}
1315
}

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

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { Call, StreamVideoClient } from '@stream-io/video-react-sdk';
2+
3+
declare global {
4+
interface Window {
5+
setupLayout: (configuration: ConfigurationValue) => void;
6+
call: Call;
7+
client: StreamVideoClient;
8+
}
9+
}

0 commit comments

Comments
 (0)