@stream-io/video-react-sdk 1.39.2 → 1.40.0

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 (21) hide show
  1. package/CHANGELOG.md +32 -0
  2. package/dist/css/embedded.css +69 -0
  3. package/dist/css/embedded.css.map +1 -1
  4. package/dist/css/styles.css +69 -0
  5. package/dist/css/styles.css.map +1 -1
  6. package/dist/embedded.cjs.js +21 -27
  7. package/dist/embedded.cjs.js.map +1 -1
  8. package/dist/embedded.es.js +22 -28
  9. package/dist/embedded.es.js.map +1 -1
  10. package/dist/index.cjs.js +23 -28
  11. package/dist/index.cjs.js.map +1 -1
  12. package/dist/index.es.js +24 -30
  13. package/dist/index.es.js.map +1 -1
  14. package/dist/src/core/components/CallLayout/hooks.d.ts +0 -1
  15. package/dist/src/core/components/ParticipantView/DefaultParticipantViewUI.d.ts +14 -1
  16. package/dist/src/translations/index.d.ts +2 -0
  17. package/package.json +6 -6
  18. package/src/core/components/CallLayout/SpeakerLayout.tsx +5 -2
  19. package/src/core/components/CallLayout/hooks.ts +0 -28
  20. package/src/core/components/ParticipantView/DefaultParticipantViewUI.tsx +49 -0
  21. package/src/translations/en.json +3 -0
package/dist/css/styles.css CHANGED
@@ -91,6 +91,8 @@
91
91
  --str-video__overlay-color: rgba(39, 42, 48, 0.75);
92
92
  --str-video__livestream-overlay-color: rgba(39, 42, 48, 0.25);
93
93
  --str-video__livestream-overlay-color-hovered: rgba(39, 42, 48, 0.5);
94
+ --str-video__audio-blocked-overlay-color: rgba(39, 42, 48, 0.35);
95
+ --str-video__audio-blocked-overlay-color-hovered: rgba(39, 42, 48, 0.45);
94
96
  --str-video__icon--call-accept: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTkiIGhlaWdodD0iMTkiIHZpZXdCb3g9IjAgMCAxOSAxOSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik0xNy41MSAxMi4zODJDMTYuMjggMTIuMzgyIDE1LjA5IDEyLjE4MiAxMy45OCAxMS44MjJDMTMuNjMgMTEuNzAyIDEzLjI0IDExLjc5MiAxMi45NyAxMi4wNjJMMTEuNCAxNC4wMzJDOC41NyAxMi42ODIgNS45MiAxMC4xMzIgNC41MSA3LjIwMTk1TDYuNDYgNS41NDE5NUM2LjczIDUuMjYxOTUgNi44MSA0Ljg3MTk1IDYuNyA0LjUyMTk1QzYuMzMgMy40MTE5NSA2LjE0IDIuMjIxOTUgNi4xNCAwLjk5MTk1M0M2LjE0IDAuNDUxOTUzIDUuNjkgMC4wMDE5NTMxMyA1LjE1IDAuMDAxOTUzMTNIMS42OUMxLjE1IDAuMDAxOTUzMTIgMC41IDAuMjQxOTUzIDAuNSAwLjk5MTk1M0MwLjUgMTAuMjgyIDguMjMgMTguMDAyIDE3LjUxIDE4LjAwMkMxOC4yMiAxOC4wMDIgMTguNSAxNy4zNzIgMTguNSAxNi44MjJWMTMuMzcyQzE4LjUgMTIuODMyIDE4LjA1IDEyLjM4MiAxNy41MSAxMi4zODJaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K');
95
97
  --str-video__icon--call-end: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IlN0eWxlPVJvdW5kIj4KPHBhdGggaWQ9IlZlY3RvciIgZD0iTTQuNTgwMSAxNi4wMzA0TDYuNTgwMSAxNC40NDA0QzcuMDYwMSAxNC4wNjA0IDcuMzQwMSAxMy40ODA0IDcuMzQwMSAxMi44NzA0VjEwLjI3MDRDMTAuMzYwMSA5LjI5MDQgMTMuNjMwMSA5LjI4MDQgMTYuNjYwMSAxMC4yNzA0VjEyLjg4MDRDMTYuNjYwMSAxMy40OTA0IDE2Ljk0MDEgMTQuMDcwNCAxNy40MjAxIDE0LjQ1MDRMMTkuNDEwMSAxNi4wMzA0QzIwLjIxMDEgMTYuNjYwNCAyMS4zNTAxIDE2LjYwMDQgMjIuMDcwMSAxNS44ODA0TDIzLjI5MDEgMTQuNjYwNEMyNC4wOTAxIDEzLjg2MDQgMjQuMDkwMSAxMi41MzA0IDIzLjI0MDEgMTEuNzgwNEMxNi44MzAxIDYuMTIwNCA3LjE3MDEgNi4xMjA0IDAuNzYwMTAzIDExLjc4MDRDLTAuMDg5ODk3IDEyLjUzMDQgLTAuMDg5ODk3IDEzLjg2MDQgMC43MTAxMDMgMTQuNjYwNEwxLjkzMDEgMTUuODgwNEMyLjY0MDEgMTYuNjAwNCAzLjc4MDEgMTYuNjYwNCA0LjU4MDEgMTYuMDMwNFoiIGZpbGw9IiNCMEI0QjciLz4KPC9nPgo8L3N2Zz4K');
96
98
  --str-video__icon--camera: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE3IDEwLjVWN0MxNyA2LjQ1IDE2LjU1IDYgMTYgNkg0QzMuNDUgNiAzIDYuNDUgMyA3VjE3QzMgMTcuNTUgMy40NSAxOCA0IDE4SDE2QzE2LjU1IDE4IDE3IDE3LjU1IDE3IDE3VjEzLjVMMTkuMjkgMTUuNzlDMTkuOTIgMTYuNDIgMjEgMTUuOTcgMjEgMTUuMDhWOC45MUMyMSA4LjAyIDE5LjkyIDcuNTcgMTkuMjkgOC4yTDE3IDEwLjVaIiBmaWxsPSIjQjBCNEI3Ii8+Cjwvc3ZnPgo=');
@@ -137,6 +139,73 @@
137
139
  --str-video__icon--not-allowed: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTciIGhlaWdodD0iMTciIHZpZXdCb3g9IjAgMCAxNyAxNyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTguNDY0MjIgMC45MzU1NDdDNC4wMzU2MyAwLjkzNTU0NyAwLjQ0MTQwNiA0LjUyOTc3IDAuNDQxNDA2IDguOTU4MzZDMC40NDE0MDYgMTMuMzg3IDQuMDM1NjMgMTYuOTgxMiA4LjQ2NDIyIDE2Ljk4MTJDMTIuODkyOCAxNi45ODEyIDE2LjQ4NyAxMy4zODcgMTYuNDg3IDguOTU4MzZDMTYuNDg3IDQuNTI5NzcgMTIuODkyOCAwLjkzNTU0NyA4LjQ2NDIyIDAuOTM1NTQ3Wk0yLjA0NTk3IDguOTU4MzZDMi4wNDU5NyA1LjQxMjI4IDQuOTE4MTQgMi41NDAxMSA4LjQ2NDIyIDIuNTQwMTFDOS45NDg0NCAyLjU0MDExIDExLjMxMjMgMy4wNDU1NSAxMi4zOTU0IDMuODk1OTdMMy40MDE4MyAxMi44ODk1QzIuNTUxNDEgMTEuODA2NSAyLjA0NTk3IDEwLjQ0MjYgMi4wNDU5NyA4Ljk1ODM2Wk04LjQ2NDIyIDE1LjM3NjZDNi45OCAxNS4zNzY2IDUuNjE2MTIgMTQuODcxMiA0LjUzMzA0IDE0LjAyMDhMMTMuNTI2NiA1LjAyNzE4QzE0LjM3NyA2LjExMDI2IDE0Ljg4MjUgNy40NzQxNCAxNC44ODI1IDguOTU4MzZDMTQuODgyNSAxMi41MDQ0IDEyLjAxMDMgMTUuMzc2NiA4LjQ2NDIyIDE1LjM3NjZaIiBmaWxsPSIjNzI3NjdFIi8+Cjwvc3ZnPgo=');
138
140
  }
139
141
 
142
+ .str-video__audio-blocked-notification {
143
+ position: absolute;
144
+ inset: 0;
145
+ z-index: 4;
146
+ display: flex;
147
+ align-items: center;
148
+ justify-content: center;
149
+ padding: 0;
150
+ border: none;
151
+ cursor: pointer;
152
+ }
153
+ .str-video__audio-blocked-notification .str-video__audio-blocked-notification__message {
154
+ display: inline-flex;
155
+ align-items: center;
156
+ gap: 0.625rem;
157
+ padding: 0.625rem;
158
+ max-width: calc(100% - 1.6rem);
159
+ }
160
+ .str-video__audio-blocked-notification .str-video__audio-blocked-notification__message .str-video__icon {
161
+ width: 1.5rem;
162
+ height: 1.5rem;
163
+ flex-shrink: 0;
164
+ }
165
+ .str-video__audio-blocked-notification .str-video__audio-blocked-notification__text {
166
+ display: flex;
167
+ flex-direction: column;
168
+ align-items: flex-start;
169
+ min-width: 0;
170
+ line-height: 1.25;
171
+ }
172
+ .str-video__audio-blocked-notification .str-video__audio-blocked-notification__title {
173
+ font-size: 0.75rem;
174
+ font-weight: 600;
175
+ max-width: 100%;
176
+ white-space: nowrap;
177
+ overflow: hidden;
178
+ text-overflow: ellipsis;
179
+ }
180
+ .str-video__audio-blocked-notification .str-video__audio-blocked-notification__subtitle {
181
+ font-size: 0.75rem;
182
+ font-weight: 400;
183
+ max-width: 100%;
184
+ white-space: nowrap;
185
+ overflow: hidden;
186
+ text-overflow: ellipsis;
187
+ }
188
+
189
+ .str-video__audio-blocked-notification {
190
+ background: var(--str-video__audio-blocked-overlay-color);
191
+ border-radius: inherit;
192
+ transition: background-color 0.15s ease;
193
+ }
194
+ .str-video__audio-blocked-notification:hover {
195
+ background: var(--str-video__audio-blocked-overlay-color-hovered);
196
+ }
197
+ .str-video__audio-blocked-notification .str-video__audio-blocked-notification__message {
198
+ background-color: var(--str-video__background-color1);
199
+ border-radius: var(--str-video__border-radius-xs);
200
+ color: var(--str-video__text-color1);
201
+ }
202
+ .str-video__audio-blocked-notification .str-video__audio-blocked-notification__message .str-video__icon {
203
+ background-color: var(--str-video__text-color1);
204
+ }
205
+ .str-video__audio-blocked-notification .str-video__audio-blocked-notification__subtitle {
206
+ color: var(--str-video__text-color2);
207
+ }
208
+
140
209
  .str-video__avatar {
141
210
  width: 2rem;
142
211
  height: 2rem;