@cloudflare/realtimekit-ui 1.0.4-staging.3 → 1.0.4-staging.5

package/dist/types/components/rtk-ui-provider/rtk-ui-provider.d.ts

@@ -1,7 +1,7 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import { MeetingMode } from '../rtk-meeting/rtk-meeting';
 import { Meeting } from '../../types/rtk-client';
-import { RtkI18n, IconPack, Size, States, UIConfig } from '../../exports';
+import { RtkI18n, IconPack, States, UIConfig } from '../../exports';
 export declare class RtkUiProvider {
     host: HTMLRtkUiProviderElement;
     private peerStore;
@@ -18,8 +18,6 @@ export declare class RtkUiProvider {
     config: UIConfig;
     /** Fill type */
     mode: MeetingMode;
-    /** Size */
-    size: Size;
     /** Whether to show setup screen or not */
     showSetupScreen: boolean;
     /**
@@ -28,18 +26,15 @@ export declare class RtkUiProvider {
      */
     statesUpdate: EventEmitter<States>;
     private authErrorListener;
-    private resizeObserver;
     connectedCallback(): void;
     disconnectedCallback(): void;
     private updateStates;
     private setupStateUpdateListener;
     private setupStoreRequestListener;
-    onMeetingChange(meeting: Meeting): void;
-    onIconPackChange(newIconPack: IconPack): void;
-    onTChange(newT: RtkI18n): void;
-    onConfigChange(config: UIConfig): void;
-    onSizeChange(newSize: Size): void;
-    private handleResize;
+    meetingChanged(meeting: Meeting): void;
+    iconPackChanged(newIconPack: IconPack): void;
+    tChanged(newT: RtkI18n): void;
+    configChanged(config: UIConfig): void;
     private roomJoinedListener;
     private waitlistedListener;
     private roomLeftListener;

package/dist/types/components.d.ts

@@ -3883,10 +3883,6 @@ export namespace Components {
           * Whether to show setup screen or not
          */
         "showSetupScreen": boolean;
-        /**
-          * Size
-         */
-        "size": Size1;
         /**
           * Language utility
          */
@@ -10813,10 +10809,6 @@ declare namespace LocalJSX {
           * Whether to show setup screen or not
          */
         "showSetupScreen"?: boolean;
-        /**
-          * Size
-         */
-        "size"?: Size1;
         /**
           * Language utility
          */

package/dist/types/utils/sync-with-store/ui-store.d.ts

@@ -4,7 +4,6 @@ import { type RtkI18n } from '../../lib/lang';
 import { type IconPack } from '../../lib/icons';
 import { type States } from '../../types/props';
 import { UIConfig } from '../../exports';
-import { Size } from '../../exports';
 export declare const getInitialStates: (peerId?: string) => States;
 export interface RtkUiStore {
     meeting: Meeting | undefined | null;
@@ -12,7 +11,6 @@ export interface RtkUiStore {
     iconPack: IconPack;
     states: States;
     config: UIConfig;
-    size: Size | undefined;
     peerId: string | null;
     storeType: 'global' | 'peer';
     storeId: string;
@@ -23,13 +21,12 @@ export type RtkUiStoreExtended = ObservableMap<RtkUiStore> & {
 declare const uiStore: RtkUiStoreExtended;
 declare const uiState: RtkUiStore;
 export { uiStore, uiState };
-export declare function createPeerStore({ meeting, config, providerId, iconPack, t, size }: {
+export declare function createPeerStore({ meeting, config, providerId, iconPack, t }: {
     meeting: RealtimeKitClient;
     config?: UIConfig;
     providerId: string;
     iconPack: IconPack;
     t: RtkI18n;
-    size: Size | undefined;
 }): RtkUiStoreExtended;
 declare function appendElement(propName: string, element: HTMLElement, targetStore?: RtkUiStoreExtended): void;
 declare function removeElement(propName: string, element: HTMLElement, targetStore?: RtkUiStoreExtended): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cloudflare/realtimekit-ui",
-  "version": "1.0.4-staging.3",
+  "version": "1.0.4-staging.5",
   "description": "Pre-built, ready-to-use UI components and utilities for integrating with Cloudflare RealtimeKit",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",

package/dist/cjs/size-2a406e36.js

@@ -1,28 +0,0 @@
-'use strict';
-
-const sm = 640;
-const md = 768;
-const lg = 1080;
-const xl = 2160;
-const breakpoints = {
-	sm: sm,
-	md: md,
-	lg: lg,
-	xl: xl
-};
-
-/**
- * Get the screen breakpoint from a given width
- * @param width The width of the container
- * @returns The screen breakpoint value
- */
-const getSize = (width) => {
-    if (width >= breakpoints.lg)
-        return 'lg';
-    else if (width >= breakpoints.md)
-        return 'md';
-    else
-        return 'sm';
-};
-
-exports.getSize = getSize;

package/dist/components/p-96be234f.js

@@ -1,26 +0,0 @@
-const sm = 640;
-const md = 768;
-const lg = 1080;
-const xl = 2160;
-const breakpoints = {
-	sm: sm,
-	md: md,
-	lg: lg,
-	xl: xl
-};
-
-/**
- * Get the screen breakpoint from a given width
- * @param width The width of the container
- * @returns The screen breakpoint value
- */
-const getSize = (width) => {
-    if (width >= breakpoints.lg)
-        return 'lg';
-    else if (width >= breakpoints.md)
-        return 'md';
-    else
-        return 'sm';
-};
-
-export { getSize as g };

package/dist/esm/size-505ade24.js

@@ -1,26 +0,0 @@
-const sm = 640;
-const md = 768;
-const lg = 1080;
-const xl = 2160;
-const breakpoints = {
-	sm: sm,
-	md: md,
-	lg: lg,
-	xl: xl
-};
-
-/**
- * Get the screen breakpoint from a given width
- * @param width The width of the container
- * @returns The screen breakpoint value
- */
-const getSize = (width) => {
-    if (width >= breakpoints.lg)
-        return 'lg';
-    else if (width >= breakpoints.md)
-        return 'md';
-    else
-        return 'sm';
-};
-
-export { getSize as g };

package/dist/realtimekit-ui/p-031768d2.entry.js

@@ -1 +0,0 @@
-import{r as t,c as i,h as r,H as e}from"./p-0ee570cd.js";import{e as o,h as a,X as s,Y as n}from"./p-912c0afc.js";import{S as c}from"./p-f243302d.js";var l=function(t,i,r,e){var o,a=arguments.length,s=a<3?i:null===e?e=Object.getOwnPropertyDescriptor(i,r):e;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(t,i,r,e);else for(var n=t.length-1;n>=0;n--)(o=t[n])&&(s=(a<3?o(s):a>3?o(i,r,s):o(i,r))||s);return a>3&&s&&Object.defineProperty(i,r,s),s};const d=class{constructor(r){t(this,r),this.stateUpdate=i(this,"rtkStateUpdate",7),this.iconPack=o,this.t=a()}render(){var t,i;if(!this.meeting)return null;const o={meeting:this.meeting,states:this.states,size:this.size,iconPack:this.iconPack,t:this.t},a=this.states,c=!0===(null===(t=null==a?void 0:a.prefs)||void 0===t?void 0:t.muteNotificationSounds)||"true"===s("mute-notification-sounds");return r(e,null,r("rtk-microphone-selector",Object.assign({},o),r("rtk-audio-visualizer",{participant:null===(i=this.meeting)||void 0===i?void 0:i.self,iconPack:this.iconPack,t:this.t,slot:"indicator"})),r("rtk-speaker-selector",Object.assign({},o)),r("div",{class:"group",part:"notification-toggle"},r("div",{class:"row"},r("label",{htmlFor:"notification-toggle"},this.t("settings.notification_sound")),r("rtk-switch",{id:"notification-toggle",checked:!c,onRtkChange:t=>{const{checked:i}=t.target,r=!i;this.stateUpdate.emit({prefs:{muteNotificationSounds:r}}),n("mute-notification-sounds",r)},iconPack:this.iconPack,t:this.t}))))}};l([c()],d.prototype,"meeting",void 0),l([c()],d.prototype,"states",void 0),l([c()],d.prototype,"size",void 0),l([c()],d.prototype,"iconPack",void 0),l([c()],d.prototype,"t",void 0),d.style=":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{display:flex;width:100%;flex-direction:column}audio{visibility:hidden}.group{margin-top:var(--rtk-space-2, 8px);margin-bottom:var(--rtk-space-2, 8px)}.group>*{margin-bottom:var(--rtk-space-2, 8px)}.group>*:last-child{margin-bottom:var(--rtk-space-0, 0px)}.group select{flex:1 1 0%}rtk-audio-visualizer{flex-shrink:0}rtk-button{border-radius:var(--rtk-border-radius-sm, 4px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-700, 44 44 44) / var(--tw-bg-opacity));--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}rtk-button rtk-icon{margin-right:var(--rtk-space-2, 8px)}";var p=function(t,i,r,e){var o,a=arguments.length,s=a<3?i:null===e?e=Object.getOwnPropertyDescriptor(i,r):e;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(t,i,r,e);else for(var n=t.length-1;n>=0;n--)(o=t[n])&&(s=(a<3?o(s):a>3?o(i,r,s):o(i,r))||s);return a>3&&s&&Object.defineProperty(i,r,s),s};const h=class{constructor(r){t(this,r),this.stateUpdate=i(this,"rtkStateUpdate",7),this.iconPack=o,this.t=a(),this.onVideoUpdate=t=>{this.videoEnabled=t.videoEnabled}}componentDidLoad(){this.meetingChanged(this.meeting)}meetingChanged(t){var i;t&&(this.videoEnabled=t.self.videoEnabled,null===(i=t.self)||void 0===i||i.addListener("videoUpdate",this.onVideoUpdate))}disconnectedCallback(){var t;null===(t=this.meeting.self)||void 0===t||t.removeListener("videoUpdate",this.onVideoUpdate)}render(){var t,i,o;if(!this.meeting)return null;const a={meeting:this.meeting,states:this.states,size:this.size,iconPack:this.iconPack,t:this.t},c=this.states,l=!0===(null===(t=null==c?void 0:c.prefs)||void 0===t?void 0:t.mirrorVideo)||"true"===s("mirror-video");return r(e,null,r("div",{class:"section",part:"tile-preview"},r("div",{class:"group",part:"tile-preview"},!0===this.videoEnabled?r("rtk-participant-tile",{meeting:this.meeting,participant:null===(i=this.meeting)||void 0===i?void 0:i.self,iconPack:this.iconPack,t:this.t,states:c,size:this.size,isPreview:!0}):r("div",{class:"camera-off-helper"},r("rtk-participant-tile",{meeting:this.meeting,participant:null===(o=this.meeting)||void 0===o?void 0:o.self,size:this.size},r("div",null,r("rtk-icon",{id:"icon",icon:this.iconPack.video_off,tabIndex:-1,"aria-hidden":!0}),r("div",null,this.t("settings.camera_off"))))))),r("rtk-camera-selector",Object.assign({},a)),r("div",{class:"group",part:"mirror-toggle"},r("div",{class:"row"},r("label",{htmlFor:"mirror-toggle"},this.t("settings.mirror_video")),r("rtk-switch",{checked:l,iconPack:this.iconPack,t:this.t,onRtkChange:t=>{const{checked:i}=t.target;this.stateUpdate.emit({prefs:{mirrorVideo:i}}),n("mirror-video",i)}}))))}static get watchers(){return{meeting:["meetingChanged"]}}};p([c()],h.prototype,"meeting",void 0),p([c()],h.prototype,"states",void 0),p([c()],h.prototype,"size",void 0),p([c()],h.prototype,"iconPack",void 0),p([c()],h.prototype,"t",void 0),h.style=":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)}.rtk-select{--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-700, 44 44 44) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-1000, 255 255 255))}.rtk-select:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)}.rtk-select{display:block;border-radius:var(--rtk-border-radius-sm, 4px);border-width:var(--rtk-border-width-none, 0);border-style:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:var(--rtk-space-3, 12px);font-size:16px;--icon-size:var(--rtk-select-chevron-size, var(--rtk-space-6, 24px));--icon-right-position:var(--rtk-select-chevron-right-position, var(--rtk-space-2, 8px));background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e\");background-position:right var(--icon-right-position) center;background-repeat:no-repeat;background-size:var(--icon-size) var(--icon-size);padding-right:calc(var(--icon-right-position) * 5)}:host{display:flex;width:100%;flex-direction:column}.rtk-select{width:100%;text-overflow:ellipsis}rtk-participant-tile{margin-left:auto;margin-right:auto;margin-bottom:var(--rtk-space-4, 16px);max-width:100%}#icon{padding-bottom:var(--rtk-space-1, 4px)}.apply-button{height:var(--rtk-space-10, 40px)}label{-webkit-user-select:none;-moz-user-select:none;user-select:none;font-size:14px}.group{margin-top:var(--rtk-space-2, 8px);margin-bottom:var(--rtk-space-2, 8px)}.group>*{margin-bottom:var(--rtk-space-2, 8px)}.group>*:last-child{margin-bottom:var(--rtk-space-0, 0px)}.group select{flex:1 1 0%}.row{display:flex;align-items:center;justify-content:space-between;gap:var(--rtk-space-3, 12px)}.section{display:flex;flex-direction:column}@media only screen and (max-height: 480px) and (orientation: landscape){:host{flex-direction:row}:host([size='sm']){flex-direction:row}.section[part='tile-preview']{margin-left:var(--rtk-space-2, 8px);margin-right:var(--rtk-space-2, 8px);max-height:90%;max-width:40%;flex-shrink:1}.section[part='video-settings']{margin-left:var(--rtk-space-2, 8px);margin-right:var(--rtk-space-2, 8px);flex-grow:1}}";export{d as rtk_settings_audio,h as rtk_settings_video}

package/dist/realtimekit-ui/p-1109b664.js

@@ -1 +0,0 @@
-import{n as r,o as t,j as n,Q as i}from"./p-912c0afc.js";var o="[object Symbol]",e=/\s/,u=/^\s+/;var f=NaN,a=/^[-+]0x[0-9a-f]+$/i,c=/^0b[01]+$/i,v=/^0o[0-7]+$/i,s=parseInt;function m(i){if("number"==typeof i)return i;if(function(n){return"symbol"==typeof n||r(n)&&t(n)==o}(i))return f;if(n(i)){var m="function"==typeof i.valueOf?i.valueOf():i;i=n(m)?m+"":m}if("string"!=typeof i)return 0===i?i:+i;var d;i=(d=i)?d.slice(0,function(r){for(var t=r.length;t--&&e.test(r.charAt(t)););return t}(d)+1).replace(u,""):d;var p=c.test(i);return p||v.test(i)?s(i.slice(2),p?2:8):a.test(i)?f:+i}const d=function(){return i.Date.now()};var p=Math.max,y=Math.min;function T(r,t,i){var o,e,u,f,a,c,v=0,s=!1,T=!1,b=!0;if("function"!=typeof r)throw new TypeError("Expected a function");function l(t){var n=o,i=e;return o=e=void 0,v=t,f=r.apply(i,n)}function h(r){var n=r-c;return void 0===c||n>=t||n<0||T&&r-v>=u}function x(){var r=d();if(h(r))return j(r);a=setTimeout(x,function(r){var n=t-(r-c);return T?y(n,u-(r-v)):n}(r))}function j(r){return a=void 0,b&&o?l(r):(o=e=void 0,f)}function $(){var r=d(),n=h(r);if(o=arguments,e=this,c=r,n){if(void 0===a)return function(r){return v=r,a=setTimeout(x,t),s?l(r):f}(c);if(T)return clearTimeout(a),a=setTimeout(x,t),l(c)}return void 0===a&&(a=setTimeout(x,t)),f}return t=m(t)||0,n(i)&&(s=!!i.leading,u=(T="maxWait"in i)?p(m(i.maxWait)||0,t):u,b="trailing"in i?!!i.trailing:b),$.cancel=function(){void 0!==a&&clearTimeout(a),v=0,o=c=e=a=void 0},$.flush=function(){return void 0===a?f:j(d())},$}export{T as d}

package/dist/realtimekit-ui/p-14b02cf2.entry.js

@@ -1 +0,0 @@
-import{r as t,c as e,h as a,H as i}from"./p-0ee570cd.js";import{e as s,h as o}from"./p-912c0afc.js";import{S as r}from"./p-f243302d.js";var n=function(t,e,a,i){var s,o=arguments.length,r=o<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,a):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(t,e,a,i);else for(var n=t.length-1;n>=0;n--)(s=t[n])&&(r=(o<3?s(r):o>3?s(e,a,r):s(e,a))||r);return o>3&&r&&Object.defineProperty(e,a,r),r};const c=class{constructor(a){t(this,a),this.stateUpdate=e(this,"rtkStateUpdate",7),this.variant="button",this.iconPack=s,this.t=o(),this.leave=()=>{this.stateUpdate.emit({activeLeaveConfirmation:!0})}}render(){const t=this.t("leave");return a(i,{key:"90606f784dc8305e5d7754f5442f644476ab24c6",label:t},a("rtk-controlbar-button",{key:"5c3363d98a12c65ce2feba1b53ddc09d1654582c",size:this.size,iconPack:this.iconPack,class:"leave red-icon",onClick:this.leave,icon:this.iconPack.call_end,label:t,variant:this.variant,part:"controlbar-button"}))}};n([r()],c.prototype,"size",void 0),n([r()],c.prototype,"iconPack",void 0),n([r()],c.prototype,"t",void 0),c.style=":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{display:block}";export{c as rtk_leave_button}