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

package/dist/collection/utils/file.js

@@ -0,0 +1,54 @@
+import { sanitizeLink } from "./string";
+export const getExtension = (name) => {
+    // split query and hash from url, then get the filename
+    return name.split(/[#?]/)[0].split('.').pop().trim();
+};
+/**
+ * Formats size in bytes to human readable formats
+ * @param size Size in bytes
+ * @returns Human readable file size
+ */
+export const getFileSize = (size) => {
+    if (!size)
+        return '0 B';
+    const i = Math.floor(Math.log(size) / Math.log(1024));
+    return `${(size / 1024 ** i).toFixed(2)} ${['B', 'kB', 'MB', 'GB', 'TB'][i]}`;
+};
+/**
+ * Extracts the file name from a URL.
+ * @param link The URL of the file
+ * @param fallback Fallback filename
+ * @returns File name
+ */
+export const getFileName = (link, fallback = 'file') => {
+    try {
+        const url = new URL(link);
+        const name = url.pathname.split('/').pop();
+        return name !== '/' ? name : fallback;
+    }
+    catch (_) {
+        return fallback;
+    }
+};
+/**
+ * Downloads file from a given URL without leaving the current page
+ * @param link URL of the file to download
+ * @param options Optional Options for file download - `name` and `fallbackName`
+ */
+export const downloadFile = async (link, options) => {
+    link = sanitizeLink(link);
+    let name = options === null || options === void 0 ? void 0 : options.name;
+    const res = await fetch(link);
+    if (!res.ok) {
+        // if unable to download file (CORS or some other error)
+        // open the URL in new tab
+        window.open(link, '_blank');
+        return;
+    }
+    const blobURL = URL.createObjectURL(await res.blob());
+    // Creates an anchor tag and simulates download
+    const a = document.createElement('a');
+    a.href = blobURL;
+    a.download = name !== null && name !== void 0 ? name : getFileName(link, options === null || options === void 0 ? void 0 : options.fallbackName);
+    a.click();
+};

package/dist/collection/utils/flags.js

@@ -0,0 +1,24 @@
+import { showLivestream } from "./livestream";
+export const FlagsmithFeatureFlags = {
+    PLAY_PARTICIPANT_TILE_VIDEO_ON_PAUSE: 'play_participant_tile_video_on_pause',
+    DISABLE_EMOJI_PICKER: 'disable_emoji_picker',
+    FEAT_PAGINATED_CHAT: 'feat_paginated_chat',
+    LOG_PLAYING_FAILURES: 'log_playing_failures',
+    FEAT_CHANNEL_CHAT: 'feat_channel_chat',
+    DISABLE_KICKING: 'disable_kicking',
+    ADMIN_CANTREMOVE_ADMIN: 'admin_cantremove_admin',
+    CANTINVITE_VIEWER: 'cantinvite_viewer',
+    PINNED_MESSAGES: 'pinned_msgs',
+};
+export const isBreakoutRoomsEnabled = (meeting) => meeting.connectedMeetings.supportsConnectedMeetings;
+export const usePaginatedChat = (meeting) => {
+    var _a;
+    return (meeting === null || meeting === void 0 ? void 0 : meeting.meta.viewType) === 'CHAT' ||
+        showLivestream(meeting) ||
+        ((_a = meeting === null || meeting === void 0 ? void 0 : meeting.__internals__) === null || _a === void 0 ? void 0 : _a.features.hasFeature('feat_paginated_chat'));
+};
+export const disableSettingSinkId = (meeting) => {
+    var _a, _b;
+    return ((_a = meeting === null || meeting === void 0 ? void 0 : meeting.__internals__) === null || _a === void 0 ? void 0 : _a.browserSpecs.isFirefox()) &&
+        ((_b = meeting === null || meeting === void 0 ? void 0 : meeting.__internals__) === null || _b === void 0 ? void 0 : _b.features.hasFeature('disable_firefox_setting_sink_id'));
+};

package/dist/collection/utils/full-screen.js

@@ -0,0 +1,48 @@
+export const requestFullScreen = (el) => {
+    if (el == null)
+        return;
+    if (el.requestFullscreen != null) {
+        el.requestFullscreen();
+    }
+    else if (el.mozRequestFullScreen != null) {
+        /* Firefox */
+        el.mozRequestFullScreen();
+    }
+    else if (el.webkitRequestFullscreen != null) {
+        /* Chrome, Safari & Opera */
+        el.webkitRequestFullscreen();
+    }
+    else if (el.msRequestFullscreen != null) {
+        /* IE/Edge */
+        el.msRequestFullscreen();
+    }
+};
+export const exitFullSreen = () => {
+    if (document.exitFullscreen != null) {
+        document.exitFullscreen();
+    }
+    else if (document.mozExitFullScreen != null) {
+        /* Firefox */
+        document.mozExitFullScreen();
+    }
+    else if (document.webkitExitFullscreen != null) {
+        /* Chrome, Safari & Opera */
+        document.webkitExitFullscreen();
+    }
+    else if (document.msExitFullscreen != null) {
+        /* IE/Edge */
+        document.msExitFullscreen();
+    }
+};
+export const isFullScreenEnabled = () => {
+    return document.fullscreenElement != null || document.webkitCurrentFullScreenElement != null;
+};
+export const isFullScreenSupported = () => {
+    if (typeof document !== 'undefined') {
+        return (document.fullscreenEnabled ||
+            document.mozFullscreenEnabled ||
+            document.webkitFullscreenEnabled ||
+            document.msFullscreenEnabled);
+    }
+    return false;
+};

package/dist/collection/utils/graceful-storage.js

@@ -0,0 +1,18 @@
+const handler = {
+    get: (target, name, receiver) => (...args) => {
+        try {
+            return Reflect.get(target, name, receiver).apply(target, args);
+        }
+        catch (_a) {
+            return null;
+        }
+    },
+};
+let gracefulStorage;
+try {
+    gracefulStorage = new Proxy(localStorage, handler);
+}
+catch (_a) {
+    gracefulStorage = new Proxy({}, handler);
+}
+export default gracefulStorage;

package/dist/collection/utils/livestream.js

@@ -0,0 +1,100 @@
+/**
+ * Can view the livestream
+ */
+export const isLiveStreamViewer = (meeting) => {
+    if (!showLivestream(meeting))
+        return false;
+    return meeting.meta.viewType === 'LIVESTREAM' && meeting.stage.status !== 'ON_STAGE';
+};
+/**
+ * Can start/stop the livestream
+ */
+export const isLiveStreamHost = (meeting) => {
+    var _a;
+    if (!showLivestream(meeting))
+        return false;
+    return meeting.meta.viewType === 'LIVESTREAM' && ((_a = meeting === null || meeting === void 0 ? void 0 : meeting.self) === null || _a === void 0 ? void 0 : _a.permissions.canLivestream);
+};
+export const showLivestream = (meeting) => {
+    return meeting === null || meeting === void 0 ? void 0 : meeting.livestream;
+};
+export var PlayerState;
+(function (PlayerState) {
+    PlayerState["BUFFERING"] = "Buffering";
+    PlayerState["ENDED"] = "Ended";
+    PlayerState["IDLE"] = "Idle";
+    PlayerState["PAUSED"] = "Paused";
+    PlayerState["PLAYING"] = "Playing";
+    PlayerState["READY"] = "Ready";
+})(PlayerState || (PlayerState = {}));
+export var PlayerEventType;
+(function (PlayerEventType) {
+    PlayerEventType["INITIALIZED"] = "PlayerInitialized";
+    PlayerEventType["QUALITY_CHANGED"] = "PlayerQualityChanged";
+    PlayerEventType["DURATION_CHANGED"] = "PlayerDurationChanged";
+    PlayerEventType["VOLUME_CHANGED"] = "PlayerVolumeChanged";
+    PlayerEventType["MUTED_CHANGED"] = "PlayerMutedChanged";
+    PlayerEventType["PLAYBACK_RATE_CHANGED"] = "PlayerPlaybackRateChanged";
+    PlayerEventType["REBUFFERING"] = "PlayerRebuffering";
+    PlayerEventType["AUDIO_BLOCKED"] = "PlayerAudioBlocked";
+    PlayerEventType["PLAYBACK_BLOCKED"] = "PlayerPlaybackBlocked";
+    PlayerEventType["ERROR"] = "PlayerError";
+    PlayerEventType["RECOVERABLE_ERROR"] = "PlayerRecoverableError";
+    PlayerEventType["ANALYTICS_EVENT"] = "PlayerAnalyticsEvent";
+    PlayerEventType["TIME_UPDATE"] = "PlayerTimeUpdate";
+    PlayerEventType["BUFFER_UPDATE"] = "PlayerBufferUpdate";
+    PlayerEventType["SEEK_COMPLETED"] = "PlayerSeekCompleted";
+    PlayerEventType["SESSION_DATA"] = "PlayerSessionData";
+    PlayerEventType["STATE_CHANGED"] = "PlayerStateChanged";
+    PlayerEventType["WORKER_ERROR"] = "PlayerWorkerError";
+    PlayerEventType["METADATA"] = "PlayerMetadata";
+    PlayerEventType["TEXT_CUE"] = "PlayerTextCue";
+    PlayerEventType["TEXT_METADATA_CUE"] = "PlayerTextMetadataCue";
+    PlayerEventType["AD_CUE"] = "PlayerAdCue";
+    PlayerEventType["STREAM_SOURCE_CUE"] = "PlayerStreamSourceCue";
+    PlayerEventType["NETWORK_UNAVAILABLE"] = "PlayerNetworkUnavailable";
+    PlayerEventType["SEGMENT_DISCONTINUITY"] = "PlayerSegmentDiscontinuity";
+    PlayerEventType["SEGMENT_METADATA"] = "PlayerSegmentMetadata";
+    PlayerEventType["PLAYER_METADATA"] = "PlayerMetadata";
+})(PlayerEventType || (PlayerEventType = {}));
+/**
+ * NOTE(callmetarush): For some reason PlayerMetadata is not in type but spams events like crazy
+ */
+export const awsIvsPlayerEventsToIgnore = [
+    PlayerEventType.TIME_UPDATE,
+    PlayerEventType.BUFFER_UPDATE,
+    PlayerEventType.TEXT_METADATA_CUE,
+    PlayerEventType.PLAYER_METADATA,
+];
+export const isIvsPlayerCallStatsEvent = [
+    // CallStats Major Events
+    PlayerEventType.REBUFFERING, // no payload
+    PlayerEventType.AUDIO_BLOCKED, // no payload
+    PlayerEventType.PLAYBACK_BLOCKED, // no payload
+    PlayerEventType.ERROR,
+    PlayerEventType.RECOVERABLE_ERROR,
+    PlayerEventType.WORKER_ERROR,
+    // According to docs it says:
+    // "Indicates that a playback unavailable event occurred."
+    //
+    // So I am taking a guess this can occcur
+    // even when a viewer is online
+    PlayerEventType.NETWORK_UNAVAILABLE, // no payload
+    // CallStats Minor Events
+    PlayerEventType.ANALYTICS_EVENT,
+    PlayerEventType.PLAYBACK_RATE_CHANGED,
+    PlayerEventType.QUALITY_CHANGED,
+    PlayerEventType.INITIALIZED, // no payload
+];
+export function getLivestreamViewerAllowedQualityLevels({ meeting, hlsLevels, }) {
+    let allowedQualities = meeting.self.config.livestreamViewerQualities || [];
+    if (!allowedQualities.length) {
+        return { autoLevelChangeAllowed: true, levels: hlsLevels };
+    }
+    // Filter allowed qualities
+    const desiredLevels = hlsLevels.filter((level) => allowedQualities.includes(level.height));
+    if (!desiredLevels.length) {
+        return { autoLevelChangeAllowed: true, levels: hlsLevels };
+    }
+    return { autoLevelChangeAllowed: false, levels: desiredLevels };
+}

package/dist/collection/utils/logger.js

@@ -0,0 +1 @@
+export default console;

package/dist/collection/utils/notification.js

@@ -0,0 +1,15 @@
+/**
+ * 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
+ */
+export 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);
+};

package/dist/collection/utils/provide-design-system.js

@@ -0,0 +1,114 @@
+import spacingScale from "../theme/spacing-scale.json";
+import { THEMES } from "../theme/presets/themes";
+import { BORDER_WIDTHS, BORDER_RADII } from "../theme/presets/border";
+import { hexToRGB } from "./color";
+const DEFAULT_CSS_TOKEN_PREFIX = '--rtk-';
+function getToken(token, tokenPrefix = DEFAULT_CSS_TOKEN_PREFIX) {
+    return tokenPrefix + token;
+}
+const provideGoogleFont = (fontFamily) => {
+    const weights = [400, 500, 700];
+    const links = [];
+    if (document.querySelector('link[data-rtk-font]') == null) {
+        /**
+         * Adds the following preconnect link tags for faster google font loading
+         * <link rel="preconnect" href="https://fonts.googleapis.com">
+         * <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+         */
+        const p1 = document.createElement('link');
+        p1.rel = 'preconnect';
+        p1.setAttribute('data-rtk-font', 'true');
+        p1.href = 'https://fonts.googleapis.com';
+        const p2 = p1.cloneNode(true);
+        p2.href = 'https://fonts.gstatic.com';
+        p2.crossOrigin = '';
+        links.push(p1, p2);
+    }
+    const link = document.createElement('link');
+    link.rel = 'stylesheet';
+    link.setAttribute('data-rtk-font', fontFamily);
+    link.href = encodeURI(`https://fonts.googleapis.com/css2?family=${fontFamily}:wght@${weights.join(';')}&display=swap`);
+    links.push(link);
+    document.head.append(...links);
+};
+const provideSpacing = (el, spacingBase, tokenPrefix = DEFAULT_CSS_TOKEN_PREFIX) => {
+    spacingScale.forEach((space) => {
+        el.style.setProperty(getToken(`space-${space}`, tokenPrefix), `${space * spacingBase}px`);
+    });
+};
+const provideBorderWidth = (el, borderWidth, tokenPrefix = DEFAULT_CSS_TOKEN_PREFIX) => {
+    if (borderWidth in BORDER_WIDTHS) {
+        const widths = BORDER_WIDTHS[borderWidth];
+        Object.keys(widths).forEach((type) => {
+            el.style.setProperty(getToken(`border-width-${type}`, tokenPrefix), `${widths[type]}px`);
+        });
+    }
+};
+const provideBorderRadius = (el, borderRadius, tokenPrefix = DEFAULT_CSS_TOKEN_PREFIX) => {
+    if (borderRadius in BORDER_RADII) {
+        const radii = BORDER_RADII[borderRadius];
+        Object.keys(radii).forEach((type) => {
+            el.style.setProperty(getToken(`border-radius-${type}`, tokenPrefix), `${radii[type]}px`);
+        });
+    }
+};
+const provideColors = (el, colors, tokenPrefix = DEFAULT_CSS_TOKEN_PREFIX) => {
+    Object.keys(colors).forEach((color) => {
+        const colorValue = colors[color];
+        if (typeof colorValue === 'string') {
+            if (color === 'text' || color === 'text-on-brand') {
+                const rgb = hexToRGB(colorValue).join(' ');
+                el.style.setProperty(getToken(`colors-${color}-1000`, tokenPrefix), `${rgb}`);
+                el.style.setProperty(getToken(`colors-${color}-900`, tokenPrefix), `${rgb} / 0.88`);
+                el.style.setProperty(getToken(`colors-${color}-800`, tokenPrefix), `${rgb} / 0.76`);
+                el.style.setProperty(getToken(`colors-${color}-700`, tokenPrefix), `${rgb} / 0.64`);
+                el.style.setProperty(getToken(`colors-${color}-600`, tokenPrefix), `${rgb} / 0.52`);
+            }
+            else {
+                const rgb = hexToRGB(colorValue).join(' ');
+                el.style.setProperty(getToken(`colors-${color}`, tokenPrefix), rgb);
+            }
+        }
+        else if (typeof colorValue === 'object') {
+            Object.keys(colorValue).forEach((shade) => {
+                const shadeValue = colorValue[shade];
+                const rgb = hexToRGB(shadeValue).join(' ');
+                el.style.setProperty(getToken(`colors-${color}-${shade}`, tokenPrefix), rgb);
+            });
+        }
+    });
+};
+/**
+ * Provides the design system new tokens to consume values from for styling the RealtimeKit UI components.
+ * @param el The element/node you want to _provide_ RTK Design system.
+ * @param tokens The design tokens you want to updated.
+ */
+export const provideRtkDesignSystem = (el, { spacingBase, borderRadius, borderWidth, colors, fontFamily, googleFont, theme, tokenPrefix = DEFAULT_CSS_TOKEN_PREFIX, }) => {
+    if (typeof el !== 'object') {
+        throw new Error('[rtk-ui-kit] (provideRtkDesignSystem): Passed element is not a valid HTML Element');
+    }
+    if (typeof googleFont === 'string') {
+        provideGoogleFont(googleFont);
+        el.style.setProperty(getToken('font-family', tokenPrefix), googleFont);
+    }
+    if (typeof fontFamily === 'string') {
+        el.style.setProperty(getToken('font-family', tokenPrefix), fontFamily);
+    }
+    if (typeof spacingBase === 'number') {
+        provideSpacing(el, spacingBase, tokenPrefix);
+    }
+    if (typeof borderWidth === 'string') {
+        provideBorderWidth(el, borderWidth, tokenPrefix);
+    }
+    if (typeof borderRadius === 'string') {
+        provideBorderRadius(el, borderRadius, tokenPrefix);
+    }
+    if (typeof theme === 'string') {
+        const colors = THEMES[theme];
+        if (colors != null)
+            provideColors(el, colors, tokenPrefix);
+    }
+    if (typeof colors === 'object') {
+        provideColors(el, colors, tokenPrefix);
+    }
+};

package/dist/collection/utils/scroll.js

@@ -0,0 +1,11 @@
+/**
+ * Scroll to bottom of an element.
+ *
+ * Works in all browsers - just that in Safari, the smooth scrolling doesn't work.
+ * @param el The bottom of which element you want to scroll down to
+ */
+export const smoothScrollToBottom = (el, smooth = true) => {
+    if (el == null)
+        return;
+    el.scrollTo({ top: el.scrollHeight, behavior: smooth ? 'smooth' : 'auto' });
+};

package/dist/collection/utils/sidebar.js

@@ -0,0 +1,42 @@
+import { isLiveStreamViewer } from "./livestream";
+export const canViewChat = (meeting) => {
+    if (meeting && !meeting.chat)
+        return false;
+    const { chatPublic, chatPrivate } = meeting.self.permissions;
+    return (chatPublic.canSend ||
+        chatPublic.canReceive || // TODO(ravindra-dyte): add web-core equivalent of chatPublic.canReceive, remove type casting
+        chatPublic.text ||
+        chatPublic.files ||
+        chatPrivate.canSend ||
+        chatPrivate.canReceive ||
+        chatPrivate.files ||
+        chatPrivate.text);
+};
+export const canViewPolls = (meeting) => {
+    if (meeting && !meeting.polls)
+        return false;
+    const { polls } = meeting.self.permissions;
+    return polls.canCreate || polls.canView || polls.canVote;
+};
+export const canViewParticipants = (meeting) => {
+    var _a;
+    if (!((_a = meeting.self.permissions) === null || _a === void 0 ? void 0 : _a.showParticipantList)) {
+        return false;
+    }
+    if (meeting && !meeting.participants)
+        return false;
+    const config = meeting === null || meeting === void 0 ? void 0 : meeting.self.config;
+    if (config && !config.controlBar.elements.participants)
+        return false;
+    return true;
+};
+export const canViewPlugins = (meeting) => {
+    if (isLiveStreamViewer(meeting))
+        return false;
+    if (meeting && !meeting.plugins)
+        return false;
+    if (meeting.meta.viewType === 'LIVESTREAM')
+        return meeting.stage.status === 'ON_STAGE';
+    const { plugins } = meeting.self.permissions;
+    return plugins.canClose || plugins.canStart;
+};

package/dist/collection/utils/size.js

@@ -0,0 +1,14 @@
+import breakpoints from "../theme/breakpoints.json";
+/**
+ * Get the screen breakpoint from a given width
+ * @param width The width of the container
+ * @returns The screen breakpoint value
+ */
+export const getSize = (width) => {
+    if (width >= breakpoints.lg)
+        return 'lg';
+    else if (width >= breakpoints.md)
+        return 'md';
+    else
+        return 'sm';
+};

package/dist/collection/utils/stage.js

@@ -0,0 +1,9 @@
+export const canJoinStage = (meeting) => {
+    var _a, _b;
+    return (((_a = meeting === null || meeting === void 0 ? void 0 : meeting.self) === null || _a === void 0 ? void 0 : _a.permissions.stageEnabled) && ((_b = meeting === null || meeting === void 0 ? void 0 : meeting.self) === null || _b === void 0 ? void 0 : _b.permissions.stageAccess) === 'ALLOWED');
+};
+export const canRequestToJoinStage = (meeting) => {
+    var _a, _b;
+    return (((_a = meeting === null || meeting === void 0 ? void 0 : meeting.self) === null || _a === void 0 ? void 0 : _a.permissions.stageEnabled) &&
+        ((_b = meeting === null || meeting === void 0 ? void 0 : meeting.self) === null || _b === void 0 ? void 0 : _b.permissions.stageAccess) !== 'NOT_ALLOWED');
+};

package/dist/collection/utils/string.js

@@ -0,0 +1,56 @@
+/**
+ * Shorten a string upto a maximum length of characters and add `...` as suffix if it exceeds the maximum length
+ * @param str The The string you want to shorten
+ * @param maxLength Maximum length of character
+ * @returns Formatted shortedned string
+ */
+export const shorten = (str, maxLength = 20) => {
+    if (str == null)
+        return '';
+    if (str.length > maxLength) {
+        return `${str.substring(0, maxLength)}...`;
+    }
+    return str;
+};
+/**
+ * Checks if a given string consists of only emojis.
+ *
+ * However this classifies a string with numbers as emoji as well.
+ * Which works in our favour for now in chat as it enlarges messages with just numbers.
+ * @param str String on which to perform the check on
+ * @returns A Boolean value which indicates if string consists of only emojis
+ */
+export const hasOnlyEmojis = (str) => {
+    const num = /^\d+$/;
+    const re = /^\p{Emoji}+$/u;
+    return re.test(str) && !num.test(str);
+};
+export const sanitizeLink = (link) => {
+    // TODO: needs more work
+    if (link === null || link === void 0 ? void 0 : link.trim().toLowerCase().startsWith('javascript:')) {
+        return 'https://dyte.io';
+    }
+    return link;
+};
+/**
+ * Formats a given name and returns **Participant** for unnamed participants.
+ * @param name Name of participant
+ * @returns Name to use in the UI
+ */
+export const formatName = (name) => {
+    name = name === null || name === void 0 ? void 0 : name.trim();
+    if (name === '')
+        return 'Participant';
+    return name;
+};
+const whiteSpace = new RegExp(/[^\u00BF-\u1FFF\u2C00-\uD7FF\w\s]/, 'g');
+const space = new RegExp(/\s+/);
+export function getInitials(name, maxInitials = 2) {
+    // removes any character that is not a letter, number or whitespace
+    const cleanedName = name.replace(whiteSpace, '');
+    const words = cleanedName.trim().split(space).slice(0, maxInitials);
+    return words
+        .map((word) => word.charAt(0))
+        .join('')
+        .toUpperCase();
+}

package/dist/collection/utils/sync-with-store/index.js

@@ -0,0 +1,21 @@
+import { getElement } from "@stencil/core";
+import { uiStore as store, appendElement, removeElement } from "./ui-store";
+export function SyncWithStore() {
+    return function (proto, propName) {
+        const { connectedCallback, disconnectedCallback } = proto;
+        proto.connectedCallback = function () {
+            const host = getElement(this);
+            const value = host[propName];
+            if (!value) {
+                const storeValue = store.state[propName];
+                host[propName] = storeValue;
+                appendElement(propName, host);
+            }
+            return connectedCallback === null || connectedCallback === void 0 ? void 0 : connectedCallback.call(this);
+        };
+        proto.disconnectedCallback = function () {
+            removeElement(propName, getElement(this));
+            return disconnectedCallback === null || disconnectedCallback === void 0 ? void 0 : disconnectedCallback.call(this);
+        };
+    };
+}

package/dist/collection/utils/sync-with-store/ui-store.js

@@ -0,0 +1,56 @@
+import { createStore } from "@stencil/store";
+import { useLanguage } from "../../lib/lang";
+import { defaultIconPack } from "../../lib/icons";
+import { getUserPreferences } from "../user-prefs";
+import { defaultConfig } from "../../exports";
+export const getInitialStates = () => ({
+    meeting: 'idle',
+    prefs: getUserPreferences(),
+});
+const uiStore = createStore({
+    meeting: undefined,
+    t: useLanguage(),
+    iconPack: defaultIconPack,
+    states: getInitialStates(),
+    config: defaultConfig,
+    size: undefined,
+});
+const elementsMap = new Map();
+uiStore.use({
+    set: (propName, newValue, oldValue) => {
+        const elements = elementsMap.get(propName);
+        if (elements) {
+            elementsMap.set(propName, elements.filter((element) => {
+                const currentValue = element[propName];
+                if (currentValue === oldValue) {
+                    element[propName] = newValue;
+                    return true;
+                }
+                else {
+                    return false;
+                }
+            }));
+        }
+    },
+});
+function appendElement(propName, element) {
+    const elements = elementsMap.get(propName);
+    if (!elements) {
+        elementsMap.set(propName, [element]);
+    }
+    else {
+        elements.push(element);
+    }
+}
+function removeElement(propName, element) {
+    const elements = elementsMap.get(propName);
+    if (elements && elements.length > 0) {
+        const index = elements.indexOf(element);
+        if (index !== -1) {
+            elements.splice(index, 1);
+            elementsMap.set(propName, elements);
+        }
+    }
+}
+const uiState = uiStore.state;
+export { uiStore, uiState, appendElement, removeElement };

package/dist/collection/utils/time.js

@@ -0,0 +1,9 @@
+export function formatSecondsToHHMMSS(seconds) {
+    const hrs = Math.floor(seconds / 3600);
+    const mins = Math.floor((seconds % 3600) / 60);
+    const secs = Math.floor(seconds % 60);
+    // If hours are 0, omit the hours part
+    return hrs > 0
+        ? `${hrs}:${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`
+        : `${mins}:${secs.toString().padStart(2, '0')}`;
+}