@stream-io/video-react-sdk 0.3.27 → 0.3.29

package/CHANGELOG.md

@@ -2,6 +2,25 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+### [0.3.29](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.3.28...@stream-io/video-react-sdk-0.3.29) (2023-09-27)
+
+
+### Features
+
+* **SpeakerLayout:** add participantsBarLimit ([#1090](https://github.com/GetStream/stream-video-js/issues/1090)) ([712f1e7](https://github.com/GetStream/stream-video-js/commit/712f1e7010fdb8859aaa6caba7e7d9e0f4557ccb))
+
+### [0.3.28](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.3.27...@stream-io/video-react-sdk-0.3.28) (2023-09-26)
+
+### Dependency Updates
+
+* `@stream-io/video-client` updated to version `0.1.0`
+* `@stream-io/video-react-bindings` updated to version `0.2.25`
+* `@stream-io/video-styling` updated to version `0.1.9`
+
+### Features
+
+* show the anonymous user count in the participant list ([#1109](https://github.com/GetStream/stream-video-js/issues/1109)) ([a253cbf](https://github.com/GetStream/stream-video-js/commit/a253cbfa7552a9ab4302ce824a72653a27dd324d))
+
 ### [0.3.27](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.3.26...@stream-io/video-react-sdk-0.3.27) (2023-09-26)
 
 ### Dependency Updates

package/dist/css/styles.css

@@ -436,6 +436,16 @@
   border-inline-start: var(--str-video__participant-list-header--title-count--border-inline-start);
   border-inline-end: var(--str-video__participant-list-header--title-count--border-inline-end);
 }
+.str-video__participant-list .str-video__participant-list-header__title-anonymous {
+  background: var(--str-video__participant-list-header--title-anonymous--background-color);
+  color: var(--str-video__participant-list-header--title-anonymous--color);
+  box-shadow: var(--str-video__participant-list-header--title-anonymous--box-shadow);
+  border-radius: var(--str-video__participant-list-header--title-anonymous--border-radius);
+  border-block-start: var(--str-video__participant-list-header--title-anonymous--border-block-start);
+  border-block-end: var(--str-video__participant-list-header--title-anonymous--border-block-end);
+  border-inline-start: var(--str-video__participant-list-header--title-anonymous--border-inline-start);
+  border-inline-end: var(--str-video__participant-list-header--title-anonymous--border-inline-end);
+}
 .str-video__participant-list .str-video__participant-list-header__close-button {
   background: var(--str-video__participant-list-header__close-button--background-color);
   color: var(--str-video__participant-list-header__close-button--color);

package/dist/css/styles.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../src/_base.scss","../../src/_global-theme-variables.scss","../../src/Avatar/Avatar-layout.scss","../../src/Avatar/Avatar-theme.scss","../../src/_utils.scss","../../src/Button/Button-layout.scss","../../src/Button/Button-theme.scss","../../src/CallControls/CallControls-layout.scss","../../src/CallParticipantList/CallParticipantList-layout.scss","../../src/CallParticipantList/CallParticipantList-theme.scss","../../src/CallParticipantList/CallParticiantListingItem-layout.scss","../../src/CallParticipantList/CallParticiantListingItem-theme.scss","../../src/CallRecodingList/CallRecordingList-layout.scss","../../src/CallRecodingList/CallRecordingList-theme.scss","../../src/CallStats.scss","../../src/DeviceSettings/DeviceSettings-layout.scss","../../src/DeviceSettings/DeviceSettings-theme.scss","../../src/LoadingIndicator/LoadingIndicator-layout.scss","../../src/LoadingIndicator/LoadingIndicator-theme.scss","../../src/Menu/Menu-layout.scss","../../src/Menu/Menu-theme.scss","../../src/Menu/GenericMenu-layout.scss","../../src/Menu/GenericMenu-theme.scss","../../src/Notification/Notification-layout.scss","../../src/Notification/Notification-theme.scss","../../src/RingingCall/RingingCall-layout.scss","../../src/RingingCall/RingingCall-theme.scss","../../src/Permissions/Permissions-layout.scss","../../src/Reaction/Reaction-layout.scss","../../src/Search/SearchInput-layout.scss","../../src/Search/SearchInput-theme.scss","../../src/StreamCall.scss","../../src/Tooltip/Tooltip-layout.scss","../../src/Tooltip/Tooltip-theme.scss","../../src/Video/Video-layout.scss","../../src/Video/Video-theme.scss","../../src/Video/VideoPlaceholder-layout.scss","../../src/Video/VideoPlaceholder-theme.scss","../../src/VideoPreview/VideoPreview-layout.scss","../../src/VideoPreview/VideoPreview-theme.scss","../../src/ParticipantView/ParticipantView-layout.scss","../../src/ScreenShareOverlay/ScreenShareOverlay-layout.scss","../../src/ScreenShareOverlay/ScreenShareOverlay-theme.scss","../../src/CallLayout/PaginatedGridLayout-layout.scss","../../src/CallLayout/SpeakerLayout-layout.scss","../../src/Icon/Icon-theme.scss","../../src/Icon/Icon-layout.scss","../../src/Debug.scss"],"names":[],"mappings":";AACE;AAAA;AAAA;EAGE;;AAGF;EACE;EACA;EACA;;;AAKF;EACE;EACA;EACA;EACA;;AAGF;AAAA;EAEE;EACA;;;ACzBJ;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;EAIA;EACA;EAGA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ACxEF;EAJE;EACA;EAKA;;;AAGF;EATE;EACA;EAUA;EACA;EACA;;;ACZF;AACE;EACA;AAEA;EACA;AAEA;EACA;;;AAGF;ECSE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ADZF;EACE;EACA;EACA;EACA;EACA;;;AEtBF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;;;AAKN;EACE;;AAEA;EACE;;AAIF;EACE;EACA;;AAIA;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;;AAKN;EACE;EACA;EACA;EACA;EAGA;;;ACzEF;AACE;EACA;AAAA;AAAA;AAIA;EACA;AAAA;AAAA;AAIA;EACA;AAAA;AAAA;AAIA;EACA;AAAA;AAAA;;;AAKF;EFFE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AEFA;EACE;;AAGF;EACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;;;AAGF;AAAA;EAEE;;;AAKF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAKF;EACE;;AAEA;EACE;;AAIJ;EACE;;AAEA;EACE;;AAIJ;EACE;;;AClFJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;;ACbN;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAEA;EACE;EACA;EACA;;AAKN;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAKN;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EAEE,QADiB;EAEjB,OAFiB;EAGjB,WAHiB;EAIjB,mBAJiB;;AAQrB;EACE;EACA;EACA;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;;AC7GJ;EACE;AAAA;AAAA;EAGA;AAAA;AAAA;EAIA;EAEA;AAAA;AAAA;EAIA;EACA;AAAA;AAAA;EAIA;;;AAGF;ELFE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AKFA;ELLA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EKAE;EACA;;AAGF;ELXA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AKUA;ELjBA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AKeE;ELlCF,YKoCM;ELnCN,oBKmCM;ELlCN;EACA;EACA;EACA;EACA,WKkCM;ELjCN,mBKiCM;ELhCN,kBK6BM;;AAQN;EACE;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EL5DJ,YK8DU;EL7DV,oBK6DU;EL5DV;EACA;EACA;EACA;EACA,WK0DU;ELzDV,mBKyDU;ELxDV,kBKuDU;;;ACvEZ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;ENbA;EACA;EAEA;EACA;EACA;;AMYA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;;ACvBJ;EACE;;AAIA;EPEF;EACA,oBODQ;EPER;EACA;EACA;EACA;EACA,WOJQ;EPKR,mBOLQ;EPMR,kBOPQ;;AAKN;EPNF,YOQQ;EPPR,oBOOQ;EPNR;EACA;EACA;EACA;EACA,WOIQ;EPHR,mBOGQ;EPFR,kBOCQ;;AAKN;EPdF,YOgBQ;EPfR,oBOeQ;EPdR;EACA;EACA;EACA;EACA,WOYQ;EPXR,mBOWQ;EPVR,kBOSQ;;AAKN;EPtBF,YOwBQ;EPvBR,oBOuBQ;EPtBR;EACA;EACA;EACA;EACA,WOoBQ;EPnBR,mBOmBQ;EPlBR,kBOiBQ;;AAKN;EP9BF,YOgCQ;EP/BR,oBO+BQ;EP9BR;EACA;EACA;EACA;EACA,WO4BQ;EP3BR,mBO2BQ;EP1BR,kBOyBQ;;;ACzCV;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAIA;EACE;EACA;;;AAKN;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;;;AAKN;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;;;AAQR;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;ERnGF;EACA;EAEA;EACA;EACA;;;ASJF;EACE;EACA;EACA;;;AAGF;ETEE;EACA,oBSDI;ETEJ;EACA;EACA;EACA;EACA,WSJI;ETKJ,mBSLI;ETMJ,kBSPI;;;AAKN;EACE;;;AAGF;EACE;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAGF;ETxBA,YS0BI;ETzBJ,oBSyBI;ETxBJ;EACA;EACA;EACA;EACA,WSsBI;ETrBJ,mBSqBI;ETpBJ,kBSmBI;;;AAMN;ETjCE,YSmCI;ETlCJ,oBSkCI;ETjCJ;EACA;EACA;EACA;EACA,WS+BI;ET9BJ,mBS8BI;ET7BJ,kBS4BI;;;AAMJ;EACE;EACA;;AAGA;EACE;;AAGF;EACE;EACA;;AAGF;ETxDF,YS0DQ;ETzDR,oBSyDQ;ETxDR;EACA;EACA;EACA;EACA,WSsDQ;ETrDR,mBSqDQ;ETpDR,kBSmDQ;;AAKN;EThEF,YSkEQ;ETjER,oBSiEQ;EThER;EACA;EACA;EACA;EACA,WS8DQ;ET7DR,mBS6DQ;ET5DR,kBS2DQ;;;AAUN;EACE;EACA;EACA;;;AC1FN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAEA;EACE;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAIJ;EACE;;;AClDF;EACE;EACA;;;AAIJ;EACE;EACA;;;AAGF;EACE;;AAEA;EACE;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEF;EACE;;;ACrCR;AACE;EACA;AAEA;EACA;AAEA;EACA;AAEA;EACA;AAEA;EACA;AAEA;EACA;;;AAGF;EZAE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AYHF;EZJE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AYCF;EACE;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;AACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAEF;EACE;;;AAMR;EACE;EACA;EACA;;AAEA;EZxEA,YY0EM;EZzEN,oBYyEM;EZxEN;EACA;EACA;EACA;EACA,WYsEM;EZrEN,mBYqEM;EZpEN,kBYmEM;;AAKN;EAEE;EACA;;;AAIJ;EACE;;;AClGF;EACE;EACA;EACA;;;ACDF;EdQE,YcNE;EdOF,oBcPE;EdQF;EACA;EACA;EACA;EACA,WAPmD;EAQnD,mBARmD;EASnD,kBcbE;EAEF;EACA;EACA;;;AAGF;EACE;IACE;;EAEF;IACE;;;ACjBJ;EACE;;;ACDF;EACE;;;ACDF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAKJ;EACE;;AAEF;EACE;EACA;EACA;EACA;;;ACpCN;EACE;;AAGE;EACE;;AAGF;EACE;EACA;EACA;;;ACXN;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;;;ACXJ;EACE;EACA;EACA;;AAEA;EpBGA,YoBDI;EpBEJ,oBoBFI;EpBGJ;EACA;EACA;EACA;EACA,WoBLI;EpBMJ,mBoBNI;EpBOJ,kBoBRI;;AAKJ;EACE;;;AChBJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIA;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAKN;EACE;EACA;;;ACxCJ;EACE;EACA;EACA;;;AAME;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EAGA,cACE;EAEF;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AClCR;EACE;EACA;EACA;EACA;;AAEA;AAAA;EAEE;EACA;EACA;EACA;;AAGF;AAAA;EAEE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;ACnDN;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;;ACRJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;;AAGF;AAAA;EAEE;EACA;EACA;;;ACxBJ;EACE;EACA;AAAA;AAAA;EAGA;AAAA;AAAA;EAGA;AAAA;EAEA;EACA;AAAA;EAEA;EAEA;EAEA;;;AAGF;EACE;;;AAEF;E1BHE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;A0BDA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAIJ;E1B9BA,Y0BgCI;E1B/BJ,oB0B+BI;E1B9BJ;EACA;EACA;EACA;EACA,W0B4BI;E1B3BJ,mB0B2BI;E1B1BJ,kB0ByBI;;AAIJ;EACE;;AAEA;E1BxCF,Y0B0CM;E1BzCN,oB0ByCM;E1BxCN;EACA;EACA;EACA;EACA,W0BsCM;E1BrCN,mB0BqCM;E1BpCN,kB0BmCM;;;ACrDR;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;;AAEA;EACE;EACA;;;ACrBJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ACNF;AACE;EACA;AAEA;EACA;AAEA;EACA;AAEA;EACA;AAEA;EACA;AAEA;EACA;AAEA;EACA;AAEA;EACA;;;AAGF;E7BNE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;E6BCA;EACA;;AAEA;EACE;;;AAIJ;EACE;EACA;EACA;EACA;;;AC1CF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;;ACZJ;EACE;;;ACDF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;;ACnBJ;EACE;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;;;ACbJ;EACE;EACA;EACA;EAEA,OADkB;EAElB;;AAEA;EACE;EACA;EACA;;AAGF;EAEE,QADiB;EAEjB,OAFiB;EAGjB,WAHiB;;AAMnB;EACE;;AAGF;EACE;;;ACxBJ;AACE;EACA;AAEA;EACA;AAAA;AAAA;AAIA;EACA;AAAA;AAAA;AAIA;EACA;AAAA;AAGA;EACA;AAAA;AAGA;EACA;AAAA;AAGA;EACA;AAAA;;;AAIF;EnCXE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EmCMA;;;ACjCF;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;;AAEA;AAAA;EACE;;AAGF;AAAA;AAAA;AAAA;EAEE;EACA;EACA;;AAIA;AAAA;AAAA;AAAA;EAEE;;AAIJ;AAAA;EACE;EACA;EACA;EACA;;AAGF;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAWA;AAAA;EAPE,OADY;EAEZ,QAFY;EAGZ,WAHY;EAIZ,mBAJY;EAKZ;EAKA;EACA;;AAGF;AAAA;EAbE,OADY;EAEZ,QAFY;EAGZ,WAHY;EAIZ,mBAJY;EAKZ;EAWA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;;AAGF;AAAA;EA1BE,OADY;EAEZ,QAFY;EAGZ,WAHY;EAIZ,mBAJY;EAKZ;EAwBA;EACA;;AAGF;AAAA;EAhCE,OADY;EAEZ,QAFY;EAGZ,WAHY;EAIZ,mBAJY;EAKZ;EA8BA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;AAAA;EA9CE,OADY;EAEZ,QAFY;EAGZ,WAHY;EAIZ,mBAJY;EAKZ;EA4CA;EACA;EACA;;AAIJ;AAAA;EACE;EACA;EACA;EACA;;AAEA;AAAA;EACE;;AAEF;AAAA;EACE;;AAEF;AAAA;EACE;;;ACjIR;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;;ACxBN;EACE;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;;AAEA;EACE;;;ACbN;EACE;;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;;AAEA;EACE;;AAIA;EACE;;AAIF;EACE;;AAIF;EACE;;;ACrCR;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EAGE;;AAGF;EACE;;AAGF;AAAA;EAEE;;AAIJ;EACE;EACA;EACA;EACA;;AAGE;EACE;EACA;;AAIJ;EACE;EACA;;AAEF;EACE;EACA;;AAEF;EACE;EACA;;AAEF;EACE;EACA;;AAIJ;EACE;;AACA;EACE;;AAGF;EACE;EACA;;AAEA;EACE;EACA;EACA;EAEA;;AAKN;EACE;;AAEF;EACE;;AAEF;EACE;;AAKA;EACE;EACA;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;;AAMF;EACE;;AAEF;EACE;;AAEF;EACE;;;ACjIN;EACE;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAKF;EACE;EACA;;;AC3KJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ACTF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA","file":"styles.css"}
+{"version":3,"sourceRoot":"","sources":["../../src/_base.scss","../../src/_global-theme-variables.scss","../../src/Avatar/Avatar-layout.scss","../../src/Avatar/Avatar-theme.scss","../../src/_utils.scss","../../src/Button/Button-layout.scss","../../src/Button/Button-theme.scss","../../src/CallControls/CallControls-layout.scss","../../src/CallParticipantList/CallParticipantList-layout.scss","../../src/CallParticipantList/CallParticipantList-theme.scss","../../src/CallParticipantList/CallParticiantListingItem-layout.scss","../../src/CallParticipantList/CallParticiantListingItem-theme.scss","../../src/CallRecodingList/CallRecordingList-layout.scss","../../src/CallRecodingList/CallRecordingList-theme.scss","../../src/CallStats.scss","../../src/DeviceSettings/DeviceSettings-layout.scss","../../src/DeviceSettings/DeviceSettings-theme.scss","../../src/LoadingIndicator/LoadingIndicator-layout.scss","../../src/LoadingIndicator/LoadingIndicator-theme.scss","../../src/Menu/Menu-layout.scss","../../src/Menu/Menu-theme.scss","../../src/Menu/GenericMenu-layout.scss","../../src/Menu/GenericMenu-theme.scss","../../src/Notification/Notification-layout.scss","../../src/Notification/Notification-theme.scss","../../src/RingingCall/RingingCall-layout.scss","../../src/RingingCall/RingingCall-theme.scss","../../src/Permissions/Permissions-layout.scss","../../src/Reaction/Reaction-layout.scss","../../src/Search/SearchInput-layout.scss","../../src/Search/SearchInput-theme.scss","../../src/StreamCall.scss","../../src/Tooltip/Tooltip-layout.scss","../../src/Tooltip/Tooltip-theme.scss","../../src/Video/Video-layout.scss","../../src/Video/Video-theme.scss","../../src/Video/VideoPlaceholder-layout.scss","../../src/Video/VideoPlaceholder-theme.scss","../../src/VideoPreview/VideoPreview-layout.scss","../../src/VideoPreview/VideoPreview-theme.scss","../../src/ParticipantView/ParticipantView-layout.scss","../../src/ScreenShareOverlay/ScreenShareOverlay-layout.scss","../../src/ScreenShareOverlay/ScreenShareOverlay-theme.scss","../../src/CallLayout/PaginatedGridLayout-layout.scss","../../src/CallLayout/SpeakerLayout-layout.scss","../../src/Icon/Icon-theme.scss","../../src/Icon/Icon-layout.scss","../../src/Debug.scss"],"names":[],"mappings":";AACE;AAAA;AAAA;EAGE;;AAGF;EACE;EACA;EACA;;;AAKF;EACE;EACA;EACA;EACA;;AAGF;AAAA;EAEE;EACA;;;ACzBJ;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;EAIA;EACA;EAGA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ACxEF;EAJE;EACA;EAKA;;;AAGF;EATE;EACA;EAUA;EACA;EACA;;;ACZF;AACE;EACA;AAEA;EACA;AAEA;EACA;;;AAGF;ECSE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ADZF;EACE;EACA;EACA;EACA;EACA;;;AEtBF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;;;AAKN;EACE;;AAEA;EACE;;AAIF;EACE;EACA;;AAIA;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;;AAKN;EACE;EACA;EACA;EACA;EAGA;;;ACzEF;AACE;EACA;AAAA;AAAA;AAIA;EACA;AAAA;AAAA;AAIA;EACA;AAAA;AAAA;AAIA;EACA;AAAA;AAAA;;;AAKF;EFFE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AEFA;EACE;;AAGF;EACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;;;AAGF;AAAA;EAEE;;;AAKF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAKF;EACE;;AAEA;EACE;;AAIJ;EACE;;AAEA;EACE;;AAIJ;EACE;;;AClFJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;;ACbN;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAEA;EACE;EACA;EACA;;AAKN;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAKN;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EAEE,QADiB;EAEjB,OAFiB;EAGjB,WAHiB;EAIjB,mBAJiB;;AAQrB;EACE;EACA;EACA;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;;AC7GJ;EACE;AAAA;AAAA;EAGA;AAAA;AAAA;EAIA;EAEA;AAAA;AAAA;EAIA;EACA;AAAA;AAAA;EAIA;;;AAGF;ELFE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AKFA;ELLA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EKAE;EACA;;AAGF;ELXA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AKUA;ELjBA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AKgBA;ELvBA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AKqBE;ELxCF,YK0CM;ELzCN,oBKyCM;ELxCN;EACA;EACA;EACA;EACA,WKwCM;ELvCN,mBKuCM;ELtCN,kBKmCM;;AAQN;EACE;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;ELlEJ,YKoEQ;ELnER,oBKmEQ;ELlER;EACA;EACA;EACA;EACA,WKgEQ;EL/DR,mBK+DQ;EL9DR,kBK6DQ;;;AC7EV;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;ENbA;EACA;EAEA;EACA;EACA;;AMYA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;;ACvBJ;EACE;;AAIA;EPEF;EACA,oBODQ;EPER;EACA;EACA;EACA;EACA,WOJQ;EPKR,mBOLQ;EPMR,kBOPQ;;AAKN;EPNF,YOQQ;EPPR,oBOOQ;EPNR;EACA;EACA;EACA;EACA,WOIQ;EPHR,mBOGQ;EPFR,kBOCQ;;AAKN;EPdF,YOgBQ;EPfR,oBOeQ;EPdR;EACA;EACA;EACA;EACA,WOYQ;EPXR,mBOWQ;EPVR,kBOSQ;;AAKN;EPtBF,YOwBQ;EPvBR,oBOuBQ;EPtBR;EACA;EACA;EACA;EACA,WOoBQ;EPnBR,mBOmBQ;EPlBR,kBOiBQ;;AAKN;EP9BF,YOgCQ;EP/BR,oBO+BQ;EP9BR;EACA;EACA;EACA;EACA,WO4BQ;EP3BR,mBO2BQ;EP1BR,kBOyBQ;;;ACzCV;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAIA;EACE;EACA;;;AAKN;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;;;AAKN;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;;;AAQR;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;ERnGF;EACA;EAEA;EACA;EACA;;;ASJF;EACE;EACA;EACA;;;AAGF;ETEE;EACA,oBSDI;ETEJ;EACA;EACA;EACA;EACA,WSJI;ETKJ,mBSLI;ETMJ,kBSPI;;;AAKN;EACE;;;AAGF;EACE;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAGF;ETxBA,YS0BI;ETzBJ,oBSyBI;ETxBJ;EACA;EACA;EACA;EACA,WSsBI;ETrBJ,mBSqBI;ETpBJ,kBSmBI;;;AAMN;ETjCE,YSmCI;ETlCJ,oBSkCI;ETjCJ;EACA;EACA;EACA;EACA,WS+BI;ET9BJ,mBS8BI;ET7BJ,kBS4BI;;;AAMJ;EACE;EACA;;AAGA;EACE;;AAGF;EACE;EACA;;AAGF;ETxDF,YS0DQ;ETzDR,oBSyDQ;ETxDR;EACA;EACA;EACA;EACA,WSsDQ;ETrDR,mBSqDQ;ETpDR,kBSmDQ;;AAKN;EThEF,YSkEQ;ETjER,oBSiEQ;EThER;EACA;EACA;EACA;EACA,WS8DQ;ET7DR,mBS6DQ;ET5DR,kBS2DQ;;;AAUN;EACE;EACA;EACA;;;AC1FN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAEA;EACE;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAIJ;EACE;;;AClDF;EACE;EACA;;;AAIJ;EACE;EACA;;;AAGF;EACE;;AAEA;EACE;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEF;EACE;;;ACrCR;AACE;EACA;AAEA;EACA;AAEA;EACA;AAEA;EACA;AAEA;EACA;AAEA;EACA;;;AAGF;EZAE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AYHF;EZJE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AYCF;EACE;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;AACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAEF;EACE;;;AAMR;EACE;EACA;EACA;;AAEA;EZxEA,YY0EM;EZzEN,oBYyEM;EZxEN;EACA;EACA;EACA;EACA,WYsEM;EZrEN,mBYqEM;EZpEN,kBYmEM;;AAKN;EAEE;EACA;;;AAIJ;EACE;;;AClGF;EACE;EACA;EACA;;;ACDF;EdQE,YcNE;EdOF,oBcPE;EdQF;EACA;EACA;EACA;EACA,WAPmD;EAQnD,mBARmD;EASnD,kBcbE;EAEF;EACA;EACA;;;AAGF;EACE;IACE;;EAEF;IACE;;;ACjBJ;EACE;;;ACDF;EACE;;;ACDF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAKJ;EACE;;AAEF;EACE;EACA;EACA;EACA;;;ACpCN;EACE;;AAGE;EACE;;AAGF;EACE;EACA;EACA;;;ACXN;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;;;ACXJ;EACE;EACA;EACA;;AAEA;EpBGA,YoBDI;EpBEJ,oBoBFI;EpBGJ;EACA;EACA;EACA;EACA,WoBLI;EpBMJ,mBoBNI;EpBOJ,kBoBRI;;AAKJ;EACE;;;AChBJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIA;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAKN;EACE;EACA;;;ACxCJ;EACE;EACA;EACA;;;AAME;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EAGA,cACE;EAEF;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AClCR;EACE;EACA;EACA;EACA;;AAEA;AAAA;EAEE;EACA;EACA;EACA;;AAGF;AAAA;EAEE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;ACnDN;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;;ACRJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;;AAGF;AAAA;EAEE;EACA;EACA;;;ACxBJ;EACE;EACA;AAAA;AAAA;EAGA;AAAA;AAAA;EAGA;AAAA;EAEA;EACA;AAAA;EAEA;EAEA;EAEA;;;AAGF;EACE;;;AAEF;E1BHE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;A0BDA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAIJ;E1B9BA,Y0BgCI;E1B/BJ,oB0B+BI;E1B9BJ;EACA;EACA;EACA;EACA,W0B4BI;E1B3BJ,mB0B2BI;E1B1BJ,kB0ByBI;;AAIJ;EACE;;AAEA;E1BxCF,Y0B0CM;E1BzCN,oB0ByCM;E1BxCN;EACA;EACA;EACA;EACA,W0BsCM;E1BrCN,mB0BqCM;E1BpCN,kB0BmCM;;;ACrDR;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;;AAEA;EACE;EACA;;;ACrBJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ACNF;AACE;EACA;AAEA;EACA;AAEA;EACA;AAEA;EACA;AAEA;EACA;AAEA;EACA;AAEA;EACA;AAEA;EACA;;;AAGF;E7BNE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;E6BCA;EACA;;AAEA;EACE;;;AAIJ;EACE;EACA;EACA;EACA;;;AC1CF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;;ACZJ;EACE;;;ACDF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;;ACnBJ;EACE;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;;;ACbJ;EACE;EACA;EACA;EAEA,OADkB;EAElB;;AAEA;EACE;EACA;EACA;;AAGF;EAEE,QADiB;EAEjB,OAFiB;EAGjB,WAHiB;;AAMnB;EACE;;AAGF;EACE;;;ACxBJ;AACE;EACA;AAEA;EACA;AAAA;AAAA;AAIA;EACA;AAAA;AAAA;AAIA;EACA;AAAA;AAGA;EACA;AAAA;AAGA;EACA;AAAA;AAGA;EACA;AAAA;;;AAIF;EnCXE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EmCMA;;;ACjCF;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;;AAEA;AAAA;EACE;;AAGF;AAAA;AAAA;AAAA;EAEE;EACA;EACA;;AAIA;AAAA;AAAA;AAAA;EAEE;;AAIJ;AAAA;EACE;EACA;EACA;EACA;;AAGF;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAWA;AAAA;EAPE,OADY;EAEZ,QAFY;EAGZ,WAHY;EAIZ,mBAJY;EAKZ;EAKA;EACA;;AAGF;AAAA;EAbE,OADY;EAEZ,QAFY;EAGZ,WAHY;EAIZ,mBAJY;EAKZ;EAWA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;;AAGF;AAAA;EA1BE,OADY;EAEZ,QAFY;EAGZ,WAHY;EAIZ,mBAJY;EAKZ;EAwBA;EACA;;AAGF;AAAA;EAhCE,OADY;EAEZ,QAFY;EAGZ,WAHY;EAIZ,mBAJY;EAKZ;EA8BA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;AAAA;EA9CE,OADY;EAEZ,QAFY;EAGZ,WAHY;EAIZ,mBAJY;EAKZ;EA4CA;EACA;EACA;;AAIJ;AAAA;EACE;EACA;EACA;EACA;;AAEA;AAAA;EACE;;AAEF;AAAA;EACE;;AAEF;AAAA;EACE;;;ACjIR;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;;ACxBN;EACE;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;;AAEA;EACE;;;ACbN;EACE;;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;;AAEA;EACE;;AAIA;EACE;;AAIF;EACE;;AAIF;EACE;;;ACrCR;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EAGE;;AAGF;EACE;;AAGF;AAAA;EAEE;;AAIJ;EACE;EACA;EACA;EACA;;AAGE;EACE;EACA;;AAIJ;EACE;EACA;;AAEF;EACE;EACA;;AAEF;EACE;EACA;;AAEF;EACE;EACA;;AAIJ;EACE;;AACA;EACE;;AAGF;EACE;EACA;;AAEA;EACE;EACA;EACA;EAEA;;AAKN;EACE;;AAEF;EACE;;AAEF;EACE;;AAKA;EACE;EACA;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;;AAMF;EACE;;AAEF;EACE;;AAEF;EACE;;;ACjIN;EACE;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAKF;EACE;EACA;;;AC3KJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ACTF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA","file":"styles.css"}

package/dist/src/components/CallParticipantsList/CallParticipantListHeader.js

@@ -1,8 +1,10 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import { useCallStateHooks } from '@stream-io/video-react-bindings';
+import { useCallStateHooks, useI18n } from '@stream-io/video-react-bindings';
 export const CallParticipantListHeader = ({ onClose, }) => {
-    const { useParticipants } = useCallStateHooks();
+    const { useParticipants, useAnonymousParticipantCount } = useCallStateHooks();
     const participants = useParticipants();
-    return (_jsxs("div", Object.assign({ className: "str-video__participant-list-header" }, { children: [_jsxs("div", Object.assign({ className: "str-video__participant-list-header__title" }, { children: ["Participants", ' ', _jsxs("span", Object.assign({ className: "str-video__participant-list-header__title-count" }, { children: ["(", participants.length, ")"] }))] })), _jsx("button", Object.assign({ onClick: onClose, className: "str-video__participant-list-header__close-button" }, { children: _jsx("span", { className: "str-video__participant-list-header__close-button--icon" }) }))] })));
+    const anonymousParticipantCount = useAnonymousParticipantCount();
+    const { t } = useI18n();
+    return (_jsxs("div", Object.assign({ className: "str-video__participant-list-header" }, { children: [_jsxs("div", Object.assign({ className: "str-video__participant-list-header__title" }, { children: [t('Participants'), ' ', _jsxs("span", Object.assign({ className: "str-video__participant-list-header__title-count" }, { children: ["(", participants.length, ")"] })), anonymousParticipantCount > 0 && (_jsx("span", Object.assign({ className: "str-video__participant-list-header__title-anonymous" }, { children: t('Anonymous', { count: anonymousParticipantCount }) })))] })), _jsx("button", Object.assign({ onClick: onClose, className: "str-video__participant-list-header__close-button" }, { children: _jsx("span", { className: "str-video__participant-list-header__close-button--icon" }) }))] })));
 };
 //# sourceMappingURL=CallParticipantListHeader.js.map

package/dist/src/components/CallParticipantsList/CallParticipantListHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"CallParticipantListHeader.js","sourceRoot":"","sources":["../../../../src/components/CallParticipantsList/CallParticipantListHeader.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAC;AAOpE,MAAM,CAAC,MAAM,yBAAyB,GAAG,CAAC,EACxC,OAAO,GACwB,EAAE,EAAE;IACnC,MAAM,EAAE,eAAe,EAAE,GAAG,iBAAiB,EAAE,CAAC;IAChD,MAAM,YAAY,GAAG,eAAe,EAAE,CAAC;IAEvC,OAAO,CACL,6BAAK,SAAS,EAAC,oCAAoC,iBACjD,6BAAK,SAAS,EAAC,2CAA2C,iCAC3C,GAAG,EAChB,8BAAM,SAAS,EAAC,iDAAiD,sBAC7D,YAAY,CAAC,MAAM,UAChB,KACH,EACN,+BACE,OAAO,EAAE,OAAO,EAChB,SAAS,EAAC,kDAAkD,gBAE5D,eAAM,SAAS,EAAC,wDAAwD,GAAG,IACpE,KACL,CACP,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"CallParticipantListHeader.js","sourceRoot":"","sources":["../../../../src/components/CallParticipantsList/CallParticipantListHeader.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,iBAAiB,EAAE,OAAO,EAAE,MAAM,iCAAiC,CAAC;AAO7E,MAAM,CAAC,MAAM,yBAAyB,GAAG,CAAC,EACxC,OAAO,GACwB,EAAE,EAAE;IACnC,MAAM,EAAE,eAAe,EAAE,4BAA4B,EAAE,GAAG,iBAAiB,EAAE,CAAC;IAC9E,MAAM,YAAY,GAAG,eAAe,EAAE,CAAC;IACvC,MAAM,yBAAyB,GAAG,4BAA4B,EAAE,CAAC;IACjE,MAAM,EAAE,CAAC,EAAE,GAAG,OAAO,EAAE,CAAC;IAExB,OAAO,CACL,6BAAK,SAAS,EAAC,oCAAoC,iBACjD,6BAAK,SAAS,EAAC,2CAA2C,iBACvD,CAAC,CAAC,cAAc,CAAC,EAAE,GAAG,EACvB,8BAAM,SAAS,EAAC,iDAAiD,sBAC7D,YAAY,CAAC,MAAM,UAChB,EACN,yBAAyB,GAAG,CAAC,IAAI,CAChC,6BAAM,SAAS,EAAC,qDAAqD,gBAClE,CAAC,CAAC,WAAW,EAAE,EAAE,KAAK,EAAE,yBAAyB,EAAE,CAAC,IAChD,CACR,KACG,EACN,+BACE,OAAO,EAAE,OAAO,EAChB,SAAS,EAAC,kDAAkD,gBAE5D,eAAM,SAAS,EAAC,wDAAwD,GAAG,IACpE,KACL,CACP,CAAC;AACJ,CAAC,CAAC"}

package/dist/src/components/CallParticipantsList/EmptyParticipantSearchList.js

@@ -1,5 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { useI18n } from '@stream-io/video-react-bindings';
 export const EmptyParticipantSearchList = () => {
-    return (_jsx("div", Object.assign({ className: "str-video__participant-list--empty" }, { children: "No participants found" })));
+    const { t } = useI18n();
+    return (_jsx("div", Object.assign({ className: "str-video__participant-list--empty" }, { children: t('No participants found') })));
 };
 //# sourceMappingURL=EmptyParticipantSearchList.js.map

package/dist/src/components/CallParticipantsList/EmptyParticipantSearchList.js.map

@@ -1 +1 @@
-{"version":3,"file":"EmptyParticipantSearchList.js","sourceRoot":"","sources":["../../../../src/components/CallParticipantsList/EmptyParticipantSearchList.tsx"],"names":[],"mappings":";AAAA,MAAM,CAAC,MAAM,0BAA0B,GAAG,GAAG,EAAE;IAC7C,OAAO,CACL,4BAAK,SAAS,EAAC,oCAAoC,2CAE7C,CACP,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"EmptyParticipantSearchList.js","sourceRoot":"","sources":["../../../../src/components/CallParticipantsList/EmptyParticipantSearchList.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,iCAAiC,CAAC;AAE1D,MAAM,CAAC,MAAM,0BAA0B,GAAG,GAAG,EAAE;IAC7C,MAAM,EAAE,CAAC,EAAE,GAAG,OAAO,EAAE,CAAC;IACxB,OAAO,CACL,4BAAK,SAAS,EAAC,oCAAoC,gBAChD,CAAC,CAAC,uBAAuB,CAAC,IACvB,CACP,CAAC;AACJ,CAAC,CAAC"}

package/dist/src/core/components/CallLayout/PaginatedGridLayout.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useState } from 'react';
 import { useCall, useCallStateHooks } from '@stream-io/video-react-bindings';
 import clsx from 'clsx';
@@ -33,6 +33,6 @@ export const PaginatedGridLayout = ({ groupSize = GROUP_SIZE, excludeLocalPartic
     const selectedGroup = participantGroups[page];
     if (!call)
         return null;
-    return (_jsxs(_Fragment, { children: [remoteParticipants.map((participant) => (_jsx(Audio, { participant: participant }, participant.sessionId))), _jsx("div", Object.assign({ className: "str-video__paginated-grid-layout__wrapper" }, { children: _jsxs("div", Object.assign({ className: "str-video__paginated-grid-layout" }, { children: [pageArrowsVisible && pageCount > 1 && (_jsx(IconButton, { icon: "caret-left", disabled: page === 0, onClick: () => setPage((currentPage) => Math.max(0, currentPage - 1)) })), selectedGroup && (_jsx(PaginatedGridLayoutGroup, { group: participantGroups[page], VideoPlaceholder: VideoPlaceholder, ParticipantViewUI: ParticipantViewUI })), pageArrowsVisible && pageCount > 1 && (_jsx(IconButton, { disabled: page === pageCount - 1, icon: "caret-right", onClick: () => setPage((currentPage) => Math.min(pageCount - 1, currentPage + 1)) }))] })) }))] }));
+    return (_jsxs("div", Object.assign({ className: "str-video__paginated-grid-layout__wrapper" }, { children: [remoteParticipants.map((participant) => (_jsx(Audio, { participant: participant }, participant.sessionId))), _jsxs("div", Object.assign({ className: "str-video__paginated-grid-layout" }, { children: [pageArrowsVisible && pageCount > 1 && (_jsx(IconButton, { icon: "caret-left", disabled: page === 0, onClick: () => setPage((currentPage) => Math.max(0, currentPage - 1)) })), selectedGroup && (_jsx(PaginatedGridLayoutGroup, { group: participantGroups[page], VideoPlaceholder: VideoPlaceholder, ParticipantViewUI: ParticipantViewUI })), pageArrowsVisible && pageCount > 1 && (_jsx(IconButton, { disabled: page === pageCount - 1, icon: "caret-right", onClick: () => setPage((currentPage) => Math.min(pageCount - 1, currentPage + 1)) }))] }))] })));
 };
 //# sourceMappingURL=PaginatedGridLayout.js.map

package/dist/src/core/components/CallLayout/PaginatedGridLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"PaginatedGridLayout.js","sourceRoot":"","sources":["../../../../../src/core/components/CallLayout/PaginatedGridLayout.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"PaginatedGridLayout.js","sourceRoot":"","sources":["../../../../../src/core/components/CallLayout/PaginatedGridLayout.tsx"],"names":[],"mappings":"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"}

package/dist/src/core/components/CallLayout/SpeakerLayout.d.ts

@@ -7,5 +7,10 @@ export type SpeakerLayoutProps = {
      * Providing `null` will hide the bar.
      */
     participantsBarPosition?: 'top' | 'bottom' | 'left' | 'right' | null;
+    /**
+     * Hard limits the number of the participants rendered in the participants bar.
+     * Providing string `dynamic` will calculate hard limit based on screen width/height.
+     */
+    participantsBarLimit?: 'dynamic' | number;
 } & Pick<ParticipantViewProps, 'VideoPlaceholder'>;
-export declare const SpeakerLayout: ({ ParticipantViewUIBar, ParticipantViewUISpotlight, VideoPlaceholder, participantsBarPosition, }: SpeakerLayoutProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const SpeakerLayout: ({ ParticipantViewUIBar, ParticipantViewUISpotlight, VideoPlaceholder, participantsBarPosition, participantsBarLimit, }: SpeakerLayoutProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/src/core/components/CallLayout/SpeakerLayout.js

@@ -2,24 +2,33 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useEffect, useState } from 'react';
 import { CallTypes, combineComparators, defaultSortPreset, screenSharing, SfuModels, speakerLayoutSortPreset, } from '@stream-io/video-client';
 import { useCall, useCallStateHooks } from '@stream-io/video-react-bindings';
+import clsx from 'clsx';
 import { DefaultParticipantViewUI, ParticipantView, } from '../ParticipantView';
 import { IconButton } from '../../../components';
 import { useHorizontalScrollPosition, useVerticalScrollPosition, } from '../../../hooks';
-import clsx from 'clsx';
+import { useCalculateHardLimit } from '../../hooks/useCalculateHardLimit';
+import { Audio } from '../Audio';
 const DefaultParticipantViewUIBar = () => (_jsx(DefaultParticipantViewUI, { menuPlacement: "top-end" }));
 const DefaultParticipantViewUISpotlight = () => _jsx(DefaultParticipantViewUI, {});
-export const SpeakerLayout = ({ ParticipantViewUIBar = DefaultParticipantViewUIBar, ParticipantViewUISpotlight = DefaultParticipantViewUISpotlight, VideoPlaceholder, participantsBarPosition = 'bottom', }) => {
+export const SpeakerLayout = ({ ParticipantViewUIBar = DefaultParticipantViewUIBar, ParticipantViewUISpotlight = DefaultParticipantViewUISpotlight, VideoPlaceholder, participantsBarPosition = 'bottom', participantsBarLimit, }) => {
     const call = useCall();
-    const { useParticipants } = useCallStateHooks();
+    const { useParticipants, useRemoteParticipants } = useCallStateHooks();
     const [participantInSpotlight, ...otherParticipants] = useParticipants();
-    const [scrollWrapper, setScrollWrapper] = useState(null);
+    const remoteParticipants = useRemoteParticipants();
+    const [participantsBarWrapperElement, setParticipantsBarWrapperElement] = useState(null);
+    const [participantsBarElement, setParticipantsBarElement] = useState(null);
+    const [buttonsWrapperElement, setButtonsWrapperElement] = useState(null);
+    const isSpeakerScreenSharing = hasScreenShare(participantInSpotlight);
+    const hardLimit = useCalculateHardLimit(buttonsWrapperElement, participantsBarElement, participantsBarLimit);
+    const isVertical = participantsBarPosition === 'left' || participantsBarPosition === 'right';
+    const isHorizontal = participantsBarPosition === 'top' || participantsBarPosition === 'bottom';
     const isOneOnOneCall = otherParticipants.length === 1;
     useEffect(() => {
-        if (!scrollWrapper || !call)
+        if (!participantsBarWrapperElement || !call)
             return;
-        const cleanup = call.setViewport(scrollWrapper);
+        const cleanup = call.setViewport(participantsBarWrapperElement);
         return () => cleanup();
-    }, [scrollWrapper, call]);
+    }, [participantsBarWrapperElement, call]);
     useEffect(() => {
         if (!call)
             return;
@@ -36,13 +45,20 @@ export const SpeakerLayout = ({ ParticipantViewUIBar = DefaultParticipantViewUIB
             call.setSortParticipantsBy(callConfig.options.sortParticipantsBy || defaultSortPreset);
         };
     }, [call, isOneOnOneCall]);
+    let participantsWithAppliedLimit = otherParticipants;
+    if (typeof participantsBarLimit !== 'undefined') {
+        const hardLimitToApply = isVertical
+            ? hardLimit.vertical
+            : hardLimit.horizontal;
+        participantsWithAppliedLimit = otherParticipants.slice(0, 
+        // subtract 1 if speaker is sharing screen as
+        // that one is rendered independently from otherParticipants array
+        hardLimitToApply - (isSpeakerScreenSharing ? 1 : 0));
+    }
     if (!call)
         return null;
-    const isSpeakerScreenSharing = hasScreenShare(participantInSpotlight);
-    return (_jsx("div", Object.assign({ className: "str-video__speaker-layout__wrapper" }, { children: _jsxs("div", Object.assign({ className: clsx('str-video__speaker-layout', participantsBarPosition &&
-                `str-video__speaker-layout--variant-${participantsBarPosition}`) }, { children: [_jsx("div", Object.assign({ className: "str-video__speaker-layout__spotlight" }, { children: participantInSpotlight && (_jsx(ParticipantView, { participant: participantInSpotlight, muteAudio: isSpeakerScreenSharing, trackType: isSpeakerScreenSharing ? 'screenShareTrack' : 'videoTrack', ParticipantViewUI: ParticipantViewUISpotlight, VideoPlaceholder: VideoPlaceholder })) })), otherParticipants.length > 0 && participantsBarPosition && (_jsxs("div", Object.assign({ className: "str-video__speaker-layout__participants-bar-buttons-wrapper" }, { children: [_jsx("div", Object.assign({ className: "str-video__speaker-layout__participants-bar-wrapper", ref: setScrollWrapper }, { children: _jsxs("div", Object.assign({ className: "str-video__speaker-layout__participants-bar" }, { children: [isSpeakerScreenSharing && (_jsx("div", Object.assign({ className: "str-video__speaker-layout__participant-tile" }, { children: _jsx(ParticipantView, { participant: participantInSpotlight, ParticipantViewUI: ParticipantViewUIBar, VideoPlaceholder: VideoPlaceholder }) }), participantInSpotlight.sessionId)), otherParticipants.map((participant) => (_jsx("div", Object.assign({ className: "str-video__speaker-layout__participant-tile" }, { children: _jsx(ParticipantView, { participant: participant, ParticipantViewUI: ParticipantViewUIBar, VideoPlaceholder: VideoPlaceholder }) }), participant.sessionId)))] })) })), (participantsBarPosition === 'left' ||
-                            participantsBarPosition === 'right') && (_jsx(VerticalScrollButtons, { scrollWrapper: scrollWrapper })), (participantsBarPosition === 'top' ||
-                            participantsBarPosition === 'bottom') && (_jsx(HorizontalScrollButtons, { scrollWrapper: scrollWrapper }))] })))] })) })));
+    return (_jsxs("div", Object.assign({ className: "str-video__speaker-layout__wrapper" }, { children: [remoteParticipants.map((participant) => (_jsx(Audio, { participant: participant }, participant.sessionId))), _jsxs("div", Object.assign({ className: clsx('str-video__speaker-layout', participantsBarPosition &&
+                    `str-video__speaker-layout--variant-${participantsBarPosition}`) }, { children: [_jsx("div", Object.assign({ className: "str-video__speaker-layout__spotlight" }, { children: participantInSpotlight && (_jsx(ParticipantView, { participant: participantInSpotlight, muteAudio: true, trackType: isSpeakerScreenSharing ? 'screenShareTrack' : 'videoTrack', ParticipantViewUI: ParticipantViewUISpotlight, VideoPlaceholder: VideoPlaceholder })) })), participantsWithAppliedLimit.length > 0 && participantsBarPosition && (_jsxs("div", Object.assign({ ref: setButtonsWrapperElement, className: "str-video__speaker-layout__participants-bar-buttons-wrapper" }, { children: [_jsx("div", Object.assign({ className: "str-video__speaker-layout__participants-bar-wrapper", ref: setParticipantsBarWrapperElement }, { children: _jsxs("div", Object.assign({ ref: setParticipantsBarElement, className: "str-video__speaker-layout__participants-bar" }, { children: [isSpeakerScreenSharing && (_jsx("div", Object.assign({ className: "str-video__speaker-layout__participant-tile" }, { children: _jsx(ParticipantView, { participant: participantInSpotlight, ParticipantViewUI: ParticipantViewUIBar, VideoPlaceholder: VideoPlaceholder, muteAudio: true }) }), participantInSpotlight.sessionId)), participantsWithAppliedLimit.map((participant) => (_jsx("div", Object.assign({ className: "str-video__speaker-layout__participant-tile" }, { children: _jsx(ParticipantView, { participant: participant, ParticipantViewUI: ParticipantViewUIBar, VideoPlaceholder: VideoPlaceholder, muteAudio: true }) }), participant.sessionId)))] })) })), isVertical && (_jsx(VerticalScrollButtons, { scrollWrapper: participantsBarWrapperElement })), isHorizontal && (_jsx(HorizontalScrollButtons, { scrollWrapper: participantsBarWrapperElement }))] })))] }))] })));
 };
 const HorizontalScrollButtons = ({ scrollWrapper, }) => {
     const scrollPosition = useHorizontalScrollPosition(scrollWrapper);

package/dist/src/core/components/CallLayout/SpeakerLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"SpeakerLayout.js","sourceRoot":"","sources":["../../../../../src/core/components/CallLayout/SpeakerLayout.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"SpeakerLayout.js","sourceRoot":"","sources":["../../../../../src/core/components/CallLayout/SpeakerLayout.tsx"],"names":[],"mappings":"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"}

package/dist/src/core/hooks/useCalculateHardLimit.d.ts

@@ -0,0 +1,4 @@
+export declare const useCalculateHardLimit: (wrapperElement: HTMLDivElement | null, hostElement: HTMLDivElement | null, limit?: 'dynamic' | number) => {
+    vertical: number;
+    horizontal: number;
+};

package/dist/src/core/hooks/useCalculateHardLimit.js

@@ -0,0 +1,56 @@
+import { useEffect, useState } from 'react';
+export const useCalculateHardLimit = (
+/**
+ * Element that stretches to 100% of the whole layout component
+ */
+wrapperElement, 
+/**
+ * Element that directly hosts individual `ParticipantView` (or wrapper) elements
+ */
+hostElement, limit) => {
+    const [calculatedLimit, setCalculatedLimit] = useState({
+        vertical: typeof limit === 'number' ? limit : 1,
+        horizontal: typeof limit === 'number' ? limit : 1,
+    });
+    useEffect(() => {
+        if (!hostElement ||
+            !wrapperElement ||
+            typeof limit === 'number' ||
+            typeof limit === 'undefined')
+            return;
+        let childWidth = null;
+        let childHeight = null;
+        const resizeObserver = new ResizeObserver((entries, observer) => {
+            // this part should ideally run as little times as possible
+            // get child measurements and disconnect
+            // does not consider dynamically sized children
+            // this hook is for SpeakerLayout use only, where children in the bar are fixed size
+            if (entries.length > 1) {
+                const child = hostElement.firstChild;
+                if (child) {
+                    childHeight = child.clientHeight;
+                    childWidth = child.clientWidth;
+                    observer.unobserve(hostElement);
+                }
+            }
+            // keep the state at { vertical: 1, horizontal: 1 }
+            // until we get the proper child measurements
+            if (childHeight === null || childWidth === null)
+                return;
+            const vertical = Math.floor(wrapperElement.clientHeight / childHeight);
+            const horizontal = Math.floor(wrapperElement.clientWidth / childWidth);
+            setCalculatedLimit((pv) => {
+                if (pv.vertical !== vertical || pv.horizontal !== horizontal)
+                    return { vertical, horizontal };
+                return pv;
+            });
+        });
+        resizeObserver.observe(wrapperElement);
+        resizeObserver.observe(hostElement);
+        return () => {
+            resizeObserver.disconnect();
+        };
+    }, [hostElement, limit, wrapperElement]);
+    return calculatedLimit;
+};
+//# sourceMappingURL=useCalculateHardLimit.js.map

package/dist/src/core/hooks/useCalculateHardLimit.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCalculateHardLimit.js","sourceRoot":"","sources":["../../../../src/core/hooks/useCalculateHardLimit.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE5C,MAAM,CAAC,MAAM,qBAAqB,GAAG;AACnC;;GAEG;AACH,cAAqC;AACrC;;GAEG;AACH,WAAkC,EAClC,KAA0B,EAC1B,EAAE;IACF,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAGnD;QACD,QAAQ,EAAE,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;QAC/C,UAAU,EAAE,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;KAClD,CAAC,CAAC;IAEH,SAAS,CAAC,GAAG,EAAE;QACb,IACE,CAAC,WAAW;YACZ,CAAC,cAAc;YACf,OAAO,KAAK,KAAK,QAAQ;YACzB,OAAO,KAAK,KAAK,WAAW;YAE5B,OAAO;QAET,IAAI,UAAU,GAAkB,IAAI,CAAC;QACrC,IAAI,WAAW,GAAkB,IAAI,CAAC;QAEtC,MAAM,cAAc,GAAG,IAAI,cAAc,CAAC,CAAC,OAAO,EAAE,QAAQ,EAAE,EAAE;YAC9D,2DAA2D;YAC3D,wCAAwC;YACxC,+CAA+C;YAC/C,oFAAoF;YACpF,IAAI,OAAO,CAAC,MAAM,GAAG,CAAC,EAAE;gBACtB,MAAM,KAAK,GAAG,WAAW,CAAC,UAAgC,CAAC;gBAE3D,IAAI,KAAK,EAAE;oBACT,WAAW,GAAG,KAAK,CAAC,YAAY,CAAC;oBACjC,UAAU,GAAG,KAAK,CAAC,WAAW,CAAC;oBAC/B,QAAQ,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;iBACjC;aACF;YAED,mDAAmD;YACnD,6CAA6C;YAC7C,IAAI,WAAW,KAAK,IAAI,IAAI,UAAU,KAAK,IAAI;gBAAE,OAAO;YAExD,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,YAAY,GAAG,WAAW,CAAC,CAAC;YACvE,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,GAAG,UAAU,CAAC,CAAC;YAEvE,kBAAkB,CAAC,CAAC,EAAE,EAAE,EAAE;gBACxB,IAAI,EAAE,CAAC,QAAQ,KAAK,QAAQ,IAAI,EAAE,CAAC,UAAU,KAAK,UAAU;oBAC1D,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,CAAC;gBAClC,OAAO,EAAE,CAAC;YACZ,CAAC,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;QAEH,cAAc,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC;QACvC,cAAc,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC;QAEpC,OAAO,GAAG,EAAE;YACV,cAAc,CAAC,UAAU,EAAE,CAAC;QAC9B,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,WAAW,EAAE,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC;IAEzC,OAAO,eAAe,CAAC;AACzB,CAAC,CAAC"}

package/dist/src/translations/en.json

@@ -59,6 +59,9 @@
     "Leave": "Leave",
     "{{ direction }} fullscreen": "{{ direction }} fullscreen",
     "{{ direction }} picture-in-picture": "{{ direction }} picture-in-picture",
+    "Participants": "Participants",
+    "Anonymous": ", and ({{ count }}) anonymous",
+    "No participants found": "No participants found",
     "Participants ({{ numberOfParticipants }})": "Participants ({{ numberOfParticipants }})",
     "{{ userName }} is sharing their screen": "{{ userName }} is sharing their screen",
     "{{ userName }} is requesting to speak": "{{ userName }} is requesting to speak",

package/dist/src/translations/index.d.ts

@@ -60,6 +60,9 @@ export declare const translations: {
         Leave: string;
         "{{ direction }} fullscreen": string;
         "{{ direction }} picture-in-picture": string;
+        Participants: string;
+        Anonymous: string;
+        "No participants found": string;
         "Participants ({{ numberOfParticipants }})": string;
         "{{ userName }} is sharing their screen": string;
         "{{ userName }} is requesting to speak": string;

package/dist/version.d.ts

@@ -1 +1 @@
-export declare const version = "0.3.27";
+export declare const version = "0.3.29";

package/dist/version.js

@@ -1,2 +1,2 @@
-export const version = '0.3.27';
+export const version = '0.3.29';
 //# sourceMappingURL=version.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stream-io/video-react-sdk",
-  "version": "0.3.27",
+  "version": "0.3.29",
   "packageManager": "yarn@3.2.4",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -33,8 +33,8 @@
     "@nivo/core": "^0.80.0",
     "@nivo/line": "^0.80.0",
     "@stream-io/i18n": "^0.1.2",
-    "@stream-io/video-client": "^0.3.23",
-    "@stream-io/video-react-bindings": "^0.2.24",
+    "@stream-io/video-client": "^0.3.24",
+    "@stream-io/video-react-bindings": "^0.2.25",
     "clsx": "^1.2.1",
     "prop-types": "^15.8.1",
     "rxjs": "~7.8.1"
@@ -44,7 +44,7 @@
     "react-dom": "^18.0.0"
   },
   "devDependencies": {
-    "@stream-io/video-styling": "^0.1.8",
+    "@stream-io/video-styling": "^0.1.9",
     "@types/prop-types": "^15.7.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

package/src/components/CallParticipantsList/CallParticipantListHeader.tsx

@@ -1,4 +1,4 @@
-import { useCallStateHooks } from '@stream-io/video-react-bindings';
+import { useCallStateHooks, useI18n } from '@stream-io/video-react-bindings';
 
 export type CallParticipantListHeaderProps = {
   /** Click event listener function to be invoked in order to dismiss / hide the CallParticipantsList from the UI */
@@ -8,16 +8,23 @@ export type CallParticipantListHeaderProps = {
 export const CallParticipantListHeader = ({
   onClose,
 }: CallParticipantListHeaderProps) => {
-  const { useParticipants } = useCallStateHooks();
+  const { useParticipants, useAnonymousParticipantCount } = useCallStateHooks();
   const participants = useParticipants();
+  const anonymousParticipantCount = useAnonymousParticipantCount();
+  const { t } = useI18n();
 
   return (
     <div className="str-video__participant-list-header">
       <div className="str-video__participant-list-header__title">
-        Participants{' '}
+        {t('Participants')}{' '}
         <span className="str-video__participant-list-header__title-count">
           ({participants.length})
         </span>
+        {anonymousParticipantCount > 0 && (
+          <span className="str-video__participant-list-header__title-anonymous">
+            {t('Anonymous', { count: anonymousParticipantCount })}
+          </span>
+        )}
       </div>
       <button
         onClick={onClose}

package/src/components/CallParticipantsList/EmptyParticipantSearchList.tsx

@@ -1,7 +1,10 @@
+import { useI18n } from '@stream-io/video-react-bindings';
+
 export const EmptyParticipantSearchList = () => {
+  const { t } = useI18n();
   return (
     <div className="str-video__participant-list--empty">
-      No participants found
+      {t('No participants found')}
     </div>
   );
 };

package/src/core/components/CallLayout/PaginatedGridLayout.tsx

@@ -109,41 +109,37 @@ export const PaginatedGridLayout = ({
   if (!call) return null;
 
   return (
-    <>
+    <div className="str-video__paginated-grid-layout__wrapper">
       {remoteParticipants.map((participant) => (
         <Audio key={participant.sessionId} participant={participant} />
       ))}
-      <div className="str-video__paginated-grid-layout__wrapper">
-        <div className="str-video__paginated-grid-layout">
-          {pageArrowsVisible && pageCount > 1 && (
-            <IconButton
-              icon="caret-left"
-              disabled={page === 0}
-              onClick={() =>
-                setPage((currentPage) => Math.max(0, currentPage - 1))
-              }
-            />
-          )}
-          {selectedGroup && (
-            <PaginatedGridLayoutGroup
-              group={participantGroups[page]}
-              VideoPlaceholder={VideoPlaceholder}
-              ParticipantViewUI={ParticipantViewUI}
-            />
-          )}
-          {pageArrowsVisible && pageCount > 1 && (
-            <IconButton
-              disabled={page === pageCount - 1}
-              icon="caret-right"
-              onClick={() =>
-                setPage((currentPage) =>
-                  Math.min(pageCount - 1, currentPage + 1),
-                )
-              }
-            />
-          )}
-        </div>
+      <div className="str-video__paginated-grid-layout">
+        {pageArrowsVisible && pageCount > 1 && (
+          <IconButton
+            icon="caret-left"
+            disabled={page === 0}
+            onClick={() =>
+              setPage((currentPage) => Math.max(0, currentPage - 1))
+            }
+          />
+        )}
+        {selectedGroup && (
+          <PaginatedGridLayoutGroup
+            group={participantGroups[page]}
+            VideoPlaceholder={VideoPlaceholder}
+            ParticipantViewUI={ParticipantViewUI}
+          />
+        )}
+        {pageArrowsVisible && pageCount > 1 && (
+          <IconButton
+            disabled={page === pageCount - 1}
+            icon="caret-right"
+            onClick={() =>
+              setPage((currentPage) => Math.min(pageCount - 1, currentPage + 1))
+            }
+          />
+        )}
       </div>
-    </>
+    </div>
   );
 };

package/src/core/components/CallLayout/SpeakerLayout.tsx

@@ -1,5 +1,4 @@
 import { useEffect, useState } from 'react';
-
 import {
   CallTypes,
   combineComparators,
@@ -11,6 +10,7 @@ import {
   StreamVideoParticipant,
 } from '@stream-io/video-client';
 import { useCall, useCallStateHooks } from '@stream-io/video-react-bindings';
+import clsx from 'clsx';
 
 import {
   DefaultParticipantViewUI,
@@ -22,7 +22,8 @@ import {
   useHorizontalScrollPosition,
   useVerticalScrollPosition,
 } from '../../../hooks';
-import clsx from 'clsx';
+import { useCalculateHardLimit } from '../../hooks/useCalculateHardLimit';
+import { Audio } from '../Audio';
 
 export type SpeakerLayoutProps = {
   ParticipantViewUISpotlight?: ParticipantViewProps['ParticipantViewUI'];
@@ -32,6 +33,11 @@ export type SpeakerLayoutProps = {
    * Providing `null` will hide the bar.
    */
   participantsBarPosition?: 'top' | 'bottom' | 'left' | 'right' | null;
+  /**
+   * Hard limits the number of the participants rendered in the participants bar.
+   * Providing string `dynamic` will calculate hard limit based on screen width/height.
+   */
+  participantsBarLimit?: 'dynamic' | number;
 } & Pick<ParticipantViewProps, 'VideoPlaceholder'>;
 
 const DefaultParticipantViewUIBar = () => (
@@ -45,21 +51,38 @@ export const SpeakerLayout = ({
   ParticipantViewUISpotlight = DefaultParticipantViewUISpotlight,
   VideoPlaceholder,
   participantsBarPosition = 'bottom',
+  participantsBarLimit,
 }: SpeakerLayoutProps) => {
   const call = useCall();
-  const { useParticipants } = useCallStateHooks();
+  const { useParticipants, useRemoteParticipants } = useCallStateHooks();
   const [participantInSpotlight, ...otherParticipants] = useParticipants();
-  const [scrollWrapper, setScrollWrapper] = useState<HTMLDivElement | null>(
-    null,
+  const remoteParticipants = useRemoteParticipants();
+  const [participantsBarWrapperElement, setParticipantsBarWrapperElement] =
+    useState<HTMLDivElement | null>(null);
+  const [participantsBarElement, setParticipantsBarElement] =
+    useState<HTMLDivElement | null>(null);
+  const [buttonsWrapperElement, setButtonsWrapperElement] =
+    useState<HTMLDivElement | null>(null);
+
+  const isSpeakerScreenSharing = hasScreenShare(participantInSpotlight);
+  const hardLimit = useCalculateHardLimit(
+    buttonsWrapperElement,
+    participantsBarElement,
+    participantsBarLimit,
   );
+
+  const isVertical =
+    participantsBarPosition === 'left' || participantsBarPosition === 'right';
+  const isHorizontal =
+    participantsBarPosition === 'top' || participantsBarPosition === 'bottom';
   const isOneOnOneCall = otherParticipants.length === 1;
 
   useEffect(() => {
-    if (!scrollWrapper || !call) return;
+    if (!participantsBarWrapperElement || !call) return;
 
-    const cleanup = call.setViewport(scrollWrapper);
+    const cleanup = call.setViewport(participantsBarWrapperElement);
     return () => cleanup();
-  }, [scrollWrapper, call]);
+  }, [participantsBarWrapperElement, call]);
 
   useEffect(() => {
     if (!call) return;
@@ -79,11 +102,28 @@ export const SpeakerLayout = ({
     };
   }, [call, isOneOnOneCall]);
 
+  let participantsWithAppliedLimit = otherParticipants;
+
+  if (typeof participantsBarLimit !== 'undefined') {
+    const hardLimitToApply = isVertical
+      ? hardLimit.vertical
+      : hardLimit.horizontal;
+
+    participantsWithAppliedLimit = otherParticipants.slice(
+      0,
+      // subtract 1 if speaker is sharing screen as
+      // that one is rendered independently from otherParticipants array
+      hardLimitToApply - (isSpeakerScreenSharing ? 1 : 0),
+    );
+  }
+
   if (!call) return null;
 
-  const isSpeakerScreenSharing = hasScreenShare(participantInSpotlight);
   return (
     <div className="str-video__speaker-layout__wrapper">
+      {remoteParticipants.map((participant) => (
+        <Audio key={participant.sessionId} participant={participant} />
+      ))}
       <div
         className={clsx(
           'str-video__speaker-layout',
@@ -95,7 +135,7 @@ export const SpeakerLayout = ({
           {participantInSpotlight && (
             <ParticipantView
               participant={participantInSpotlight}
-              muteAudio={isSpeakerScreenSharing}
+              muteAudio={true}
               trackType={
                 isSpeakerScreenSharing ? 'screenShareTrack' : 'videoTrack'
               }
@@ -104,13 +144,19 @@ export const SpeakerLayout = ({
             />
           )}
         </div>
-        {otherParticipants.length > 0 && participantsBarPosition && (
-          <div className="str-video__speaker-layout__participants-bar-buttons-wrapper">
+        {participantsWithAppliedLimit.length > 0 && participantsBarPosition && (
+          <div
+            ref={setButtonsWrapperElement}
+            className="str-video__speaker-layout__participants-bar-buttons-wrapper"
+          >
             <div
               className="str-video__speaker-layout__participants-bar-wrapper"
-              ref={setScrollWrapper}
+              ref={setParticipantsBarWrapperElement}
             >
-              <div className="str-video__speaker-layout__participants-bar">
+              <div
+                ref={setParticipantsBarElement}
+                className="str-video__speaker-layout__participants-bar"
+              >
                 {isSpeakerScreenSharing && (
                   <div
                     className="str-video__speaker-layout__participant-tile"
@@ -120,10 +166,11 @@ export const SpeakerLayout = ({
                       participant={participantInSpotlight}
                       ParticipantViewUI={ParticipantViewUIBar}
                       VideoPlaceholder={VideoPlaceholder}
+                      muteAudio={true}
                     />
                   </div>
                 )}
-                {otherParticipants.map((participant) => (
+                {participantsWithAppliedLimit.map((participant) => (
                   <div
                     className="str-video__speaker-layout__participant-tile"
                     key={participant.sessionId}
@@ -132,18 +179,21 @@ export const SpeakerLayout = ({
                       participant={participant}
                       ParticipantViewUI={ParticipantViewUIBar}
                       VideoPlaceholder={VideoPlaceholder}
+                      muteAudio={true}
                     />
                   </div>
                 ))}
               </div>
             </div>
-            {(participantsBarPosition === 'left' ||
-              participantsBarPosition === 'right') && (
-              <VerticalScrollButtons scrollWrapper={scrollWrapper} />
+            {isVertical && (
+              <VerticalScrollButtons
+                scrollWrapper={participantsBarWrapperElement}
+              />
             )}
-            {(participantsBarPosition === 'top' ||
-              participantsBarPosition === 'bottom') && (
-              <HorizontalScrollButtons scrollWrapper={scrollWrapper} />
+            {isHorizontal && (
+              <HorizontalScrollButtons
+                scrollWrapper={participantsBarWrapperElement}
+              />
             )}
           </div>
         )}

package/src/core/hooks/useCalculateHardLimit.ts

@@ -0,0 +1,72 @@
+import { useEffect, useState } from 'react';
+
+export const useCalculateHardLimit = (
+  /**
+   * Element that stretches to 100% of the whole layout component
+   */
+  wrapperElement: HTMLDivElement | null,
+  /**
+   * Element that directly hosts individual `ParticipantView` (or wrapper) elements
+   */
+  hostElement: HTMLDivElement | null,
+  limit?: 'dynamic' | number,
+) => {
+  const [calculatedLimit, setCalculatedLimit] = useState<{
+    vertical: number;
+    horizontal: number;
+  }>({
+    vertical: typeof limit === 'number' ? limit : 1,
+    horizontal: typeof limit === 'number' ? limit : 1,
+  });
+
+  useEffect(() => {
+    if (
+      !hostElement ||
+      !wrapperElement ||
+      typeof limit === 'number' ||
+      typeof limit === 'undefined'
+    )
+      return;
+
+    let childWidth: number | null = null;
+    let childHeight: number | null = null;
+
+    const resizeObserver = new ResizeObserver((entries, observer) => {
+      // this part should ideally run as little times as possible
+      // get child measurements and disconnect
+      // does not consider dynamically sized children
+      // this hook is for SpeakerLayout use only, where children in the bar are fixed size
+      if (entries.length > 1) {
+        const child = hostElement.firstChild as HTMLElement | null;
+
+        if (child) {
+          childHeight = child.clientHeight;
+          childWidth = child.clientWidth;
+          observer.unobserve(hostElement);
+        }
+      }
+
+      // keep the state at { vertical: 1, horizontal: 1 }
+      // until we get the proper child measurements
+      if (childHeight === null || childWidth === null) return;
+
+      const vertical = Math.floor(wrapperElement.clientHeight / childHeight);
+      const horizontal = Math.floor(wrapperElement.clientWidth / childWidth);
+
+      setCalculatedLimit((pv) => {
+        if (pv.vertical !== vertical || pv.horizontal !== horizontal)
+          return { vertical, horizontal };
+        return pv;
+      });
+    });
+
+    resizeObserver.observe(wrapperElement);
+    resizeObserver.observe(hostElement);
+
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [hostElement, limit, wrapperElement]);
+
+  return calculatedLimit;
+};

package/src/translations/en.json

@@ -63,6 +63,10 @@
   "{{ direction }} fullscreen": "{{ direction }} fullscreen",
   "{{ direction }} picture-in-picture": "{{ direction }} picture-in-picture",
 
+  "Participants": "Participants",
+  "Anonymous": ", and ({{ count }}) anonymous",
+  "No participants found": "No participants found",
+
   "Participants ({{ numberOfParticipants }})": "Participants ({{ numberOfParticipants }})",
   "{{ userName }} is sharing their screen": "{{ userName }} is sharing their screen",
   "{{ userName }} is requesting to speak": "{{ userName }} is requesting to speak",