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

package/dist/cjs/index.cjs.js

@@ -0,0 +1,268 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const uiStore = require('./ui-store-790d3fec.js');
+const config = require('./config-a123c409.js');
+const notification = require('./notification-30f14d01.js');
+const chat = require('./chat-7e13b43e.js');
+require('./index-d3eba4b9.js');
+require('./keysIn-8bdbe83d.js');
+require('./isObjectLike-73d13a39.js');
+require('./logger-3df9c75d.js');
+
+/**
+ * Send notification which will be displayed in the `<rtk-notifications />` component.
+ * @param notification Notification object
+ * @param playSound Sound type, if sound type is sent plays that sound with the notification.
+ * @returns Return value of emitting the event
+ */
+const sendNotification = (notification, playSound = undefined) => {
+    if (typeof document === 'undefined')
+        return false;
+    const event = new CustomEvent('rtkNotification', {
+        detail: Object.assign(Object.assign({}, notification), { playSound }),
+        composed: true,
+    });
+    return document.dispatchEvent(event);
+};
+
+/* eslint-disable no-console */
+/*
+    Elements can be of two types
+    'rtk-mic-toggle' or ['rtk-mic-toggle', {prop: 1}]
+    Custom findByName function to check for both
+*/
+function getFinder(query) {
+    return (value) => {
+        if (Array.isArray(value)) {
+            return value[0] === query;
+        }
+        return value === query;
+    };
+}
+/*
+    Elements can be of two types
+    'rtk-mic-toggle' or ['rtk-mic-toggle', {prop: 1}]
+    Custom filterByName function to check for both
+*/
+function getFilter(query) {
+    return (value) => {
+        if (Array.isArray(value)) {
+            return value[0] !== query;
+        }
+        return value !== query;
+    };
+}
+/*
+    transform JSX Component Name -> web component format
+    eg. RtkMicToggle -> rtk-mic-toggle
+*/
+function convertComponentName(jsxName) {
+    return jsxName.replace(/([a-z])([A-Z])/g, (g) => `${g[0]}-${g[1]}`.toLowerCase());
+}
+class UIElemEditor {
+    constructor(elem, config, keyString) {
+        this.elem = elem;
+        this.config = config;
+        this.keyString = keyString;
+    }
+    /**
+     * Adds an element to the chilren
+     * @param el :Name of the element - `rtk-mic-toggle`
+     * @param props :Optional props for the element `{variant: 'solid'}`
+     */
+    add(el, props = {}) {
+        var _a;
+        el = convertComponentName(el);
+        let composedElem = el;
+        if (Object.keys(props).length > 0) {
+            composedElem = [el, props];
+        }
+        if (Array.isArray(this.elem)) {
+            this.elem.push(composedElem);
+        }
+        else if ('children' in this.elem && Array.isArray(this.elem.children)) {
+            this.elem.children = [...this.elem.children, composedElem];
+        }
+        else if ('remove' in this.elem &&
+            Array.isArray(this.elem.remove) &&
+            this.elem.remove.find(getFinder(el))) {
+            this.elem.remove = this.elem.remove.filter(getFilter(el));
+        }
+        else {
+            if (!('add' in this.elem)) {
+                this.elem.add = [];
+            }
+            (_a = this.elem.add) === null || _a === void 0 ? void 0 : _a.push(composedElem);
+        }
+        return this;
+    }
+    /**
+     * Removes an element from the chilren
+     * @param el :Name of the element to remove - `rtk-mic-toggle`
+     */
+    remove(el) {
+        var _a;
+        el = convertComponentName(el);
+        if (Array.isArray(this.elem)) {
+            const idx = this.elem.findIndex(getFinder(el));
+            if (idx > -1) {
+                this.elem.splice(idx, 1);
+            }
+        }
+        else if ('children' in this.elem && Array.isArray(this.elem.children)) {
+            this.elem.children = this.elem.children.filter(getFilter(el));
+        }
+        else if ('add' in this.elem &&
+            Array.isArray(this.elem.add) &&
+            this.elem.add.find((e) => e === el)) {
+            this.elem.add = this.elem.add.filter(getFilter(el));
+        }
+        else {
+            if (!('remove' in this.elem)) {
+                this.elem.remove = [];
+            }
+            (_a = this.elem.remove) === null || _a === void 0 ? void 0 : _a.push(el);
+        }
+        return this;
+    }
+    set style(s) {
+        console.log(s);
+        // TODO: Not Implemented
+    }
+    setChildrenProps(childElem, props) {
+        console.log(this.keyString, childElem, props);
+        // TODO: Not Implemented
+    }
+    getChildrenProps(childElem) {
+        console.log(this.keyString, childElem);
+        // TODO: Not Implemented
+        return {};
+    }
+    replace(e) {
+        console.log(this.config, e);
+        // TODO: Not Implemented
+    }
+}
+/* eslint-enable no-console */
+class RtkUiBuilder {
+    constructor(config) {
+        this.config = config || uiStore.defaultConfig;
+    }
+    /**
+     * Find an element anywhere in the hierarachy and returns an editor object
+     * @param elem = 'rtk-participant-tile'
+     * @param states = { activeSidebar: true, activeSettings: true, meeting: 'joined'}
+     * @returns `UIElemEditor`
+     */
+    find(elem, states = {}) {
+        elem = convertComponentName(elem);
+        // eg. [activeSidebar, activeSettings]
+        const booleanStates = [];
+        // eg. [[meeting,joined]]
+        const nonBooleanStates = [];
+        Object.keys(states || {}).forEach((key) => {
+            if (typeof states[key] === 'boolean') {
+                booleanStates.push(key);
+            }
+            else {
+                nonBooleanStates.push([key, states[key]]);
+            }
+        });
+        booleanStates.sort();
+        const root = this.config.root;
+        if (root === undefined)
+            return;
+        let keyString = elem;
+        let booleanStateString = '';
+        if (booleanStates.length > 0) {
+            // eg. '.activeSettings.activeSidebar'
+            booleanStateString = `.${booleanStates.join('.')}`;
+            // eg. 'rtk-participant-tile.activeSettings.activeSidebar'
+            keyString = `${elem}${booleanStateString}`;
+            // An element will only re-render when a state described in its `states` key changes
+            // If the element has no states defined, ie. just array of children
+            // convert to a complex element type
+            if (Array.isArray(root[elem])) {
+                root[elem] = {
+                    states: [],
+                    children: root[elem],
+                };
+            }
+            if (root[elem].states === undefined) {
+                root[elem].states = [];
+            }
+            // Add each boolean state if it is not there already
+            booleanStates.forEach((e) => {
+                var _a, _b;
+                if (((_a = root[elem].states) === null || _a === void 0 ? void 0 : _a.indexOf(e)) === -1) {
+                    (_b = root[elem].states) === null || _b === void 0 ? void 0 : _b.push(e);
+                }
+            });
+        }
+        if (nonBooleanStates.length > 0) {
+            nonBooleanStates.forEach((k) => {
+                // eg. '[meeting=joined]'
+                const v = `[${k[0]}=${k[1]}]`;
+                // eg. 'rtk-participant-tile[meeting=joined].activeSettings.activeSidebar'
+                keyString = `${elem}${v}${booleanStateString}`;
+                // An element will only re-render when a state described in its `states` key changes
+                // If the element has no states defined, ie. just array of children
+                // convert to a complex element type
+                if (Array.isArray(root[elem])) {
+                    root[elem] = {
+                        state: k[0],
+                        children: root[elem],
+                    };
+                }
+            });
+        }
+        let target = root[keyString];
+        if (target === undefined) {
+            root[keyString] = {};
+            target = root[keyString];
+        }
+        return new UIElemEditor(target, this.config, keyString);
+    }
+    build() {
+        return this.config;
+    }
+}
+
+/**
+ * Register addons to the meeting
+ * @param addons The list of addons to register
+ * @param meeting The meeting object
+ * @param config The current UIConfig
+ * @returns The updated UIConfig
+ */
+function registerAddons(addons, meeting, config$1) {
+    if (!config$1) {
+        const generated = config.generateConfig(meeting.self.config, meeting);
+        config$1 = generated.config;
+    }
+    addons.map((addon) => {
+        config$1 = addon.register(config$1, meeting, (c) => new RtkUiBuilder(c));
+    });
+    return config$1;
+}
+
+exports.BreakoutRoomsManager = uiStore.BreakoutRoomsManager;
+exports.defaultConfig = uiStore.defaultConfig;
+exports.defaultIconPack = uiStore.defaultIconPack;
+exports.defaultLanguage = uiStore.defaultLanguage;
+exports.getInitialStates = uiStore.getInitialStates;
+exports.uiStore = uiStore.uiStore;
+exports.useLanguage = uiStore.useLanguage;
+exports.extendConfig = config.extendConfig;
+exports.generateConfig = config.generateConfig;
+exports.provideRtkDesignSystem = config.provideRtkDesignSystem;
+exports.RtkNotificationsAudio = notification.RTKNotificationsAudio;
+exports.generateChatGroupKey = chat.generateChatGroupKey;
+exports.getChatGroups = chat.getChatGroups;
+exports.getParticipantUserId = chat.getParticipantUserId;
+exports.getUnreadChatCounts = chat.getUnreadChatCounts;
+exports.RtkUiBuilder = RtkUiBuilder;
+exports.registerAddons = registerAddons;
+exports.sendNotification = sendNotification;

package/dist/cjs/isObjectLike-73d13a39.js

@@ -0,0 +1,171 @@
+'use strict';
+
+/** Detect free variable `global` from Node.js. */
+var freeGlobal = typeof global == 'object' && global && global.Object === Object && global;
+
+const freeGlobal$1 = freeGlobal;
+
+/** Detect free variable `self`. */
+var freeSelf = typeof self == 'object' && self && self.Object === Object && self;
+
+/** Used as a reference to the global object. */
+var root = freeGlobal$1 || freeSelf || Function('return this')();
+
+const root$1 = root;
+
+/** Built-in value references. */
+var Symbol = root$1.Symbol;
+
+const Symbol$1 = Symbol;
+
+/** Used for built-in method references. */
+var objectProto$1 = Object.prototype;
+
+/** Used to check objects for own properties. */
+var hasOwnProperty = objectProto$1.hasOwnProperty;
+
+/**
+ * Used to resolve the
+ * [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring)
+ * of values.
+ */
+var nativeObjectToString$1 = objectProto$1.toString;
+
+/** Built-in value references. */
+var symToStringTag$1 = Symbol$1 ? Symbol$1.toStringTag : undefined;
+
+/**
+ * A specialized version of `baseGetTag` which ignores `Symbol.toStringTag` values.
+ *
+ * @private
+ * @param {*} value The value to query.
+ * @returns {string} Returns the raw `toStringTag`.
+ */
+function getRawTag(value) {
+  var isOwn = hasOwnProperty.call(value, symToStringTag$1),
+      tag = value[symToStringTag$1];
+
+  try {
+    value[symToStringTag$1] = undefined;
+    var unmasked = true;
+  } catch (e) {}
+
+  var result = nativeObjectToString$1.call(value);
+  if (unmasked) {
+    if (isOwn) {
+      value[symToStringTag$1] = tag;
+    } else {
+      delete value[symToStringTag$1];
+    }
+  }
+  return result;
+}
+
+/** Used for built-in method references. */
+var objectProto = Object.prototype;
+
+/**
+ * Used to resolve the
+ * [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring)
+ * of values.
+ */
+var nativeObjectToString = objectProto.toString;
+
+/**
+ * Converts `value` to a string using `Object.prototype.toString`.
+ *
+ * @private
+ * @param {*} value The value to convert.
+ * @returns {string} Returns the converted string.
+ */
+function objectToString(value) {
+  return nativeObjectToString.call(value);
+}
+
+/** `Object#toString` result references. */
+var nullTag = '[object Null]',
+    undefinedTag = '[object Undefined]';
+
+/** Built-in value references. */
+var symToStringTag = Symbol$1 ? Symbol$1.toStringTag : undefined;
+
+/**
+ * The base implementation of `getTag` without fallbacks for buggy environments.
+ *
+ * @private
+ * @param {*} value The value to query.
+ * @returns {string} Returns the `toStringTag`.
+ */
+function baseGetTag(value) {
+  if (value == null) {
+    return value === undefined ? undefinedTag : nullTag;
+  }
+  return (symToStringTag && symToStringTag in Object(value))
+    ? getRawTag(value)
+    : objectToString(value);
+}
+
+/**
+ * Checks if `value` is the
+ * [language type](http://www.ecma-international.org/ecma-262/7.0/#sec-ecmascript-language-types)
+ * of `Object`. (e.g. arrays, functions, objects, regexes, `new Number(0)`, and `new String('')`)
+ *
+ * @static
+ * @memberOf _
+ * @since 0.1.0
+ * @category Lang
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is an object, else `false`.
+ * @example
+ *
+ * _.isObject({});
+ * // => true
+ *
+ * _.isObject([1, 2, 3]);
+ * // => true
+ *
+ * _.isObject(_.noop);
+ * // => true
+ *
+ * _.isObject(null);
+ * // => false
+ */
+function isObject(value) {
+  var type = typeof value;
+  return value != null && (type == 'object' || type == 'function');
+}
+
+/**
+ * Checks if `value` is object-like. A value is object-like if it's not `null`
+ * and has a `typeof` result of "object".
+ *
+ * @static
+ * @memberOf _
+ * @since 4.0.0
+ * @category Lang
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is object-like, else `false`.
+ * @example
+ *
+ * _.isObjectLike({});
+ * // => true
+ *
+ * _.isObjectLike([1, 2, 3]);
+ * // => true
+ *
+ * _.isObjectLike(_.noop);
+ * // => false
+ *
+ * _.isObjectLike(null);
+ * // => false
+ */
+function isObjectLike(value) {
+  return value != null && typeof value == 'object';
+}
+
+exports.Symbol = Symbol$1;
+exports.baseGetTag = baseGetTag;
+exports.freeGlobal = freeGlobal$1;
+exports.isObject = isObject;
+exports.isObjectLike = isObjectLike;
+exports.root = root$1;