palbase 0.35.0 → 0.36.0

package/dist/web/calls-ui.js

@@ -1,46 +0,0 @@
-/*! palbase 0.35.0 — Palbase SDK License (see LICENSE) */
-import"../chunks/ZBKJUKQA.js";var pe=Object.freeze({incomingVoice:"Incoming voice call",incomingVideo:"Incoming video call",accept:"Accept",acceptVoiceOnly:"Accept with voice only",decline:"Decline",calling:"Calling\u2026",connecting:"Connecting\u2026",reconnecting:"Reconnecting\u2026",declined:"Call declined",missed:"No answer",busy:"Busy",hungUp:"Call ended",canceled:"Call canceled",failed:"Call failed",answeredElsewhere:"Answered on another device",left:"You left the call",ended:"Call ended"}),ue=Object.freeze({incoming:"Incoming call",call:"Call",mute:"Mute",unmute:"Unmute",cameraOn:"Turn camera on",cameraOff:"Turn camera off",switchCamera:"Switch camera",hangUp:"Hang up",self:"Your camera"}),be=new Map([["declined","declined"],["missed","missed"],["busy","busy"],["hung_up","hungUp"],["canceled","canceled"],["failed","failed"],["answered_elsewhere","answeredElsewhere"],["left","left"]]),fe=["accent","background","foreground","danger","radius","font"],ge=2e3,R="data-palbase-calls-ui-style",V=new WeakMap,z=new WeakMap,me=0;function Ie(a,n={}){let i=n.container?.ownerDocument??globalThis.document;if(!i)throw new Error("mountCallUI needs a page");let c={...pe,...n.texts},d={...ue,...n.labels},r=(e,t,...o)=>{let l=i.createElement(e);return t&&(l.className=t),l.append(...o),l};Ce(i);let h=r("div",["pb-call-root",n.container?"pb-call-contained":"",n.className??""].filter(Boolean).join(" "));h.setAttribute("data-palbase-calls-ui","");for(let e of fe){let t=n.theme?.[e];t!==void 0&&t!==""&&h.style.setProperty(`--pb-call-${e}`,typeof t=="number"?`${t}px`:t)}(n.container??i.body).append(h);let u=[],p=null,m=null,M=null,H=!1,ne=a.onIncoming(e=>{u.some(t=>t.s===e)||(u.push({s:e,off:e.subscribe(P)}),P())}),le=a.onCall(B);a.current&&B(a.current);function P(){let e=null;for(let t=u.length-1;t>=0;t--){let o=u[t],l=o.s.state.phase;l!=="incoming"&&l!=="invited"?(o.off(),u.splice(t,1)):!e&&l==="incoming"&&(o.wanted??=ae(o.s))&&(e=o.s)}p&&p.s!==e&&(p.layer.remove(),p=null),e&&!p&&(p=oe(e)),p?.fill(),p&&!m&&n.ringtone!==!1&&(m=we()),!p&&m&&(m.stop(),m=null)}function ae(e){try{return n.incoming?.(e.state.call,e)!==!1}catch{return!0}}function oe(e){let t=`pb-call-${++me}`,o=r("div","pb-call-avatar"),l=r("div","pb-call-title"),g=r("div","pb-call-sub");l.id=`${t}-name`,g.id=`${t}-sub`;let b=q("pb-call-decline",c.decline,"hangUp",()=>S(()=>e.decline())),k=q("pb-call-accept",c.accept,"phone",()=>S(()=>e.accept())),y=E("pb-call-link",c.acceptVoiceOnly,()=>S(()=>e.accept({video:!1})));y.textContent=c.acceptVoiceOnly;let T=r("div","pb-call-panel pb-call-sheet",r("div","pb-call-who",o,l,g),r("div","pb-call-foot",r("div","pb-call-actions",b,k),y));Q(T,d.incoming),T.setAttribute("aria-describedby",`${l.id} ${g.id}`);let A=r("div","pb-call-layer pb-call-ringing",T);h.append(A);function S(v){let C=[b,k,y];for(let w of C)w.disabled=!0;U(v,e).finally(()=>C.forEach(w=>w.disabled=!1))}function I(){let v=e.state.call,C=v.participants.find(j=>j.user_id===v.caller_id),w=C?.name||v.caller_id;l.textContent=w,g.textContent=v.video?c.incomingVideo:c.incomingVoice,y.hidden=!v.video,N(k.firstElementChild,v.video?"video":"phone"),K(o,w,C?.image_url??null)}return{s:e,layer:A,fill:I}}function B(e){M?.s!==e&&(M?.close(),M=ie(e))}function ie(e){let t=r("div","pb-call-status");t.setAttribute("role","status");let o=r("div","pb-call-timer"),l=D("pb-call-self");l.setAttribute("aria-label",d.self);let g=r("div","pb-call-stage",l),b=E("pb-call-ctl","",()=>{U(()=>e.setMicrophone(!e.state.microphone),e)}),k=E("pb-call-ctl","",()=>{U(()=>e.setCamera(!e.state.camera),e)}),y=E("pb-call-ctl",d.switchCamera,()=>{U(()=>e.switchCamera(),e)}),T=E("pb-call-ctl pb-call-hangup",d.hangUp,()=>{U(()=>e.leave(),e)});N(y,"flip"),N(T,"hangUp");let A=r("div","pb-call-panel pb-call-view",r("div","pb-call-top",t,o),g,r("div","pb-call-controls",b,k,y,T));Q(A,d.call);let S=r("div","pb-call-layer",A);h.prepend(S);let I=new Map,v=null,C,w,j=null,W={s:e,close:G},se=e.subscribe(X);return X(),W;function X(){let s=e.state,L=s.phase==="ended"||s.phase==="elsewhere";g.classList.toggle("pb-call-voice",!(s.call.video||s.camera||s.remote.some(f=>f.video)));let de=s.remote.length>0?s.remote:re(s),F=new Set;for(let f of de){F.add(f.userId);let x=I.get(f.userId);x||(x=ce(),I.set(f.userId,x),g.insertBefore(x.el,l));let J=f.name||f.userId;x.name.textContent=J,K(x.avatar,J,f.imageUrl),x.video.srcObject!==f.stream&&(x.video.srcObject=f.stream),x.el.classList.toggle("pb-call-novideo",!f.video)}for(let[f,x]of I)F.has(f)||(x.video.srcObject=null,x.el.remove(),I.delete(f));let O=s.camera&&!L?s.local:null,$=O?.getVideoTracks?.()[0]??null;($??O)!==j&&(j=$??O,l.srcObject=O),l.hidden=!O,l.classList.toggle("pb-call-rear",$?.getSettings?.().facingMode==="environment"),s.phase==="connected"&&v===null&&(v=Date.now(),C=setInterval(_,1e3)),t.textContent=L?c[be.get(s.endReason??"")??"ended"]:s.phase==="calling"?c.calling:s.phase==="connecting"?c.connecting:s.phase==="reconnecting"?c.reconnecting:"",L||_(),b.classList.toggle("pb-call-off",!s.microphone),Y(b,s.microphone?d.mute:d.unmute,s.microphone?"mic":"micOff"),k.classList.toggle("pb-call-off",!s.camera),Y(k,s.camera?d.cameraOff:d.cameraOn,s.camera?"video":"videoOff"),y.hidden=!s.camera;for(let f of[b,k,y,T])f.disabled=L;L&&w===void 0&&(_(),clearInterval(C),w=setTimeout(G,ge))}function _(){o.textContent=v===null?"":xe(Date.now()-v)}function G(){se(),clearInterval(C),clearTimeout(w);for(let s of I.values())s.video.srcObject=null;l.srcObject=null,S.remove(),M===W&&(M=null)}}function re(e){let t=e.call,o=t.participants.find(l=>l.device_id===a.deviceId)?.user_id??(e.outgoing?t.caller_id:null);return t.participants.filter(l=>l.user_id!==o&&(t.kind==="direct"||l.state==="ringing"||l.state==="joined")).map(l=>({userId:l.user_id,name:l.name,imageUrl:l.image_url,stream:null,video:!1}))}function ce(){let e=D(""),t=r("div","pb-call-avatar"),o=r("div","pb-call-name");return{el:r("div","pb-call-tile",e,t,o),video:e,avatar:t,name:o}}function D(e){let t=r("video",e);return t.autoplay=!0,t.playsInline=!0,t.muted=!0,t.defaultMuted=!0,t}function E(e,t,o){let l=r("button",e);return l.type="button",t&&l.setAttribute("aria-label",t),l.addEventListener("click",o),l}function q(e,t,o,l){let g=r("span","pb-call-ico");N(g,o);let b=E(`pb-call-btn ${e}`,t,l);return b.append(g,r("span","pb-call-caption",i.createTextNode(t))),b}function Y(e,t,o){e.setAttribute("aria-label",t),e.title=t,N(e,o)}function K(e,t,o){let l=`${o??""}
-${t}`;if(z.get(e)===l)return;z.set(e,l),e.textContent=ve(t);let g=he(o,i);if(!g)return;let b=i.createElement("img");b.alt="",b.addEventListener("error",()=>b.remove()),b.src=g,e.append(b)}function U(e,t){return new Promise(o=>o(e())).catch(o=>{H||n.onError?.(o,t)})}return{unmount(){if(!H){H=!0,ne(),le();for(let e of u.splice(0))e.off();p=null,m?.stop(),m=null,M?.close(),h.remove(),ke(i)}}}}function Q(a,n){a.setAttribute("role","dialog"),a.setAttribute("aria-modal","false"),a.setAttribute("aria-label",n)}function ve(a){let n=a.trim().split(/\s+/).filter(Boolean);return(n.length>1?[n[0],n[n.length-1]]:n).map(c=>[...c][0]??"").join("").toUpperCase()||"?"}function he(a,n){if(!a)return null;try{let i=new URL(a,n.baseURI);return i.protocol==="https:"||i.protocol==="http:"||i.protocol==="blob:"||/^data:image\//i.test(i.href)?i.href:null}catch{return null}}function xe(a){let n=Math.max(0,Math.floor(a/1e3)),i=d=>String(d).padStart(2,"0"),c=Math.floor(n/60)%60;return n>=3600?`${Math.floor(n/3600)}:${i(c)}:${i(n%60)}`:`${c}:${i(n%60)}`}function we(){let a=globalThis,n=a.AudioContext??a.webkitAudioContext;if(!n)return null;try{let i=new n,c=i.createGain();c.gain.value=0,c.connect(i.destination);let d=i.createOscillator();d.type="sine",d.connect(c),d.start();let r=()=>{let u=i.currentTime+.05;for(let[p,m]of[[880,0],[660,.42]])d.frequency.setValueAtTime(p,u+m),c.gain.setValueAtTime(0,u+m),c.gain.linearRampToValueAtTime(.05,u+m+.03),c.gain.setValueAtTime(.05,u+m+.32),c.gain.linearRampToValueAtTime(0,u+m+.38)};r();let h=setInterval(r,2500);return Promise.resolve().then(()=>i.resume()).catch(()=>{}),{stop(){clearInterval(h);try{d.stop()}catch{}Promise.resolve().then(()=>i.close()).catch(()=>{})}}}catch{return null}}var Z="M6.6 3.5h2.8l1.6 4.2-2.1 1.3a11 11 0 0 0 6.1 6.1l1.3-2.1 4.2 1.6v2.8a2 2 0 0 1-2.2 2A16.5 16.5 0 0 1 4.6 5.7a2 2 0 0 1 2-2.2z",ee=["M12 3a3 3 0 0 1 3 3v5a3 3 0 0 1-6 0V6a3 3 0 0 1 3-3z","M5 11a7 7 0 0 0 14 0","M12 18v3"],te=["M4 7h9a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2z","M15 11l6-3v8l-6-3"],ye={phone:[Z],hangUp:[Z],mic:ee,micOff:[...ee,"M4 4l16 16"],video:te,videoOff:[...te,"M3 3l18 18"],flip:["M4 12a8 8 0 0 1 13.7-5.6L20 9","M20 4v5h-5","M20 12a8 8 0 0 1-13.7 5.6L4 15","M4 20v-5h5"]};function N(a,n){if(z.get(a)===n)return;z.set(a,n);let i="http://www.w3.org/2000/svg",c=a.ownerDocument,d=c.createElementNS(i,"svg"),r={viewBox:"0 0 24 24",width:"24",height:"24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round","aria-hidden":"true",focusable:"false"};for(let[u,p]of Object.entries(r))d.setAttribute(u,p);let h=c.createElementNS(i,"g");n==="hangUp"&&h.setAttribute("transform","rotate(135 12 12)");for(let u of ye[n]){let p=c.createElementNS(i,"path");p.setAttribute("d",u),h.append(p)}d.append(h),a.replaceChildren(d)}function Ce(a){if(V.set(a,(V.get(a)??0)+1),a.querySelector(`style[${R}]`))return;let n=a.createElement("style");n.setAttribute(R,""),n.textContent=Te,(a.head??a.documentElement).append(n)}function ke(a){let n=(V.get(a)??1)-1;if(n>0)return void V.set(a,n);V.delete(a),a.querySelector(`style[${R}]`)?.remove()}var Te=`
-.pb-call-root{--pb-call-accent:#16a34a;--pb-call-background:#fff;--pb-call-foreground:#111827;--pb-call-danger:#dc2626;--pb-call-radius:20px;--pb-call-font:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;position:fixed;inset:0;z-index:2147482000;pointer-events:none;font-family:var(--pb-call-font);color:var(--pb-call-foreground);-webkit-font-smoothing:antialiased}
-@media (prefers-color-scheme:dark){.pb-call-root{--pb-call-background:#17181c;--pb-call-foreground:#f3f4f6}}
-.pb-call-root.pb-call-contained{position:absolute}
-.pb-call-root [hidden]{display:none!important}
-.pb-call-layer{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;box-sizing:border-box;padding:16px;background:rgba(0,0,0,.45);pointer-events:auto}
-.pb-call-ringing{z-index:1}
-.pb-call-panel{position:relative;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;gap:24px;width:min(380px,100%);max-height:100%;padding:32px 24px 24px;border-radius:var(--pb-call-radius);background:var(--pb-call-background);color:var(--pb-call-foreground);box-shadow:0 24px 64px rgba(0,0,0,.35);overflow:hidden}
-.pb-call-view{width:min(960px,100%);height:min(680px,100%);padding:16px;gap:12px}
-.pb-call-who,.pb-call-foot{display:flex;flex-direction:column;align-items:center;gap:6px;max-width:100%;text-align:center}
-.pb-call-foot{gap:16px}
-.pb-call-who .pb-call-avatar{margin-bottom:12px}
-.pb-call-title{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:22px;font-weight:600}
-.pb-call-sub,.pb-call-status,.pb-call-timer{font-size:15px;opacity:.75}
-.pb-call-actions{display:flex;gap:56px}
-.pb-call-root button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
-.pb-call-root button:disabled{opacity:.5;cursor:default}
-.pb-call-root button:focus-visible{outline:3px solid var(--pb-call-accent);outline-offset:3px}
-.pb-call-btn{display:flex;flex-direction:column;align-items:center;gap:8px;padding:0;border:0;background:none;font-size:14px}
-.pb-call-ico{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;color:#fff;background:var(--pb-call-accent)}
-.pb-call-decline .pb-call-ico{background:var(--pb-call-danger)}
-.pb-call-link{padding:6px 10px;border:0;background:none;font-size:14px;text-decoration:underline;text-underline-offset:3px;opacity:.85}
-.pb-call-top{display:flex;gap:10px;align-items:baseline;min-height:20px;font-variant-numeric:tabular-nums}
-.pb-call-stage{position:relative;flex:1;align-self:stretch;min-height:0;display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));grid-auto-rows:minmax(0,1fr)}
-.pb-call-tile{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-height:0;overflow:hidden;border-radius:calc(var(--pb-call-radius) * .6);background:color-mix(in srgb,var(--pb-call-foreground) 10%,var(--pb-call-background))}
-.pb-call-tile video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
-.pb-call-novideo video,.pb-call-tile:not(.pb-call-novideo) .pb-call-avatar{display:none}
-.pb-call-name{position:absolute;left:10px;bottom:10px;max-width:calc(100% - 20px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:3px 10px;border-radius:999px;font-size:13px;color:#fff;background:rgba(0,0,0,.5)}
-.pb-call-voice .pb-call-tile{background:none}
-.pb-call-voice .pb-call-name{position:static;padding:0;font-size:22px;font-weight:600;color:inherit;background:none}
-.pb-call-avatar{position:relative;display:grid;place-items:center;flex:none;width:96px;height:96px;overflow:hidden;border-radius:50%;font-size:36px;font-weight:600;color:var(--pb-call-foreground);background:color-mix(in srgb,var(--pb-call-accent) 22%,var(--pb-call-background))}
-.pb-call-voice .pb-call-avatar{width:140px;height:140px;font-size:52px}
-.pb-call-avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
-.pb-call-sheet .pb-call-avatar{animation:pb-call-pulse 1.8s ease-out infinite}
-@keyframes pb-call-pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--pb-call-accent) 45%,transparent)}100%{box-shadow:0 0 0 22px transparent}}
-.pb-call-self{position:absolute;right:12px;bottom:12px;z-index:1;width:min(28%,180px);aspect-ratio:3/4;object-fit:cover;border-radius:12px;background:#000;box-shadow:0 8px 24px rgba(0,0,0,.35);transform:scaleX(-1)}
-.pb-call-self.pb-call-rear{transform:none}
-.pb-call-controls{display:flex;gap:14px;justify-content:center}
-.pb-call-ctl{display:grid;place-items:center;width:54px;height:54px;padding:0;border:0;border-radius:50%;background:color-mix(in srgb,var(--pb-call-foreground) 12%,transparent)}
-.pb-call-ctl.pb-call-off{color:var(--pb-call-background);background:var(--pb-call-foreground)}
-.pb-call-ctl.pb-call-hangup{color:#fff;background:var(--pb-call-danger)}
-@media (max-width:600px){.pb-call-layer{padding:0}.pb-call-panel{width:100%;height:100%;border-radius:0;box-shadow:none;padding:max(16px,env(safe-area-inset-top,0px)) 16px max(16px,env(safe-area-inset-bottom,0px))}.pb-call-sheet{justify-content:space-between;padding-top:18vh;padding-bottom:max(48px,env(safe-area-inset-bottom,0px))}}
-@media (prefers-reduced-motion:reduce){.pb-call-root *{animation:none!important}}
-`;export{ue as CALL_UI_LABELS,pe as CALL_UI_TEXTS,Ie as mountCallUI};

package/types/web/src/calls-ui/index.d.ts

@@ -1,71 +0,0 @@
-import type { Call, CallSession, Calls } from '../calls.js';
-/** Every word the screens show. */
-export interface CallUITexts {
-    incomingVoice: string;
-    incomingVideo: string;
-    accept: string;
-    acceptVoiceOnly: string;
-    decline: string;
-    calling: string;
-    connecting: string;
-    reconnecting: string;
-    /** How the call ended for this device, by its endReason; `ended` for any other. */
-    declined: string;
-    missed: string;
-    busy: string;
-    hungUp: string;
-    canceled: string;
-    failed: string;
-    answeredElsewhere: string;
-    left: string;
-    ended: string;
-}
-/** What a screen reader says of what shows no words of its own. */
-export interface CallUILabels {
-    /** The ringing sheet. */
-    incoming: string;
-    /** The call's view. */
-    call: string;
-    mute: string;
-    unmute: string;
-    cameraOn: string;
-    cameraOff: string;
-    switchCamera: string;
-    hangUp: string;
-    /** This device's camera. */
-    self: string;
-}
-/** The screens' colors, corners and font: CSS values, set as --pb-call-<name> on the root element. */
-export interface CallUITheme {
-    accent?: string;
-    background?: string;
-    foreground?: string;
-    danger?: string;
-    /** A length; a number is pixels. */
-    radius?: string | number;
-    font?: string;
-}
-export interface CallUIOptions {
-    /** The element the screens are drawn in (positioned): over the whole page (the body) unless given. */
-    container?: HTMLElement;
-    texts?: Partial<CallUITexts>;
-    labels?: Partial<CallUILabels>;
-    /** The light and dark colors the system asks for, unless given. */
-    theme?: CallUITheme;
-    /** Added to the root element's classes. */
-    className?: string;
-    /** A soft ring while a sheet shows (true by default); silent where the page may not play sound yet. */
-    ringtone?: boolean;
-    /** Asked once for each call that rings: false leaves it to the app's own screen. */
-    incoming?(call: Call, session: CallSession): boolean;
-    /** An answer, a microphone or a camera that failed (the person refused the camera, the network). */
-    onError?(error: unknown, session: CallSession): void;
-}
-export interface CallUI {
-    /** Takes the screens away and stops listening; a call goes on. */
-    unmount(): void;
-}
-export declare const CALL_UI_TEXTS: Readonly<CallUITexts>;
-export declare const CALL_UI_LABELS: Readonly<CallUILabels>;
-/** Shows pb.calls' ringing calls and the call this page is in, until unmount. */
-export declare function mountCallUI(calls: Calls, options?: CallUIOptions): CallUI;