@limrun/ui 0.4.0-rc.6 → 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.6",
+    "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 {
@@ -27,18 +33,37 @@
   background-color: black;
 }
 
+.rc-video-frameless {
+  position: relative;
+  height: 100%;
+  top: auto;
+  left: auto;
+}
+
 .rc-video-loading {
   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-android {
+.rc-video-ios-landscape {
+  top: 3.9%;
+  left: 1.61%;
+  width: 96.78%;
+}
+
+.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,
@@ -41,6 +43,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 {
@@ -88,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,
@@ -131,10 +139,11 @@ 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 wsRef = useRef<WebSocket | null>(null);
     const peerConnectionRef = useRef<RTCPeerConnection | null>(null);
     const dataChannelRef = useRef<RTCDataChannel | null>(null);
@@ -779,18 +788,22 @@ export const RemoteControl = forwardRef<RemoteControlHandle, RemoteControlProps>
     useEffect(() => {
       const video = videoRef.current;
       const frame = frameRef.current;
-      if (!video || !frame) return;
+      if (!video || !frame || !showFrame) return;
 
       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`;
         }
       });
 
@@ -799,7 +812,7 @@ export const RemoteControl = forwardRef<RemoteControlHandle, RemoteControlProps>
       return () => {
         resizeObserver.disconnect();
       };
-    }, [config]);
+    }, [config, showFrame]);
 
     const handleVideoClick = () => {
       if (videoRef.current) {
@@ -927,18 +940,20 @@ 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.frameImageLandscape : config.frameImage}
+            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',
+            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/ios.limrun.com/v1/instances/ios_eustg_01kd5mjeb7fnc8d4yc3f8j8c37/endpointWebSocket');
-  const [token, setToken] = useState('lim_3f6fc1574c8be1ee23afffe3601512d42f9b2ed486c7320a');
+  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);