@stream-io/video-react-sdk 0.0.1-alpha.93 → 0.0.1-alpha.95

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (27) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/dist/css/styles.css +49 -22
  3. package/dist/css/styles.css.map +1 -1
  4. package/dist/src/components/StreamCall/CallParticipantsScreenView.js +1 -1
  5. package/dist/src/components/StreamCall/CallParticipantsScreenView.js.map +1 -1
  6. package/dist/src/core/components/CallLayout/SpeakerLayout.d.ts +2 -1
  7. package/dist/src/core/components/CallLayout/SpeakerLayout.js +27 -11
  8. package/dist/src/core/components/CallLayout/SpeakerLayout.js.map +1 -1
  9. package/dist/src/hooks/index.d.ts +1 -0
  10. package/dist/src/hooks/index.js +1 -0
  11. package/dist/src/hooks/index.js.map +1 -1
  12. package/dist/src/hooks/useFloatingUIPreset.js +3 -2
  13. package/dist/src/hooks/useFloatingUIPreset.js.map +1 -1
  14. package/dist/src/{components/StreamCall/hooks → hooks}/useScrollPosition.d.ts +2 -2
  15. package/dist/src/{components/StreamCall/hooks → hooks}/useScrollPosition.js +9 -9
  16. package/dist/src/hooks/useScrollPosition.js.map +1 -0
  17. package/package.json +5 -5
  18. package/src/components/StreamCall/CallParticipantsScreenView.tsx +1 -1
  19. package/src/core/components/CallLayout/SpeakerLayout.tsx +88 -25
  20. package/src/hooks/index.ts +1 -0
  21. package/src/hooks/useFloatingUIPreset.ts +3 -1
  22. package/src/{components/StreamCall/hooks → hooks}/useScrollPosition.ts +9 -9
  23. package/dist/src/components/StreamCall/hooks/index.d.ts +0 -1
  24. package/dist/src/components/StreamCall/hooks/index.js +0 -2
  25. package/dist/src/components/StreamCall/hooks/index.js.map +0 -1
  26. package/dist/src/components/StreamCall/hooks/useScrollPosition.js.map +0 -1
  27. package/src/components/StreamCall/hooks/index.ts +0 -1
package/CHANGELOG.md CHANGED
@@ -2,6 +2,19 @@
2
2
 
3
3
  This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
4
4
 
5
+ ## [0.0.1-alpha.95](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.0.1-alpha.94...@stream-io/video-react-sdk-0.0.1-alpha.95) (2023-05-30)
6
+
7
+
8
+
9
+ ## [0.0.1-alpha.94](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.0.1-alpha.93...@stream-io/video-react-sdk-0.0.1-alpha.94) (2023-05-30)
10
+
11
+
12
+ ### Features
13
+
14
+ * **react-sdk:** SpeakerLayout participant bar position property ([#559](https://github.com/GetStream/stream-video-js/issues/559)) ([c79292f](https://github.com/GetStream/stream-video-js/commit/c79292ff44bcad601b31a7e6ea49901eea5c9c22))
15
+
16
+
17
+
5
18
  ## [0.0.1-alpha.93](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.0.1-alpha.92...@stream-io/video-react-sdk-0.0.1-alpha.93) (2023-05-30)
6
19
 
7
20
 
@@ -1693,6 +1693,10 @@
1693
1693
  transform: scaleX(-1);
1694
1694
  }
1695
1695
 
1696
+ .str-video__video {
1697
+ background-color: var(--str-video__background-color5);
1698
+ }
1699
+
1696
1700
  .str-video__video-placeholder {
1697
1701
  aspect-ratio: 4/3;
1698
1702
  height: 100%;
@@ -1989,17 +1993,10 @@
1989
1993
  justify-content: center;
1990
1994
  min-height: 0;
1991
1995
  }
1992
- .str-video__speaker-layout .str-video__speaker-layout__spotlight .str-video__participant-view {
1993
- width: 100%;
1994
- max-width: 110vh;
1995
- }
1996
1996
  .str-video__speaker-layout .str-video__speaker-layout__spotlight .str-video__participant-view--speaking:has(.str-video__video--screen-share) {
1997
1997
  outline: none;
1998
1998
  }
1999
- .str-video__speaker-layout .str-video__speaker-layout__spotlight .str-video__participant-view:has(.str-video__video--screen-share) {
2000
- border-radius: unset;
2001
- }
2002
- .str-video__speaker-layout .str-video__speaker-layout__spotlight .str-video__video--screen-share {
1999
+ .str-video__speaker-layout .str-video__speaker-layout__spotlight .str-video__video {
2003
2000
  object-fit: contain;
2004
2001
  }
2005
2002
  .str-video__speaker-layout .str-video__speaker-layout__spotlight .str-video__participant-details,
@@ -2009,29 +2006,30 @@
2009
2006
  .str-video__speaker-layout .str-video__speaker-layout__participants-bar-buttons-wrapper {
2010
2007
  position: relative;
2011
2008
  display: flex;
2012
- align-items: center;
2013
2009
  justify-content: center;
2010
+ align-items: center;
2011
+ }
2012
+ .str-video__speaker-layout .str-video__speaker-layout__participants-bar-buttons-wrapper > .str-video__call-controls__button .str-video__icon {
2013
+ width: 1rem;
2014
+ height: 1rem;
2014
2015
  }
2015
2016
  .str-video__speaker-layout .str-video__speaker-layout__participants-bar-buttons-wrapper .str-video__speaker-layout__participants-bar--button-left {
2016
2017
  position: absolute;
2017
2018
  left: 0.5rem;
2018
- z-index: 1;
2019
- }
2020
- .str-video__speaker-layout .str-video__speaker-layout__participants-bar-buttons-wrapper .str-video__speaker-layout__participants-bar--button-left .str-video__call-controls__button--icon {
2021
- width: 0.8rem;
2022
- height: 0.8rem;
2023
2019
  }
2024
2020
  .str-video__speaker-layout .str-video__speaker-layout__participants-bar-buttons-wrapper .str-video__speaker-layout__participants-bar--button-right {
2025
2021
  position: absolute;
2026
2022
  right: 0.5rem;
2027
- z-index: 1;
2028
2023
  }
2029
- .str-video__speaker-layout .str-video__speaker-layout__participants-bar-buttons-wrapper .str-video__speaker-layout__participants-bar--button-right .str-video__call-controls__button--icon {
2030
- width: 0.8rem;
2031
- height: 0.8rem;
2024
+ .str-video__speaker-layout .str-video__speaker-layout__participants-bar-buttons-wrapper .str-video__speaker-layout__participants-bar--button-top {
2025
+ position: absolute;
2026
+ top: 0.5rem;
2027
+ }
2028
+ .str-video__speaker-layout .str-video__speaker-layout__participants-bar-buttons-wrapper .str-video__speaker-layout__participants-bar--button-bottom {
2029
+ position: absolute;
2030
+ bottom: 0.5rem;
2032
2031
  }
2033
2032
  .str-video__speaker-layout .str-video__speaker-layout__participants-bar-wrapper {
2034
- overflow-x: auto;
2035
2033
  scrollbar-width: none;
2036
2034
  }
2037
2035
  .str-video__speaker-layout .str-video__speaker-layout__participants-bar-wrapper::-webkit-scrollbar {
@@ -2039,15 +2037,44 @@
2039
2037
  }
2040
2038
  .str-video__speaker-layout .str-video__speaker-layout__participants-bar-wrapper .str-video__speaker-layout__participants-bar {
2041
2039
  display: flex;
2042
- flex-direction: row;
2043
2040
  align-items: center;
2044
2041
  }
2045
2042
  .str-video__speaker-layout .str-video__speaker-layout__participants-bar-wrapper .str-video__speaker-layout__participants-bar .str-video__speaker-layout__participant-tile {
2046
2043
  width: 280px;
2047
2044
  min-width: 280px;
2048
2045
  max-width: 25vh;
2049
- padding-inline: 5px;
2050
- padding-block: 2px;
2046
+ padding: 5px;
2047
+ }
2048
+ .str-video__speaker-layout--variant-top {
2049
+ flex-direction: column-reverse;
2050
+ }
2051
+ .str-video__speaker-layout--variant-left {
2052
+ flex-direction: row-reverse;
2053
+ }
2054
+ .str-video__speaker-layout--variant-right {
2055
+ flex-direction: row;
2056
+ }
2057
+ .str-video__speaker-layout--variant-left .str-video__speaker-layout__participants-bar-wrapper, .str-video__speaker-layout--variant-right .str-video__speaker-layout__participants-bar-wrapper {
2058
+ overflow-y: auto;
2059
+ max-height: 100%;
2060
+ }
2061
+ .str-video__speaker-layout--variant-left .str-video__speaker-layout__participants-bar, .str-video__speaker-layout--variant-right .str-video__speaker-layout__participants-bar {
2062
+ flex-direction: column;
2063
+ }
2064
+ .str-video__speaker-layout--variant-left .str-video__speaker-layout__spotlight, .str-video__speaker-layout--variant-right .str-video__speaker-layout__spotlight {
2065
+ width: 100%;
2066
+ }
2067
+ .str-video__speaker-layout--variant-left .str-video__participant-view, .str-video__speaker-layout--variant-right .str-video__participant-view {
2068
+ max-width: unset;
2069
+ }
2070
+ .str-video__speaker-layout--variant-top .str-video__speaker-layout__participants-bar-wrapper, .str-video__speaker-layout--variant-bottom .str-video__speaker-layout__participants-bar-wrapper {
2071
+ overflow-x: auto;
2072
+ }
2073
+ .str-video__speaker-layout--variant-top .str-video__speaker-layout__participants-bar, .str-video__speaker-layout--variant-bottom .str-video__speaker-layout__participants-bar {
2074
+ flex-direction: row;
2075
+ }
2076
+ .str-video__speaker-layout--variant-top .str-video__participant-view, .str-video__speaker-layout--variant-bottom .str-video__participant-view {
2077
+ max-width: 110vh;
2051
2078
  }
2052
2079
 
2053
2080
  .str-video__icon {
@@ -1 +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/CallParticipantsScreenView.scss","../../src/CallParticipantsView.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/PendingCallPanel/PendingCallPanel-layout.scss","../../src/PendingCallPanel/PendingCallPanel-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/VideoPlaceholder-layout.scss","../../src/Video/VideoPlaceholder-theme.scss","../../src/VideoPreview/VideoPreview-layout.scss","../../src/VideoPreview/VideoPreview-theme.scss","../../src/ParticipantView/ParticipantView-layout.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;;;ACvEF;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;;;ACfN;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AACA;EACE;;AAGF;EACE;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAGJ;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAKN;EACE;;;ACzFJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEF;EACE;EACA;;AAEF;EACE;EACA;;AAEF;EACE;EACA;;AAEF;EACE;EACA;;AAEF;EACE;EACA;;AAEF;EACE;EACA;;AAEF;EACE;EACA;;AAEF;EACE;EACA;;AAEF;EACE;EACA;;AAEF;EACE;EACA;;AAEF;EACE;EACA;;AAOA;EACE;EACA;;AAFF;EACE;EACA;;AAFF;EACE;EACA;;AAFF;EACE;EACA;;AAFF;EACE;EACA;;AAFF;EACE;EACA;;AAFF;EACE;EACA;;AAFF;EACE;EACA;;AAFF;EACE;EACA;;AAFF;EACE;EACA;;AAFF;EACE;EACA;;AAFF;EACE;EACA;;AAFF;EACE;EACA;;AAFF;EACE;EACA;;AAFF;EACE;EACA;;AAFF;EACE;EACA;;AAFF;EACE;EACA;;AAFF;EACE;EACA;;AAFF;EACE;EACA;;AAFF;EACE;EACA;;AAFF;EACE;EACA;;AAFF;EACE;EACA;;AAFF;EACE;EACA;;AAFF;EACE;EACA;;AAFF;EACE;EACA;;AAFF;EACE;EACA;;AAFF;EACE;EACA;;AAFF;EACE;EACA;;AAFF;EACE;EACA;;AAFF;EACE;EACA;;AAFF;EACE;EACA;;AAFF;EACE;EACA;;AAFF;EACE;EACA;;AAFF;EACE;EACA;;AAFF;EACE;EACA;;AAFF;EACE;EACA;;AAFF;EACE;EACA;;AAFF;EACE;EACA;;;ACjEN;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AACA;EACE;;AAEF;EACE;EACA;;AACA;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;;;AC1GJ;EACE;AAAA;AAAA;EAGA;AAAA;AAAA;EAIA;EAEA;AAAA;AAAA;EAIA;EACA;AAAA;AAAA;EAIA;;;AAGF;EPFE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AOFA;EPLA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EOAE;EACA;;AAGF;EPXA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AOUA;EPjBA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AOeE;EPlCF,YOoCM;EPnCN,oBOmCM;EPlCN;EACA;EACA;EACA;EACA,WOkCM;EPjCN,mBOiCM;EPhCN,kBO6BM;;AAQN;EACE;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EP5DJ,YO8DU;EP7DV,oBO6DU;EP5DV;EACA;EACA;EACA;EACA,WO0DU;EPzDV,mBOyDU;EPxDV,kBOuDU;;;ACvEZ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;ERbA;EACA;EAEA;EACA;EACA;;AQYA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;;ACvBJ;EACE;;AAIA;ETEF;EACA,oBSDQ;ETER;EACA;EACA;EACA;EACA,WSJQ;ETKR,mBSLQ;ETMR,kBSPQ;;AAKN;ETNF,YSQQ;ETPR,oBSOQ;ETNR;EACA;EACA;EACA;EACA,WSIQ;ETHR,mBSGQ;ETFR,kBSCQ;;AAKN;ETdF,YSgBQ;ETfR,oBSeQ;ETdR;EACA;EACA;EACA;EACA,WSYQ;ETXR,mBSWQ;ETVR,kBSSQ;;AAKN;ETtBF,YSwBQ;ETvBR,oBSuBQ;ETtBR;EACA;EACA;EACA;EACA,WSoBQ;ETnBR,mBSmBQ;ETlBR,kBSiBQ;;AAKN;ET9BF,YSgCQ;ET/BR,oBS+BQ;ET9BR;EACA;EACA;EACA;EACA,WS4BQ;ET3BR,mBS2BQ;ET1BR,kBSyBQ;;;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;EVnGF;EACA;EAEA;EACA;EACA;;;AWJF;EACE;EACA;EACA;;;AAGF;EXEE;EACA,oBWDI;EXEJ;EACA;EACA;EACA;EACA,WWJI;EXKJ,mBWLI;EXMJ,kBWPI;;;AAKN;EACE;;;AAGF;EACE;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAGF;EXxBA,YW0BI;EXzBJ,oBWyBI;EXxBJ;EACA;EACA;EACA;EACA,WWsBI;EXrBJ,mBWqBI;EXpBJ,kBWmBI;;;AAMN;EXjCE,YWmCI;EXlCJ,oBWkCI;EXjCJ;EACA;EACA;EACA;EACA,WW+BI;EX9BJ,mBW8BI;EX7BJ,kBW4BI;;;AAMJ;EACE;EACA;;AAGA;EACE;;AAGF;EACE;EACA;;AAGF;EXxDF,YW0DQ;EXzDR,oBWyDQ;EXxDR;EACA;EACA;EACA;EACA,WWsDQ;EXrDR,mBWqDQ;EXpDR,kBWmDQ;;AAKN;EXhEF,YWkEQ;EXjER,oBWiEQ;EXhER;EACA;EACA;EACA;EACA,WW8DQ;EX7DR,mBW6DQ;EX5DR,kBW2DQ;;;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;EdAE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AcHF;EdJE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AcCF;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;EdxEA,Yc0EM;EdzEN,oBcyEM;EdxEN;EACA;EACA;EACA;EACA,WcsEM;EdrEN,mBcqEM;EdpEN,kBcmEM;;AAKN;EAEE;EACA;;;AAIJ;EACE;;;AClGF;EACE;EACA;EACA;;;ACDF;EhBQE,YgBNE;EhBOF,oBgBPE;EhBQF;EACA;EACA;EACA;EACA,WAPmD;EAQnD,mBARmD;EASnD,kBgBbE;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;EtBGA,YsBDI;EtBEJ,oBsBFI;EtBGJ;EACA;EACA;EACA;EACA,WsBLI;EtBMJ,mBsBNI;EtBOJ,kBsBRI;;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;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;;;ACdJ;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;E5BHE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;A4BDA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAIJ;E5B9BA,Y4BgCI;E5B/BJ,oB4B+BI;E5B9BJ;EACA;EACA;EACA;EACA,W4B4BI;E5B3BJ,mB4B2BI;E5B1BJ,kB4ByBI;;AAIJ;EACE;;AAEA;E5BxCF,Y4B0CM;E5BzCN,oB4ByCM;E5BxCN;EACA;EACA;EACA;EACA,W4BsCM;E5BrCN,mB4BqCM;E5BpCN,kB4BmCM;;;ACrDR;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;;ACnCJ;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;E/BNE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;E+BCA;EACA;;AAEA;EACE;;;AAIJ;EACE;EACA;EACA;EACA;;;AC1CF;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;;ACXJ;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;EpCXE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EoCMA;;;ACjCF;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;;AAEA;AAAA;EACE;;AAGF;AAAA;AAAA;AAAA;EAEE;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;;;AC9HR;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;EACE;EACA;;AAGF;EAGE;;AAGF;EACE;;AAGF;EACE;;AAGF;AAAA;EAEE;;AAIJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAGJ;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAKN;EACE;EACA;;AACA;EACE;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EAEA;EACA;;;ACjGR;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;;;AC/JJ;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"}
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/CallParticipantsScreenView.scss","../../src/CallParticipantsView.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/PendingCallPanel/PendingCallPanel-layout.scss","../../src/PendingCallPanel/PendingCallPanel-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/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;;;ACvEF;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;;;ACfN;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AACA;EACE;;AAGF;EACE;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAGJ;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAKN;EACE;;;ACzFJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEF;EACE;EACA;;AAEF;EACE;EACA;;AAEF;EACE;EACA;;AAEF;EACE;EACA;;AAEF;EACE;EACA;;AAEF;EACE;EACA;;AAEF;EACE;EACA;;AAEF;EACE;EACA;;AAEF;EACE;EACA;;AAEF;EACE;EACA;;AAEF;EACE;EACA;;AAOA;EACE;EACA;;AAFF;EACE;EACA;;AAFF;EACE;EACA;;AAFF;EACE;EACA;;AAFF;EACE;EACA;;AAFF;EACE;EACA;;AAFF;EACE;EACA;;AAFF;EACE;EACA;;AAFF;EACE;EACA;;AAFF;EACE;EACA;;AAFF;EACE;EACA;;AAFF;EACE;EACA;;AAFF;EACE;EACA;;AAFF;EACE;EACA;;AAFF;EACE;EACA;;AAFF;EACE;EACA;;AAFF;EACE;EACA;;AAFF;EACE;EACA;;AAFF;EACE;EACA;;AAFF;EACE;EACA;;AAFF;EACE;EACA;;AAFF;EACE;EACA;;AAFF;EACE;EACA;;AAFF;EACE;EACA;;AAFF;EACE;EACA;;AAFF;EACE;EACA;;AAFF;EACE;EACA;;AAFF;EACE;EACA;;AAFF;EACE;EACA;;AAFF;EACE;EACA;;AAFF;EACE;EACA;;AAFF;EACE;EACA;;AAFF;EACE;EACA;;AAFF;EACE;EACA;;AAFF;EACE;EACA;;AAFF;EACE;EACA;;AAFF;EACE;EACA;;AAFF;EACE;EACA;;;ACjEN;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AACA;EACE;;AAEF;EACE;EACA;;AACA;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;;;AC1GJ;EACE;AAAA;AAAA;EAGA;AAAA;AAAA;EAIA;EAEA;AAAA;AAAA;EAIA;EACA;AAAA;AAAA;EAIA;;;AAGF;EPFE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AOFA;EPLA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EOAE;EACA;;AAGF;EPXA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AOUA;EPjBA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AOeE;EPlCF,YOoCM;EPnCN,oBOmCM;EPlCN;EACA;EACA;EACA;EACA,WOkCM;EPjCN,mBOiCM;EPhCN,kBO6BM;;AAQN;EACE;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EP5DJ,YO8DU;EP7DV,oBO6DU;EP5DV;EACA;EACA;EACA;EACA,WO0DU;EPzDV,mBOyDU;EPxDV,kBOuDU;;;ACvEZ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;ERbA;EACA;EAEA;EACA;EACA;;AQYA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;;ACvBJ;EACE;;AAIA;ETEF;EACA,oBSDQ;ETER;EACA;EACA;EACA;EACA,WSJQ;ETKR,mBSLQ;ETMR,kBSPQ;;AAKN;ETNF,YSQQ;ETPR,oBSOQ;ETNR;EACA;EACA;EACA;EACA,WSIQ;ETHR,mBSGQ;ETFR,kBSCQ;;AAKN;ETdF,YSgBQ;ETfR,oBSeQ;ETdR;EACA;EACA;EACA;EACA,WSYQ;ETXR,mBSWQ;ETVR,kBSSQ;;AAKN;ETtBF,YSwBQ;ETvBR,oBSuBQ;ETtBR;EACA;EACA;EACA;EACA,WSoBQ;ETnBR,mBSmBQ;ETlBR,kBSiBQ;;AAKN;ET9BF,YSgCQ;ET/BR,oBS+BQ;ET9BR;EACA;EACA;EACA;EACA,WS4BQ;ET3BR,mBS2BQ;ET1BR,kBSyBQ;;;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;EVnGF;EACA;EAEA;EACA;EACA;;;AWJF;EACE;EACA;EACA;;;AAGF;EXEE;EACA,oBWDI;EXEJ;EACA;EACA;EACA;EACA,WWJI;EXKJ,mBWLI;EXMJ,kBWPI;;;AAKN;EACE;;;AAGF;EACE;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAGF;EXxBA,YW0BI;EXzBJ,oBWyBI;EXxBJ;EACA;EACA;EACA;EACA,WWsBI;EXrBJ,mBWqBI;EXpBJ,kBWmBI;;;AAMN;EXjCE,YWmCI;EXlCJ,oBWkCI;EXjCJ;EACA;EACA;EACA;EACA,WW+BI;EX9BJ,mBW8BI;EX7BJ,kBW4BI;;;AAMJ;EACE;EACA;;AAGA;EACE;;AAGF;EACE;EACA;;AAGF;EXxDF,YW0DQ;EXzDR,oBWyDQ;EXxDR;EACA;EACA;EACA;EACA,WWsDQ;EXrDR,mBWqDQ;EXpDR,kBWmDQ;;AAKN;EXhEF,YWkEQ;EXjER,oBWiEQ;EXhER;EACA;EACA;EACA;EACA,WW8DQ;EX7DR,mBW6DQ;EX5DR,kBW2DQ;;;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;EdAE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AcHF;EdJE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AcCF;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;EdxEA,Yc0EM;EdzEN,oBcyEM;EdxEN;EACA;EACA;EACA;EACA,WcsEM;EdrEN,mBcqEM;EdpEN,kBcmEM;;AAKN;EAEE;EACA;;;AAIJ;EACE;;;AClGF;EACE;EACA;EACA;;;ACDF;EhBQE,YgBNE;EhBOF,oBgBPE;EhBQF;EACA;EACA;EACA;EACA,WAPmD;EAQnD,mBARmD;EASnD,kBgBbE;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;EtBGA,YsBDI;EtBEJ,oBsBFI;EtBGJ;EACA;EACA;EACA;EACA,WsBLI;EtBMJ,mBsBNI;EtBOJ,kBsBRI;;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;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;;;ACdJ;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;E5BHE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;A4BDA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAIJ;E5B9BA,Y4BgCI;E5B/BJ,oB4B+BI;E5B9BJ;EACA;EACA;EACA;EACA,W4B4BI;E5B3BJ,mB4B2BI;E5B1BJ,kB4ByBI;;AAIJ;EACE;;AAEA;E5BxCF,Y4B0CM;E5BzCN,oB4ByCM;E5BxCN;EACA;EACA;EACA;EACA,W4BsCM;E5BrCN,mB4BqCM;E5BpCN,kB4BmCM;;;ACrDR;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;;ACnCJ;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;E/BNE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;E+BCA;EACA;;AAEA;EACE;;;AAIJ;EACE;EACA;EACA;EACA;;;AC1CF;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;;ACXJ;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;ErCXE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EqCMA;;;ACjCF;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;;AAEA;AAAA;EACE;;AAGF;AAAA;AAAA;AAAA;EAEE;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;;;AC9HR;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;;;AC/JJ;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"}
@@ -4,7 +4,7 @@ import { SfuModels } from '@stream-io/video-client';
4
4
  import { useLocalParticipant, useParticipants, } from '@stream-io/video-react-bindings';
5
5
  import { ParticipantView, DefaultParticipantViewUI } from '../../core';
6
6
  import { Video } from '../Video';
7
- import { useVerticalScrollPosition } from './hooks';
7
+ import { useVerticalScrollPosition } from '../../hooks';
8
8
  import { IconButton } from '../Button';
9
9
  export const CallParticipantsScreenView = (props) => {
10
10
  const { call } = props;
@@ -1 +1 @@
1
- {"version":3,"file":"CallParticipantsScreenView.js","sourceRoot":"","sources":["../../../../src/components/StreamCall/CallParticipantsScreenView.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"CallParticipantsScreenView.js","sourceRoot":"","sources":["../../../../src/components/StreamCall/CallParticipantsScreenView.tsx"],"names":[],"mappings":"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"}
@@ -3,5 +3,6 @@ import { ParticipantViewProps } from '../ParticipantView';
3
3
  export type SpeakerLayoutProps = {
4
4
  ParticipantViewUISpotlight?: ParticipantViewProps['ParticipantViewUI'];
5
5
  ParticipantViewUIBar?: ParticipantViewProps['ParticipantViewUI'];
6
+ participantsBarPosition?: 'top' | 'bottom' | 'left' | 'right';
6
7
  } & Pick<ParticipantViewProps, 'VideoPlaceholder'>;
7
- export declare const SpeakerLayout: ({ ParticipantViewUIBar, ParticipantViewUISpotlight, VideoPlaceholder, }: SpeakerLayoutProps) => JSX.Element | null;
8
+ export declare const SpeakerLayout: ({ ParticipantViewUIBar, ParticipantViewUISpotlight, VideoPlaceholder, participantsBarPosition, }: SpeakerLayoutProps) => JSX.Element | null;
@@ -1,25 +1,19 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
1
+ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
2
2
  import { useEffect, useState } from 'react';
3
3
  import { CallTypes, combineComparators, defaultSortPreset, screenSharing, SfuModels, speakerLayoutSortPreset, } from '@stream-io/video-client';
4
4
  import { useCall, useLocalParticipant, useParticipants, } from '@stream-io/video-react-bindings';
5
5
  import { DefaultParticipantViewUI, ParticipantView, } from '../ParticipantView';
6
6
  import { IconButton } from '../../../components';
7
- import { useHorizontalScrollPosition } from '../../../components/StreamCall/hooks';
7
+ import { useHorizontalScrollPosition, useVerticalScrollPosition, } from '../../../hooks';
8
+ import clsx from 'clsx';
8
9
  const DefaultParticipantViewUIBar = () => (_jsx(DefaultParticipantViewUI, { menuPlacement: "top-end" }));
9
10
  const DefaultParticipantViewUISpotlight = () => _jsx(DefaultParticipantViewUI, {});
10
- export const SpeakerLayout = ({ ParticipantViewUIBar = DefaultParticipantViewUIBar, ParticipantViewUISpotlight = DefaultParticipantViewUISpotlight, VideoPlaceholder, }) => {
11
+ export const SpeakerLayout = ({ ParticipantViewUIBar = DefaultParticipantViewUIBar, ParticipantViewUISpotlight = DefaultParticipantViewUISpotlight, VideoPlaceholder, participantsBarPosition = 'bottom', }) => {
11
12
  const call = useCall();
12
13
  const [participantInSpotlight, ...otherParticipants] = useParticipants();
13
14
  const [scrollWrapper, setScrollWrapper] = useState(null);
14
15
  const isOneOnOneCall = otherParticipants.length === 1;
15
16
  const localParticipant = useLocalParticipant();
16
- const scrollPosition = useHorizontalScrollPosition(scrollWrapper);
17
- const scrollStartClickHandler = () => {
18
- scrollWrapper === null || scrollWrapper === void 0 ? void 0 : scrollWrapper.scrollBy({ left: -150, behavior: 'smooth' });
19
- };
20
- const scrollEndClickHandler = () => {
21
- scrollWrapper === null || scrollWrapper === void 0 ? void 0 : scrollWrapper.scrollBy({ left: 150, behavior: 'smooth' });
22
- };
23
17
  useEffect(() => {
24
18
  if (!scrollWrapper || !call)
25
19
  return;
@@ -45,7 +39,29 @@ export const SpeakerLayout = ({ ParticipantViewUIBar = DefaultParticipantViewUIB
45
39
  if (!call)
46
40
  return null;
47
41
  const isSpeakerScreenSharing = hasScreenShare(participantInSpotlight);
48
- return (_jsx("div", Object.assign({ className: "str-video__speaker-layout__wrapper" }, { children: _jsxs("div", Object.assign({ className: "str-video__speaker-layout" }, { children: [_jsx("div", Object.assign({ className: "str-video__speaker-layout__spotlight" }, { children: participantInSpotlight && (_jsx(ParticipantView, { participant: participantInSpotlight, muteAudio: isSpeakerScreenSharing, videoKind: isSpeakerScreenSharing ? 'screen' : 'video', sinkId: localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.audioOutputDeviceId, ParticipantViewUI: ParticipantViewUISpotlight, VideoPlaceholder: VideoPlaceholder })) })), otherParticipants.length > 0 && (_jsxs("div", Object.assign({ className: "str-video__speaker-layout__participants-bar-buttons-wrapper" }, { children: [scrollPosition && scrollPosition !== 'start' && (_jsx(IconButton, { onClick: scrollStartClickHandler, icon: "caret-left", className: "str-video__speaker-layout__participants-bar--button-left" })), _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, sinkId: localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.audioOutputDeviceId, 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, sinkId: localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.audioOutputDeviceId, ParticipantViewUI: ParticipantViewUIBar, VideoPlaceholder: VideoPlaceholder }) }), participant.sessionId)))] })) })), scrollPosition && scrollPosition !== 'end' && (_jsx(IconButton, { onClick: scrollEndClickHandler, icon: "caret-right", className: "str-video__speaker-layout__participants-bar--button-right" }))] })))] })) })));
42
+ return (_jsx("div", Object.assign({ className: "str-video__speaker-layout__wrapper" }, { children: _jsxs("div", Object.assign({ className: clsx('str-video__speaker-layout', `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, videoKind: isSpeakerScreenSharing ? 'screen' : 'video', sinkId: localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.audioOutputDeviceId, ParticipantViewUI: ParticipantViewUISpotlight, VideoPlaceholder: VideoPlaceholder })) })), otherParticipants.length > 0 && (_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, sinkId: localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.audioOutputDeviceId, 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, sinkId: localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.audioOutputDeviceId, ParticipantViewUI: ParticipantViewUIBar, VideoPlaceholder: VideoPlaceholder }) }), participant.sessionId)))] })) })), (participantsBarPosition === 'left' ||
43
+ participantsBarPosition === 'right') && (_jsx(VerticalScrollButtons, { scrollWrapper: scrollWrapper })), (participantsBarPosition === 'top' ||
44
+ participantsBarPosition === 'bottom') && (_jsx(HorizontalScrollButtons, { scrollWrapper: scrollWrapper }))] })))] })) })));
45
+ };
46
+ const HorizontalScrollButtons = ({ scrollWrapper, }) => {
47
+ const scrollPosition = useHorizontalScrollPosition(scrollWrapper);
48
+ const scrollStartClickHandler = () => {
49
+ scrollWrapper === null || scrollWrapper === void 0 ? void 0 : scrollWrapper.scrollBy({ left: -150, behavior: 'smooth' });
50
+ };
51
+ const scrollEndClickHandler = () => {
52
+ scrollWrapper === null || scrollWrapper === void 0 ? void 0 : scrollWrapper.scrollBy({ left: 150, behavior: 'smooth' });
53
+ };
54
+ return (_jsxs(_Fragment, { children: [scrollPosition && scrollPosition !== 'start' && (_jsx(IconButton, { onClick: scrollStartClickHandler, icon: "caret-left", className: "str-video__speaker-layout__participants-bar--button-left" })), scrollPosition && scrollPosition !== 'end' && (_jsx(IconButton, { onClick: scrollEndClickHandler, icon: "caret-right", className: "str-video__speaker-layout__participants-bar--button-right" }))] }));
55
+ };
56
+ const VerticalScrollButtons = ({ scrollWrapper, }) => {
57
+ const scrollPosition = useVerticalScrollPosition(scrollWrapper);
58
+ const scrollTopClickHandler = () => {
59
+ scrollWrapper === null || scrollWrapper === void 0 ? void 0 : scrollWrapper.scrollBy({ top: -150, behavior: 'smooth' });
60
+ };
61
+ const scrollBottomClickHandler = () => {
62
+ scrollWrapper === null || scrollWrapper === void 0 ? void 0 : scrollWrapper.scrollBy({ top: 150, behavior: 'smooth' });
63
+ };
64
+ return (_jsxs(_Fragment, { children: [scrollPosition && scrollPosition !== 'top' && (_jsx(IconButton, { onClick: scrollTopClickHandler, icon: "caret-up", className: "str-video__speaker-layout__participants-bar--button-top" })), scrollPosition && scrollPosition !== 'bottom' && (_jsx(IconButton, { onClick: scrollBottomClickHandler, icon: "caret-down", className: "str-video__speaker-layout__participants-bar--button-bottom" }))] }));
49
65
  };
50
66
  const hasScreenShare = (p) => !!(p === null || p === void 0 ? void 0 : p.publishedTracks.includes(SfuModels.TrackType.SCREEN_SHARE));
51
67
  const loggedIn = (a, b) => {
@@ -1 +1 @@
1
- {"version":3,"file":"SpeakerLayout.js","sourceRoot":"","sources":["../../../../../src/core/components/CallLayout/SpeakerLayout.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"SpeakerLayout.js","sourceRoot":"","sources":["../../../../../src/core/components/CallLayout/SpeakerLayout.tsx"],"names":[],"mappings":"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"}
@@ -1 +1,2 @@
1
1
  export * from './useFloatingUIPreset';
2
+ export * from './useScrollPosition';
@@ -1,2 +1,3 @@
1
1
  export * from './useFloatingUIPreset';
2
+ export * from './useScrollPosition';
2
3
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC"}
@@ -1,5 +1,5 @@
1
1
  import { useEffect } from 'react';
2
- import { offset, autoUpdate, size, useFloating, shift, } from '@floating-ui/react';
2
+ import { offset, autoUpdate, size, useFloating, shift, flip, } from '@floating-ui/react';
3
3
  export const useFloatingUIPreset = ({ placement, strategy, }) => {
4
4
  const { refs, x, y, update, elements: { domReference, floating }, } = useFloating({
5
5
  placement,
@@ -7,9 +7,10 @@ export const useFloatingUIPreset = ({ placement, strategy, }) => {
7
7
  middleware: [
8
8
  offset(10),
9
9
  shift(),
10
+ flip(),
10
11
  size({
11
12
  padding: 10,
12
- apply({ availableHeight, elements }) {
13
+ apply: ({ availableHeight, elements }) => {
13
14
  Object.assign(elements.floating.style, {
14
15
  maxHeight: `${availableHeight}px`,
15
16
  });
@@ -1 +1 @@
1
- {"version":3,"file":"useFloatingUIPreset.js","sourceRoot":"","sources":["../../../src/hooks/useFloatingUIPreset.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EACL,MAAM,EACN,UAAU,EACV,IAAI,EACJ,WAAW,EACX,KAAK,GACN,MAAM,oBAAoB,CAAC;AAG5B,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,EAClC,SAAS,EACT,QAAQ,GACyC,EAAE,EAAE;IACrD,MAAM,EACJ,IAAI,EACJ,CAAC,EACD,CAAC,EACD,MAAM,EACN,QAAQ,EAAE,EAAE,YAAY,EAAE,QAAQ,EAAE,GACrC,GAAG,WAAW,CAAC;QACd,SAAS;QACT,QAAQ;QACR,UAAU,EAAE;YACV,MAAM,CAAC,EAAE,CAAC;YACV,KAAK,EAAE;YACP,IAAI,CAAC;gBACH,OAAO,EAAE,EAAE;gBACX,KAAK,CAAC,EAAE,eAAe,EAAE,QAAQ,EAAE;oBACjC,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAC,KAAK,EAAE;wBACrC,SAAS,EAAE,GAAG,eAAe,IAAI;qBAClC,CAAC,CAAC;gBACL,CAAC;aACF,CAAC;SACH;KACF,CAAC,CAAC;IAEH,yBAAyB;IACzB,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,YAAY,IAAI,CAAC,QAAQ;YAAE,OAAO;QAEvC,MAAM,OAAO,GAAG,UAAU,CAAC,YAAY,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAC;QAE3D,OAAO,GAAG,EAAE,CAAC,OAAO,EAAE,CAAC;IACzB,CAAC,EAAE,CAAC,YAAY,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAC,CAAC;IAErC,OAAO,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC,EAAE,YAAY,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC;AAC1D,CAAC,CAAC"}
1
+ {"version":3,"file":"useFloatingUIPreset.js","sourceRoot":"","sources":["../../../src/hooks/useFloatingUIPreset.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EACL,MAAM,EACN,UAAU,EACV,IAAI,EACJ,WAAW,EACX,KAAK,EACL,IAAI,GACL,MAAM,oBAAoB,CAAC;AAG5B,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,EAClC,SAAS,EACT,QAAQ,GACyC,EAAE,EAAE;IACrD,MAAM,EACJ,IAAI,EACJ,CAAC,EACD,CAAC,EACD,MAAM,EACN,QAAQ,EAAE,EAAE,YAAY,EAAE,QAAQ,EAAE,GACrC,GAAG,WAAW,CAAC;QACd,SAAS;QACT,QAAQ;QACR,UAAU,EAAE;YACV,MAAM,CAAC,EAAE,CAAC;YACV,KAAK,EAAE;YACP,IAAI,EAAE;YACN,IAAI,CAAC;gBACH,OAAO,EAAE,EAAE;gBACX,KAAK,EAAE,CAAC,EAAE,eAAe,EAAE,QAAQ,EAAE,EAAE,EAAE;oBACvC,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAC,KAAK,EAAE;wBACrC,SAAS,EAAE,GAAG,eAAe,IAAI;qBAClC,CAAC,CAAC;gBACL,CAAC;aACF,CAAC;SACH;KACF,CAAC,CAAC;IAEH,yBAAyB;IACzB,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,YAAY,IAAI,CAAC,QAAQ;YAAE,OAAO;QAEvC,MAAM,OAAO,GAAG,UAAU,CAAC,YAAY,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAC;QAE3D,OAAO,GAAG,EAAE,CAAC,OAAO,EAAE,CAAC;IACzB,CAAC,EAAE,CAAC,YAAY,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAC,CAAC;IAErC,OAAO,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC,EAAE,YAAY,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC;AAC1D,CAAC,CAAC"}
@@ -2,5 +2,5 @@
2
2
  * Hook which observes element's scroll position and returns text value based on the
3
3
  * position of the scrollbar (`top`, `bottom`, `between` and `null` if no scrollbar is available)
4
4
  */
5
- export declare const useVerticalScrollPosition: (scrollElement: HTMLElement | null, treshold?: number) => "bottom" | "top" | "between" | null;
6
- export declare const useHorizontalScrollPosition: (scrollElement: HTMLElement | null, treshold?: number) => "end" | "start" | "between" | null;
5
+ export declare const useVerticalScrollPosition: (scrollElement: HTMLElement | null, threshold?: number) => "bottom" | "top" | "between" | null;
6
+ export declare const useHorizontalScrollPosition: (scrollElement: HTMLElement | null, threshold?: number) => "end" | "start" | "between" | null;
@@ -1,10 +1,10 @@
1
1
  import { useEffect, useState } from 'react';
2
- const SCROLL_TRESHOLD = 10;
2
+ const SCROLL_THRESHOLD = 10;
3
3
  /**
4
4
  * Hook which observes element's scroll position and returns text value based on the
5
5
  * position of the scrollbar (`top`, `bottom`, `between` and `null` if no scrollbar is available)
6
6
  */
7
- export const useVerticalScrollPosition = (scrollElement, treshold = SCROLL_TRESHOLD) => {
7
+ export const useVerticalScrollPosition = (scrollElement, threshold = SCROLL_THRESHOLD) => {
8
8
  const [scrollPosition, setScrollPosition] = useState(null);
9
9
  useEffect(() => {
10
10
  if (!scrollElement)
@@ -14,10 +14,10 @@ export const useVerticalScrollPosition = (scrollElement, treshold = SCROLL_TRESH
14
14
  const hasVerticalScrollbar = element.scrollHeight > element.clientHeight;
15
15
  if (!hasVerticalScrollbar)
16
16
  return setScrollPosition(null);
17
- const isAtTheTop = element.scrollTop <= treshold;
17
+ const isAtTheTop = element.scrollTop <= threshold;
18
18
  if (isAtTheTop)
19
19
  return setScrollPosition('top');
20
- const isAtTheBottom = Math.abs(element.scrollHeight - element.scrollTop - element.clientHeight) <= treshold;
20
+ const isAtTheBottom = Math.abs(element.scrollHeight - element.scrollTop - element.clientHeight) <= threshold;
21
21
  if (isAtTheBottom)
22
22
  return setScrollPosition('bottom');
23
23
  setScrollPosition('between');
@@ -29,10 +29,10 @@ export const useVerticalScrollPosition = (scrollElement, treshold = SCROLL_TRESH
29
29
  scrollElement.removeEventListener('scroll', scrollHandler);
30
30
  resizeObserver.disconnect();
31
31
  };
32
- }, [scrollElement, treshold]);
32
+ }, [scrollElement, threshold]);
33
33
  return scrollPosition;
34
34
  };
35
- export const useHorizontalScrollPosition = (scrollElement, treshold = SCROLL_TRESHOLD) => {
35
+ export const useHorizontalScrollPosition = (scrollElement, threshold = SCROLL_THRESHOLD) => {
36
36
  const [scrollPosition, setScrollPosition] = useState(null);
37
37
  useEffect(() => {
38
38
  if (!scrollElement)
@@ -42,10 +42,10 @@ export const useHorizontalScrollPosition = (scrollElement, treshold = SCROLL_TRE
42
42
  const hasHorizontalScrollbar = element.scrollWidth > element.clientWidth;
43
43
  if (!hasHorizontalScrollbar)
44
44
  return setScrollPosition(null);
45
- const isAtTheStart = element.scrollLeft <= treshold;
45
+ const isAtTheStart = element.scrollLeft <= threshold;
46
46
  if (isAtTheStart)
47
47
  return setScrollPosition('start');
48
- const isAtTheEnd = Math.abs(element.scrollWidth - element.scrollLeft - element.clientWidth) <= treshold;
48
+ const isAtTheEnd = Math.abs(element.scrollWidth - element.scrollLeft - element.clientWidth) <= threshold;
49
49
  if (isAtTheEnd)
50
50
  return setScrollPosition('end');
51
51
  setScrollPosition('between');
@@ -57,7 +57,7 @@ export const useHorizontalScrollPosition = (scrollElement, treshold = SCROLL_TRE
57
57
  scrollElement.removeEventListener('scroll', scrollHandler);
58
58
  resizeObserver.disconnect();
59
59
  };
60
- }, [scrollElement, treshold]);
60
+ }, [scrollElement, threshold]);
61
61
  return scrollPosition;
62
62
  };
63
63
  //# sourceMappingURL=useScrollPosition.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useScrollPosition.js","sourceRoot":"","sources":["../../../src/hooks/useScrollPosition.ts"],"names":[],"mappings":"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"}
package/package.json CHANGED
@@ -25,9 +25,9 @@
25
25
  "@floating-ui/react": "^0.22.0",
26
26
  "@nivo/core": "^0.80.0",
27
27
  "@nivo/line": "^0.80.0",
28
- "@stream-io/i18n": "^0.0.1-alpha.75",
29
- "@stream-io/video-client": "^0.0.2-alpha.4",
30
- "@stream-io/video-react-bindings": "^0.0.1-alpha.86",
28
+ "@stream-io/i18n": "^0.0.1-alpha.77",
29
+ "@stream-io/video-client": "^0.0.2-alpha.6",
30
+ "@stream-io/video-react-bindings": "^0.0.1-alpha.88",
31
31
  "clsx": "^1.2.1",
32
32
  "rxjs": "~7.8.1"
33
33
  },
@@ -36,7 +36,7 @@
36
36
  "react-dom": "^18.0.0"
37
37
  },
38
38
  "devDependencies": {
39
- "@stream-io/video-styling": "^0.0.1-alpha.70",
39
+ "@stream-io/video-styling": "^0.0.1-alpha.72",
40
40
  "@types/prop-types": "^15.7.5",
41
41
  "@types/rimraf": "^3.0.2",
42
42
  "prop-types": "^15.8.1",
@@ -47,5 +47,5 @@
47
47
  "typedoc": "^0.24.7",
48
48
  "typescript": "^4.9.5"
49
49
  },
50
- "version": "0.0.1-alpha.93"
50
+ "version": "0.0.1-alpha.95"
51
51
  }
@@ -8,7 +8,7 @@ import {
8
8
  import { ParticipantView, DefaultParticipantViewUI } from '../../core';
9
9
  import { Video } from '../Video';
10
10
 
11
- import { useVerticalScrollPosition } from './hooks';
11
+ import { useVerticalScrollPosition } from '../../hooks';
12
12
  import { IconButton } from '../Button';
13
13
 
14
14
  export const CallParticipantsScreenView = (props: { call: Call }) => {
@@ -22,11 +22,16 @@ import {
22
22
  ParticipantViewProps,
23
23
  } from '../ParticipantView';
24
24
  import { IconButton } from '../../../components';
25
- import { useHorizontalScrollPosition } from '../../../components/StreamCall/hooks';
25
+ import {
26
+ useHorizontalScrollPosition,
27
+ useVerticalScrollPosition,
28
+ } from '../../../hooks';
29
+ import clsx from 'clsx';
26
30
 
27
31
  export type SpeakerLayoutProps = {
28
32
  ParticipantViewUISpotlight?: ParticipantViewProps['ParticipantViewUI'];
29
33
  ParticipantViewUIBar?: ParticipantViewProps['ParticipantViewUI'];
34
+ participantsBarPosition?: 'top' | 'bottom' | 'left' | 'right';
30
35
  } & Pick<ParticipantViewProps, 'VideoPlaceholder'>;
31
36
 
32
37
  const DefaultParticipantViewUIBar = () => (
@@ -39,6 +44,7 @@ export const SpeakerLayout = ({
39
44
  ParticipantViewUIBar = DefaultParticipantViewUIBar,
40
45
  ParticipantViewUISpotlight = DefaultParticipantViewUISpotlight,
41
46
  VideoPlaceholder,
47
+ participantsBarPosition = 'bottom',
42
48
  }: SpeakerLayoutProps) => {
43
49
  const call = useCall();
44
50
  const [participantInSpotlight, ...otherParticipants] = useParticipants();
@@ -48,16 +54,6 @@ export const SpeakerLayout = ({
48
54
  const isOneOnOneCall = otherParticipants.length === 1;
49
55
  const localParticipant = useLocalParticipant();
50
56
 
51
- const scrollPosition = useHorizontalScrollPosition(scrollWrapper);
52
-
53
- const scrollStartClickHandler = () => {
54
- scrollWrapper?.scrollBy({ left: -150, behavior: 'smooth' });
55
- };
56
-
57
- const scrollEndClickHandler = () => {
58
- scrollWrapper?.scrollBy({ left: 150, behavior: 'smooth' });
59
- };
60
-
61
57
  useEffect(() => {
62
58
  if (!scrollWrapper || !call) return;
63
59
 
@@ -89,7 +85,12 @@ export const SpeakerLayout = ({
89
85
  const isSpeakerScreenSharing = hasScreenShare(participantInSpotlight);
90
86
  return (
91
87
  <div className="str-video__speaker-layout__wrapper">
92
- <div className="str-video__speaker-layout">
88
+ <div
89
+ className={clsx(
90
+ 'str-video__speaker-layout',
91
+ `str-video__speaker-layout--variant-${participantsBarPosition}`,
92
+ )}
93
+ >
93
94
  <div className="str-video__speaker-layout__spotlight">
94
95
  {participantInSpotlight && (
95
96
  <ParticipantView
@@ -104,13 +105,6 @@ export const SpeakerLayout = ({
104
105
  </div>
105
106
  {otherParticipants.length > 0 && (
106
107
  <div className="str-video__speaker-layout__participants-bar-buttons-wrapper">
107
- {scrollPosition && scrollPosition !== 'start' && (
108
- <IconButton
109
- onClick={scrollStartClickHandler}
110
- icon="caret-left"
111
- className="str-video__speaker-layout__participants-bar--button-left"
112
- />
113
- )}
114
108
  <div
115
109
  className="str-video__speaker-layout__participants-bar-wrapper"
116
110
  ref={setScrollWrapper}
@@ -144,12 +138,13 @@ export const SpeakerLayout = ({
144
138
  ))}
145
139
  </div>
146
140
  </div>
147
- {scrollPosition && scrollPosition !== 'end' && (
148
- <IconButton
149
- onClick={scrollEndClickHandler}
150
- icon="caret-right"
151
- className="str-video__speaker-layout__participants-bar--button-right"
152
- />
141
+ {(participantsBarPosition === 'left' ||
142
+ participantsBarPosition === 'right') && (
143
+ <VerticalScrollButtons scrollWrapper={scrollWrapper} />
144
+ )}
145
+ {(participantsBarPosition === 'top' ||
146
+ participantsBarPosition === 'bottom') && (
147
+ <HorizontalScrollButtons scrollWrapper={scrollWrapper} />
153
148
  )}
154
149
  </div>
155
150
  )}
@@ -158,6 +153,74 @@ export const SpeakerLayout = ({
158
153
  );
159
154
  };
160
155
 
156
+ type ScrollButtonsProps<T extends HTMLElement> = {
157
+ scrollWrapper: T | null;
158
+ };
159
+
160
+ const HorizontalScrollButtons = <T extends HTMLElement>({
161
+ scrollWrapper,
162
+ }: ScrollButtonsProps<T>) => {
163
+ const scrollPosition = useHorizontalScrollPosition(scrollWrapper);
164
+
165
+ const scrollStartClickHandler = () => {
166
+ scrollWrapper?.scrollBy({ left: -150, behavior: 'smooth' });
167
+ };
168
+
169
+ const scrollEndClickHandler = () => {
170
+ scrollWrapper?.scrollBy({ left: 150, behavior: 'smooth' });
171
+ };
172
+ return (
173
+ <>
174
+ {scrollPosition && scrollPosition !== 'start' && (
175
+ <IconButton
176
+ onClick={scrollStartClickHandler}
177
+ icon="caret-left"
178
+ className="str-video__speaker-layout__participants-bar--button-left"
179
+ />
180
+ )}
181
+ {scrollPosition && scrollPosition !== 'end' && (
182
+ <IconButton
183
+ onClick={scrollEndClickHandler}
184
+ icon="caret-right"
185
+ className="str-video__speaker-layout__participants-bar--button-right"
186
+ />
187
+ )}
188
+ </>
189
+ );
190
+ };
191
+
192
+ const VerticalScrollButtons = <T extends HTMLElement>({
193
+ scrollWrapper,
194
+ }: ScrollButtonsProps<T>) => {
195
+ const scrollPosition = useVerticalScrollPosition(scrollWrapper);
196
+
197
+ const scrollTopClickHandler = () => {
198
+ scrollWrapper?.scrollBy({ top: -150, behavior: 'smooth' });
199
+ };
200
+
201
+ const scrollBottomClickHandler = () => {
202
+ scrollWrapper?.scrollBy({ top: 150, behavior: 'smooth' });
203
+ };
204
+ return (
205
+ <>
206
+ {scrollPosition && scrollPosition !== 'top' && (
207
+ <IconButton
208
+ onClick={scrollTopClickHandler}
209
+ icon="caret-up"
210
+ className="str-video__speaker-layout__participants-bar--button-top"
211
+ />
212
+ )}
213
+ {scrollPosition && scrollPosition !== 'bottom' && (
214
+ <IconButton
215
+ onClick={scrollBottomClickHandler}
216
+ icon="caret-down"
217
+ className="str-video__speaker-layout__participants-bar--button-bottom"
218
+ />
219
+ )}
220
+ </>
221
+ );
222
+ };
223
+
161
224
  const hasScreenShare = (p?: StreamVideoParticipant) =>
162
225
  !!p?.publishedTracks.includes(SfuModels.TrackType.SCREEN_SHARE);
163
226
 
@@ -1 +1,2 @@
1
1
  export * from './useFloatingUIPreset';
2
+ export * from './useScrollPosition';
@@ -5,6 +5,7 @@ import {
5
5
  size,
6
6
  useFloating,
7
7
  shift,
8
+ flip,
8
9
  } from '@floating-ui/react';
9
10
  import type { UseFloatingProps } from '@floating-ui/react';
10
11
 
@@ -24,9 +25,10 @@ export const useFloatingUIPreset = ({
24
25
  middleware: [
25
26
  offset(10),
26
27
  shift(),
28
+ flip(),
27
29
  size({
28
30
  padding: 10,
29
- apply({ availableHeight, elements }) {
31
+ apply: ({ availableHeight, elements }) => {
30
32
  Object.assign(elements.floating.style, {
31
33
  maxHeight: `${availableHeight}px`,
32
34
  });
@@ -1,6 +1,6 @@
1
1
  import { useEffect, useState } from 'react';
2
2
 
3
- const SCROLL_TRESHOLD = 10;
3
+ const SCROLL_THRESHOLD = 10;
4
4
 
5
5
  /**
6
6
  * Hook which observes element's scroll position and returns text value based on the
@@ -8,7 +8,7 @@ const SCROLL_TRESHOLD = 10;
8
8
  */
9
9
  export const useVerticalScrollPosition = (
10
10
  scrollElement: HTMLElement | null,
11
- treshold: number = SCROLL_TRESHOLD,
11
+ threshold: number = SCROLL_THRESHOLD,
12
12
  ) => {
13
13
  const [scrollPosition, setScrollPosition] = useState<
14
14
  'top' | 'bottom' | 'between' | null
@@ -24,13 +24,13 @@ export const useVerticalScrollPosition = (
24
24
 
25
25
  if (!hasVerticalScrollbar) return setScrollPosition(null);
26
26
 
27
- const isAtTheTop = element.scrollTop <= treshold;
27
+ const isAtTheTop = element.scrollTop <= threshold;
28
28
  if (isAtTheTop) return setScrollPosition('top');
29
29
 
30
30
  const isAtTheBottom =
31
31
  Math.abs(
32
32
  element.scrollHeight - element.scrollTop - element.clientHeight,
33
- ) <= treshold;
33
+ ) <= threshold;
34
34
 
35
35
  if (isAtTheBottom) return setScrollPosition('bottom');
36
36
 
@@ -45,14 +45,14 @@ export const useVerticalScrollPosition = (
45
45
  scrollElement.removeEventListener('scroll', scrollHandler);
46
46
  resizeObserver.disconnect();
47
47
  };
48
- }, [scrollElement, treshold]);
48
+ }, [scrollElement, threshold]);
49
49
 
50
50
  return scrollPosition;
51
51
  };
52
52
 
53
53
  export const useHorizontalScrollPosition = (
54
54
  scrollElement: HTMLElement | null,
55
- treshold: number = SCROLL_TRESHOLD,
55
+ threshold: number = SCROLL_THRESHOLD,
56
56
  ) => {
57
57
  const [scrollPosition, setScrollPosition] = useState<
58
58
  'start' | 'end' | 'between' | null
@@ -68,13 +68,13 @@ export const useHorizontalScrollPosition = (
68
68
 
69
69
  if (!hasHorizontalScrollbar) return setScrollPosition(null);
70
70
 
71
- const isAtTheStart = element.scrollLeft <= treshold;
71
+ const isAtTheStart = element.scrollLeft <= threshold;
72
72
  if (isAtTheStart) return setScrollPosition('start');
73
73
 
74
74
  const isAtTheEnd =
75
75
  Math.abs(
76
76
  element.scrollWidth - element.scrollLeft - element.clientWidth,
77
- ) <= treshold;
77
+ ) <= threshold;
78
78
 
79
79
  if (isAtTheEnd) return setScrollPosition('end');
80
80
 
@@ -89,7 +89,7 @@ export const useHorizontalScrollPosition = (
89
89
  scrollElement.removeEventListener('scroll', scrollHandler);
90
90
  resizeObserver.disconnect();
91
91
  };
92
- }, [scrollElement, treshold]);
92
+ }, [scrollElement, threshold]);
93
93
 
94
94
  return scrollPosition;
95
95
  };
@@ -1 +0,0 @@
1
- export * from './useScrollPosition';
@@ -1,2 +0,0 @@
1
- export * from './useScrollPosition';
2
- //# sourceMappingURL=index.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/StreamCall/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"useScrollPosition.js","sourceRoot":"","sources":["../../../../../src/components/StreamCall/hooks/useScrollPosition.ts"],"names":[],"mappings":"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"}
@@ -1 +0,0 @@
1
- export * from './useScrollPosition';