@cloudflare/realtimekit-ui 1.0.6-staging.5 → 1.0.6-staging.7

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/dist/browser.js +1 -1
  2. package/dist/cjs/rtk-avatar_54.cjs.entry.js +1 -1
  3. package/dist/cjs/rtk-camera-selector_2.cjs.entry.js +17 -15
  4. package/dist/collection/components/rtk-notification/rtk-notification.css +0 -1
  5. package/dist/collection/components/rtk-participant-tile/rtk-participant-tile.js +17 -15
  6. package/dist/components/{p-edeeedb5.js → p-2e03f6fa.js} +2 -2
  7. package/dist/components/{p-c15ef063.js → p-3ae9e606.js} +1 -1
  8. package/dist/components/{p-47fbe920.js → p-af1fba2b.js} +17 -15
  9. package/dist/components/{p-078bfa39.js → p-e41c8029.js} +1 -1
  10. package/dist/components/{p-a9bcec5d.js → p-f69547a5.js} +1 -1
  11. package/dist/components/rtk-chat.js +1 -1
  12. package/dist/components/rtk-meeting.js +3 -3
  13. package/dist/components/rtk-notification.js +1 -1
  14. package/dist/components/rtk-notifications.js +1 -1
  15. package/dist/components/rtk-participant-tile.js +1 -1
  16. package/dist/components/rtk-settings-video.js +1 -1
  17. package/dist/components/rtk-settings.js +2 -2
  18. package/dist/docs/docs-components.json +1 -1
  19. package/dist/esm/loader.js +18 -16
  20. package/dist/esm/rtk-avatar_54.entry.js +1 -1
  21. package/dist/esm/rtk-camera-selector_2.entry.js +17 -15
  22. package/dist/realtimekit-ui/p-13e1bf42.entry.js +1 -0
  23. package/dist/realtimekit-ui/{p-5adb0497.entry.js → p-b6d92858.entry.js} +1 -1
  24. package/dist/realtimekit-ui/realtimekit-ui.esm.js +1 -1
  25. package/dist/types/components/rtk-participant-tile/rtk-participant-tile.d.ts +1 -0
  26. package/package.json +1 -1
  27. package/dist/realtimekit-ui/p-4d40567d.entry.js +0 -1
package/dist/cjs/rtk-avatar_54.cjs.entry.js CHANGED
@@ -4928,7 +4928,7 @@ __decorate$8([
4928
4928
  ], RtkMuteAllConfirmation.prototype, "t", void 0);
4929
4929
  RtkMuteAllConfirmation.style = RtkMuteAllConfirmationStyle0;
4930
4930
 
4931
- const rtkNotificationCss = ":host{line-height:initial;font-family:var(--rtk-font-family, sans-serif);font-feature-settings:normal;font-variation-settings:normal}p{margin:var(--rtk-space-0, 0px);padding:var(--rtk-space-0, 0px)}:host{pointer-events:none;display:block;height:var(--rtk-space-10, 40px);color:rgb(var(--rtk-colors-text-1000, 255 255 255));animation:show 0.4s ease;transition:0.4s;z-index:100}.ctr{box-sizing:border-box;display:inline-flex;height:100%;min-width:var(--rtk-space-40, 160px);align-items:center;padding-left:var(--rtk-space-3, 12px);padding-right:var(--rtk-space-2, 8px);-webkit-user-select:none;-moz-user-select:none;user-select:none;border-radius:var(--rtk-border-radius-md, 8px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity));--tw-shadow:0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);--tw-shadow-color:rgb(var(--rtk-colors-background-1000, 8 8 8));--tw-shadow:var(--tw-shadow-colored);pointer-events:auto}img{margin-right:var(--rtk-space-2, 8px);height:var(--rtk-space-0, 0px);width:var(--rtk-space-0, 0px);border-radius:9999px}img.loaded{height:var(--rtk-space-6, 24px);width:var(--rtk-space-6, 24px)}.message{margin-right:var(--rtk-space-2, 8px);max-width:var(--rtk-space-72, 288px) !important;font-size:14px !important;overflow:hidden !important;display:-webkit-box !important;-webkit-box-orient:vertical !important;-webkit-line-clamp:2 !important}.message p{margin:var(--rtk-space-0, 0px);margin-right:var(--rtk-space-1, 4px);display:inline-block}.message blockquote{display:none}rtk-icon.icon{margin-right:var(--rtk-space-2, 8px);height:var(--rtk-space-6, 24px);width:var(--rtk-space-6, 24px);color:rgb(var(--rtk-colors-text-900, 255 255 255 / 0.88))}button.dismiss{display:flex;height:var(--rtk-space-6, 24px);width:var(--rtk-space-6, 24px);align-items:center;justify-content:center;border-width:var(--rtk-border-width-none, 0);border-style:none;padding:var(--rtk-space-0, 0px);border-radius:var(--rtk-border-radius-sm, 4px);background-color:transparent;color:rgb(var(--rtk-colors-text-600, 255 255 255 / 0.52));outline-width:1px;outline-color:rgb(var(--rtk-colors-text-1000, 255 255 255))}button.dismiss:hover{cursor:pointer;color:rgb(var(--rtk-colors-text-1000, 255 255 255))}button.dismiss:focus-visible{outline-style:solid}button.dismiss{transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.dismiss rtk-icon{height:var(--rtk-space-5, 20px);width:var(--rtk-space-5, 20px)}rtk-button{border-radius:var(--rtk-border-radius-sm, 4px)}.right{margin-left:auto;display:flex;align-items:center;gap:var(--rtk-space-2, 8px)}:host(.exit){animation:exit 0.4s ease}@keyframes show{0%{opacity:0;transform:translateX(-120px)}100%{opacity:1;transform:translateX(0px)}}@keyframes exit{0%{opacity:1;transform:translateX(0)}100%{opacity:0;transform:translateX(-120px)}}:host([size='sm']){font-size:14px}";
4931
+ const rtkNotificationCss = ":host{line-height:initial;font-family:var(--rtk-font-family, sans-serif);font-feature-settings:normal;font-variation-settings:normal}p{margin:var(--rtk-space-0, 0px);padding:var(--rtk-space-0, 0px)}:host{pointer-events:none;display:block;height:var(--rtk-space-10, 40px);color:rgb(var(--rtk-colors-text-1000, 255 255 255));animation:show 0.4s ease;transition:0.4s;z-index:100}.ctr{box-sizing:border-box;display:inline-flex;height:100%;min-width:var(--rtk-space-40, 160px);align-items:center;padding-left:var(--rtk-space-3, 12px);padding-right:var(--rtk-space-2, 8px);-webkit-user-select:none;-moz-user-select:none;user-select:none;border-radius:var(--rtk-border-radius-md, 8px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity));--tw-shadow:0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);--tw-shadow-color:rgb(var(--rtk-colors-background-1000, 8 8 8));--tw-shadow:var(--tw-shadow-colored);pointer-events:auto}img{margin-right:var(--rtk-space-2, 8px);height:var(--rtk-space-0, 0px);width:var(--rtk-space-0, 0px);border-radius:9999px}img.loaded{height:var(--rtk-space-6, 24px);width:var(--rtk-space-6, 24px)}.message{margin-right:var(--rtk-space-2, 8px);max-width:var(--rtk-space-72, 288px) !important;font-size:14px !important;overflow:hidden !important;display:-webkit-box !important;-webkit-box-orient:vertical !important;-webkit-line-clamp:2 !important}.message p{margin:var(--rtk-space-0, 0px);margin-right:var(--rtk-space-1, 4px)}.message blockquote{display:none}rtk-icon.icon{margin-right:var(--rtk-space-2, 8px);height:var(--rtk-space-6, 24px);width:var(--rtk-space-6, 24px);color:rgb(var(--rtk-colors-text-900, 255 255 255 / 0.88))}button.dismiss{display:flex;height:var(--rtk-space-6, 24px);width:var(--rtk-space-6, 24px);align-items:center;justify-content:center;border-width:var(--rtk-border-width-none, 0);border-style:none;padding:var(--rtk-space-0, 0px);border-radius:var(--rtk-border-radius-sm, 4px);background-color:transparent;color:rgb(var(--rtk-colors-text-600, 255 255 255 / 0.52));outline-width:1px;outline-color:rgb(var(--rtk-colors-text-1000, 255 255 255))}button.dismiss:hover{cursor:pointer;color:rgb(var(--rtk-colors-text-1000, 255 255 255))}button.dismiss:focus-visible{outline-style:solid}button.dismiss{transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.dismiss rtk-icon{height:var(--rtk-space-5, 20px);width:var(--rtk-space-5, 20px)}rtk-button{border-radius:var(--rtk-border-radius-sm, 4px)}.right{margin-left:auto;display:flex;align-items:center;gap:var(--rtk-space-2, 8px)}:host(.exit){animation:exit 0.4s ease}@keyframes show{0%{opacity:0;transform:translateX(-120px)}100%{opacity:1;transform:translateX(0px)}}@keyframes exit{0%{opacity:1;transform:translateX(0)}100%{opacity:0;transform:translateX(-120px)}}:host([size='sm']){font-size:14px}";
4932
4932
  const RtkNotificationStyle0 = rtkNotificationCss;
4933
4933
 
4934
4934
  var __decorate$7 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
package/dist/cjs/rtk-camera-selector_2.cjs.entry.js CHANGED
@@ -129,6 +129,20 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
129
129
  return c > 3 && r && Object.defineProperty(target, key, r), r;
130
130
  };
131
131
  const RtkParticipantTile = class {
132
+ onVideoRef(el) {
133
+ if (!this.participant || !this.meeting || el === this.videoEl)
134
+ return;
135
+ this.videoEl = el;
136
+ this.participant.registerVideoElement(this.videoEl, this.isPreview);
137
+ this.tileLoad.emit({ participant: this.participant, videoElement: this.videoEl });
138
+ }
139
+ connectedCallback() {
140
+ // set videoState before initial render and initialize listeners
141
+ if (this.meeting)
142
+ this.meetingChanged(this.meeting);
143
+ else
144
+ this.participantsChanged(this.participant);
145
+ }
132
146
  constructor(hostRef) {
133
147
  index$1.registerInstance(this, hostRef);
134
148
  this.tileLoad = index$1.createEvent(this, "tileLoad", 7);
@@ -164,20 +178,7 @@ const RtkParticipantTile = class {
164
178
  if (this.playTimeout)
165
179
  clearTimeout(this.playTimeout);
166
180
  };
167
- }
168
- onVideoRef(el) {
169
- if (!this.participant || !this.meeting || el === this.videoEl)
170
- return;
171
- this.videoEl = el;
172
- this.participant.registerVideoElement(this.videoEl, this.isPreview);
173
- this.tileLoad.emit({ participant: this.participant, videoElement: this.videoEl });
174
- }
175
- connectedCallback() {
176
- // set videoState before initial render and initialize listeners
177
- if (this.meeting)
178
- this.meetingChanged(this.meeting);
179
- else
180
- this.participantsChanged(this.participant);
181
+ this.mediaConnectionUpdateListener = this.mediaConnectionUpdateListener.bind(this);
181
182
  }
182
183
  disconnectedCallback() {
183
184
  if (this.playTimeout)
@@ -208,7 +209,8 @@ const RtkParticipantTile = class {
208
209
  this.videoEl && this.participant.registerVideoElement(this.videoEl, this.isPreview);
209
210
  participant.addListener('pinned', this.onPinned);
210
211
  participant.addListener('unpinned', this.onPinned);
211
- this.meeting.meta.on('mediaConnectionUpdate', this.mediaConnectionUpdateListener.bind(this));
212
+ this.meeting.meta.off('mediaConnectionUpdate', this.mediaConnectionUpdateListener);
213
+ this.meeting.meta.on('mediaConnectionUpdate', this.mediaConnectionUpdateListener);
212
214
  }
213
215
  mediaConnectionUpdateListener() {
214
216
  var _a, _b, _c;
package/dist/collection/components/rtk-notification/rtk-notification.css CHANGED
@@ -69,7 +69,6 @@ img.loaded {
69
69
  .message p {
70
70
  margin: var(--rtk-space-0, 0px);
71
71
  margin-right: var(--rtk-space-1, 4px);
72
- display: inline-block;
73
72
  }
74
73
 
75
74
  .message blockquote {
package/dist/collection/components/rtk-participant-tile/rtk-participant-tile.js CHANGED
@@ -20,6 +20,20 @@ import { SyncWithStore } from "../../utils/sync-with-store";
20
20
  * of components like `rtk-name-tag`, `rtk-audio-visualizer` or any other component.
21
21
  */
22
22
  export class RtkParticipantTile {
23
+ onVideoRef(el) {
24
+ if (!this.participant || !this.meeting || el === this.videoEl)
25
+ return;
26
+ this.videoEl = el;
27
+ this.participant.registerVideoElement(this.videoEl, this.isPreview);
28
+ this.tileLoad.emit({ participant: this.participant, videoElement: this.videoEl });
29
+ }
30
+ connectedCallback() {
31
+ // set videoState before initial render and initialize listeners
32
+ if (this.meeting)
33
+ this.meetingChanged(this.meeting);
34
+ else
35
+ this.participantsChanged(this.participant);
36
+ }
23
37
  constructor() {
24
38
  this.isPinned = false;
25
39
  this.mediaConnectionError = false;
@@ -52,20 +66,7 @@ export class RtkParticipantTile {
52
66
  if (this.playTimeout)
53
67
  clearTimeout(this.playTimeout);
54
68
  };
55
- }
56
- onVideoRef(el) {
57
- if (!this.participant || !this.meeting || el === this.videoEl)
58
- return;
59
- this.videoEl = el;
60
- this.participant.registerVideoElement(this.videoEl, this.isPreview);
61
- this.tileLoad.emit({ participant: this.participant, videoElement: this.videoEl });
62
- }
63
- connectedCallback() {
64
- // set videoState before initial render and initialize listeners
65
- if (this.meeting)
66
- this.meetingChanged(this.meeting);
67
- else
68
- this.participantsChanged(this.participant);
69
+ this.mediaConnectionUpdateListener = this.mediaConnectionUpdateListener.bind(this);
69
70
  }
70
71
  disconnectedCallback() {
71
72
  if (this.playTimeout)
@@ -96,7 +97,8 @@ export class RtkParticipantTile {
96
97
  this.videoEl && this.participant.registerVideoElement(this.videoEl, this.isPreview);
97
98
  participant.addListener('pinned', this.onPinned);
98
99
  participant.addListener('unpinned', this.onPinned);
99
- this.meeting.meta.on('mediaConnectionUpdate', this.mediaConnectionUpdateListener.bind(this));
100
+ this.meeting.meta.off('mediaConnectionUpdate', this.mediaConnectionUpdateListener);
101
+ this.meeting.meta.on('mediaConnectionUpdate', this.mediaConnectionUpdateListener);
100
102
  }
101
103
  mediaConnectionUpdateListener() {
102
104
  var _a, _b, _c;
package/dist/components/{p-edeeedb5.js → p-2e03f6fa.js} RENAMED
@@ -45,8 +45,8 @@ import { d as defineCustomElement$e } from './p-5205ea87.js';
45
45
  import { d as defineCustomElement$d } from './p-a9d80b81.js';
46
46
  import { d as defineCustomElement$c } from './p-de20d057.js';
47
47
  import { d as defineCustomElement$b } from './p-d1fe3ce0.js';
48
- import { d as defineCustomElement$a } from './p-c15ef063.js';
49
- import { d as defineCustomElement$9 } from './p-078bfa39.js';
48
+ import { d as defineCustomElement$a } from './p-3ae9e606.js';
49
+ import { d as defineCustomElement$9 } from './p-e41c8029.js';
50
50
  import { d as defineCustomElement$8 } from './p-ba531eb3.js';
51
51
  import { d as defineCustomElement$7 } from './p-ff8e5929.js';
52
52
  import { d as defineCustomElement$6 } from './p-866a285b.js';
package/dist/components/{p-c15ef063.js → p-3ae9e606.js} RENAMED
@@ -5,7 +5,7 @@ import { T as TextMessageView } from './p-a2f4f9e3.js';
5
5
  import { d as defineCustomElement$2 } from './p-1391bef0.js';
6
6
  import { d as defineCustomElement$1 } from './p-3b29dda1.js';
7
7
 
8
- const rtkNotificationCss = ":host{line-height:initial;font-family:var(--rtk-font-family, sans-serif);font-feature-settings:normal;font-variation-settings:normal}p{margin:var(--rtk-space-0, 0px);padding:var(--rtk-space-0, 0px)}:host{pointer-events:none;display:block;height:var(--rtk-space-10, 40px);color:rgb(var(--rtk-colors-text-1000, 255 255 255));animation:show 0.4s ease;transition:0.4s;z-index:100}.ctr{box-sizing:border-box;display:inline-flex;height:100%;min-width:var(--rtk-space-40, 160px);align-items:center;padding-left:var(--rtk-space-3, 12px);padding-right:var(--rtk-space-2, 8px);-webkit-user-select:none;-moz-user-select:none;user-select:none;border-radius:var(--rtk-border-radius-md, 8px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity));--tw-shadow:0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);--tw-shadow-color:rgb(var(--rtk-colors-background-1000, 8 8 8));--tw-shadow:var(--tw-shadow-colored);pointer-events:auto}img{margin-right:var(--rtk-space-2, 8px);height:var(--rtk-space-0, 0px);width:var(--rtk-space-0, 0px);border-radius:9999px}img.loaded{height:var(--rtk-space-6, 24px);width:var(--rtk-space-6, 24px)}.message{margin-right:var(--rtk-space-2, 8px);max-width:var(--rtk-space-72, 288px) !important;font-size:14px !important;overflow:hidden !important;display:-webkit-box !important;-webkit-box-orient:vertical !important;-webkit-line-clamp:2 !important}.message p{margin:var(--rtk-space-0, 0px);margin-right:var(--rtk-space-1, 4px);display:inline-block}.message blockquote{display:none}rtk-icon.icon{margin-right:var(--rtk-space-2, 8px);height:var(--rtk-space-6, 24px);width:var(--rtk-space-6, 24px);color:rgb(var(--rtk-colors-text-900, 255 255 255 / 0.88))}button.dismiss{display:flex;height:var(--rtk-space-6, 24px);width:var(--rtk-space-6, 24px);align-items:center;justify-content:center;border-width:var(--rtk-border-width-none, 0);border-style:none;padding:var(--rtk-space-0, 0px);border-radius:var(--rtk-border-radius-sm, 4px);background-color:transparent;color:rgb(var(--rtk-colors-text-600, 255 255 255 / 0.52));outline-width:1px;outline-color:rgb(var(--rtk-colors-text-1000, 255 255 255))}button.dismiss:hover{cursor:pointer;color:rgb(var(--rtk-colors-text-1000, 255 255 255))}button.dismiss:focus-visible{outline-style:solid}button.dismiss{transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.dismiss rtk-icon{height:var(--rtk-space-5, 20px);width:var(--rtk-space-5, 20px)}rtk-button{border-radius:var(--rtk-border-radius-sm, 4px)}.right{margin-left:auto;display:flex;align-items:center;gap:var(--rtk-space-2, 8px)}:host(.exit){animation:exit 0.4s ease}@keyframes show{0%{opacity:0;transform:translateX(-120px)}100%{opacity:1;transform:translateX(0px)}}@keyframes exit{0%{opacity:1;transform:translateX(0)}100%{opacity:0;transform:translateX(-120px)}}:host([size='sm']){font-size:14px}";
8
+ const rtkNotificationCss = ":host{line-height:initial;font-family:var(--rtk-font-family, sans-serif);font-feature-settings:normal;font-variation-settings:normal}p{margin:var(--rtk-space-0, 0px);padding:var(--rtk-space-0, 0px)}:host{pointer-events:none;display:block;height:var(--rtk-space-10, 40px);color:rgb(var(--rtk-colors-text-1000, 255 255 255));animation:show 0.4s ease;transition:0.4s;z-index:100}.ctr{box-sizing:border-box;display:inline-flex;height:100%;min-width:var(--rtk-space-40, 160px);align-items:center;padding-left:var(--rtk-space-3, 12px);padding-right:var(--rtk-space-2, 8px);-webkit-user-select:none;-moz-user-select:none;user-select:none;border-radius:var(--rtk-border-radius-md, 8px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity));--tw-shadow:0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);--tw-shadow-color:rgb(var(--rtk-colors-background-1000, 8 8 8));--tw-shadow:var(--tw-shadow-colored);pointer-events:auto}img{margin-right:var(--rtk-space-2, 8px);height:var(--rtk-space-0, 0px);width:var(--rtk-space-0, 0px);border-radius:9999px}img.loaded{height:var(--rtk-space-6, 24px);width:var(--rtk-space-6, 24px)}.message{margin-right:var(--rtk-space-2, 8px);max-width:var(--rtk-space-72, 288px) !important;font-size:14px !important;overflow:hidden !important;display:-webkit-box !important;-webkit-box-orient:vertical !important;-webkit-line-clamp:2 !important}.message p{margin:var(--rtk-space-0, 0px);margin-right:var(--rtk-space-1, 4px)}.message blockquote{display:none}rtk-icon.icon{margin-right:var(--rtk-space-2, 8px);height:var(--rtk-space-6, 24px);width:var(--rtk-space-6, 24px);color:rgb(var(--rtk-colors-text-900, 255 255 255 / 0.88))}button.dismiss{display:flex;height:var(--rtk-space-6, 24px);width:var(--rtk-space-6, 24px);align-items:center;justify-content:center;border-width:var(--rtk-border-width-none, 0);border-style:none;padding:var(--rtk-space-0, 0px);border-radius:var(--rtk-border-radius-sm, 4px);background-color:transparent;color:rgb(var(--rtk-colors-text-600, 255 255 255 / 0.52));outline-width:1px;outline-color:rgb(var(--rtk-colors-text-1000, 255 255 255))}button.dismiss:hover{cursor:pointer;color:rgb(var(--rtk-colors-text-1000, 255 255 255))}button.dismiss:focus-visible{outline-style:solid}button.dismiss{transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.dismiss rtk-icon{height:var(--rtk-space-5, 20px);width:var(--rtk-space-5, 20px)}rtk-button{border-radius:var(--rtk-border-radius-sm, 4px)}.right{margin-left:auto;display:flex;align-items:center;gap:var(--rtk-space-2, 8px)}:host(.exit){animation:exit 0.4s ease}@keyframes show{0%{opacity:0;transform:translateX(-120px)}100%{opacity:1;transform:translateX(0px)}}@keyframes exit{0%{opacity:1;transform:translateX(0)}100%{opacity:0;transform:translateX(-120px)}}:host([size='sm']){font-size:14px}";
9
9
  const RtkNotificationStyle0 = rtkNotificationCss;
10
10
 
11
11
  var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
package/dist/components/{p-47fbe920.js → p-af1fba2b.js} RENAMED
@@ -19,6 +19,20 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
19
19
  return c > 3 && r && Object.defineProperty(target, key, r), r;
20
20
  };
21
21
  const RtkParticipantTile = /*@__PURE__*/ proxyCustomElement(class RtkParticipantTile extends H {
22
+ onVideoRef(el) {
23
+ if (!this.participant || !this.meeting || el === this.videoEl)
24
+ return;
25
+ this.videoEl = el;
26
+ this.participant.registerVideoElement(this.videoEl, this.isPreview);
27
+ this.tileLoad.emit({ participant: this.participant, videoElement: this.videoEl });
28
+ }
29
+ connectedCallback() {
30
+ // set videoState before initial render and initialize listeners
31
+ if (this.meeting)
32
+ this.meetingChanged(this.meeting);
33
+ else
34
+ this.participantsChanged(this.participant);
35
+ }
22
36
  constructor() {
23
37
  super();
24
38
  this.__registerHost();
@@ -56,20 +70,7 @@ const RtkParticipantTile = /*@__PURE__*/ proxyCustomElement(class RtkParticipant
56
70
  if (this.playTimeout)
57
71
  clearTimeout(this.playTimeout);
58
72
  };
59
- }
60
- onVideoRef(el) {
61
- if (!this.participant || !this.meeting || el === this.videoEl)
62
- return;
63
- this.videoEl = el;
64
- this.participant.registerVideoElement(this.videoEl, this.isPreview);
65
- this.tileLoad.emit({ participant: this.participant, videoElement: this.videoEl });
66
- }
67
- connectedCallback() {
68
- // set videoState before initial render and initialize listeners
69
- if (this.meeting)
70
- this.meetingChanged(this.meeting);
71
- else
72
- this.participantsChanged(this.participant);
73
+ this.mediaConnectionUpdateListener = this.mediaConnectionUpdateListener.bind(this);
73
74
  }
74
75
  disconnectedCallback() {
75
76
  if (this.playTimeout)
@@ -100,7 +101,8 @@ const RtkParticipantTile = /*@__PURE__*/ proxyCustomElement(class RtkParticipant
100
101
  this.videoEl && this.participant.registerVideoElement(this.videoEl, this.isPreview);
101
102
  participant.addListener('pinned', this.onPinned);
102
103
  participant.addListener('unpinned', this.onPinned);
103
- this.meeting.meta.on('mediaConnectionUpdate', this.mediaConnectionUpdateListener.bind(this));
104
+ this.meeting.meta.off('mediaConnectionUpdate', this.mediaConnectionUpdateListener);
105
+ this.meeting.meta.on('mediaConnectionUpdate', this.mediaConnectionUpdateListener);
104
106
  }
105
107
  mediaConnectionUpdateListener() {
106
108
  var _a, _b, _c;
package/dist/components/{p-078bfa39.js → p-e41c8029.js} RENAMED
@@ -6,7 +6,7 @@ import { j as parseMessageForTarget } from './p-0abe4b8a.js';
6
6
  import { S as SyncWithStore } from './p-beb5c7c8.js';
7
7
  import { d as defineCustomElement$3 } from './p-1391bef0.js';
8
8
  import { d as defineCustomElement$2 } from './p-3b29dda1.js';
9
- import { d as defineCustomElement$1 } from './p-c15ef063.js';
9
+ import { d as defineCustomElement$1 } from './p-3ae9e606.js';
10
10
 
11
11
  const DEFAULT_NOTIFICATION_DURATION = 2000;
12
12
  const DEFAULT_NOTIFICATION_CONFIG = Object.freeze({
package/dist/components/{p-a9bcec5d.js → p-f69547a5.js} RENAMED
@@ -4,7 +4,7 @@ import { b as getPreference, s as setPreference } from './p-a83ccdbd.js';
4
4
  import { S as SyncWithStore } from './p-beb5c7c8.js';
5
5
  import { d as defineCustomElement$4 } from './p-7f5ba3a2.js';
6
6
  import { d as defineCustomElement$3 } from './p-3b29dda1.js';
7
- import { d as defineCustomElement$2 } from './p-47fbe920.js';
7
+ import { d as defineCustomElement$2 } from './p-af1fba2b.js';
8
8
  import { d as defineCustomElement$1 } from './p-22aa706b.js';
9
9
 
10
10
  const rtkSettingsVideoCss = ":host{line-height:initial;font-family:var(--rtk-font-family, sans-serif);font-feature-settings:normal;font-variation-settings:normal}p{margin:var(--rtk-space-0, 0px);padding:var(--rtk-space-0, 0px)}.rtk-select{--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-700, 44 44 44) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-1000, 255 255 255))}.rtk-select:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)}.rtk-select{display:block;border-radius:var(--rtk-border-radius-sm, 4px);border-width:var(--rtk-border-width-none, 0);border-style:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:var(--rtk-space-3, 12px);font-size:16px;--icon-size:var(--rtk-select-chevron-size, var(--rtk-space-6, 24px));--icon-right-position:var(--rtk-select-chevron-right-position, var(--rtk-space-2, 8px));background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e\");background-position:right var(--icon-right-position) center;background-repeat:no-repeat;background-size:var(--icon-size) var(--icon-size);padding-right:calc(var(--icon-right-position) * 5)}:host{display:flex;width:100%;flex-direction:column}.rtk-select{width:100%;text-overflow:ellipsis}rtk-participant-tile{margin-left:auto;margin-right:auto;margin-bottom:var(--rtk-space-4, 16px);max-width:100%}#icon{padding-bottom:var(--rtk-space-1, 4px)}.apply-button{height:var(--rtk-space-10, 40px)}label{-webkit-user-select:none;-moz-user-select:none;user-select:none;font-size:14px}.group{margin-top:var(--rtk-space-2, 8px);margin-bottom:var(--rtk-space-2, 8px)}.group>*{margin-bottom:var(--rtk-space-2, 8px)}.group>*:last-child{margin-bottom:var(--rtk-space-0, 0px)}.group select{flex:1 1 0%}.row{display:flex;align-items:center;justify-content:space-between;gap:var(--rtk-space-3, 12px)}.section{display:flex;flex-direction:column}@media only screen and (max-height: 480px) and (orientation: landscape){:host{flex-direction:row}:host([size='sm']){flex-direction:row}.section[part='tile-preview']{margin-left:var(--rtk-space-2, 8px);margin-right:var(--rtk-space-2, 8px);max-height:90%;max-width:40%;flex-shrink:1}.section[part='video-settings']{margin-left:var(--rtk-space-2, 8px);margin-right:var(--rtk-space-2, 8px);flex-grow:1}}";
package/dist/components/rtk-chat.js CHANGED
@@ -1,4 +1,4 @@
1
- import { R as RtkChat$1, d as defineCustomElement$1 } from './p-edeeedb5.js';
1
+ import { R as RtkChat$1, d as defineCustomElement$1 } from './p-2e03f6fa.js';
2
2
 
3
3
  const RtkChat = RtkChat$1;
4
4
  const defineCustomElement = defineCustomElement$1;
package/dist/components/rtk-meeting.js CHANGED
@@ -15,7 +15,7 @@ import { d as defineCustomElement$M } from './p-30b81dcd.js';
15
15
  import { d as defineCustomElement$L } from './p-8336535d.js';
16
16
  import { d as defineCustomElement$K } from './p-cb7f0abe.js';
17
17
  import { d as defineCustomElement$J } from './p-632e7c39.js';
18
- import { d as defineCustomElement$I } from './p-edeeedb5.js';
18
+ import { d as defineCustomElement$I } from './p-2e03f6fa.js';
19
19
  import { d as defineCustomElement$H } from './p-ac49fc4f.js';
20
20
  import { d as defineCustomElement$G } from './p-f5c29229.js';
21
21
  import { d as defineCustomElement$F } from './p-08f6162d.js';
@@ -48,8 +48,8 @@ import { d as defineCustomElement$f } from './p-5205ea87.js';
48
48
  import { d as defineCustomElement$e } from './p-a9d80b81.js';
49
49
  import { d as defineCustomElement$d } from './p-de20d057.js';
50
50
  import { d as defineCustomElement$c } from './p-d1fe3ce0.js';
51
- import { d as defineCustomElement$b } from './p-c15ef063.js';
52
- import { d as defineCustomElement$a } from './p-078bfa39.js';
51
+ import { d as defineCustomElement$b } from './p-3ae9e606.js';
52
+ import { d as defineCustomElement$a } from './p-e41c8029.js';
53
53
  import { d as defineCustomElement$9 } from './p-ba531eb3.js';
54
54
  import { d as defineCustomElement$8 } from './p-ff8e5929.js';
55
55
  import { d as defineCustomElement$7 } from './p-866a285b.js';
package/dist/components/rtk-notification.js CHANGED
@@ -1,4 +1,4 @@
1
- import { R as RtkNotification$1, d as defineCustomElement$1 } from './p-c15ef063.js';
1
+ import { R as RtkNotification$1, d as defineCustomElement$1 } from './p-3ae9e606.js';
2
2
 
3
3
  const RtkNotification = RtkNotification$1;
4
4
  const defineCustomElement = defineCustomElement$1;
package/dist/components/rtk-notifications.js CHANGED
@@ -1,4 +1,4 @@
1
- import { R as RtkNotifications$1, d as defineCustomElement$1 } from './p-078bfa39.js';
1
+ import { R as RtkNotifications$1, d as defineCustomElement$1 } from './p-e41c8029.js';
2
2
 
3
3
  const RtkNotifications = RtkNotifications$1;
4
4
  const defineCustomElement = defineCustomElement$1;
package/dist/components/rtk-participant-tile.js CHANGED
@@ -1,4 +1,4 @@
1
- import { R as RtkParticipantTile$1, d as defineCustomElement$1 } from './p-47fbe920.js';
1
+ import { R as RtkParticipantTile$1, d as defineCustomElement$1 } from './p-af1fba2b.js';
2
2
 
3
3
  const RtkParticipantTile = RtkParticipantTile$1;
4
4
  const defineCustomElement = defineCustomElement$1;
package/dist/components/rtk-settings-video.js CHANGED
@@ -1,4 +1,4 @@
1
- import { R as RtkSettingsVideo$1, d as defineCustomElement$1 } from './p-a9bcec5d.js';
1
+ import { R as RtkSettingsVideo$1, d as defineCustomElement$1 } from './p-f69547a5.js';
2
2
 
3
3
  const RtkSettingsVideo = RtkSettingsVideo$1;
4
4
  const defineCustomElement = defineCustomElement$1;
package/dist/components/rtk-settings.js CHANGED
@@ -6,9 +6,9 @@ import { d as defineCustomElement$a } from './p-1391bef0.js';
6
6
  import { d as defineCustomElement$9 } from './p-7f5ba3a2.js';
7
7
  import { d as defineCustomElement$8 } from './p-3b29dda1.js';
8
8
  import { d as defineCustomElement$7 } from './p-25490e20.js';
9
- import { d as defineCustomElement$6 } from './p-47fbe920.js';
9
+ import { d as defineCustomElement$6 } from './p-af1fba2b.js';
10
10
  import { d as defineCustomElement$5 } from './p-99e78dbe.js';
11
- import { d as defineCustomElement$4 } from './p-a9bcec5d.js';
11
+ import { d as defineCustomElement$4 } from './p-f69547a5.js';
12
12
  import { d as defineCustomElement$3 } from './p-8a8aef81.js';
13
13
  import { d as defineCustomElement$2 } from './p-22aa706b.js';
14
14
 
package/dist/docs/docs-components.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "timestamp": "2025-10-01T07:52:36",
2
+ "timestamp": "2025-10-22T07:12:37",
3
3
  "compiler": {
4
4
  "name": "@stencil/core",
5
5
  "version": "4.27.2",
package/dist/esm/loader.js CHANGED
@@ -15523,7 +15523,7 @@ __decorate$8$1([
15523
15523
  ], RtkMuteAllConfirmation.prototype, "t", void 0);
15524
15524
  RtkMuteAllConfirmation.style = RtkMuteAllConfirmationStyle0;
15525
15525
 
15526
- const rtkNotificationCss = ":host{line-height:initial;font-family:var(--rtk-font-family, sans-serif);font-feature-settings:normal;font-variation-settings:normal}p{margin:var(--rtk-space-0, 0px);padding:var(--rtk-space-0, 0px)}:host{pointer-events:none;display:block;height:var(--rtk-space-10, 40px);color:rgb(var(--rtk-colors-text-1000, 255 255 255));animation:show 0.4s ease;transition:0.4s;z-index:100}.ctr{box-sizing:border-box;display:inline-flex;height:100%;min-width:var(--rtk-space-40, 160px);align-items:center;padding-left:var(--rtk-space-3, 12px);padding-right:var(--rtk-space-2, 8px);-webkit-user-select:none;-moz-user-select:none;user-select:none;border-radius:var(--rtk-border-radius-md, 8px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity));--tw-shadow:0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);--tw-shadow-color:rgb(var(--rtk-colors-background-1000, 8 8 8));--tw-shadow:var(--tw-shadow-colored);pointer-events:auto}img{margin-right:var(--rtk-space-2, 8px);height:var(--rtk-space-0, 0px);width:var(--rtk-space-0, 0px);border-radius:9999px}img.loaded{height:var(--rtk-space-6, 24px);width:var(--rtk-space-6, 24px)}.message{margin-right:var(--rtk-space-2, 8px);max-width:var(--rtk-space-72, 288px) !important;font-size:14px !important;overflow:hidden !important;display:-webkit-box !important;-webkit-box-orient:vertical !important;-webkit-line-clamp:2 !important}.message p{margin:var(--rtk-space-0, 0px);margin-right:var(--rtk-space-1, 4px);display:inline-block}.message blockquote{display:none}rtk-icon.icon{margin-right:var(--rtk-space-2, 8px);height:var(--rtk-space-6, 24px);width:var(--rtk-space-6, 24px);color:rgb(var(--rtk-colors-text-900, 255 255 255 / 0.88))}button.dismiss{display:flex;height:var(--rtk-space-6, 24px);width:var(--rtk-space-6, 24px);align-items:center;justify-content:center;border-width:var(--rtk-border-width-none, 0);border-style:none;padding:var(--rtk-space-0, 0px);border-radius:var(--rtk-border-radius-sm, 4px);background-color:transparent;color:rgb(var(--rtk-colors-text-600, 255 255 255 / 0.52));outline-width:1px;outline-color:rgb(var(--rtk-colors-text-1000, 255 255 255))}button.dismiss:hover{cursor:pointer;color:rgb(var(--rtk-colors-text-1000, 255 255 255))}button.dismiss:focus-visible{outline-style:solid}button.dismiss{transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.dismiss rtk-icon{height:var(--rtk-space-5, 20px);width:var(--rtk-space-5, 20px)}rtk-button{border-radius:var(--rtk-border-radius-sm, 4px)}.right{margin-left:auto;display:flex;align-items:center;gap:var(--rtk-space-2, 8px)}:host(.exit){animation:exit 0.4s ease}@keyframes show{0%{opacity:0;transform:translateX(-120px)}100%{opacity:1;transform:translateX(0px)}}@keyframes exit{0%{opacity:1;transform:translateX(0)}100%{opacity:0;transform:translateX(-120px)}}:host([size='sm']){font-size:14px}";
15526
+ const rtkNotificationCss = ":host{line-height:initial;font-family:var(--rtk-font-family, sans-serif);font-feature-settings:normal;font-variation-settings:normal}p{margin:var(--rtk-space-0, 0px);padding:var(--rtk-space-0, 0px)}:host{pointer-events:none;display:block;height:var(--rtk-space-10, 40px);color:rgb(var(--rtk-colors-text-1000, 255 255 255));animation:show 0.4s ease;transition:0.4s;z-index:100}.ctr{box-sizing:border-box;display:inline-flex;height:100%;min-width:var(--rtk-space-40, 160px);align-items:center;padding-left:var(--rtk-space-3, 12px);padding-right:var(--rtk-space-2, 8px);-webkit-user-select:none;-moz-user-select:none;user-select:none;border-radius:var(--rtk-border-radius-md, 8px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity));--tw-shadow:0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);--tw-shadow-color:rgb(var(--rtk-colors-background-1000, 8 8 8));--tw-shadow:var(--tw-shadow-colored);pointer-events:auto}img{margin-right:var(--rtk-space-2, 8px);height:var(--rtk-space-0, 0px);width:var(--rtk-space-0, 0px);border-radius:9999px}img.loaded{height:var(--rtk-space-6, 24px);width:var(--rtk-space-6, 24px)}.message{margin-right:var(--rtk-space-2, 8px);max-width:var(--rtk-space-72, 288px) !important;font-size:14px !important;overflow:hidden !important;display:-webkit-box !important;-webkit-box-orient:vertical !important;-webkit-line-clamp:2 !important}.message p{margin:var(--rtk-space-0, 0px);margin-right:var(--rtk-space-1, 4px)}.message blockquote{display:none}rtk-icon.icon{margin-right:var(--rtk-space-2, 8px);height:var(--rtk-space-6, 24px);width:var(--rtk-space-6, 24px);color:rgb(var(--rtk-colors-text-900, 255 255 255 / 0.88))}button.dismiss{display:flex;height:var(--rtk-space-6, 24px);width:var(--rtk-space-6, 24px);align-items:center;justify-content:center;border-width:var(--rtk-border-width-none, 0);border-style:none;padding:var(--rtk-space-0, 0px);border-radius:var(--rtk-border-radius-sm, 4px);background-color:transparent;color:rgb(var(--rtk-colors-text-600, 255 255 255 / 0.52));outline-width:1px;outline-color:rgb(var(--rtk-colors-text-1000, 255 255 255))}button.dismiss:hover{cursor:pointer;color:rgb(var(--rtk-colors-text-1000, 255 255 255))}button.dismiss:focus-visible{outline-style:solid}button.dismiss{transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.dismiss rtk-icon{height:var(--rtk-space-5, 20px);width:var(--rtk-space-5, 20px)}rtk-button{border-radius:var(--rtk-border-radius-sm, 4px)}.right{margin-left:auto;display:flex;align-items:center;gap:var(--rtk-space-2, 8px)}:host(.exit){animation:exit 0.4s ease}@keyframes show{0%{opacity:0;transform:translateX(-120px)}100%{opacity:1;transform:translateX(0px)}}@keyframes exit{0%{opacity:1;transform:translateX(0)}100%{opacity:0;transform:translateX(-120px)}}:host([size='sm']){font-size:14px}";
15527
15527
  const RtkNotificationStyle0 = rtkNotificationCss;
15528
15528
 
15529
15529
  var __decorate$7$1 = function (decorators, target, key, desc) {
@@ -63016,6 +63016,20 @@ var __decorate$4 = function (decorators, target, key, desc) {
63016
63016
  return c > 3 && r && Object.defineProperty(target, key, r), r;
63017
63017
  };
63018
63018
  const RtkParticipantTile = class {
63019
+ onVideoRef(el) {
63020
+ if (!this.participant || !this.meeting || el === this.videoEl)
63021
+ return;
63022
+ this.videoEl = el;
63023
+ this.participant.registerVideoElement(this.videoEl, this.isPreview);
63024
+ this.tileLoad.emit({ participant: this.participant, videoElement: this.videoEl });
63025
+ }
63026
+ connectedCallback() {
63027
+ // set videoState before initial render and initialize listeners
63028
+ if (this.meeting)
63029
+ this.meetingChanged(this.meeting);
63030
+ else
63031
+ this.participantsChanged(this.participant);
63032
+ }
63019
63033
  constructor(hostRef) {
63020
63034
  registerInstance(this, hostRef);
63021
63035
  this.tileLoad = createEvent(this, "tileLoad", 7);
@@ -63051,20 +63065,7 @@ const RtkParticipantTile = class {
63051
63065
  if (this.playTimeout)
63052
63066
  clearTimeout(this.playTimeout);
63053
63067
  };
63054
- }
63055
- onVideoRef(el) {
63056
- if (!this.participant || !this.meeting || el === this.videoEl)
63057
- return;
63058
- this.videoEl = el;
63059
- this.participant.registerVideoElement(this.videoEl, this.isPreview);
63060
- this.tileLoad.emit({ participant: this.participant, videoElement: this.videoEl });
63061
- }
63062
- connectedCallback() {
63063
- // set videoState before initial render and initialize listeners
63064
- if (this.meeting)
63065
- this.meetingChanged(this.meeting);
63066
- else
63067
- this.participantsChanged(this.participant);
63068
+ this.mediaConnectionUpdateListener = this.mediaConnectionUpdateListener.bind(this);
63068
63069
  }
63069
63070
  disconnectedCallback() {
63070
63071
  if (this.playTimeout)
@@ -63095,7 +63096,8 @@ const RtkParticipantTile = class {
63095
63096
  this.videoEl && this.participant.registerVideoElement(this.videoEl, this.isPreview);
63096
63097
  participant.addListener('pinned', this.onPinned);
63097
63098
  participant.addListener('unpinned', this.onPinned);
63098
- this.meeting.meta.on('mediaConnectionUpdate', this.mediaConnectionUpdateListener.bind(this));
63099
+ this.meeting.meta.off('mediaConnectionUpdate', this.mediaConnectionUpdateListener);
63100
+ this.meeting.meta.on('mediaConnectionUpdate', this.mediaConnectionUpdateListener);
63099
63101
  }
63100
63102
  mediaConnectionUpdateListener() {
63101
63103
  var _a, _b, _c;
package/dist/esm/rtk-avatar_54.entry.js CHANGED
@@ -4924,7 +4924,7 @@ __decorate$8([
4924
4924
  ], RtkMuteAllConfirmation.prototype, "t", void 0);
4925
4925
  RtkMuteAllConfirmation.style = RtkMuteAllConfirmationStyle0;
4926
4926
 
4927
- const rtkNotificationCss = ":host{line-height:initial;font-family:var(--rtk-font-family, sans-serif);font-feature-settings:normal;font-variation-settings:normal}p{margin:var(--rtk-space-0, 0px);padding:var(--rtk-space-0, 0px)}:host{pointer-events:none;display:block;height:var(--rtk-space-10, 40px);color:rgb(var(--rtk-colors-text-1000, 255 255 255));animation:show 0.4s ease;transition:0.4s;z-index:100}.ctr{box-sizing:border-box;display:inline-flex;height:100%;min-width:var(--rtk-space-40, 160px);align-items:center;padding-left:var(--rtk-space-3, 12px);padding-right:var(--rtk-space-2, 8px);-webkit-user-select:none;-moz-user-select:none;user-select:none;border-radius:var(--rtk-border-radius-md, 8px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity));--tw-shadow:0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);--tw-shadow-color:rgb(var(--rtk-colors-background-1000, 8 8 8));--tw-shadow:var(--tw-shadow-colored);pointer-events:auto}img{margin-right:var(--rtk-space-2, 8px);height:var(--rtk-space-0, 0px);width:var(--rtk-space-0, 0px);border-radius:9999px}img.loaded{height:var(--rtk-space-6, 24px);width:var(--rtk-space-6, 24px)}.message{margin-right:var(--rtk-space-2, 8px);max-width:var(--rtk-space-72, 288px) !important;font-size:14px !important;overflow:hidden !important;display:-webkit-box !important;-webkit-box-orient:vertical !important;-webkit-line-clamp:2 !important}.message p{margin:var(--rtk-space-0, 0px);margin-right:var(--rtk-space-1, 4px);display:inline-block}.message blockquote{display:none}rtk-icon.icon{margin-right:var(--rtk-space-2, 8px);height:var(--rtk-space-6, 24px);width:var(--rtk-space-6, 24px);color:rgb(var(--rtk-colors-text-900, 255 255 255 / 0.88))}button.dismiss{display:flex;height:var(--rtk-space-6, 24px);width:var(--rtk-space-6, 24px);align-items:center;justify-content:center;border-width:var(--rtk-border-width-none, 0);border-style:none;padding:var(--rtk-space-0, 0px);border-radius:var(--rtk-border-radius-sm, 4px);background-color:transparent;color:rgb(var(--rtk-colors-text-600, 255 255 255 / 0.52));outline-width:1px;outline-color:rgb(var(--rtk-colors-text-1000, 255 255 255))}button.dismiss:hover{cursor:pointer;color:rgb(var(--rtk-colors-text-1000, 255 255 255))}button.dismiss:focus-visible{outline-style:solid}button.dismiss{transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.dismiss rtk-icon{height:var(--rtk-space-5, 20px);width:var(--rtk-space-5, 20px)}rtk-button{border-radius:var(--rtk-border-radius-sm, 4px)}.right{margin-left:auto;display:flex;align-items:center;gap:var(--rtk-space-2, 8px)}:host(.exit){animation:exit 0.4s ease}@keyframes show{0%{opacity:0;transform:translateX(-120px)}100%{opacity:1;transform:translateX(0px)}}@keyframes exit{0%{opacity:1;transform:translateX(0)}100%{opacity:0;transform:translateX(-120px)}}:host([size='sm']){font-size:14px}";
4927
+ const rtkNotificationCss = ":host{line-height:initial;font-family:var(--rtk-font-family, sans-serif);font-feature-settings:normal;font-variation-settings:normal}p{margin:var(--rtk-space-0, 0px);padding:var(--rtk-space-0, 0px)}:host{pointer-events:none;display:block;height:var(--rtk-space-10, 40px);color:rgb(var(--rtk-colors-text-1000, 255 255 255));animation:show 0.4s ease;transition:0.4s;z-index:100}.ctr{box-sizing:border-box;display:inline-flex;height:100%;min-width:var(--rtk-space-40, 160px);align-items:center;padding-left:var(--rtk-space-3, 12px);padding-right:var(--rtk-space-2, 8px);-webkit-user-select:none;-moz-user-select:none;user-select:none;border-radius:var(--rtk-border-radius-md, 8px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity));--tw-shadow:0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);--tw-shadow-color:rgb(var(--rtk-colors-background-1000, 8 8 8));--tw-shadow:var(--tw-shadow-colored);pointer-events:auto}img{margin-right:var(--rtk-space-2, 8px);height:var(--rtk-space-0, 0px);width:var(--rtk-space-0, 0px);border-radius:9999px}img.loaded{height:var(--rtk-space-6, 24px);width:var(--rtk-space-6, 24px)}.message{margin-right:var(--rtk-space-2, 8px);max-width:var(--rtk-space-72, 288px) !important;font-size:14px !important;overflow:hidden !important;display:-webkit-box !important;-webkit-box-orient:vertical !important;-webkit-line-clamp:2 !important}.message p{margin:var(--rtk-space-0, 0px);margin-right:var(--rtk-space-1, 4px)}.message blockquote{display:none}rtk-icon.icon{margin-right:var(--rtk-space-2, 8px);height:var(--rtk-space-6, 24px);width:var(--rtk-space-6, 24px);color:rgb(var(--rtk-colors-text-900, 255 255 255 / 0.88))}button.dismiss{display:flex;height:var(--rtk-space-6, 24px);width:var(--rtk-space-6, 24px);align-items:center;justify-content:center;border-width:var(--rtk-border-width-none, 0);border-style:none;padding:var(--rtk-space-0, 0px);border-radius:var(--rtk-border-radius-sm, 4px);background-color:transparent;color:rgb(var(--rtk-colors-text-600, 255 255 255 / 0.52));outline-width:1px;outline-color:rgb(var(--rtk-colors-text-1000, 255 255 255))}button.dismiss:hover{cursor:pointer;color:rgb(var(--rtk-colors-text-1000, 255 255 255))}button.dismiss:focus-visible{outline-style:solid}button.dismiss{transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.dismiss rtk-icon{height:var(--rtk-space-5, 20px);width:var(--rtk-space-5, 20px)}rtk-button{border-radius:var(--rtk-border-radius-sm, 4px)}.right{margin-left:auto;display:flex;align-items:center;gap:var(--rtk-space-2, 8px)}:host(.exit){animation:exit 0.4s ease}@keyframes show{0%{opacity:0;transform:translateX(-120px)}100%{opacity:1;transform:translateX(0px)}}@keyframes exit{0%{opacity:1;transform:translateX(0)}100%{opacity:0;transform:translateX(-120px)}}:host([size='sm']){font-size:14px}";
4928
4928
  const RtkNotificationStyle0 = rtkNotificationCss;
4929
4929
 
4930
4930
  var __decorate$7 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
package/dist/esm/rtk-camera-selector_2.entry.js CHANGED
@@ -125,6 +125,20 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
125
125
  return c > 3 && r && Object.defineProperty(target, key, r), r;
126
126
  };
127
127
  const RtkParticipantTile = class {
128
+ onVideoRef(el) {
129
+ if (!this.participant || !this.meeting || el === this.videoEl)
130
+ return;
131
+ this.videoEl = el;
132
+ this.participant.registerVideoElement(this.videoEl, this.isPreview);
133
+ this.tileLoad.emit({ participant: this.participant, videoElement: this.videoEl });
134
+ }
135
+ connectedCallback() {
136
+ // set videoState before initial render and initialize listeners
137
+ if (this.meeting)
138
+ this.meetingChanged(this.meeting);
139
+ else
140
+ this.participantsChanged(this.participant);
141
+ }
128
142
  constructor(hostRef) {
129
143
  registerInstance(this, hostRef);
130
144
  this.tileLoad = createEvent(this, "tileLoad", 7);
@@ -160,20 +174,7 @@ const RtkParticipantTile = class {
160
174
  if (this.playTimeout)
161
175
  clearTimeout(this.playTimeout);
162
176
  };
163
- }
164
- onVideoRef(el) {
165
- if (!this.participant || !this.meeting || el === this.videoEl)
166
- return;
167
- this.videoEl = el;
168
- this.participant.registerVideoElement(this.videoEl, this.isPreview);
169
- this.tileLoad.emit({ participant: this.participant, videoElement: this.videoEl });
170
- }
171
- connectedCallback() {
172
- // set videoState before initial render and initialize listeners
173
- if (this.meeting)
174
- this.meetingChanged(this.meeting);
175
- else
176
- this.participantsChanged(this.participant);
177
+ this.mediaConnectionUpdateListener = this.mediaConnectionUpdateListener.bind(this);
177
178
  }
178
179
  disconnectedCallback() {
179
180
  if (this.playTimeout)
@@ -204,7 +205,8 @@ const RtkParticipantTile = class {
204
205
  this.videoEl && this.participant.registerVideoElement(this.videoEl, this.isPreview);
205
206
  participant.addListener('pinned', this.onPinned);
206
207
  participant.addListener('unpinned', this.onPinned);
207
- this.meeting.meta.on('mediaConnectionUpdate', this.mediaConnectionUpdateListener.bind(this));
208
+ this.meeting.meta.off('mediaConnectionUpdate', this.mediaConnectionUpdateListener);
209
+ this.meeting.meta.on('mediaConnectionUpdate', this.mediaConnectionUpdateListener);
208
210
  }
209
211
  mediaConnectionUpdateListener() {
210
212
  var _a, _b, _c;
package/dist/realtimekit-ui/p-13e1bf42.entry.js ADDED
@@ -0,0 +1 @@
1
+ import{r as t,w as n,h as i,H as r,c as a}from"./p-0ee570cd.js";import{e,h as o,c as s,L as p}from"./p-3c9aa206.js";import{S as d}from"./p-e51bb952.js";import{R as c}from"./p-c8eaa707.js";var l=function(t,n,i,r){var a,e=arguments.length,o=e<3?n:null===r?r=Object.getOwnPropertyDescriptor(n,i):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)o=Reflect.decorate(t,n,i,r);else for(var s=t.length-1;s>=0;s--)(a=t[s])&&(o=(e<3?a(o):e>3?a(n,i,o):a(n,i))||o);return e>3&&o&&Object.defineProperty(n,i,o),o};const h=class{constructor(n){t(this,n),this.iconPack=e,this.variant="full",this.t=o(),this.videoDevices=[],this.canProduceVideo=!0,this.stageStateListener=()=>{this.canProduceVideo="ALLOWED"===this.meeting.self.permissions.canProduceVideo},this.deviceListUpdateListener=({devices:t})=>{this.videoDevices=t.filter((t=>"videoinput"===t.kind))},this.deviceUpdateListener=({device:t})=>{"videoinput"===t.kind&&(this.currentDevice=t)},this.mediaPermissionUpdateListener=async({kind:t,message:n})=>{this.meeting&&"video"===t&&"ACCEPTED"===n&&(this.videoDevices=await this.meeting.self.getVideoDevices())}}meetingChanged(t){var i,r,a;t&&(null===(i=t.self)||void 0===i||i.addListener("deviceListUpdate",this.deviceListUpdateListener),null===(r=t.self)||void 0===r||r.addListener("deviceUpdate",this.deviceUpdateListener),null===(a=t.self)||void 0===a||a.addListener("mediaPermissionUpdate",this.mediaPermissionUpdateListener),n((async()=>{var n,i;const r=await t.self.getVideoDevices(),a=null===(n=t.self.getCurrentDevices())||void 0===n?void 0:n.video;this.videoDevices=null!=a?[null!==(i=r.find((t=>t.deviceId===a.deviceId)))&&void 0!==i?i:a,...r.filter((t=>t.deviceId!==a.deviceId))]:r})))}connectedCallback(){this.meetingChanged(this.meeting)}disconnectedCallback(){var t,n,i,r,a;null===(n=null===(t=this.meeting)||void 0===t?void 0:t.stage)||void 0===n||n.removeListener("stageStatusUpdate",this.stageStateListener),null===(i=this.meeting)||void 0===i||i.self.removeListener("deviceListUpdate",this.deviceListUpdateListener),null===(r=this.meeting)||void 0===r||r.self.removeListener("deviceUpdate",this.deviceUpdateListener),null===(a=this.meeting)||void 0===a||a.self.removeListener("mediaPermissionUpdate",this.mediaPermissionUpdateListener)}async setDevice(t){var n;const i=this.videoDevices.find((n=>n.deviceId===t));this.currentDevice=i,null!=i&&await(null===(n=this.meeting)||void 0===n?void 0:n.self.setDevice(i))}render(){if(!this.meeting)return null;let t=0;return i(r,null,this.canProduceVideo&&i("div",{class:"group container "+this.variant,part:"camera-selection"},i("label",null,"inline"!==this.variant&&this.t("camera"),i("rtk-icon",{icon:this.iconPack.video_on,size:"sm"})),i("div",{class:"row"},i("select",{class:"rtk-select",onChange:t=>this.setDevice(t.target.value)},this.videoDevices.map((({deviceId:n,label:r})=>{var a;return i("option",{selected:(null===(a=this.currentDevice)||void 0===a?void 0:a.deviceId)===n,value:n},r||"Camera "+ ++t)}))))))}static get watchers(){return{meeting:["meetingChanged"]}}};l([d()],h.prototype,"meeting",void 0),l([d()],h.prototype,"iconPack",void 0),l([d()],h.prototype,"t",void 0),h.style=".rtk-select{--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-700, 44 44 44) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-1000, 255 255 255))}.rtk-select:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)}.rtk-select{display:block;border-radius:var(--rtk-border-radius-sm, 4px);border-width:var(--rtk-border-width-none, 0);border-style:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:var(--rtk-space-3, 12px);font-size:16px;--icon-size:var(--rtk-select-chevron-size, var(--rtk-space-6, 24px));--icon-right-position:var(--rtk-select-chevron-right-position, var(--rtk-space-2, 8px));background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e\");background-position:right var(--icon-right-position) center;background-repeat:no-repeat;background-size:var(--icon-size) var(--icon-size);padding-right:calc(var(--icon-right-position) * 5);width:100%;max-width:100%;text-overflow:ellipsis}.inline .rtk-select{margin-top:var(--rtk-space-1, 4px);width:100%;padding-top:var(--rtk-space-1, 4px);padding-bottom:var(--rtk-space-1, 4px);padding-left:var(--rtk-space-1\\.5, 6px);padding-right:var(--rtk-space-1\\.5, 6px);padding-right:var(--rtk-space-8, 32px);font-size:14px}.row{margin-bottom:var(--rtk-space-2, 8px);display:flex;width:100%;align-items:center;justify-content:space-between;gap:var(--rtk-space-3, 12px)}.group{margin-top:var(--rtk-space-2, 8px);margin-bottom:var(--rtk-space-2, 8px)}.group>*{margin-bottom:var(--rtk-space-2, 8px)}.group>*:last-child{margin-bottom:var(--rtk-space-0, 0px)}.group select{flex:1 1 0%}.group{margin-top:var(--rtk-space-0, 0px);margin-bottom:var(--rtk-space-0, 0px)}.group>*{margin-bottom:var(--rtk-space-0, 0px)}label{display:flex;-webkit-user-select:none;-moz-user-select:none;user-select:none;align-items:center;gap:var(--rtk-space-1, 4px);font-size:14px}.inline.container{display:flex;align-items:center;justify-content:flex-start;gap:var(--rtk-space-2, 8px);padding-left:var(--rtk-space-2, 8px);padding-right:var(--rtk-space-2, 8px)}";var v=function(t,n,i,r){var a,e=arguments.length,o=e<3?n:null===r?r=Object.getOwnPropertyDescriptor(n,i):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)o=Reflect.decorate(t,n,i,r);else for(var s=t.length-1;s>=0;s--)(a=t[s])&&(o=(e<3?a(o):e>3?a(n,i,o):a(n,i))||o);return e>3&&o&&Object.defineProperty(n,i,o),o};const g=class{onVideoRef(t){this.participant&&this.meeting&&t!==this.videoEl&&(this.videoEl=t,this.participant.registerVideoElement(this.videoEl,this.isPreview),this.tileLoad.emit({participant:this.participant,videoElement:this.videoEl}))}connectedCallback(){this.meeting?this.meetingChanged(this.meeting):this.participantsChanged(this.participant)}constructor(n){t(this,n),this.tileLoad=a(this,"tileLoad",7),this.tileUnload=a(this,"tileUnload",7),this.isPinned=!1,this.mediaConnectionError=!1,this.nameTagPosition="bottom-left",this.isPreview=!1,this.config=s(),this.variant="solid",this.iconPack=e,this.t=o(),this.onPinned=({isPinned:t})=>{this.isPinned=t},this.isSelf=()=>{var t;return this.isPreview||this.participant.id===(null===(t=this.meeting)||void 0===t?void 0:t.self.id)},this.onPause=t=>{var n,i;this.isSelf()&&(null===(n=this.meeting)||void 0===n?void 0:n.__internals__.features.hasFeature(p.PLAY_PARTICIPANT_TILE_VIDEO_ON_PAUSE))&&(this.meeting.__internals__.logger.warn(`Video player paused for ${this.participant.id} isSelf: ${this.isSelf()}`),null===(i=null==t?void 0:t.target)||void 0===i||i.play())},this.onPlaying=()=>{this.playTimeout&&clearTimeout(this.playTimeout)},this.mediaConnectionUpdateListener=this.mediaConnectionUpdateListener.bind(this)}disconnectedCallback(){this.playTimeout&&clearTimeout(this.playTimeout),null!=this.participant&&(this.participant.deregisterVideoElement(this.videoEl,this.isPreview),this.participant.removeListener("pinned",this.onPinned),this.participant.removeListener("unpinned",this.onPinned),this.meeting.meta.off("mediaConnectionUpdate",this.mediaConnectionUpdateListener),this.tileUnload.emit(this.participant))}meetingChanged(t){t&&this.participantsChanged(this.participant)}participantsChanged(t){t&&(this.meeting?(this.isPinned=t.isPinned,this.videoEl&&this.participant.registerVideoElement(this.videoEl,this.isPreview),t.addListener("pinned",this.onPinned),t.addListener("unpinned",this.onPinned),this.meeting.meta.off("mediaConnectionUpdate",this.mediaConnectionUpdateListener),this.meeting.meta.on("mediaConnectionUpdate",this.mediaConnectionUpdateListener)):this.isPreview&&this.videoEl&&this.participant.registerVideoElement(this.videoEl,this.isPreview))}mediaConnectionUpdateListener(){var t,n,i;const{recv:r,send:a}=null!==(i=null===(n=null===(t=this.meeting)||void 0===t?void 0:t.meta)||void 0===n?void 0:n.mediaState)&&void 0!==i?i:{};this.mediaConnectionError="connected"!==(null==r?void 0:r.state)&&!this.isSelf()||!("connected"===(null==a?void 0:a.state)||!this.isSelf())}isMirrored(){var t;if(null!=this.participant&&this.isSelf()){const n=this.states,i=null===(t=null==n?void 0:n.prefs)||void 0===t?void 0:t.mirrorVideo;if("boolean"==typeof i)return i}return!1}render(){var t,n,a;if(!this.meeting)return null;const e={meeting:this.meeting,size:this.size,states:this.states,config:this.config,iconPack:this.iconPack,t:this.t};return i(r,null,i("video",{ref:t=>this.onVideoRef(t),class:{mirror:this.isMirrored(),[null!==(a=null===(n=null===(t=this.config)||void 0===t?void 0:t.config)||void 0===n?void 0:n.videoFit)&&void 0!==a?a:"cover"]:!0},onPlaying:this.onPlaying,onPause:this.onPause,autoPlay:!0,playsInline:!0,muted:!0,part:"video"}),this.isPinned&&i("rtk-icon",{class:"pinned-icon",icon:this.iconPack.pin,"aria-label":this.t("pinned"),part:"pinned-icon"}),this.mediaConnectionError&&i("div",{class:"network-container",part:"network-indicator"},i("rtk-icon",{class:"network-icon",icon:this.iconPack.disconnected,"aria-label":this.t("pinned"),part:"pinned-icon"})),i("slot",null,i(c,{element:"rtk-participant-tile",defaults:e,childProps:{participant:this.participant},deepProps:!0,onlyChildren:!0})))}static get watchers(){return{meeting:["meetingChanged"],participant:["participantsChanged"]}}};v([d()],g.prototype,"meeting",void 0),v([d()],g.prototype,"states",void 0),v([d()],g.prototype,"config",void 0),v([d()],g.prototype,"iconPack",void 0),v([d()],g.prototype,"t",void 0),g.style=":host {\n line-height: initial;\n font-family: var(--rtk-font-family, sans-serif);\n\n font-feature-settings: normal;\n font-variation-settings: normal;\n}\n\np {\n margin: var(--rtk-space-0, 0px);\n padding: var(--rtk-space-0, 0px);\n}\n\n\n:host {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n aspect-ratio: 16 / 9;\n height: var(--rtk-space-56, 224px);\n overflow: hidden;\n border-radius: var(--rtk-border-radius-lg, 12px);\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n --tw-bg-opacity: 1;\n background-color: rgba(var(--rtk-colors-video-bg, 24 24 24) / var(--tw-bg-opacity));\n\n transition-property: var(--rtk-transition-property, all);\n transition-duration: 150ms;\n container-type: inline-size;\n container-name: participanttile;\n}\n\n@media (prefers-reduced-motion) {\n /* No transitions when disabled */\n :host {\n --rtk-transition-property: none;\n }\n}\n\nrtk-avatar {\n z-index: -1;\n}\n\n/**\n NOTE: provided :slotted(rtk-name-tag) & rtk-name-tag separately\n because ::slotted isn't applied on default slots.\n*/\n\n::slotted(rtk-name-tag), \nrtk-name-tag {\n position: absolute;\n left: var(--rtk-space-3, 12px);\n bottom: var(--rtk-space-3, 12px);\n}\n\n:host([size='sm'][variant='solid']) ::slotted(rtk-name-tag), \n :host([size='sm'][variant='solid']) rtk-name-tag {\n left: var(--rtk-space-2, 8px);\n bottom: var(--rtk-space-2, 8px);\n height: var(--rtk-space-4, 16px);\n}\n\n::slotted(rtk-network-indicator), \nrtk-network-indicator {\n position: absolute;\n right: var(--rtk-space-3, 12px);\n bottom: var(--rtk-space-3, 12px);\n}\n\n:host([size='sm']) ::slotted(rtk-network-indicator), \n :host([size='sm']) rtk-network-indicator {\n right: var(--rtk-space-2, 8px);\n bottom: var(--rtk-space-2, 8px);\n}\n\nvideo {\n position: absolute;\n height: 100%;\n width: 100%;\n border-radius: var(--rtk-border-radius-lg, 12px);\n}\n\nvideo.contain {\n -o-object-fit: contain;\n object-fit: contain;\n}\n\nvideo.cover {\n -o-object-fit: cover;\n object-fit: cover;\n}\n\nvideo::-webkit-media-controls {\n display: none !important;\n}\n\n.pinned-icon {\n position: absolute;\n left: var(--rtk-space-3, 12px);\n top: var(--rtk-space-3, 12px);\n height: var(--rtk-space-5, 20px);\n width: var(--rtk-space-5, 20px);\n padding: var(--rtk-space-1, 4px);\n border-radius: var(--rtk-border-radius-md, 8px);\n --tw-bg-opacity: 1;\n background-color: rgba(var(--rtk-colors-background-700, 44 44 44) / var(--tw-bg-opacity));\n}\n\n.network-container {\n position: absolute;\n right: var(--rtk-space-3, 12px);\n bottom: var(--rtk-space-3, 12px);\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: var(--rtk-space-2, 8px);\n font-size: 12px;\n border-radius: var(--rtk-border-radius-md, 8px);\n --tw-bg-opacity: 1;\n background-color: rgba(var(--rtk-colors-background-700, 44 44 44) / var(--tw-bg-opacity));\n}\n.network-icon {\n height: var(--rtk-space-5, 20px);\n width: var(--rtk-space-5, 20px);\n --tw-text-opacity: 1;\n color: rgba(var(--rtk-colors-danger, 255 45 45) / var(--tw-text-opacity));\n}\n\n:host([size='sm']) .pinned-icon {\n top: var(--rtk-space-2, 8px);\n left: var(--rtk-space-2, 8px);\n}\n\n:host([variant='gradient']) ::slotted(rtk-audio-visualizer), \n :host([variant='gradient']) rtk-audio-visualizer {\n position: absolute;\n top: var(--rtk-space-2, 8px);\n right: var(--rtk-space-2, 8px);\n border-radius: 9999px;\n --tw-bg-opacity: 1;\n background-color: rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-bg-opacity));\n padding: var(--rtk-space-2, 8px);\n}\n\n:host([variant='gradient']) ::slotted(rtk-name-tag), \n :host([variant='gradient']) rtk-name-tag {\n bottom: var(--rtk-space-0, 0px);\n left: var(--rtk-space-0, 0px);\n display: flex;\n width: 100%;\n align-items: center;\n justify-content: center;\n text-align: center;\n background-color: transparent;\n background-image: linear-gradient(to top, var(--tw-gradient-stops));\n --tw-gradient-from: rgb(var(--rtk-colors-background-1000, 8 8 8));\n --tw-gradient-to: rgba(var(--rtk-colors-background-1000, 8 8 8) / 0);\n --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);\n --tw-gradient-to: transparent;\n}\n\nvideo.mirror {\n transform: scaleX(-1);\n}\n\n/** Name tag positions */\n\n:host([name-tag-position='bottom-right']) ::slotted(rtk-name-tag), \n :host([name-tag-position='bottom-right']) rtk-name-tag {\n left: auto;\n right: var(--rtk-space-3, 12px);\n}\n\n:host([name-tag-position='bottom-center']) ::slotted(rtk-name-tag), \n :host([name-tag-position='bottom-center']) rtk-name-tag {\n left: auto;\n right: auto;\n}\n\n:host([name-tag-position='top-left']) ::slotted(rtk-name-tag), \n :host([name-tag-position='top-left']) rtk-name-tag {\n top: var(--rtk-space-3, 12px);\n bottom: auto;\n}\n\n:host([name-tag-position='top-right']) ::slotted(rtk-name-tag), \n :host([name-tag-position='top-right']) rtk-name-tag {\n top: var(--rtk-space-3, 12px);\n right: var(--rtk-space-3, 12px);\n left: auto;\n bottom: auto;\n}\n\n:host([name-tag-position='top-center']) ::slotted(rtk-name-tag), \n :host([name-tag-position='top-center']) rtk-name-tag {\n left: auto;\n right: auto;\n bottom: auto;\n top: var(--rtk-space-3, 12px);\n}\n\n@media only screen and (max-height: 480px) and (orientation: landscape) {\n :host([size='sm']) {\n border-radius: var(--rtk-border-radius-sm, 4px);\n }\n\n :host([size='sm']) > video {\n border-radius: var(--rtk-border-radius-sm, 4px);\n }\n\n ::slotted(rtk-avatar), \n rtk-avatar {\n height: var(--rtk-space-12, 48px);\n width: var(--rtk-space-12, 48px);\n }\n :host([size='sm'][variant='solid']) ::slotted(rtk-name-tag),\n :host([size='sm'][variant='solid']) rtk-name-tag {\n transform-origin: -2% 100%;\n transform: scale(0.6);\n z-index: 10;\n left: var(--rtk-space-0, 0px);\n bottom: var(--rtk-space-0, 0px);\n border-radius: var(--rtk-border-radius-none, 0);\n }\n}\n\n@media only screen and (max-width: 480px) and (orientation: portrait) {\n :host([size='sm']) {\n border-radius: var(--rtk-border-radius-sm, 4px);\n }\n\n :host([size='sm']) > video {\n border-radius: var(--rtk-border-radius-sm, 4px);\n }\n\n ::slotted(rtk-avatar), \n rtk-avatar {\n height: var(--rtk-space-12, 48px);\n width: var(--rtk-space-12, 48px);\n }\n :host([size='sm'][variant='solid']) ::slotted(rtk-name-tag),\n :host([size='sm'][variant='solid']) rtk-name-tag {\n transform-origin: -5% 110%;\n transform: scale(0.6);\n z-index: 10;\n left: var(--rtk-space-0, 0px);\n bottom: var(--rtk-space-0, 0px);\n border-radius: var(--rtk-border-radius-none, 0);\n }\n}\n\n@container participanttile (max-width: 300px) {\n ::slotted(rtk-name-tag),\n rtk-name-tag {\n transform-origin: 0 100%;\n transform: scale(0.8);\n }\n\n ::slotted(rtk-avatar), \n rtk-avatar {\n height: var(--rtk-space-8, 32px) !important;\n width: var(--rtk-space-8, 32px) !important;\n }\n}\n\n@container participanttile (max-width: 150px) {\n ::slotted(rtk-name-tag),\n rtk-name-tag[variant='solid'] {\n transform-origin: -10% 130%;\n transform: scale(0.6);\n z-index: 10;\n border-radius: 9999px;\n }\n\n ::slotted(rtk-avatar), \n rtk-avatar {\n height: 6 !important;\n width: 6 !important;\n }\n}\n";export{h as rtk_camera_selector,g as rtk_participant_tile}