@limrun/ui 0.4.0-rc.9 → 0.4.0

package/package.json

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

package/src/components/remote-control.css

@@ -1,13 +1,20 @@
 .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;
@@ -18,19 +25,38 @@
 
 .rc-phone-frame-portrait {
   height: 100%;
+  max-width: 100%;
 }
 
 .rc-phone-frame-landscape {
   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%;
   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-ios-stretch {
+  /* iOS-only: intentionally stretch to fill the target screen box */
+  object-fit: fill;
+  z-index: 30;
 }
 
 .rc-video-frameless {
@@ -38,32 +64,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,21 @@ 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',
+            showFrame && platform === 'ios' && 'rc-video-ios-stretch',
             !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>

package/src/demo.tsx

@@ -1,192 +0,0 @@
-import { useState, useRef } from 'react';
-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/android_eustg_01kd887q1vedb9nt1xkp0s1nan/endpointWebSocket');
-  const [token, setToken] = useState('lim_6ffd2b5de18c6dcc59e047b7b8d923024fb45d59c802ca5d');
-  const [platform, setPlatform] = useState<'ios' | 'android'>('ios');
-  const [isConnected, setIsConnected] = useState(false);
-  const [key, setKey] = useState(0);
-  const [showDebugInfo, setShowDebugInfo] = useState(false);
-  
-  const remoteControlRef = useRef<RemoteControlHandle>(null);
-
-  const handleConnect = () => {
-    if (url) {
-      setIsConnected(true);
-      // Force remount by changing key
-      setKey(prev => prev + 1);
-    }
-  };
-
-  const handleDisconnect = () => {
-    setIsConnected(false);
-    setKey(prev => prev + 1);
-  };
-
-  const handleScreenshot = async () => {
-    if (remoteControlRef.current) {
-      try {
-        const screenshot = await remoteControlRef.current.screenshot();
-        // Open screenshot in new window
-        const win = window.open();
-        if (win) {
-          win.document.write(`<img src="${screenshot.dataUri}" style="max-width: 100%;" />`);
-        }
-      } catch (error) {
-        console.error('Screenshot failed:', error);
-        alert('Screenshot failed: ' + (error as Error).message);
-      }
-    }
-  };
-
-  return (
-    <>
-      <div className="header">
-        <h1>📱 RemoteControl Component Demo</h1>
-        <p>Test the iOS device frame and remote control features</p>
-      </div>
-
-      <div className="demo-container">
-        <div className="info-box">
-          <h4>ℹ️ How to Use:</h4>
-          <p>
-            Enter your WebSocket URL and authentication token below, select iOS or Android platform,
-            then click Connect to see the remote control in action. The iOS platform will display
-            a realistic iPhone frame around the stream.
-          </p>
-          <p style={{ marginTop: '10px', fontWeight: 600 }}>
-            ✨ iOS Feature: Touches can start from the bottom bezel area (below the screen, near the 
-            home indicator) to enable authentic iOS swipe-up gestures for going home or switching apps!
-          </p>
-        </div>
-
-        <div className="controls">
-          <div className="control-group">
-            <label htmlFor="url">WebSocket URL</label>
-            <input
-              id="url"
-              type="text"
-              value={url}
-              onChange={(e) => setUrl(e.target.value)}
-              placeholder="wss://your-instance.limrun.com/control"
-              disabled={isConnected}
-            />
-          </div>
-
-          <div className="control-group">
-            <label htmlFor="token">Authentication Token</label>
-            <input
-              id="token"
-              type="password"
-              value={token}
-              onChange={(e) => setToken(e.target.value)}
-              placeholder="Enter your token"
-              disabled={isConnected}
-            />
-          </div>
-
-          <div className="control-group">
-            <label htmlFor="platform">Platform</label>
-            <select
-              id="platform"
-              value={platform}
-              onChange={(e) => setPlatform(e.target.value as 'ios' | 'android')}
-              disabled={isConnected}
-            >
-              <option value="ios">iOS (with frame)</option>
-              <option value="android">Android (no frame)</option>
-            </select>
-          </div>
-
-          <div className="control-group">
-            <label style={{ display: 'flex', alignItems: 'center', gap: '8px', cursor: 'pointer' }}>
-              <input
-                type="checkbox"
-                checked={showDebugInfo}
-                onChange={(e) => setShowDebugInfo(e.target.checked)}
-                style={{ cursor: 'pointer' }}
-              />
-              Show iOS Extended Touch Area Info
-            </label>
-          </div>
-
-          <div className="button-group">
-            {!isConnected ? (
-              <button 
-                className="primary" 
-                onClick={handleConnect}
-                disabled={!url}
-              >
-                Connect
-              </button>
-            ) : (
-              <>
-                <button className="secondary" onClick={handleDisconnect}>
-                  Disconnect
-                </button>
-                <button className="primary" onClick={handleScreenshot}>
-                  Take Screenshot
-                </button>
-              </>
-            )}
-          </div>
-        </div>
-
-        {showDebugInfo && platform === 'ios' && (
-          <div style={{
-            background: '#e0f2fe',
-            border: '2px solid #0284c7',
-            borderRadius: '8px',
-            padding: '15px',
-            marginBottom: '20px'
-          }}>
-            <h4 style={{ color: '#0c4a6e', marginBottom: '8px', fontSize: '0.95rem' }}>
-              🔧 iOS Extended Touch Area
-            </h4>
-            <p style={{ color: '#075985', fontSize: '0.9rem', lineHeight: '1.5', margin: 0 }}>
-              The iOS frame includes a <strong>60-pixel extended touch area</strong> below the visible screen.
-              This area (where the home indicator is located) can receive touch events and sends coordinates
-              beyond the screen bounds (y &gt; screenHeight), allowing iOS to properly detect gestures that
-              start from outside the screen - just like on a real iPhone. Try starting a swipe gesture from
-              the home indicator area!
-            </p>
-          </div>
-        )}
-
-        {isConnected ? (
-          <div className="device-preview">
-            <div className="preview-item">
-              <h3>{platform === 'ios' ? '📱 iOS with Frame' : '🤖 Android (No Frame)'}</h3>
-              <div className="device-wrapper">
-                <RemoteControl
-                  key={key}
-                  ref={remoteControlRef}
-                  url={url}
-                  token={token}
-                />
-              </div>
-            </div>
-          </div>
-        ) : (
-          <div style={{ 
-            textAlign: 'center', 
-            padding: '60px 20px', 
-            color: '#9ca3af',
-            fontSize: '1.1rem'
-          }}>
-            Enter your connection details above and click Connect to start
-          </div>
-        )}
-      </div>
-    </>
-  );
-}
-
-// Mount the demo app
-const container = document.getElementById('root');
-if (container) {
-  const root = createRoot(container);
-  root.render(<Demo />);
-}