@cloudflare/realtimekit-ui 1.2.1-staging.1 → 1.2.1-staging.3

package/dist/cjs/rtk-avatar_26.cjs.entry.js

@@ -1633,8 +1633,7 @@ const RtkMeeting = class {
             if (this.showSetupScreen == null) {
                 this.showSetupScreen = data.showSetupScreen;
             }
-            if (meeting.connectedMeetings.supportsConnectedMeetings &&
-                ((_a = targetStore.state.states.activeBreakoutRoomsManager) === null || _a === void 0 ? void 0 : _a.destinationMeetingId)) {
+            if ((_a = targetStore.state.states.activeBreakoutRoomsManager) === null || _a === void 0 ? void 0 : _a.destinationMeetingId) {
                 this.showSetupScreen = false;
             }
         }
@@ -1649,9 +1648,7 @@ const RtkMeeting = class {
         meeting.self.addListener('roomLeft', this.roomLeftListener);
         meeting.self.addListener('mediaPermissionUpdate', this.mediaPermissionUpdateListener);
         meeting.meta.addListener('socketConnectionUpdate', this.socketConnectionUpdateListener);
-        if (meeting.connectedMeetings.supportsConnectedMeetings) {
-            meeting.connectedMeetings.once('changingMeeting', this.handleChangingMeeting);
-        }
+        meeting.connectedMeetings.once('changingMeeting', this.handleChangingMeeting);
         if (meeting.self.roomJoined) {
             this.updateStates({ meeting: 'joined' });
         }

package/dist/cjs/rtk-grid.cjs.entry.js

@@ -300,6 +300,7 @@ const RtkGrid = class {
         this.pinnedParticipants = this.pinnedParticipants.filter((p) => p.id !== participant.id);
     }
     render() {
+        var _a, _b, _c, _d;
         const defaults = {
             meeting: this.meeting,
             size: this.size,
@@ -312,7 +313,16 @@ const RtkGrid = class {
             return (index$1.h(index$1.Host, null, index$1.h("div", { class: "offline-grid" }, index$1.h("rtk-icon", { icon: this.iconPack.join_stage, size: "xl" }), index$1.h("h3", null, this.t('disconnected')), index$1.h("p", null, this.t('disconnected.description')))));
         }
         if (this.roomState === 'disconnected') {
-            return (index$1.h(index$1.Host, null, index$1.h("div", { class: "offline-grid" }, index$1.h("rtk-icon", { icon: this.iconPack.disconnected, size: "xl" }), index$1.h("h3", null, this.t('offline')), index$1.h("p", null, this.t('offline.description')))));
+            /**
+             * NOTE(ravindra-cloudflare): When disconnected but WebRTC transports are
+             * still healthy, skip the offline screen — media is still flowing.
+             * The grid stays visible for seamless reconnection.
+             */
+            const mediaState = (_b = (_a = this.meeting) === null || _a === void 0 ? void 0 : _a.meta) === null || _b === void 0 ? void 0 : _b.mediaState;
+            const transportsHealthy = ((_c = mediaState === null || mediaState === void 0 ? void 0 : mediaState.send) === null || _c === void 0 ? void 0 : _c.state) === 'connected' && ((_d = mediaState === null || mediaState === void 0 ? void 0 : mediaState.recv) === null || _d === void 0 ? void 0 : _d.state) === 'connected';
+            if (!transportsHealthy) {
+                return (index$1.h(index$1.Host, null, index$1.h("div", { class: "offline-grid" }, index$1.h("rtk-icon", { icon: this.iconPack.disconnected, size: "xl" }), index$1.h("h3", null, this.t('offline')), index$1.h("p", null, this.t('offline.description')))));
+            }
         }
         if (this.roomState === 'failed') {
             return (index$1.h(index$1.Host, null, index$1.h("div", { class: "offline-grid" }, index$1.h("rtk-icon", { icon: this.iconPack.disconnected, size: "xl" }), index$1.h("h3", null, this.t('failed')), index$1.h("p", null, this.t('failed.description')))));

package/dist/cjs/rtk-participants-audio.cjs.entry.js

@@ -21,11 +21,11 @@ class RTKAudio {
         this.audioTracks = [];
     }
     addTrack(id, track) {
-        if (!this.audioTracks.some((a) => a.id === id)) {
-            this.audioTracks.push({ id, track });
-            this.audioStream.addTrack(track);
-            this.play();
-        }
+        // Remove the track if it already exists, with the same id
+        this.removeTrack(id);
+        this.audioTracks.push({ id, track });
+        this.audioStream.addTrack(track);
+        this.play();
     }
     removeTrack(id) {
         const track = this.audioTracks.find((a) => a.id === id);

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

@@ -182,9 +182,7 @@ const RtkUiProvider = class {
             meeting.self.addListener('roomLeft', this.roomLeftListener);
             meeting.self.addListener('mediaPermissionUpdate', this.mediaPermissionUpdateListener);
             meeting.meta.addListener('socketConnectionUpdate', this.socketConnectionUpdateListener);
-            if (meeting.connectedMeetings.supportsConnectedMeetings) {
-                meeting.connectedMeetings.once('changingMeeting', this.handleChangingMeeting);
-            }
+            meeting.connectedMeetings.once('changingMeeting', this.handleChangingMeeting);
             if (meeting.self.roomJoined) {
                 this.updateStates({ meeting: 'joined' });
             }

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

@@ -296,6 +296,7 @@ export class RtkGrid {
         this.pinnedParticipants = this.pinnedParticipants.filter((p) => p.id !== participant.id);
     }
     render() {
+        var _a, _b, _c, _d;
         const defaults = {
             meeting: this.meeting,
             size: this.size,
@@ -308,7 +309,16 @@ export class RtkGrid {
             return (h(Host, null, h("div", { class: "offline-grid" }, h("rtk-icon", { icon: this.iconPack.join_stage, size: "xl" }), h("h3", null, this.t('disconnected')), h("p", null, this.t('disconnected.description')))));
         }
         if (this.roomState === 'disconnected') {
-            return (h(Host, null, h("div", { class: "offline-grid" }, h("rtk-icon", { icon: this.iconPack.disconnected, size: "xl" }), h("h3", null, this.t('offline')), h("p", null, this.t('offline.description')))));
+            /**
+             * NOTE(ravindra-cloudflare): When disconnected but WebRTC transports are
+             * still healthy, skip the offline screen — media is still flowing.
+             * The grid stays visible for seamless reconnection.
+             */
+            const mediaState = (_b = (_a = this.meeting) === null || _a === void 0 ? void 0 : _a.meta) === null || _b === void 0 ? void 0 : _b.mediaState;
+            const transportsHealthy = ((_c = mediaState === null || mediaState === void 0 ? void 0 : mediaState.send) === null || _c === void 0 ? void 0 : _c.state) === 'connected' && ((_d = mediaState === null || mediaState === void 0 ? void 0 : mediaState.recv) === null || _d === void 0 ? void 0 : _d.state) === 'connected';
+            if (!transportsHealthy) {
+                return (h(Host, null, h("div", { class: "offline-grid" }, h("rtk-icon", { icon: this.iconPack.disconnected, size: "xl" }), h("h3", null, this.t('offline')), h("p", null, this.t('offline.description')))));
+            }
         }
         if (this.roomState === 'failed') {
             return (h(Host, null, h("div", { class: "offline-grid" }, h("rtk-icon", { icon: this.iconPack.disconnected, size: "xl" }), h("h3", null, this.t('failed')), h("p", null, this.t('failed.description')))));

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

@@ -213,8 +213,7 @@ export class RtkMeeting {
             if (this.showSetupScreen == null) {
                 this.showSetupScreen = data.showSetupScreen;
             }
-            if (meeting.connectedMeetings.supportsConnectedMeetings &&
-                ((_a = targetStore.state.states.activeBreakoutRoomsManager) === null || _a === void 0 ? void 0 : _a.destinationMeetingId)) {
+            if ((_a = targetStore.state.states.activeBreakoutRoomsManager) === null || _a === void 0 ? void 0 : _a.destinationMeetingId) {
                 this.showSetupScreen = false;
             }
         }
@@ -229,9 +228,7 @@ export class RtkMeeting {
         meeting.self.addListener('roomLeft', this.roomLeftListener);
         meeting.self.addListener('mediaPermissionUpdate', this.mediaPermissionUpdateListener);
         meeting.meta.addListener('socketConnectionUpdate', this.socketConnectionUpdateListener);
-        if (meeting.connectedMeetings.supportsConnectedMeetings) {
-            meeting.connectedMeetings.once('changingMeeting', this.handleChangingMeeting);
-        }
+        meeting.connectedMeetings.once('changingMeeting', this.handleChangingMeeting);
         if (meeting.self.roomJoined) {
             this.updateStates({ meeting: 'joined' });
         }

package/dist/collection/components/rtk-ui-provider/rtk-ui-provider.js

@@ -173,9 +173,7 @@ export class RtkUiProvider {
             meeting.self.addListener('roomLeft', this.roomLeftListener);
             meeting.self.addListener('mediaPermissionUpdate', this.mediaPermissionUpdateListener);
             meeting.meta.addListener('socketConnectionUpdate', this.socketConnectionUpdateListener);
-            if (meeting.connectedMeetings.supportsConnectedMeetings) {
-                meeting.connectedMeetings.once('changingMeeting', this.handleChangingMeeting);
-            }
+            meeting.connectedMeetings.once('changingMeeting', this.handleChangingMeeting);
             if (meeting.self.roomJoined) {
                 this.updateStates({ meeting: 'joined' });
             }

package/dist/collection/lib/audio.js

@@ -13,11 +13,11 @@ export default class RTKAudio {
         this.audioTracks = [];
     }
     addTrack(id, track) {
-        if (!this.audioTracks.some((a) => a.id === id)) {
-            this.audioTracks.push({ id, track });
-            this.audioStream.addTrack(track);
-            this.play();
-        }
+        // Remove the track if it already exists, with the same id
+        this.removeTrack(id);
+        this.audioTracks.push({ id, track });
+        this.audioStream.addTrack(track);
+        this.play();
     }
     removeTrack(id) {
         const track = this.audioTracks.find((a) => a.id === id);

package/dist/components/rtk-grid.js

@@ -306,6 +306,7 @@ const RtkGrid$1 = /*@__PURE__*/ proxyCustomElement(class RtkGrid extends H {
         this.pinnedParticipants = this.pinnedParticipants.filter((p) => p.id !== participant.id);
     }
     render() {
+        var _a, _b, _c, _d;
         const defaults = {
             meeting: this.meeting,
             size: this.size,
@@ -318,7 +319,16 @@ const RtkGrid$1 = /*@__PURE__*/ proxyCustomElement(class RtkGrid extends H {
             return (h(Host, null, h("div", { class: "offline-grid" }, h("rtk-icon", { icon: this.iconPack.join_stage, size: "xl" }), h("h3", null, this.t('disconnected')), h("p", null, this.t('disconnected.description')))));
         }
         if (this.roomState === 'disconnected') {
-            return (h(Host, null, h("div", { class: "offline-grid" }, h("rtk-icon", { icon: this.iconPack.disconnected, size: "xl" }), h("h3", null, this.t('offline')), h("p", null, this.t('offline.description')))));
+            /**
+             * NOTE(ravindra-cloudflare): When disconnected but WebRTC transports are
+             * still healthy, skip the offline screen — media is still flowing.
+             * The grid stays visible for seamless reconnection.
+             */
+            const mediaState = (_b = (_a = this.meeting) === null || _a === void 0 ? void 0 : _a.meta) === null || _b === void 0 ? void 0 : _b.mediaState;
+            const transportsHealthy = ((_c = mediaState === null || mediaState === void 0 ? void 0 : mediaState.send) === null || _c === void 0 ? void 0 : _c.state) === 'connected' && ((_d = mediaState === null || mediaState === void 0 ? void 0 : mediaState.recv) === null || _d === void 0 ? void 0 : _d.state) === 'connected';
+            if (!transportsHealthy) {
+                return (h(Host, null, h("div", { class: "offline-grid" }, h("rtk-icon", { icon: this.iconPack.disconnected, size: "xl" }), h("h3", null, this.t('offline')), h("p", null, this.t('offline.description')))));
+            }
         }
         if (this.roomState === 'failed') {
             return (h(Host, null, h("div", { class: "offline-grid" }, h("rtk-icon", { icon: this.iconPack.disconnected, size: "xl" }), h("h3", null, this.t('failed')), h("p", null, this.t('failed.description')))));

package/dist/components/rtk-meeting.js

@@ -259,8 +259,7 @@ const RtkMeeting$1 = /*@__PURE__*/ proxyCustomElement(class RtkMeeting extends H
             if (this.showSetupScreen == null) {
                 this.showSetupScreen = data.showSetupScreen;
             }
-            if (meeting.connectedMeetings.supportsConnectedMeetings &&
-                ((_a = targetStore.state.states.activeBreakoutRoomsManager) === null || _a === void 0 ? void 0 : _a.destinationMeetingId)) {
+            if ((_a = targetStore.state.states.activeBreakoutRoomsManager) === null || _a === void 0 ? void 0 : _a.destinationMeetingId) {
                 this.showSetupScreen = false;
             }
         }
@@ -275,9 +274,7 @@ const RtkMeeting$1 = /*@__PURE__*/ proxyCustomElement(class RtkMeeting extends H
         meeting.self.addListener('roomLeft', this.roomLeftListener);
         meeting.self.addListener('mediaPermissionUpdate', this.mediaPermissionUpdateListener);
         meeting.meta.addListener('socketConnectionUpdate', this.socketConnectionUpdateListener);
-        if (meeting.connectedMeetings.supportsConnectedMeetings) {
-            meeting.connectedMeetings.once('changingMeeting', this.handleChangingMeeting);
-        }
+        meeting.connectedMeetings.once('changingMeeting', this.handleChangingMeeting);
         if (meeting.self.roomJoined) {
             this.updateStates({ meeting: 'joined' });
         }

package/dist/components/rtk-participants-audio.js

@@ -20,11 +20,11 @@ class RTKAudio {
         this.audioTracks = [];
     }
     addTrack(id, track) {
-        if (!this.audioTracks.some((a) => a.id === id)) {
-            this.audioTracks.push({ id, track });
-            this.audioStream.addTrack(track);
-            this.play();
-        }
+        // Remove the track if it already exists, with the same id
+        this.removeTrack(id);
+        this.audioTracks.push({ id, track });
+        this.audioStream.addTrack(track);
+        this.play();
     }
     removeTrack(id) {
         const track = this.audioTracks.find((a) => a.id === id);

package/dist/components/rtk-ui-provider.js

@@ -180,9 +180,7 @@ const RtkUiProvider$1 = /*@__PURE__*/ proxyCustomElement(class RtkUiProvider ext
             meeting.self.addListener('roomLeft', this.roomLeftListener);
             meeting.self.addListener('mediaPermissionUpdate', this.mediaPermissionUpdateListener);
             meeting.meta.addListener('socketConnectionUpdate', this.socketConnectionUpdateListener);
-            if (meeting.connectedMeetings.supportsConnectedMeetings) {
-                meeting.connectedMeetings.once('changingMeeting', this.handleChangingMeeting);
-            }
+            meeting.connectedMeetings.once('changingMeeting', this.handleChangingMeeting);
             if (meeting.self.roomJoined) {
                 this.updateStates({ meeting: 'joined' });
             }

package/dist/docs/docs-components.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2026-06-03T12:47:50",
+  "timestamp": "2026-06-05T07:56:56",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.27.2",

package/dist/esm/loader.js

@@ -14398,8 +14398,7 @@ const RtkMeeting = class {
             if (this.showSetupScreen == null) {
                 this.showSetupScreen = data.showSetupScreen;
             }
-            if (meeting.connectedMeetings.supportsConnectedMeetings &&
-                ((_a = targetStore.state.states.activeBreakoutRoomsManager) === null || _a === void 0 ? void 0 : _a.destinationMeetingId)) {
+            if ((_a = targetStore.state.states.activeBreakoutRoomsManager) === null || _a === void 0 ? void 0 : _a.destinationMeetingId) {
                 this.showSetupScreen = false;
             }
         }
@@ -14414,9 +14413,7 @@ const RtkMeeting = class {
         meeting.self.addListener('roomLeft', this.roomLeftListener);
         meeting.self.addListener('mediaPermissionUpdate', this.mediaPermissionUpdateListener);
         meeting.meta.addListener('socketConnectionUpdate', this.socketConnectionUpdateListener);
-        if (meeting.connectedMeetings.supportsConnectedMeetings) {
-            meeting.connectedMeetings.once('changingMeeting', this.handleChangingMeeting);
-        }
+        meeting.connectedMeetings.once('changingMeeting', this.handleChangingMeeting);
         if (meeting.self.roomJoined) {
             this.updateStates({ meeting: 'joined' });
         }
@@ -18714,6 +18711,7 @@ const RtkGrid = class {
         this.pinnedParticipants = this.pinnedParticipants.filter((p) => p.id !== participant.id);
     }
     render() {
+        var _a, _b, _c, _d;
         const defaults = {
             meeting: this.meeting,
             size: this.size,
@@ -18726,7 +18724,16 @@ const RtkGrid = class {
             return (h(Host, null, h("div", { class: "offline-grid" }, h("rtk-icon", { icon: this.iconPack.join_stage, size: "xl" }), h("h3", null, this.t('disconnected')), h("p", null, this.t('disconnected.description')))));
         }
         if (this.roomState === 'disconnected') {
-            return (h(Host, null, h("div", { class: "offline-grid" }, h("rtk-icon", { icon: this.iconPack.disconnected, size: "xl" }), h("h3", null, this.t('offline')), h("p", null, this.t('offline.description')))));
+            /**
+             * NOTE(ravindra-cloudflare): When disconnected but WebRTC transports are
+             * still healthy, skip the offline screen — media is still flowing.
+             * The grid stays visible for seamless reconnection.
+             */
+            const mediaState = (_b = (_a = this.meeting) === null || _a === void 0 ? void 0 : _a.meta) === null || _b === void 0 ? void 0 : _b.mediaState;
+            const transportsHealthy = ((_c = mediaState === null || mediaState === void 0 ? void 0 : mediaState.send) === null || _c === void 0 ? void 0 : _c.state) === 'connected' && ((_d = mediaState === null || mediaState === void 0 ? void 0 : mediaState.recv) === null || _d === void 0 ? void 0 : _d.state) === 'connected';
+            if (!transportsHealthy) {
+                return (h(Host, null, h("div", { class: "offline-grid" }, h("rtk-icon", { icon: this.iconPack.disconnected, size: "xl" }), h("h3", null, this.t('offline')), h("p", null, this.t('offline.description')))));
+            }
         }
         if (this.roomState === 'failed') {
             return (h(Host, null, h("div", { class: "offline-grid" }, h("rtk-icon", { icon: this.iconPack.disconnected, size: "xl" }), h("h3", null, this.t('failed')), h("p", null, this.t('failed.description')))));
@@ -21316,11 +21323,11 @@ class RTKAudio {
         this.audioTracks = [];
     }
     addTrack(id, track) {
-        if (!this.audioTracks.some((a) => a.id === id)) {
-            this.audioTracks.push({ id, track });
-            this.audioStream.addTrack(track);
-            this.play();
-        }
+        // Remove the track if it already exists, with the same id
+        this.removeTrack(id);
+        this.audioTracks.push({ id, track });
+        this.audioStream.addTrack(track);
+        this.play();
     }
     removeTrack(id) {
         const track = this.audioTracks.find((a) => a.id === id);
@@ -23797,9 +23804,7 @@ const RtkUiProvider = class {
             meeting.self.addListener('roomLeft', this.roomLeftListener);
             meeting.self.addListener('mediaPermissionUpdate', this.mediaPermissionUpdateListener);
             meeting.meta.addListener('socketConnectionUpdate', this.socketConnectionUpdateListener);
-            if (meeting.connectedMeetings.supportsConnectedMeetings) {
-                meeting.connectedMeetings.once('changingMeeting', this.handleChangingMeeting);
-            }
+            meeting.connectedMeetings.once('changingMeeting', this.handleChangingMeeting);
             if (meeting.self.roomJoined) {
                 this.updateStates({ meeting: 'joined' });
             }

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

@@ -1629,8 +1629,7 @@ const RtkMeeting = class {
             if (this.showSetupScreen == null) {
                 this.showSetupScreen = data.showSetupScreen;
             }
-            if (meeting.connectedMeetings.supportsConnectedMeetings &&
-                ((_a = targetStore.state.states.activeBreakoutRoomsManager) === null || _a === void 0 ? void 0 : _a.destinationMeetingId)) {
+            if ((_a = targetStore.state.states.activeBreakoutRoomsManager) === null || _a === void 0 ? void 0 : _a.destinationMeetingId) {
                 this.showSetupScreen = false;
             }
         }
@@ -1645,9 +1644,7 @@ const RtkMeeting = class {
         meeting.self.addListener('roomLeft', this.roomLeftListener);
         meeting.self.addListener('mediaPermissionUpdate', this.mediaPermissionUpdateListener);
         meeting.meta.addListener('socketConnectionUpdate', this.socketConnectionUpdateListener);
-        if (meeting.connectedMeetings.supportsConnectedMeetings) {
-            meeting.connectedMeetings.once('changingMeeting', this.handleChangingMeeting);
-        }
+        meeting.connectedMeetings.once('changingMeeting', this.handleChangingMeeting);
         if (meeting.self.roomJoined) {
             this.updateStates({ meeting: 'joined' });
         }

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

@@ -296,6 +296,7 @@ const RtkGrid = class {
         this.pinnedParticipants = this.pinnedParticipants.filter((p) => p.id !== participant.id);
     }
     render() {
+        var _a, _b, _c, _d;
         const defaults = {
             meeting: this.meeting,
             size: this.size,
@@ -308,7 +309,16 @@ const RtkGrid = class {
             return (h(Host, null, h("div", { class: "offline-grid" }, h("rtk-icon", { icon: this.iconPack.join_stage, size: "xl" }), h("h3", null, this.t('disconnected')), h("p", null, this.t('disconnected.description')))));
         }
         if (this.roomState === 'disconnected') {
-            return (h(Host, null, h("div", { class: "offline-grid" }, h("rtk-icon", { icon: this.iconPack.disconnected, size: "xl" }), h("h3", null, this.t('offline')), h("p", null, this.t('offline.description')))));
+            /**
+             * NOTE(ravindra-cloudflare): When disconnected but WebRTC transports are
+             * still healthy, skip the offline screen — media is still flowing.
+             * The grid stays visible for seamless reconnection.
+             */
+            const mediaState = (_b = (_a = this.meeting) === null || _a === void 0 ? void 0 : _a.meta) === null || _b === void 0 ? void 0 : _b.mediaState;
+            const transportsHealthy = ((_c = mediaState === null || mediaState === void 0 ? void 0 : mediaState.send) === null || _c === void 0 ? void 0 : _c.state) === 'connected' && ((_d = mediaState === null || mediaState === void 0 ? void 0 : mediaState.recv) === null || _d === void 0 ? void 0 : _d.state) === 'connected';
+            if (!transportsHealthy) {
+                return (h(Host, null, h("div", { class: "offline-grid" }, h("rtk-icon", { icon: this.iconPack.disconnected, size: "xl" }), h("h3", null, this.t('offline')), h("p", null, this.t('offline.description')))));
+            }
         }
         if (this.roomState === 'failed') {
             return (h(Host, null, h("div", { class: "offline-grid" }, h("rtk-icon", { icon: this.iconPack.disconnected, size: "xl" }), h("h3", null, this.t('failed')), h("p", null, this.t('failed.description')))));

package/dist/esm/rtk-participants-audio.entry.js

@@ -17,11 +17,11 @@ class RTKAudio {
         this.audioTracks = [];
     }
     addTrack(id, track) {
-        if (!this.audioTracks.some((a) => a.id === id)) {
-            this.audioTracks.push({ id, track });
-            this.audioStream.addTrack(track);
-            this.play();
-        }
+        // Remove the track if it already exists, with the same id
+        this.removeTrack(id);
+        this.audioTracks.push({ id, track });
+        this.audioStream.addTrack(track);
+        this.play();
     }
     removeTrack(id) {
         const track = this.audioTracks.find((a) => a.id === id);

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

@@ -178,9 +178,7 @@ const RtkUiProvider = class {
             meeting.self.addListener('roomLeft', this.roomLeftListener);
             meeting.self.addListener('mediaPermissionUpdate', this.mediaPermissionUpdateListener);
             meeting.meta.addListener('socketConnectionUpdate', this.socketConnectionUpdateListener);
-            if (meeting.connectedMeetings.supportsConnectedMeetings) {
-                meeting.connectedMeetings.once('changingMeeting', this.handleChangingMeeting);
-            }
+            meeting.connectedMeetings.once('changingMeeting', this.handleChangingMeeting);
             if (meeting.self.roomJoined) {
                 this.updateStates({ meeting: 'joined' });
             }