@limrun/ui 0.4.0-rc.2 → 0.4.0-rc.4

package/package.json

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

package/src/components/remote-control.css

@@ -27,6 +27,10 @@
   background-color: black;
 }
 
+.rc-video-loading {
+  aspect-ratio: 9 / 19.5;
+}
+
 .rc-video-ios {
   top: 1.6%;
   left: 3.9%;

package/src/components/remote-control.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useMemo, forwardRef, useImperativeHandle } from 'react';
+import React, { useEffect, useRef, useMemo, useState, forwardRef, useImperativeHandle } from 'react';
 import { clsx } from 'clsx';
 import './remote-control.css';
 
@@ -134,6 +134,7 @@ export const RemoteControl = forwardRef<RemoteControlHandle, RemoteControlProps>
   ({ className, url, token, sessionId: propSessionId, openUrl }: RemoteControlProps, ref) => {
     const videoRef = useRef<HTMLVideoElement>(null);
     const frameRef = useRef<HTMLImageElement>(null);
+    const [videoLoaded, setVideoLoaded] = useState(false);
     const wsRef = useRef<WebSocket | null>(null);
     const peerConnectionRef = useRef<RTCPeerConnection | null>(null);
     const dataChannelRef = useRef<RTCDataChannel | null>(null);
@@ -752,6 +753,9 @@ export const RemoteControl = forwardRef<RemoteControlHandle, RemoteControlProps>
     };
 
     useEffect(() => {
+      // Reset video loaded state when connection params change
+      setVideoLoaded(false);
+
       // Start connection when component mounts
       start();
 
@@ -780,7 +784,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`;
         }
       });
@@ -927,7 +936,11 @@ export const RemoteControl = forwardRef<RemoteControlHandle, RemoteControlProps>
         />
         <video
           ref={videoRef}
-          className={clsx('rc-video', platform === 'ios' ? 'rc-video-ios' : 'rc-video-android')}
+          className={clsx(
+            'rc-video',
+            platform === 'ios' ? 'rc-video-ios' : 'rc-video-android',
+            !videoLoaded && 'rc-video-loading',
+          )}
           style={
             config.loadingLogo
               ? {
@@ -945,6 +958,7 @@ export const RemoteControl = forwardRef<RemoteControlHandle, RemoteControlProps>
           onKeyDown={handleKeyboard}
           onKeyUp={handleKeyboard}
           onClick={handleVideoClick}
+          onPlaying={() => setVideoLoaded(true)}
           onFocus={() => {
             if (videoRef.current) {
               videoRef.current.style.outline = 'none';