@limrun/ui 0.4.0-rc.1 → 0.4.0-rc.3

package/package.json

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

package/src/components/remote-control.tsx

@@ -96,7 +96,7 @@ const deviceConfig = {
     frameImage: pixelFrameImage,
     frameWidthMultiplier: 1.107,
     videoBorderRadiusMultiplier: 0.137,
-    loadingLogo: null,
+    loadingLogo: undefined,
   },
 };
 
@@ -780,7 +780,12 @@ export const RemoteControl = forwardRef<RemoteControlHandle, RemoteControlProps>
       const resizeObserver = new ResizeObserver((entries) => {
         for (const entry of entries) {
           const videoWidth = entry.contentRect.width;
-          frame.style.width = `${videoWidth * config.frameWidthMultiplier}px`;
+          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) {
+            frame.style.width = `${videoWidth * config.frameWidthMultiplier}px`;
+          }
           video.style.borderRadius = `${videoWidth * config.videoBorderRadiusMultiplier}px`;
         }
       });
@@ -931,12 +936,12 @@ export const RemoteControl = forwardRef<RemoteControlHandle, RemoteControlProps>
           style={
             config.loadingLogo
               ? {
-                  backgroundImage: `url(${config.loadingLogo})`,
+                  backgroundImage: `url("${config.loadingLogo}")`,
                   backgroundRepeat: 'no-repeat',
                   backgroundPosition: 'center',
                   backgroundSize: '20%',
                 }
-              : undefined
+              : {}
           }
           autoPlay
           playsInline

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_01kd5hvbcmf7krej28t927cskb/endpointWebSocket');
-  const [token, setToken] = useState('lim_c8a8f9a45008ee01441fbd01f41d5f1b04eac8c4fc3f20de');
+  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 [platform, setPlatform] = useState<'ios' | 'android'>('ios');
   const [isConnected, setIsConnected] = useState(false);
   const [key, setKey] = useState(0);