@limrun/ui 0.4.0-rc.7 → 0.4.0-rc.8

package/index.html

@@ -134,7 +134,8 @@
       .preview-item {
         flex: 1;
         min-width: 300px;
-        max-width: 500px;
+        max-width: 800px;
+        max-height: 800px;
       }
       
       .preview-item h3 {
@@ -145,7 +146,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.7",
+    "version": "0.4.0-rc.8",
     "publishConfig": {
       "access": "public"
     },

package/src/components/remote-control.css

@@ -12,10 +12,16 @@
   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%;
+}
+
+.rc-phone-frame-landscape {
+  width: 100%;
 }
 
 .rc-video {
@@ -38,14 +44,26 @@
   aspect-ratio: 9 / 19.5;
 }
 
-.rc-video-ios {
+.rc-video-ios-portrait {
   top: 1.61%;
   left: 3.9%;
-  height: 96.76%;
+  height: 96.78%;
+}
+
+.rc-video-ios-landscape {
+  top: 3.9%;
+  left: 1.61%;
+  width: 96.78%;
 }
 
-.rc-video-android {
+.rc-video-android-portrait {
   top: 2.25%;
   left: 4.5%;
   height: 95.9%;
 }
+
+.rc-video-android-landscape {
+  left: 2.25%;
+  top: 4.5%;
+  width: 95.9%;
+}

package/src/components/remote-control.tsx

@@ -6,6 +6,8 @@ import { ANDROID_KEYS, AMOTION_EVENT, codeMap } from '../core/constants';
 
 import iphoneFrameImage from '../assets/iphone16pro_black.webp';
 import pixelFrameImage from '../assets/pixel9_black.webp';
+import pixelFrameImageLandscape from '../assets/pixel9_black_landscape.webp';
+import iphoneFrameImageLandscape from '../assets/iphone16pro_black_landscape.webp';
 import appleLogoSvg from '../assets/Apple_logo_white.svg';
 import {
   createTouchControlMessage,
@@ -92,12 +94,14 @@ const detectPlatform = (url: string): DevicePlatform => {
 const deviceConfig = {
   ios: {
     frameImage: iphoneFrameImage,
+    frameImageLandscape: iphoneFrameImageLandscape,
     frameWidthMultiplier: 1.0841,
     videoBorderRadiusMultiplier: 0.15,
     loadingLogo: appleLogoSvg,
   },
   android: {
     frameImage: pixelFrameImage,
+    frameImageLandscape: pixelFrameImageLandscape,
     frameWidthMultiplier: 1.107,
     videoBorderRadiusMultiplier: 0.13,
     loadingLogo: undefined,
@@ -139,6 +143,7 @@ export const RemoteControl = forwardRef<RemoteControlHandle, RemoteControlProps>
     const videoRef = useRef<HTMLVideoElement>(null);
     const frameRef = useRef<HTMLImageElement>(null);
     const [videoLoaded, setVideoLoaded] = useState(false);
+    const [isLandscape, setIsLandscape] = useState(false);
     const wsRef = useRef<WebSocket | null>(null);
     const peerConnectionRef = useRef<RTCPeerConnection | null>(null);
     const dataChannelRef = useRef<RTCDataChannel | null>(null);
@@ -787,14 +792,18 @@ export const RemoteControl = forwardRef<RemoteControlHandle, RemoteControlProps>
 
       const resizeObserver = new ResizeObserver((entries) => {
         for (const entry of entries) {
+          const landscape = entry.contentRect.width > entry.contentRect.height;
+          setIsLandscape(landscape);
           const videoWidth = entry.contentRect.width;
+          const videoHeight = entry.contentRect.height;
           const originalFrameWidth = frame.clientWidth;
           const newFrameWidth = videoWidth * config.frameWidthMultiplier;
           // The video is too small up until the first frame is visible, so we need to make sure we don't scale the frame down too much.
-          if (newFrameWidth > 0.9*originalFrameWidth) {
+          if (!landscape && newFrameWidth > 0.9*originalFrameWidth) {
+            // This is mostly for iOS where the video size is slightly inconsistent.
             frame.style.width = `${videoWidth * config.frameWidthMultiplier}px`;
           }
-          video.style.borderRadius = `${videoWidth * config.videoBorderRadiusMultiplier}px`;
+          video.style.borderRadius = `${(entry.contentRect.width > entry.contentRect.height ? videoHeight : videoWidth) * config.videoBorderRadiusMultiplier}px`;
         }
       });
 
@@ -934,9 +943,9 @@ export const RemoteControl = forwardRef<RemoteControlHandle, RemoteControlProps>
         {showFrame && (
           <img
             ref={frameRef}
-            src={config.frameImage}
+            src={isLandscape ? config.frameImageLandscape : config.frameImage}
             alt=""
-            className="rc-phone-frame"
+            className={clsx('rc-phone-frame', isLandscape ? 'rc-phone-frame-landscape' : 'rc-phone-frame-portrait')}
             draggable={false}
           />
         )}
@@ -944,7 +953,7 @@ export const RemoteControl = forwardRef<RemoteControlHandle, RemoteControlProps>
           ref={videoRef}
           className={clsx(
             'rc-video',
-            showFrame ? (platform === 'ios' ? 'rc-video-ios' : 'rc-video-android') : 'rc-video-frameless',
+            showFrame ? (platform === 'ios' ? (isLandscape ? 'rc-video-ios-landscape' : 'rc-video-ios-portrait') : isLandscape ? 'rc-video-android-landscape' : 'rc-video-android-portrait') : 'rc-video-frameless',
             !videoLoaded && 'rc-video-loading',
           )}
           style={

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/android.limrun.com/v1/instances/android_eustg_01kd60xh0yfxzv6ccr0jz5dwf9/endpointWebSocket');
-  const [token, setToken] = useState('lim_0961f306d81a78c743aca5826d4d122c18ed5e55b813e181');
+  const [url, setUrl] = useState('wss://eu-hel1-5-staging.limrun.dev/v1/ios_eustg_01kd7xz7wnecrr3qtc0mp9pyb4/endpointWebSocket');
+  const [token, setToken] = useState('lim_e38efd8b6b38733e268514a866e7b568d1bdc106632bfc9f');
   const [platform, setPlatform] = useState<'ios' | 'android'>('ios');
   const [isConnected, setIsConnected] = useState(false);
   const [key, setKey] = useState(0);
@@ -165,7 +165,6 @@ function Demo() {
                   ref={remoteControlRef}
                   url={url}
                   token={token}
-                  showFrame={false}
                 />
               </div>
             </div>