@cloudflare/realtimekit-ui 0.0.0 → 1.0.0-staging.3

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

@@ -0,0 +1,195 @@
+import { p as proxyCustomElement, H, d as createEvent, h, e as Host } from './p-3bfd5b6d.js';
+import { d as defaultConfig, n as uiState, u as uiStore } from './p-53b020e2.js';
+import { g as generateConfig, p as provideRtkDesignSystem, d as deepMerge } from './p-550aa089.js';
+import './p-a83ccdbd.js';
+import { g as getSize } from './p-96be234f.js';
+
+const rtkUiProviderCss = "rtk-ui-provider{display:block;width:100%;height:100%}";
+const RtkUiProviderStyle0 = rtkUiProviderCss;
+
+const LEAVE_ROOM_TIMER = 10000;
+const RtkUiProvider$1 = /*@__PURE__*/ proxyCustomElement(class RtkUiProvider extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.statesUpdate = createEvent(this, "rtkStatesUpdate", 7);
+        /** Config */
+        this.config = defaultConfig;
+        /** Whether to show setup screen or not */
+        this.showSetupScreen = false;
+        /**
+         * Do not render children until meeting is initialized
+         * @default false
+         */
+        this.noRenderUntilMeeting = false;
+        this.handleResize = () => {
+            this.size = getSize(this.host.clientWidth);
+        };
+        this.loadTheme = () => {
+            var _a;
+            if (this.config === defaultConfig) {
+                const { config } = generateConfig(this.meeting.self.config, this.meeting);
+                this.config = config;
+            }
+            if ((_a = this.config) === null || _a === void 0 ? void 0 : _a.designTokens) {
+                provideRtkDesignSystem(document.documentElement, this.config.designTokens);
+            }
+        };
+        this.roomJoinedListener = () => {
+            this.updateStates({ meeting: 'joined' });
+        };
+        this.waitlistedListener = () => {
+            this.updateStates({ meeting: 'waiting' });
+        };
+        this.roomLeftListener = ({ state }) => {
+            // Let socketConnectionUpdate listener handle this case.
+            if (state === 'disconnected' || state === 'failed')
+                return;
+            this.updateStates({ meeting: 'ended', roomLeftState: state });
+        };
+        this.mediaPermissionUpdateListener = ({ kind, message }) => {
+            if (['audio', 'video'].includes(kind)) {
+                if ((message === 'DENIED' || message === 'SYSTEM_DENIED') &&
+                    uiState.states.activeDebugger !== true) {
+                    const permissionModalSettings = {
+                        enabled: true,
+                        kind,
+                    };
+                    this.updateStates({ activePermissionsMessage: permissionModalSettings });
+                }
+            }
+        };
+        this.socketConnectionUpdateListener = ({ state }) => {
+            if (state === 'failed') {
+                setTimeout(() => {
+                    this.meeting.leave('disconnected');
+                }, LEAVE_ROOM_TIMER);
+            }
+        };
+    }
+    listenState(e) {
+        this.updateStates(e.detail);
+    }
+    updateStates(states) {
+        const newStates = Object.assign({}, uiState.states);
+        uiState.states = deepMerge(newStates, states);
+        this.statesUpdate.emit(uiState.states);
+    }
+    connectedCallback() {
+        if (typeof window !== 'undefined') {
+            this.authErrorListener = (ev) => {
+                if (ev.detail.message.includes('401')) {
+                    this.updateStates({ meeting: 'ended', roomLeftState: 'unauthorized' });
+                }
+            };
+            window.addEventListener('rtkError', this.authErrorListener);
+        }
+        this.onMeetingChange(this.meeting);
+        this.onIconPackChange(this.iconPack);
+        this.onTChange(this.t);
+        this.onConfigChange(this.config);
+        this.onSizeChange(this.size);
+        this.resizeObserver = new ResizeObserver(() => this.handleResize());
+        this.resizeObserver.observe(this.host);
+    }
+    disconnectedCallback() {
+        this.resizeObserver.disconnect();
+        window.removeEventListener('rtkError', this.authErrorListener);
+        if (!this.meeting)
+            return;
+        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);
+    }
+    onMeetingChange(meeting) {
+        uiStore.state.meeting = meeting;
+        if (!meeting)
+            return;
+        this.updateStates({ viewType: meeting.meta.viewType });
+        this.loadTheme();
+        meeting.self.addListener('roomJoined', this.roomJoinedListener);
+        meeting.self.addListener('waitlisted', this.waitlistedListener);
+        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);
+        }
+        if (meeting.self.roomJoined) {
+            this.updateStates({ meeting: 'joined' });
+        }
+        else {
+            if (this.showSetupScreen) {
+                this.updateStates({ meeting: 'setup' });
+            }
+            else {
+                meeting.joinRoom();
+            }
+        }
+        window.removeEventListener('rtkError', this.authErrorListener);
+    }
+    onIconPackChange(newIconPack) {
+        uiStore.state.iconPack = newIconPack;
+    }
+    onTChange(newT) {
+        uiStore.state.t = newT;
+    }
+    onConfigChange(config) {
+        uiStore.state.config = config;
+    }
+    onSizeChange(newSize) {
+        uiStore.state.size = newSize;
+    }
+    handleChangingMeeting(destinationMeetingId) {
+        this.updateStates({
+            activeBreakoutRoomsManager: Object.assign(Object.assign({}, uiState.states.activeBreakoutRoomsManager), { destinationMeetingId }),
+        });
+    }
+    render() {
+        return h(Host, { key: 'ce61aaa074ff4c285bb9b39ea420c456a03ea2b6' }, this.noRenderUntilMeeting && !this.meeting ? null : h("slot", null));
+    }
+    get host() { return this; }
+    static get watchers() { return {
+        "meeting": ["onMeetingChange"],
+        "iconPack": ["onIconPackChange"],
+        "t": ["onTChange"],
+        "config": ["onConfigChange"],
+        "size": ["onSizeChange"]
+    }; }
+    static get style() { return RtkUiProviderStyle0; }
+}, [4, "rtk-ui-provider", {
+        "meeting": [16],
+        "iconPack": [16],
+        "t": [16],
+        "config": [16],
+        "size": [1537],
+        "showSetupScreen": [4, "show-setup-screen"],
+        "noRenderUntilMeeting": [4, "no-render-until-meeting"]
+    }, [[0, "rtkStateUpdate", "listenState"]], {
+        "meeting": ["onMeetingChange"],
+        "iconPack": ["onIconPackChange"],
+        "t": ["onTChange"],
+        "config": ["onConfigChange"],
+        "size": ["onSizeChange"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["rtk-ui-provider"];
+    components.forEach(tagName => { switch (tagName) {
+        case "rtk-ui-provider":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, RtkUiProvider$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const RtkUiProvider = RtkUiProvider$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { RtkUiProvider, defineCustomElement };

package/dist/components/rtk-viewer-count.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface RtkViewerCount extends Components.RtkViewerCount, HTMLElement {}
+export const RtkViewerCount: {
+    prototype: RtkViewerCount;
+    new (): RtkViewerCount;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/rtk-viewer-count.js

@@ -0,0 +1,6 @@
+import { R as RtkViewerCount$1, d as defineCustomElement$1 } from './p-028999b4.js';
+
+const RtkViewerCount = RtkViewerCount$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { RtkViewerCount, defineCustomElement };

package/dist/components/rtk-virtualized-participant-list.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface RtkVirtualizedParticipantList extends Components.RtkVirtualizedParticipantList, HTMLElement {}
+export const RtkVirtualizedParticipantList: {
+    prototype: RtkVirtualizedParticipantList;
+    new (): RtkVirtualizedParticipantList;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/rtk-virtualized-participant-list.js

@@ -0,0 +1,6 @@
+import { R as RtkVirtualizedParticipantList$1, d as defineCustomElement$1 } from './p-51b56b52.js';
+
+const RtkVirtualizedParticipantList = RtkVirtualizedParticipantList$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { RtkVirtualizedParticipantList, defineCustomElement };

package/dist/components/rtk-waiting-screen.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface RtkWaitingScreen extends Components.RtkWaitingScreen, HTMLElement {}
+export const RtkWaitingScreen: {
+    prototype: RtkWaitingScreen;
+    new (): RtkWaitingScreen;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/rtk-waiting-screen.js

@@ -0,0 +1,74 @@
+import { p as proxyCustomElement, H, h, e as Host } from './p-3bfd5b6d.js';
+import { d as defaultConfig, a as defaultIconPack, c as useLanguage } from './p-53b020e2.js';
+import './p-a83ccdbd.js';
+import { S as SyncWithStore } from './p-df6f9a3f.js';
+import { d as defineCustomElement$2 } from './p-ad50fcdc.js';
+
+const rtkWaitingScreenCss = ":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{height:100%;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center}.centered{display:flex;flex-direction:column;align-items:center}rtk-logo{margin-bottom:var(--rtk-space-8, 32px);height:var(--rtk-space-12, 48px)}p{font-size:16px;border-radius:var(--rtk-border-radius-lg, 12px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-800, 30 30 30) / var(--tw-bg-opacity));padding-left:var(--rtk-space-8, 32px);padding-right:var(--rtk-space-8, 32px);padding-top:var(--rtk-space-4, 16px);padding-bottom:var(--rtk-space-4, 16px);color:rgb(var(--rtk-colors-text-1000, 255 255 255))}";
+const RtkWaitingScreenStyle0 = rtkWaitingScreenCss;
+
+var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+const RtkWaitingScreen$1 = /*@__PURE__*/ proxyCustomElement(class RtkWaitingScreen extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        /** Config */
+        this.config = defaultConfig;
+        /** Icon pack */
+        this.iconPack = defaultIconPack;
+        /** Language */
+        this.t = useLanguage();
+    }
+    render() {
+        return (h(Host, { key: '77f62eac2bfd382e325dbb6e1e2386c5eb3d13a6' }, h("slot", { key: 'efa083572c73db00e2db935fd44eefc85da2f22d' }, h("div", { key: 'f03cb8e9293d618bf17532ce139311998d6332f8', class: "centered", part: "content" }, h("rtk-logo", { key: '4f80c7bd29784e0edcb069c5f8c90ea6662831d4', meeting: this.meeting, config: this.config, part: "logo", t: this.t }), h("p", { key: 'd8a7bd5e11b2bec6e9a108c6c1c64d2b45df4a66' }, this.t('waitlist.body_text'))))));
+    }
+    static get style() { return RtkWaitingScreenStyle0; }
+}, [1, "rtk-waiting-screen", {
+        "meeting": [16],
+        "config": [16],
+        "iconPack": [16],
+        "t": [16]
+    }]);
+__decorate([
+    SyncWithStore()
+], RtkWaitingScreen$1.prototype, "meeting", void 0);
+__decorate([
+    SyncWithStore()
+], RtkWaitingScreen$1.prototype, "iconPack", void 0);
+__decorate([
+    SyncWithStore()
+], RtkWaitingScreen$1.prototype, "t", void 0);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["rtk-waiting-screen", "rtk-logo"];
+    components.forEach(tagName => { switch (tagName) {
+        case "rtk-waiting-screen":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, RtkWaitingScreen$1);
+            }
+            break;
+        case "rtk-logo":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const RtkWaitingScreen = RtkWaitingScreen$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { RtkWaitingScreen, defineCustomElement };