@snapcall/stream-ui 1.11.3 → 1.11.4

package/dist/stream-ui.esm.js

@@ -12568,6 +12568,10 @@ const $24075a5d702d64b3$var$defaultOptions = {
 };
 const $24075a5d702d64b3$export$3f94917203ab7078 = {
     init: ({ element: element , ...options })=>{
+        if (typeof options.recorder === "boolean") options.recorder = {
+            enabled: options.recorder,
+            defaultState: "photo"
+        };
         if (element?.nodeType !== window.Node.ELEMENT_NODE) throw new Error('The "element" property must be a valid element!');
         const mergedOptions = (0, $365e765f9890497b$export$6969335ea1e4e77c)($24075a5d702d64b3$var$defaultOptions, options);
         const rootElement = (0, $3Sbms$createRoot)(element);

package/dist/stream-ui.js

@@ -12573,6 +12573,10 @@ const $e68207026aca356b$var$defaultOptions = {
 };
 const $e68207026aca356b$export$3f94917203ab7078 = {
     init: ({ element: element , ...options })=>{
+        if (typeof options.recorder === "boolean") options.recorder = {
+            enabled: options.recorder,
+            defaultState: "photo"
+        };
         if (element?.nodeType !== window.Node.ELEMENT_NODE) throw new Error('The "element" property must be a valid element!');
         const mergedOptions = (0, $6b4cf4c12c735fdf$export$6969335ea1e4e77c)($e68207026aca356b$var$defaultOptions, options);
         const rootElement = (0, $jQDcL$reactdomclient.createRoot)(element);

package/dist/stream-ui.umd.js

@@ -2308,4 +2308,4 @@ and limitations under the License.
   background-color: #fff;
   color: #1d1c20;
   height: 100%;
-`;var Py=({onGreetingDone:e})=>{const{t:t}=Ni(),[r,{width:n,height:i}]=Fs(),a=(0,je.useRef)(null),s=(0,je.useRef)(null),[c,l]=(0,je.useState)(void 0),[d,u]=(0,je.useState)(!1),[p,f]=(0,je.useState)(!1),h=n>=i,m=async e=>{try{const t=await navigator.mediaDevices.getUserMedia(e),r=t.getVideoTracks()[0],n=t.getAudioTracks()[0];r&&l(r),n&&u(!0),n?.stop()}catch(e){console.error("Get User Media Failed: ",e)}},g=(0,je.useCallback)((async()=>{c?(c.stop(),l(void 0)):await m({video:!0})}),[c]),v=(0,je.useCallback)((async()=>{d?u(!1):await m({audio:!0})}),[d]);if((0,je.useEffect)((()=>{s.current&&(s.current.srcObject=c?new MediaStream([c]):null)}),[s,c,n,i]),(0,je.useEffect)((()=>{m({audio:!0,video:!0})}),[]),!0===p)return(0,o.jsx)(Cy,{children:(0,o.jsx)("img",{src:"https://stream-assets.snapcall.io/animations/snapcall-logo-animation.gif",alt:"Snapcall logo animation",height:40})});const y=Boolean(c);return(0,o.jsxs)(cy,{ref:r,children:[(0,o.jsx)(jh,{}),(0,o.jsx)(sy,{}),(0,o.jsx)(ly,{children:t("greeting.mainTitle")}),(0,o.jsxs)(dy,{children:[h&&(0,o.jsxs)(uy,{children:[(0,o.jsx)(py,{webcamEnabled:y,ref:s,autoPlay:!0}),(0,o.jsxs)(my,{webcamEnabled:y,children:[(0,o.jsxs)(fy,{children:[!d&&(0,o.jsx)(hy,{children:(0,o.jsx)(zs,{status:!d})}),!y&&(0,o.jsx)(hy,{children:(0,o.jsx)(Bs,{status:!y})})]}),(0,o.jsx)(vy,{children:(0,o.jsx)(Zs,{})})]}),(0,o.jsxs)(gy,{children:[(0,o.jsx)(vy,{onClick:v,danger:!d,children:(0,o.jsx)(zs,{status:!d})}),(0,o.jsx)(vy,{onClick:g,danger:!y,children:(0,o.jsx)(Bs,{status:!y})})]})]}),(0,o.jsxs)(yy,{children:[h&&(0,o.jsx)(by,{children:t("greeting.sideTitle")}),(0,o.jsx)(wy,{children:t("greeting.sideDescription")}),(0,o.jsx)(xy,{ref:a,name:"displayName",type:"text",placeholder:t("greeting.namePlaceholder"),autoFocus:!0}),(0,o.jsx)(Sy,{onClick:()=>{const t=a.current?.value,r=Boolean(c);c?.stop(),f(!0),setTimeout((()=>{e({cameraEnabled:r,micEnabled:d,displayName:t})}),4e3)},children:t("greeting.nameSubmit")})]})]}),(0,o.jsxs)(_y,{children:[(0,o.jsx)(ky,{children:t("greeting.footerTitle")}),(0,o.jsx)(Ey,{children:t("greeting.footerDescription")})]})]})};const Ry={recorder:{enabled:!1,defaultState:"photo"},sharedURL:window.location.href,showMenuButton:!0,settingsShortcuts:[{id:"pip",displayType:"icon"}],controls:{microphone:{available:!0,enabled:!0},camera:{available:!0,enabled:!1},screenshare:{available:!0}},streamApiURL:String("https://apistream.snapcall.io"),tracking:!1},Ty={init:({element:e,...t})=>{if(e?.nodeType!==window.Node.ELEMENT_NODE)throw new Error('The "element" property must be a valid element!');const n=m(Ry,t),i=s(e);let a=null;a=(0,o.jsxs)(o.Fragment,{children:[t.recorder&&(0,o.jsx)("style",{children:r('*,:before,:after{box-sizing:border-box;border:0 solid #e5e7eb}:before,:after{--tw-content:""}html{-webkit-text-size-adjust:100%;tab-size:4;font-feature-settings:normal;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:1.5}body{line-height:inherit;margin:0}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;background-color:#0000;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{margin:0;padding:0;list-style:none}textarea{resize:vertical}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}[hidden]{display:none}')}),(0,o.jsx)("style",{children:r("*,:before,:after,::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.visible{visibility:visible}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.inset-0{inset:0}.left-0{left:0}.top-0{top:0}.z-50{z-index:50}.z-\\[100\\]{z-index:100}.z-\\[1\\]{z-index:1}.m-\\[10px\\]{margin:10px}.mx-\\[20px\\]{margin-left:20px;margin-right:20px}.ml-\\[10px\\]{margin-left:10px}.mt-\\[10px\\]{margin-top:10px}.mt-\\[50px\\]{margin-top:50px}.block{display:block}.inline{display:inline}.flex{display:flex}.table{display:table}.hidden{display:none}.h-full{height:100%}.h-\\[150px\\]{height:150px}.h-\\[60px\\]{height:60px}.h-\\[72px\\]{height:72px}.h-\\[56px\\]{height:56px}.h-\\[40px\\]{height:40px}.h-\\[235px\\]{height:235px}.h-\\[93px\\]{height:93px}.h-screen{height:100vh}.h-fit{height:-moz-fit-content;height:-moz-fit-content;height:fit-content}.h-\\[24px\\]{height:24px}.h-\\[30px\\]{height:30px}.h-1\\/3{height:33.3333%}.max-h-\\[inherit\\]{max-height:inherit}.max-h-\\[70px\\]{max-height:70px}.min-h-0{min-height:0}.min-h-\\[100\\%\\]{min-height:100%}.w-full{width:100%}.w-\\[60px\\]{width:60px}.w-\\[72px\\]{width:72px}.w-\\[56px\\]{width:56px}.w-\\[76px\\]{width:76px}.w-screen{width:100vw}.w-\\[360px\\]{width:360px}.w-\\[400px\\]{width:400px}.w-\\[320px\\]{width:320px}.w-\\[24px\\]{width:24px}.w-\\[30px\\]{width:30px}.w-1\\/3{width:33.3333%}.min-w-\\[100\\%\\]{min-width:100%}.min-w-\\[24px\\]{min-width:24px}.max-w-\\[400px\\]{max-width:400px}.max-w-\\[600px\\]{max-width:600px}.max-w-\\[800px\\]{max-width:800px}.max-w-\\[70px\\]{max-width:70px}.flex-1{flex:1}.flex-auto{flex:auto}.flex-grow{flex-grow:1}.translate-y-2{--tw-translate-y:.5rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y))rotate(var(--tw-rotate))skewX(var(--tw-skew-x))skewY(var(--tw-skew-y))scaleX(var(--tw-scale-x))scaleY(var(--tw-scale-y))}.translate-y-0{--tw-translate-y:0px;transform:translate(var(--tw-translate-x),var(--tw-translate-y))rotate(var(--tw-rotate))skewX(var(--tw-skew-x))skewY(var(--tw-skew-y))scaleX(var(--tw-scale-x))scaleY(var(--tw-scale-y))}.translate-y-\\[200\\%\\]{--tw-translate-y:200%;transform:translate(var(--tw-translate-x),var(--tw-translate-y))rotate(var(--tw-rotate))skewX(var(--tw-skew-x))skewY(var(--tw-skew-y))scaleX(var(--tw-scale-x))scaleY(var(--tw-scale-y))}.translate-y-full{--tw-translate-y:100%;transform:translate(var(--tw-translate-x),var(--tw-translate-y))rotate(var(--tw-rotate))skewX(var(--tw-skew-x))skewY(var(--tw-skew-y))scaleX(var(--tw-scale-x))scaleY(var(--tw-scale-y))}.scale-\\[0\\.4\\]{--tw-scale-x:.4;--tw-scale-y:.4;transform:translate(var(--tw-translate-x),var(--tw-translate-y))rotate(var(--tw-rotate))skewX(var(--tw-skew-x))skewY(var(--tw-skew-y))scaleX(var(--tw-scale-x))scaleY(var(--tw-scale-y))}.scale-x-\\[-1\\]{--tw-scale-x:-1;transform:translate(var(--tw-translate-x),var(--tw-translate-y))rotate(var(--tw-rotate))skewX(var(--tw-skew-x))skewY(var(--tw-skew-y))scaleX(var(--tw-scale-x))scaleY(var(--tw-scale-y))}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y))rotate(var(--tw-rotate))skewX(var(--tw-skew-x))skewY(var(--tw-skew-y))scaleX(var(--tw-scale-x))scaleY(var(--tw-scale-y))}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.resize{resize:both}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-end{align-items:flex-end}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-\\[5px\\]{gap:5px}.gap-2\\.5{gap:.625rem}.gap-2{gap:.5rem}.gap-\\[10px\\]{gap:10px}.gap-5{gap:1.25rem}.gap-\\[20px\\]{gap:20px}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-\\[15px\\]{border-radius:15px}.rounded-full{border-radius:9999px}.rounded-\\[5px\\]{border-radius:5px}.rounded-\\[60px\\]{border-radius:60px}.rounded-\\[10px\\]{border-radius:10px}.rounded-\\[inherit\\]{border-radius:inherit}.rounded-\\[8px\\]{border-radius:8px}.rounded-\\[50\\%\\]{border-radius:50%}.rounded-t-\\[15px\\]{border-top-left-radius:15px;border-top-right-radius:15px}.border{border-width:1px}.border-secondaryLight{--tw-border-opacity:1;border-color:rgb(179 179 179/var(--tw-border-opacity))}.border-primaryLight{--tw-border-opacity:1;border-color:rgb(86 86 86/var(--tw-border-opacity))}.bg-primaryLight{--tw-bg-opacity:1;background-color:rgb(86 86 86/var(--tw-bg-opacity))}.bg-primary{--tw-bg-opacity:1;background-color:rgb(29 28 32/var(--tw-bg-opacity))}.bg-graySelected{--tw-bg-opacity:1;background-color:rgb(245 245 245/var(--tw-bg-opacity))}.bg-transparent{background-color:#0000}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.bg-black\\/\\[\\.6\\]{background-color:#0009}.bg-\\[\\#f12828\\]{--tw-bg-opacity:1;background-color:rgb(241 40 40/var(--tw-bg-opacity))}.bg-\\[\\#565656\\]{--tw-bg-opacity:1;background-color:rgb(86 86 86/var(--tw-bg-opacity))}.bg-black,.bg-\\[\\#000\\]{--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity))}.bg-\\[\\#FFFFFF\\]{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.bg-underlay{background-color:#00000040}.bg-\\[\\#f3f3f3\\]{--tw-bg-opacity:1;background-color:rgb(243 243 243/var(--tw-bg-opacity))}.bg-secondaryVLight{--tw-bg-opacity:1;background-color:rgb(235 235 235/var(--tw-bg-opacity))}.bg-opacity-90{--tw-bg-opacity:.9}.object-cover{object-fit:cover}.p-2\\.5{padding:.625rem}.p-2{padding:.5rem}.p-\\[3px\\]{padding:3px}.p-\\[12px\\]{padding:12px}.py-3{padding-top:.75rem;padding-bottom:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.py-\\[9px\\]{padding-top:9px;padding-bottom:9px}.px-3\\.5{padding-left:.875rem;padding-right:.875rem}.px-3{padding-left:.75rem;padding-right:.75rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-1\\.5{padding-top:.375rem;padding-bottom:.375rem}.px-2\\.5{padding-left:.625rem;padding-right:.625rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-\\[10px\\]{padding-left:10px;padding-right:10px}.px-5{padding-left:1.25rem;padding-right:1.25rem}.py-\\[25px\\]{padding-top:25px;padding-bottom:25px}.px-\\[20px\\]{padding-left:20px;padding-right:20px}.pt-2\\.5{padding-top:.625rem}.pt-2{padding-top:.5rem}.pb-2\\.5{padding-bottom:.625rem}.pb-2{padding-bottom:.5rem}.pb-\\[25px\\]{padding-bottom:25px}.text-center{text-align:center}.text-base{letter-spacing:-.02em;font-size:16px;line-height:19px}.text-sm{letter-spacing:-.02em;font-size:14px;line-height:17px}.text-xs{letter-spacing:-.02em;font-size:12px;line-height:14px}.text-\\[112px\\]{font-size:112px}.text-xl{letter-spacing:-.02em;font-size:20px;line-height:24px}.text-lg{letter-spacing:-.02em;font-size:18px;line-height:22px}.font-medium{font-weight:500}.font-bold{font-weight:700}.font-normal{font-weight:400}.leading-\\[20px\\]{line-height:20px}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.text-primary{--tw-text-opacity:1;color:rgb(29 28 32/var(--tw-text-opacity))}.text-white\\/80{color:#fffc}.text-secondary{--tw-text-opacity:1;color:rgb(134 134 134/var(--tw-text-opacity))}.text-primaryLight{--tw-text-opacity:1;color:rgb(86 86 86/var(--tw-text-opacity))}.text-black{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity))}.underline{text-decoration-line:underline}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.opacity-0{opacity:0}.opacity-50{opacity:.5}.opacity-\\[0\\.4\\]{opacity:.4}.opacity-90{opacity:.9}.outline{outline-style:solid}.ring-\\[3px\\]{--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(3px + 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)}.ring-cta{--tw-ring-opacity:1;--tw-ring-color:rgb(38 138 250/var(--tw-ring-opacity))}.blur{--tw-blur:blur(8px);filter:var(--tw-blur)var(--tw-brightness)var(--tw-contrast)var(--tw-grayscale)var(--tw-hue-rotate)var(--tw-invert)var(--tw-saturate)var(--tw-sepia)var(--tw-drop-shadow)}.filter{filter:var(--tw-blur)var(--tw-brightness)var(--tw-contrast)var(--tw-grayscale)var(--tw-hue-rotate)var(--tw-invert)var(--tw-saturate)var(--tw-sepia)var(--tw-drop-shadow)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter,-webkit-backdrop-filter,backdrop-filter;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-\\[transform\\,border-radius\\]{transition-property:transform,border-radius;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-300{transition-duration:.3s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.ease-in{transition-timing-function:cubic-bezier(.4,0,1,1)}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}.inter{font-family:Inter,sans-serif}@supports (font-variation-settings:normal){.inter{font-family:Inter var,sans-serif}}.first-letter\\:capitalize:first-letter{text-transform:capitalize}.focus\\:outline-none:focus{outline-offset:2px;outline:2px solid #0000}.disabled\\:bg-secondaryLight:disabled{--tw-bg-opacity:1;background-color:rgb(179 179 179/var(--tw-bg-opacity))}.disabled\\:bg-graySelected:disabled{--tw-bg-opacity:1;background-color:rgb(245 245 245/var(--tw-bg-opacity))}.disabled\\:text-secondaryLight:disabled{--tw-text-opacity:1;color:rgb(179 179 179/var(--tw-text-opacity))}")})]}),i.render((0,o.jsxs)(o.Fragment,{children:[a,(0,o.jsx)("link",{rel:"preconnect",href:"https://rsms.me/"}),(0,o.jsx)("link",{rel:"stylesheet",href:"https://rsms.me/inter/inter.css"}),(0,o.jsx)(oy,{options:n})]})),n.tracking&&f.init(3111933,6)},initGreeting:(e,t)=>{s(e).render((0,o.jsx)(Py,{onGreetingDone:t}))},setExtraSettingsOptions:e=>{const t=new CustomEvent("streamUISetExtraSettingsOptions",{detail:{extraOptions:e}});window.dispatchEvent(t)},startRecord:qo.startRecord.bind(qo),stopRecord:qo.stopRecord.bind(qo),sendNotification:Dr,joinRoom:qo.init.bind(qo),leaveRoom:qo.endCall.bind(qo),terminateRoom:qo.terminateRoom.bind(qo),generateToken:qo.generateToken.bind(qo),addEventListener:qo.addEventListener.bind(qo),removeEventListener:qo.removeEventListener.bind(qo),dispatchEvent:qo.dispatchEvent.bind(qo),getState:qo.getState.bind(qo),setProfile:qo.setProfile.bind(qo),setConfig:qo.setConfig.bind(qo),setLogLevel:e=>Xa.setLogLevel(e),getPermissions:()=>qo.getPermissions()};window.streamUI=Ty,window.snapcallAPI={join:(...e)=>(console.warn("snapcallAPI.join is deprecated, please use streamUI.joinRoom instead!"),Ty.joinRoom(...e)),endCall:(...e)=>(console.warn("snapcallAPI.endCall is deprecated, please use streamUI.leaveRoom instead!"),Ty.leaveRoom(...e)),terminateRoom:(...e)=>(console.warn("snapcallAPI.terminateRoom is deprecated, please use streamUI.terminateRoom instead!"),Ty.terminateRoom(...e)),generateToken:(...e)=>(console.warn("snapcallAPI.generateToken is deprecated, please use streamUI.generateToken instead!"),Ty.generateToken(...e)),setDisplayName:(...e)=>(console.warn("snapcallAPI.setDisplayName is deprecated, please use streamUI.joinRoom options instead!"),qo.setDisplayName(...e))}})();
+`;var Py=({onGreetingDone:e})=>{const{t:t}=Ni(),[r,{width:n,height:i}]=Fs(),a=(0,je.useRef)(null),s=(0,je.useRef)(null),[c,l]=(0,je.useState)(void 0),[d,u]=(0,je.useState)(!1),[p,f]=(0,je.useState)(!1),h=n>=i,m=async e=>{try{const t=await navigator.mediaDevices.getUserMedia(e),r=t.getVideoTracks()[0],n=t.getAudioTracks()[0];r&&l(r),n&&u(!0),n?.stop()}catch(e){console.error("Get User Media Failed: ",e)}},g=(0,je.useCallback)((async()=>{c?(c.stop(),l(void 0)):await m({video:!0})}),[c]),v=(0,je.useCallback)((async()=>{d?u(!1):await m({audio:!0})}),[d]);if((0,je.useEffect)((()=>{s.current&&(s.current.srcObject=c?new MediaStream([c]):null)}),[s,c,n,i]),(0,je.useEffect)((()=>{m({audio:!0,video:!0})}),[]),!0===p)return(0,o.jsx)(Cy,{children:(0,o.jsx)("img",{src:"https://stream-assets.snapcall.io/animations/snapcall-logo-animation.gif",alt:"Snapcall logo animation",height:40})});const y=Boolean(c);return(0,o.jsxs)(cy,{ref:r,children:[(0,o.jsx)(jh,{}),(0,o.jsx)(sy,{}),(0,o.jsx)(ly,{children:t("greeting.mainTitle")}),(0,o.jsxs)(dy,{children:[h&&(0,o.jsxs)(uy,{children:[(0,o.jsx)(py,{webcamEnabled:y,ref:s,autoPlay:!0}),(0,o.jsxs)(my,{webcamEnabled:y,children:[(0,o.jsxs)(fy,{children:[!d&&(0,o.jsx)(hy,{children:(0,o.jsx)(zs,{status:!d})}),!y&&(0,o.jsx)(hy,{children:(0,o.jsx)(Bs,{status:!y})})]}),(0,o.jsx)(vy,{children:(0,o.jsx)(Zs,{})})]}),(0,o.jsxs)(gy,{children:[(0,o.jsx)(vy,{onClick:v,danger:!d,children:(0,o.jsx)(zs,{status:!d})}),(0,o.jsx)(vy,{onClick:g,danger:!y,children:(0,o.jsx)(Bs,{status:!y})})]})]}),(0,o.jsxs)(yy,{children:[h&&(0,o.jsx)(by,{children:t("greeting.sideTitle")}),(0,o.jsx)(wy,{children:t("greeting.sideDescription")}),(0,o.jsx)(xy,{ref:a,name:"displayName",type:"text",placeholder:t("greeting.namePlaceholder"),autoFocus:!0}),(0,o.jsx)(Sy,{onClick:()=>{const t=a.current?.value,r=Boolean(c);c?.stop(),f(!0),setTimeout((()=>{e({cameraEnabled:r,micEnabled:d,displayName:t})}),4e3)},children:t("greeting.nameSubmit")})]})]}),(0,o.jsxs)(_y,{children:[(0,o.jsx)(ky,{children:t("greeting.footerTitle")}),(0,o.jsx)(Ey,{children:t("greeting.footerDescription")})]})]})};const Ry={recorder:{enabled:!1,defaultState:"photo"},sharedURL:window.location.href,showMenuButton:!0,settingsShortcuts:[{id:"pip",displayType:"icon"}],controls:{microphone:{available:!0,enabled:!0},camera:{available:!0,enabled:!1},screenshare:{available:!0}},streamApiURL:String("https://apistream.snapcall.io"),tracking:!1},Ty={init:({element:e,...t})=>{if("boolean"==typeof t.recorder&&(t.recorder={enabled:t.recorder,defaultState:"photo"}),e?.nodeType!==window.Node.ELEMENT_NODE)throw new Error('The "element" property must be a valid element!');const n=m(Ry,t),i=s(e);let a=null;a=(0,o.jsxs)(o.Fragment,{children:[t.recorder&&(0,o.jsx)("style",{children:r('*,:before,:after{box-sizing:border-box;border:0 solid #e5e7eb}:before,:after{--tw-content:""}html{-webkit-text-size-adjust:100%;tab-size:4;font-feature-settings:normal;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:1.5}body{line-height:inherit;margin:0}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;background-color:#0000;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{margin:0;padding:0;list-style:none}textarea{resize:vertical}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}[hidden]{display:none}')}),(0,o.jsx)("style",{children:r("*,:before,:after,::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.visible{visibility:visible}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.inset-0{inset:0}.left-0{left:0}.top-0{top:0}.z-50{z-index:50}.z-\\[100\\]{z-index:100}.z-\\[1\\]{z-index:1}.m-\\[10px\\]{margin:10px}.mx-\\[20px\\]{margin-left:20px;margin-right:20px}.ml-\\[10px\\]{margin-left:10px}.mt-\\[10px\\]{margin-top:10px}.mt-\\[50px\\]{margin-top:50px}.block{display:block}.inline{display:inline}.flex{display:flex}.table{display:table}.hidden{display:none}.h-full{height:100%}.h-\\[150px\\]{height:150px}.h-\\[60px\\]{height:60px}.h-\\[72px\\]{height:72px}.h-\\[56px\\]{height:56px}.h-\\[40px\\]{height:40px}.h-\\[235px\\]{height:235px}.h-\\[93px\\]{height:93px}.h-screen{height:100vh}.h-fit{height:-moz-fit-content;height:-moz-fit-content;height:fit-content}.h-\\[24px\\]{height:24px}.h-\\[30px\\]{height:30px}.h-1\\/3{height:33.3333%}.max-h-\\[inherit\\]{max-height:inherit}.max-h-\\[70px\\]{max-height:70px}.min-h-0{min-height:0}.min-h-\\[100\\%\\]{min-height:100%}.w-full{width:100%}.w-\\[60px\\]{width:60px}.w-\\[72px\\]{width:72px}.w-\\[56px\\]{width:56px}.w-\\[76px\\]{width:76px}.w-screen{width:100vw}.w-\\[360px\\]{width:360px}.w-\\[400px\\]{width:400px}.w-\\[320px\\]{width:320px}.w-\\[24px\\]{width:24px}.w-\\[30px\\]{width:30px}.w-1\\/3{width:33.3333%}.min-w-\\[100\\%\\]{min-width:100%}.min-w-\\[24px\\]{min-width:24px}.max-w-\\[400px\\]{max-width:400px}.max-w-\\[600px\\]{max-width:600px}.max-w-\\[800px\\]{max-width:800px}.max-w-\\[70px\\]{max-width:70px}.flex-1{flex:1}.flex-auto{flex:auto}.flex-grow{flex-grow:1}.translate-y-2{--tw-translate-y:.5rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y))rotate(var(--tw-rotate))skewX(var(--tw-skew-x))skewY(var(--tw-skew-y))scaleX(var(--tw-scale-x))scaleY(var(--tw-scale-y))}.translate-y-0{--tw-translate-y:0px;transform:translate(var(--tw-translate-x),var(--tw-translate-y))rotate(var(--tw-rotate))skewX(var(--tw-skew-x))skewY(var(--tw-skew-y))scaleX(var(--tw-scale-x))scaleY(var(--tw-scale-y))}.translate-y-\\[200\\%\\]{--tw-translate-y:200%;transform:translate(var(--tw-translate-x),var(--tw-translate-y))rotate(var(--tw-rotate))skewX(var(--tw-skew-x))skewY(var(--tw-skew-y))scaleX(var(--tw-scale-x))scaleY(var(--tw-scale-y))}.translate-y-full{--tw-translate-y:100%;transform:translate(var(--tw-translate-x),var(--tw-translate-y))rotate(var(--tw-rotate))skewX(var(--tw-skew-x))skewY(var(--tw-skew-y))scaleX(var(--tw-scale-x))scaleY(var(--tw-scale-y))}.scale-\\[0\\.4\\]{--tw-scale-x:.4;--tw-scale-y:.4;transform:translate(var(--tw-translate-x),var(--tw-translate-y))rotate(var(--tw-rotate))skewX(var(--tw-skew-x))skewY(var(--tw-skew-y))scaleX(var(--tw-scale-x))scaleY(var(--tw-scale-y))}.scale-x-\\[-1\\]{--tw-scale-x:-1;transform:translate(var(--tw-translate-x),var(--tw-translate-y))rotate(var(--tw-rotate))skewX(var(--tw-skew-x))skewY(var(--tw-skew-y))scaleX(var(--tw-scale-x))scaleY(var(--tw-scale-y))}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y))rotate(var(--tw-rotate))skewX(var(--tw-skew-x))skewY(var(--tw-skew-y))scaleX(var(--tw-scale-x))scaleY(var(--tw-scale-y))}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.resize{resize:both}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-end{align-items:flex-end}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-\\[5px\\]{gap:5px}.gap-2\\.5{gap:.625rem}.gap-2{gap:.5rem}.gap-\\[10px\\]{gap:10px}.gap-5{gap:1.25rem}.gap-\\[20px\\]{gap:20px}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-\\[15px\\]{border-radius:15px}.rounded-full{border-radius:9999px}.rounded-\\[5px\\]{border-radius:5px}.rounded-\\[60px\\]{border-radius:60px}.rounded-\\[10px\\]{border-radius:10px}.rounded-\\[inherit\\]{border-radius:inherit}.rounded-\\[8px\\]{border-radius:8px}.rounded-\\[50\\%\\]{border-radius:50%}.rounded-t-\\[15px\\]{border-top-left-radius:15px;border-top-right-radius:15px}.border{border-width:1px}.border-secondaryLight{--tw-border-opacity:1;border-color:rgb(179 179 179/var(--tw-border-opacity))}.border-primaryLight{--tw-border-opacity:1;border-color:rgb(86 86 86/var(--tw-border-opacity))}.bg-primaryLight{--tw-bg-opacity:1;background-color:rgb(86 86 86/var(--tw-bg-opacity))}.bg-primary{--tw-bg-opacity:1;background-color:rgb(29 28 32/var(--tw-bg-opacity))}.bg-graySelected{--tw-bg-opacity:1;background-color:rgb(245 245 245/var(--tw-bg-opacity))}.bg-transparent{background-color:#0000}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.bg-black\\/\\[\\.6\\]{background-color:#0009}.bg-\\[\\#f12828\\]{--tw-bg-opacity:1;background-color:rgb(241 40 40/var(--tw-bg-opacity))}.bg-\\[\\#565656\\]{--tw-bg-opacity:1;background-color:rgb(86 86 86/var(--tw-bg-opacity))}.bg-black,.bg-\\[\\#000\\]{--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity))}.bg-\\[\\#FFFFFF\\]{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.bg-underlay{background-color:#00000040}.bg-\\[\\#f3f3f3\\]{--tw-bg-opacity:1;background-color:rgb(243 243 243/var(--tw-bg-opacity))}.bg-secondaryVLight{--tw-bg-opacity:1;background-color:rgb(235 235 235/var(--tw-bg-opacity))}.bg-opacity-90{--tw-bg-opacity:.9}.object-cover{object-fit:cover}.p-2\\.5{padding:.625rem}.p-2{padding:.5rem}.p-\\[3px\\]{padding:3px}.p-\\[12px\\]{padding:12px}.py-3{padding-top:.75rem;padding-bottom:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.py-\\[9px\\]{padding-top:9px;padding-bottom:9px}.px-3\\.5{padding-left:.875rem;padding-right:.875rem}.px-3{padding-left:.75rem;padding-right:.75rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-1\\.5{padding-top:.375rem;padding-bottom:.375rem}.px-2\\.5{padding-left:.625rem;padding-right:.625rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-\\[10px\\]{padding-left:10px;padding-right:10px}.px-5{padding-left:1.25rem;padding-right:1.25rem}.py-\\[25px\\]{padding-top:25px;padding-bottom:25px}.px-\\[20px\\]{padding-left:20px;padding-right:20px}.pt-2\\.5{padding-top:.625rem}.pt-2{padding-top:.5rem}.pb-2\\.5{padding-bottom:.625rem}.pb-2{padding-bottom:.5rem}.pb-\\[25px\\]{padding-bottom:25px}.text-center{text-align:center}.text-base{letter-spacing:-.02em;font-size:16px;line-height:19px}.text-sm{letter-spacing:-.02em;font-size:14px;line-height:17px}.text-xs{letter-spacing:-.02em;font-size:12px;line-height:14px}.text-\\[112px\\]{font-size:112px}.text-xl{letter-spacing:-.02em;font-size:20px;line-height:24px}.text-lg{letter-spacing:-.02em;font-size:18px;line-height:22px}.font-medium{font-weight:500}.font-bold{font-weight:700}.font-normal{font-weight:400}.leading-\\[20px\\]{line-height:20px}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.text-primary{--tw-text-opacity:1;color:rgb(29 28 32/var(--tw-text-opacity))}.text-white\\/80{color:#fffc}.text-secondary{--tw-text-opacity:1;color:rgb(134 134 134/var(--tw-text-opacity))}.text-primaryLight{--tw-text-opacity:1;color:rgb(86 86 86/var(--tw-text-opacity))}.text-black{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity))}.underline{text-decoration-line:underline}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.opacity-0{opacity:0}.opacity-50{opacity:.5}.opacity-\\[0\\.4\\]{opacity:.4}.opacity-90{opacity:.9}.outline{outline-style:solid}.ring-\\[3px\\]{--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(3px + 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)}.ring-cta{--tw-ring-opacity:1;--tw-ring-color:rgb(38 138 250/var(--tw-ring-opacity))}.blur{--tw-blur:blur(8px);filter:var(--tw-blur)var(--tw-brightness)var(--tw-contrast)var(--tw-grayscale)var(--tw-hue-rotate)var(--tw-invert)var(--tw-saturate)var(--tw-sepia)var(--tw-drop-shadow)}.filter{filter:var(--tw-blur)var(--tw-brightness)var(--tw-contrast)var(--tw-grayscale)var(--tw-hue-rotate)var(--tw-invert)var(--tw-saturate)var(--tw-sepia)var(--tw-drop-shadow)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter,-webkit-backdrop-filter,backdrop-filter;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-\\[transform\\,border-radius\\]{transition-property:transform,border-radius;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-300{transition-duration:.3s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.ease-in{transition-timing-function:cubic-bezier(.4,0,1,1)}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}.inter{font-family:Inter,sans-serif}@supports (font-variation-settings:normal){.inter{font-family:Inter var,sans-serif}}.first-letter\\:capitalize:first-letter{text-transform:capitalize}.focus\\:outline-none:focus{outline-offset:2px;outline:2px solid #0000}.disabled\\:bg-secondaryLight:disabled{--tw-bg-opacity:1;background-color:rgb(179 179 179/var(--tw-bg-opacity))}.disabled\\:bg-graySelected:disabled{--tw-bg-opacity:1;background-color:rgb(245 245 245/var(--tw-bg-opacity))}.disabled\\:text-secondaryLight:disabled{--tw-text-opacity:1;color:rgb(179 179 179/var(--tw-text-opacity))}")})]}),i.render((0,o.jsxs)(o.Fragment,{children:[a,(0,o.jsx)("link",{rel:"preconnect",href:"https://rsms.me/"}),(0,o.jsx)("link",{rel:"stylesheet",href:"https://rsms.me/inter/inter.css"}),(0,o.jsx)(oy,{options:n})]})),n.tracking&&f.init(3111933,6)},initGreeting:(e,t)=>{s(e).render((0,o.jsx)(Py,{onGreetingDone:t}))},setExtraSettingsOptions:e=>{const t=new CustomEvent("streamUISetExtraSettingsOptions",{detail:{extraOptions:e}});window.dispatchEvent(t)},startRecord:qo.startRecord.bind(qo),stopRecord:qo.stopRecord.bind(qo),sendNotification:Dr,joinRoom:qo.init.bind(qo),leaveRoom:qo.endCall.bind(qo),terminateRoom:qo.terminateRoom.bind(qo),generateToken:qo.generateToken.bind(qo),addEventListener:qo.addEventListener.bind(qo),removeEventListener:qo.removeEventListener.bind(qo),dispatchEvent:qo.dispatchEvent.bind(qo),getState:qo.getState.bind(qo),setProfile:qo.setProfile.bind(qo),setConfig:qo.setConfig.bind(qo),setLogLevel:e=>Xa.setLogLevel(e),getPermissions:()=>qo.getPermissions()};window.streamUI=Ty,window.snapcallAPI={join:(...e)=>(console.warn("snapcallAPI.join is deprecated, please use streamUI.joinRoom instead!"),Ty.joinRoom(...e)),endCall:(...e)=>(console.warn("snapcallAPI.endCall is deprecated, please use streamUI.leaveRoom instead!"),Ty.leaveRoom(...e)),terminateRoom:(...e)=>(console.warn("snapcallAPI.terminateRoom is deprecated, please use streamUI.terminateRoom instead!"),Ty.terminateRoom(...e)),generateToken:(...e)=>(console.warn("snapcallAPI.generateToken is deprecated, please use streamUI.generateToken instead!"),Ty.generateToken(...e)),setDisplayName:(...e)=>(console.warn("snapcallAPI.setDisplayName is deprecated, please use streamUI.joinRoom options instead!"),qo.setDisplayName(...e))}})();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@snapcall/stream-ui",
-  "version": "1.11.3",
+  "version": "1.11.4",
   "description": "",
   "source": "src/index.tsx",
   "main": "dist/stream-ui.js",