@cloudflare/realtimekit-ui 1.0.3 → 1.0.4-staging.2

package/dist/collection/components/rtk-menu/rtk-menu.js

@@ -59,7 +59,7 @@ export class RtkMenu {
         });
     }
     render() {
-        return (h(Host, { key: 'b276110eb5171b15f815bfe7a96663e01f899e96' }, h("span", { key: '8bfa076de490cee6929b3a5da3d90f7741795dd5', id: "trigger", ref: (el) => (this.triggerEl = el), onClick: () => {
+        return (h(Host, { key: 'bd41e5e2f0d26ac7b532ac85d1904cf6c0307fc8' }, h("span", { key: 'dcdb7df85f283aa37efd82d6f014371e655dab23', id: "trigger", ref: (el) => (this.triggerEl = el), onClick: () => {
                 this.clickedThis = true;
                 if (this.menuListEl.style.display !== 'block') {
                     this.menuListEl.style.display = 'block';
@@ -68,7 +68,7 @@ export class RtkMenu {
                 else {
                     this.menuListEl.style.display = 'none';
                 }
-            } }, h("slot", { key: 'e287328ba8515ddd37a21645aef25e83e6484e6b', name: "trigger" })), h("span", { key: 'cc7025445296778b3dd0ad3eceb24b03eb0c2924', part: "menu-list", id: "menu-list", ref: (el) => (this.menuListEl = el) }, h("slot", { key: '0d26db850bffc2cdf9b4142fdfa2f4113d180078' }))));
+            } }, h("slot", { key: '0bbc31781b3b8702b6d233688de2031abd97d2dc', name: "trigger" })), h("span", { key: '5c0279fa9912ea5b5332f4c52e285405cfb18f05', part: "menu-list", id: "menu-list", ref: (el) => (this.menuListEl = el) }, h("slot", { key: '0185ee09c1f2034ffe44553c613f3e2bd59400e8' }))));
     }
     static get is() { return "rtk-menu"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/rtk-menu-item/rtk-menu-item.js

@@ -27,7 +27,7 @@ export class RtkMenuItem {
         this.t = useLanguage();
     }
     render() {
-        return (h(Host, { key: '16f2f9a4030f6d6b48345af4cfdb3f55c1eee39e' }, h("slot", { key: '82c4020f63a6cbf773ecee8493f3fcc6a61c3c61', name: "start" }), h("slot", { key: '55f0449e84f1833a7ef6ddb2c9d995408f0ddef3' }), h("slot", { key: 'e826a0992e53227fd3fd517bbb2684f34fed3e8c', name: "end" })));
+        return (h(Host, { key: 'd847b9442e5e814e035bdca3b4ce69da7ed0d4bb' }, h("slot", { key: '9cf4adef243b99317aa627becb9412bf0c16e7d5', name: "start" }), h("slot", { key: 'efc47210f2527b061050a8f125eff3c3f2fed56f' }), h("slot", { key: '58b7b22d93c33d2bc85fc275209ef3f3ae3fdfc7', name: "end" })));
     }
     static get is() { return "rtk-menu-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/rtk-menu-list/rtk-menu-list.js

@@ -25,7 +25,7 @@ export class RtkMenuList {
         this.t = useLanguage();
     }
     render() {
-        return (h(Host, { key: '53cfa1381ea1c0bdfe99362f56cc505bff492774' }, h("slot", { key: 'fffe3a71f857c152d6619514d875893b5899b956' })));
+        return (h(Host, { key: '8d727ee3603bff8472bbe65a3fac47711fc6315c' }, h("slot", { key: '11755f7306267fd0496721a65aae0d36f84acb7b' })));
     }
     static get is() { return "rtk-menu-list"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/rtk-message-list-view/rtk-message-list-view.js

@@ -260,11 +260,11 @@ export class RtkMessageListView {
         this.updateTotalHeight();
     }
     render() {
-        return (h("div", { key: '0bd9791d55b2c7b17e0f2165815d592e400612b6', class: "scrollbar content-wrapper", ref: (el) => (this.$listRef = el), onScroll: this.handleScroll }, h("div", { key: 'b255bce421935f065862a6a3a34e9ae588c936cd', class: "scroller" }, h("div", { key: '3eab5b317790b234f1a5c1935d7b8bf4d48620eb', style: {
+        return (h("div", { key: '17ccb3852a89ddb77e5799413f8ee0ef0ac7c132', class: "scrollbar content-wrapper", ref: (el) => (this.$listRef = el), onScroll: this.handleScroll }, h("div", { key: '044af22a10ae312a46d90f29dc9a793d86540fb8', class: "scroller" }, h("div", { key: '15a2b213883f210a44081c05c317f9da7a58380c', style: {
                 height: `${this.totalHeight}px`,
-            } }), h("div", { key: '47d070acc6cdd5e5cdd146594dbcb53906e5fc37', class: "smallest-dom-element", id: "list-end", ref: (el) => (this.$listEndRef = el) })), h("div", { key: '348ec8b65c0f76146f6ab65cbda80057dde6d93d', class: "content", style: {
+            } }), h("div", { key: '918071c6d3aed045814c1c2b3908572edae480ac', class: "smallest-dom-element", id: "list-end", ref: (el) => (this.$listEndRef = el) })), h("div", { key: '19b2f45794fa73f44d54b9b91ef1cab0df6c4aae', class: "content", style: {
                 transform: `translateY(${this.getRangeSize(0, this.range.start)}px)`,
-            } }, this.isFetching && (h("div", { key: '100d528dae04469574a6c908ba4e0159d61a928f', class: "loader" }, h("rtk-spinner", { key: 'a3a7cc932bd40b71bf67d9bb95cb7cdd8e36696f', size: "md" }))), this.getVisibleItems().map((msg, index) => (h("div", { key: msg.id, ref: (el) => this.rendererInternal(el, msg, index) }))))));
+            } }, this.isFetching && (h("div", { key: '1a05d8ec0a4a11812afef413226c472d797e7ebe', class: "loader" }, h("rtk-spinner", { key: '29f275642f8f8be5d9cbe12ff0eeedba48e1b4c1', size: "md" }))), this.getVisibleItems().map((msg, index) => (h("div", { key: msg.id, ref: (el) => this.rendererInternal(el, msg, index) }))))));
     }
     static get is() { return "rtk-message-list-view"; }
     static get originalStyleUrls() {

package/dist/collection/components/rtk-message-view/rtk-message-view.js

@@ -33,7 +33,7 @@ export class RtkMessageView {
         return (h("rtk-menu", { placement: "top-end", offset: 1 }, h("button", { slot: "trigger", class: "actions" }, h("rtk-icon", { icon: this.iconPack.chevron_down })), h("rtk-menu-list", null, this.actions.map((action) => (h("rtk-menu-item", { onClick: () => this.onAction.emit(action.id) }, action.icon && h("rtk-icon", { icon: action.icon, slot: "start" }), action.label))))));
     }
     render() {
-        return (h(Host, { key: 'fb4680e38de79ad40507a542c09d0b02c4691ded' }, h("div", { key: 'f6768fd2ea535e35ad86fc92d7f4595a503fdcca', class: { 'message-wrapper': true, [this.viewType]: true } }, !this.hideAvatar && (h("aside", { key: 'a524e142b020ea1d528ca57f984bb6e725b59893', class: "avatar", part: "avatar" }, h("rtk-avatar", { key: 'ee56623f64d2bb3f74ebea3357eb1af9d67cd3a3', participant: { name: this.authorName, picture: this.avatarUrl }, size: "sm" }))), h("div", { key: 'd6f5bb18ee7aa2ad174cd03c3aee4b9a94c3e63e', class: "message", part: "message" }, !this.hideAuthorName && h("div", { key: '338d4801d1ac9ce6a4dd3676148cac3c70f3b39f', class: "header" }, this.authorName), h("div", { key: '86d147a38d6582979a94536df63213730becc572', class: { body: true, bubble: this.variant === 'bubble' } }, h("slot", { key: '23a3984240643508ef10d3f2c0af5276e4cb5687' }), !this.hideMetadata && !!this.time && (h("div", { key: '35a4884867e5bdd835532f85e3a9575976aa9703', class: "metadata", title: formatDateTime(this.time) }, elapsedDuration(this.time, new Date(Date.now())))), this.actions.length !== 0 && this.renderActions())))));
+        return (h(Host, { key: 'cb9a54f30d9d3e42b1513c887c5c4ecdbbe1286d' }, h("div", { key: '9ff05d12f6441a3831fc91cda2094640ca730169', class: { 'message-wrapper': true, [this.viewType]: true } }, !this.hideAvatar && (h("aside", { key: '0afb28d2b8e2e09aad98b81f1eee75f08fe8d5a5', class: "avatar", part: "avatar" }, h("rtk-avatar", { key: 'a10f437e451b49941c9d5bed52ad450ddf6046d2', participant: { name: this.authorName, picture: this.avatarUrl }, size: "sm" }))), h("div", { key: '2d1b48256431776d34939f88c04fd8154fd4c95a', class: "message", part: "message" }, !this.hideAuthorName && h("div", { key: 'c380e92a56f94f9013e68067a86d743bc18fbb33', class: "header" }, this.authorName), h("div", { key: 'a81ffdc5e9665f0aad597a49b3467d5b4858f317', class: { body: true, bubble: this.variant === 'bubble' } }, h("slot", { key: '117f39722e02058aabef8eaacbaa99c7b5797452' }), !this.hideMetadata && !!this.time && (h("div", { key: '233f2bc3dd6dc62b5e6cfddef7c3a2135c1a0c6f', class: "metadata", title: formatDateTime(this.time) }, elapsedDuration(this.time, new Date(Date.now())))), this.actions.length !== 0 && this.renderActions())))));
     }
     static get is() { return "rtk-message-view"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/rtk-mic-toggle/rtk-mic-toggle.js

@@ -150,6 +150,8 @@ export class RtkMicToggle {
         };
     }
     render() {
+        if (!this.meeting)
+            return null;
         if (!this.canProduceAudio ||
             ['OFF_STAGE', 'REQUESTED_TO_JOIN_STAGE'].includes(this.stageStatus)) {
             return h(Host, { "data-hidden": true });

package/dist/collection/components/rtk-microphone-selector/rtk-microphone-selector.js

@@ -69,7 +69,7 @@ export class RtkMicrophoneSelector {
         (_e = this.meeting) === null || _e === void 0 ? void 0 : _e.self.removeListener('mediaPermissionUpdate', this.mediaPermissionUpdateListener);
     }
     meetingChanged(meeting) {
-        if (meeting == null)
+        if (!meeting)
             return;
         writeTask(async () => {
             var _a, _b;
@@ -79,7 +79,7 @@ export class RtkMicrophoneSelector {
             this.currentDevices = {
                 audio: currentAudioDevice,
             };
-            this.canProduceAudio = this.meeting.self.permissions.canProduceAudio === 'ALLOWED';
+            this.canProduceAudio = meeting.self.permissions.canProduceAudio === 'ALLOWED';
             stage === null || stage === void 0 ? void 0 : stage.addListener('stageStatusUpdate', this.stageStateListener);
             self.addListener('deviceListUpdate', this.deviceListUpdateListener);
             self.addListener('deviceUpdate', this.deviceUpdateListener);
@@ -108,7 +108,7 @@ export class RtkMicrophoneSelector {
         }
     }
     render() {
-        if (this.meeting == null)
+        if (!this.meeting)
             return null;
         let unnamedMicCount = 0;
         return (h(Host, null, this.canProduceAudio && (h("div", { part: "microphone-selection", class: 'group container ' + this.variant }, h("label", { slot: "label" }, this.variant !== 'inline' && this.t('settings.microphone_input'), h("rtk-icon", { icon: this.iconPack.mic_on, size: "sm" })), h("div", { class: "row" }, h("select", { class: "rtk-select", onChange: (e) => this.setDevice(e.target.value) }, this.audioinputDevices.map(({ deviceId, label }) => {

package/dist/collection/components/rtk-mixed-grid/rtk-mixed-grid.js

@@ -9,7 +9,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { Host, h } from "@stencil/core";
-import { defaultConfig } from "../../lib/default-ui-config";
+import { createDefaultConfig } from "../../lib/default-ui-config";
 import { defaultGridSize } from "../../lib/grid";
 import { defaultIconPack } from "../../lib/icons";
 import { useLanguage } from "../../lib/lang";
@@ -39,7 +39,7 @@ export class RtkMixedGrid {
         /** Gap between participant tiles */
         this.gap = 8;
         /** UI Config */
-        this.config = defaultConfig;
+        this.config = createDefaultConfig();
         /** Icon Pack */
         this.iconPack = defaultIconPack;
         /** Language */
@@ -155,6 +155,8 @@ export class RtkMixedGrid {
     }
     render() {
         var _a, _b;
+        if (!this.meeting)
+            return null;
         const defaults = {
             meeting: this.meeting,
             config: this.config,
@@ -163,7 +165,7 @@ export class RtkMixedGrid {
             iconPack: this.iconPack,
             t: this.t,
         };
-        return (h(Host, { key: '52e26a16c20eee51ac0f3d01d932df88d58acb05' }, h("main", { key: '1838e7498d579bf70346bf921c9f3966721a1eea', id: "main-view", part: "main-view" }, ((_a = this.getTabs()) === null || _a === void 0 ? void 0 : _a.length) > 1 && (h("rtk-tab-bar", Object.assign({ key: 'b3f5f77e4b0bd36d12014881f0507c9de6e613af', activeTab: this.activeTab, tabs: this.getTabs(), onTabChange: (e) => this.setActiveTab(e.detail) }, defaults))), h("div", { id: "tabs", key: "tabs" }, this.screenShareParticipants.map((participant) => {
+        return (h(Host, null, h("main", { id: "main-view", part: "main-view" }, ((_a = this.getTabs()) === null || _a === void 0 ? void 0 : _a.length) > 1 && (h("rtk-tab-bar", Object.assign({ activeTab: this.activeTab, tabs: this.getTabs(), onTabChange: (e) => this.setActiveTab(e.detail) }, defaults))), h("div", { id: "tabs", key: "tabs" }, this.screenShareParticipants.map((participant) => {
             var _a, _b;
             return (h(Render, { element: "rtk-screenshare-view", defaults: defaults, props: {
                     participant,
@@ -182,7 +184,7 @@ export class RtkMixedGrid {
                         ? 'flex'
                         : 'none',
                 } })));
-        }))), h(Render, { key: 'c3a9ce4706096e385fc522a37e3de7d9d30d1b70', element: "rtk-mixed-grid", defaults: defaults, childProps: {
+        }))), h(Render, { element: "rtk-mixed-grid", defaults: defaults, childProps: {
                 part: 'participants-grid',
                 class: this.gridSize.mixed ? `grid-width-${this.gridSize.mixed}` : 'grid-width-lg',
                 participants: this.participants,
@@ -317,7 +319,7 @@ export class RtkMixedGrid {
                         "RTKPlugin": {
                             "location": "import",
                             "path": "@cloudflare/realtimekit",
-                            "id": "../../node_modules/@cloudflare/realtimekit/dist/index.d.ts::RTKPlugin"
+                            "id": "node_modules::RTKPlugin"
                         }
                     }
                 },
@@ -464,7 +466,7 @@ export class RtkMixedGrid {
                 },
                 "getter": false,
                 "setter": false,
-                "defaultValue": "defaultConfig"
+                "defaultValue": "createDefaultConfig()"
             },
             "iconPack": {
                 "type": "unknown",
@@ -569,6 +571,9 @@ __decorate([
 __decorate([
     SyncWithStore()
 ], RtkMixedGrid.prototype, "states", void 0);
+__decorate([
+    SyncWithStore()
+], RtkMixedGrid.prototype, "config", void 0);
 __decorate([
     SyncWithStore()
 ], RtkMixedGrid.prototype, "iconPack", void 0);

package/dist/collection/components/rtk-more-toggle/rtk-more-toggle.js

@@ -53,10 +53,10 @@ export class RtkMoreToggle {
     }
     render() {
         const text = this.t('more');
-        return (h(Host, { key: 'cc4c42c7e70920678ccd5504299cc2ea132ba082', title: text }, this.states.activeMoreMenu && (h("div", { key: '4e15d624377561cc3bfac660822041079387d15c', class: "more-menu" }, h("slot", { key: '83c8c81d94edbed4d30143fe4a0a9fc77f7c3883', name: "more-elements" }))), h("rtk-controlbar-button", { key: '1b88da49b3bd62fc05f43e83743935cbe1848bdf', size: this.size, iconPack: this.iconPack, onClick: (e) => {
+        return (h(Host, { key: 'f3c1cb18b17399883fa1e5313ddf6230ca93c860', title: text }, this.states.activeMoreMenu && (h("div", { key: 'bf0475b1df51643b54e93489c735ebba9452ff39', class: "more-menu" }, h("slot", { key: '503815f9d50eae60dbccc11b88cf5be2c782e5c2', name: "more-elements" }))), h("rtk-controlbar-button", { key: '82402eb33f53b6bfaf6619a1bba96ab0764ac053', size: this.size, iconPack: this.iconPack, onClick: (e) => {
                 e.stopPropagation();
                 this.toggleMoreMenu();
-            }, icon: this.iconPack.horizontal_dots, label: text, part: "controlbar-button" }), h("slot", { key: '06155b80eabc3aa0c8495c5bc447af457acdd038', name: "expanded" })));
+            }, icon: this.iconPack.horizontal_dots, label: text, part: "controlbar-button" }), h("slot", { key: '36f6ba35f30fdda6dee9672341b38fa6bb1ffd74', name: "expanded" })));
     }
     static get is() { return "rtk-more-toggle"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/rtk-mute-all-button/rtk-mute-all-button.js

@@ -43,6 +43,8 @@ export class RtkMuteAllButton {
         meeting.self.permissions.addListener('permissionsUpdate', this.permissionsUpdateListener);
     }
     render() {
+        if (!this.meeting)
+            return null;
         if (!this.canDisable) {
             return null;
         }

package/dist/collection/components/rtk-mute-all-confirmation/rtk-mute-all-confirmation.js

@@ -29,7 +29,7 @@ export class RtkMuteAllConfirmation {
         };
     }
     render() {
-        return (h(Host, { key: '199f56583843ca5b4e68f6a087471983c231983b' }, h("div", { key: '86b15ff17b5a9526df77d2bc9f1d1e2d938c71c4', class: "leave-modal" }, h("div", { key: '7f19f8d34586e3f8ee4661556e5f4c744facb4e8', class: "header" }, h("h2", { key: '93adfa1d849b0aa3e483c280d1078d99ac1ef73c', class: "title" }, this.t('mute_all.header'))), h("p", { key: '7532426538ef8de6280cf0246126061bff639209', class: "message" }, this.t('mute_all.description')), h("div", { key: '14f577e917ecbf867afe2e6a4f94b86122d95496', class: "content" }, h("div", { key: '2cbe2cea5befa86328d786aa3420af04bda0097e', class: "leave-meeting" }, h("rtk-button", { key: '27b26964264a4c569ef7388357623ed97dff7bdb', variant: "secondary", title: this.t('close'), onClick: this.onClose }, this.t('cancel')), h("rtk-button", { key: 'dba570b9e72a21c0b76957cac4809f61878645d3', variant: "danger", title: this.t('mute_all'), onClick: this.onMuteAll }, this.t('mute_all')))))));
+        return (h(Host, { key: 'd7439c9c3ffd1a79974ed8f8a0081aa807a2b103' }, h("div", { key: 'f11f6d201c843384f3e173cf611ea6b26fcfe620', class: "leave-modal" }, h("div", { key: '8475acebc7a3abd14a4d0716b6dbdeabb0f1896e', class: "header" }, h("h2", { key: 'fe5cfaa40eccca120a696555456acd59610bd5f0', class: "title" }, this.t('mute_all.header'))), h("p", { key: '88b6d8faf23e5780d632f9bac0077751bb9db554', class: "message" }, this.t('mute_all.description')), h("div", { key: 'b901ffb7714dbcf5bbda907df1f44214672ded17', class: "content" }, h("div", { key: 'f554e5829ff3250400307f139661a0fe426ee22c', class: "leave-meeting" }, h("rtk-button", { key: 'c300ddc6c3ae02266d4769a964eb3fb246aa7dbd', variant: "secondary", title: this.t('close'), onClick: this.onClose }, this.t('cancel')), h("rtk-button", { key: '897d7d2639a6c51c5fb0ae1b51a111fbba5431c9', variant: "danger", title: this.t('mute_all'), onClick: this.onMuteAll }, this.t('mute_all')))))));
     }
     static get is() { return "rtk-mute-all-confirmation"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/rtk-name-tag/rtk-name-tag.js

@@ -44,7 +44,7 @@ export class RtkNameTag {
         var _a, _b, _c;
         const name = formatName(((_a = this.participant) === null || _a === void 0 ? void 0 : _a.name) || '');
         const isSelf = ((_b = this.participant) === null || _b === void 0 ? void 0 : _b.id) === ((_c = this.meeting) === null || _c === void 0 ? void 0 : _c.self.id);
-        return (h(Host, { key: '52aa7e44f5a12d953eb5637346fff58cd40ed0bb', title: name }, h("slot", { key: '24d7325456abe1ec7051c44eaf6067446e459f2d', name: "start" }), h("span", { key: 'c2e7c6d2ca6ab1f5e097ccccad09b52fcc9c846a', class: "name" }, this.formatNameTag(name, isSelf)), h("slot", { key: '586b6e09b16c88cc219f45843ac8dfd746c0482a', name: "end" })));
+        return (h(Host, { key: 'aa14d4fdc9c5f2779653e3b4cff1cbaace353918', title: name }, h("slot", { key: '42d6da9d977a53c1955e4849cb4f2a91e5bd390c', name: "start" }), h("span", { key: '415345071c1e605ebb7f6399a56ab5469c4b10a3', class: "name" }, this.formatNameTag(name, isSelf)), h("slot", { key: 'aa2a92758c73819b9c940865390c73d3feb3925a', name: "end" })));
     }
     static get is() { return "rtk-name-tag"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/rtk-notification/rtk-notification.js

@@ -47,9 +47,9 @@ export class RtkNotification {
     }
     render() {
         var _a;
-        return (h(Host, { key: 'b6a7ede34064bcc25040589cd09b00a5e5a5cf8a' }, h("div", { key: '42608dc49ec59c0c54be513e59b81627f0ecb11c', class: "ctr" }, this.notification.icon != null && (h("rtk-icon", { key: '263c38129622549c8df1900d8905f52ee29cff8a', class: "icon", icon: this.notification.icon, variant: (_a = this.notification.iconVariant) !== null && _a !== void 0 ? _a : 'primary' })), this.notification.image != null &&
+        return (h(Host, { key: 'ac0be33a8d9e03bd13cbc79f3ba082133fe6f227' }, h("div", { key: '7275520c8656b883a2f075768d3a8e2b84d64386', class: "ctr" }, this.notification.icon != null && (h("rtk-icon", { key: '368c448f1d2ec32c5bd555fda37955f50125f111', class: "icon", icon: this.notification.icon, variant: (_a = this.notification.iconVariant) !== null && _a !== void 0 ? _a : 'primary' })), this.notification.image != null &&
             this.notification.icon == null &&
-            this.imageState !== 'errored' && (h("img", { key: '0e8d7812bd8b58ce0efe3edff6ae7346cbcd0fd4', src: this.notification.image, class: { loaded: this.imageState === 'loaded' }, onLoad: () => (this.imageState = 'loaded'), onError: () => (this.imageState = 'errored') })), h("p", { key: 'f28ec5ff1a3902817d5501ea2324371defc8995a', class: "message" }, h(TextMessageView, { key: '7f7b179a67d125585ed70112fcb2a1925c3bae52', message: this.notification.message })), h("div", { key: '2ba60b2b60ddbc43d207adc86e0a975f3c432f70', class: "right" }, this.notification.button != null && (h("rtk-button", { key: '2f4871b0ee2871cbccb016e4451e28c424fe14ce', size: "sm", variant: this.notification.button.variant, onClick: () => this.notification.button.onClick() }, this.notification.button.text)), h("button", { key: '1786dac10dbc2ca9aabad707354ce16fe1af9bc8', onClick: () => this.dismiss.emit(this.notification.id), class: "dismiss" }, h("rtk-icon", { key: 'b11c47705af86c38bd6488ecb6998aad62099396', "aria-label": this.t('dismiss'), icon: this.iconPack.dismiss }))))));
+            this.imageState !== 'errored' && (h("img", { key: '510e84f6b3e0573ff1e617f5ccef73e79ac85028', src: this.notification.image, class: { loaded: this.imageState === 'loaded' }, onLoad: () => (this.imageState = 'loaded'), onError: () => (this.imageState = 'errored') })), h("p", { key: '943becbe12a608de855b501d3209c0a795865d5b', class: "message" }, h(TextMessageView, { key: 'c81b7d0419a3da383c9fdb94cd0b25232094ae90', message: this.notification.message })), h("div", { key: '69eb21920c5cd680a781548e9981c3f1997d21c4', class: "right" }, this.notification.button != null && (h("rtk-button", { key: '7df0f1e71e531577eb3d9a8914247c0977a6ad20', size: "sm", variant: this.notification.button.variant, onClick: () => this.notification.button.onClick() }, this.notification.button.text)), h("button", { key: 'f66c7958c125fd77ed04e6a66d5ea1527aa97dc1', onClick: () => this.dismiss.emit(this.notification.id), class: "dismiss" }, h("rtk-icon", { key: '6d6a9fe85560b6c108672172a12235cab9ab6ff3', "aria-label": this.t('dismiss'), icon: this.iconPack.dismiss }))))));
     }
     static get is() { return "rtk-notification"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/rtk-notifications/rtk-notifications.js

@@ -14,7 +14,7 @@ import { formatName } from "../../utils/string";
 import { defaultIconPack } from "../../lib/icons";
 import { useLanguage } from "../../lib/lang";
 import { DEFAULT_NOTIFICATION_CONFIG, DEFAULT_NOTIFICATION_DURATION, } from "../../types/ui-config/config";
-import { defaultConfig } from "../../exports";
+import { createDefaultConfig } from "../../exports";
 import { parseMessageForTarget } from "../../utils/chat";
 import { SyncWithStore } from "../../utils/sync-with-store";
 import { showLivestream } from "../../utils/livestream";
@@ -45,7 +45,7 @@ export class RtkNotifications {
         this.permissions = DEFAULT_NOTIFICATION_CONFIG;
         this.enabledSounds = getEnabledSounds(DEFAULT_NOTIFICATION_CONFIG.notification_sounds);
         /** Config object */
-        this.config = defaultConfig;
+        this.config = createDefaultConfig();
         /** Language */
         this.t = useLanguage();
         /** Icon pack */
@@ -123,7 +123,7 @@ export class RtkNotifications {
         if (typeof document !== 'undefined') {
             document === null || document === void 0 ? void 0 : document.removeEventListener('rtkNotification', this.onNotification);
         }
-        if (this.meeting == null)
+        if (!this.meeting)
             return;
         this.clearListeners(this.meeting);
         this.waitlistedParticipantJoinedListener &&
@@ -138,9 +138,9 @@ export class RtkNotifications {
     meetingChanged(meeting, oldMeeting) {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j;
         clearTimeout(this.disconnectTimeout);
-        if (oldMeeting !== undefined)
+        if (oldMeeting)
             this.clearListeners(oldMeeting);
-        if (meeting == null)
+        if (!meeting)
             return;
         const isLivestream = meeting.meta.viewType === 'LIVESTREAM';
         this.audio = new RTKNotificationsAudio(meeting);
@@ -523,7 +523,10 @@ export class RtkNotifications {
             this.meeting.self.permissions.acceptWaitingRequests);
     }
     render() {
-        return (h(Host, { key: '906188de5f85fcdb91e7bbd9fc44c60f722ec231' }, h("div", { key: '971924ad071ffa9525984eac3f11e929d10ec8a2', onMouseEnter: () => (this.paused = true), onFocusin: () => (this.paused = true), onMouseLeave: () => (this.paused = false), onFocusout: () => (this.paused = false) }, this.notifications.map((notification) => (h("rtk-notification", { size: this.size, key: notification.id, "data-id": notification.id, notification: notification, onRtkNotificationDismiss: (e) => this.handleDismiss(e), iconPack: this.iconPack, paused: this.paused, t: this.t }))))));
+        if (!this.meeting) {
+            return;
+        }
+        return (h(Host, null, h("div", { onMouseEnter: () => (this.paused = true), onFocusin: () => (this.paused = true), onMouseLeave: () => (this.paused = false), onFocusout: () => (this.paused = false) }, this.notifications.map((notification) => (h("rtk-notification", { size: this.size, key: notification.id, "data-id": notification.id, notification: notification, onRtkNotificationDismiss: (e) => this.handleDismiss(e), iconPack: this.iconPack, paused: this.paused, t: this.t }))))));
     }
     static get is() { return "rtk-notifications"; }
     static get encapsulation() { return "shadow"; }
@@ -607,7 +610,7 @@ export class RtkNotifications {
                 },
                 "getter": false,
                 "setter": false,
-                "defaultValue": "defaultConfig"
+                "defaultValue": "createDefaultConfig()"
             },
             "t": {
                 "type": "unknown",
@@ -725,6 +728,9 @@ __decorate([
 __decorate([
     SyncWithStore()
 ], RtkNotifications.prototype, "states", void 0);
+__decorate([
+    SyncWithStore()
+], RtkNotifications.prototype, "config", void 0);
 __decorate([
     SyncWithStore()
 ], RtkNotifications.prototype, "t", void 0);

package/dist/collection/components/rtk-overlay-modal/rtk-overlay-modal.js

@@ -30,7 +30,7 @@ export class RtkOverlayModal {
         }
     }
     render() {
-        return (h(Host, { key: 'e5bdb94d07093b7b6950c5d389b3cca3c5f0bc22' }, h("rtk-icon", { key: '04dcace07d18e31644bb11215c069eb63ea8dfe6', icon: this.states.activeOverlayModal.icon }), h("h2", { key: '5ca79bee28c169a489a83e53e0911e6187c731f2' }, this.states.activeOverlayModal.title), h("p", { key: 'd4d7e34a08e991709b1931ce22c899dcc624c692' }, this.states.activeOverlayModal.description)));
+        return (h(Host, { key: 'd2837e184517e21a048bf3c0132db866e76df98e' }, h("rtk-icon", { key: '986632806311740b097ef99ad2cefc286f54b7d4', icon: this.states.activeOverlayModal.icon }), h("h2", { key: 'f7c985545abeefcf0dccd10744c70e84b14c0f1d' }, this.states.activeOverlayModal.title), h("p", { key: '43ab2a1bde3c41732d3e159c493a799f68bcd0c7' }, this.states.activeOverlayModal.description)));
     }
     static get is() { return "rtk-overlay-modal"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/rtk-paginated-list/rtk-paginated-list.js

@@ -278,7 +278,7 @@ export class RtkPaginatedList {
          * which is why div#bottom-scroll comes before div#top-scroll
          * div.page-wrapper prevents reversal of messages
          */
-        return (h(Host, { key: '6fd10c2fdc24eeab3d52c10643ed92321e04d9fe' }, h("div", { key: '675f184549482b76fc07ea5641b9c3297ab6a79b', class: "scrollbar container", part: "container", ref: (el) => (this.$paginatedList = el) }, h("div", { key: '37618a8856bd0f1a8ecc57b38cd700bc302191e6', class: { 'show-new-messages-ctr': true, active: !this.shouldRenderNewNodes } }, h("rtk-button", { key: 'b7ebb2a7b309c47af1987159726f1399452995c2', class: "show-new-messages", kind: "icon", variant: "secondary", part: "show-new-messages", onClick: () => this.onDownArrowClicked() }, h("rtk-icon", { key: '99532567bf299b314a8e0a6d5485ad3fa219e600', icon: this.iconPack.chevron_down }))), h("div", { key: '512f096db4e0fdbd969c3cb7cfacc00a38b2f2b6', class: "smallest-dom-element", id: "bottom-scroll", ref: (el) => (this.$bottomRef = el) }), this.isLoading && this.pagesToRender.flat().length === 0 && h("rtk-spinner", { key: 'bf2bcfdc9e4eecbc120ad38a0cc2c8323781532c', size: "lg" }), this.pagesToRender.flat().length === 0 && this.showEmptyListLabel ? (h("div", { class: "empty-list" }, (_a = this.emptyListLabel) !== null && _a !== void 0 ? _a : this.t('list.empty'))) : (h("div", { class: "page-wrapper" }, this.pagesToRender.map((page) => this.createNodes(page)))), h("div", { key: '2c29f14bcac1c725c619349f1e30627cfdbc26f9', class: "smallest-dom-element", id: "top-scroll", ref: (el) => (this.$topRef = el) }))));
+        return (h(Host, { key: '69d3a477477c252a20b07d749979b8b7dfb2e2e7' }, h("div", { key: '8ad8afdcc6ff74dfb150615597029db185369293', class: "scrollbar container", part: "container", ref: (el) => (this.$paginatedList = el) }, h("div", { key: '62b9e1007f9c46f181d2c4b0ab3ca532b9e89f3d', class: { 'show-new-messages-ctr': true, active: !this.shouldRenderNewNodes } }, h("rtk-button", { key: '4107ae7cfa77f50df7834e95dd35cad6b4836fda', class: "show-new-messages", kind: "icon", variant: "secondary", part: "show-new-messages", onClick: () => this.onDownArrowClicked() }, h("rtk-icon", { key: '1cd4a0c65e38021ecfc42c3669852fe311ac0600', icon: this.iconPack.chevron_down }))), h("div", { key: 'a52878eee8c962808b431f18b0fc6f97ecafd314', class: "smallest-dom-element", id: "bottom-scroll", ref: (el) => (this.$bottomRef = el) }), this.isLoading && this.pagesToRender.flat().length === 0 && h("rtk-spinner", { key: 'f40afc71664c93e55773112e8f69a2f97b1d8146', size: "lg" }), this.pagesToRender.flat().length === 0 && this.showEmptyListLabel ? (h("div", { class: "empty-list" }, (_a = this.emptyListLabel) !== null && _a !== void 0 ? _a : this.t('list.empty'))) : (h("div", { class: "page-wrapper" }, this.pagesToRender.map((page) => this.createNodes(page)))), h("div", { key: 'ff33dae45c6cf06f6ee64adf84b2ebfaec10d290', class: "smallest-dom-element", id: "top-scroll", ref: (el) => (this.$topRef = el) }))));
     }
     static get is() { return "rtk-paginated-list"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/rtk-participant/rtk-participant.js

@@ -13,7 +13,7 @@ import { defaultIconPack } from "../../lib/icons";
 import { useLanguage } from "../../lib/lang";
 import { lenChildren, Render } from "../../lib/render";
 import { formatName, shorten } from "../../utils/string";
-import { defaultConfig } from "../../exports";
+import { createDefaultConfig } from "../../exports";
 import { FlagsmithFeatureFlags } from "../../utils/flags";
 import { autoPlacement, computePosition, hide, offset, shift } from "@floating-ui/dom";
 import { SyncWithStore } from "../../utils/sync-with-store";
@@ -41,7 +41,7 @@ export class RtkParticipant {
         /** Language */
         this.t = useLanguage();
         /** Config object */
-        this.config = defaultConfig;
+        this.config = createDefaultConfig();
         this.audioEnabled = false;
         this.videoEnabled = false;
         this.isPinned = false;
@@ -220,9 +220,9 @@ export class RtkParticipant {
             iconPack: this.iconPack,
             t: this.t,
         };
-        return (h(Host, { key: '9a717049edf15cfec3e497a30a37f873dcb37fd8' }, h("div", { class: "left", key: (_e = this.participant) === null || _e === void 0 ? void 0 : _e.id }, h("rtk-avatar", { key: '4e161f74ce11be1050c95556065867289ab618b2', participant: this.participant, size: "sm", iconPack: this.iconPack, t: this.t }), h("p", { key: 'c1e71db1ba1ed2e8defbbb9802c22df8b64670fc', class: "name", title: name }, shorten(name, 16), " ", ((_f = this.meeting) === null || _f === void 0 ? void 0 : _f.self.id) === ((_g = this.participant) === null || _g === void 0 ? void 0 : _g.id) && this.t('(you)'))), this.view === 'sidebar' && (h("div", { key: '165e14ba9f5e063820c6f440dc9eb03344e7bcdf', class: "right" }, isActiveParticipant && (h("rtk-icon", { key: 'd6651dc9e7eb12ed56742f08096ef239bd4429c1', class: {
+        return (h(Host, { key: 'fca2be3a201295536c8401df43b0d7c574204d67' }, h("div", { class: "left", key: (_e = this.participant) === null || _e === void 0 ? void 0 : _e.id }, h("rtk-avatar", { key: 'fc9a18d3afb9e023f690cc09b61c8fece2117131', participant: this.participant, size: "sm", iconPack: this.iconPack, t: this.t }), h("p", { key: '76bde07e6b502ad5b329ca0780e96b7d13ca6c86', class: "name", title: name }, shorten(name, 16), " ", ((_f = this.meeting) === null || _f === void 0 ? void 0 : _f.self.id) === ((_g = this.participant) === null || _g === void 0 ? void 0 : _g.id) && this.t('(you)'))), this.view === 'sidebar' && (h("div", { key: 'f5475e848b7eb07f36b03514c2f140366fa9db75', class: "right" }, isActiveParticipant && (h("rtk-icon", { key: 'd79d3570137dc8f44d85d4f1325d2b7528ae2b09', class: {
                 red: !this.audioEnabled,
-            }, icon: this.audioEnabled ? this.iconPack.mic_on : this.iconPack.mic_off })), isActiveParticipant && !isAudioRoom && (h("rtk-icon", { key: '89506d158acdb3e2629a7a2ab51aef475f9f3b75', class: {
+            }, icon: this.audioEnabled ? this.iconPack.mic_on : this.iconPack.mic_off })), isActiveParticipant && !isAudioRoom && (h("rtk-icon", { key: '8267f27a37e363ddc54708d31c6715fffd6bf057', class: {
                 red: !this.videoEnabled,
             }, icon: this.videoEnabled ? this.iconPack.video_on : this.iconPack.video_off })), (showMenu ||
             lenChildren({
@@ -231,34 +231,34 @@ export class RtkParticipant {
                 childProps: {
                     participant: this.participant,
                 },
-            }) > 0) && (h("div", { key: '202a957dfe004c8c1f2195bf93c9ce9ce167a96f', class: "menu" }, h("span", { key: 'a01163f9da5fab4a1d7922f8abfe5a2e4a4dcf2c', id: "trigger", onClick: this.onMenuToggle }, h("rtk-button", { key: '144e0c418b6a038d560f8087825471b649229ecb', variant: "ghost", kind: "icon", slot: "trigger" }, h("rtk-icon", { key: '18abb20a0969e0332d8fe2b5dcfe41bfc66955f7', class: "more", icon: this.iconPack.more_vertical }))), h("span", { key: '3a22ebe5a21228b6ea6e15933d961b24085dce44', id: "menu-list" }, this.menuOpen && (h("rtk-menu-list", { key: '86688ad10d1440c5b534fe2f002225e0368ae24a', iconPack: this.iconPack, t: this.t }, this.canPinParticipant && isActiveParticipant && !isAudioRoom && (h("rtk-menu-item", { key: 'c22833b86d8583bdaec723a269afa7298cb0ca0d', onClick: () => {
+            }) > 0) && (h("div", { key: '16a70e1c20fbc9b60bdc06c2b5621eeb92ffd456', class: "menu" }, h("span", { key: '2283145bee77a1d3cca5b78ab035df9295c0bd12', id: "trigger", onClick: this.onMenuToggle }, h("rtk-button", { key: 'f11c52baf39ff342d4bd6cac5882b7852bea5dd0', variant: "ghost", kind: "icon", slot: "trigger" }, h("rtk-icon", { key: '2d218acada676cb4fc8d2b720fd7a785932b05cb', class: "more", icon: this.iconPack.more_vertical }))), h("span", { key: '57eee96bfe16ec0792f068b1c5125020522b6ea0', id: "menu-list" }, this.menuOpen && (h("rtk-menu-list", { key: '73786a54c181560cf3744d41872860a4f9226182', iconPack: this.iconPack, t: this.t }, this.canPinParticipant && isActiveParticipant && !isAudioRoom && (h("rtk-menu-item", { key: '5e58a73a8ee20e682dfaea8352bf757f21f2074d', onClick: () => {
                 if (this.isPinned) {
                     this.participant.unpin();
                 }
                 else {
                     this.participant.pin();
                 }
-            }, iconPack: this.iconPack, t: this.t }, h("rtk-icon", { key: '9cdde53aaffca1f0042a69048b77f31fc10c69d6', icon: this.isPinned ? this.iconPack.pin_off : this.iconPack.pin, slot: "start" }), this.isPinned ? this.t('unpin') : this.t('pin'))), isSelf && (h("rtk-menu-item", { key: 'b651953a9b02065ca223c46dd7dbadedc8401031', iconPack: this.iconPack, t: this.t, onClick: () => {
+            }, iconPack: this.iconPack, t: this.t }, h("rtk-icon", { key: '7b1135f7ea874641440af548c170d7eed932f5aa', icon: this.isPinned ? this.iconPack.pin_off : this.iconPack.pin, slot: "start" }), this.isPinned ? this.t('unpin') : this.t('pin'))), isSelf && (h("rtk-menu-item", { key: '6f1a6e919ad72776e0a318bac3657e358a846e42', iconPack: this.iconPack, t: this.t, onClick: () => {
                 this.isHidden
                     ? this.participant.show()
                     : this.participant.hide();
-            } }, h("rtk-icon", { key: 'e63383cca42314f8ac0a9a03d13948b4eb5ced8c', icon: this.isHidden ? this.iconPack.minimize : this.iconPack.maximize, slot: "start" }), !this.meeting.self.hidden ? this.t('minimize') : this.t('maximize'))), this.canDisableParticipantAudio &&
+            } }, h("rtk-icon", { key: '6d2dc3f5a8fcbac7bee5855418f2d310a44ea581', icon: this.isHidden ? this.iconPack.minimize : this.iconPack.maximize, slot: "start" }), !this.meeting.self.hidden ? this.t('minimize') : this.t('maximize'))), this.canDisableParticipantAudio &&
             isActiveParticipant &&
-            this.audioEnabled && (h("rtk-menu-item", { key: '86f670083fa1000cc99c5a57d4da2cb789c88aee', iconPack: this.iconPack, t: this.t, onClick: () => {
+            this.audioEnabled && (h("rtk-menu-item", { key: '9f15f60f110f41b68a7e48c5f14f1826f291a76a', iconPack: this.iconPack, t: this.t, onClick: () => {
                 this.participant.disableAudio();
-            } }, h("rtk-icon", { key: 'd75504ef4431c83efea2d281baad6a10c8a2e3b3', icon: this.iconPack.mic_off, slot: "start" }), this.t('mute'))), this.canDisableParticipantVideo &&
+            } }, h("rtk-icon", { key: '337bd8e35012e5d5db7c899246f5debff0e82a8f', icon: this.iconPack.mic_off, slot: "start" }), this.t('mute'))), this.canDisableParticipantVideo &&
             isActiveParticipant &&
-            this.videoEnabled && (h("rtk-menu-item", { key: '2634fae26bc72fec773f3a7f85fad7ebc1cfca11', iconPack: this.iconPack, t: this.t, onClick: () => {
+            this.videoEnabled && (h("rtk-menu-item", { key: '5c57b5c3e63efc77578849e1e631d92bece21b93', iconPack: this.iconPack, t: this.t, onClick: () => {
                 this.participant.disableVideo();
-            } }, h("rtk-icon", { key: '57d51380b52a20a8f9dfc51931401712f4d67f26', icon: this.iconPack.video_off, slot: "start" }), this.t('participants.turn_off_video'))), this.canAllowParticipantOnStage &&
-            ((_h = this.participant) === null || _h === void 0 ? void 0 : _h.id) !== ((_j = this.meeting) === null || _j === void 0 ? void 0 : _j.self.id) && (h("rtk-menu-item", { key: '64ab2f51f494b8d3d445ae9aece430e8c0fca673', iconPack: this.iconPack, t: this.t, class: this.isOnStage ? 'red' : '', onClick: this.inviteToStageToggle }, h("rtk-icon", { key: '5633f66f3679bfc3b6e87a55cfb884e63260767c', icon: this.isOnStage
+            } }, h("rtk-icon", { key: 'dc95678f6f7fdc6dcbce86ee6a13d9891e039770', icon: this.iconPack.video_off, slot: "start" }), this.t('participants.turn_off_video'))), this.canAllowParticipantOnStage &&
+            ((_h = this.participant) === null || _h === void 0 ? void 0 : _h.id) !== ((_j = this.meeting) === null || _j === void 0 ? void 0 : _j.self.id) && (h("rtk-menu-item", { key: '60aabc93efd82a76edcea10d895522d9c9d5e68f', iconPack: this.iconPack, t: this.t, class: this.isOnStage ? 'red' : '', onClick: this.inviteToStageToggle }, h("rtk-icon", { key: '6eef25ebdfae1932011b9764cdc3cbf7f07ecd1b', icon: this.isOnStage
                 ? this.iconPack.leave_stage
                 : this.iconPack.join_stage, slot: "start" }), this.isOnStage
             ? this.t('stage.remove_from_stage')
-            : this.t('stage.add_to_stage'))), !isSelf && this.canKickParticipant && (h("rtk-menu-item", { key: '664e9b1c843aa0cc7a47062b4f353a8e1105a368', iconPack: this.iconPack, t: this.t, class: "red", onClick: () => {
+            : this.t('stage.add_to_stage'))), !isSelf && this.canKickParticipant && (h("rtk-menu-item", { key: '69ede235912eaf64e025d7b05dae7ee0e9089ab4', iconPack: this.iconPack, t: this.t, class: "red", onClick: () => {
                 var _a, _b;
                 (_a = this.meeting) === null || _a === void 0 ? void 0 : _a.participants.kick((_b = this.participant) === null || _b === void 0 ? void 0 : _b.id);
-            } }, h("rtk-icon", { key: '10cb3a42b4c861241d983d9cb1ebfe594500fbc3', icon: this.iconPack.dismiss, slot: "start" }), this.t('kick'))), h("slot", { key: 'ed681666f5bb8bf06a6fac4b929853d9b6bc704c' }, h(Render, { key: '8177a2248bf03ffbe26a7f0f560eb81439a00fb3', element: "rtk-participant", defaults: defaults, childProps: {
+            } }, h("rtk-icon", { key: 'e4ad9ac63eea2e436374289d5e0b83a754bf65fd', icon: this.iconPack.dismiss, slot: "start" }), this.t('kick'))), h("slot", { key: '51235a7802e6878c7391c132e4bd8c3c636b57c5' }, h(Render, { key: '5ca8b68b79c748f3ced6cdb33ec8757caa7b597b', element: "rtk-participant", defaults: defaults, childProps: {
                 participant: this.participant,
             }, deepProps: true, onlyChildren: true })))))))))));
     }
@@ -441,7 +441,7 @@ export class RtkParticipant {
                 },
                 "getter": false,
                 "setter": false,
-                "defaultValue": "defaultConfig"
+                "defaultValue": "createDefaultConfig()"
             }
         };
     }
@@ -501,3 +501,6 @@ __decorate([
 __decorate([
     SyncWithStore()
 ], RtkParticipant.prototype, "t", void 0);
+__decorate([
+    SyncWithStore()
+], RtkParticipant.prototype, "config", void 0);

package/dist/collection/components/rtk-participant-setup/rtk-participant-setup.js

@@ -11,7 +11,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { Host, h } from "@stencil/core";
 import { defaultIconPack } from "../../lib/icons";
 import { useLanguage } from "../../lib/lang";
-import { defaultConfig } from "../../exports";
+import { createDefaultConfig } from "../../exports";
 import { SyncWithStore } from "../../utils/sync-with-store";
 export class RtkParticipantSetup {
     constructor() {
@@ -21,7 +21,7 @@ export class RtkParticipantSetup {
         /** Whether tile is used for preview */
         this.isPreview = false;
         /** Config object */
-        this.config = defaultConfig;
+        this.config = createDefaultConfig();
         /** Variant */
         this.variant = 'solid';
         /** Icon pack */
@@ -83,11 +83,11 @@ export class RtkParticipantSetup {
     }
     render() {
         var _a, _b, _c, _d;
-        return (h(Host, { key: '69573519e7127835dd9304dcfb507ebbb94e0de8' }, h("video", { key: '75c047e3029721e655016da9a40e2b94770a5234', ref: (el) => (this.videoEl = el), class: {
+        return (h(Host, { key: 'a3dd1a3fccf6d3e2a9298039098a11869beee9e2' }, h("video", { key: '8b14e504969e4eaad73760e6e2ce0180671e7ced', ref: (el) => (this.videoEl = el), class: {
                 visible: (_a = this.videoState) === null || _a === void 0 ? void 0 : _a.videoEnabled,
                 mirror: this.isMirrored(),
                 [(_d = (_c = (_b = this.config) === null || _b === void 0 ? void 0 : _b.config) === null || _c === void 0 ? void 0 : _c.videoFit) !== null && _d !== void 0 ? _d : 'cover']: true,
-            }, autoPlay: true, playsInline: true, muted: true }), h("slot", { key: '3bdccee7fb4e001425249fe832b4bdcb01751306' })));
+            }, autoPlay: true, playsInline: true, muted: true }), h("slot", { key: 'e6938a22c8cd8e0c38b4724923ceb9808fff3a01' })));
     }
     static get is() { return "rtk-participant-setup"; }
     static get encapsulation() { return "shadow"; }
@@ -211,7 +211,7 @@ export class RtkParticipantSetup {
                 },
                 "getter": false,
                 "setter": false,
-                "defaultValue": "defaultConfig"
+                "defaultValue": "createDefaultConfig()"
             },
             "variant": {
                 "type": "string",
@@ -327,6 +327,9 @@ export class RtkParticipantSetup {
 __decorate([
     SyncWithStore()
 ], RtkParticipantSetup.prototype, "states", void 0);
+__decorate([
+    SyncWithStore()
+], RtkParticipantSetup.prototype, "config", void 0);
 __decorate([
     SyncWithStore()
 ], RtkParticipantSetup.prototype, "size", void 0);

package/dist/collection/components/rtk-participant-tile/rtk-participant-tile.js

@@ -12,7 +12,7 @@ import { Host, h } from "@stencil/core";
 import { defaultIconPack } from "../../lib/icons";
 import { useLanguage } from "../../lib/lang";
 import { FlagsmithFeatureFlags } from "../../utils/flags";
-import { defaultConfig } from "../../exports";
+import { createDefaultConfig } from "../../exports";
 import { Render } from "../../lib/render";
 import { SyncWithStore } from "../../utils/sync-with-store";
 /**
@@ -28,7 +28,7 @@ export class RtkParticipantTile {
         /** Whether tile is used for preview */
         this.isPreview = false;
         /** Config object */
-        this.config = defaultConfig;
+        this.config = createDefaultConfig();
         /** Variant */
         this.variant = 'solid';
         /** Icon pack */
@@ -125,6 +125,8 @@ export class RtkParticipantTile {
     }
     render() {
         var _a, _b, _c;
+        if (!this.meeting)
+            return null;
         const defaults = {
             meeting: this.meeting,
             size: this.size,
@@ -133,10 +135,10 @@ export class RtkParticipantTile {
             iconPack: this.iconPack,
             t: this.t,
         };
-        return (h(Host, { key: '3e979a21a98a39b061612531ef9bd644d39a983e' }, h("video", { key: '3ba45f4944aafeb8673afc8daa1e15db82ec42b5', ref: (el) => this.onVideoRef(el), class: {
+        return (h(Host, null, h("video", { ref: (el) => this.onVideoRef(el), class: {
                 mirror: this.isMirrored(),
                 [(_c = (_b = (_a = this.config) === null || _a === void 0 ? void 0 : _a.config) === null || _b === void 0 ? void 0 : _b.videoFit) !== null && _c !== void 0 ? _c : 'cover']: true,
-            }, onPlaying: this.onPlaying, onPause: this.onPause, autoPlay: true, playsInline: true, muted: true, part: "video" }), this.isPinned && (h("rtk-icon", { key: '02ca6b139670e6ac3ac16a24248329a4dc09976d', class: "pinned-icon", icon: this.iconPack.pin, "aria-label": this.t('pinned'), part: "pinned-icon" })), this.mediaConnectionError && (h("div", { key: '5bf2f0b14e7d077b3ebd9bec74291bf746fcf6c9', class: "network-container", part: "network-indicator" }, h("rtk-icon", { key: '32ee83f5d08430273ae0bce3424e2e1a3206419a', class: "network-icon", icon: this.iconPack.disconnected, "aria-label": this.t('pinned'), part: "pinned-icon" }))), h("slot", { key: '781a75e98ff649fb94672cb7ce4f176ef0c1c090' }, h(Render, { key: 'b756c2269429153fbab8dd3c79978d0a2d3a153d', element: "rtk-participant-tile", defaults: defaults, childProps: {
+            }, onPlaying: this.onPlaying, onPause: this.onPause, autoPlay: true, playsInline: true, muted: true, part: "video" }), this.isPinned && (h("rtk-icon", { class: "pinned-icon", icon: this.iconPack.pin, "aria-label": this.t('pinned'), part: "pinned-icon" })), this.mediaConnectionError && (h("div", { class: "network-container", part: "network-indicator" }, h("rtk-icon", { class: "network-icon", icon: this.iconPack.disconnected, "aria-label": this.t('pinned'), part: "pinned-icon" }))), h("slot", null, h(Render, { element: "rtk-participant-tile", defaults: defaults, childProps: {
                 participant: this.participant,
             }, deepProps: true, onlyChildren: true }))));
     }
@@ -285,7 +287,7 @@ export class RtkParticipantTile {
                 },
                 "getter": false,
                 "setter": false,
-                "defaultValue": "defaultConfig"
+                "defaultValue": "createDefaultConfig()"
             },
             "variant": {
                 "type": "string",
@@ -453,6 +455,9 @@ __decorate([
 __decorate([
     SyncWithStore()
 ], RtkParticipantTile.prototype, "states", void 0);
+__decorate([
+    SyncWithStore()
+], RtkParticipantTile.prototype, "config", void 0);
 __decorate([
     SyncWithStore()
 ], RtkParticipantTile.prototype, "size", void 0);