@xenon-device-management/xenon 2.13.2 → 2.14.0

package/lib/public/assets/DeviceMosaicView-8J0oYqMM.js

@@ -1,2 +0,0 @@
-import{r as l,j as t,z as $e,w as Oe,X as k,v as Pe,e as Me,_ as Le,T as Be,$ as He}from"./index-DI1fGIyj.js";import{C as xe,M as We,A as ee,H as ze,b as Ue,S as be,a as Fe,I as Ve,e as Ke,u as Ge,f as Ye,h as ve,c as Xe,d as qe}from"./recording-group-store-WVM3hoXn.js";import{p as Je}from"./labels-C21SA4JG.js";import{C as Ze}from"./circle-check-zJU80_EF.js";import{f as Qe,A as et}from"./AnnotationOverlay-BXruClDk.js";import{V as tt}from"./video-off-CHp1KU_T.js";import{P as rt}from"./plus-CsIk10Cq.js";import{a as nt}from"./SegmentedControl-Zy7suhT5.js";import{v as st,a as ot,c as at,s as it,R as ct,b as lt,g as dt,d as le,e as ut}from"./recordings-BWe1ydXm.js";import{D as se}from"./download-WG6l7BgD.js";import{B as de}from"./button-fIW8owMI.js";import{C as ft}from"./clock-BtUprDsZ.js";import{a as ht}from"./page-header--aTyJXq6.js";import"./utils-CDN07tui.js";function pt(e){switch(e){case"automation":return"In automation";case"manual_other":return"Manual control by another user";case"manual_self":return"On your grid";case"recording_other_group":return"Recording in another group";default:return e?"Busy":null}}const ue=[{id:"ios",label:"iOS",match:e=>e==="ios"},{id:"android",label:"Android",match:e=>e==="android"},{id:"tvos",label:"tvOS",match:e=>e==="tvos"},{id:"androidtv",label:"Android TV",match:e=>e==="androidtv"||e==="android-tv"},{id:"other",label:"Other",match:()=>!0}],Y={available:"bg-[var(--color-success)]",inUse:"bg-[var(--color-warning)]",offline:"bg-[rgb(var(--rgb-offline))]"},mt=[["available",Y.available],["in use",Y.inUse],["offline",Y.offline]];function fe(e){return Je(e)}function gt({devices:e,inMosaic:n,onToggle:r,status:o="ready"}){const[h,j]=l.useState(""),[d,N]=l.useState({}),p=l.useMemo(()=>{const c=h.trim().toLowerCase();return c?e.filter(b=>b.udid.toLowerCase().includes(c)||(b.name??"").toLowerCase().includes(c)||(b.altName??"").toLowerCase().includes(c)||(b.platform??"").toLowerCase().includes(c)):e},[e,h]),w=l.useMemo(()=>{const c=ue.map(u=>({id:u.id,label:u.label,rows:[]})),b=u=>c.find((S,v)=>ue[v].match(u))??c[c.length-1];for(const u of p)b((u.platform??"").toLowerCase()).rows.push(u);return c.filter(u=>u.rows.length>0)},[p]);if(e.length===0){const c=o==="loading"?"Loading devices…":o==="error"?"Couldn’t load devices. Retrying…":"No devices online.";return t.jsx("div",{role:"status",className:"text-xs text-[var(--text-dim)] p-3",children:c})}return t.jsxs("div",{className:"flex flex-col gap-2",children:[t.jsxs("div",{className:"relative",children:[t.jsx($e,{"aria-hidden":!0,size:12,className:"absolute left-2 top-1/2 -translate-y-1/2 text-[var(--text-dim)]"}),t.jsx("input",{type:"text",value:h,placeholder:"Filter devices...",onChange:c=>j(c.target.value),className:"w-full pl-7 pr-2 py-1.5 text-xs rounded border border-[var(--border)] bg-transparent placeholder:text-[var(--text-dim)] focus:outline-none focus:border-[var(--color-info)]"})]}),w.map(c=>{const b=d[c.id];return t.jsxs("section",{className:"flex flex-col gap-1",children:[t.jsxs("button",{type:"button","aria-expanded":!b,onClick:()=>N(u=>({...u,[c.id]:!u[c.id]})),className:"flex items-center justify-between w-full text-[11px] text-[var(--text-dim)] hover:text-[rgb(var(--rgb-fg))] px-1 py-0.5",children:[t.jsxs("span",{className:"flex items-center gap-1.5",children:[t.jsx(Oe,{"aria-hidden":!0,size:12,className:`transition-transform ${b?"-rotate-90":"rotate-0"}`}),c.label]}),t.jsx("span",{children:c.rows.length})]}),!b&&t.jsx("ul",{className:"flex flex-col gap-1 text-sm",children:c.rows.map(u=>{const S=u.busyReason==="manual_self",v=n.has(u.udid),g=!!u.busy&&!S&&!v||!!u.offline,E=u.offline?"Offline":pt(u.busyReason),$=!g,C=[u.name??u.udid,u.platform&&fe(u.platform)].concat(g&&E?[E]:[]).filter(Boolean).join(", ");return t.jsx("li",{children:t.jsxs("button",{type:"button",disabled:g,draggable:!g,onDragStart:y=>{y.dataTransfer.effectAllowed="copy",y.dataTransfer.setData("application/x-xenon-udid",u.udid),y.dataTransfer.setData("text/plain",u.udid)},onClick:()=>r(u.udid),"aria-label":C,"aria-pressed":v,className:`w-full flex items-center gap-2 px-2 py-1.5 rounded text-left border transition-colors ${g?"opacity-60 cursor-not-allowed border-transparent":v?"border-[rgb(var(--rgb-accent)/0.4)] bg-[rgb(var(--rgb-accent)/0.05)] hover:bg-[rgb(var(--rgb-accent)/0.1)]":"border-transparent hover:border-[var(--border)] hover:bg-[var(--surface-2)]"}`,title:g?`${E} — release first`:v?"Click to remove from the grid":"Click to add to the grid (or drag to a cell)",children:[v?t.jsx(Ze,{"aria-hidden":!0,size:14,className:"shrink-0 text-[var(--color-accent-soft)]"}):t.jsx(xe,{"aria-hidden":!0,size:14,className:"shrink-0 text-[var(--text-dim)]"}),t.jsx("span",{"aria-hidden":!0,className:`inline-block w-1.5 h-1.5 rounded-full ${u.offline?Y.offline:$?Y.available:Y.inUse}`}),t.jsx("span",{className:"font-medium flex-1 truncate text-[13px]",children:u.name??u.udid}),u.platform&&t.jsx("span",{className:"text-[11px] px-1.5 py-0.5 rounded bg-[var(--surface-2)] text-[var(--text-dim)]",children:fe(u.platform)})]})},u.udid)})})]},c.id)}),h&&w.length===0&&t.jsxs("div",{className:"text-xs text-[var(--text-dim)] px-1 py-2",children:['No devices match "',h,'".']}),t.jsx("div",{className:"text-[10px] text-[var(--text-dim)] px-1 pt-2 flex items-center gap-3",children:mt.map(([c,b])=>t.jsxs("span",{className:"inline-flex items-center gap-1",children:[t.jsx("span",{className:`w-1.5 h-1.5 rounded-full inline-block ${b}`}),c]},c))})]})}const xt=[{id:"1",label:"1",icon:t.jsx(vt,{})},{id:"2x1",label:"2×1",icon:t.jsx(yt,{})},{id:"2x2",label:"2×2",icon:t.jsx(wt,{})},{id:"3x2",label:"3×2",icon:t.jsx(Nt,{})},{id:"auto",label:"Auto",icon:t.jsx(jt,{})}];function bt({value:e,onChange:n}){return t.jsx("div",{role:"tablist",className:"inline-flex border border-[var(--border)] rounded-md overflow-hidden text-xs bg-[rgb(var(--rgb-white)/0.02)]",children:xt.map(r=>{const o=e===r.id;return t.jsxs("button",{role:"tab","aria-selected":o,onClick:()=>n(r.id),className:`flex items-center gap-1.5 px-2.5 py-1.5 border-r border-[var(--border)] last:border-r-0 transition-colors ${o?"bg-[var(--surface-2)] text-[rgb(var(--rgb-fg))]":"text-[var(--text-dim)] hover:bg-[var(--surface-2)] hover:text-[rgb(var(--rgb-fg))]"}`,title:`Layout: ${r.label}`,children:[t.jsx("span",{className:"w-3.5 h-3.5 inline-flex items-center justify-center",children:r.icon}),t.jsx("span",{children:r.label})]},r.id)})})}function B(e){return t.jsx("rect",{rx:1.2,ry:1.2,fill:"currentColor",...e})}function vt(){return t.jsx("svg",{viewBox:"0 0 14 14",className:"w-3.5 h-3.5",children:B({x:2,y:2,width:10,height:10})})}function yt(){return t.jsxs("svg",{viewBox:"0 0 14 14",className:"w-3.5 h-3.5",children:[B({x:1.5,y:3,width:5,height:8}),B({x:7.5,y:3,width:5,height:8})]})}function wt(){return t.jsxs("svg",{viewBox:"0 0 14 14",className:"w-3.5 h-3.5",children:[B({x:1.5,y:1.5,width:5,height:5}),B({x:7.5,y:1.5,width:5,height:5}),B({x:1.5,y:7.5,width:5,height:5}),B({x:7.5,y:7.5,width:5,height:5})]})}function Nt(){return t.jsxs("svg",{viewBox:"0 0 14 14",className:"w-3.5 h-3.5",children:[B({x:1,y:1.5,width:3.3,height:5}),B({x:5.35,y:1.5,width:3.3,height:5}),B({x:9.7,y:1.5,width:3.3,height:5}),B({x:1,y:7.5,width:3.3,height:5}),B({x:5.35,y:7.5,width:3.3,height:5}),B({x:9.7,y:7.5,width:3.3,height:5})]})}function jt(){return t.jsxs("svg",{viewBox:"0 0 14 14",className:"w-3.5 h-3.5",fill:"none",stroke:"currentColor",strokeWidth:"1.4",children:[t.jsx("rect",{x:"2",y:"2",width:"10",height:"10",rx:"1.5"}),t.jsx("circle",{cx:"7",cy:"7",r:"1.5",fill:"currentColor",stroke:"none"})]})}function Et(e,n,r,o,h,j,d=!1){const N=Qe(r.width,r.height,j);let p=(e-r.left-N.left)/N.width,w=(n-r.top-N.top)/N.height;return!(p>=0&&p<=1&&w>=0&&w<=1)&&!d?null:(p=Math.min(1,Math.max(0,p)),w=Math.min(1,Math.max(0,w)),{x:Math.round(p*o),y:Math.round(w*h)})}const Rt=5e3;function St(e,n){if(e.httpStatus===404)return{ended:!0,startedAt:n};if(e.httpStatus!==200)return{ended:!1,startedAt:n};const r=e.body??{};return r.status!=="running"?{ended:!0,startedAt:n}:n&&r.startedAt&&r.startedAt!==n?{ended:!0,startedAt:n}:{ended:!1,startedAt:n??r.startedAt}}function Ct(e,n,r,o=Rt){const h=l.useRef(r);h.current=r,l.useEffect(()=>{if(!n)return;let j=!1,d=!1,N;const p=async()=>{if(!(d||j)){d=!0;try{const c=await fetch(`/xenon/api/control/${encodeURIComponent(e)}/stream/status`),b=c.ok?await c.json().catch(()=>{}):void 0;if(j)return;const u=St({httpStatus:c.status,body:b},N);N=u.startedAt,u.ended&&(j=!0,h.current())}catch{}finally{d=!1}}};p();const w=setInterval(p,o);return()=>{j=!0,clearInterval(w)}},[e,n,o])}const Tt=3,Dt=45e3,he=[2e3,5e3,1e4];function kt(e){const n=Math.max(0,Math.min(e,he.length-1));return he[n]}function At(e){return e<Tt}function pe(e){var r;const n=(e.lastError||"").toLowerCase();if(/did not find test app|not installed|webdriveragentrunner|applicationverification/.test(n))return"WebDriverAgent is not installed on this device. Install and trust WDA, then retry.";if(/unsupported ios version|manualpairingtunnelstart/.test(n))return"This device’s iOS version is not supported for live streaming on this host.";if(/port range for purpose 'tunnel' is exhausted/.test(n))return"No free tunnel ports on this host (12100–12199 are in use). Stop another iPhone’s preview, then retry.";if(/go-ios tunnel .* exited before it was ready/.test(n)){const o=(r=/exited before it was ready \([^)]*\): (.+)$/.exec(e.lastError||""))==null?void 0:r[1];return`The device tunnel stopped while starting${o?` (go-ios: ${o.trim()})`:""}. Retry; if it keeps failing, unlock the iPhone and check it trusts this Mac.`}return/go-ios tunnel .* came up on port/.test(n)?"The device tunnel started on an unexpected port and was stopped. Retry.":/econnrefused|econnreset|connection reset|tunnel/.test(n)?"Lost the connection to the device tunnel. Reconnect the device, then retry.":e.lastError&&e.lastError.trim()?e.lastError.trim():"We couldn’t start the live stream for this device."}function It(e){for(let n=0;n+4<e.length;n++){const r=e[n]===0&&e[n+1]===0&&e[n+2]===0&&e[n+3]===1,o=e[n]===0&&e[n+1]===0&&e[n+2]===1;if(!r&&!o)continue;const h=n+(r?4:3);if((e[h]&31)===7){const j=d=>d.toString(16).padStart(2,"0");return`avc1.${j(e[h+1])}${j(e[h+2])}${j(e[h+3])}`}}return"avc1.42e01e"}const _t=({wsUrl:e,onFatal:n,onReady:r,onFrameSize:o,className:h})=>{const j=l.useRef(null),d=l.useRef(n);d.current=n;const N=l.useRef(r);N.current=r;const p=l.useRef(o);return p.current=o,l.useEffect(()=>{var C;const w=window,c=j.current;if(typeof w.VideoDecoder>"u"||!c){(C=d.current)==null||C.call(d);return}const b=c.getContext("2d");let u=!1,S=!1,v=!0,g=0;const E=new w.VideoDecoder({output:y=>{var T,O;if(u){y.close();return}(c.width!==y.displayWidth||c.height!==y.displayHeight)&&(c.width=y.displayWidth,c.height=y.displayHeight,(T=p.current)==null||T.call(p,y.displayWidth,y.displayHeight)),b==null||b.drawImage(y,0,0),y.close(),v&&(v=!1,(O=N.current)==null||O.call(N))},error:()=>{var y;return(y=d.current)==null?void 0:y.call(d)}}),$=new WebSocket(e);return $.binaryType="arraybuffer",$.onerror=()=>{var y;return(y=d.current)==null?void 0:y.call(d)},$.onclose=()=>{var y;u||(y=d.current)==null||y.call(d)},$.onmessage=y=>{var m;const T=y.data,O=new DataView(T).getUint8(0),z=new Uint8Array(T,1);if(O===0){if(S)return;try{E.configure({codec:It(z),optimizeForLatency:!0}),S=!0}catch{(m=d.current)==null||m.call(d)}return}if(!(!S||E.state!=="configured"))try{E.decode(new w.EncodedVideoChunk({type:O===1?"key":"delta",timestamp:g,data:z})),g+=11111}catch{}},()=>{u=!0;try{$.close()}catch{}try{E.state!=="closed"&&E.close()}catch{}}},[e]),t.jsx("canvas",{ref:j,className:h,style:{width:"100%",height:"100%",objectFit:"contain",display:"block"}})};function $t(e,n,r){return(e==="android"||e==="androidtv"||e==="android-tv")&&n==="h264"&&r?"h264":"mjpeg"}const Ot=10,Pt=500;function Mt({udid:e,name:n,recordingId:r,annotateMode:o,shape:h,color:j,aspect:d="9 / 16",screenWidth:N,screenHeight:p,platform:w,onAnnotation:c,overlayAnnotations:b,onOverlayAnnotationsChange:u,onRemove:S}){const[v,g]=l.useState("connecting"),[E,$]=l.useState(),C=l.useCallback((a,f)=>{if(!(a>0)||!(f>0))return;const I=a/f;$(_=>_!==void 0&&Math.abs(_-I)<.001?_:I)},[]),[y,T]=l.useState(0),[O,z]=l.useState(null),m=l.useRef(0),s=l.useRef(null),[i,x]=l.useState(""),[R,H]=l.useState([]),[F,P]=l.useState(!1),U=l.useRef(null),W=l.useRef(null),M=w==="android"||w==="androidtv"||w==="android-tv",D=w==="ios"||w==="tvos";l.useEffect(()=>{let a=!1;if(r){z(null),g("connecting"),T(Date.now()),k.startStream(e).catch(()=>{});return}const f=typeof window.VideoDecoder<"u";return(async()=>{try{const I=encodeURIComponent(e),_=await fetch(`/xenon/api/control/${I}/stream/status`);if(!_.ok)return;const A=await _.json();if($t(w||"",A==null?void 0:A.type,f)!=="h264"||!(A!=null&&A.h264Path))return;const K=await fetch(`/xenon/api/control/${I}/stream/ticket`,{method:"POST"});if(!K.ok)return;const{ticket:L}=await K.json();if(a||!L)return;const Z=`${window.location.protocol==="https:"?"wss":"ws"}://${window.location.host}${A.h264Path}?ticket=${encodeURIComponent(L)}`;z(Z)}catch{}})(),()=>{a=!0}},[e,w,r]);const V=!o&&!!N&&!!p,re=(a,f,I,_=!1)=>Et(a,f,I,N,p,E,_),je=(a,f,I)=>{const _=Date.now()+Math.random(),A=a-I.left,K=f-I.top;H(L=>[...L,{id:_,x:A,y:K}]),window.setTimeout(()=>{H(L=>L.filter(q=>q.id!==_))},500)},Ee=a=>{if(!V||v==="unavailable"||a.button!==0)return;const f=a.currentTarget;f.focus(),re(a.clientX,a.clientY,f.getBoundingClientRect())&&(f.setPointerCapture(a.pointerId),W.current={startX:a.clientX,startY:a.clientY,startTime:Date.now(),rect:f.getBoundingClientRect()},je(a.clientX,a.clientY,W.current.rect))},Re=async a=>{var Z,ce;const f=W.current;if(W.current=null,!f||!V)return;try{a.currentTarget.releasePointerCapture(a.pointerId)}catch{}const I=a.clientX-f.startX,_=a.clientY-f.startY,A=Math.hypot(I,_),K=Date.now()-f.startTime,L=re(f.startX,f.startY,f.rect,!0),q=A<Ot;try{if(q&&K<Pt)await k.tap(e,L.x,L.y);else if(q)await((ce=(Z=k).touchAndHold)==null?void 0:ce.call(Z,e,L.x,L.y,K));else{const Q=re(a.clientX,a.clientY,f.rect,!0);await k.swipe(e,L.x,L.y,Q.x,Q.y)}}catch(Q){console.error(`[DeviceTile] gesture failed for ${e}`,Q)}},Se=()=>{W.current=null},Ce=async a=>{if(!V||v==="unavailable"||a.metaKey||a.ctrlKey||a.altKey)return;const f=a.key;try{if(f.length===1){a.preventDefault(),await k.typeText(e,f);return}if(f==="Backspace"){a.preventDefault(),M?await k.pressKey(e,67):await k.typeText(e,"\b");return}if(f==="Enter"){a.preventDefault(),M?await k.pressKey(e,66):await k.typeText(e,`
-`);return}if(f==="Tab"){a.preventDefault(),await k.typeText(e,"	");return}f==="Escape"&&M&&(a.preventDefault(),await k.pressKey(e,ee.BACK))}catch(I){console.error(`[DeviceTile] keystroke "${f}" failed for ${e}`,I)}},Te=()=>k.pressKey(e,M?ee.HOME:Ve.HOME).catch(a=>console.error(`[DeviceTile] home failed for ${e}`,a)),De=()=>k.pressKey(e,ee.BACK).catch(a=>console.error(`[DeviceTile] back failed for ${e}`,a)),ke=()=>k.pressKey(e,ee.APP_SWITCH).catch(a=>console.error(`[DeviceTile] app-switch failed for ${e}`,a)),Ae=async()=>{try{const a=await k.getScreenshot(e),f=(a==null?void 0:a.screenshot)??(a==null?void 0:a.value)??a;if(!f)return;const I=await fetch(`data:image/png;base64,${f}`).then(K=>K.blob()),_=URL.createObjectURL(I),A=document.createElement("a");A.href=_,A.download=`${n||e}-${Date.now()}.png`,document.body.appendChild(A),A.click(),A.remove(),setTimeout(()=>URL.revokeObjectURL(_),1e3)}catch(a){console.error(`[DeviceTile] screenshot failed for ${e}`,a)}};l.useEffect(()=>{console.log(`[DeviceTile] Rendering ${e} in state: ${v}`)},[e,v]);const Ie=`/xenon/api/control/${encodeURIComponent(e)}/stream?t=${y}`,ie=l.useCallback(async()=>{try{const a=await fetch(`/xenon/api/control/${encodeURIComponent(e)}/stream/status`);if(!a.ok)throw new Error(String(a.status));const f=await a.json();x(pe({lastError:f==null?void 0:f.lastError,status:f==null?void 0:f.status}))}catch{x(pe({}))}},[e]),ne=l.useCallback(()=>{const a=m.current;At(a)?(m.current=a+1,s.current&&clearTimeout(s.current),s.current=setTimeout(()=>{g("connecting"),T(Date.now())},kt(a))):(g("unavailable"),ie())},[ie]);l.useEffect(()=>{if(v!=="connecting")return;const a=setTimeout(ne,Dt);return()=>clearTimeout(a)},[v,y,ne]),Ct(e,v==="live"&&!O,()=>{console.warn(`[DeviceTile] MJPEG stream ended for ${e}; reconnecting`),g("connecting"),T(Date.now())}),l.useEffect(()=>()=>{s.current&&clearTimeout(s.current)},[]);const _e=()=>{s.current&&clearTimeout(s.current),m.current=0,x(""),g("connecting"),T(Date.now())},X=!!r,J=n||e.slice(0,16)+"…";return t.jsxs("div",{className:"flex items-stretch justify-center w-full h-full min-h-0 min-w-0 gap-2",children:[t.jsxs("div",{className:"theme-dark relative bg-[var(--black)] rounded-lg overflow-hidden border border-[var(--border)] group max-h-full max-w-full self-center",style:{aspectRatio:d,height:"100%"},children:[v==="connecting"&&t.jsxs("div",{role:"status","aria-live":"polite",className:"flex flex-col items-center justify-center gap-1 px-4 text-center bg-[rgb(var(--rgb-well)/0.8)] text-[var(--text-dim)] absolute inset-0 z-20 pointer-events-none",children:[t.jsx("div",{"aria-hidden":!0,className:"w-10 h-10 mb-3 border-4 border-[var(--border)] border-t-[var(--text-dim)] rounded-full animate-spin"}),t.jsx("div",{className:"font-semibold text-[var(--text)]",children:"Starting stream…"}),t.jsx("div",{className:"text-xs text-[var(--text-dim)] truncate max-w-full",children:J}),t.jsx("div",{className:"text-[11px] mt-3 text-[var(--text-dim)] leading-snug",children:D?"iPhone streams can take up to 20 seconds to start.":"Connecting to the device…"})]}),v==="unavailable"&&t.jsx("div",{role:"alert",className:"flex items-center justify-center bg-[var(--black)] text-[var(--text-dim)] absolute inset-0 z-20",children:t.jsxs("div",{className:"text-center p-6",children:[t.jsx(tt,{"aria-hidden":!0,size:36,className:"mx-auto mb-3 text-[var(--text-dim)]"}),t.jsx("div",{className:"font-semibold text-[var(--text)]",children:"Connection failed"}),t.jsx("p",{className:"text-xs mt-2 text-[var(--text-dim)] leading-relaxed max-w-[240px] mx-auto",children:i||"We couldn’t start the live stream for this device."}),t.jsx("button",{type:"button",className:"mt-5 text-sm font-semibold px-4 py-2 rounded bg-[var(--color-accent)] hover:bg-[var(--color-accent-strong)] text-[var(--color-on-accent)] transition-colors",onClick:_e,children:"Retry"})]})}),O?t.jsx(_t,{wsUrl:O,className:"absolute inset-0 w-full h-full object-contain bg-black select-none pointer-events-none",onReady:()=>g("live"),onFrameSize:C,onFatal:()=>{console.warn(`[DeviceTile] H.264 fatal for ${e}; falling back to MJPEG`),z(null),g("connecting"),T(Date.now())}}):t.jsx(We,{src:Ie,alt:J,className:"absolute inset-0 w-full h-full object-contain bg-black select-none pointer-events-none",draggable:!1,style:{opacity:v==="live"?1:0,transition:"opacity 0.3s ease-in-out"},onLoad:a=>{console.log(`[DeviceTile] Image LOADED for ${e}`),C(a.currentTarget.naturalWidth,a.currentTarget.naturalHeight),m.current=0,s.current&&clearTimeout(s.current),g("live")},onError:a=>{console.error(`[DeviceTile] Image ERROR for ${e}`,a),ne()}},y),V&&v!=="unavailable"&&t.jsx("div",{ref:U,className:`absolute inset-0 z-[35] touch-none outline-none ${F?"ring-2 ring-[rgb(var(--rgb-accent)/0.6)] ring-inset rounded-lg":""}`,tabIndex:0,onPointerDown:Ee,onPointerUp:Re,onPointerCancel:Se,onKeyDown:Ce,onFocus:()=>P(!0),onBlur:()=>P(!1)}),t.jsx("div",{className:"absolute inset-0 z-20 pointer-events-none overflow-hidden",children:R.map(a=>t.jsx("span",{className:"absolute block w-10 h-10 rounded-full border-2 border-[var(--color-accent-soft)] animate-ping",style:{left:a.x-20,top:a.y-20}},a.id))}),X&&t.jsx(et,{enabled:o,shape:h,color:j,committed:b,mediaAspect:E,onCommittedChange:u,onCommit:(a,f)=>c(r,a,f)}),X&&o&&v==="live"&&t.jsx("div",{className:"absolute top-3 left-14 right-3 z-30 flex justify-end pointer-events-none",children:t.jsx("span",{className:"px-2 py-0.5 rounded-sm bg-[var(--color-info)] text-white text-[10px] font-semibold shadow-lg whitespace-nowrap overflow-hidden text-ellipsis",children:"Annotating · Esc to stop"})}),X&&t.jsx("div",{className:"absolute top-3 left-3 z-30 pointer-events-none",children:t.jsx("span",{className:"px-2 py-0.5 rounded-sm bg-[var(--red-600)] text-white text-[9px] font-black shadow-lg",children:"REC"})}),t.jsxs("div",{className:"absolute top-3 left-3 z-30 flex flex-col gap-1.5 pointer-events-none opacity-0 group-hover:opacity-100 transition-opacity duration-150",children:[v==="live"&&t.jsx("span",{className:"px-2 py-0.5 rounded-sm bg-[var(--color-success)] text-[var(--color-on-success)] text-[11px] font-semibold shadow-lg w-fit",children:"Live"}),t.jsx("span",{className:"px-2 py-1 rounded bg-[rgb(var(--rgb-well)/0.8)] text-[var(--text)] text-[11px] font-medium backdrop-blur-md border border-[rgb(var(--rgb-fg)/0.1)] shadow-xl truncate max-w-[180px]",children:J})]})]}),t.jsx(Lt,{streamState:v,recording:X,isIOS:D,isAndroid:M,onClose:!X&&S?()=>S(e):void 0,sendHome:Te,sendBack:De,sendAppSwitch:ke,captureScreenshot:Ae,displayName:J})]})}const te="w-7 h-7 flex items-center justify-center rounded-md hover:bg-[var(--surface-2)] hover:text-[var(--text)] transition-colors";function Lt({streamState:e,recording:n,isIOS:r,isAndroid:o,onClose:h,sendHome:j,sendBack:d,sendAppSwitch:N,captureScreenshot:p,displayName:w}){const c=e==="live";return!h&&!c?null:t.jsxs("div",{className:"self-stretch w-9 flex flex-col items-center justify-between gap-1 py-2 rounded-lg bg-[var(--surface)] border border-[var(--border)] text-[var(--text-dim)]",children:[t.jsx("div",{className:"flex flex-col items-center gap-1",children:h&&t.jsx("button",{type:"button","aria-label":`Remove ${w}`,title:"Remove from the grid",onClick:h,className:"w-7 h-7 flex items-center justify-center rounded-md hover:bg-[rgb(var(--rgb-red)/0.15)] hover:text-[var(--color-danger)] transition-colors",children:t.jsx(Pe,{"aria-hidden":!0,size:16})})}),c&&t.jsxs("div",{className:"flex flex-col items-center gap-1.5 my-auto",children:[(o||r)&&t.jsx("button",{type:"button","aria-label":"Home",title:"Home",onClick:j,className:te,children:t.jsx(ze,{"aria-hidden":!0,size:15})}),o&&t.jsx("button",{type:"button","aria-label":"Back",title:"Back",onClick:d,className:te,children:t.jsx(Ue,{"aria-hidden":!0,size:16})}),o&&t.jsx("button",{type:"button","aria-label":"Recent apps",title:"Recent apps",onClick:N,className:te,children:t.jsx(be,{"aria-hidden":!0,size:13})})]}),c&&t.jsx("div",{className:"flex flex-col items-center gap-1",children:t.jsx("button",{type:"button","aria-label":"Screenshot",title:"Screenshot",onClick:p,className:te,children:t.jsx(Fe,{"aria-hidden":!0,size:15})})})]})}const Bt={1:"1fr","2x1":"1fr 1fr","2x2":"1fr 1fr","3x2":"1fr 1fr 1fr"},Ht={1:"1fr","2x1":"1fr","2x2":"1fr 1fr","3x2":"1fr 1fr"},Wt={1:1,"2x1":2,"2x2":4,"3x2":6};function zt({layout:e,tiles:n,annotateMode:r,shape:o,color:h,onAnnotation:j,overlayAnnotationsByRecording:d,onOverlayAnnotationsChange:N,onRemove:p,onDropDevice:w}){const c=Ke(e,n.length),b=Wt[c];n.length;const u=n.length,S=e==="auto"?Math.max(u,1):b,v=Math.max(0,S-u);return t.jsxs("div",{style:{display:"grid",gap:8,gridTemplateColumns:Bt[c],gridTemplateRows:Ht[c]},className:"h-full",children:[n.map(g=>t.jsx(Mt,{udid:g.udid,name:g.name,mjpegPort:g.mjpegPort,recordingId:g.recordingId,aspect:g.aspect,screenWidth:g.screenWidth,screenHeight:g.screenHeight,platform:g.platform,annotateMode:r,shape:o,color:h,overlayAnnotations:g.recordingId?d==null?void 0:d[g.recordingId]:void 0,onOverlayAnnotationsChange:g.recordingId&&N?E=>N(g.recordingId,E):void 0,onAnnotation:j,onRemove:p},g.udid)),Array.from({length:v},(g,E)=>t.jsx(Ut,{onDropDevice:w},`empty-${E}`))]})}function Ut({onDropDevice:e}){const[n,r]=l.useState(!1);return t.jsxs("div",{onDragOver:o=>{e&&(o.preventDefault(),o.dataTransfer.dropEffect="copy",n||r(!0))},onDragLeave:()=>r(!1),onDrop:o=>{if(r(!1),!e)return;o.preventDefault();const h=o.dataTransfer.getData("application/x-xenon-udid")||o.dataTransfer.getData("text/plain");h&&e(h)},className:`flex flex-col items-center justify-center gap-2 rounded-lg border border-dashed transition-colors ${n?"border-[rgb(var(--rgb-accent)/0.6)] bg-[rgb(var(--rgb-accent)/0.05)]":"border-[var(--border)] bg-[rgb(var(--rgb-fg)/0.02)]"} text-[var(--text-dim)] min-h-[120px]`,children:[t.jsx("div",{"aria-hidden":"true",className:`w-8 h-8 rounded-full flex items-center justify-center ${n?"bg-[rgb(var(--rgb-accent)/0.15)] text-[var(--color-accent-soft)]":"bg-[rgb(var(--rgb-fg)/0.05)] text-[rgb(var(--rgb-fg)/0.6)]"}`,children:t.jsx(rt,{size:16})}),t.jsx("div",{className:"text-xs font-medium",children:"Drag a device here"}),t.jsx("div",{className:"text-[10px] opacity-70",children:"or click one in the list"})]})}function Ft(e,n){return n==="starting"?"Starting…":e<=1?"Record":`Record ${e} devices`}const G={"aria-hidden":!0,size:14,className:"shrink-0"};function Vt({selectedUdids:e,onClearMarks:n}){const{state:r,dispatch:o}=Ge(),[h,j]=l.useState(()=>Date.now());l.useEffect(()=>{if(r.recordingPhase!=="recording"&&r.recordingPhase!=="stopping")return;j(Date.now());const m=window.setInterval(()=>j(Date.now()),250);return()=>window.clearInterval(m)},[r.recordingPhase]);const d=r.startedAt&&(r.recordingPhase==="recording"||r.recordingPhase==="stopping")?h-r.startedAt:0,N=r.recordingPhase==="starting"||r.recordingPhase==="stopping",p=r.recordingPhase==="idle"&&e.length>0&&!N,w=r.recordingPhase==="recording"||r.recording&&r.tiles.some(m=>!!m.recordingId),c=w&&!N,b=c,u=b&&r.annotateMode,S=!!r.groupId&&r.recordingPhase==="idle",v=e.length>1||r.downloadableVideoCount>1,g=S&&r.compositeEnabled,E=S&&!r.compositeEnabled&&(r.downloadableVideoCount===1||r.downloadableVideoCount===0&&e.length<=1),$=async()=>{var m;if(p){o({type:"SET_RECORDING_PHASE",phase:"starting"}),o({type:"SET_BANNER",banner:null});try{const s=await it(e);if(!((m=s.recordings)!=null&&m.length)){o({type:"SET_RECORDING_PHASE",phase:"idle"}),o({type:"SET_BANNER",banner:{tone:"error",message:"Recording did not start. Check that live preview is working, then try again."}});return}const i={};for(const R of s.recordings)i[R.udid]=R.id;const x=e.length-s.recordings.length;o({type:"START_RECORDING",groupId:s.groupId,startedAt:Date.now(),tileIds:i,compositeEnabled:s.compositeEnabled===!0}),x>0?o({type:"SET_BANNER",banner:{tone:"error",message:`Recording started on ${s.recordings.length} of ${e.length} devices (${x} failed).`}}):o({type:"SET_BANNER",banner:null})}catch(s){if(o({type:"SET_RECORDING_PHASE",phase:"idle"}),s instanceof ct)if(s.body.error==="device_busy"){const i=(s.body.busyDevices??[]).map(x=>`${x.udid} (${x.reason})`).join(", ");o({type:"SET_BANNER",banner:{tone:"error",message:`Cannot start — these devices are busy: ${i}`}})}else o({type:"SET_BANNER",banner:{tone:"error",message:`Server-wide recording cap reached (${s.body.active}/${s.body.limit}).`}});else o({type:"SET_BANNER",banner:{tone:"error",message:`Recording failed: ${s.message}`}})}}},C=async()=>{if(!(!r.groupId||r.recordingPhase!=="recording")){o({type:"SET_RECORDING_PHASE",phase:"stopping"});try{const m=await lt(r.groupId),s=(m.recordings??[]).filter(x=>x.status==="STOPPED"&&(x.sizeBytes??0)>=1024),i=(m.recordings??[]).filter(x=>x.status!=="STOPPED");o({type:"STOP_RECORDING",downloadableVideoCount:s.length,compositeEnabled:r.compositeEnabled}),s.length===0?o({type:"SET_BANNER",banner:{tone:"error",message:i.length>0?`Recording failed on ${i.length} device(s). Nothing to download.`:"Recording stopped but no playable video was produced."}}):i.length>0?o({type:"SET_BANNER",banner:{tone:"info",message:`${s.length} ready, ${i.length} failed. Download with the button above.`}}):o({type:"SET_BANNER",banner:{tone:"info",message:s.length===1?"Video ready. Download it with the button above.":`${s.length} videos ready. Download them with the button above.`}})}catch(m){o({type:"STOP_RECORDING"}),o({type:"SET_BANNER",banner:{tone:"error",message:`Stop failed: ${m.message}`}})}}},y=m=>{const s=m==="annotate";s&&!b||s!==r.annotateMode&&o({type:"SET_ANNOTATE_MODE",enabled:s})};l.useEffect(()=>{if(!r.annotateMode)return;const m=s=>{var x;if(s.key!=="Escape"||s.repeat)return;const i=s.target;i&&((x=i.closest)!=null&&x.call(i,"input, textarea, select")||i.isContentEditable)||o({type:"SET_ANNOTATE_MODE",enabled:!1})};return window.addEventListener("keydown",m),()=>window.removeEventListener("keydown",m)},[r.annotateMode,o]);const T=()=>{b&&n()},O=Object.values(r.overlayAnnotations).some(m=>((m==null?void 0:m.length)??0)>0),z=[{id:"RECT",label:"Rect"},{id:"CIRCLE",label:"Circle"},{id:"ARROW",label:"Arrow"},{id:"FREEHAND",label:"Draw"}];return t.jsxs("div",{className:"flex items-center gap-2 flex-wrap justify-end",children:[r.recordingPhase==="recording"||r.recordingPhase==="stopping"?t.jsxs("span",{className:"inline-flex items-center gap-1.5 px-2 py-1 rounded text-xs font-mono tabular-nums bg-[rgb(var(--rgb-red-600)/0.2)] text-[var(--red-200)] border border-[rgb(var(--rgb-red)/0.4)]",title:"Recording elapsed time",children:[t.jsx("span",{className:"inline-block w-1.5 h-1.5 rounded-full bg-[var(--red)] animate-pulse"}),"REC ",Ye(d),r.recordingPhase==="stopping"?" · Stopping…":""]}):t.jsxs("button",{type:"button",onClick:$,disabled:!p,title:e.length===0?"Add a device to the grid first":"Record every device on the grid",className:"inline-flex items-center gap-1.5 px-3 py-1.5 text-sm rounded bg-[var(--red-600)] text-white disabled:opacity-40 disabled:cursor-not-allowed light:disabled:bg-transparent light:disabled:text-[var(--text)] light:disabled:ring-1 light:disabled:ring-inset light:disabled:ring-[color:var(--border)]",children:[t.jsx(xe,{...G,size:10,fill:"currentColor"}),Ft(e.length,r.recordingPhase)]}),t.jsxs("button",{type:"button",onClick:C,disabled:!c,className:"inline-flex items-center gap-1.5 px-3 py-1.5 text-sm rounded border border-[var(--border)] disabled:opacity-40 disabled:cursor-not-allowed",children:[t.jsx(be,{...G,size:12}),r.recordingPhase==="stopping"?"Stopping…":"Stop"]}),t.jsx(nt,{size:"sm",value:r.annotateMode?"annotate":"interact",onChange:y,segments:[{value:"interact",label:"Interact",title:"Tap, swipe and type on the devices (Esc)",keyShortcuts:"Escape"},{value:"annotate",label:"Annotate",title:b?"Draw marks on the recording":"Start recording to annotate",disabled:!b}]}),w&&t.jsxs("div",{className:"flex items-center gap-1 ml-1 pl-2 border-l border-[var(--border)]",children:[z.map(m=>t.jsx("button",{type:"button",disabled:!u,"aria-pressed":r.shape===m.id,onClick:()=>o({type:"SET_SHAPE",shape:m.id}),className:`px-2 py-1 text-xs rounded border disabled:opacity-40 disabled:cursor-not-allowed ${r.shape===m.id?"bg-[var(--surface-2)] border-[var(--color-info)] text-[rgb(var(--rgb-fg))]":"border-[var(--border)] opacity-80 hover:opacity-100"}`,children:m.label},m.id)),t.jsx("input",{type:"color",value:r.color,disabled:!u,onChange:m=>o({type:"SET_COLOR",color:m.target.value}),title:"Annotation color","aria-label":"Annotation color",className:"w-7 h-7 rounded border border-[var(--border)] bg-transparent cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed"}),t.jsx("button",{type:"button",onClick:T,disabled:!b||!O,title:"Clear marks from the preview and the recording",className:"px-2 py-1 text-xs rounded border border-[var(--border)] hover:bg-[var(--surface-2)] disabled:opacity-40 disabled:cursor-not-allowed",children:"Clear marks"})]}),S&&E&&t.jsxs("a",{href:st(r.groupId),className:"ml-1 inline-flex items-center gap-1.5 px-3 py-1.5 text-sm rounded border border-[var(--border)] hover:bg-[var(--surface-2)]",download:!0,children:[t.jsx(se,{...G}),"Download video"]}),S&&!E&&t.jsxs("a",{href:ot(r.groupId),className:"ml-1 inline-flex items-center gap-1.5 px-3 py-1.5 text-sm rounded border border-[var(--border)] hover:bg-[var(--surface-2)]",download:`videos-${r.groupId}.zip`,title:"ZIP of mp4 files only (no JSON extras)",children:[t.jsx(se,{...G}),"Download ",v?"videos":"video"]}),g&&t.jsxs("a",{href:at(r.groupId),className:"inline-flex items-center gap-1.5 px-3 py-1.5 text-sm rounded border border-[var(--border)] hover:bg-[var(--surface-2)]",download:`side-by-side-${r.groupId}.mp4`,title:"All devices in one side-by-side video",children:[t.jsx(se,{...G}),"Side-by-side"]}),S&&r.groupId&&t.jsxs(Me,{to:`/recordings/${encodeURIComponent(r.groupId)}`,className:"inline-flex items-center gap-1.5 px-3 py-1.5 text-sm rounded border border-[var(--border)] hover:bg-[var(--surface-2)]",children:[t.jsx(Le,{...G}),"Open in Recordings"]})]})}function Kt({remainingSec:e,onContinue:n,onReleaseNow:r}){return t.jsx("div",{role:"dialog","aria-modal":"true","aria-labelledby":"idle-warning-title",className:"fixed inset-0 z-40 bg-black/60 flex items-center justify-center",children:t.jsxs("div",{className:"bg-[var(--bg)] border border-[var(--border)] rounded-lg w-full max-w-md p-6",children:[t.jsx("h3",{id:"idle-warning-title",className:"text-base font-semibold mb-2",children:"Are you still there?"}),t.jsxs("p",{className:"text-sm text-[var(--text-dim)] mb-4",children:["Your devices will be released in"," ",t.jsxs("span",{className:"text-[var(--text)] font-mono font-semibold",children:[e,"s"]})," due to inactivity. Click ",t.jsx("strong",{children:"Continue Session"})," to keep them locked."]}),t.jsxs("div",{className:"flex justify-end gap-2",children:[t.jsx("button",{type:"button",onClick:r,className:"h-9 px-3 rounded-md border border-[var(--border)] text-sm text-[var(--text-dim)] hover:text-[var(--text)]",children:"Release now"}),t.jsx("button",{type:"button",autoFocus:!0,onClick:n,className:"h-9 px-4 rounded-md bg-[var(--color-accent)] text-[var(--color-on-accent)] text-sm font-medium",children:"Continue session"})]})]})})}function Gt({message:e,onRestore:n,onDismiss:r}){return t.jsxs("div",{role:"status",className:"text-sm rounded border border-[var(--border)] bg-[var(--surface-2)] text-[var(--text)] px-3 py-2 flex items-center gap-2",children:[t.jsx(ft,{"aria-hidden":!0,size:14,className:"shrink-0 text-[var(--text-dim)]"}),t.jsx("span",{className:"flex-1",children:e}),n&&t.jsx(de,{variant:"tonal",size:"sm",onClick:n,children:"Restore devices"}),t.jsx(de,{variant:"ghost",size:"sm",onClick:r,children:"Dismiss"})]})}function ye(e){var n;return((n=e.marketingName)==null?void 0:n.trim())||e.name||e.udid}function we(e){if(!e)return"9 / 16";const n=Number(e.screenWidth),r=Number(e.screenHeight);if(Number.isFinite(n)&&Number.isFinite(r)&&n>0&&r>0)return`${n} / ${r}`;const o=(e.platform||"").toLowerCase();return o==="tvos"||o==="androidtv"||o==="android-tv"?"16 / 9":"9 / 16"}function oe(e){const n=Number(e.screenWidth),r=Number(e.screenHeight);return{udid:e.udid,name:ye(e),mjpegPort:0,aspect:we(e),screenWidth:Number.isFinite(n)&&n>0?n:void 0,screenHeight:Number.isFinite(r)&&r>0?r:void 0,platform:e.platform}}function Yt(e,n){return n?"blocked":e?"remove":"add"}function ae(e,n,r){return!r||!e?!1:e===`manual_${r}_${n}`}function Xt(e,n){if(!e.busy)return;const r=ve(e);return r?r.startsWith("manual_")?ae(r,e.udid,n)?"manual_self":"manual_other":"automation":"unknown"}function qt(e,n){return e.busy?ae(ve(e),e.udid,n):!1}function Jt(e,n){return e>0&&n==="idle"}function Zt(e,n,r){const o=[],h=[];for(const j of e){const d=n.find(p=>p.udid===j.udid),N=(d==null?void 0:d.name)||j.name||j.udid;d?d.offline?h.push({name:N,reason:"offline"}):d.busy&&!ae(d.session_id,d.udid,r)?h.push({name:N,reason:"in_use"}):o.push(d):h.push({name:N,reason:"gone"})}return{restore:o,skipped:h}}const Ne=(e,n)=>`${e} ${n}${e===1?"":"s"}`;function Qt(e,n){return`Released ${Ne(e,"device")} after ${n} minutes without activity.`}const er={in_use:"is now in use by someone else.",offline:"is offline.",gone:"is no longer connected."};function tr(e,n){return n.length===0?null:[e>0?`Restored ${Ne(e,"device")}.`:"No devices restored.",...n.map(o=>`${o.name} ${er[o.reason]}`)].join(" ")}function rr(){let e=Promise.resolve();return{enqueue(n){const r=e.then(n,n);return e=r.then(()=>{},()=>{}),r}}}const me=["mousemove","mousedown","keydown","touchstart","wheel"];function nr({idleAfterMs:e,warningSec:n,onWarning:r,onTimeout:o,enabled:h}){const[j,d]=l.useState(!1),[N,p]=l.useState(null),w=l.useRef(null),c=l.useRef(null),b=l.useRef(!1),u=l.useRef(r),S=l.useRef(o);u.current=r,S.current=o;function v(){w.current&&(clearTimeout(w.current),w.current=null),c.current&&(clearInterval(c.current),c.current=null)}function g(){b.current=!0,d(!0),p(n),u.current(n);let C=n;c.current=setInterval(()=>{C-=1,C<=0?(v(),b.current=!1,d(!1),p(null),S.current()):p(C)},1e3)}function E(){v(),b.current=!1,d(!1),p(null);const C=e-n*1e3;w.current=setTimeout(g,Math.max(0,C))}function $(){h&&E()}return l.useEffect(()=>{if(!h){v(),b.current=!1,d(!1),p(null);return}function C(){b.current||E()}return me.forEach(y=>window.addEventListener(y,C,{passive:!0})),E(),()=>{me.forEach(y=>window.removeEventListener(y,C)),v()}},[h,e,n]),{warning:j,remainingSec:N,reset:$}}const ge=5*60*1e3,sr=30;function or(e,n){return{udid:e.udid,name:ye(e),altName:e.name,platform:e.platform,busy:e.busy,busyReason:Xt(e,n),mjpegServerPort:e.mjpegServerPort,offline:!!e.offline}}function yr(){const[e,n]=Xe(),[r,o]=l.useState([]),[h,j]=l.useState("loading"),[d,N]=l.useState(0),[p,w]=l.useState(null),c=l.useRef(!1),b=l.useRef(rr());l.useEffect(()=>{let s=!1;return fetch("/xenon/api/auth/me",{credentials:"include"}).then(i=>i.ok?i.json():null).then(i=>{!s&&(i!=null&&i.userId)&&w(i.userId)}).catch(()=>{}),()=>{s=!0}},[]),l.useEffect(()=>{let s=!1;const i=async()=>{try{const R=await k.getDevices();if(s)return;o(Array.isArray(R)?R:[]),j("ready")}catch{s||j("error")}};i();const x=window.setInterval(i,5e3);return()=>{s=!0,window.clearInterval(x)}},[d]),l.useEffect(()=>{let s=!1;if(!(!p||c.current))return c.current=!0,(async()=>{var R;let i=[],x=[];try{const H=await k.getDevices();i=Array.isArray(H)?H:[];const F=i.filter(U=>qt(U,p));if(x=(await Promise.all(F.map(async U=>{try{const W=await fetch(`/xenon/api/control/${encodeURIComponent(U.udid)}/stream/status`);if(!W.ok)return null;const M=await W.json();return(M==null?void 0:M.status)==="running"?U:null}catch{return null}}))).filter(U=>U!==null).map(oe),s)return;x.length>0&&n({type:"SET_TILES",tiles:x})}catch{}try{const{serverNow:H,groups:F}=await dt(),P=F[0];if(s||!P)return;const U=new Set(x.map(D=>D.udid)),W=P.recordings.filter(D=>!U.has(D.udid)).map(D=>i.find(V=>V.udid===D.udid)).filter(D=>!!D).map(oe);W.length>0&&n({type:"SET_TILES",tiles:[...x,...W]});const M={};for(const D of P.annotations){let V;try{V=JSON.parse(D.geometry)}catch{continue}(M[R=D.recordingId]??(M[R]=[])).push({shape:D.shape,color:D.color,geometry:V,text:D.text??void 0})}n({type:"REHYDRATE_RECORDING",groupId:P.groupId,startedAt:Date.now()-(H-Date.parse(P.startedAt)),tileIds:Object.fromEntries(P.recordings.map(D=>[D.udid,D.id])),compositeEnabled:P.compositeEnabled,overlayAnnotations:M})}catch{}})(),()=>{s=!0}},[p,n]),l.useEffect(()=>{for(const s of e.tiles){if(s.screenWidth&&s.screenHeight)continue;const i=r.find(H=>H.udid===s.udid);if(!i)continue;const x=Number(i.screenWidth),R=Number(i.screenHeight);Number.isFinite(x)&&x>0&&Number.isFinite(R)&&R>0&&n({type:"PATCH_TILE_DIMS",udid:s.udid,screenWidth:x,screenHeight:R,aspect:we(i)})}},[r,e.tiles,n]);const u=l.useMemo(()=>new Set(e.tiles.map(s=>s.udid)),[e.tiles]),S=l.useMemo(()=>r.map(s=>or(s,p)),[r,p]),v=async s=>{n({type:"ADD_TILE",tile:oe(s)});const i=await k.startStream(s.udid).catch(()=>null);He(i)&&n({type:"REMOVE_TILE",udid:s.udid})},g=async s=>{const i=Yt(e.tiles.some(R=>R.udid===s),e.recording);if(i==="blocked"){n({type:"SET_ERROR_BANNER",message:"Stop recording before changing the devices on the grid."});return}if(i==="remove"){await E(s);return}const x=r.find(R=>R.udid===s);x&&await v(x)},E=async s=>{n({type:"REMOVE_TILE",udid:s});try{await fetch(`/xenon/api/control/${encodeURIComponent(s)}/stream/leave`,{method:"POST"})}catch{}N(i=>i+1)},$=(s,i,x)=>{if(!e.groupId)return;const R=e.groupId,H=e.startedAt?Date.now()-e.startedAt:0,F={recordingId:s,timecodeMs:H,shape:i.shape,geometry:JSON.stringify(i.geometry),color:i.color,text:i.text};b.current.enqueue(async()=>{try{return await le(R,x?{...F,image:x}:F)}catch(P){if(!x)throw P;return le(R,F)}}).catch(P=>n({type:"SET_ERROR_BANNER",message:`Annotation failed: ${P.message}`}))},C=()=>{if(!e.groupId)return;const s=e.groupId,i=e.startedAt?Date.now()-e.startedAt:0;n({type:"CLEAR_OVERLAY_ANNOTATIONS"}),b.current.enqueue(()=>ut(s,i)).catch(()=>n({type:"SET_ERROR_BANNER",message:"Couldn't clear marks from the recording. They will still appear in the video."}))},y=()=>{for(const s of e.tiles){const i=`/xenon/api/control/${encodeURIComponent(s.udid)}/stream/leave`;try{navigator.sendBeacon?navigator.sendBeacon(i):fetch(i,{method:"POST",keepalive:!0}).catch(()=>{})}catch{}}e.tiles.forEach(s=>n({type:"REMOVE_TILE",udid:s.udid}))},[T,O]=l.useState(null),z=async()=>{const s=T==null?void 0:T.tiles;if(!s)return;const i=Zt(s,r,p);for(const R of i.restore)await v(R);const x=tr(i.restore.length,i.skipped);O(x?{message:x,tiles:null}:null),N(R=>R+1)},m=nr({idleAfterMs:ge,warningSec:sr,enabled:Jt(e.tiles.length,e.recordingPhase),onWarning:()=>{},onTimeout:()=>{const s=e.tiles;y(),O({message:Qt(s.length,ge/6e4),tiles:s})}});return t.jsxs(qe.Provider,{value:{state:e,dispatch:n},children:[t.jsxs("div",{className:"flex flex-col h-full p-4 gap-3",children:[t.jsxs("header",{className:"flex items-center justify-between gap-3",children:[t.jsxs("div",{className:"flex items-center gap-3",children:[t.jsx(ht,{icon:Be,children:"Live devices"}),t.jsx(bt,{value:e.layout,onChange:s=>n({type:"SET_LAYOUT",layout:s})})]}),t.jsx(Vt,{selectedUdids:e.tiles.map(s=>s.udid),onClearMarks:C})]}),e.banner&&t.jsxs("div",{role:"alert",className:`text-sm rounded border px-3 py-2 flex items-center gap-2 ${e.banner.tone==="error"?"border-[rgb(var(--rgb-red)/0.4)] bg-[rgb(var(--rgb-red)/0.1)] text-[var(--red-100)]":"border-[rgb(var(--rgb-success)/0.4)] bg-[rgb(var(--rgb-success)/0.1)] text-[var(--text)]"}`,children:[t.jsx("span",{className:"flex-1",children:e.banner.message}),t.jsx("button",{type:"button",className:"text-xs opacity-80 hover:opacity-100",onClick:()=>n({type:"SET_BANNER",banner:null}),children:"Dismiss"})]}),T&&t.jsx(Gt,{message:T.message,onRestore:T.tiles&&!e.recording?z:void 0,onDismiss:()=>O(null)}),t.jsxs("div",{className:"grid grid-cols-[260px_1fr] gap-3 flex-1 min-h-0",children:[t.jsxs("aside",{className:"flex flex-col gap-2 border border-[var(--border)] rounded p-3 overflow-y-auto min-h-0",children:[t.jsxs("div",{className:"flex items-center justify-between",children:[t.jsx("span",{className:"text-xs text-[var(--text-dim)]",children:"Devices"}),t.jsx("button",{className:"text-xs underline opacity-70 hover:opacity-100",onClick:()=>N(s=>s+1),children:"Refresh"})]}),t.jsx(gt,{devices:S,inMosaic:u,onToggle:g,status:h}),t.jsx("p",{className:"mt-2 text-[11px] text-[var(--text-dim)] leading-relaxed",children:"Click a device to add it to the grid. Record captures every device on the grid; after Stop, download the video."})]}),t.jsx("main",{className:"border border-[var(--border)] rounded p-2 overflow-y-auto h-full min-h-0",children:t.jsx(zt,{layout:e.layout,tiles:e.tiles,annotateMode:e.annotateMode,shape:e.shape,color:e.color,overlayAnnotationsByRecording:e.overlayAnnotations,onOverlayAnnotationsChange:(s,i)=>n({type:"SET_OVERLAY_ANNOTATIONS",recordingId:s,annotations:i}),onAnnotation:$,onRemove:E,onDropDevice:g})})]})]}),m.warning&&m.remainingSec!==null&&t.jsx(Kt,{remainingSec:m.remainingSec,onContinue:m.reset,onReleaseNow:y})]})}export{yr as default};