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

package/package.json

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

package/src/components/remote-control.css

@@ -27,6 +27,13 @@
   background-color: black;
 }
 
+.rc-video-frameless {
+  position: relative;
+  height: 100%;
+  top: auto;
+  left: auto;
+}
+
 .rc-video-loading {
   aspect-ratio: 9 / 19.5;
 }

package/src/components/remote-control.tsx

@@ -41,6 +41,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 {
@@ -131,7 +135,7 @@ 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);
@@ -779,7 +783,7 @@ 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) {
@@ -799,7 +803,7 @@ export const RemoteControl = forwardRef<RemoteControlHandle, RemoteControlProps>
       return () => {
         resizeObserver.disconnect();
       };
-    }, [config]);
+    }, [config, showFrame]);
 
     const handleVideoClick = () => {
       if (videoRef.current) {
@@ -927,18 +931,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={config.frameImage}
+            alt=""
+            className="rc-phone-frame"
+            draggable={false}
+          />
+        )}
         <video
           ref={videoRef}
           className={clsx(
             'rc-video',
-            platform === 'ios' ? 'rc-video-ios' : 'rc-video-android',
+            showFrame ? (platform === 'ios' ? 'rc-video-ios' : 'rc-video-android') : '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/organizations/org_01k3v8bvxvecfvscdhvcp3rga1/android.limrun.com/v1/instances/android_eustg_01kd60xh0yfxzv6ccr0jz5dwf9/endpointWebSocket');
+  const [token, setToken] = useState('lim_0961f306d81a78c743aca5826d4d122c18ed5e55b813e181');
   const [platform, setPlatform] = useState<'ios' | 'android'>('ios');
   const [isConnected, setIsConnected] = useState(false);
   const [key, setKey] = useState(0);
@@ -165,6 +165,7 @@ function Demo() {
                   ref={remoteControlRef}
                   url={url}
                   token={token}
+                  showFrame={false}
                 />
               </div>
             </div>