@limrun/ui 0.4.0-rc.9 → 0.4.1

package/package.json

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

package/src/components/remote-control.css

@@ -1,11 +1,24 @@
 .rc-container {
   position: relative;
-  display: inline-block;
-  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   box-sizing: border-box;
   isolation: isolate;
 
   touch-action: none;
+  width: 100%;
+  height: 100%;
+}
+
+.rc-container-portrait {
+  width: 100%;
+  height: 100%;
+}
+
+.rc-container-landscape {
+  width: 100%;
+  height: 100%;
 }
 
 .rc-phone-frame {
@@ -14,23 +27,45 @@
   display: block;
   pointer-events: none;
   user-select: none;
+  width: auto;
+  height: auto;
+  max-width: 100%;
+  max-height: 100%;
 }
 
 .rc-phone-frame-portrait {
-  height: 100%;
+  width: auto;
+  height: auto;
+  max-width: 100%;
+  max-height: 100%;
 }
 
 .rc-phone-frame-landscape {
-  width: 100%;
+  width: auto;
+  height: auto;
+  max-width: 100%;
+  max-height: 100%;
 }
 
 .rc-video {
   position: absolute;
-  width: auto;
+  /* Size is controlled by inline style; defaults are for frameless mode */
+  width: 100%;
+  height: 100%;
+  z-index: 30;
   outline: none;
   pointer-events: none;
   cursor: none;
   background-color: black;
+  object-fit: contain;
+  object-position: center center;
+  inset: 0;
+
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  right: auto;
+  bottom: auto;
 }
 
 .rc-video-frameless {
@@ -38,32 +73,9 @@
   height: 100%;
   top: auto;
   left: auto;
+  width: 100%;
 }
 
 .rc-video-loading {
   aspect-ratio: 9 / 19.5;
-}
-
-.rc-video-ios-portrait {
-  top: 1.61%;
-  left: 3.9%;
-  height: 96.78%;
-}
-
-.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

@@ -4,10 +4,10 @@ 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.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 {
@@ -91,23 +91,50 @@ const detectPlatform = (url: string): DevicePlatform => {
   return 'ios';
 };
 
+type DeviceConfig = {
+  videoBorderRadiusMultiplier: number;
+  loadingLogo: string;
+  loadingLogoSize: string;
+  videoPosition: {
+    portrait: { heightMultiplier?: number; widthMultiplier?: number; };
+    landscape: { heightMultiplier?: number; widthMultiplier?: 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,
-    frameImageLandscape: iphoneFrameImageLandscape,
-    frameWidthMultiplier: 1.0841,
+    frame: {
+      image: iphoneFrameImage,
+      imageLandscape: iphoneFrameImageLandscape,
+    },
     videoBorderRadiusMultiplier: 0.15,
     loadingLogo: appleLogoSvg,
     loadingLogoSize: '20%',
+    // Video position as percentage of frame dimensions
+    videoPosition: {
+      portrait: { heightMultiplier: 0.9678 },
+      landscape: { widthMultiplier: 0.9678 },
+    },
   },
   android: {
-    frameImage: pixelFrameImage,
-    frameImageLandscape: pixelFrameImageLandscape,
-    frameWidthMultiplier: 1.107,
+    frame: {
+      image: pixelFrameImage,
+      imageLandscape: pixelFrameImageLandscape,
+    },
     videoBorderRadiusMultiplier: 0.13,
     loadingLogo: androidBootImage,
     loadingLogoSize: '40%',
+    // Video position as percentage of frame dimensions
+    videoPosition: {
+      portrait: { heightMultiplier: 0.967 },
+      landscape: { widthMultiplier: 0.962 },
+    },
   },
 };
 
@@ -147,6 +174,7 @@ export const RemoteControl = forwardRef<RemoteControlHandle, RemoteControlProps>
     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);
@@ -787,33 +815,70 @@ 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 || !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 (!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 = `${(entry.contentRect.width > entry.contentRect.height ? videoHeight : 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;
+        let newStyle: React.CSSProperties = {};
+        if (pos.heightMultiplier) {
+          newStyle.height = `${frameHeight * pos.heightMultiplier}px`;
+          // Let the other dimension follow the video stream's intrinsic aspect ratio.
+          newStyle.width = 'auto';
+        } else if (pos.widthMultiplier) {
+          newStyle.width = `${frameWidth * pos.widthMultiplier}px`;
+          // Let the other dimension follow the video stream's intrinsic aspect ratio.
+          newStyle.height = 'auto';
         }
+        newStyle.borderRadius = `${landscape ? frameHeight * config.videoBorderRadiusMultiplier : frameWidth * 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);
+
+      // IMPORTANT: When the WebRTC stream changes orientation, the intrinsic video size
+      // (videoWidth/videoHeight) can change without re-firing 'loadedmetadata'.
+      // The <video> element emits 'resize' in that case.
+      video.addEventListener('resize', updateVideoPosition);
+
+      // Initial calculation
+      updateVideoPosition();
 
       return () => {
         resizeObserver.disconnect();
+        video.removeEventListener('loadedmetadata', updateVideoPosition);
+        video.removeEventListener('resize', updateVideoPosition);
+        frame.removeEventListener('load', updateVideoPosition);
       };
     }, [config, showFrame]);
 
@@ -928,7 +993,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
@@ -946,7 +1012,7 @@ export const RemoteControl = forwardRef<RemoteControlHandle, RemoteControlProps>
         {showFrame && (
           <img
             ref={frameRef}
-            src={isLandscape ? config.frameImageLandscape : config.frameImage}
+            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}
@@ -956,19 +1022,20 @@ export const RemoteControl = forwardRef<RemoteControlHandle, RemoteControlProps>
           ref={videoRef}
           className={clsx(
             'rc-video',
-            showFrame ? (platform === 'ios' ? (isLandscape ? 'rc-video-ios-landscape' : 'rc-video-ios-portrait') : isLandscape ? 'rc-video-android-landscape' : 'rc-video-android-portrait') : 'rc-video-frameless',
+            !showFrame && 'rc-video-frameless',
             !videoLoaded && 'rc-video-loading',
           )}
-          style={
-            config.loadingLogo
+          style={{
+            ...videoStyle,
+            ...(config.loadingLogo
               ? {
                   backgroundImage: `url("${config.loadingLogo}")`,
                   backgroundRepeat: 'no-repeat',
                   backgroundPosition: 'center',
                   backgroundSize: config.loadingLogoSize,
                 }
-              : {}
-          }
+              : {}),
+          }}
           autoPlay
           playsInline
           muted

package/dist/demo.d.ts

@@ -1 +0,0 @@
-export {};

package/index.html

@@ -1,181 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>RemoteControl Demo - @limrun/ui</title>
-    <style>
-      * {
-        margin: 0;
-        padding: 0;
-        box-sizing: border-box;
-      }
-      
-      body {
-        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-        min-height: 100vh;
-        padding: 20px;
-      }
-      
-      #root {
-        display: flex;
-        flex-direction: column;
-        gap: 20px;
-        max-width: 1400px;
-        margin: 0 auto;
-      }
-      
-      .header {
-        text-align: center;
-        color: white;
-        padding: 20px;
-      }
-      
-      .header h1 {
-        font-size: 2.5rem;
-        margin-bottom: 10px;
-        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
-      }
-      
-      .header p {
-        font-size: 1.1rem;
-        opacity: 0.9;
-      }
-      
-      .demo-container {
-        background: white;
-        border-radius: 20px;
-        padding: 30px;
-        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
-      }
-      
-      .controls {
-        display: flex;
-        flex-direction: column;
-        gap: 15px;
-        margin-bottom: 30px;
-      }
-      
-      .control-group {
-        display: flex;
-        flex-direction: column;
-        gap: 8px;
-      }
-      
-      .control-group label {
-        font-weight: 600;
-        font-size: 0.9rem;
-        color: #374151;
-      }
-      
-      .control-group input,
-      .control-group select {
-        padding: 10px 15px;
-        border: 2px solid #e5e7eb;
-        border-radius: 8px;
-        font-size: 0.95rem;
-        transition: border-color 0.2s;
-      }
-      
-      .control-group input:focus,
-      .control-group select:focus {
-        outline: none;
-        border-color: #667eea;
-      }
-      
-      .button-group {
-        display: flex;
-        gap: 10px;
-      }
-      
-      button {
-        padding: 12px 24px;
-        border: none;
-        border-radius: 8px;
-        font-size: 1rem;
-        font-weight: 600;
-        cursor: pointer;
-        transition: all 0.2s;
-      }
-      
-      button.primary {
-        background: #667eea;
-        color: white;
-      }
-      
-      button.primary:hover {
-        background: #5568d3;
-        transform: translateY(-1px);
-        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
-      }
-      
-      button.secondary {
-        background: #e5e7eb;
-        color: #374151;
-      }
-      
-      button.secondary:hover {
-        background: #d1d5db;
-      }
-      
-      button:disabled {
-        opacity: 0.5;
-        cursor: not-allowed;
-      }
-      
-      .device-preview {
-        display: flex;
-        gap: 30px;
-        justify-content: center;
-        flex-wrap: wrap;
-      }
-      
-      .preview-item {
-        flex: 1;
-        min-width: 300px;
-        max-width: 800px;
-        max-height: 800px;
-      }
-      
-      .preview-item h3 {
-        text-align: center;
-        margin-bottom: 15px;
-        font-size: 1.2rem;
-        color: #374151;
-      }
-      
-      .device-wrapper {
-        height: 100%;
-        width: 100%;
-        background: #f9fafb;
-        border-radius: 12px;
-        overflow: hidden;
-      }
-      
-      .info-box {
-        background: #fef3c7;
-        border: 2px solid #fbbf24;
-        border-radius: 8px;
-        padding: 15px;
-        margin-bottom: 20px;
-      }
-      
-      .info-box h4 {
-        color: #92400e;
-        margin-bottom: 8px;
-        font-size: 0.95rem;
-      }
-      
-      .info-box p {
-        color: #78350f;
-        font-size: 0.9rem;
-        line-height: 1.5;
-      }
-    </style>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/demo.tsx"></script>
-  </body>
-</html>