@cloudflare/realtimekit-ui 1.0.4-staging.3 → 1.0.4-staging.4

package/dist/esm/rtk-avatar_54.entry.js

@@ -4530,6 +4530,10 @@ const RtkMeeting = class {
         this.setupStoreRequestListener();
         this.setupStateUpdateListener();
         this.meetingChanged(this.meeting);
+        this.iconPackChanged(this.iconPack);
+        this.tChanged(this.t);
+        this.configChanged(this.config);
+        this.sizeChanged(this.size);
         this.resizeObserver = new index(() => this.handleResize());
         this.resizeObserver.observe(this.host);
         if (this.applyDesignSystem &&
@@ -4666,11 +4670,31 @@ const RtkMeeting = class {
         }
         window.removeEventListener('rtkError', this.authErrorListener);
     }
-    onSizeChange(newSize) {
+    iconPackChanged(newIconPack) {
+        if (this.peerStore) {
+            this.peerStore.state.iconPack = newIconPack;
+        }
+    }
+    tChanged(newT) {
+        if (this.peerStore) {
+            this.peerStore.state.t = newT;
+        }
+    }
+    sizeChanged(newSize) {
         if (this.peerStore) {
             this.peerStore.state.size = newSize;
         }
     }
+    configChanged(config) {
+        if (this.peerStore) {
+            this.peerStore.state.config = config;
+        }
+        if ((config === null || config === void 0 ? void 0 : config.designTokens) &&
+            typeof document !== 'undefined' &&
+            (this.peerStore || uiStore).state.states.activeDebugger !== true) {
+            provideRtkDesignSystem(document.documentElement, config.designTokens);
+        }
+    }
     handleResize() {
         this.size = getSize(this.host.clientWidth);
     }
@@ -4711,7 +4735,10 @@ const RtkMeeting = class {
     get host() { return getElement(this); }
     static get watchers() { return {
         "meeting": ["meetingChanged"],
-        "size": ["onSizeChange"]
+        "iconPack": ["iconPackChanged"],
+        "t": ["tChanged"],
+        "size": ["sizeChanged"],
+        "config": ["configChanged"]
     }; }
 };
 RtkMeeting.style = RtkMeetingStyle0;

package/dist/esm/rtk-ui-provider.entry.js

@@ -76,11 +76,11 @@ const RtkUiProvider = class {
         }
         // Listen for store requests from child components
         this.setupStoreRequestListener();
-        this.onMeetingChange(this.meeting);
-        this.onIconPackChange(this.iconPack);
-        this.onTChange(this.t);
-        this.onConfigChange(this.config);
-        this.onSizeChange(this.size);
+        this.meetingChanged(this.meeting);
+        this.iconPackChanged(this.iconPack);
+        this.tChanged(this.t);
+        this.configChanged(this.config);
+        this.sizeChanged(this.size);
         this.resizeObserver = new ResizeObserver(() => this.handleResize());
         this.resizeObserver.observe(this.host);
     }
@@ -148,7 +148,7 @@ const RtkUiProvider = class {
         };
         this.host.addEventListener('rtkRequestStore', this.storeRequestListener);
     }
-    onMeetingChange(meeting) {
+    meetingChanged(meeting) {
         if (meeting) {
             this.peerStore = createPeerStore({
                 meeting,
@@ -193,17 +193,17 @@ const RtkUiProvider = class {
             window.removeEventListener('rtkError', this.authErrorListener);
         }
     }
-    onIconPackChange(newIconPack) {
+    iconPackChanged(newIconPack) {
         if (this.peerStore) {
             this.peerStore.state.iconPack = newIconPack;
         }
     }
-    onTChange(newT) {
+    tChanged(newT) {
         if (this.peerStore) {
             this.peerStore.state.t = newT;
         }
     }
-    onConfigChange(config) {
+    configChanged(config) {
         if (this.peerStore) {
             this.peerStore.state.config = config;
         }
@@ -213,7 +213,7 @@ const RtkUiProvider = class {
             provideRtkDesignSystem(document.documentElement, config.designTokens);
         }
     }
-    onSizeChange(newSize) {
+    sizeChanged(newSize) {
         if (this.peerStore) {
             this.peerStore.state.size = newSize;
         }
@@ -227,11 +227,11 @@ const RtkUiProvider = class {
     }
     get host() { return getElement(this); }
     static get watchers() { return {
-        "meeting": ["onMeetingChange"],
-        "iconPack": ["onIconPackChange"],
-        "t": ["onTChange"],
-        "config": ["onConfigChange"],
-        "size": ["onSizeChange"]
+        "meeting": ["meetingChanged"],
+        "iconPack": ["iconPackChanged"],
+        "t": ["tChanged"],
+        "config": ["configChanged"],
+        "size": ["sizeChanged"]
     }; }
 };
 RtkUiProvider.style = RtkUiProviderStyle0;

package/dist/realtimekit-ui/p-290f8f4a.entry.js

@@ -0,0 +1 @@
+import{r as t,c as i,h as e,H as s,a as h}from"./p-0ee570cd.js";import{e as o,h as n,c as r,u as a,b as d}from"./p-912c0afc.js";import{d as c,p}from"./p-390dc08f.js";import{g}from"./p-96be234f.js";const m=class{constructor(e){t(this,e),this.statesUpdate=i(this,"rtkStatesUpdate",7),this.peerStore=null,this.providerId="provider-"+Math.floor(100*Math.random()),this.meeting=null,this.iconPack=o,this.t=n(),this.config=r(),this.mode="fixed",this.showSetupScreen=!1,this.handleResize=()=>{this.size=g(this.host.clientWidth)},this.roomJoinedListener=()=>{this.updateStates({meeting:"joined"})},this.waitlistedListener=()=>{this.updateStates({meeting:"waiting"})},this.roomLeftListener=({state:t})=>{"disconnected"!==t&&"failed"!==t&&this.updateStates({meeting:"ended",roomLeftState:t})},this.mediaPermissionUpdateListener=({kind:t,message:i})=>{!["audio","video"].includes(t)||"DENIED"!==i&&"SYSTEM_DENIED"!==i||!0===(this.peerStore||a).state.states.activeDebugger||this.updateStates({activePermissionsMessage:{enabled:!0,kind:t}})},this.socketConnectionUpdateListener=({state:t})=>{"failed"===t&&setTimeout((()=>{this.meeting.leave("disconnected")}),1e4)},this.handleChangingMeeting=t=>{this.updateStates({activeBreakoutRoomsManager:Object.assign(Object.assign({},this.peerStore.state.states.activeBreakoutRoomsManager),{destinationMeetingId:t})})}}connectedCallback(){"undefined"!=typeof window&&(this.authErrorListener=t=>{t.detail.message.includes("401")&&this.updateStates({meeting:"ended",roomLeftState:"unauthorized"})},window.addEventListener("rtkError",this.authErrorListener)),this.setupStoreRequestListener(),this.meetingChanged(this.meeting),this.iconPackChanged(this.iconPack),this.tChanged(this.t),this.configChanged(this.config),this.sizeChanged(this.size),this.resizeObserver=new ResizeObserver((()=>this.handleResize())),this.resizeObserver.observe(this.host)}disconnectedCallback(){this.resizeObserver.disconnect(),window.removeEventListener("rtkError",this.authErrorListener),this.storeRequestListener&&this.host.removeEventListener("rtkRequestStore",this.storeRequestListener),this.stateUpdateListener&&this.host.removeEventListener("rtkStateUpdate",this.stateUpdateListener),this.meeting&&(this.meeting.self.removeListener("roomLeft",this.roomLeftListener),this.meeting.self.removeListener("roomJoined",this.roomJoinedListener),this.meeting.self.removeListener("waitlisted",this.waitlistedListener),this.meeting.self.removeListener("mediaPermissionUpdate",this.mediaPermissionUpdateListener),this.meeting.meta.removeListener("socketConnectionUpdate",this.socketConnectionUpdateListener))}updateStates(t){const i=this.peerStore||a,e=Object.assign({},i.state.states);i.state.states=c(e,t),this.statesUpdate.emit(i.state.states);const s=new CustomEvent("rtkStatesUpdate",{detail:i.state.states,bubbles:!0,composed:!0});this.host.dispatchEvent(s)}setupStateUpdateListener(){this.stateUpdateListener&&this.host.removeEventListener("rtkStateUpdate",this.stateUpdateListener),this.stateUpdateListener=t=>{this.updateStates(t.detail)},this.host.addEventListener("rtkStateUpdate",this.stateUpdateListener)}setupStoreRequestListener(){this.storeRequestListener&&this.host.removeEventListener("rtkRequestStore",this.storeRequestListener),this.storeRequestListener=t=>{if(!this.peerStore)return;const i=new CustomEvent("rtkProvideStore",{detail:{store:this.peerStore,requestId:t.detail.requestId}});document.dispatchEvent(i),t.stopPropagation()},this.host.addEventListener("rtkRequestStore",this.storeRequestListener)}meetingChanged(t){t&&(this.peerStore=d({meeting:t,config:this.config,iconPack:this.iconPack,t:this.t,size:this.size,providerId:this.providerId}),document.dispatchEvent(new CustomEvent("rtkPeerStoreReady",{detail:{peerId:t.self.id}}))),this.setupStateUpdateListener(),t&&((this.peerStore||a).state.meeting=t,this.updateStates({viewType:t.meta.viewType}),t.self.addListener("roomJoined",this.roomJoinedListener),t.self.addListener("waitlisted",this.waitlistedListener),t.self.addListener("roomLeft",this.roomLeftListener),t.self.addListener("mediaPermissionUpdate",this.mediaPermissionUpdateListener),t.meta.addListener("socketConnectionUpdate",this.socketConnectionUpdateListener),t.connectedMeetings.supportsConnectedMeetings&&t.connectedMeetings.once("changingMeeting",this.handleChangingMeeting),t.self.roomJoined?this.updateStates({meeting:"joined"}):this.showSetupScreen?this.updateStates({meeting:"setup"}):t.joinRoom(),window.removeEventListener("rtkError",this.authErrorListener))}iconPackChanged(t){this.peerStore&&(this.peerStore.state.iconPack=t)}tChanged(t){this.peerStore&&(this.peerStore.state.t=t)}configChanged(t){this.peerStore&&(this.peerStore.state.config=t),(null==t?void 0:t.designTokens)&&"undefined"!=typeof document&&!0!==(this.peerStore||a).state.states.activeDebugger&&p(document.documentElement,t.designTokens)}sizeChanged(t){this.peerStore&&(this.peerStore.state.size=t)}render(){return this.meeting?e(s,null,e("slot",null)):null}get host(){return h(this)}static get watchers(){return{meeting:["meetingChanged"],iconPack:["iconPackChanged"],t:["tChanged"],config:["configChanged"],size:["sizeChanged"]}}};m.style=":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{box-sizing:border-box;display:flex;flex-direction:column;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-1000, 8 8 8) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-900, 255 255 255 / 0.88));overflow:hidden;position:fixed;top:var(--rtk-space-0, 0px);right:var(--rtk-space-0, 0px);bottom:var(--rtk-space-0, 0px);left:var(--rtk-space-0, 0px);height:100%;width:100%}:host([mode='fill']){position:relative}";export{m as rtk_ui_provider}