@limrun/ui 0.5.0 → 0.5.2

package/package.json

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

package/src/components/remote-control.tsx

@@ -7,6 +7,8 @@ import { ANDROID_KEYS, AMOTION_EVENT, codeMap } from '../core/constants';
 import iphoneFrameImage from '../assets/iphone16pro_black_bg.webp';
 import pixelFrameImage from '../assets/pixel9_black.webp';
 import pixelFrameImageLandscape from '../assets/pixel9_black_landscape.webp';
+import pixelTabletFrameImage from '../assets/pixel_tablet_portrait.webp';
+import pixelTabletFrameImageLandscape from '../assets/pixel_tablet_landscape.webp';
 import iphoneFrameImageLandscape from '../assets/iphone16pro_black_landscape_bg.webp';
 import appleLogoSvg from '../assets/Apple_logo_white.svg';
 import androidBootImage from '../assets/android_boot.webp';
@@ -68,6 +70,7 @@ export interface RemoteControlHandle {
   openUrl: (url: string) => void;
   sendKeyEvent: (event: ImperativeKeyboardEvent) => void;
   screenshot: () => Promise<ScreenshotData>;
+  terminateApp: (bundleId: string) => Promise<void>;
 }
 
 const debugLog = (...args: any[]) => {
@@ -114,6 +117,13 @@ type DeviceConfig = {
   }
 }
 
+const ANDROID_TABLET_VIDEO_WIDTH = 1920;
+const ANDROID_TABLET_VIDEO_HEIGHT = 1200;
+
+const isAndroidTabletVideo = (width: number, height: number): boolean =>
+  (width === ANDROID_TABLET_VIDEO_WIDTH && height === ANDROID_TABLET_VIDEO_HEIGHT) ||
+  (width === ANDROID_TABLET_VIDEO_HEIGHT && height === ANDROID_TABLET_VIDEO_WIDTH);
+
 // Device-specific configuration for frame sizing and video positioning
 // Video position percentages are relative to the frame image dimensions
 const deviceConfig: Record<DevicePlatform, DeviceConfig> = {
@@ -184,6 +194,7 @@ export const RemoteControl = forwardRef<RemoteControlHandle, RemoteControlProps>
     const frameRef = useRef<HTMLImageElement>(null);
     const [videoLoaded, setVideoLoaded] = useState(false);
     const [isLandscape, setIsLandscape] = useState(false);
+    const [useAndroidTabletFrame, setUseAndroidTabletFrame] = useState(false);
     const [videoStyle, setVideoStyle] = useState<React.CSSProperties>({});
     const wsRef = useRef<WebSocket | null>(null);
     const peerConnectionRef = useRef<RTCPeerConnection | null>(null);
@@ -193,6 +204,8 @@ export const RemoteControl = forwardRef<RemoteControlHandle, RemoteControlProps>
       Map<string, (value: ScreenshotData | PromiseLike<ScreenshotData>) => void>
     >(new Map());
     const pendingScreenshotRejectersRef = useRef<Map<string, (reason?: any) => void>>(new Map());
+    const pendingTerminateAppResolversRef = useRef<Map<string, () => void>>(new Map());
+    const pendingTerminateAppRejectersRef = useRef<Map<string, (reason?: any) => void>>(new Map());
 
     // Map to track active pointers for real touch/mouse single-finger events.
     // Key: pointerId (-1 for mouse, touch.identifier for touch), Value: { x: number, y: number }
@@ -1273,6 +1286,33 @@ export const RemoteControl = forwardRef<RemoteControlHandle, RemoteControlProps>
               pendingScreenshotResolversRef.current.delete(message.id);
               pendingScreenshotRejectersRef.current.delete(message.id);
               break;
+            case 'terminateAppResult':
+              if (typeof message.id !== 'string') {
+                debugWarn('Received invalid terminateApp result message:', message);
+                break;
+              }
+              if (typeof message.error === 'string') {
+                const terminateRejecter = pendingTerminateAppRejectersRef.current.get(message.id);
+                if (!terminateRejecter) {
+                  debugWarn(`Received terminateApp error for unknown or handled id: ${message.id}`);
+                  break;
+                }
+                debugWarn(`Received terminateApp error for id ${message.id}: ${message.error}`);
+                terminateRejecter(new Error(message.error));
+                pendingTerminateAppResolversRef.current.delete(message.id);
+                pendingTerminateAppRejectersRef.current.delete(message.id);
+                break;
+              }
+              const terminateResolver = pendingTerminateAppResolversRef.current.get(message.id);
+              if (!terminateResolver) {
+                debugWarn(`Received terminateApp result for unknown or handled id: ${message.id}`);
+                break;
+              }
+              debugLog(`Received terminateApp success for id ${message.id}`);
+              terminateResolver();
+              pendingTerminateAppResolversRef.current.delete(message.id);
+              pendingTerminateAppRejectersRef.current.delete(message.id);
+              break;
             default:
               debugWarn(`Received unhandled message type: ${message.type}`, message);
               break;
@@ -1367,6 +1407,9 @@ export const RemoteControl = forwardRef<RemoteControlHandle, RemoteControlProps>
         // Determine landscape based on video's intrinsic dimensions
         const landscape = video.videoWidth > video.videoHeight;
         setIsLandscape(landscape);
+        setUseAndroidTabletFrame(
+          platform === 'android' && isAndroidTabletVideo(video.videoWidth, video.videoHeight),
+        );
         
         const pos = landscape ? config.videoPosition.landscape : config.videoPosition.portrait;
         let newStyle: React.CSSProperties = {};
@@ -1518,10 +1561,51 @@ export const RemoteControl = forwardRef<RemoteControlHandle, RemoteControlProps>
           }, 30000); // 30-second timeout
         });
       },
+      terminateApp: (bundleId: string): Promise<void> => {
+        return new Promise<void>((resolve, reject) => {
+          if (!wsRef.current || wsRef.current.readyState !== WebSocket.OPEN) {
+            debugWarn('WebSocket not open, cannot send terminateApp command.');
+            return reject(new Error('WebSocket is not connected or connection is not open.'));
+          }
+          const id = `ui-term-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;
+          const request = {
+            type: 'terminateApp',
+            id,
+            bundleId,
+          };
+
+          pendingTerminateAppResolversRef.current.set(id, resolve);
+          pendingTerminateAppRejectersRef.current.set(id, reject);
+
+          debugLog('Sending terminateApp request:', request);
+          try {
+            wsRef.current.send(JSON.stringify(request));
+          } catch (err) {
+            debugWarn('Failed to send terminateApp request immediately:', err);
+            pendingTerminateAppResolversRef.current.delete(id);
+            pendingTerminateAppRejectersRef.current.delete(id);
+            reject(err);
+            return;
+          }
+
+          setTimeout(() => {
+            if (pendingTerminateAppResolversRef.current.has(id)) {
+              debugWarn(`terminateApp request timed out for id ${id}`);
+              pendingTerminateAppRejectersRef.current.get(id)?.(new Error('terminateApp request timed out'));
+              pendingTerminateAppResolversRef.current.delete(id);
+              pendingTerminateAppRejectersRef.current.delete(id);
+            }
+          }, 30000);
+        });
+      },
     }));
 
     // Show indicators when Alt is held and we have a valid hover point (null when outside)
     const showAltIndicators = isAltHeld && hoverPoint !== null;
+    const frameImageSrc =
+      platform === 'android' && useAndroidTabletFrame
+        ? (isLandscape ? pixelTabletFrameImageLandscape : pixelTabletFrameImage)
+        : (isLandscape ? config.frame.imageLandscape : config.frame.image);
 
     return (
       <div
@@ -1563,7 +1647,7 @@ export const RemoteControl = forwardRef<RemoteControlHandle, RemoteControlProps>
         {showFrame && (
           <img
             ref={frameRef}
-            src={isLandscape ? config.frame.imageLandscape : config.frame.image}
+            src={frameImageSrc}
             alt=""
             className={platform === 'ios' ? clsx('rc-phone-frame', 'rc-phone-frame-ios') : 'rc-phone-frame'}
             draggable={false}

package/src/index.ts

@@ -1 +1,2 @@
 export { RemoteControl } from './components/remote-control';
+export type { RemoteControlHandle } from './components/remote-control';