@limrun/ui 0.1.0 → 0.3.0

package/README.md

@@ -1,6 +1,6 @@
 # Limrun React Components
 
-`@limbar/ui` contains the React components needed to embed Limrun instances in your web applications.
+`@limrun/ui` contains the React components needed to embed Limrun instances in your web applications.
 
 See [examples](../../examples/) to see how it can be used.
 

package/dist/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('./index.css');const w=require("react/jsx-runtime"),y=require("react");function ne(E){var a,D,i="";if(typeof E=="string"||typeof E=="number")i+=E;else if(typeof E=="object")if(Array.isArray(E)){var l=E.length;for(a=0;a<l;a++)E[a]&&(D=ne(E[a]))&&(i&&(i+=" "),i+=D)}else for(D in E)E[D]&&(i&&(i+=" "),i+=D);return i}function _e(){for(var E,a,D=0,i="",l=arguments.length;D<l;D++)(E=arguments[D])&&(a=ne(E))&&(i&&(i+=" "),i+=a);return i}const j={INJECT_KEYCODE:0,INJECT_TOUCH_EVENT:2,SET_CLIPBOARD:9},b={ACTION_DOWN:0,ACTION_UP:1,ACTION_MOVE:2,ACTION_CANCEL:3,BUTTON_PRIMARY:1},e={ACTION_DOWN:0,ACTION_UP:1,META_NONE:0,META_SHIFT_ON:1,META_ALT_ON:2,META_CTRL_ON:4096,META_META_ON:65536,KEYCODE_0:7,KEYCODE_1:8,KEYCODE_2:9,KEYCODE_3:10,KEYCODE_4:11,KEYCODE_5:12,KEYCODE_6:13,KEYCODE_7:14,KEYCODE_8:15,KEYCODE_9:16,DPAD_UP:19,DPAD_DOWN:20,DPAD_LEFT:21,DPAD_RIGHT:22,KEYCODE_A:29,KEYCODE_B:30,KEYCODE_C:31,KEYCODE_D:32,KEYCODE_E:33,KEYCODE_F:34,KEYCODE_G:35,KEYCODE_H:36,KEYCODE_I:37,KEYCODE_J:38,KEYCODE_K:39,KEYCODE_L:40,KEYCODE_M:41,KEYCODE_N:42,KEYCODE_O:43,KEYCODE_P:44,KEYCODE_Q:45,KEYCODE_R:46,KEYCODE_S:47,KEYCODE_T:48,KEYCODE_U:49,KEYCODE_V:50,KEYCODE_W:51,KEYCODE_X:52,KEYCODE_Y:53,KEYCODE_Z:54,KEYCODE_COMMA:55,KEYCODE_PERIOD:56,KEYCODE_ALT_LEFT:57,KEYCODE_ALT_RIGHT:58,KEYCODE_SHIFT_LEFT:59,KEYCODE_SHIFT_RIGHT:60,KEYCODE_TAB:61,KEYCODE_SPACE:62,ENTER:66,DEL:67,KEYCODE_GRAVE:68,KEYCODE_MINUS:69,KEYCODE_EQUALS:70,KEYCODE_LEFT_BRACKET:71,KEYCODE_RIGHT_BRACKET:72,KEYCODE_BACKSLASH:73,KEYCODE_SEMICOLON:74,KEYCODE_APOSTROPHE:75,KEYCODE_SLASH:76,MENU:82,KEYCODE_PAGE_UP:92,KEYCODE_PAGE_DOWN:93,KEYCODE_ESCAPE:111,FORWARD_DEL:112,KEYCODE_CTRL_LEFT:113,KEYCODE_CTRL_RIGHT:114,KEYCODE_META_LEFT:117,KEYCODE_META_RIGHT:118,KEYCODE_MOVE_HOME:122,KEYCODE_MOVE_END:123,KEYCODE_INSERT:124,KEYCODE_F1:131,KEYCODE_F2:132,KEYCODE_F3:133,KEYCODE_F4:134,KEYCODE_F5:135,KEYCODE_F6:136,KEYCODE_F7:137,KEYCODE_F8:138,KEYCODE_F9:139,KEYCODE_F10:140,KEYCODE_F11:141,KEYCODE_F12:142,KEYCODE_NUMPAD_0:144,KEYCODE_NUMPAD_1:145,KEYCODE_NUMPAD_2:146,KEYCODE_NUMPAD_3:147,KEYCODE_NUMPAD_4:148,KEYCODE_NUMPAD_5:149,KEYCODE_NUMPAD_6:150,KEYCODE_NUMPAD_7:151,KEYCODE_NUMPAD_8:152,KEYCODE_NUMPAD_9:153,KEYCODE_NUMPAD_DIVIDE:154,KEYCODE_NUMPAD_MULTIPLY:155,KEYCODE_NUMPAD_SUBTRACT:156,KEYCODE_NUMPAD_ADD:157,KEYCODE_NUMPAD_DOT:158,KEYCODE_NUMPAD_COMMA:159,KEYCODE_NUMPAD_ENTER:160,KEYCODE_NUMPAD_EQUALS:161},re={KeyA:e.KEYCODE_A,KeyB:e.KEYCODE_B,KeyC:e.KEYCODE_C,KeyD:e.KEYCODE_D,KeyE:e.KEYCODE_E,KeyF:e.KEYCODE_F,KeyG:e.KEYCODE_G,KeyH:e.KEYCODE_H,KeyI:e.KEYCODE_I,KeyJ:e.KEYCODE_J,KeyK:e.KEYCODE_K,KeyL:e.KEYCODE_L,KeyM:e.KEYCODE_M,KeyN:e.KEYCODE_N,KeyO:e.KEYCODE_O,KeyP:e.KEYCODE_P,KeyQ:e.KEYCODE_Q,KeyR:e.KEYCODE_R,KeyS:e.KEYCODE_S,KeyT:e.KEYCODE_T,KeyU:e.KEYCODE_U,KeyV:e.KEYCODE_V,KeyW:e.KEYCODE_W,KeyX:e.KEYCODE_X,KeyY:e.KEYCODE_Y,KeyZ:e.KEYCODE_Z,Digit0:e.KEYCODE_0,Digit1:e.KEYCODE_1,Digit2:e.KEYCODE_2,Digit3:e.KEYCODE_3,Digit4:e.KEYCODE_4,Digit5:e.KEYCODE_5,Digit6:e.KEYCODE_6,Digit7:e.KEYCODE_7,Digit8:e.KEYCODE_8,Digit9:e.KEYCODE_9,Backquote:e.KEYCODE_GRAVE,Minus:e.KEYCODE_MINUS,Equal:e.KEYCODE_EQUALS,BracketLeft:e.KEYCODE_LEFT_BRACKET,BracketRight:e.KEYCODE_RIGHT_BRACKET,Backslash:e.KEYCODE_BACKSLASH,Semicolon:e.KEYCODE_SEMICOLON,Quote:e.KEYCODE_APOSTROPHE,Comma:e.KEYCODE_COMMA,Period:e.KEYCODE_PERIOD,Slash:e.KEYCODE_SLASH,Space:e.KEYCODE_SPACE,Tab:e.KEYCODE_TAB,Escape:e.KEYCODE_ESCAPE,ArrowUp:e.DPAD_UP,ArrowDown:e.DPAD_DOWN,ArrowLeft:e.DPAD_LEFT,ArrowRight:e.DPAD_RIGHT,Enter:e.ENTER,Backspace:e.DEL,Delete:e.FORWARD_DEL,Home:e.KEYCODE_MOVE_HOME,End:e.KEYCODE_MOVE_END,PageUp:e.KEYCODE_PAGE_UP,PageDown:e.KEYCODE_PAGE_DOWN,Insert:e.KEYCODE_INSERT,F1:e.KEYCODE_F1,F2:e.KEYCODE_F2,F3:e.KEYCODE_F3,F4:e.KEYCODE_F4,F5:e.KEYCODE_F5,F6:e.KEYCODE_F6,F7:e.KEYCODE_F7,F8:e.KEYCODE_F8,F9:e.KEYCODE_F9,F10:e.KEYCODE_F10,F11:e.KEYCODE_F11,F12:e.KEYCODE_F12,ShiftLeft:e.KEYCODE_SHIFT_LEFT,ShiftRight:e.KEYCODE_SHIFT_RIGHT,ControlLeft:e.KEYCODE_CTRL_LEFT,ControlRight:e.KEYCODE_CTRL_RIGHT,AltLeft:e.KEYCODE_ALT_LEFT,AltRight:e.KEYCODE_ALT_RIGHT,MetaLeft:e.KEYCODE_META_LEFT,MetaRight:e.KEYCODE_META_RIGHT,ContextMenu:e.MENU,Numpad0:e.KEYCODE_NUMPAD_0,Numpad1:e.KEYCODE_NUMPAD_1,Numpad2:e.KEYCODE_NUMPAD_2,Numpad3:e.KEYCODE_NUMPAD_3,Numpad4:e.KEYCODE_NUMPAD_4,Numpad5:e.KEYCODE_NUMPAD_5,Numpad6:e.KEYCODE_NUMPAD_6,Numpad7:e.KEYCODE_NUMPAD_7,Numpad8:e.KEYCODE_NUMPAD_8,Numpad9:e.KEYCODE_NUMPAD_9,NumpadDivide:e.KEYCODE_NUMPAD_DIVIDE,NumpadMultiply:e.KEYCODE_NUMPAD_MULTIPLY,NumpadSubtract:e.KEYCODE_NUMPAD_SUBTRACT,NumpadAdd:e.KEYCODE_NUMPAD_ADD,NumpadDecimal:e.KEYCODE_NUMPAD_DOT,NumpadComma:e.KEYCODE_NUMPAD_COMMA,NumpadEnter:e.KEYCODE_NUMPAD_ENTER,NumpadEqual:e.KEYCODE_NUMPAD_EQUALS};function De(E,a,D,i,l,Y,o=1,c=0,s=0){const u=new ArrayBuffer(32),N=new DataView(u);let d=0;return N.setUint8(d,j.INJECT_TOUCH_EVENT),d+=1,N.setUint8(d,E),d+=1,N.setBigInt64(d,BigInt(a)),d+=8,N.setInt32(d,Math.round(l),!0),d+=4,N.setInt32(d,Math.round(Y),!0),d+=4,N.setUint16(d,D,!0),d+=2,N.setUint16(d,i,!0),d+=2,N.setInt16(d,Math.round(o*65535),!0),d+=2,N.setInt32(d,c,!0),d+=4,N.setInt32(d,s,!0),u}function Ce(E,a=!0){const i=new TextEncoder().encode(E),l=new ArrayBuffer(14+i.length),Y=new DataView(l);let o=0;return Y.setUint8(o,j.SET_CLIPBOARD),o+=1,Y.setBigInt64(o,BigInt(0),!1),o+=8,Y.setUint8(o,a?1:0),o+=1,Y.setUint32(o,i.length,!1),o+=4,new Uint8Array(l,o).set(i),l}function W(E,a,D=0,i=0){const l=new ArrayBuffer(14),Y=new DataView(l);let o=0;return Y.setUint8(o,j.INJECT_KEYCODE),o+=1,Y.setUint8(o,E),o+=1,Y.setInt32(o,a,!0),o+=4,Y.setInt32(o,D,!0),o+=4,Y.setInt32(o,i,!0),l}const T=(...E)=>{window.debugRemoteControl&&console.log(...E)},f=(...E)=>{window.debugRemoteControl&&console.warn(...E)};function Oe(E){const a=E.code,D=re[a];if(!D)return f(`Unknown event.code: ${a}, key: ${E.key}`),null;let i=e.META_NONE;const l=a>="KeyA"&&a<="KeyZ",Y=E.getModifierState("CapsLock"),o=E.shiftKey;let c=o;return l&&(c=o!==Y),c&&(i|=e.META_SHIFT_ON),E.ctrlKey&&(i|=e.META_CTRL_ON),E.altKey&&(i|=e.META_ALT_ON),E.metaKey&&(i|=e.META_META_ON),{keycode:D,metaState:i}}const Ke=y.forwardRef(({className:E,url:a,token:D,sessionId:i,openUrl:l},Y)=>{const o=y.useRef(null),c=y.useRef(null),s=y.useRef(null),u=y.useRef(null),[N,d]=y.useState(!1),I=y.useRef(void 0),S=y.useRef(new Map),P=y.useRef(new Map),p=y.useRef(new Map),m=y.useMemo(()=>i||Math.random().toString(36).substring(2,15)+Math.random().toString(36).substring(2,15),[i]),C=r=>{T(r)},U=r=>{!u.current||u.current.readyState!=="open"||u.current.send(r)},M=r=>{if(r.preventDefault(),r.stopPropagation(),!u.current||u.current.readyState!=="open"||!o.current)return;const O=o.current,t=O.getBoundingClientRect(),n=O.videoWidth,_=O.videoHeight;if(!n||!_)return;const g=(A,K,k,h)=>{const F=t.width,v=t.height,$=n/_,se=F/v;let H=F,B=v;$>se?B=F/$:H=v*$;const ae=(F-H)/2,de=(v-B)/2,V=K-t.left-ae,G=k-t.top-de,x=V>=0&&V<=H&&G>=0&&G<=B;let J=0,q=0;x&&(J=Math.max(0,Math.min(n,V/H*n)),q=Math.max(0,Math.min(_,G/B*_)));let L=null,R=null,ue=1;const ee=b.BUTTON_PRIMARY;switch(h){case"down":x?(L=b.ACTION_DOWN,R={x:J,y:q},p.current.set(A,R),A===-1&&o.current?.focus()):p.current.delete(A);break;case"move":p.current.has(A)&&x&&(L=b.ACTION_MOVE,R={x:J,y:q},p.current.set(A,R));break;case"up":case"cancel":p.current.has(A)&&(L=h==="cancel"?b.ACTION_CANCEL:b.ACTION_UP,R=p.current.get(A),p.current.delete(A));break}if(L!==null&&R!==null){const te=De(L,A,n,_,R.x,R.y,ue,ee,ee);te&&U(te)}else(h==="up"||h==="cancel")&&p.current.delete(A)};if("touches"in r){const A=r.changedTouches;let K;switch(r.type){case"touchstart":K="down";break;case"touchmove":K="move";break;case"touchend":K="up";break;case"touchcancel":K="cancel";break;default:return}for(let k=0;k<A.length;k++){const h=A[k];g(h.identifier,h.clientX,h.clientY,K)}}else{let K=null;switch(r.type){case"mousedown":r.button===0&&(K="down");break;case"mousemove":p.current.has(-1)&&(K="move");break;case"mouseup":r.button===0&&(K="up");break;case"mouseleave":p.current.has(-1)&&(K="up");break}K&&g(-1,r.clientX,r.clientY,K)}},Q=r=>{if(r.preventDefault(),r.stopPropagation(),T("Keyboard event:",{type:r.type,key:r.key,keyCode:r.keyCode,code:r.code,target:r.target.tagName,focused:document.activeElement===o.current}),document.activeElement!==o.current){f("Video element not focused, skipping keyboard event");return}if(!u.current||u.current.readyState!=="open"){f("Data channel not ready for keyboard event:",u.current?.readyState);return}if(r.type==="keydown"){if(r.key.toLowerCase()==="v"&&(r.metaKey||r.ctrlKey)){T("Paste shortcut detected"),navigator.clipboard.readText().then(t=>{if(t){T("Pasting text via SET_CLIPBOARD:",t.substring(0,20)+(t.length>20?"...":""));const n=Ce(t,!0);U(n)}}).catch(t=>{console.error("Failed to read clipboard contents: ",t)});return}if(r.key.toLowerCase()==="m"&&(r.metaKey||r.ctrlKey)){T("Menu shortcut detected");const t=W(e.ACTION_DOWN,e.MENU,0,e.META_NONE);U(t);const n=W(e.ACTION_UP,e.MENU,0,e.META_NONE);U(n);return}}const O=Oe(r);if(O){const{keycode:t,metaState:n}=O,_=r.type==="keydown"?e.ACTION_DOWN:e.ACTION_UP;T(`Sending Keycode: key=${r.key}, code=${t}, action=${_}, meta=${n}`);const g=W(_,t,0,n);U(g)}else T(`Ignoring unhandled key event: type=${r.type}, key=${r.key}`)},oe=()=>{c.current&&c.current.readyState===WebSocket.OPEN&&c.current.send(JSON.stringify({type:"keepAlive",sessionId:m}))},X=()=>{I.current&&window.clearInterval(I.current),I.current=window.setInterval(oe,1e4)},Z=()=>{I.current&&(window.clearInterval(I.current),I.current=void 0)},z=()=>{document.hidden?Z():X()},ce=async()=>{try{c.current=new WebSocket(`${a}?token=${D}`),c.current.onerror=t=>{C("WebSocket error: "+t)},c.current.onclose=()=>{C("WebSocket closed")},await new Promise((t,n)=>{c.current&&(c.current.onopen=t,setTimeout(()=>n(new Error("WebSocket connection timeout")),5e3))});const O=await new Promise((t,n)=>{const _=setTimeout(()=>n(new Error("RTCConfiguration timeout")),5e3),g=A=>{try{const K=JSON.parse(A.data);K.type==="rtcConfiguration"&&(clearTimeout(_),c.current?.removeEventListener("message",g),t(K.rtcConfiguration))}catch(K){console.error("Error handling RTC configuration:",K),n(K)}};c.current?.addEventListener("message",g),c.current?.send(JSON.stringify({type:"requestRtcConfiguration",sessionId:m}))});if(s.current=new RTCPeerConnection(O),s.current.addTransceiver("audio",{direction:"recvonly"}),s.current.addTransceiver("video",{direction:"recvonly"}),u.current=s.current.createDataChannel("control",{ordered:!0,negotiated:!0,id:1}),u.current.onopen=()=>{if(C("Control channel opened"),c.current&&(c.current.send(JSON.stringify({type:"requestFrame",sessionId:m})),l))try{const t=decodeURIComponent(l);C("Opening URL"),c.current.send(JSON.stringify({type:"openUrl",url:t,sessionId:m}))}catch(t){console.error({error:t},"Error decoding URL, falling back to the original URL"),c.current.send(JSON.stringify({type:"openUrl",url:l,sessionId:m}))}},u.current.onclose=()=>{C("Control channel closed")},u.current.onerror=t=>{console.error("Control channel error:",t),C("Control channel error: "+t)},s.current.onconnectionstatechange=()=>{C("Connection state: "+s.current?.connectionState),d(s.current?.connectionState==="connected")},s.current.oniceconnectionstatechange=()=>{C("ICE state: "+s.current?.iceConnectionState)},s.current.ontrack=t=>{C("Received remote track: "+t.track.kind),t.track.kind==="video"&&o.current&&(T(`[${new Date().toISOString()}] Video track received:`,t.track),o.current.srcObject=t.streams[0])},s.current.onicecandidate=t=>{if(t.candidate&&c.current){const n={type:"candidate",candidate:t.candidate.candidate,sdpMid:t.candidate.sdpMid,sdpMLineIndex:t.candidate.sdpMLineIndex,sessionId:m};c.current.send(JSON.stringify(n)),C("Sent ICE candidate")}else C("ICE candidate gathering completed")},c.current.onmessage=async t=>{let n;try{n=JSON.parse(t.data)}catch(_){f("Error parsing message:",_);return}switch(C("Received: "+n.type),n.type){case"answer":if(!s.current){C("No peer connection, skipping answer");break}await s.current.setRemoteDescription(new RTCSessionDescription({type:"answer",sdp:n.sdp})),C("Set remote description");break;case"candidate":if(!s.current){C("No peer connection, skipping candidate");break}await s.current.addIceCandidate(new RTCIceCandidate({candidate:n.candidate,sdpMid:n.sdpMid,sdpMLineIndex:n.sdpMLineIndex})),C("Added ICE candidate");break;case"screenshot":if(typeof n.id!="string"||typeof n.dataUri!="string"){f("Received invalid screenshot success message:",n);break}const _=S.current.get(n.id);if(!_){f(`Received screenshot data for unknown or handled id: ${n.id}`);break}T(`Received screenshot data for id ${n.id}`),_({dataUri:n.dataUri}),S.current.delete(n.id),P.current.delete(n.id);break;case"screenshotError":if(typeof n.id!="string"||typeof n.message!="string"){f("Received invalid screenshot error message:",n);break}const g=P.current.get(n.id);if(!g){f(`Received screenshot error for unknown or handled id: ${n.id}`);break}f(`Received screenshot error for id ${n.id}: ${n.message}`),g(new Error(n.message)),S.current.delete(n.id),P.current.delete(n.id);break;default:f(`Received unhandled message type: ${n.type}`,n);break}},s.current){const t=await s.current.createOffer({offerToReceiveVideo:!0,offerToReceiveAudio:!1});await s.current.setLocalDescription(t),c.current&&c.current.send(JSON.stringify({type:"offer",sdp:t.sdp,sessionId:m})),C("Sent offer")}}catch(r){C("Error: "+r)}},Ee=()=>{c.current&&(c.current.close(),c.current=null),s.current&&(s.current.close(),s.current=null),o.current&&(o.current.srcObject=null),u.current&&(u.current.close(),u.current=null),d(!1),C("Stopped")};y.useEffect(()=>(ce(),document.hidden||X(),document.addEventListener("visibilitychange",z),()=>{Z(),Ee(),document.removeEventListener("visibilitychange",z)}),[a,D,i]);const ie=()=>{o.current&&o.current.focus()};return y.useImperativeHandle(Y,()=>({openUrl:r=>{if(!c.current||c.current.readyState!==WebSocket.OPEN){f("WebSocket not open, cannot send open_url command via ref.");return}try{const O=decodeURIComponent(r);C("Opening URL"),c.current.send(JSON.stringify({type:"openUrl",url:O,sessionId:m}))}catch(O){f("Error decoding or sending URL via ref:",{error:O,url:r}),c.current.send(JSON.stringify({type:"openUrl",url:r,sessionId:m}))}},sendKeyEvent:r=>{if(!u.current||u.current.readyState!=="open"){f("Data channel not ready for imperative key command:",u.current?.readyState);return}const O=re[r.code];if(!O){f(`Unknown event.code for imperative command: ${r.code}`);return}let t=e.META_NONE;r.shiftKey&&(t|=e.META_SHIFT_ON),r.altKey&&(t|=e.META_ALT_ON),r.ctrlKey&&(t|=e.META_CTRL_ON),r.metaKey&&(t|=e.META_META_ON);const n=r.type==="keydown"?e.ACTION_DOWN:e.ACTION_UP;T(`Sending Imperative Key Command: code=${r.code}, keycode=${O}, action=${n}, meta=${t}`);const _=W(n,O,0,t);_&&U(_)},screenshot:()=>new Promise((r,O)=>{if(!c.current||c.current.readyState!==WebSocket.OPEN)return f("WebSocket not open, cannot send screenshot command."),O(new Error("WebSocket is not connected or connection is not open."));const t=`ui-ss-${Date.now()}-${Math.random().toString(36).substring(2,9)}`,n={type:"screenshot",id:t};S.current.set(t,r),P.current.set(t,O),T("Sending screenshot request:",n);try{c.current.send(JSON.stringify(n))}catch(_){f("Failed to send screenshot request immediately:",_),S.current.delete(t),P.current.delete(t),O(_);return}setTimeout(()=>{S.current.has(t)&&(f(`Screenshot request timed out for id ${t}`),P.current.get(t)?.(new Error("Screenshot request timed out")),S.current.delete(t),P.current.delete(t))},3e4)})})),w.jsxs("div",{className:_e("rc-container",E),style:{touchAction:"none"},onMouseDown:M,onMouseMove:M,onMouseUp:M,onMouseLeave:M,onTouchStart:M,onTouchMove:M,onTouchEnd:M,onTouchCancel:M,children:[w.jsx("video",{ref:o,className:"rc-video",autoPlay:!0,playsInline:!0,muted:!0,tabIndex:0,style:{outline:"none",pointerEvents:"none"},onKeyDown:Q,onKeyUp:Q,onClick:ie,onFocus:()=>{o.current&&(o.current.style.outline="none")},onBlur:()=>{o.current&&(o.current.style.outline="none")}}),!N&&w.jsxs("div",{className:"rc-placeholder-wrapper",children:[w.jsx("div",{className:"rc-spinner"}),w.jsx("p",{className:"rc-placeholder-content",children:"Connecting..."})]})]})});exports.RemoteControl=Ke;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('./index.css');const b=require("react/jsx-runtime"),N=require("react");function ne(i){var u,D,s="";if(typeof i=="string"||typeof i=="number")s+=i;else if(typeof i=="object")if(Array.isArray(i)){var l=i.length;for(u=0;u<l;u++)i[u]&&(D=ne(i[u]))&&(s&&(s+=" "),s+=D)}else for(D in i)i[D]&&(s&&(s+=" "),s+=D);return s}function _e(){for(var i,u,D=0,s="",l=arguments.length;D<l;D++)(i=arguments[D])&&(u=ne(i))&&(s&&(s+=" "),s+=u);return s}const j={INJECT_KEYCODE:0,INJECT_TOUCH_EVENT:2,SET_CLIPBOARD:9},F={ACTION_DOWN:0,ACTION_UP:1,ACTION_MOVE:2,ACTION_CANCEL:3,BUTTON_PRIMARY:1},e={ACTION_DOWN:0,ACTION_UP:1,META_NONE:0,META_SHIFT_ON:1,META_ALT_ON:2,META_CTRL_ON:4096,META_META_ON:65536,KEYCODE_0:7,KEYCODE_1:8,KEYCODE_2:9,KEYCODE_3:10,KEYCODE_4:11,KEYCODE_5:12,KEYCODE_6:13,KEYCODE_7:14,KEYCODE_8:15,KEYCODE_9:16,DPAD_UP:19,DPAD_DOWN:20,DPAD_LEFT:21,DPAD_RIGHT:22,KEYCODE_A:29,KEYCODE_B:30,KEYCODE_C:31,KEYCODE_D:32,KEYCODE_E:33,KEYCODE_F:34,KEYCODE_G:35,KEYCODE_H:36,KEYCODE_I:37,KEYCODE_J:38,KEYCODE_K:39,KEYCODE_L:40,KEYCODE_M:41,KEYCODE_N:42,KEYCODE_O:43,KEYCODE_P:44,KEYCODE_Q:45,KEYCODE_R:46,KEYCODE_S:47,KEYCODE_T:48,KEYCODE_U:49,KEYCODE_V:50,KEYCODE_W:51,KEYCODE_X:52,KEYCODE_Y:53,KEYCODE_Z:54,KEYCODE_COMMA:55,KEYCODE_PERIOD:56,KEYCODE_ALT_LEFT:57,KEYCODE_ALT_RIGHT:58,KEYCODE_SHIFT_LEFT:59,KEYCODE_SHIFT_RIGHT:60,KEYCODE_TAB:61,KEYCODE_SPACE:62,ENTER:66,DEL:67,KEYCODE_GRAVE:68,KEYCODE_MINUS:69,KEYCODE_EQUALS:70,KEYCODE_LEFT_BRACKET:71,KEYCODE_RIGHT_BRACKET:72,KEYCODE_BACKSLASH:73,KEYCODE_SEMICOLON:74,KEYCODE_APOSTROPHE:75,KEYCODE_SLASH:76,MENU:82,KEYCODE_PAGE_UP:92,KEYCODE_PAGE_DOWN:93,KEYCODE_ESCAPE:111,FORWARD_DEL:112,KEYCODE_CTRL_LEFT:113,KEYCODE_CTRL_RIGHT:114,KEYCODE_META_LEFT:117,KEYCODE_META_RIGHT:118,KEYCODE_MOVE_HOME:122,KEYCODE_MOVE_END:123,KEYCODE_INSERT:124,KEYCODE_F1:131,KEYCODE_F2:132,KEYCODE_F3:133,KEYCODE_F4:134,KEYCODE_F5:135,KEYCODE_F6:136,KEYCODE_F7:137,KEYCODE_F8:138,KEYCODE_F9:139,KEYCODE_F10:140,KEYCODE_F11:141,KEYCODE_F12:142,KEYCODE_NUMPAD_0:144,KEYCODE_NUMPAD_1:145,KEYCODE_NUMPAD_2:146,KEYCODE_NUMPAD_3:147,KEYCODE_NUMPAD_4:148,KEYCODE_NUMPAD_5:149,KEYCODE_NUMPAD_6:150,KEYCODE_NUMPAD_7:151,KEYCODE_NUMPAD_8:152,KEYCODE_NUMPAD_9:153,KEYCODE_NUMPAD_DIVIDE:154,KEYCODE_NUMPAD_MULTIPLY:155,KEYCODE_NUMPAD_SUBTRACT:156,KEYCODE_NUMPAD_ADD:157,KEYCODE_NUMPAD_DOT:158,KEYCODE_NUMPAD_COMMA:159,KEYCODE_NUMPAD_ENTER:160,KEYCODE_NUMPAD_EQUALS:161},re={KeyA:e.KEYCODE_A,KeyB:e.KEYCODE_B,KeyC:e.KEYCODE_C,KeyD:e.KEYCODE_D,KeyE:e.KEYCODE_E,KeyF:e.KEYCODE_F,KeyG:e.KEYCODE_G,KeyH:e.KEYCODE_H,KeyI:e.KEYCODE_I,KeyJ:e.KEYCODE_J,KeyK:e.KEYCODE_K,KeyL:e.KEYCODE_L,KeyM:e.KEYCODE_M,KeyN:e.KEYCODE_N,KeyO:e.KEYCODE_O,KeyP:e.KEYCODE_P,KeyQ:e.KEYCODE_Q,KeyR:e.KEYCODE_R,KeyS:e.KEYCODE_S,KeyT:e.KEYCODE_T,KeyU:e.KEYCODE_U,KeyV:e.KEYCODE_V,KeyW:e.KEYCODE_W,KeyX:e.KEYCODE_X,KeyY:e.KEYCODE_Y,KeyZ:e.KEYCODE_Z,Digit0:e.KEYCODE_0,Digit1:e.KEYCODE_1,Digit2:e.KEYCODE_2,Digit3:e.KEYCODE_3,Digit4:e.KEYCODE_4,Digit5:e.KEYCODE_5,Digit6:e.KEYCODE_6,Digit7:e.KEYCODE_7,Digit8:e.KEYCODE_8,Digit9:e.KEYCODE_9,Backquote:e.KEYCODE_GRAVE,Minus:e.KEYCODE_MINUS,Equal:e.KEYCODE_EQUALS,BracketLeft:e.KEYCODE_LEFT_BRACKET,BracketRight:e.KEYCODE_RIGHT_BRACKET,Backslash:e.KEYCODE_BACKSLASH,Semicolon:e.KEYCODE_SEMICOLON,Quote:e.KEYCODE_APOSTROPHE,Comma:e.KEYCODE_COMMA,Period:e.KEYCODE_PERIOD,Slash:e.KEYCODE_SLASH,Space:e.KEYCODE_SPACE,Tab:e.KEYCODE_TAB,Escape:e.KEYCODE_ESCAPE,ArrowUp:e.DPAD_UP,ArrowDown:e.DPAD_DOWN,ArrowLeft:e.DPAD_LEFT,ArrowRight:e.DPAD_RIGHT,Enter:e.ENTER,Backspace:e.DEL,Delete:e.FORWARD_DEL,Home:e.KEYCODE_MOVE_HOME,End:e.KEYCODE_MOVE_END,PageUp:e.KEYCODE_PAGE_UP,PageDown:e.KEYCODE_PAGE_DOWN,Insert:e.KEYCODE_INSERT,F1:e.KEYCODE_F1,F2:e.KEYCODE_F2,F3:e.KEYCODE_F3,F4:e.KEYCODE_F4,F5:e.KEYCODE_F5,F6:e.KEYCODE_F6,F7:e.KEYCODE_F7,F8:e.KEYCODE_F8,F9:e.KEYCODE_F9,F10:e.KEYCODE_F10,F11:e.KEYCODE_F11,F12:e.KEYCODE_F12,ShiftLeft:e.KEYCODE_SHIFT_LEFT,ShiftRight:e.KEYCODE_SHIFT_RIGHT,ControlLeft:e.KEYCODE_CTRL_LEFT,ControlRight:e.KEYCODE_CTRL_RIGHT,AltLeft:e.KEYCODE_ALT_LEFT,AltRight:e.KEYCODE_ALT_RIGHT,MetaLeft:e.KEYCODE_META_LEFT,MetaRight:e.KEYCODE_META_RIGHT,ContextMenu:e.MENU,Numpad0:e.KEYCODE_NUMPAD_0,Numpad1:e.KEYCODE_NUMPAD_1,Numpad2:e.KEYCODE_NUMPAD_2,Numpad3:e.KEYCODE_NUMPAD_3,Numpad4:e.KEYCODE_NUMPAD_4,Numpad5:e.KEYCODE_NUMPAD_5,Numpad6:e.KEYCODE_NUMPAD_6,Numpad7:e.KEYCODE_NUMPAD_7,Numpad8:e.KEYCODE_NUMPAD_8,Numpad9:e.KEYCODE_NUMPAD_9,NumpadDivide:e.KEYCODE_NUMPAD_DIVIDE,NumpadMultiply:e.KEYCODE_NUMPAD_MULTIPLY,NumpadSubtract:e.KEYCODE_NUMPAD_SUBTRACT,NumpadAdd:e.KEYCODE_NUMPAD_ADD,NumpadDecimal:e.KEYCODE_NUMPAD_DOT,NumpadComma:e.KEYCODE_NUMPAD_COMMA,NumpadEnter:e.KEYCODE_NUMPAD_ENTER,NumpadEqual:e.KEYCODE_NUMPAD_EQUALS};function Ce(i,u,D,s,l,A,o=1,E=0,d=0){const C=new ArrayBuffer(32),T=new DataView(C);let _=0;return T.setUint8(_,j.INJECT_TOUCH_EVENT),_+=1,T.setUint8(_,i),_+=1,T.setBigInt64(_,BigInt(u)),_+=8,T.setInt32(_,Math.round(l),!0),_+=4,T.setInt32(_,Math.round(A),!0),_+=4,T.setUint16(_,D,!0),_+=2,T.setUint16(_,s,!0),_+=2,T.setInt16(_,Math.round(o*65535),!0),_+=2,T.setInt32(_,E,!0),_+=4,T.setInt32(_,d,!0),C}function De(i,u=!0){const s=new TextEncoder().encode(i),l=new ArrayBuffer(14+s.length),A=new DataView(l);let o=0;return A.setUint8(o,j.SET_CLIPBOARD),o+=1,A.setBigInt64(o,BigInt(0),!1),o+=8,A.setUint8(o,u?1:0),o+=1,A.setUint32(o,s.length,!1),o+=4,new Uint8Array(l,o).set(s),l}function W(i,u,D=0,s=0){const l=new ArrayBuffer(14),A=new DataView(l);let o=0;return A.setUint8(o,j.INJECT_KEYCODE),o+=1,A.setUint8(o,i),o+=1,A.setInt32(o,u,!0),o+=4,A.setInt32(o,D,!0),o+=4,A.setInt32(o,s,!0),l}const g=(...i)=>{window.debugRemoteControl&&console.log(...i)},Y=(...i)=>{window.debugRemoteControl&&console.warn(...i)};function Oe(i){const u=i.code,D=re[u];if(!D)return Y(`Unknown event.code: ${u}, key: ${i.key}`),null;let s=e.META_NONE;const l=u>="KeyA"&&u<="KeyZ",A=i.getModifierState("CapsLock"),o=i.shiftKey;let E=o;return l&&(E=o!==A),E&&(s|=e.META_SHIFT_ON),i.ctrlKey&&(s|=e.META_CTRL_ON),i.altKey&&(s|=e.META_ALT_ON),i.metaKey&&(s|=e.META_META_ON),{keycode:D,metaState:s}}const Ke=N.forwardRef(({className:i,url:u,token:D,sessionId:s,openUrl:l},A)=>{const o=N.useRef(null),E=N.useRef(null),d=N.useRef(null),C=N.useRef(null),[T,_]=N.useState(!1),k=N.useRef(void 0),I=N.useRef(new Map),U=N.useRef(new Map),m=N.useRef(new Map),R=N.useMemo(()=>s||Math.random().toString(36).substring(2,15)+Math.random().toString(36).substring(2,15),[s]),O=t=>{g(t)},L=t=>{!C.current||C.current.readyState!=="open"||C.current.send(t)},S=t=>{if(t.preventDefault(),t.stopPropagation(),!C.current||C.current.readyState!=="open"||!o.current)return;const K=o.current,c=K.getBoundingClientRect(),r=K.videoWidth,n=K.videoHeight;if(!r||!n)return;const y=(a,f,p,M)=>{const h=c.width,v=c.height,$=r/n,se=h/v;let H=h,B=v;$>se?B=h/$:H=v*$;const ae=(h-H)/2,de=(v-B)/2,V=f-c.left-ae,G=p-c.top-de,x=V>=0&&V<=H&&G>=0&&G<=B;let J=0,q=0;x&&(J=Math.max(0,Math.min(r,V/H*r)),q=Math.max(0,Math.min(n,G/B*n)));let w=null,P=null,ue=1;const ee=F.BUTTON_PRIMARY;switch(M){case"down":x?(w=F.ACTION_DOWN,P={x:J,y:q},m.current.set(a,P),a===-1&&o.current?.focus()):m.current.delete(a);break;case"move":m.current.has(a)&&x&&(w=F.ACTION_MOVE,P={x:J,y:q},m.current.set(a,P));break;case"up":case"cancel":m.current.has(a)&&(w=M==="cancel"?F.ACTION_CANCEL:F.ACTION_UP,P=m.current.get(a),m.current.delete(a));break}if(w!==null&&P!==null){const te=Ce(w,a,r,n,P.x,P.y,ue,ee,ee);te&&L(te)}else(M==="up"||M==="cancel")&&m.current.delete(a)};if("touches"in t){const a=t.changedTouches;let f;switch(t.type){case"touchstart":f="down";break;case"touchmove":f="move";break;case"touchend":f="up";break;case"touchcancel":f="cancel";break;default:return}for(let p=0;p<a.length;p++){const M=a[p];y(M.identifier,M.clientX,M.clientY,f)}}else{let f=null;switch(t.type){case"mousedown":t.button===0&&(f="down");break;case"mousemove":m.current.has(-1)&&(f="move");break;case"mouseup":t.button===0&&(f="up");break;case"mouseleave":m.current.has(-1)&&(f="up");break}f&&y(-1,t.clientX,t.clientY,f)}},Q=t=>{if(t.preventDefault(),t.stopPropagation(),g("Keyboard event:",{type:t.type,key:t.key,keyCode:t.keyCode,code:t.code,target:t.target.tagName,focused:document.activeElement===o.current}),document.activeElement!==o.current){Y("Video element not focused, skipping keyboard event");return}if(!C.current||C.current.readyState!=="open"){Y("Data channel not ready for keyboard event:",C.current?.readyState);return}if(t.type==="keydown"){if(t.key.toLowerCase()==="v"&&(t.metaKey||t.ctrlKey)){g("Paste shortcut detected"),navigator.clipboard.readText().then(c=>{if(c){g("Pasting text via SET_CLIPBOARD:",c.substring(0,20)+(c.length>20?"...":""));const r=De(c,!0);L(r)}}).catch(c=>{console.error("Failed to read clipboard contents: ",c)});return}if(t.key.toLowerCase()==="m"&&(t.metaKey||t.ctrlKey)){g("Menu shortcut detected");const c=W(e.ACTION_DOWN,e.MENU,0,e.META_NONE);L(c);const r=W(e.ACTION_UP,e.MENU,0,e.META_NONE);L(r);return}}const K=Oe(t);if(K){const{keycode:c,metaState:r}=K,n=t.type==="keydown"?e.ACTION_DOWN:e.ACTION_UP;g(`Sending Keycode: key=${t.key}, code=${c}, action=${n}, meta=${r}`);const y=W(n,c,0,r);L(y)}else g(`Ignoring unhandled key event: type=${t.type}, key=${t.key}`)},oe=()=>{E.current&&E.current.readyState===WebSocket.OPEN&&E.current.send(JSON.stringify({type:"keepAlive",sessionId:R}))},X=()=>{k.current&&window.clearInterval(k.current),k.current=window.setInterval(oe,1e4)},Z=()=>{k.current&&(window.clearInterval(k.current),k.current=void 0)},z=()=>{document.hidden?Z():X()},ce=async()=>{try{E.current=new WebSocket(`${u}?token=${D}`),E.current.onerror=r=>{O("WebSocket error: "+r)},E.current.onclose=()=>{O("WebSocket closed")},await new Promise((r,n)=>{E.current&&(E.current.onopen=r,setTimeout(()=>n(new Error("WebSocket connection timeout")),5e3))});const K=await new Promise((r,n)=>{const y=setTimeout(()=>n(new Error("RTCConfiguration timeout")),5e3),a=f=>{try{const p=JSON.parse(f.data);p.type==="rtcConfiguration"&&(clearTimeout(y),E.current?.removeEventListener("message",a),r(p.rtcConfiguration))}catch(p){console.error("Error handling RTC configuration:",p),n(p)}};E.current?.addEventListener("message",a),E.current?.send(JSON.stringify({type:"requestRtcConfiguration",sessionId:R}))});d.current=new RTCPeerConnection(K),d.current.addTransceiver("audio",{direction:"recvonly"});const c=d.current.addTransceiver("video",{direction:"recvonly"});if(RTCRtpReceiver.getCapabilities){const r=RTCRtpReceiver.getCapabilities("video");if(r&&r.codecs){const y=r.codecs.sort((a,f)=>{const p=M=>{const h=M.mimeType.toLowerCase();return h.includes("vp9")?1:h.includes("h265")||h.includes("hevc")?2:h.includes("h264")||h.includes("avc")?3:4};return p(a)-p(f)});c.setCodecPreferences(y),g("Set codec preferences:",y.map(a=>a.mimeType).join(", "))}}if(C.current=d.current.createDataChannel("control",{ordered:!0,negotiated:!0,id:1}),C.current.onopen=()=>{if(O("Control channel opened"),E.current&&(E.current.send(JSON.stringify({type:"requestFrame",sessionId:R})),l))try{const r=decodeURIComponent(l);O("Opening URL"),E.current.send(JSON.stringify({type:"openUrl",url:r,sessionId:R}))}catch(r){console.error({error:r},"Error decoding URL, falling back to the original URL"),E.current.send(JSON.stringify({type:"openUrl",url:l,sessionId:R}))}},C.current.onclose=()=>{O("Control channel closed")},C.current.onerror=r=>{console.error("Control channel error:",r),O("Control channel error: "+r)},d.current.onconnectionstatechange=()=>{O("Connection state: "+d.current?.connectionState),_(d.current?.connectionState==="connected")},d.current.oniceconnectionstatechange=()=>{O("ICE state: "+d.current?.iceConnectionState)},d.current.ontrack=r=>{O("Received remote track: "+r.track.kind),r.track.kind==="video"&&o.current&&(g(`[${new Date().toISOString()}] Video track received:`,r.track),o.current.srcObject=r.streams[0])},d.current.onicecandidate=r=>{if(r.candidate&&E.current){const n={type:"candidate",candidate:r.candidate.candidate,sdpMid:r.candidate.sdpMid,sdpMLineIndex:r.candidate.sdpMLineIndex,sessionId:R};E.current.send(JSON.stringify(n)),O("Sent ICE candidate")}else O("ICE candidate gathering completed")},E.current.onmessage=async r=>{let n;try{n=JSON.parse(r.data)}catch(y){Y("Error parsing message:",y);return}switch(O("Received: "+n.type),n.type){case"answer":if(!d.current){O("No peer connection, skipping answer");break}await d.current.setRemoteDescription(new RTCSessionDescription({type:"answer",sdp:n.sdp})),O("Set remote description");break;case"candidate":if(!d.current){O("No peer connection, skipping candidate");break}await d.current.addIceCandidate(new RTCIceCandidate({candidate:n.candidate,sdpMid:n.sdpMid,sdpMLineIndex:n.sdpMLineIndex})),O("Added ICE candidate");break;case"screenshot":if(typeof n.id!="string"||typeof n.dataUri!="string"){Y("Received invalid screenshot success message:",n);break}const y=I.current.get(n.id);if(!y){Y(`Received screenshot data for unknown or handled id: ${n.id}`);break}g(`Received screenshot data for id ${n.id}`),y({dataUri:n.dataUri}),I.current.delete(n.id),U.current.delete(n.id);break;case"screenshotError":if(typeof n.id!="string"||typeof n.message!="string"){Y("Received invalid screenshot error message:",n);break}const a=U.current.get(n.id);if(!a){Y(`Received screenshot error for unknown or handled id: ${n.id}`);break}Y(`Received screenshot error for id ${n.id}: ${n.message}`),a(new Error(n.message)),I.current.delete(n.id),U.current.delete(n.id);break;default:Y(`Received unhandled message type: ${n.type}`,n);break}},d.current){const r=await d.current.createOffer({offerToReceiveVideo:!0,offerToReceiveAudio:!1});await d.current.setLocalDescription(r),E.current&&E.current.send(JSON.stringify({type:"offer",sdp:r.sdp,sessionId:R})),O("Sent offer")}}catch(t){O("Error: "+t)}},Ee=()=>{E.current&&(E.current.close(),E.current=null),d.current&&(d.current.close(),d.current=null),o.current&&(o.current.srcObject=null),C.current&&(C.current.close(),C.current=null),_(!1),O("Stopped")};N.useEffect(()=>(ce(),document.hidden||X(),document.addEventListener("visibilitychange",z),()=>{Z(),Ee(),document.removeEventListener("visibilitychange",z)}),[u,D,s]);const ie=()=>{o.current&&o.current.focus()};return N.useImperativeHandle(A,()=>({openUrl:t=>{if(!E.current||E.current.readyState!==WebSocket.OPEN){Y("WebSocket not open, cannot send open_url command via ref.");return}try{const K=decodeURIComponent(t);O("Opening URL"),E.current.send(JSON.stringify({type:"openUrl",url:K,sessionId:R}))}catch(K){Y("Error decoding or sending URL via ref:",{error:K,url:t}),E.current.send(JSON.stringify({type:"openUrl",url:t,sessionId:R}))}},sendKeyEvent:t=>{if(!C.current||C.current.readyState!=="open"){Y("Data channel not ready for imperative key command:",C.current?.readyState);return}const K=re[t.code];if(!K){Y(`Unknown event.code for imperative command: ${t.code}`);return}let c=e.META_NONE;t.shiftKey&&(c|=e.META_SHIFT_ON),t.altKey&&(c|=e.META_ALT_ON),t.ctrlKey&&(c|=e.META_CTRL_ON),t.metaKey&&(c|=e.META_META_ON);const r=t.type==="keydown"?e.ACTION_DOWN:e.ACTION_UP;g(`Sending Imperative Key Command: code=${t.code}, keycode=${K}, action=${r}, meta=${c}`);const n=W(r,K,0,c);n&&L(n)},screenshot:()=>new Promise((t,K)=>{if(!E.current||E.current.readyState!==WebSocket.OPEN)return Y("WebSocket not open, cannot send screenshot command."),K(new Error("WebSocket is not connected or connection is not open."));const c=`ui-ss-${Date.now()}-${Math.random().toString(36).substring(2,9)}`,r={type:"screenshot",id:c};I.current.set(c,t),U.current.set(c,K),g("Sending screenshot request:",r);try{E.current.send(JSON.stringify(r))}catch(n){Y("Failed to send screenshot request immediately:",n),I.current.delete(c),U.current.delete(c),K(n);return}setTimeout(()=>{I.current.has(c)&&(Y(`Screenshot request timed out for id ${c}`),U.current.get(c)?.(new Error("Screenshot request timed out")),I.current.delete(c),U.current.delete(c))},3e4)})})),b.jsxs("div",{className:_e("rc-container",i),style:{touchAction:"none"},onMouseDown:S,onMouseMove:S,onMouseUp:S,onMouseLeave:S,onTouchStart:S,onTouchMove:S,onTouchEnd:S,onTouchCancel:S,children:[b.jsx("video",{ref:o,className:"rc-video",autoPlay:!0,playsInline:!0,muted:!0,tabIndex:0,style:{outline:"none",pointerEvents:"none"},onKeyDown:Q,onKeyUp:Q,onClick:ie,onFocus:()=>{o.current&&(o.current.style.outline="none")},onBlur:()=>{o.current&&(o.current.style.outline="none")}}),!T&&b.jsxs("div",{className:"rc-placeholder-wrapper",children:[b.jsx("div",{className:"rc-spinner"}),b.jsx("p",{className:"rc-placeholder-content",children:"Connecting..."})]})]})});exports.RemoteControl=Ke;

package/dist/index.js

@@ -1,23 +1,23 @@
 import { jsxs as ne, jsx as q } from "react/jsx-runtime";
-import { forwardRef as De, useRef as S, useState as Ce, useMemo as Oe, useEffect as Ke, useImperativeHandle as le } from "react";
-import './index.css';function re(E) {
-  var a, D, i = "";
-  if (typeof E == "string" || typeof E == "number") i += E;
-  else if (typeof E == "object") if (Array.isArray(E)) {
-    var l = E.length;
-    for (a = 0; a < l; a++) E[a] && (D = re(E[a])) && (i && (i += " "), i += D);
-  } else for (D in E) E[D] && (i && (i += " "), i += D);
-  return i;
+import { forwardRef as Ce, useRef as P, useState as De, useMemo as Oe, useEffect as Ke, useImperativeHandle as le } from "react";
+import './index.css';function re(i) {
+  var u, D, s = "";
+  if (typeof i == "string" || typeof i == "number") s += i;
+  else if (typeof i == "object") if (Array.isArray(i)) {
+    var l = i.length;
+    for (u = 0; u < l; u++) i[u] && (D = re(i[u])) && (s && (s += " "), s += D);
+  } else for (D in i) i[D] && (s && (s += " "), s += D);
+  return s;
 }
-function Ye() {
-  for (var E, a, D = 0, i = "", l = arguments.length; D < l; D++) (E = arguments[D]) && (a = re(E)) && (i && (i += " "), i += a);
-  return i;
+function fe() {
+  for (var i, u, D = 0, s = "", l = arguments.length; D < l; D++) (i = arguments[D]) && (u = re(i)) && (s && (s += " "), s += u);
+  return s;
 }
 const Q = {
   INJECT_KEYCODE: 0,
   INJECT_TOUCH_EVENT: 2,
   SET_CLIPBOARD: 9
-}, w = {
+}, b = {
   ACTION_DOWN: 0,
   ACTION_UP: 1,
   ACTION_MOVE: 2,
@@ -256,449 +256,464 @@ const Q = {
   NumpadEnter: e.KEYCODE_NUMPAD_ENTER,
   NumpadEqual: e.KEYCODE_NUMPAD_EQUALS
 };
-function fe(E, a, D, i, l, f, o = 1, c = 0, s = 0) {
-  const u = new ArrayBuffer(32), y = new DataView(u);
-  let d = 0;
-  return y.setUint8(d, Q.INJECT_TOUCH_EVENT), d += 1, y.setUint8(d, E), d += 1, y.setBigInt64(d, BigInt(a)), d += 8, y.setInt32(d, Math.round(l), !0), d += 4, y.setInt32(d, Math.round(f), !0), d += 4, y.setUint16(d, D, !0), d += 2, y.setUint16(d, i, !0), d += 2, y.setInt16(d, Math.round(o * 65535), !0), d += 2, y.setInt32(d, c, !0), d += 4, y.setInt32(d, s, !0), u;
+function Ye(i, u, D, s, l, A, o = 1, E = 0, d = 0) {
+  const C = new ArrayBuffer(32), N = new DataView(C);
+  let _ = 0;
+  return N.setUint8(_, Q.INJECT_TOUCH_EVENT), _ += 1, N.setUint8(_, i), _ += 1, N.setBigInt64(_, BigInt(u)), _ += 8, N.setInt32(_, Math.round(l), !0), _ += 4, N.setInt32(_, Math.round(A), !0), _ += 4, N.setUint16(_, D, !0), _ += 2, N.setUint16(_, s, !0), _ += 2, N.setInt16(_, Math.round(o * 65535), !0), _ += 2, N.setInt32(_, E, !0), _ += 4, N.setInt32(_, d, !0), C;
 }
-function Ae(E, a = !0) {
-  const i = new TextEncoder().encode(E), l = new ArrayBuffer(14 + i.length), f = new DataView(l);
+function Ae(i, u = !0) {
+  const s = new TextEncoder().encode(i), l = new ArrayBuffer(14 + s.length), A = new DataView(l);
   let o = 0;
-  return f.setUint8(o, Q.SET_CLIPBOARD), o += 1, f.setBigInt64(o, BigInt(0), !1), o += 8, f.setUint8(o, a ? 1 : 0), o += 1, f.setUint32(o, i.length, !1), o += 4, new Uint8Array(l, o).set(i), l;
+  return A.setUint8(o, Q.SET_CLIPBOARD), o += 1, A.setBigInt64(o, BigInt(0), !1), o += 8, A.setUint8(o, u ? 1 : 0), o += 1, A.setUint32(o, s.length, !1), o += 4, new Uint8Array(l, o).set(s), l;
 }
-function B(E, a, D = 0, i = 0) {
-  const l = new ArrayBuffer(14), f = new DataView(l);
+function B(i, u, D = 0, s = 0) {
+  const l = new ArrayBuffer(14), A = new DataView(l);
   let o = 0;
-  return f.setUint8(o, Q.INJECT_KEYCODE), o += 1, f.setUint8(o, E), o += 1, f.setInt32(o, a, !0), o += 4, f.setInt32(o, D, !0), o += 4, f.setInt32(o, i, !0), l;
+  return A.setUint8(o, Q.INJECT_KEYCODE), o += 1, A.setUint8(o, i), o += 1, A.setInt32(o, u, !0), o += 4, A.setInt32(o, D, !0), o += 4, A.setInt32(o, s, !0), l;
 }
-const N = (...E) => {
-  window.debugRemoteControl && console.log(...E);
-}, Y = (...E) => {
-  window.debugRemoteControl && console.warn(...E);
+const T = (...i) => {
+  window.debugRemoteControl && console.log(...i);
+}, Y = (...i) => {
+  window.debugRemoteControl && console.warn(...i);
 };
-function ye(E) {
-  const a = E.code, D = oe[a];
+function pe(i) {
+  const u = i.code, D = oe[u];
   if (!D)
-    return Y(`Unknown event.code: ${a}, key: ${E.key}`), null;
-  let i = e.META_NONE;
-  const l = a >= "KeyA" && a <= "KeyZ", f = E.getModifierState("CapsLock"), o = E.shiftKey;
-  let c = o;
-  return l && (c = o !== f), c && (i |= e.META_SHIFT_ON), E.ctrlKey && (i |= e.META_CTRL_ON), E.altKey && (i |= e.META_ALT_ON), E.metaKey && (i |= e.META_META_ON), { keycode: D, metaState: i };
+    return Y(`Unknown event.code: ${u}, key: ${i.key}`), null;
+  let s = e.META_NONE;
+  const l = u >= "KeyA" && u <= "KeyZ", A = i.getModifierState("CapsLock"), o = i.shiftKey;
+  let E = o;
+  return l && (E = o !== A), E && (s |= e.META_SHIFT_ON), i.ctrlKey && (s |= e.META_CTRL_ON), i.altKey && (s |= e.META_ALT_ON), i.metaKey && (s |= e.META_META_ON), { keycode: D, metaState: s };
 }
-const Te = De(
-  ({ className: E, url: a, token: D, sessionId: i, openUrl: l }, f) => {
-    const o = S(null), c = S(null), s = S(null), u = S(null), [y, d] = Ce(!1), P = S(void 0), R = S(/* @__PURE__ */ new Map()), I = S(/* @__PURE__ */ new Map()), p = S(/* @__PURE__ */ new Map()), g = Oe(
-      () => i || Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15),
-      [i]
-    ), C = (r) => {
-      N(r);
-    }, U = (r) => {
-      !u.current || u.current.readyState !== "open" || u.current.send(r);
-    }, m = (r) => {
-      if (r.preventDefault(), r.stopPropagation(), !u.current || u.current.readyState !== "open" || !o.current)
+const Te = Ce(
+  ({ className: i, url: u, token: D, sessionId: s, openUrl: l }, A) => {
+    const o = P(null), E = P(null), d = P(null), C = P(null), [N, _] = De(!1), k = P(void 0), I = P(/* @__PURE__ */ new Map()), U = P(/* @__PURE__ */ new Map()), m = P(/* @__PURE__ */ new Map()), h = Oe(
+      () => s || Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15),
+      [s]
+    ), O = (t) => {
+      T(t);
+    }, L = (t) => {
+      !C.current || C.current.readyState !== "open" || C.current.send(t);
+    }, S = (t) => {
+      if (t.preventDefault(), t.stopPropagation(), !C.current || C.current.readyState !== "open" || !o.current)
         return;
-      const O = o.current, t = O.getBoundingClientRect(), n = O.videoWidth, _ = O.videoHeight;
-      if (!n || !_) return;
-      const T = (A, K, k, M) => {
-        const b = t.width, F = t.height, W = n / _, ae = b / F;
-        let v = b, H = F;
-        W > ae ? H = b / W : v = F * W;
-        const de = (b - v) / 2, ue = (F - H) / 2, $ = K - t.left - de, V = k - t.top - ue, G = $ >= 0 && $ <= v && V >= 0 && V <= H;
+      const K = o.current, c = K.getBoundingClientRect(), r = K.videoWidth, n = K.videoHeight;
+      if (!r || !n) return;
+      const p = (a, f, y, g) => {
+        const M = c.width, F = c.height, W = r / n, ae = M / F;
+        let v = M, H = F;
+        W > ae ? H = M / W : v = F * W;
+        const de = (M - v) / 2, ue = (F - H) / 2, $ = f - c.left - de, V = y - c.top - ue, G = $ >= 0 && $ <= v && V >= 0 && V <= H;
         let J = 0, x = 0;
-        G && (J = Math.max(0, Math.min(n, $ / v * n)), x = Math.max(0, Math.min(_, V / H * _)));
-        let L = null, h = null, _e = 1;
-        const ee = w.BUTTON_PRIMARY;
-        switch (M) {
+        G && (J = Math.max(0, Math.min(r, $ / v * r)), x = Math.max(0, Math.min(n, V / H * n)));
+        let w = null, R = null, _e = 1;
+        const ee = b.BUTTON_PRIMARY;
+        switch (g) {
           case "down":
-            G ? (L = w.ACTION_DOWN, h = { x: J, y: x }, p.current.set(A, h), A === -1 && o.current?.focus()) : p.current.delete(A);
+            G ? (w = b.ACTION_DOWN, R = { x: J, y: x }, m.current.set(a, R), a === -1 && o.current?.focus()) : m.current.delete(a);
             break;
           case "move":
-            p.current.has(A) && G && (L = w.ACTION_MOVE, h = { x: J, y: x }, p.current.set(A, h));
+            m.current.has(a) && G && (w = b.ACTION_MOVE, R = { x: J, y: x }, m.current.set(a, R));
             break;
           case "up":
           case "cancel":
-            p.current.has(A) && (L = M === "cancel" ? w.ACTION_CANCEL : w.ACTION_UP, h = p.current.get(A), p.current.delete(A));
+            m.current.has(a) && (w = g === "cancel" ? b.ACTION_CANCEL : b.ACTION_UP, R = m.current.get(a), m.current.delete(a));
             break;
         }
-        if (L !== null && h !== null) {
-          const te = fe(
-            L,
-            A,
+        if (w !== null && R !== null) {
+          const te = Ye(
+            w,
+            a,
+            r,
             n,
-            _,
-            h.x,
-            h.y,
+            R.x,
+            R.y,
             _e,
             ee,
             ee
           );
-          te && U(te);
-        } else (M === "up" || M === "cancel") && p.current.delete(A);
+          te && L(te);
+        } else (g === "up" || g === "cancel") && m.current.delete(a);
       };
-      if ("touches" in r) {
-        const A = r.changedTouches;
-        let K;
-        switch (r.type) {
+      if ("touches" in t) {
+        const a = t.changedTouches;
+        let f;
+        switch (t.type) {
           case "touchstart":
-            K = "down";
+            f = "down";
             break;
           case "touchmove":
-            K = "move";
+            f = "move";
             break;
           case "touchend":
-            K = "up";
+            f = "up";
             break;
           case "touchcancel":
-            K = "cancel";
+            f = "cancel";
             break;
           default:
             return;
         }
-        for (let k = 0; k < A.length; k++) {
-          const M = A[k];
-          T(M.identifier, M.clientX, M.clientY, K);
+        for (let y = 0; y < a.length; y++) {
+          const g = a[y];
+          p(g.identifier, g.clientX, g.clientY, f);
         }
       } else {
-        let K = null;
-        switch (r.type) {
+        let f = null;
+        switch (t.type) {
           case "mousedown":
-            r.button === 0 && (K = "down");
+            t.button === 0 && (f = "down");
             break;
           case "mousemove":
-            p.current.has(-1) && (K = "move");
+            m.current.has(-1) && (f = "move");
             break;
           case "mouseup":
-            r.button === 0 && (K = "up");
+            t.button === 0 && (f = "up");
             break;
           case "mouseleave":
-            p.current.has(-1) && (K = "up");
+            m.current.has(-1) && (f = "up");
             break;
         }
-        K && T(-1, r.clientX, r.clientY, K);
+        f && p(-1, t.clientX, t.clientY, f);
       }
-    }, X = (r) => {
-      if (r.preventDefault(), r.stopPropagation(), N("Keyboard event:", {
-        type: r.type,
-        key: r.key,
-        keyCode: r.keyCode,
-        code: r.code,
-        target: r.target.tagName,
+    }, X = (t) => {
+      if (t.preventDefault(), t.stopPropagation(), T("Keyboard event:", {
+        type: t.type,
+        key: t.key,
+        keyCode: t.keyCode,
+        code: t.code,
+        target: t.target.tagName,
         focused: document.activeElement === o.current
       }), document.activeElement !== o.current) {
         Y("Video element not focused, skipping keyboard event");
         return;
       }
-      if (!u.current || u.current.readyState !== "open") {
-        Y("Data channel not ready for keyboard event:", u.current?.readyState);
+      if (!C.current || C.current.readyState !== "open") {
+        Y("Data channel not ready for keyboard event:", C.current?.readyState);
         return;
       }
-      if (r.type === "keydown") {
-        if (r.key.toLowerCase() === "v" && (r.metaKey || r.ctrlKey)) {
-          N("Paste shortcut detected"), navigator.clipboard.readText().then((t) => {
-            if (t) {
-              N(
+      if (t.type === "keydown") {
+        if (t.key.toLowerCase() === "v" && (t.metaKey || t.ctrlKey)) {
+          T("Paste shortcut detected"), navigator.clipboard.readText().then((c) => {
+            if (c) {
+              T(
                 "Pasting text via SET_CLIPBOARD:",
-                t.substring(0, 20) + (t.length > 20 ? "..." : "")
+                c.substring(0, 20) + (c.length > 20 ? "..." : "")
               );
-              const n = Ae(t, !0);
-              U(n);
+              const r = Ae(c, !0);
+              L(r);
             }
-          }).catch((t) => {
-            console.error("Failed to read clipboard contents: ", t);
+          }).catch((c) => {
+            console.error("Failed to read clipboard contents: ", c);
           });
           return;
         }
-        if (r.key.toLowerCase() === "m" && (r.metaKey || r.ctrlKey)) {
-          N("Menu shortcut detected");
-          const t = B(
+        if (t.key.toLowerCase() === "m" && (t.metaKey || t.ctrlKey)) {
+          T("Menu shortcut detected");
+          const c = B(
             e.ACTION_DOWN,
             e.MENU,
             0,
             e.META_NONE
             // Modifiers are handled by the shortcut check, not passed down
           );
-          U(t);
-          const n = B(
+          L(c);
+          const r = B(
             e.ACTION_UP,
             e.MENU,
             0,
             e.META_NONE
           );
-          U(n);
+          L(r);
           return;
         }
       }
-      const O = ye(r);
-      if (O) {
-        const { keycode: t, metaState: n } = O, _ = r.type === "keydown" ? e.ACTION_DOWN : e.ACTION_UP;
-        N(`Sending Keycode: key=${r.key}, code=${t}, action=${_}, meta=${n}`);
-        const T = B(
-          _,
-          t,
+      const K = pe(t);
+      if (K) {
+        const { keycode: c, metaState: r } = K, n = t.type === "keydown" ? e.ACTION_DOWN : e.ACTION_UP;
+        T(`Sending Keycode: key=${t.key}, code=${c}, action=${n}, meta=${r}`);
+        const p = B(
+          n,
+          c,
           0,
           // repeat count, typically 0 for single presses
-          n
+          r
         );
-        U(T);
+        L(p);
       } else
-        N(`Ignoring unhandled key event: type=${r.type}, key=${r.key}`);
+        T(`Ignoring unhandled key event: type=${t.type}, key=${t.key}`);
     }, ce = () => {
-      c.current && c.current.readyState === WebSocket.OPEN && c.current.send(
+      E.current && E.current.readyState === WebSocket.OPEN && E.current.send(
         JSON.stringify({
           type: "keepAlive",
-          sessionId: g
+          sessionId: h
         })
       );
     }, j = () => {
-      P.current && window.clearInterval(P.current), P.current = window.setInterval(ce, 1e4);
+      k.current && window.clearInterval(k.current), k.current = window.setInterval(ce, 1e4);
     }, Z = () => {
-      P.current && (window.clearInterval(P.current), P.current = void 0);
+      k.current && (window.clearInterval(k.current), k.current = void 0);
     }, z = () => {
       document.hidden ? Z() : j();
     }, Ee = async () => {
       try {
-        c.current = new WebSocket(`${a}?token=${D}`), c.current.onerror = (t) => {
-          C("WebSocket error: " + t);
-        }, c.current.onclose = () => {
-          C("WebSocket closed");
-        }, await new Promise((t, n) => {
-          c.current && (c.current.onopen = t, setTimeout(() => n(new Error("WebSocket connection timeout")), 5e3));
+        E.current = new WebSocket(`${u}?token=${D}`), E.current.onerror = (r) => {
+          O("WebSocket error: " + r);
+        }, E.current.onclose = () => {
+          O("WebSocket closed");
+        }, await new Promise((r, n) => {
+          E.current && (E.current.onopen = r, setTimeout(() => n(new Error("WebSocket connection timeout")), 5e3));
         });
-        const O = await new Promise((t, n) => {
-          const _ = setTimeout(() => n(new Error("RTCConfiguration timeout")), 5e3), T = (A) => {
+        const K = await new Promise((r, n) => {
+          const p = setTimeout(() => n(new Error("RTCConfiguration timeout")), 5e3), a = (f) => {
             try {
-              const K = JSON.parse(A.data);
-              K.type === "rtcConfiguration" && (clearTimeout(_), c.current?.removeEventListener("message", T), t(K.rtcConfiguration));
-            } catch (K) {
-              console.error("Error handling RTC configuration:", K), n(K);
+              const y = JSON.parse(f.data);
+              y.type === "rtcConfiguration" && (clearTimeout(p), E.current?.removeEventListener("message", a), r(y.rtcConfiguration));
+            } catch (y) {
+              console.error("Error handling RTC configuration:", y), n(y);
             }
           };
-          c.current?.addEventListener("message", T), c.current?.send(
+          E.current?.addEventListener("message", a), E.current?.send(
             JSON.stringify({
               type: "requestRtcConfiguration",
-              sessionId: g
+              sessionId: h
             })
           );
         });
-        if (s.current = new RTCPeerConnection(O), s.current.addTransceiver("audio", { direction: "recvonly" }), s.current.addTransceiver("video", { direction: "recvonly" }), u.current = s.current.createDataChannel("control", {
+        d.current = new RTCPeerConnection(K), d.current.addTransceiver("audio", { direction: "recvonly" });
+        const c = d.current.addTransceiver("video", { direction: "recvonly" });
+        if (RTCRtpReceiver.getCapabilities) {
+          const r = RTCRtpReceiver.getCapabilities("video");
+          if (r && r.codecs) {
+            const p = r.codecs.sort((a, f) => {
+              const y = (g) => {
+                const M = g.mimeType.toLowerCase();
+                return M.includes("vp9") ? 1 : M.includes("h265") || M.includes("hevc") ? 2 : M.includes("h264") || M.includes("avc") ? 3 : 4;
+              };
+              return y(a) - y(f);
+            });
+            c.setCodecPreferences(p), T("Set codec preferences:", p.map((a) => a.mimeType).join(", "));
+          }
+        }
+        if (C.current = d.current.createDataChannel("control", {
           ordered: !0,
           negotiated: !0,
           id: 1
-        }), u.current.onopen = () => {
-          if (C("Control channel opened"), c.current && (c.current.send(JSON.stringify({ type: "requestFrame", sessionId: g })), l))
+        }), C.current.onopen = () => {
+          if (O("Control channel opened"), E.current && (E.current.send(JSON.stringify({ type: "requestFrame", sessionId: h })), l))
             try {
-              const t = decodeURIComponent(l);
-              C("Opening URL"), c.current.send(
+              const r = decodeURIComponent(l);
+              O("Opening URL"), E.current.send(
                 JSON.stringify({
                   type: "openUrl",
-                  url: t,
-                  sessionId: g
+                  url: r,
+                  sessionId: h
                 })
               );
-            } catch (t) {
-              console.error({ error: t }, "Error decoding URL, falling back to the original URL"), c.current.send(
+            } catch (r) {
+              console.error({ error: r }, "Error decoding URL, falling back to the original URL"), E.current.send(
                 JSON.stringify({
                   type: "openUrl",
                   url: l,
-                  sessionId: g
+                  sessionId: h
                 })
               );
             }
-        }, u.current.onclose = () => {
-          C("Control channel closed");
-        }, u.current.onerror = (t) => {
-          console.error("Control channel error:", t), C("Control channel error: " + t);
-        }, s.current.onconnectionstatechange = () => {
-          C("Connection state: " + s.current?.connectionState), d(s.current?.connectionState === "connected");
-        }, s.current.oniceconnectionstatechange = () => {
-          C("ICE state: " + s.current?.iceConnectionState);
-        }, s.current.ontrack = (t) => {
-          C("Received remote track: " + t.track.kind), t.track.kind === "video" && o.current && (N(`[${(/* @__PURE__ */ new Date()).toISOString()}] Video track received:`, t.track), o.current.srcObject = t.streams[0]);
-        }, s.current.onicecandidate = (t) => {
-          if (t.candidate && c.current) {
+        }, C.current.onclose = () => {
+          O("Control channel closed");
+        }, C.current.onerror = (r) => {
+          console.error("Control channel error:", r), O("Control channel error: " + r);
+        }, d.current.onconnectionstatechange = () => {
+          O("Connection state: " + d.current?.connectionState), _(d.current?.connectionState === "connected");
+        }, d.current.oniceconnectionstatechange = () => {
+          O("ICE state: " + d.current?.iceConnectionState);
+        }, d.current.ontrack = (r) => {
+          O("Received remote track: " + r.track.kind), r.track.kind === "video" && o.current && (T(`[${(/* @__PURE__ */ new Date()).toISOString()}] Video track received:`, r.track), o.current.srcObject = r.streams[0]);
+        }, d.current.onicecandidate = (r) => {
+          if (r.candidate && E.current) {
             const n = {
               type: "candidate",
-              candidate: t.candidate.candidate,
-              sdpMid: t.candidate.sdpMid,
-              sdpMLineIndex: t.candidate.sdpMLineIndex,
-              sessionId: g
+              candidate: r.candidate.candidate,
+              sdpMid: r.candidate.sdpMid,
+              sdpMLineIndex: r.candidate.sdpMLineIndex,
+              sessionId: h
             };
-            c.current.send(JSON.stringify(n)), C("Sent ICE candidate");
+            E.current.send(JSON.stringify(n)), O("Sent ICE candidate");
           } else
-            C("ICE candidate gathering completed");
-        }, c.current.onmessage = async (t) => {
+            O("ICE candidate gathering completed");
+        }, E.current.onmessage = async (r) => {
           let n;
           try {
-            n = JSON.parse(t.data);
-          } catch (_) {
-            Y("Error parsing message:", _);
+            n = JSON.parse(r.data);
+          } catch (p) {
+            Y("Error parsing message:", p);
             return;
           }
-          switch (C("Received: " + n.type), n.type) {
+          switch (O("Received: " + n.type), n.type) {
             case "answer":
-              if (!s.current) {
-                C("No peer connection, skipping answer");
+              if (!d.current) {
+                O("No peer connection, skipping answer");
                 break;
               }
-              await s.current.setRemoteDescription(
+              await d.current.setRemoteDescription(
                 new RTCSessionDescription({
                   type: "answer",
                   sdp: n.sdp
                 })
-              ), C("Set remote description");
+              ), O("Set remote description");
               break;
             case "candidate":
-              if (!s.current) {
-                C("No peer connection, skipping candidate");
+              if (!d.current) {
+                O("No peer connection, skipping candidate");
                 break;
               }
-              await s.current.addIceCandidate(
+              await d.current.addIceCandidate(
                 new RTCIceCandidate({
                   candidate: n.candidate,
                   sdpMid: n.sdpMid,
                   sdpMLineIndex: n.sdpMLineIndex
                 })
-              ), C("Added ICE candidate");
+              ), O("Added ICE candidate");
               break;
             case "screenshot":
               if (typeof n.id != "string" || typeof n.dataUri != "string") {
                 Y("Received invalid screenshot success message:", n);
                 break;
               }
-              const _ = R.current.get(n.id);
-              if (!_) {
+              const p = I.current.get(n.id);
+              if (!p) {
                 Y(`Received screenshot data for unknown or handled id: ${n.id}`);
                 break;
               }
-              N(`Received screenshot data for id ${n.id}`), _({ dataUri: n.dataUri }), R.current.delete(n.id), I.current.delete(n.id);
+              T(`Received screenshot data for id ${n.id}`), p({ dataUri: n.dataUri }), I.current.delete(n.id), U.current.delete(n.id);
               break;
             case "screenshotError":
               if (typeof n.id != "string" || typeof n.message != "string") {
                 Y("Received invalid screenshot error message:", n);
                 break;
               }
-              const T = I.current.get(n.id);
-              if (!T) {
+              const a = U.current.get(n.id);
+              if (!a) {
                 Y(`Received screenshot error for unknown or handled id: ${n.id}`);
                 break;
               }
-              Y(`Received screenshot error for id ${n.id}: ${n.message}`), T(new Error(n.message)), R.current.delete(n.id), I.current.delete(n.id);
+              Y(`Received screenshot error for id ${n.id}: ${n.message}`), a(new Error(n.message)), I.current.delete(n.id), U.current.delete(n.id);
               break;
             default:
               Y(`Received unhandled message type: ${n.type}`, n);
               break;
           }
-        }, s.current) {
-          const t = await s.current.createOffer({
+        }, d.current) {
+          const r = await d.current.createOffer({
             offerToReceiveVideo: !0,
             offerToReceiveAudio: !1
           });
-          await s.current.setLocalDescription(t), c.current && c.current.send(
+          await d.current.setLocalDescription(r), E.current && E.current.send(
             JSON.stringify({
               type: "offer",
-              sdp: t.sdp,
-              sessionId: g
+              sdp: r.sdp,
+              sessionId: h
             })
-          ), C("Sent offer");
+          ), O("Sent offer");
         }
-      } catch (r) {
-        C("Error: " + r);
+      } catch (t) {
+        O("Error: " + t);
       }
     }, ie = () => {
-      c.current && (c.current.close(), c.current = null), s.current && (s.current.close(), s.current = null), o.current && (o.current.srcObject = null), u.current && (u.current.close(), u.current = null), d(!1), C("Stopped");
+      E.current && (E.current.close(), E.current = null), d.current && (d.current.close(), d.current = null), o.current && (o.current.srcObject = null), C.current && (C.current.close(), C.current = null), _(!1), O("Stopped");
     };
     Ke(() => (Ee(), document.hidden || j(), document.addEventListener("visibilitychange", z), () => {
       Z(), ie(), document.removeEventListener("visibilitychange", z);
-    }), [a, D, i]);
+    }), [u, D, s]);
     const se = () => {
       o.current && o.current.focus();
     };
-    return le(f, () => ({
-      openUrl: (r) => {
-        if (!c.current || c.current.readyState !== WebSocket.OPEN) {
+    return le(A, () => ({
+      openUrl: (t) => {
+        if (!E.current || E.current.readyState !== WebSocket.OPEN) {
           Y("WebSocket not open, cannot send open_url command via ref.");
           return;
         }
         try {
-          const O = decodeURIComponent(r);
-          C("Opening URL"), c.current.send(
+          const K = decodeURIComponent(t);
+          O("Opening URL"), E.current.send(
             JSON.stringify({
               type: "openUrl",
-              url: O,
-              sessionId: g
+              url: K,
+              sessionId: h
             })
           );
-        } catch (O) {
-          Y("Error decoding or sending URL via ref:", { error: O, url: r }), c.current.send(
+        } catch (K) {
+          Y("Error decoding or sending URL via ref:", { error: K, url: t }), E.current.send(
             JSON.stringify({
               type: "openUrl",
-              url: r,
-              sessionId: g
+              url: t,
+              sessionId: h
             })
           );
         }
       },
-      sendKeyEvent: (r) => {
-        if (!u.current || u.current.readyState !== "open") {
-          Y("Data channel not ready for imperative key command:", u.current?.readyState);
+      sendKeyEvent: (t) => {
+        if (!C.current || C.current.readyState !== "open") {
+          Y("Data channel not ready for imperative key command:", C.current?.readyState);
           return;
         }
-        const O = oe[r.code];
-        if (!O) {
-          Y(`Unknown event.code for imperative command: ${r.code}`);
+        const K = oe[t.code];
+        if (!K) {
+          Y(`Unknown event.code for imperative command: ${t.code}`);
           return;
         }
-        let t = e.META_NONE;
-        r.shiftKey && (t |= e.META_SHIFT_ON), r.altKey && (t |= e.META_ALT_ON), r.ctrlKey && (t |= e.META_CTRL_ON), r.metaKey && (t |= e.META_META_ON);
-        const n = r.type === "keydown" ? e.ACTION_DOWN : e.ACTION_UP;
-        N(
-          `Sending Imperative Key Command: code=${r.code}, keycode=${O}, action=${n}, meta=${t}`
+        let c = e.META_NONE;
+        t.shiftKey && (c |= e.META_SHIFT_ON), t.altKey && (c |= e.META_ALT_ON), t.ctrlKey && (c |= e.META_CTRL_ON), t.metaKey && (c |= e.META_META_ON);
+        const r = t.type === "keydown" ? e.ACTION_DOWN : e.ACTION_UP;
+        T(
+          `Sending Imperative Key Command: code=${t.code}, keycode=${K}, action=${r}, meta=${c}`
         );
-        const _ = B(
-          n,
-          O,
+        const n = B(
+          r,
+          K,
           0,
           // repeat count, typically 0 for single presses
-          t
+          c
         );
-        _ && U(_);
+        n && L(n);
       },
-      screenshot: () => new Promise((r, O) => {
-        if (!c.current || c.current.readyState !== WebSocket.OPEN)
-          return Y("WebSocket not open, cannot send screenshot command."), O(new Error("WebSocket is not connected or connection is not open."));
-        const t = `ui-ss-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`, n = {
+      screenshot: () => new Promise((t, K) => {
+        if (!E.current || E.current.readyState !== WebSocket.OPEN)
+          return Y("WebSocket not open, cannot send screenshot command."), K(new Error("WebSocket is not connected or connection is not open."));
+        const c = `ui-ss-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`, r = {
           type: "screenshot",
           // Matches the type expected by instance API
-          id: t
+          id: c
         };
-        R.current.set(t, r), I.current.set(t, O), N("Sending screenshot request:", n);
+        I.current.set(c, t), U.current.set(c, K), T("Sending screenshot request:", r);
         try {
-          c.current.send(JSON.stringify(n));
-        } catch (_) {
-          Y("Failed to send screenshot request immediately:", _), R.current.delete(t), I.current.delete(t), O(_);
+          E.current.send(JSON.stringify(r));
+        } catch (n) {
+          Y("Failed to send screenshot request immediately:", n), I.current.delete(c), U.current.delete(c), K(n);
           return;
         }
         setTimeout(() => {
-          R.current.has(t) && (Y(`Screenshot request timed out for id ${t}`), I.current.get(t)?.(new Error("Screenshot request timed out")), R.current.delete(t), I.current.delete(t));
+          I.current.has(c) && (Y(`Screenshot request timed out for id ${c}`), U.current.get(c)?.(new Error("Screenshot request timed out")), I.current.delete(c), U.current.delete(c));
         }, 3e4);
       })
     })), /* @__PURE__ */ ne(
       "div",
       {
-        className: Ye(
+        className: fe(
           "rc-container",
           // Use custom CSS class instead of Tailwind
-          E
+          i
         ),
         style: { touchAction: "none" },
-        onMouseDown: m,
-        onMouseMove: m,
-        onMouseUp: m,
-        onMouseLeave: m,
-        onTouchStart: m,
-        onTouchMove: m,
-        onTouchEnd: m,
-        onTouchCancel: m,
+        onMouseDown: S,
+        onMouseMove: S,
+        onMouseUp: S,
+        onMouseLeave: S,
+        onTouchStart: S,
+        onTouchMove: S,
+        onTouchEnd: S,
+        onTouchCancel: S,
         children: [
           /* @__PURE__ */ q(
             "video",
@@ -721,7 +736,7 @@ const Te = De(
               }
             }
           ),
-          !y && /* @__PURE__ */ ne("div", { className: "rc-placeholder-wrapper", children: [
+          !N && /* @__PURE__ */ ne("div", { className: "rc-placeholder-wrapper", children: [
             /* @__PURE__ */ q("div", { className: "rc-spinner" }),
             /* @__PURE__ */ q("p", { className: "rc-placeholder-content", children: "Connecting..." })
           ] })

package/package.json

@@ -1,45 +1,45 @@
 {
-  "name": "@limrun/ui",
-  "version": "0.1.0",
-  "publishConfig": {
-    "access": "public"
-  },
-  "main": "./dist/index.js",
-  "module": "./dist/index.js",
-  "types": "./dist/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js",
-      "require": "./dist/index.cjs"
+    "name": "@limrun/ui",
+    "version": "0.3.0",
+    "publishConfig": {
+      "access": "public"
     },
-    "./package.json": "./package.json"
-  },
-  "scripts": {
-    "dev": "vite",
-    "build": "tsc && vite build",
-    "prepublishOnly": "npm run build",
-    "lint": "eslint .",
-    "preview": "vite preview"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/limrun-inc/typescript-sdk",
-    "directory": "packages/ui"
-  },
-  "license": "MIT",
-  "devDependencies": {
-    "@types/react": "^19.1.12",
-    "@types/react-dom": "^19.1.9",
-    "@vitejs/plugin-react-swc": "^4.0.1",
-    "path": "^0.12.7",
-    "react": "^19.1.1",
-    "react-dom": "^19.1.1",
-    "vite": "^7.1.4",
-    "vite-plugin-dts": "^4.5.4",
-    "vite-plugin-lib-inject-css": "^2.2.2"
-  },
-  "dependencies": {
-    "clsx": "^2.1.1"
-  }
-}
+    "main": "./dist/index.js",
+    "module": "./dist/index.js",
+    "types": "./dist/index.d.ts",
+    "exports": {
+      ".": {
+        "types": "./dist/index.d.ts",
+        "import": "./dist/index.js",
+        "require": "./dist/index.cjs"
+      },
+      "./package.json": "./package.json"
+    },
+    "scripts": {
+      "dev": "vite",
+      "build": "tsc && vite build",
+      "prepublishOnly": "npm run build",
+      "lint": "eslint .",
+      "preview": "vite preview"
+    },
+    "repository": {
+      "type": "git",
+      "url": "https://github.com/limrun-inc/typescript-sdk",
+      "directory": "packages/ui"
+    },
+    "license": "MIT",
+    "devDependencies": {
+      "@types/react": "^19.1.12",
+      "@types/react-dom": "^19.1.9",
+      "@vitejs/plugin-react-swc": "^4.0.1",
+      "path": "^0.12.7",
+      "react": "^19.1.1",
+      "react-dom": "^19.1.1",
+      "vite": "^7.1.4",
+      "vite-plugin-dts": "^4.5.4",
+      "vite-plugin-lib-inject-css": "^2.2.2"
+    },
+    "dependencies": {
+      "clsx": "^2.1.1"
+    }
+  }

package/src/components/remote-control.tsx

@@ -486,7 +486,33 @@ export const RemoteControl = forwardRef<RemoteControlHandle, RemoteControlProps>
         const rtcConfig = await rtcConfigPromise;
         peerConnectionRef.current = new RTCPeerConnection(rtcConfig);
         peerConnectionRef.current.addTransceiver('audio', { direction: 'recvonly' });
-        peerConnectionRef.current.addTransceiver('video', { direction: 'recvonly' });
+        const videoTransceiver = peerConnectionRef.current.addTransceiver('video', { direction: 'recvonly' });
+
+        // As hardware encoder, we use H265 for iOS and VP9 for Android.
+        // We make sure these two are the first ones in the list.
+        // If not, the fallback is H264 which is also hardware accelerated, although not as good,
+        // available on all platforms.
+        //
+        // The rest is not important.
+        if (RTCRtpReceiver.getCapabilities) {
+          const capabilities = RTCRtpReceiver.getCapabilities('video');
+          if (capabilities && capabilities.codecs) {
+            const codecs = capabilities.codecs;
+            const sortedCodecs = codecs.sort((a, b) => {
+              const getCodecPriority = (codec: { mimeType: string }): number => {
+                const mimeType = codec.mimeType.toLowerCase();
+                if (mimeType.includes('vp9')) return 1;
+                if (mimeType.includes('h265') || mimeType.includes('hevc')) return 2;
+                if (mimeType.includes('h264') || mimeType.includes('avc')) return 3;
+                return 4; // Everything else
+              };
+              return getCodecPriority(a) - getCodecPriority(b);
+            });
+            videoTransceiver.setCodecPreferences(sortedCodecs);
+            debugLog('Set codec preferences:', sortedCodecs.map(c => c.mimeType).join(', '));
+          }
+        }
+
         dataChannelRef.current = peerConnectionRef.current.createDataChannel('control', {
           ordered: true,
           negotiated: true,

package/tsconfig.json

@@ -1,26 +1,26 @@
 {
-  "compilerOptions": {
-    "target": "ES2020",
-    "useDefineForClassFields": true,
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
-    "module": "ESNext",
-    "skipLibCheck": true,
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": false,
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": false,
-    "emitDeclarationOnly": true,
-    "declaration": true,
-    "declarationDir": "dist",
-    "jsx": "react-jsx",
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true,
-    "outDir": "dist"
-  },
-  "include": ["src"],
-  "exclude": ["**/*.test.ts", "**/*.test.tsx", "node_modules", "dist"],
-  "references": [{ "path": "./tsconfig.node.json" }]
-}
+    "compilerOptions": {
+      "target": "ES2020",
+      "useDefineForClassFields": true,
+      "lib": ["ES2020", "DOM", "DOM.Iterable"],
+      "module": "ESNext",
+      "skipLibCheck": true,
+      "moduleResolution": "bundler",
+      "allowImportingTsExtensions": false,
+      "resolveJsonModule": true,
+      "isolatedModules": true,
+      "noEmit": false,
+      "emitDeclarationOnly": true,
+      "declaration": true,
+      "declarationDir": "dist",
+      "jsx": "react-jsx",
+      "strict": true,
+      "noUnusedLocals": true,
+      "noUnusedParameters": true,
+      "noFallthroughCasesInSwitch": true,
+      "outDir": "dist"
+    },
+    "include": ["src"],
+    "exclude": ["**/*.test.ts", "**/*.test.tsx", "node_modules", "dist"],
+    "references": [{ "path": "./tsconfig.node.json" }]
+  }

package/tsconfig.node.json

@@ -1,26 +1,26 @@
 {
-  "compilerOptions": {
-    "composite": true,
-    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
-    "target": "ES2022",
-    "lib": ["ES2023"],
-    "module": "ESNext",
-    "skipLibCheck": true,
-
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "isolatedModules": true,
-    "moduleDetection": "force",
-    "noEmit": false,
-    "emitDeclarationOnly": true,
-
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true
-  },
-  "include": ["vite.config.ts"]
-}
+    "compilerOptions": {
+      "composite": true,
+      "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+      "target": "ES2022",
+      "lib": ["ES2023"],
+      "module": "ESNext",
+      "skipLibCheck": true,
+  
+      /* Bundler mode */
+      "moduleResolution": "bundler",
+      "allowImportingTsExtensions": true,
+      "isolatedModules": true,
+      "moduleDetection": "force",
+      "noEmit": false,
+      "emitDeclarationOnly": true,
+  
+      /* Linting */
+      "strict": true,
+      "noUnusedLocals": true,
+      "noUnusedParameters": true,
+      "noFallthroughCasesInSwitch": true,
+      "noUncheckedSideEffectImports": true
+    },
+    "include": ["vite.config.ts"]
+  }