@limrun/ui 0.4.2 → 0.4.3

package/dist/index.css

@@ -1 +1 @@
-.rc-container{position:relative;display:flex;align-items:center;justify-content:center;box-sizing:border-box;isolation:isolate;touch-action:none;width:100%;height:100%}.rc-phone-frame{position:relative;z-index:30;display:block;pointer-events:none;-webkit-user-select:none;user-select:none;width:auto;height:auto;max-width:100%;max-height:100%}.rc-video{position:absolute;z-index:20;outline:none;pointer-events:none;cursor:none;background-color:#000;object-fit:contain;object-position:center center;inset:50% auto auto 50%;transform:translate(-50%,-50%)}.rc-video-frameless{position:relative;top:auto;left:auto;transform:none;max-width:100%;max-height:100%}.rc-video-loading{aspect-ratio:9 / 19.5}
+.rc-container{position:relative;display:flex;align-items:center;justify-content:center;box-sizing:border-box;isolation:isolate;touch-action:none;width:100%;height:100%}.rc-phone-frame{position:relative;z-index:30;display:block;pointer-events:none;-webkit-user-select:none;user-select:none;width:auto;height:auto;max-width:100%;max-height:100%}.rc-phone-frame-ios{z-index:10}.rc-video{position:absolute;z-index:20;outline:none;pointer-events:none;cursor:none;background-color:#000;object-fit:contain;object-position:center center;inset:50% auto auto 50%;transform:translate(-50%,-50%)}.rc-video-frameless{position:relative;top:auto;left:auto;transform:none;max-width:100%;max-height:100%}.rc-video-loading{aspect-ratio:9 / 19.5}

package/dist/index.js

@@ -1,19 +1,19 @@
-import { jsxs as KA, jsx as iA } from "react/jsx-runtime";
-import { forwardRef as wA, useRef as h, useState as _, useMemo as IA, useEffect as nA, useImperativeHandle as aA } from "react";
-import './index.css';function sA(C) {
+import { jsxs as KA, jsx as nA } from "react/jsx-runtime";
+import { forwardRef as wA, useRef as h, useState as _, useMemo as zA, useEffect as sA, useImperativeHandle as aA } from "react";
+import './index.css';function tA(C) {
   var s, D, B = "";
   if (typeof C == "string" || typeof C == "number") B += C;
   else if (typeof C == "object") if (Array.isArray(C)) {
     var d = C.length;
-    for (s = 0; s < d; s++) C[s] && (D = sA(C[s])) && (B && (B += " "), B += D);
+    for (s = 0; s < d; s++) C[s] && (D = tA(C[s])) && (B && (B += " "), B += D);
   } else for (D in C) C[D] && (B && (B += " "), B += D);
   return B;
 }
-function zA() {
-  for (var C, s, D = 0, B = "", d = arguments.length; D < d; D++) (C = arguments[D]) && (s = sA(C)) && (B && (B += " "), B += s);
+function $() {
+  for (var C, s, D = 0, B = "", d = arguments.length; D < d; D++) (C = arguments[D]) && (s = tA(C)) && (B && (B += " "), B += s);
   return B;
 }
-const $ = {
+const AA = {
   INJECT_KEYCODE: 0,
   INJECT_TOUCH_EVENT: 2,
   SET_CLIPBOARD: 9
@@ -149,7 +149,7 @@ const $ = {
   KEYCODE_NUMPAD_COMMA: 159,
   KEYCODE_NUMPAD_ENTER: 160,
   KEYCODE_NUMPAD_EQUALS: 161
-}, tA = {
+}, rA = {
   KeyA: A.KEYCODE_A,
   KeyB: A.KEYCODE_B,
   KeyC: A.KEYCODE_C,
@@ -259,17 +259,17 @@ const $ = {
 function uA(C, s, D, B, d, m, z = 1, r = 0, l = 0) {
   const W = new ArrayBuffer(32), K = new DataView(W);
   let Q = 0;
-  return K.setUint8(Q, $.INJECT_TOUCH_EVENT), Q += 1, K.setUint8(Q, C), Q += 1, K.setBigInt64(Q, BigInt(s)), Q += 8, K.setInt32(Q, Math.round(d), !0), Q += 4, K.setInt32(Q, Math.round(m), !0), Q += 4, K.setUint16(Q, D, !0), Q += 2, K.setUint16(Q, B, !0), Q += 2, K.setInt16(Q, Math.round(z * 65535), !0), Q += 2, K.setInt32(Q, r, !0), Q += 4, K.setInt32(Q, l, !0), W;
+  return K.setUint8(Q, AA.INJECT_TOUCH_EVENT), Q += 1, K.setUint8(Q, C), Q += 1, K.setBigInt64(Q, BigInt(s)), Q += 8, K.setInt32(Q, Math.round(d), !0), Q += 4, K.setInt32(Q, Math.round(m), !0), Q += 4, K.setUint16(Q, D, !0), Q += 2, K.setUint16(Q, B, !0), Q += 2, K.setInt16(Q, Math.round(z * 65535), !0), Q += 2, K.setInt32(Q, r, !0), Q += 4, K.setInt32(Q, l, !0), W;
 }
 function jA(C, s = !0) {
   const B = new TextEncoder().encode(C), d = new ArrayBuffer(14 + B.length), m = new DataView(d);
   let z = 0;
-  return m.setUint8(z, $.SET_CLIPBOARD), z += 1, m.setBigInt64(z, BigInt(0), !1), z += 8, m.setUint8(z, s ? 1 : 0), z += 1, m.setUint32(z, B.length, !1), z += 4, new Uint8Array(d, z).set(B), d;
+  return m.setUint8(z, AA.SET_CLIPBOARD), z += 1, m.setBigInt64(z, BigInt(0), !1), z += 8, m.setUint8(z, s ? 1 : 0), z += 1, m.setUint32(z, B.length, !1), z += 4, new Uint8Array(d, z).set(B), d;
 }
 function P(C, s, D = 0, B = 0) {
   const d = new ArrayBuffer(14), m = new DataView(d);
   let z = 0;
-  return m.setUint8(z, $.INJECT_KEYCODE), z += 1, m.setUint8(z, C), z += 1, m.setInt32(z, s, !0), z += 4, m.setInt32(z, D, !0), z += 4, m.setInt32(z, B, !0), d;
+  return m.setUint8(z, AA.INJECT_KEYCODE), z += 1, m.setUint8(z, C), z += 1, m.setInt32(z, s, !0), z += 4, m.setInt32(z, D, !0), z += 4, m.setInt32(z, B, !0), d;
 }
 const w = (...C) => {
   window.debugRemoteControl && console.log(...C);
@@ -306,7 +306,7 @@ const w = (...C) => {
   }
 };
 function SA(C) {
-  const s = C.code, D = tA[s];
+  const s = C.code, D = rA[s];
   if (!D)
     return O(`Unknown event.code: ${s}, key: ${C.key}`), null;
   let B = A.META_NONE;
@@ -316,10 +316,10 @@ function SA(C) {
 }
 const lA = wA(
   ({ className: C, url: s, token: D, sessionId: B, openUrl: d, showFrame: m = !0 }, z) => {
-    const r = h(null), l = h(null), [W, K] = _(!1), [Q, rA] = _(!1), [QA, AA] = _({}), i = h(null), Y = h(null), o = h(null), v = h(void 0), j = h(/* @__PURE__ */ new Map()), f = h(/* @__PURE__ */ new Map()), a = h(/* @__PURE__ */ new Map()), U = IA(
+    const r = h(null), l = h(null), [W, K] = _(!1), [Q, QA] = _(!1), [cA, eA] = _({}), i = h(null), Y = h(null), o = h(null), v = h(void 0), j = h(/* @__PURE__ */ new Map()), f = h(/* @__PURE__ */ new Map()), a = h(/* @__PURE__ */ new Map()), U = zA(
       () => B || Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15),
       [B]
-    ), cA = IA(() => fA(s), [s]), R = vA[cA], Z = (e) => {
+    ), EA = zA(() => fA(s), [s]), R = vA[EA], Z = (e) => {
       w(e);
     }, S = (e) => {
       !o.current || o.current.readyState !== "open" || o.current.send(e);
@@ -336,7 +336,7 @@ const lA = wA(
         let b = 0, q = 0;
         V && (b = Math.max(0, Math.min(E, J / T * E)), q = Math.max(0, Math.min(M, L / y * M)));
         let H = null, u = null, OA = 1;
-        const CA = N.BUTTON_PRIMARY;
+        const iA = N.BUTTON_PRIMARY;
         switch (x) {
           case "down":
             V ? (H = N.ACTION_DOWN, u = { x: b, y: q }, a.current.set(I, u), I === -1 && r.current?.focus()) : a.current.delete(I);
@@ -350,7 +350,7 @@ const lA = wA(
             break;
         }
         if (H !== null && u !== null) {
-          const BA = uA(
+          const IA = uA(
             H,
             I,
             E,
@@ -358,10 +358,10 @@ const lA = wA(
             u.x,
             u.y,
             OA,
-            CA,
-            CA
+            iA,
+            iA
           );
-          BA && S(BA);
+          IA && S(IA);
         } else (x === "up" || x === "cancel") && a.current.delete(I);
       };
       if ("touches" in e) {
@@ -405,7 +405,7 @@ const lA = wA(
         }
         t && F(-1, e.clientX, e.clientY, t);
       }
-    }, eA = (e) => {
+    }, MA = (e) => {
       if (e.preventDefault(), e.stopPropagation(), w("Keyboard event:", {
         type: e.type,
         key: e.key,
@@ -478,12 +478,12 @@ const lA = wA(
           sessionId: U
         })
       );
-    }, EA = () => {
+    }, gA = () => {
       v.current && window.clearInterval(v.current), v.current = window.setInterval(DA, 1e4);
-    }, MA = () => {
+    }, CA = () => {
       v.current && (window.clearInterval(v.current), v.current = void 0);
-    }, gA = () => {
-      document.hidden ? MA() : EA();
+    }, BA = () => {
+      document.hidden ? CA() : gA();
     }, YA = async () => {
       try {
         i.current = new WebSocket(`${s}?token=${D}`), i.current.onerror = (E) => {
@@ -657,23 +657,23 @@ const lA = wA(
     }, ZA = () => {
       i.current && (i.current.close(), i.current = null), Y.current && (Y.current.close(), Y.current = null), r.current && (r.current.srcObject = null), o.current && (o.current.close(), o.current = null), Z("Stopped");
     };
-    nA(() => (K(!1), YA(), document.hidden || EA(), document.addEventListener("visibilitychange", gA), () => {
-      MA(), ZA(), document.removeEventListener("visibilitychange", gA);
-    }), [s, D, B]), nA(() => {
+    sA(() => (K(!1), YA(), document.hidden || gA(), document.addEventListener("visibilitychange", BA), () => {
+      CA(), ZA(), document.removeEventListener("visibilitychange", BA);
+    }), [s, D, B]), sA(() => {
       const e = r.current, n = l.current;
       if (!e) return;
       if (!m || !n) {
-        AA({});
+        eA({});
         return;
       }
       const g = () => {
         const M = n.clientWidth, F = n.clientHeight;
         if (M === 0 || F === 0) return;
         const I = e.videoWidth > e.videoHeight;
-        rA(I);
+        QA(I);
         const t = I ? R.videoPosition.landscape : R.videoPosition.portrait;
         let c = {};
-        t.heightMultiplier ? (c.height = `${F * t.heightMultiplier}px`, c.width = "auto") : t.widthMultiplier && (c.width = `${M * t.widthMultiplier}px`, c.height = "auto"), c.borderRadius = `${I ? F * R.videoBorderRadiusMultiplier : M * R.videoBorderRadiusMultiplier}px`, AA(c);
+        t.heightMultiplier ? (c.height = `${F * t.heightMultiplier}px`, c.width = "auto") : t.widthMultiplier && (c.width = `${M * t.widthMultiplier}px`, c.height = "auto"), c.borderRadius = `${I ? F * R.videoBorderRadiusMultiplier : M * R.videoBorderRadiusMultiplier}px`, eA(c);
       }, E = new ResizeObserver(() => {
         g();
       });
@@ -714,7 +714,7 @@ const lA = wA(
           O("Data channel not ready for imperative key command:", o.current?.readyState);
           return;
         }
-        const n = tA[e.code];
+        const n = rA[e.code];
         if (!n) {
           O(`Unknown event.code for imperative command: ${e.code}`);
           return;
@@ -756,7 +756,7 @@ const lA = wA(
     })), /* @__PURE__ */ KA(
       "div",
       {
-        className: zA(
+        className: $(
           "rc-container",
           C
         ),
@@ -770,27 +770,27 @@ const lA = wA(
         onTouchEnd: k,
         onTouchCancel: k,
         children: [
-          m && /* @__PURE__ */ iA(
+          m && /* @__PURE__ */ nA(
             "img",
             {
               ref: l,
               src: Q ? R.frame.imageLandscape : R.frame.image,
               alt: "",
-              className: "rc-phone-frame",
+              className: EA === "ios" ? $("rc-phone-frame", "rc-phone-frame-ios") : "rc-phone-frame",
               draggable: !1
             }
           ),
-          /* @__PURE__ */ iA(
+          /* @__PURE__ */ nA(
             "video",
             {
               ref: r,
-              className: zA(
+              className: $(
                 "rc-video",
                 !m && "rc-video-frameless",
                 !W && "rc-video-loading"
               ),
               style: {
-                ...QA,
+                ...cA,
                 ...R.loadingLogo ? {
                   backgroundImage: `url("${R.loadingLogo}")`,
                   backgroundRepeat: "no-repeat",
@@ -802,8 +802,8 @@ const lA = wA(
               playsInline: !0,
               muted: !0,
               tabIndex: 0,
-              onKeyDown: eA,
-              onKeyUp: eA,
+              onKeyDown: MA,
+              onKeyUp: MA,
               onClick: mA,
               onLoadedMetadata: () => K(!0),
               onFocus: () => {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@limrun/ui",
-    "version": "0.4.2",
+    "version": "0.4.3",
     "publishConfig": {
       "access": "public"
     },

package/src/components/remote-control.css

@@ -23,6 +23,10 @@
   max-height: 100%;
 }
 
+.rc-phone-frame-ios {
+  z-index: 10;
+}
+
 .rc-video {
   position: absolute;
   z-index: 20;

package/src/components/remote-control.tsx

@@ -1013,7 +1013,7 @@ export const RemoteControl = forwardRef<RemoteControlHandle, RemoteControlProps>
             ref={frameRef}
             src={isLandscape ? config.frame.imageLandscape : config.frame.image}
             alt=""
-            className={'rc-phone-frame'}
+            className={platform === 'ios' ? clsx('rc-phone-frame', 'rc-phone-frame-ios') : 'rc-phone-frame'}
             draggable={false}
           />
         )}