@limrun/ui 0.4.0-rc.1 → 0.4.0-rc.10

package/index.html

@@ -133,8 +133,8 @@
       
       .preview-item {
         flex: 1;
-        min-width: 300px;
-        max-width: 500px;
+        height: '20vh';
+        width: '20vh';
       }
       
       .preview-item h3 {
@@ -145,7 +145,8 @@
       }
       
       .device-wrapper {
-        height: 700px;
+        height: 100%;
+        width: 100%;
         background: #f9fafb;
         border-radius: 12px;
         overflow: hidden;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@limrun/ui",
-    "version": "0.4.0-rc.1",
+    "version": "0.4.0-rc.10",
     "publishConfig": {
       "access": "public"
     },

package/src/components/remote-control.css

@@ -1,21 +1,36 @@
 .rc-container {
   position: relative;
   display: inline-block;
-  height: 100%;
   box-sizing: border-box;
   isolation: isolate;
 
   touch-action: none;
 }
 
+.rc-container-portrait {
+  height: 100%;
+}
+
+.rc-container-landscape {
+  width: 100%;
+}
+
 .rc-phone-frame {
   position: relative;
   z-index: 20;
   display: block;
-  height: 100%;
   pointer-events: none;
   user-select: none;
-  border-radius: 16.8% / 8.7%;
+}
+
+.rc-phone-frame-portrait {
+  height: 100%;
+  max-width: 100%;
+}
+
+.rc-phone-frame-landscape {
+  width: 100%;
+  max-height: 100%;
 }
 
 .rc-video {
@@ -27,14 +42,13 @@
   background-color: black;
 }
 
-.rc-video-ios {
-  top: 1.6%;
-  left: 3.9%;
-  height: 96.76%;
+.rc-video-frameless {
+  position: relative;
+  height: 100%;
+  top: auto;
+  left: auto;
 }
 
-.rc-video-android {
-  top: 2.3%;
-  left: 4.5%;
-  height: 95.9%;
-}
+.rc-video-loading {
+  aspect-ratio: 9 / 19.5;
+}

package/src/components/remote-control.tsx

@@ -1,12 +1,15 @@
-import React, { useEffect, useRef, useMemo, forwardRef, useImperativeHandle } from 'react';
+import React, { useEffect, useRef, useMemo, useState, forwardRef, useImperativeHandle } from 'react';
 import { clsx } from 'clsx';
 import './remote-control.css';
 
 import { ANDROID_KEYS, AMOTION_EVENT, codeMap } from '../core/constants';
 
-import iphoneFrameImage from '../assets/iphone16pro_black.webp';
+import iphoneFrameImage from '../assets/iphone16pro_black_bg.webp';
 import pixelFrameImage from '../assets/pixel9_black.webp';
+import pixelFrameImageLandscape from '../assets/pixel9_black_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';
 import {
   createTouchControlMessage,
   createInjectKeycodeMessage,
@@ -41,6 +44,10 @@ interface RemoteControlProps {
   //
   // If not provided, the component will not open any URL.
   openUrl?: string;
+
+  // showFrame controls whether to display the device frame
+  // around the video. Defaults to true.
+  showFrame?: boolean;
 }
 
 interface ScreenshotData {
@@ -84,19 +91,50 @@ const detectPlatform = (url: string): DevicePlatform => {
   return 'ios';
 };
 
+type DeviceConfig = {
+  videoBorderRadiusMultiplier: number;
+  loadingLogo: string;
+  loadingLogoSize: string;
+  videoPosition: {
+    portrait: { top: number; left: number; height: number; };
+    landscape: { top: number; left: number; width: number; };
+  };
+  frame: {
+    image: string;
+    imageLandscape: string;
+  }
+}
+
 // Device-specific configuration for frame sizing and video positioning
-const deviceConfig = {
+// Video position percentages are relative to the frame image dimensions
+const deviceConfig: Record<DevicePlatform, DeviceConfig> = {
   ios: {
-    frameImage: iphoneFrameImage,
-    frameWidthMultiplier: 1.0841,
-    videoBorderRadiusMultiplier: 0.157,
+    frame: {
+      image: iphoneFrameImage,
+      imageLandscape: iphoneFrameImageLandscape,
+    },
+    videoBorderRadiusMultiplier: 0.15,
     loadingLogo: appleLogoSvg,
+    loadingLogoSize: '20%',
+    // Video position as percentage of frame dimensions
+    videoPosition: {
+      portrait: { top: 1.61, left: 3.6, height: 96.78 },
+      landscape: { top: 3.9, left: 1.61, width: 96.78 },
+    },
   },
   android: {
-    frameImage: pixelFrameImage,
-    frameWidthMultiplier: 1.107,
-    videoBorderRadiusMultiplier: 0.137,
-    loadingLogo: null,
+    frame: {
+      image: pixelFrameImage,
+      imageLandscape: pixelFrameImageLandscape,
+    },
+    videoBorderRadiusMultiplier: 0.13,
+    loadingLogo: androidBootImage,
+    loadingLogoSize: '40%',
+    // Video position as percentage of frame dimensions
+    videoPosition: {
+      portrait: { top: 2.1, left: 4.5, height: 96.2 },
+      landscape: { top: 5, left: 2.25, width: 95.9 },
+    },
   },
 };
 
@@ -131,9 +169,12 @@ function getAndroidKeycodeAndMeta(event: React.KeyboardEvent): { keycode: number
 }
 
 export const RemoteControl = forwardRef<RemoteControlHandle, RemoteControlProps>(
-  ({ className, url, token, sessionId: propSessionId, openUrl }: RemoteControlProps, ref) => {
+  ({ className, url, token, sessionId: propSessionId, openUrl, showFrame = true }: RemoteControlProps, ref) => {
     const videoRef = useRef<HTMLVideoElement>(null);
     const frameRef = useRef<HTMLImageElement>(null);
+    const [videoLoaded, setVideoLoaded] = useState(false);
+    const [isLandscape, setIsLandscape] = useState(false);
+    const [videoStyle, setVideoStyle] = useState<React.CSSProperties>({});
     const wsRef = useRef<WebSocket | null>(null);
     const peerConnectionRef = useRef<RTCPeerConnection | null>(null);
     const dataChannelRef = useRef<RTCDataChannel | null>(null);
@@ -752,6 +793,9 @@ export const RemoteControl = forwardRef<RemoteControlHandle, RemoteControlProps>
     };
 
     useEffect(() => {
+      // Reset video loaded state when connection params change
+      setVideoLoaded(false);
+
       // Start connection when component mounts
       start();
 
@@ -771,26 +815,75 @@ export const RemoteControl = forwardRef<RemoteControlHandle, RemoteControlProps>
       };
     }, [url, token, propSessionId]);
 
-    // Resize phone frame and video border-radius relative to video size
+    // Calculate video position and border-radius based on frame dimensions
     useEffect(() => {
       const video = videoRef.current;
       const frame = frameRef.current;
-      if (!video || !frame) return;
 
-      const resizeObserver = new ResizeObserver((entries) => {
-        for (const entry of entries) {
-          const videoWidth = entry.contentRect.width;
-          frame.style.width = `${videoWidth * config.frameWidthMultiplier}px`;
-          video.style.borderRadius = `${videoWidth * config.videoBorderRadiusMultiplier}px`;
+      if (!video) return;
+
+      // If no frame, no positioning needed
+      if (!showFrame || !frame) {
+        setVideoStyle({});
+        return;
+      }
+
+      const updateVideoPosition = () => {
+        const frameWidth = frame.clientWidth;
+        const frameHeight = frame.clientHeight;
+
+        if (frameWidth === 0 || frameHeight === 0) return;
+
+        // Determine landscape based on video's intrinsic dimensions
+        const landscape = video.videoWidth > video.videoHeight;
+        setIsLandscape(landscape);
+
+        const pos = landscape ? config.videoPosition.landscape : config.videoPosition.portrait;
+
+        // Calculate position in pixels based on frame dimensions
+        const topPx = (pos.top / 100) * frameHeight;
+        const leftPx = (pos.left / 100) * frameWidth;
+
+        let newStyle: React.CSSProperties = {
+          top: `${topPx}px`,
+          left: `${leftPx}px`,
+        };
+
+        if ('height' in pos) {
+          const heightPx = (pos.height / 100) * frameHeight;
+          newStyle.height = `${heightPx}px`;
+          newStyle.borderRadius = `${frameWidth * config.videoBorderRadiusMultiplier}px`;
+        } else if ('width' in pos) {
+          const widthPx = (pos.width / 100) * frameWidth;
+          newStyle.width = `${widthPx}px`;
+          newStyle.borderRadius = `${frameHeight * config.videoBorderRadiusMultiplier}px`;
         }
+
+        setVideoStyle(newStyle);
+      };
+
+      const resizeObserver = new ResizeObserver(() => {
+        updateVideoPosition();
       });
 
+      resizeObserver.observe(frame);
       resizeObserver.observe(video);
 
+      // Also update when the frame image loads
+      frame.addEventListener('load', updateVideoPosition);
+
+      // Update when video metadata loads (to get correct intrinsic dimensions)
+      video.addEventListener('loadedmetadata', updateVideoPosition);
+
+      // Initial calculation
+      updateVideoPosition();
+
       return () => {
         resizeObserver.disconnect();
+        video.removeEventListener('loadedmetadata', updateVideoPosition);
+        frame.removeEventListener('load', updateVideoPosition);
       };
-    }, [config]);
+    }, [config, showFrame]);
 
     const handleVideoClick = () => {
       if (videoRef.current) {
@@ -903,7 +996,8 @@ export const RemoteControl = forwardRef<RemoteControlHandle, RemoteControlProps>
     return (
       <div
         className={clsx(
-          'rc-container', // Use custom CSS class instead of Tailwind
+          'rc-container',
+          isLandscape ? 'rc-container-landscape' : 'rc-container-portrait', // Use custom CSS class instead of Tailwind
           className,
         )}
         style={{ touchAction: 'none' }} // Keep touchAction none for the container
@@ -918,26 +1012,33 @@ export const RemoteControl = forwardRef<RemoteControlHandle, RemoteControlProps>
         onTouchEnd={handleInteraction}
         onTouchCancel={handleInteraction}
       >
-        <img
-          ref={frameRef}
-          src={config.frameImage}
-          alt=""
-          className="rc-phone-frame"
-          draggable={false}
-        />
+        {showFrame && (
+          <img
+            ref={frameRef}
+            src={isLandscape ? config.frame.imageLandscape : config.frame.image}
+            alt=""
+            className={clsx('rc-phone-frame', isLandscape ? 'rc-phone-frame-landscape' : 'rc-phone-frame-portrait')}
+            draggable={false}
+          />
+        )}
         <video
           ref={videoRef}
-          className={clsx('rc-video', platform === 'ios' ? 'rc-video-ios' : 'rc-video-android')}
-          style={
-            config.loadingLogo
+          className={clsx(
+            'rc-video',
+            !showFrame && 'rc-video-frameless',
+            !videoLoaded && 'rc-video-loading',
+          )}
+          style={{
+            ...videoStyle,
+            ...(config.loadingLogo
               ? {
-                  backgroundImage: `url(${config.loadingLogo})`,
+                  backgroundImage: `url("${config.loadingLogo}")`,
                   backgroundRepeat: 'no-repeat',
                   backgroundPosition: 'center',
-                  backgroundSize: '20%',
+                  backgroundSize: config.loadingLogoSize,
                 }
-              : undefined
-          }
+              : {}),
+          }}
           autoPlay
           playsInline
           muted
@@ -945,6 +1046,7 @@ export const RemoteControl = forwardRef<RemoteControlHandle, RemoteControlProps>
           onKeyDown={handleKeyboard}
           onKeyUp={handleKeyboard}
           onClick={handleVideoClick}
+          onLoadedMetadata={() => setVideoLoaded(true)}
           onFocus={() => {
             if (videoRef.current) {
               videoRef.current.style.outline = 'none';

package/src/demo.tsx

@@ -3,8 +3,8 @@ import { createRoot } from 'react-dom/client';
 import { RemoteControl, RemoteControlHandle } from './components/remote-control';
 
 function Demo() {
-  const [url, setUrl] = useState('wss://eu-hel1-5-staging.limrun.dev/v1/organizations/org_01k3v8bvxvecfvscdhvcp3rga1/ios.limrun.com/v1/instances/ios_eustg_01kd5hvbcmf7krej28t927cskb/endpointWebSocket');
-  const [token, setToken] = useState('lim_c8a8f9a45008ee01441fbd01f41d5f1b04eac8c4fc3f20de');
+  const [url, setUrl] = useState('wss://eu-hel1-5-staging.limrun.dev/v1/android_eustg_01kd8ayyfhfk8tq0a0ryap6tet/endpointWebSocket');
+  const [token, setToken] = useState('lim_44530d73085dc139b2ebe1a07658bd11af2ec422ddd2ceb7');
   const [platform, setPlatform] = useState<'ios' | 'android'>('ios');
   const [isConnected, setIsConnected] = useState(false);
   const [key, setKey] = useState(0);